lisihan
/
Create-knowledge-find-decode


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
							<!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;}
  *{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}
  .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:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
  .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}
  .whh b{color:var(--ac);font-size:12px}
  a{color:var(--ac)}
  .empty{color:var(--mut);padding:40px;text-align:center}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {useState,useEffect} = React;
const j = (u)=>fetch(u).then(r=>r.json());

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

function PostList({posts,sel,onSel}){
  return <div className="side">
    {posts.map(p=>{
      const stageKind = 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={stageKind}>{p.stage}</Badge>
          <Badge kind="ac">{p.item_count} 片段</Badge>
        </div>
      </div>;
    })}
  </div>;
}

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

function ItemCard({it}){
  const item=it.item||{}, deco=it.deconstruction||{}, payload=it.ingest_payload||{};
  const ist=it.ingest_status;
  return <div className="card">
    <h4>{item.title||"(无标题)"}</h4>
    <div className="chips">
      {(item.knowledge_types||[]).map(t=><Badge key={t} kind="ac">{t}</Badge>)}
      {(deco.stages||[]).map(s=><Badge key={s}>{s}</Badge>)}
      <Badge kind={ist==="ingested"?"ok":ist==="failed"?"no":"warn"}>{ist}</Badge>
    </div>
    {item.what&&<div className="whh"><b>What</b><div>{item.what}</div></div>}
    {item.why&&<div className="whh"><b>Why</b><div>{item.why}</div></div>}
    {item.how&&<div className="whh"><b>How</b><div>{item.how}</div></div>}
    <div className="chips">
      {(deco.scopes||[]).map((s,i)=><Badge key={i}>{s.scope_type}: {s.value}</Badge>)}
    </div>
    <details><summary>ingest payload</summary>
      <pre>{JSON.stringify(payload,null,2)}</pre>
    </details>
  </div>;
}

function Pipeline({postId}){
  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 ex=post.extracted||{}, scr=post.screening||{};
  const imgs=(inner.image_url_list||[]).map(x=>x.image_url||x).slice(0,9);
  return <div>
    <Stage n="1" title="原文（拉取）">
      <p className="kv">作者 {inner.channel_account_name} · 类型 {inner.content_type} · <a href={post.url} target="_blank">原链接</a></p>
      <div><b>{inner.title||"(无标题)"}</b></div>
      <pre>{inner.body_text||"(正文为空)"}</pre>
      <div className="imgs">{imgs.map((u,i)=><img key={i} src={u} onError={e=>e.target.style.display='none'}/>)}</div>
    </Stage>
    <Stage n="2" title="多模态提取（Gemini）">
      <div className="chips"><Badge kind={ex.is_empty?"no":"ok"}>is_empty: {String(ex.is_empty)}</Badge></div>
      {ex.from_image&&<div className="whh"><b>图片提取</b><div>{ex.from_image}</div></div>}
      {ex.from_video&&<div className="whh"><b>视频提取</b><div>{ex.from_video}</div></div>}
      {ex.text&&<pre>{ex.text}</pre>}
    </Stage>
    <Stage n="3" title="筛选">
      <div className="chips">
        <Badge kind={scr.passed?"ok":"no"}>{scr.passed?"passed":"rejected"}</Badge>
        <Badge kind="ac">score {scr.score}</Badge>
      </div>
      <div>{scr.reason}</div>
    </Stage>
    <Stage n="4" title={"知识片段（"+items.length+"）"}>
      {items.length? items.map((it,i)=><ItemCard key={i} it={it}/>) : <div className="kv">无（被筛选淘汰或未拆出）</div>}
    </Stage>
  </div>;
}

function App(){
  const [posts,setPosts]=useState([]);
  const [sel,setSel]=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}/></div>
    </div>
  </div>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
</script>
</body>
</html>