Build model latency reference and duplex dialogue flow estimator
This commit is contained in:
wuyang6
+140
@@ -0,0 +1,140 @@
|
||||
import React, { useState,useEffect,useMemo,useRef,memo } from 'react';
|
||||
import { ReactFlow,Background,Controls,Handle,Position,applyNodeChanges,applyEdgeChanges,MarkerType } from '@xyflow/react';
|
||||
import { ArrowUpRight,ArrowRight,Activity,AudioLines,GitBranch,Clock3,Layers3,Plus,ChevronDown,ChevronRight,Download,Upload,RotateCcw,LayoutGrid,Trash2,Copy,Check,Search,BookOpen,SlidersHorizontal,Play,Pause,X,Info,Link2,Braces,Mic,Volume2,BrainCircuit,Workflow,ExternalLink,Menu } from 'lucide-react';
|
||||
import { RECORDS,SOURCES,CUTOFF,RELEASE,EVIDENCE,METRICS,recordValue,HARDWARE,SIZE_OPTIONS,CALIBRATION } from './catalog.js';
|
||||
import { DEFAULT_GLOBALS,KINDS,MODEL_KINDS,simulateGraph,estimateNode,validateGraph,validateDocument,autoLayout,getRecord,ms } from './engine.js';
|
||||
import { PRESETS,makeDocument,nodeData,toDocument } from './presets.js';
|
||||
|
||||
const STORE='latency-lab-v1';
|
||||
const icons={input:Mic,asr:AudioLines,llm:BrainCircuit,speech:AudioLines,tts:Volume2,program:Braces,merge:GitBranch,output:Volume2};
|
||||
function loadSaved(){try{const d=JSON.parse(localStorage.getItem(STORE)||'null');if(d&&!validateDocument(d).length)return d;}catch{}return makeDocument();}
|
||||
function download(name,value,type='application/json'){const blob=new Blob([value],{type}),url=URL.createObjectURL(blob),a=document.createElement('a');a.href=url;a.download=name;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);}
|
||||
const options = entries => entries.map(([value,label])=><option key={value} value={value}>{label}</option>);
|
||||
function Field({label,children,hint}) {return <label className="field"><span>{label}</span>{children}{hint&&<small>{hint}</small>}</label>;}
|
||||
function Num({value,onChange,min=0,max=1e6,step=1,label}){return <input aria-label={label} type="number" min={min} max={max} step={step} value={value??0} onChange={e=>onChange(Math.min(max,Math.max(min,Number(e.target.value)||0)))}/>;}
|
||||
function Toggle({checked,onChange,children}){return <label className="toggle"><input type="checkbox" checked={!!checked} onChange={e=>onChange(e.target.checked)}/><span>{children}</span></label>;}
|
||||
function Tag({type='neutral',children}){return <span className={`tag ${type}`}>{children}</span>;}
|
||||
function SourceLink({id,children}){const s=SOURCES[id];return s?<a className="source-link" href={s.url} target="_blank" rel="noreferrer">{children||s.publisher}<ArrowUpRight size={13}/></a>:null;}
|
||||
|
||||
const StageNode=memo(function StageNode({data,selected}){
|
||||
const Icon=icons[data.kind]||Braces,r=data.result;
|
||||
return <div className={`stage-node kind-${data.kind} ${selected?'is-selected':''} ${data.critical?'is-critical':''}`}>
|
||||
{data.kind!=='input'&&<Handle type="target" position={Position.Left} aria-label={`${data.label} 输入连接点`}/>}
|
||||
<div className="stage-top"><span className="stage-icon"><Icon size={16}/></span><span>{KINDS[data.kind]}</span>{data.maxSteps>1&&<span className="loop-mark">↻ {data.maxSteps}</span>}</div>
|
||||
<strong>{data.label}</strong>
|
||||
<div className="stage-model">{MODEL_KINDS.includes(data.kind)?data.mode==='reference'?(getRecord(data.profileId)?.name||'来源参考'):`${data.arch==='moe'?`${data.size}B / A${data.active}B`:`${data.size}B`} · ${HARDWARE.find(h=>h.id===data.hardware)?.name||'自定义'}`:data.kind==='output'?'声音 / 最终结果的测量终点':data.kind==='input'?'t = 0 · 用户停说':`${data.durationMs} ms · 可修改`}</div>
|
||||
<div className="stage-bottom"><span>首出 <b>{r?ms(r.first-r.start):'—'}</b></span><span>完成 <b>{r?ms(r.end-r.start):'—'}</b></span></div>
|
||||
{data.kind!=='output'&&<Handle type="source" position={Position.Right} aria-label={`${data.label} 输出连接点`}/>}
|
||||
</div>;
|
||||
});
|
||||
const nodeTypes={stage:StageNode};
|
||||
|
||||
function Hero({onStart,onCompare}){
|
||||
return <section className="hero wrap">
|
||||
<div className="hero-copy"><div className="eyebrow"><span className="live-dot"/> INFERENCE / VOICE / AGENTS <span className="edition">研究快照 2026.11</span></div><h1>从模型的毫秒，<br/>到对话的<span>节奏。</span></h1><p>看清不同尺寸模型的输出速度，<br className="desktop-only"/>再把节点连起来，计算一场对话真正的等待。</p><div className="hero-actions"><button className="primary" onClick={onStart}>搭建对话流程 <ArrowRight size={17}/></button><button className="text-button" onClick={onCompare}>查看模型对照 <ArrowUpRight size={17}/></button></div><div className="hero-foot">公开来源逐条标注 <i/> 理论与报告分开 <i/> 估算参数可校准</div></div>
|
||||
<div className="hero-visual" aria-label="流式对话时延的示意图，非实测数据"><div className="diagram-head"><span>一场对话的时间切片</span><span>ILLUSTRATION / ms</span></div><div className="wave-line">{Array.from({length:52},(_,i)=><i key={i} style={{height:10+Math.abs(Math.sin(i*1.7)*Math.cos(i*.31))*47}}/>)}</div><div className="voice-end"><span>用户停说</span><i/><span>模型持续处理</span><i/><span>首段声音</span></div><div className="diagram-rows"><div><span>输入流</span><b className="input-stream"/><em>持续监听</em></div><div><span>推理流</span><b className="think-stream"/><em>并行工作</em></div><div><span>输出流</span><b className="output-stream"/><em>流式合成</em></div></div><div className="visual-caption"><span className="tiny-mark">↗</span><div><strong>开始得早，结束也要算清。</strong><p>首token ≠ 首音频 ≠ 完整任务</p></div></div></div>
|
||||
<div className="hero-stats"><div><b>{RECORDS.length}<span> 条</span></b><p>带来源的性能记录</p></div><div><b>0.5–2,400<span> B</span></b><p>覆盖主干 / 总参数规模</p></div><div><b>170<span> ms</span></b><p>7B语音模型公开接续报告 <SourceLink id="persona">来源</SourceLink></p></div><div><b>≤ 100<span> 步</span></b><p>每个模型节点的loop预算</p></div></div>
|
||||
</section>;
|
||||
}
|
||||
|
||||
function Comparison({addProfile}){
|
||||
const [modality,setModality]=useState('all'),[evidence,setEvidence]=useState('all'),[metric,setMetric]=useState('all'),[query,setQuery]=useState(''),[expanded,setExpanded]=useState(null),[view,setView]=useState('records'),[sort,setSort]=useState('default');
|
||||
const [hw,setHw]=useState('h200'),[cards,setCards]=useState(1),[prompt,setPrompt]=useState(1024),[tokens,setTokens]=useState(128),[spec,setSpec]=useState(1);
|
||||
const filtered=useMemo(()=>{const rows=RECORDS.filter(r=>(modality==='all'||r.modality===modality)&&(evidence==='all'||r.evidence===evidence)&&(metric==='all'||r.metric===metric)&&`${r.name} ${r.hardware} ${r.params}`.toLowerCase().includes(query.toLowerCase()));if(sort==='size')rows.sort((a,b)=>(a.size??Infinity)-(b.size??Infinity));return rows;},[modality,evidence,metric,query,sort]);
|
||||
const exportCsv=()=>{const rows=[['模型','模态','参数口径','指标','数值','单位','硬件','量化','输入tokens','并发','证据','时间','来源','限制'],...filtered.map(r=>[r.name,r.modality,r.params,METRICS[r.metric],r.value??'',r.metric==='tps'?'tok/s':r.metric==='rtf'?'RTF':'ms',r.hardware,r.precision||'',r.input??'',r.concurrency??'',EVIDENCE[r.evidence],r.date,SOURCES[r.source].url,r.note||SOURCES[r.source].note])];download('model-latency-20261106.csv','\uFEFF'+rows.map(r=>r.map(v=>'"'+String(v).replaceAll('"','""')+'"').join(',')).join('\n'),'text/csv;charset=utf-8');};
|
||||
return <section id="compare" className="compare-section wrap"><div className="section-title"><div><div className="eyebrow">01 / THE EVIDENCE</div><h2>模型时延对照</h2><p>先比较同口径，再讨论极限。尺寸相同，部署条件仍可能相差很大。</p></div><button className="outline" onClick={exportCsv}><Download size={15}/> 导出筛选数据</button></div>
|
||||
<div className="view-tabs"><button className={view==='records'?'active':''} onClick={()=>setView('records')}>公开性能记录 <span>{RECORDS.length}</span></button><button className={view==='estimate'?'active':''} onClick={()=>setView('estimate')}>统一条件尺寸估算 <Tag type="amber">工程外推</Tag></button></div>
|
||||
{view==='records'?<><div className="filters"><div className="segmented">{[['all','全部'],['text','纯文本'],['speech','端到端语音'],['tts','TTS组件']].map(([v,l])=><button className={modality===v?'active':''} onClick={()=>setModality(v)} key={v}>{l}</button>)}</div><div className="filter-controls"><label className="search-box"><Search size={15}/><input aria-label="搜索模型" placeholder="模型、尺寸或硬件" value={query} onChange={e=>setQuery(e.target.value)}/></label><select aria-label="证据类型" value={evidence} onChange={e=>setEvidence(e.target.value)}>{options([['all','全部证据'],...Object.entries(EVIDENCE)])}</select><select aria-label="时延指标" value={metric} onChange={e=>setMetric(e.target.value)}>{options([['all','全部指标'],...Object.entries(METRICS)])}</select><select aria-label="模型排序" value={sort} onChange={e=>setSort(e.target.value)}>{options([['default','来源分组'],['size','尺寸升序']])}</select></div></div>
|
||||
<div className="table-summary"><span>{filtered.length} 条记录 · 截止 {CUTOFF}</span><span>点击一行展开条件与限制</span></div><div className="table-scroll"><table className="research-table"><thead><tr><th>模型 / 规模</th><th>指标与结果</th><th>部署条件</th><th>证据与来源</th><th aria-label="操作"/></tr></thead><tbody>{filtered.map(r=><React.Fragment key={r.id}><tr className={expanded===r.id?'expanded':''} onClick={()=>setExpanded(expanded===r.id?null:r.id)} tabIndex={0} onKeyDown={e=>{if(e.key==='Enter')setExpanded(expanded===r.id?null:r.id);}}><td><strong>{r.name}</strong><span className="subline">{r.params}{r.active?` · 激活${r.active}B`:''} <span className="modality-dot">{r.modality==='text'?'文本':r.modality==='tts'?'TTS':'语音'}</span></span></td><td><b className="value">{recordValue(r)}</b><span className="subline">{r.scope}</span>{r.metric==='tps'&&<small className="derived">≈ {(1000/r.value).toFixed(2)} ms/token</small>}</td><td>{r.hardware}<span className="subline">{r.precision||'精度未披露'}{r.concurrency?` · 并发${r.concurrency}`:''}</span></td><td><Tag type={r.evidence==='theoretical'?'amber':r.evidence==='conditional'?'purple':r.evidence==='unknown'?'neutral':'green'}>{EVIDENCE[r.evidence]}</Tag><span className="subline"><SourceLink id={r.source}/><span className="record-date">{r.date}</span></span></td><td><ChevronDown size={16} className={expanded===r.id?'rotate':''}/></td></tr>{expanded===r.id&&<tr className="detail-row"><td colSpan={5}><div className="record-detail"><div><strong>这条数字说明什么</strong><p>{r.note||SOURCES[r.source].note}</p><p className="muted">输入：{r.input?`${r.input.toLocaleString()} token`:r.inputSeconds?`${r.inputSeconds}秒音频/视频`:'未充分披露'} 输出：{r.output?`${r.output} token`:'未充分披露'} {r.ttft?`另报告首token ${r.ttft}ms。`:''}{r.tps?` 另报告文本速度${r.tps} tok/s。`:''}{r.rtf?` RTF ${r.rtf}。`:''}</p><SourceLink id={r.source}>{SOURCES[r.source].title}</SourceLink></div>{r.value!=null&&r.metric!=='interrupt'&&<button className="outline" onClick={e=>{e.stopPropagation();addProfile(r);}}><Plus size={15}/> 作为流程节点参考</button>}</div></td></tr>}</React.Fragment>)}</tbody></table>{!filtered.length&&<div className="empty-state">没有匹配记录，试试其他筛选条件。</div>}</div>
|
||||
<div className="comparison-notes"><p><Info size={16}/><span><b>“最佳”必须带条件。</b>历史晶圆级结果、单卡GPU、受控接受率、生产API观测不构成统一排行榜。公开报告也不等于本网站实测。</span></p><p><span className="note-mark">A</span><span><b>MoE看两种尺寸。</b>总参数影响存储，激活参数影响每步计算；不能把30B-A3B当作30B稠密模型。</span></p></div></>:<><div className="estimate-controls"><Field label="硬件"><select value={hw} onChange={e=>setHw(e.target.value)}>{HARDWARE.map(h=><option key={h.id} value={h.id}>{h.name}</option>)}</select></Field><Field label="GPU卡数"><Num label="对照GPU卡数" value={cards} onChange={setCards} min={1} max={64}/></Field><Field label="输入token"><Num label="对照输入token" value={prompt} onChange={setPrompt}/></Field><Field label="输出token"><Num label="对照输出token" value={tokens} onChange={setTokens} min={1}/></Field><Field label="推测加速假设"><Num label="对照推测倍率" value={spec} onChange={setSpec} min={1} max={4} step={.1}/></Field></div><p className="inline-note"><Info size={16}/> FP8、模型已热身、低负载、不计网络与排队。以Qwen3/H20为速率锚点，硬件倍率和首token都是可校准的工程假设；不是硬件实测或物理下界。</p><div className="table-scroll"><table className="research-table"><thead><tr><th>稠密模型规模</th><th>估计首token</th><th>估计输出速度</th><th>完整输出估计</th><th>可部署性 / 外推</th></tr></thead><tbody>{[.5,1.5,3,7,8,14,27,32,70,120,235,405].map(size=>{const r=estimateNode({...nodeData('llm','尺寸扫描'),hardware:hw,cards,size,inputTokens:prompt,outputTokens:tokens,speculative:spec});return <tr key={size}><td><strong>{size}B</strong><span className="subline">稠密 · FP8</span></td><td className="value">{ms(r.first)}</td><td>{r.rate.toFixed(1)} tok/s<span className="subline">{(1000/r.rate).toFixed(1)} ms/token</span></td><td>{ms(r.end)}</td><td>{r.warnings.find(w=>w.includes('显存'))?<Tag type="amber">显存不足</Tag>:<Tag>估算</Tag>}<small className="subline">{r.warnings.find(w=>w.includes('显存'))||'参数变化仅代表此工程模型下的趋势。'}</small></td></tr>;})}</tbody></table></div></>}
|
||||
</section>;
|
||||
}
|
||||
|
||||
function NumberField({data,patch,keyName,label,hint,min=0,max=1e6,step=1}){return <Field label={label} hint={hint}><Num label={label} value={data[keyName]} onChange={v=>patch({[keyName]:v})} min={min} max={max} step={step}/></Field>;}
|
||||
|
||||
function NodeInspector({node,result,patch,remove,duplicate}){
|
||||
if(!node)return <div className="inspector-empty"><SlidersHorizontal size={27}/><h3>选择一个节点</h3><p>点击流程中的节点，编辑模型、参数和loop步数。也可以先从左侧添加节点。</p></div>;
|
||||
const d=node.data,isModel=MODEL_KINDS.includes(d.kind),isText=d.kind==='llm';
|
||||
const profiles=d.kind==='asr'?[]:RECORDS.filter(r=>r.value!=null&&r.metric!=='interrupt'&&(isText?r.modality==='text':d.kind==='tts'?r.modality==='tts':r.modality==='speech'));
|
||||
const chooseProfile=id=>{const r=getRecord(id);patch({profileId:id,mode:'reference',...(r?.size?{size:r.size}:{}),...(r?.active?{active:r.active,arch:'moe'}:{arch:'dense'})});};
|
||||
return <><div className="inspector-heading"><div><span className="eyebrow">NODE CONFIG</span><h3>节点设置</h3></div><div className="icon-actions"><button aria-label="复制节点" title="复制节点" onClick={duplicate}><Copy size={16}/></button><button aria-label="删除节点" title="删除节点" onClick={remove}><Trash2 size={16}/></button></div></div><Field label="节点名称"><input aria-label="节点名称" value={d.label} maxLength={80} onChange={e=>patch({label:e.target.value})}/></Field><div className="inspector-kind"><Tag>{KINDS[d.kind]}</Tag>{result&&<Tag type="green">{result.label}</Tag>}</div>
|
||||
{isModel&&<><Field label="数值来源"><select aria-label="节点数值来源" value={d.mode} onChange={e=>{if(e.target.value==='reference'&&!d.profileId&&profiles.length)chooseProfile(profiles[0].id);else patch({mode:e.target.value});}}>{options([['estimate','按类型、规模与硬件估算'],...(profiles.length?[['reference','采用公开记录作为锚点']]:[]),['custom','手动校准全部时延']])}</select></Field>
|
||||
{d.mode==='reference'?<><Field label="模型性能记录"><select aria-label="模型性能记录" value={d.profileId||''} onChange={e=>chooseProfile(e.target.value)}><option value="" disabled>选择一条性能记录</option>{profiles.map(r=><option value={r.id} key={r.id}>{r.name} · {recordValue(r)} · {r.hardware}</option>)}</select></Field>{getRecord(d.profileId)&&<div className="ref-note"><SourceLink id={getRecord(d.profileId).source}>{SOURCES[getRecord(d.profileId).source].title}</SourceLink><p>{getRecord(d.profileId).note||SOURCES[getRecord(d.profileId).source].note}</p></div>}</>:<><div className="field-pair"><Field label="结构"><select aria-label="模型结构" value={d.arch} onChange={e=>patch({arch:e.target.value})}>{options([['dense','稠密 Dense'],['moe','混合专家 MoE']])}</select></Field><Field label="参数量（B）"><input aria-label="模型参数量" type="number" list="model-sizes" min="0.1" step="0.1" value={d.size} onChange={e=>patch({size:Math.max(.1,Number(e.target.value)||.1)})}/></Field></div>{d.arch==='moe'&&<NumberField data={d} patch={patch} keyName="active" label="每token激活参数（B）" min={.1} max={d.size} step={.1}/>}<Field label="硬件"><select aria-label="节点硬件" value={d.hardware} onChange={e=>patch({hardware:e.target.value})}>{HARDWARE.map(h=><option value={h.id} key={h.id}>{h.name}</option>)}</select></Field><div className="field-pair"><NumberField data={d} patch={patch} keyName="cards" label="GPU卡数" min={1} max={256}/><Field label="量化"><select aria-label="节点量化" value={d.quant} onChange={e=>patch({quant:e.target.value})}>{options([['bf16','BF16'],['fp8','FP8 / INT8'],['int4','INT4']])}</select></Field></div></>}
|
||||
{d.mode==='custom'&&<div className="setting-group"><h4>手动校准</h4><NumberField data={d} patch={patch} keyName="customFirstMs" label={isText?'首个可见token前时延（ms）':'首包 / 尾包时延（ms）'}/>{isText?<NumberField data={d} patch={patch} keyName="customTps" label="生成速度（token/s）" min={.1} step={.1}/>:<NumberField data={d} patch={patch} keyName="customRtf" label="实时因子 RTF" min={.001} max={100} step={.01}/>}</div>}
|
||||
{isText&&<><div className="setting-group"><h4>一次推理的工作量</h4><div className="field-pair"><NumberField data={d} patch={patch} keyName="inputTokens" label="首步输入token"/><NumberField data={d} patch={patch} keyName="outputTokens" label="每步可见输出token" min={1}/></div><NumberField data={d} patch={patch} keyName="reasoningTokens" label="每步隐藏思考token" hint="在第一个可见token前完成；会增加等待。"/><NumberField data={d} patch={patch} keyName="cacheRatio" label="初始上下文缓存比例" min={0} max={.99} step={.05}/>{d.mode==='estimate'&&<NumberField data={d} patch={patch} keyName="speculative" label="推测解码加速假设" min={1} max={4} step={.1}/>}</div></>}
|
||||
{d.kind==='asr'&&<><Toggle checked={d.streamingInput} onChange={v=>patch({streamingInput:v})}>用户说话时持续识别</Toggle>{d.mode!=='custom'&&<NumberField data={d} patch={patch} keyName="durationMs" label="识别尾包时延（ms）"/>}</>}
|
||||
<div className="setting-group loop-group"><div className="group-title"><h4>Agent / 模型 loop</h4><Tag type="purple">逐步累计</Tag></div><div className="field-pair"><NumberField data={d} patch={patch} keyName="maxSteps" label="loop 最大步数" min={1} max={100}/><NumberField data={d} patch={patch} keyName="expectedSteps" label="预计实际步数" min={1} max={d.maxSteps}/></div>{d.maxSteps>1&&<><NumberField data={d} patch={patch} keyName="toolMs" label="两步之间工具等待（ms）" hint="每轮之间计一次，共N−1次；不要再重复加入同一工具预算。"/>{isText&&<NumberField data={d} patch={patch} keyName="contextGrowth" label="每步新增上下文token"/>}<Toggle checked={d.finalOnly} onChange={v=>patch({finalOnly:v})}>仅最后一步向下游输出</Toggle><p className="micro-copy">关闭后首包可能是中间反馈。loop指节点内部重复调用，不代表真实对话往返轮数。</p></>}</div><Field label="共享资源组（可选）" hint="填写相同名称的模型节点串行占用同一资源；留空则按全局设置。"><input aria-label="共享资源组" value={d.resource||''} maxLength={30} placeholder="例如 gpu-a" onChange={e=>patch({resource:e.target.value})}/></Field></>}
|
||||
{(d.kind==='program'||d.kind==='merge'||d.kind==='output')&&<NumberField data={d} patch={patch} keyName="durationMs" label={d.kind==='output'?'播放 / 输出缓冲（ms）':'默认执行耗时（ms）'}/>}
|
||||
{d.kind==='output'&&<><Field label="输出类型"><select aria-label="输出类型" value={d.outputType} onChange={e=>patch({outputType:e.target.value})}>{options([['audio','可播放音频'],['text','文本 / 程序结果']])}</select></Field><Toggle checked={d.target!==false} onChange={v=>patch({target:v})}>作为主结果测量终点</Toggle></>}
|
||||
{d.kind==='input'&&<p className="ref-note">该节点代表用户停止说话。判停等待在“全局参数”中调整。流式识别可以提前处理用户说话期间的输入。</p>}
|
||||
<Field label="多分支输入策略"><select aria-label="汇总等待策略" value={d.join||'all'} onChange={e=>patch({join:e.target.value})}>{options([['all','等全部分支（max）'],['any','取最早可用分支（min）']])}</select></Field>
|
||||
{result&&<div className="node-estimate"><h4>本节点的时间</h4><dl><div><dt>开始</dt><dd>{ms(result.start)}</dd></div><div><dt>首出</dt><dd>{ms(result.first)}</dd></div><div><dt>结束</dt><dd>{ms(result.end)}</dd></div>{result.resourceWait>0&&<div><dt>资源等待</dt><dd>{ms(result.resourceWait)}</dd></div>}</dl>{result.assumptions.map((s,i)=><p key={i}>{s}</p>)}{result.warnings.map((s,i)=><p key={i} className="warn-text">{s}</p>)}</div>}
|
||||
</>;
|
||||
}
|
||||
|
||||
function Timeline({sim,nodes,selected,setSelected}){
|
||||
const [playing,setPlaying]=useState(false),[cursor,setCursor]=useState(0),[stepsOpen,setStepsOpen]=useState(false),timer=useRef();
|
||||
const total=sim.complete||1;
|
||||
useEffect(()=>{if(!playing)return;let start=performance.now(),from=cursor;const tick=now=>{const next=from+(now-start)*(total/6000);if(next>=total){setCursor(total);setPlaying(false);}else{setCursor(next);timer.current=requestAnimationFrame(tick);}};timer.current=requestAnimationFrame(tick);return()=>cancelAnimationFrame(timer.current);},[playing,total]);
|
||||
useEffect(()=>{setCursor(0);setPlaying(false);},[total]);
|
||||
const result=selected?sim.results?.[selected]:null;
|
||||
return <div className="timeline-panel"><div className="timeline-heading"><div><h3>流程时间线 <span>用户停说 = 0</span></h3><p>绿色标出首结果关键路径。浅色区域是准备/等待，实色区域是输出。</p></div><button className="outline compact" onClick={()=>{if(cursor>=total)setCursor(0);setPlaying(!playing);}}>{playing?<Pause size={14}/>:<Play size={14}/>} 播放时序</button></div><div className="timeline-axis"><span>0</span><span>{ms(total*.25)}</span><span>{ms(total*.5)}</span><span>{ms(total*.75)}</span><span>{ms(total)}</span></div><div className="timeline-rows">{sim.order.map(id=>{const r=sim.results[id],width=Math.max(.7,(r.end-r.start)/total*100),left=r.start/total*100,first=(r.first-r.start)/Math.max(1,r.end-r.start)*100;return <button key={id} className={`timeline-row ${selected===id?'selected':''}`} onClick={()=>setSelected(id)}><span>{r.title}{r.stepsCount>1&&<small>↻{r.stepsCount}</small>}</span><div className="bar-track"><div className={`time-bar ${sim.criticalNodes.has(id)?'critical':''}`} style={{left:`${left}%`,width:`${width}%`}}><i style={{width:`${Math.min(100,first)}%`}}/></div>{cursor>0&&<b className="playhead" style={{left:`${cursor/total*100}%`}}/>}</div><strong>{ms(r.end-r.start)}</strong></button>;})}</div><label className="scrubber"><span>时序位置 {ms(cursor)}</span><input aria-label="时序位置" type="range" min="0" max={total} step="1" value={Math.min(total,cursor)} onChange={e=>{setPlaying(false);setCursor(Number(e.target.value));}}/></label>{result?.steps.length>1&&<div className="step-breakdown"><button className="details-toggle" onClick={()=>setStepsOpen(!stepsOpen)}>{stepsOpen?<ChevronDown size={15}/>:<ChevronRight size={15}/>} {result.title} · {result.stepsCount}/{result.maxSteps}步展开</button>{stepsOpen&&<div className="table-scroll"><table><thead><tr><th>步</th><th>输入 / 输出 / 思考</th><th>开始</th><th>首出</th><th>结束</th><th>步前工具等待</th></tr></thead><tbody>{result.steps.map(s=><tr key={s.step}><td>{s.step}</td><td>{s.input} / {s.output} / {s.reasoning}</td><td>{ms(s.start)}</td><td>{ms(s.first)}</td><td>{ms(s.end)}</td><td>{ms(s.toolWait)}</td></tr>)}</tbody></table></div>}</div>}</div>;
|
||||
}
|
||||
|
||||
function Studio({doc,setDoc,selected,setSelected,toast}){
|
||||
const nodes=doc.nodes,edges=doc.edges,g=doc.globals;
|
||||
const [flow,setFlow]=useState(null),[panel,setPanel]=useState('node'),[edgeId,setEdgeId]=useState(null),[from,setFrom]=useState(''),[to,setTo]=useState(''),[release,setRelease]=useState('complete'),[focus,setFocus]=useState(false),[focusSettings,setFocusSettings]=useState(false);
|
||||
const inputRef=useRef(),canvasRef=useRef(),history=useRef([]);
|
||||
const sim=useMemo(()=>simulateGraph(nodes,edges,g),[nodes,edges,g]);
|
||||
useEffect(()=>{if(!focus)return;const old=document.body.style.overflow;document.body.style.overflow='hidden';const escape=e=>{if(e.key==='Escape')setFocus(false);};window.addEventListener('keydown',escape);return()=>{document.body.style.overflow=old;window.removeEventListener('keydown',escape);};},[focus]);
|
||||
const saveHistory=()=>{history.current.push(structuredClone(doc));if(history.current.length>35)history.current.shift();};
|
||||
const update=next=>{saveHistory();setDoc(typeof next==='function'?next(doc):next);};
|
||||
const patchNode=patch=>update({...doc,nodes:nodes.map(n=>n.id===selected?{...n,data:{...n.data,...patch}}:n)});
|
||||
const patchGlobals=patch=>update({...doc,globals:{...g,...patch}});
|
||||
const current=nodes.find(n=>n.id===selected),edge=edges.find(e=>e.id===edgeId);
|
||||
const fit=()=>setTimeout(()=>flow?.fitView({padding:.18,duration:300}),80);
|
||||
const choosePreset=key=>{update(makeDocument(key));setSelected(null);setEdgeId(null);fit();};
|
||||
const addNode=kind=>{if(nodes.length>=100){toast('最多支持100个节点。');return;}const id=`n-${Date.now().toString(36)}-${Math.random().toString(36).slice(2,5)}`;const rect=canvasRef.current?.getBoundingClientRect();const pos=flow&&rect?flow.screenToFlowPosition({x:rect.x+rect.width/2,y:rect.y+rect.height/2}):{x:100,y:100};update({...doc,nodes:[...nodes,{id,type:'stage',position:pos,data:nodeData(kind,KINDS[kind])}]});setSelected(id);setPanel('node');};
|
||||
const connect=c=>{if(!c.source||!c.target){toast('请选择起点和终点。');return;}if(edges.some(e=>e.source===c.source&&e.target===c.target)){toast('这两个节点已经相连。');return;}const next={id:`edge-${Date.now()}-${Math.random().toString(36).slice(2,5)}`,type:'smoothstep',source:c.source,target:c.target,data:{release:c.release||'complete',tokens:8}};const err=validateGraph(nodes,[...edges,next]);if(err.length){toast(err[0]);return;}update({...doc,edges:[...edges,next]});setEdgeId(next.id);setPanel('edge');};
|
||||
const removeNode=()=>{update({...doc,nodes:nodes.filter(n=>n.id!==selected),edges:edges.filter(e=>e.source!==selected&&e.target!==selected)});setSelected(null);};
|
||||
const duplicate=()=>{if(!current)return;const id=`n-${Date.now().toString(36)}`;update({...doc,nodes:[...nodes,{...structuredClone(current),id,position:{x:current.position.x+35,y:current.position.y+165},data:{...current.data,label:current.data.label+' 副本'}}]});setSelected(id);};
|
||||
const renderNodes=useMemo(()=>nodes.map(n=>({...n,selected:n.id===selected,data:{...n.data,result:sim.results?.[n.id],critical:sim.criticalNodes?.has(n.id)}})),[nodes,selected,sim]);
|
||||
const renderEdges=useMemo(()=>edges.map(e=>({...e,selected:e.id===edgeId,animated:e.data?.release!=='complete'&&!e.data?.control,label:e.data?.control?'控制路径':e.data?.release==='chunk'?`${e.data.tokens||8} token后`:e.data?.release==='first'?'首包后':'完成后',markerEnd:{type:MarkerType.ArrowClosed,width:16,height:16,color:sim.criticalEdges?.has(e.id)?'#2d7854':'#91a39a'},style:{stroke:sim.criticalEdges?.has(e.id)?'#2d7854':'#91a39a',strokeWidth:sim.criticalEdges?.has(e.id)?2.2:1.5,...(e.data?.control?{strokeDasharray:'5 5'}:{})},labelStyle:{fill:'#50645b',fontSize:10},labelBgStyle:{fill:'#f7f8f4'},labelBgPadding:[5,3]})),[edges,edgeId,sim]);
|
||||
const exportDoc=()=>download('dialogue-flow.json',JSON.stringify(toDocument(nodes,edges,g,doc.name),null,2));
|
||||
const importDoc=async e=>{const file=e.target.files?.[0];if(!file)return;try{if(file.size>2e6)throw new Error('文件超过2MB。');const parsed=JSON.parse(await file.text());const err=validateDocument(parsed);if(err.length)throw new Error(err[0]);update(parsed);setSelected(null);fit();toast('已导入流程。');}catch(error){toast(`导入失败：${error.message}`);}e.target.value='';};
|
||||
const onChanges=changes=>setDoc(prev=>({...prev,nodes:applyNodeChanges(changes,prev.nodes)}));
|
||||
return <section id="studio" className="studio-section"><div className="wrap"><div className="section-title"><div><div className="eyebrow">02 / BUILD THE CONVERSATION</div><h2>把一场对话，搭出来。</h2><p>拖拽、连线、并行、汇总。改变一个节点，看等待如何沿流程传递。</p></div><div className="saved-indicator"><Check size={14}/> 自动保存在本机</div></div><div className="preset-bar"><span>从一个结构开始</span>{Object.entries(PRESETS).filter(([k])=>k!=='blank').map(([key,p])=><button key={key} onClick={()=>choosePreset(key)} className={doc.name===p.name?'active':''}>{key==='native'?<AudioLines size={15}/>:key==='parallel'?<GitBranch size={15}/>:key==='agent'?<RotateCcw size={15}/>:<Workflow size={15}/>} {p.name}</button>)}</div>
|
||||
<div className={`studio-shell ${focus?'focused':''} ${focusSettings?'with-settings':''}`}><aside className="node-palette"><span className="eyebrow">添加节点</span>{Object.entries(KINDS).map(([kind,label])=>{const Icon=icons[kind];return <button key={kind} onClick={()=>addNode(kind)} title={`添加${label}`}><span className={`palette-icon kind-${kind}`}><Icon size={17}/></span><span>{label}</span><Plus size={13}/></button>;})}<div className="palette-help"><Link2 size={18}/><p>拖动节点两侧的圆点连线。<br/>触屏可使用右侧“连线”表单。</p></div></aside>
|
||||
<div className="canvas-column"><div className="canvas-toolbar"><span className="flow-name">{doc.name||'自定义流程'}{!sim.errors.length&&<span className="toolbar-metric">首出 {ms(sim.first)} <i/> 完成 {ms(sim.complete)}</span>}</span><div><button className="focus-button" onClick={()=>{setFocus(!focus);setFocusSettings(false);fit();}}>{focus?'退出专注':'专注画布'}</button>{focus&&<button className="focus-button" onClick={()=>{setFocusSettings(!focusSettings);fit();}}>{focusSettings?'隐藏设置':'显示设置'}</button>}<button aria-label="撤销编辑" title="撤销编辑" onClick={()=>{const old=history.current.pop();if(old){setDoc(old);setSelected(null);}else toast('没有可撤销的编辑。');}}><RotateCcw size={15}/></button><button aria-label="自动布局" title="自动布局" onClick={()=>{update({...doc,nodes:autoLayout(nodes,edges)});fit();}}><LayoutGrid size={15}/></button><button aria-label="导出流程JSON" title="导出流程JSON" onClick={exportDoc}><Download size={15}/></button><button aria-label="导入流程JSON" title="导入流程JSON" onClick={()=>inputRef.current.click()}><Upload size={15}/></button><button aria-label="清空流程" title="清空流程（可撤销）" onClick={()=>choosePreset('blank')}><Trash2 size={15}/></button></div><input ref={inputRef} type="file" accept=".json,application/json" hidden onChange={importDoc}/></div><div className="flow-canvas" ref={canvasRef}>
|
||||
<ReactFlow nodes={renderNodes} edges={renderEdges} nodeTypes={nodeTypes} onNodesChange={onChanges} onEdgesChange={changes=>setDoc(prev=>({...prev,edges:applyEdgeChanges(changes,prev.edges)}))} onConnect={connect} onInit={setFlow} onNodeClick={(_,n)=>{setSelected(n.id);setPanel('node');if(focus)setFocusSettings(true);}} onEdgeClick={(_,e)=>{setEdgeId(e.id);setPanel('edge');if(focus)setFocusSettings(true);}} onNodeDragStart={saveHistory} onPaneClick={()=>{setSelected(null);setEdgeId(null);}} onNodesDelete={ns=>{setDoc(prev=>({...prev,edges:prev.edges.filter(e=>!ns.some(n=>n.id===e.source||n.id===e.target))}));}} isValidConnection={c=>!validateGraph(nodes,[...edges,{id:'candidate',...c}]).length} fitView fitViewOptions={{padding:.16}} minZoom={.16} maxZoom={1.6} deleteKeyCode={['Backspace','Delete']} connectOnClick selectionOnDrag={false} ariaLabelConfig={{'controls.zoomIn.ariaLabel':'放大流程','controls.zoomOut.ariaLabel':'缩小流程','controls.fitView.ariaLabel':'显示完整流程','controls.interactive.ariaLabel':'切换交互'}}><Background color="#cdd8ce" gap={20} size={1}/><Controls showInteractive={false}/></ReactFlow>
|
||||
{!nodes.length&&<div className="canvas-empty"><Workflow size={40}/><h3>从第一个节点开始</h3><p>点击左侧添加节点，或者加载一个示例结构。</p><button className="primary" onClick={()=>choosePreset('cascade')}>加载流式级联示例</button></div>}
|
||||
</div><div className="canvas-footer"><span><i className="legend-critical"/> 首结果关键路径</span><span><i className="legend-stream"/> 流式连接</span><button onClick={()=>{setPanel('edge');setEdgeId(null);}}>用表单添加连线 <Link2 size={12}/></button></div></div>
|
||||
<aside className="inspector"><div className="inspector-tabs">{[['node','节点'],['edge','连线'],['global','全局参数']].map(([v,l])=><button key={v} className={panel===v?'active':''} onClick={()=>setPanel(v)}>{l}</button>)}</div><div className="inspector-body">
|
||||
{panel==='node'&&<NodeInspector node={current} result={sim.results?.[selected]} patch={patchNode} remove={removeNode} duplicate={duplicate}/>}
|
||||
{panel==='edge'&&<><div className="inspector-heading"><div><span className="eyebrow">CONNECTION</span><h3>{edge?'连线设置':'添加连线'}</h3></div>{edge&&<button className="icon-button" aria-label="删除连线" onClick={()=>{update({...doc,edges:edges.filter(e=>e.id!==edgeId)});setEdgeId(null);}}><Trash2 size={16}/></button>}</div>{edge?<><p className="edge-description">{nodes.find(n=>n.id===edge.source)?.data.label} <ArrowRight size={12}/> {nodes.find(n=>n.id===edge.target)?.data.label}</p><Field label="下游何时开始"><select aria-label="连线触发方式" value={edge.data?.release||'complete'} onChange={e=>update({...doc,edges:edges.map(x=>x.id===edgeId?{...x,data:{...x.data,release:e.target.value}}:x)})}>{options([['complete','等完整结果'],['first','首包一到就开始'],['chunk','积累若干文本token后']])}</select></Field>{edge.data?.release==='chunk'&&<Field label="需要积累的token"><Num label="连线积累token" value={edge.data.tokens||8} min={1} max={10000} onChange={v=>update({...doc,edges:edges.map(x=>x.id===edgeId?{...x,data:{...x.data,tokens:v}}:x)})}/></Field>}<Field label="此连线网络时延（ms）" hint="留空使用全局单程网络值。输入0表示同进程。"><input aria-label="连线网络时延" type="number" min="0" max="100000" value={edge.data?.networkMs??''} placeholder={`全局 ${g.networkMs} ms`} onChange={e=>update({...doc,edges:edges.map(x=>x.id===edgeId?{...x,data:{...x.data,networkMs:e.target.value===''?undefined:Math.max(0,Number(e.target.value)||0)}}:x)})}/></Field><Toggle checked={edge.data?.control} onChange={v=>update({...doc,edges:edges.map(x=>x.id===edgeId?{...x,data:{...x.data,control:v}}:x)})}>标记为控制连线（虚线）</Toggle><p className="micro-copy">控制标记改变显示方式；仍按所选触发条件计算。打断分支通常应连接独立控制终点，并取消其“主结果”身份。</p><button className="outline full-width" onClick={()=>setEdgeId(null)}><Plus size={14}/> 添加其他连线</button></>:<><Field label="起点"><select aria-label="连线起点" value={from} onChange={e=>setFrom(e.target.value)}><option value="">选择节点</option>{nodes.filter(n=>n.data.kind!=='output').map(n=><option value={n.id} key={n.id}>{n.data.label}</option>)}</select></Field><Field label="终点"><select aria-label="连线终点" value={to} onChange={e=>setTo(e.target.value)}><option value="">选择节点</option>{nodes.filter(n=>n.data.kind!=='input').map(n=><option value={n.id} key={n.id}>{n.data.label}</option>)}</select></Field><Field label="触发方式"><select aria-label="新增连线触发方式" value={release} onChange={e=>setRelease(e.target.value)}>{options([['complete','完整结果'],['first','首包'],['chunk','8个文本token']])}</select></Field><button className="primary full-width" onClick={()=>connect({source:from,target:to,release})}><Link2 size={15}/> 连接节点</button><p className="micro-copy">同一节点连到多个下游就形成并行分支。多个分支连到汇总节点后，可在节点中选择等全部或取最早。</p></>}<div className="connection-list"><h4>已有连线 · {edges.length}</h4>{edges.map(e=><button key={e.id} onClick={()=>setEdgeId(e.id)} className={edgeId===e.id?'active':''}><span>{nodes.find(n=>n.id===e.source)?.data.label}</span><ArrowRight size={12}/><span>{nodes.find(n=>n.id===e.target)?.data.label}</span></button>)}</div></>}
|
||||
{panel==='global'&&<><div className="inspector-heading"><div><span className="eyebrow">SCENARIO</span><h3>全局估算条件</h3></div></div><p className="micro-copy">调整全流程的计算、程序和传输开销。这里的参数是设计假设，可用自己的实测替换。</p><NumberField data={g} patch={patchGlobals} keyName="computeScale" label="全部模型耗时倍率" min={.1} max={10} step={.1} hint="1为当前基线，2为所有模型阶段慢一倍。"/><NumberField data={g} patch={patchGlobals} keyName="programScale" label="全部程序 / 工具耗时倍率" min={.1} max={10} step={.1}/><div className="field-pair"><NumberField data={g} patch={patchGlobals} keyName="networkMs" label="每条边单程网络（ms）" max={100000}/><NumberField data={g} patch={patchGlobals} keyName="queueMs" label="每次模型排队（ms）" max={100000}/></div><NumberField data={g} patch={patchGlobals} keyName="vadMs" label="用户停说后的判停等待（ms）" max={10000} hint="原生接续参考若已含判停，应设0避免重复。"/><div className="field-pair"><NumberField data={g} patch={patchGlobals} keyName="inputSeconds" label="用户输入音频（秒）" min={.1} max={3600} step={.5}/><NumberField data={g} patch={patchGlobals} keyName="speechSeconds" label="回复自然播放（秒）" min={.1} max={3600} step={.5}/></div><Field label="loop 计算情景"><select aria-label="loop计算情景" value={g.loopPlan} onChange={e=>patchGlobals({loopPlan:e.target.value})}>{options([['max','跑满最大步数'],['expected','采用各节点预计步数']])}</select></Field><Toggle checked={g.sharedGPU} onChange={v=>patchGlobals({sharedGPU:v})}>所有未分组模型共用同一GPU资源</Toggle><p className="micro-copy">共享组按拓扑顺序串行调度。这是保守资源假设；不模拟真实continuous batching。各节点显式资源组优先。</p><div className="duplex-callout"><AudioLines size={20}/><h4>全双工怎么表示</h4><p>输入监听和输出生成可同时运行；用流式连线表示提前消费，用独立分支表示打断控制。图计算单次回复；长对话反馈通过节点loop建模。</p></div></>}
|
||||
</div></aside>
|
||||
</div>
|
||||
{sim.errors.length?<div className="error-box">{sim.errors.join(' ')}</div>:<><div className="result-strip" aria-live="polite"><div className="primary-result"><span>{sim.hasAudio?'首段可播放音频':'首个目标结果'}<Tag>方案估计</Tag></span><strong>{ms(sim.first)}</strong><small>敏感性范围 {ms(sim.range[0])} – {ms(sim.range[1])}</small></div><div><span>全部主目标完成</span><strong>{ms(sim.complete)}</strong><small>音频目标包含 {g.speechSeconds}s 自然播放</small></div><div><span>跑满loop预算</span><strong>{ms(sim.maxFirst)}</strong><small>首结果 / 完成 {ms(sim.maxComplete)}</small></div><div><span>持续处理负载</span><strong className={sim.rtf>1?'warn-text':''}>{sim.rtf.toFixed(2)} <em>RTF</em></strong><small>{sim.rtf>1?'当前假设可能跟不上实时':'理想资源下具备实时余量'}</small></div></div><div className="result-note"><Info size={15}/><p>范围只把模型和程序阶段乘0.75–1.5，固定网络/判停不变；不是p95或统计置信区间。改变模型、隐藏思考、共享资源或loop后会立即重算。打断控制能力仍需真实音频系统验证。</p></div>{sim.warnings.length>0&&<details className="warnings"><summary>估算条件与待校准项 <span>{sim.warnings.length}</span><ChevronDown size={15}/></summary><ul>{sim.warnings.map((w,i)=><li key={i}>{w}</li>)}</ul></details>}<Timeline sim={sim} nodes={nodes} selected={selected} setSelected={id=>{setSelected(id);setPanel('node');}}/></>}
|
||||
<datalist id="model-sizes">{SIZE_OPTIONS.map(s=><option value={s} key={s}/>)}</datalist>
|
||||
</div></section>;
|
||||
}
|
||||
|
||||
function Method(){
|
||||
return <section id="method" className="method-section wrap"><div className="section-title"><div><div className="eyebrow">03 / THE MODEL BEHIND THE MODEL</div><h2>这些时间，怎么算。</h2><p>结果的可信度，取决于计时边界和输入假设是否说清。</p></div></div><div className="method-grid"><article className="method-intro"><h3>先定义你在等什么。</h3><p>文本首token是模型开始生成的时间。隐藏思考可能发生在可见答案之前。语音首包是第一段可播放音频就绪的时间；终端播放还需要网络与缓冲。完整回复则要考虑所有输出和自然说话时长。</p><div className="metric-defs"><div><span>TTFT</span><p>首次模型token；对推理模型应另计首个可见答案。</p></div><div><span>TPOT</span><p>持续输出阶段每token平均耗时，近似1000÷token/s。</p></div><div><span>TTFA</span><p>首段可播放音频的时间，不能用文本TTFT代替。</p></div><div><span>RTF</span><p>处理/生成音频所需时间÷音频时长。小于1才有持续实时余量。</p></div></div></article><div className="formula-list"><article><span>01</span><div><h3>串行与并行</h3><code>start(v) = max(各前驱满足条件的时刻)</code><p>默认等全部分支。选择“任一就绪”取min；前提是最早分支的结果可用。独立硬件分支可以重叠，共享资源组会增加排队。</p></div></article><article><span>02</span><div><h3>流式开始，持续供给</h3><code>首包 + (k − 1) / 输出速率</code><p>文本积累k个token后启动下游。完成时刻还受上游最终数据就绪约束，避免把提前启动误当作全部工作已完成。这里采用平均供给率，未模拟音素对齐、每帧抖动与流控背压。</p></div></article><article><span>03</span><div><h3>Agent loop</h3><code>Σ[首token + (思考 + 输出 − 1) / 速率] + (N − 1) × 工具等待</code><p>每步可增加上下文；默认仅最后一步对下游放行。最大步数定义预算情景，不保证真实任务能在预算内成功。选择预计步数后，同时显示跑满预算的结果。</p></div></article><article><span>04</span><div><h3>参数规模外推</h3><code>速率 = H20锚点 × 硬件系数 × 量化系数 × 并行收益</code><p>稠密锚点采用Qwen3官方FP8数据做对数插值；32B以上按反比外推。MoE用激活参数并乘额外开销。卡数收益上限4倍，不能靠无限加卡把时延降到零。</p></div></article></div></div><details className="calibration-details"><summary>查看全部默认系数与计算限制 <ChevronDown size={16}/></summary><div className="calibration-grid"><div><h4>可复查的默认值</h4><table><thead><tr><th>硬件</th><th>相对H20速率系数</th></tr></thead><tbody>{HARDWARE.map(h=><tr key={h.id}><td>{h.name}</td><td>{h.factor}×（假设）</td></tr>)}</tbody></table><p>量化速率系数：BF16 0.62，FP8 1，INT4 1.06。它们是近似值，不代表所有模型的固定规律。</p></div><div><h4>首token与显存</h4><p>Prefill默认8B/H20为18,000 token/s，固定开销14ms；随激活规模、缓存和硬件调整。缺少首token来源时使用该模型。公开记录中的硬件条件固定；更换条件应切回工程估算。</p><p>权重显存粗算：BF16 2字节/参数，FP8 1.05，INT4 0.55；另加max(2GB,8%)运行余量。这不是完整KV-cache容量规划。</p><h4>未建模的因素</h4><p>任务正确性、语音自然度、错误重试、冷启动、长上下文attention非线性、真实调度、网络抖动、设备音频延迟与多用户拥塞。模型间tokenizer也不同，不把token直接等同汉字。</p></div></div></details><div className="reading-note"><h3>怎样理解“理想时延”</h3><p>统一条件估算采用已热身、低并发、稳定网络。端到端语音通过边听边处理缩短停说后的等待，不能因此声称复杂任务已完成。一个170ms的接续可以很自然，却不能代表检索、工具和多轮Agent也在170ms内结束。网站中的数据为公开资料调研，本次没有运行模型效果或硬件性能实验。</p><p>覆盖公开可核验的代表性尺寸与部署条件；不穷尽全部模型。未公开的参数规模保持未知，缺少首音频数据时也保留空缺。</p></div></section>;
|
||||
}
|
||||
|
||||
function Sources(){return <section id="sources" className="sources-section wrap"><div className="section-title"><div><div className="eyebrow">04 / PRIMARY SOURCES</div><h2>让每个数字，都有来处。</h2><p>截止 {CUTOFF} 查阅。只引用官方文档、官方模型卡或原始研究论文。</p></div><Tag>{Object.keys(SOURCES).length} 个一手来源</Tag></div><div className="source-list">{Object.entries(SOURCES).map(([id,s],i)=><article key={id}><span className="source-number">{String(i+1).padStart(2,'0')}</span><div><a href={s.url} target="_blank" rel="noreferrer">{s.title}<ArrowUpRight size={16}/></a><span>{s.publisher} / {s.date}</span><p>{s.note}</p></div></article>)}</div></section>;}
|
||||
|
||||
export default function App(){
|
||||
const [tab,setTab]=useState(()=>location.hash==='#studio'?'studio':location.hash==='#method'?'method':location.hash==='#sources'?'sources':'overview'),[doc,setDoc]=useState(loadSaved),[selected,setSelected]=useState(null),[message,setMessage]=useState(''),[mobileMenu,setMobileMenu]=useState(false);
|
||||
const toastTimer=useRef();
|
||||
const toast=text=>{setMessage(text);clearTimeout(toastTimer.current);toastTimer.current=setTimeout(()=>setMessage(''),4500);};
|
||||
useEffect(()=>{const timer=setTimeout(()=>{try{localStorage.setItem(STORE,JSON.stringify(toDocument(doc.nodes,doc.edges,doc.globals,doc.name)));}catch{toast('本机存储不可用，请导出JSON保存流程。');}},500);return()=>clearTimeout(timer);},[doc]);
|
||||
const navigate=t=>{setTab(t);setMobileMenu(false);history.replaceState(null,'',t==='overview'?'#overview':`#${t}`);window.scrollTo({top:0,behavior:'instant'});};
|
||||
const addProfile=r=>{const id=`n-${Date.now().toString(36)}`,kind=r.modality==='text'?'llm':r.modality==='tts'?'tts':'speech',data={...nodeData(kind,r.name),mode:'reference',profileId:r.id,...(r.size?{size:r.size}:{}),...(r.active?{active:r.active,arch:'moe'}:{})};setDoc(prev=>({...prev,name:'自定义对话流程',nodes:[...prev.nodes,{id,type:'stage',position:{x:120,y:120+prev.nodes.length*30},data}]}));setSelected(id);navigate('studio');toast('已添加参考节点；首包或持续速度缺失时会明确使用工程假设。');};
|
||||
return <><header className="site-header"><a className="brand" href="#overview" onClick={e=>{e.preventDefault();navigate('overview');}}><span className="brand-icon"><Activity size={23}/></span><span>模型时延实验室<small>LATENCY LAB</small></span></a><nav className={mobileMenu?'open':''}>{[['overview','模型对照'],['studio','流程实验室'],['method','计算方法'],['sources','资料来源']].map(([v,l])=><button key={v} className={tab===v?'active':''} onClick={()=>navigate(v)}>{l}{v==='studio'&&<span className="nav-new">交互</span>}</button>)}</nav><div className="header-right"><a href="https://blog.k1412.top" target="_blank" rel="noreferrer">K1412 RESEARCH <ArrowUpRight size={14}/></a><button className="menu-button" aria-label="打开导航" onClick={()=>setMobileMenu(!mobileMenu)}>{mobileMenu?<X/>:<Menu/>}</button></div></header>
|
||||
<main>{tab==='overview'&&<><Hero onStart={()=>navigate('studio')} onCompare={()=>document.getElementById('compare').scrollIntoView({behavior:'smooth'})}/><Comparison addProfile={addProfile}/><section className="studio-invite wrap"><div><span className="eyebrow">FROM A NUMBER TO A SYSTEM</span><h2>一个模型快，<br/>整条链路也快吗？</h2><p>把多个模型、工具和语音模块连起来，找出真正决定体验的那条路径。</p></div><button className="primary light" onClick={()=>navigate('studio')}>打开流程实验室 <ArrowRight size={17}/></button></section></>}{tab==='studio'&&<Studio doc={doc} setDoc={setDoc} selected={selected} setSelected={setSelected} toast={toast}/>} {tab==='method'&&<Method/>}{tab==='sources'&&<Sources/>}</main>
|
||||
<footer className="site-footer wrap"><div><span className="brand-word">LATENCY LAB</span><p>公开证据 × 可校准的系统估算</p></div><div><span>资料截止 {CUTOFF}</span><a href="https://git.k1412.top/wuyang/latency-lab" target="_blank" rel="noreferrer">源代码与数据 <ExternalLink size={13}/></a><button onClick={()=>navigate('method')}>计算假设与边界</button></div><small>{RELEASE} · 本机计算与存储，无需模型API密钥</small></footer>{message&&<div className="toast" role="status"><Info size={17}/>{message}<button aria-label="关闭提示" onClick={()=>setMessage('')}><X size={15}/></button></div>}
|
||||
</>;
|
||||
}
|
||||
Reference in New Issue
Block a user