lisihan
/
Create-knowledge-find-decode


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
							<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>创作知识 · 流水线可视化</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
  :root{--bg:#0f1115;--panel:#171a21;--panel2:#1e222b;--line:#2a2f3a;--fg:#e6e8ec;--mut:#8b93a1;--ac:#5b9dff;--ok:#36c08a;--no:#e0556b;--warn:#e0a23a;--what:#5b9dff;--why:#c084fc;--how:#36c08a;}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 -apple-system,"PingFang SC",Segoe UI,Roboto,sans-serif}
  header{padding:14px 20px;border-bottom:1px solid var(--line);font-weight:600;display:flex;gap:10px;align-items:center}
  header .sub{color:var(--mut);font-weight:400;font-size:13px}
  .wrap{display:flex;height:calc(100vh - 51px)}
  .side{width:300px;border-right:1px solid var(--line);overflow:auto;flex:none}
  .main{flex:1;overflow:auto;padding:20px}
  .pitem{padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer}
  .pitem:hover{background:var(--panel)}
  .pitem.sel{background:var(--panel2);border-left:3px solid var(--ac)}
  .pitem .id{font-size:12px;color:var(--mut);word-break:break-all}
  .pitem .row{display:flex;gap:8px;align-items:center;margin-top:4px}
  .badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:var(--panel2);color:var(--mut);border:1px solid var(--line)}
  .badge.ok{background:rgba(54,192,138,.15);color:var(--ok);border-color:transparent}
  .badge.no{background:rgba(224,85,107,.15);color:var(--no);border-color:transparent}
  .badge.ac{background:rgba(91,157,255,.15);color:var(--ac);border-color:transparent}
  .badge.warn{background:rgba(224,162,58,.15);color:var(--warn);border-color:transparent}
  .badge.what{background:rgba(91,157,255,.15);color:var(--what);border-color:transparent}
  .badge.why{background:rgba(192,132,252,.15);color:var(--why);border-color:transparent}
  .badge.how{background:rgba(54,192,138,.15);color:var(--how);border-color:transparent}
  .stage{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:16px;overflow:hidden}
  .stage>h3{margin:0;padding:10px 16px;background:var(--panel2);font-size:13px;display:flex;gap:8px;align-items:center}
  .stage>h3 .n{width:20px;height:20px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
  .stage .body{padding:14px 16px}
  .kv{color:var(--mut);font-size:12px;margin:0 0 4px}
  .imgs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
  .imgs img{width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in;transition:transform .1s}
  .imgs img:hover{transform:scale(1.05);border-color:var(--ac)}
  .card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:10px}
  .card h4{margin:0 0 8px;font-size:14px}
  .chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
  pre{white-space:pre-wrap;word-break:break-word;background:#0c0e12;border:1px solid var(--line);border-radius:6px;padding:10px;font-size:12px;color:#c8cdd6;margin:6px 0 0;max-height:260px;overflow:auto}
  details summary{cursor:pointer;color:var(--mut);font-size:12px;margin-top:8px}
  .whh{margin:8px 0;padding-left:10px;border-left:2px solid var(--line)}
  .whh.w{border-color:var(--what)} .whh.y{border-color:var(--why)} .whh.h{border-color:var(--how)}
  .whh b{font-size:12px}
  .whh.w b{color:var(--what)} .whh.y b{color:var(--why)} .whh.h b{color:var(--how)}
  .link{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(91,157,255,.12);border:1px solid var(--ac);border-radius:8px;color:var(--ac);text-decoration:none;font-size:13px;margin-bottom:10px}
  .crit{background:#0c0e12;border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:12px}
  .crit .t{color:var(--mut);font-size:12px;margin-bottom:6px}
  .crit ul{margin:0;padding-left:18px} .crit li{margin:3px 0;font-size:13px}
  .scope{display:flex;gap:8px;align-items:baseline;margin:4px 0}
  .scope .st{color:var(--ac);font-size:12px;min-width:42px}
  .lb{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:50;cursor:zoom-out}
  .lb img{max-width:92vw;max-height:92vh;border-radius:8px}
  a{color:var(--ac)}
  .empty{color:var(--mut);padding:40px;text-align:center}
  .sub2{color:var(--mut);font-size:12px;margin:-2px 0 8px}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {useState,useEffect} = React;
const j = (u)=>fetch(u).then(r=>r.json());
const SCOPE_CN = {substance:"实质",form:"形式",feeling:"感受",effect:"作用",intent:"意图"};
const TYPE_KIND = {what:"what",why:"why",how:"how"};

function Badge({kind,children}){return <span className={"badge "+(kind||"")}>{children}</span>;}

function PostList({posts,sel,onSel}){
  return <div className="side">
    {posts.map(p=>{
      const k = p.stage==="done"?"ok":p.stage==="rejected"?"no":p.stage==="failed"?"no":"warn";
      return <div key={p.id} className={"pitem"+(sel===p.id?" sel":"")} onClick={()=>onSel(p.id)}>
        <div className="id">{p.id}</div>
        <div className="row"><Badge kind={k}>{p.stage}</Badge><Badge kind="ac">{p.item_count} 条知识</Badge></div>
      </div>;
    })}
  </div>;
}

function Stage({n,title,sub,children}){
  return <div className="stage"><h3><span className="n">{n}</span>{title}</h3>
    <div className="body">{sub&&<div className="sub2">{sub}</div>}{children}</div></div>;
}

function SplitCard({item}){
  return <div className="card">
    <h4>{item.title||"(无标题)"}</h4>
    <div className="chips">{(item.knowledge_types||[]).map(t=><Badge key={t} kind={TYPE_KIND[t]}>{t.toUpperCase()}</Badge>)}</div>
    {item.what&&<div className="whh w"><b>What · 是什么</b><div>{item.what}</div></div>}
    {item.why&&<div className="whh y"><b>Why · 为什么</b><div>{item.why}</div></div>}
    {item.how&&<div className="whh h"><b>How · 怎么做</b><div>{item.how}</div></div>}
    {(item.evidence&&item.evidence.length>0)&&
      <details><summary>原文证据（{item.evidence.length}）</summary><pre>{item.evidence.join("\n")}</pre></details>}
  </div>;
}

function DeconCard({it}){
  const item=it.item||{}, deco=it.deconstruction||{}, payload=it.ingest_payload||{};
  return <div className="card">
    <h4>{item.title||"(无标题)"}</h4>
    <div className="kv" style={{marginTop:8}}>阶段（灵感 / 选题 / 脚本）</div>
    <div className="chips">{(deco.stages||[]).length? deco.stages.map(s=><Badge key={s} kind="ac">{s}</Badge>) : <span className="kv">—</span>}</div>
    <div className="kv" style={{marginTop:8}}>作用域（实质 / 形式 / 感受 / 作用 / 意图）</div>
    {(deco.scopes||[]).length? (deco.scopes||[]).map((s,i)=>
      <div className="scope" key={i}><span className="st">{SCOPE_CN[s.scope_type]||s.scope_type}</span><span>{s.value}</span></div>
    ) : <div className="kv">—</div>}
    <details><summary>组装后的入库数据（ingest payload）</summary><pre>{JSON.stringify(payload,null,2)}</pre></details>
  </div>;
}

function Pipeline({postId,onZoom}){
  const [post,setPost]=useState(null);
  const [items,setItems]=useState([]);
  useEffect(()=>{ if(!postId)return; setPost(null);setItems([]);
    j("/api/posts/"+postId).then(setPost);
    j("/api/posts/"+postId+"/items").then(setItems);
  },[postId]);
  if(!postId) return <div className="empty">← 左边选一个帖子</div>;
  if(!post) return <div className="empty">加载中…</div>;
  const inner=(post.raw&&post.raw.data&&post.raw.data.data)||{};
  const scr=post.screening||{};
  const imgs=(inner.image_url_list||[]).map(x=>x.image_url||x);
  return <div>
    <Stage n="1" title="原文">
      <a className="link" href={post.url} target="_blank" rel="noreferrer">🔗 打开原帖</a>
      <p className="kv">作者 {inner.channel_account_name||"—"} · 类型 {inner.content_type||"—"}</p>
      <div><b>{inner.title||"(无标题)"}</b></div>
      <pre>{inner.body_text||"(正文为空，知识在图片里)"}</pre>
      <div className="imgs">{imgs.map((u,i)=><img key={i} src={u} title="点击放大"
        onClick={()=>onZoom(u)} onError={e=>e.target.style.display='none'}/>)}</div>
    </Stage>

    <Stage n="2" title="筛选" sub="判断这篇帖子值不值得提取成创作知识">
      <div className="crit">
        <div className="t">筛选标准（4 条都满足才通过）</div>
        <ul>
          <li>内容不是空的</li>
          <li>讲的是"怎么做内容"的方法或经验，不是一条作品本身（比如一段文案、一张图）</li>
          <li>至少包含一种：是什么（What）/ 为什么（Why）/ 怎么做（How）</li>
          <li>至少能拆出一条能用的创作知识</li>
        </ul>
      </div>
      <div className="chips">
        <Badge kind={scr.passed?"ok":"no"}>{scr.passed?"✓ 通过":"✕ 淘汰"}</Badge>
        <Badge kind="ac">评分 {scr.score}/10</Badge>
      </div>
      <div className="kv" style={{marginTop:6}}>判断理由</div>
      <div>{scr.reason||"—"}</div>
    </Stage>

    <Stage n="3" title={"知识拆分（"+items.length+" 条）"} sub="把帖子拆成 What / Why / How 知识片段">
      {items.length? items.map((it,i)=><SplitCard key={i} item={it.item||{}}/>) : <div className="kv">无（被淘汰或未拆出）</div>}
    </Stage>

    <Stage n="4" title="知识解构" sub="给每条知识标注 阶段 与 作用域">
      {items.length? items.map((it,i)=><DeconCard key={i} it={it}/>) : <div className="kv">无</div>}
    </Stage>
  </div>;
}

function App(){
  const [posts,setPosts]=useState([]);
  const [sel,setSel]=useState(null);
  const [zoom,setZoom]=useState(null);
  useEffect(()=>{ j("/api/posts").then(ps=>{setPosts(ps); if(ps[0])setSel(ps[0].id);}); },[]);
  return <div>
    <header>创作知识 <span className="sub">· 帖子知识流水线（{posts.length} 帖）</span></header>
    <div className="wrap">
      <PostList posts={posts} sel={sel} onSel={setSel}/>
      <div className="main"><Pipeline postId={sel} onZoom={setZoom}/></div>
    </div>
    {zoom&&<div className="lb" onClick={()=>setZoom(null)}><img src={zoom}/></div>}
  </div>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
</script>
</body>
</html>