|
|
@@ -0,0 +1,150 @@
|
|
|
+<!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>
|
lisihan