From 6c98039c10c024d11abbccc0b713b9db8a1a26a2 Mon Sep 17 00:00:00 2001 From: blackkcold <56803469+blackkcold@users.noreply.github.com> Date: Mon, 5 Oct 2026 12:24:18 +0800 Subject: [PATCH 1/3] ui: add fixed model detail panel --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index 5cb3553..a453102 100644 --- a/index.html +++ b/index.html @@ -81,6 +81,10 @@

能力 × 消耗

+
+
悬停或点击图中的模型点查看详细信息
+
+
第三方统一实测（AA） 估算 / 插值点 Pareto 前沿
From 70a0b2ec09c32d71b4e9fb562ce9cb2d1a38c14c Mon Sep 17 00:00:00 2001 From: blackkcold <56803469+blackkcold@users.noreply.github.com> Date: Mon, 5 Oct 2026 12:24:35 +0800 Subject: [PATCH 2/3] ui: style model detail panel --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index dd54507..2dee6d0 100644 --- a/styles.css +++ b/styles.css @@ -1 +1 @@ -:root{color-scheme:dark;--bg:#07080a;--panel:#0d0f13;--line:#232731;--text:#f1f3f6;--muted:#9aa2af;--blue:#4f7cff;--radius:20px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(900px 420px at 50% -120px,#14213c 0,transparent 62%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.55}a{color:#b9c9ff;text-decoration:none}.shell{width:min(1500px,calc(100% - 42px));margin:auto;padding:56px 0 42px}.hero{padding:6px 3px 28px}.eyebrow,.card-label{font-size:11px;letter-spacing:.14em;font-weight:750;color:#8894a8;text-transform:uppercase}.hero h1{font-size:clamp(36px,5vw,66px);line-height:1.05;letter-spacing:-.045em;margin:12px 0 18px}.hero h1 span{color:#aeb6c5}.hero p{font-size:clamp(16px,1.55vw,21px);max-width:1160px;color:#b4bac5;margin:0}.hero-badges,.metric-row,.chart-actions,.pills{display:flex;gap:8px;flex-wrap:wrap}.hero-badges{margin-top:22px}.hero-badges span,.pill,.metric-row span,.tag{border:1px solid #292e38;background:#101319;padding:7px 11px;border-radius:999px;color:#abb2bf;font-size:12px}.cards{display:grid;gap:14px}.recommendation-grid,.insight-grid{grid-template-columns:repeat(3,1fr);margin-bottom:14px}.card{background:linear-gradient(180deg,rgba(18,21,27,.96),rgba(12,14,18,.96));border:1px solid #232731;border-radius:var(--radius);box-shadow:0 20px 70px rgba(0,0,0,.3)}.rec-card{padding:22px;position:relative;overflow:hidden}.rec-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent)}.accent-blue{--accent:#4f7cff}.accent-orange{--accent:#e28a52}.accent-yellow{--accent:#e2b24f}.rec-card h2{font-size:23px;letter-spacing:-.025em;margin:8px 0}.rec-card p,.insight-grid p,.section-heading p{color:#aeb5c0;margin:0 0 16px}.metric-row b{color:white}.chart-card,.table-card,.plan-card{padding:24px;margin-bottom:14px}.chart-heading,.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.chart-heading h2,.section-heading h2,.methodology-card h2{margin:4px 0 0;font-size:26px}.toggle{display:flex;align-items:center;gap:7px;font-size:12px;color:#a9b0bb;cursor:pointer}.toggle input{accent-color:var(--blue)}.filters{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:18px;margin:22px 0 4px;padding:16px;border:1px solid #1d2129;border-radius:16px;background:#090b0f}.filter-title{display:block;font-size:11px;letter-spacing:.12em;color:#727b89;margin-bottom:8px}.pill{cursor:pointer}.pill.active{border-color:#4d5564;color:#fff;background:#171b22}.pill i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:7px}.selects{display:flex;gap:8px}.selects label{font-size:11px;color:#7e8794;min-width:0;flex:1}.selects select{display:block;width:100%;margin-top:5px;background:#11151b;border:1px solid #292e38;color:#e5e9f0;border-radius:10px;padding:8px 10px}.canvas-wrap{height:min(68vh,760px);min-height:520px;margin-top:14px}.legend-note,.table-hint,.disclaimer{font-size:11px;color:#7f8794}.legend-note{padding-top:8px}.insight-grid .card{padding:20px}.insight-grid h3{font-size:18px;margin:7px 0 8px}.table-scroll{overflow:auto;margin-top:15px;border:1px solid #20242c;border-radius:14px}table{border-collapse:collapse;width:100%;min-width:880px;background:#0a0c10}th,td{text-align:left;padding:11px 12px;border-bottom:1px solid #1a1e25;font-size:12px;white-space:nowrap}th{position:sticky;top:0;background:#11141a;color:#7f8895;font-weight:650;cursor:pointer}td{color:#c5cad2}.num{font-variant-numeric:tabular-nums}.tag{padding:2px 6px;font-size:10px}.tag.est{border-style:dashed;color:#e5c38d}.tag.dep{color:#d28585}.plan-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.plan-summary div{background:#090b0f;border:1px solid #1d222a;border-radius:14px;padding:14px}.plan-summary span,.plan-summary small{display:block;color:#808996;font-size:11px}.plan-summary b{display:block;margin:5px 0;font-size:14px}.methodology-card{margin-bottom:14px;overflow:hidden}.methodology-card summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:22px}.method-body{border-top:1px solid #20242c;padding:22px;color:#aab1bc}.method-body h3{color:#eef1f5;font-size:15px;margin:20px 0 5px}.method-body h3:first-child{margin-top:0}.method-body p{font-size:13px;max-width:1100px}.method-body code{background:#080a0d;border:1px solid #232832;border-radius:6px;padding:2px 5px}.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:17px}.sources a{font-size:11px;padding:8px 10px;background:#090b0f;border:1px solid #1d222a;border-radius:9px}.sources a:after{content:" ↗";color:#667080}footer{text-align:center;color:#59616e;font-size:11px;padding:12px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#8ba1d8;margin-left:6px}.dot.estimated{background:transparent;border:2px dashed #c8d0dc}.rule{display:inline-block;width:20px;border-top:1px dashed #717a89;margin-left:6px}@media(max-width:1000px){.recommendation-grid,.insight-grid{grid-template-columns:1fr}.filters{grid-template-columns:1fr}.plan-summary{grid-template-columns:1fr 1fr}.sources{grid-template-columns:1fr 1fr}.chart-heading,.section-heading{flex-direction:column}.chart-actions{justify-content:flex-start}}@media(max-width:640px){.shell{width:calc(100% - 22px);padding-top:28px}.hero h1{font-size:38px}.chart-card,.table-card,.plan-card{padding:15px;border-radius:17px}.rec-card{padding:17px}.selects{flex-direction:column}.canvas-wrap{height:560px;min-height:500px}.plan-summary,.sources{grid-template-columns:1fr}} \ No newline at end of file +:root{color-scheme:dark;--bg:#07080a;--panel:#0d0f13;--line:#232731;--text:#f1f3f6;--muted:#9aa2af;--blue:#4f7cff;--radius:20px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(900px 420px at 50% -120px,#14213c 0,transparent 62%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.55}a{color:#b9c9ff;text-decoration:none}.shell{width:min(1500px,calc(100% - 42px));margin:auto;padding:56px 0 42px}.hero{padding:6px 3px 28px}.eyebrow,.card-label{font-size:11px;letter-spacing:.14em;font-weight:750;color:#8894a8;text-transform:uppercase}.hero h1{font-size:clamp(36px,5vw,66px);line-height:1.05;letter-spacing:-.045em;margin:12px 0 18px}.hero h1 span{color:#aeb6c5}.hero p{font-size:clamp(16px,1.55vw,21px);max-width:1160px;color:#b4bac5;margin:0}.hero-badges,.metric-row,.chart-actions,.pills{display:flex;gap:8px;flex-wrap:wrap}.hero-badges{margin-top:22px}.hero-badges span,.pill,.metric-row span,.tag{border:1px solid #292e38;background:#101319;padding:7px 11px;border-radius:999px;color:#abb2bf;font-size:12px}.cards{display:grid;gap:14px}.recommendation-grid,.insight-grid{grid-template-columns:repeat(3,1fr);margin-bottom:14px}.card{background:linear-gradient(180deg,rgba(18,21,27,.96),rgba(12,14,18,.96));border:1px solid #232731;border-radius:var(--radius);box-shadow:0 20px 70px rgba(0,0,0,.3)}.rec-card{padding:22px;position:relative;overflow:hidden}.rec-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent)}.accent-blue{--accent:#4f7cff}.accent-orange{--accent:#e28a52}.accent-yellow{--accent:#e2b24f}.rec-card h2{font-size:23px;letter-spacing:-.025em;margin:8px 0}.rec-card p,.insight-grid p,.section-heading p{color:#aeb5c0;margin:0 0 16px}.metric-row b{color:white}.chart-card,.table-card,.plan-card{padding:24px;margin-bottom:14px}.chart-heading,.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.chart-heading h2,.section-heading h2,.methodology-card h2{margin:4px 0 0;font-size:26px}.toggle{display:flex;align-items:center;gap:7px;font-size:12px;color:#a9b0bb;cursor:pointer}.toggle input{accent-color:var(--blue)}.filters{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:18px;margin:22px 0 4px;padding:16px;border:1px solid #1d2129;border-radius:16px;background:#090b0f}.filter-title{display:block;font-size:11px;letter-spacing:.12em;color:#727b89;margin-bottom:8px}.pill{cursor:pointer}.pill.active{border-color:#4d5564;color:#fff;background:#171b22}.pill i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:7px}.selects{display:flex;gap:8px}.selects label{font-size:11px;color:#7e8794;min-width:0;flex:1}.selects select{display:block;width:100%;margin-top:5px;background:#11151b;border:1px solid #292e38;color:#e5e9f0;border-radius:10px;padding:8px 10px}.model-detail{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(110px,.7fr));gap:10px;align-items:stretch;margin:14px 0 0;padding:14px;border:1px solid #252b35;border-radius:16px;background:#0a0d12;min-height:104px}.model-detail-empty{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:74px;color:#737d8b;font-size:12px}.model-detail-main,.detail-metric{min-width:0}.model-detail-main{padding:2px 4px}.model-detail-main h3{margin:5px 0 3px;font-size:18px;line-height:1.25;letter-spacing:-.02em}.model-detail-main p{margin:0;color:#8993a1;font-size:11px}.model-detail-main .tag{margin-left:6px}.detail-metric{display:flex;flex-direction:column;justify-content:center;padding:10px 12px;border-left:1px solid #202631}.detail-metric span{font-size:10px;letter-spacing:.05em;color:#727c89}.detail-metric b{margin-top:3px;font-size:17px;font-variant-numeric:tabular-nums}.detail-note{grid-column:1/-1;padding:8px 10px;border-top:1px solid #1d222b;color:#858f9c;font-size:11px;line-height:1.45}.canvas-wrap{height:min(68vh,760px);min-height:520px;margin-top:14px}.legend-note,.table-hint,.disclaimer{font-size:11px;color:#7f8794}.legend-note{padding-top:8px}.insight-grid .card{padding:20px}.insight-grid h3{font-size:18px;margin:7px 0 8px}.table-scroll{overflow:auto;margin-top:15px;border:1px solid #20242c;border-radius:14px}table{border-collapse:collapse;width:100%;min-width:880px;background:#0a0c10}th,td{text-align:left;padding:11px 12px;border-bottom:1px solid #1a1e25;font-size:12px;white-space:nowrap}th{position:sticky;top:0;background:#11141a;color:#7f8895;font-weight:650;cursor:pointer}td{color:#c5cad2}.num{font-variant-numeric:tabular-nums}.tag{padding:2px 6px;font-size:10px}.tag.est{border-style:dashed;color:#e5c38d}.tag.dep{color:#d28585}.plan-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.plan-summary div{background:#090b0f;border:1px solid #1d222a;border-radius:14px;padding:14px}.plan-summary span,.plan-summary small{display:block;color:#808996;font-size:11px}.plan-summary b{display:block;margin:5px 0;font-size:14px}.methodology-card{margin-bottom:14px;overflow:hidden}.methodology-card summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:22px}.method-body{border-top:1px solid #20242c;padding:22px;color:#aab1bc}.method-body h3{color:#eef1f5;font-size:15px;margin:20px 0 5px}.method-body h3:first-child{margin-top:0}.method-body p{font-size:13px;max-width:1100px}.method-body code{background:#080a0d;border:1px solid #232832;border-radius:6px;padding:2px 5px}.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:17px}.sources a{font-size:11px;padding:8px 10px;background:#090b0f;border:1px solid #1d222a;border-radius:9px}.sources a:after{content:" ↗";color:#667080}footer{text-align:center;color:#59616e;font-size:11px;padding:12px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#8ba1d8;margin-left:6px}.dot.estimated{background:transparent;border:2px dashed #c8d0dc}.rule{display:inline-block;width:20px;border-top:1px dashed #717a89;margin-left:6px}@media(max-width:1000px){.recommendation-grid,.insight-grid{grid-template-columns:1fr}.filters{grid-template-columns:1fr}.model-detail{grid-template-columns:1.4fr repeat(2,1fr)}.model-detail-main{grid-row:span 2}.detail-metric{border-left:1px solid #202631}.plan-summary{grid-template-columns:1fr 1fr}.sources{grid-template-columns:1fr 1fr}.chart-heading,.section-heading{flex-direction:column}.chart-actions{justify-content:flex-start}}@media(max-width:640px){.shell{width:calc(100% - 22px);padding-top:28px}.hero h1{font-size:38px}.chart-card,.table-card,.plan-card{padding:15px;border-radius:17px}.rec-card{padding:17px}.selects{flex-direction:column}.model-detail{grid-template-columns:1fr 1fr;padding:12px}.model-detail-main{grid-column:1/-1;grid-row:auto}.detail-metric{border-left:0;border-top:1px solid #202631;padding:9px 4px}.detail-note{padding:8px 4px}.canvas-wrap{height:560px;min-height:500px}.plan-summary,.sources{grid-template-columns:1fr}} \ No newline at end of file From c56535d5c66013913fc40a562f443e289b2ef69f Mon Sep 17 00:00:00 2001 From: blackkcold <56803469+blackkcold@users.noreply.github.com> Date: Mon, 5 Oct 2026 12:25:14 +0800 Subject: [PATCH 3/3] ui: move model details out of chart tooltip --- app.js | 67 ++++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 54 insertions(+), 13 deletions(-) diff --git a/app.js b/app.js index 7533faa..d869336 100644 --- a/app.js +++ b/app.js @@ -12,6 +12,7 @@ logScale: true, xMetric: "ratio", yMetric: "normalized", + selectedModel: null, sort: { key: "intelligence", dir: -1 } }; @@ -26,6 +27,32 @@ function xValue(d) { return state.xMetric === "ratio" ? ratio(d) : correctedCost(d); } function yValue(d) { return state.yMetric === "normalized" ? normalized(d) : d.intelligence; } + function renderModelDetail(d) { + const el = q("modelDetail"); + if (!d) { + el.innerHTML = '
悬停或点击图中的模型点查看详细信息
'; + return; + } + const dataTag = d.measured + ? '第三方统一实测' + : '估算 / 插值'; + const statusTag = d.status === "deprecated" ? '已弃用' : ''; + const note = d.estimateNote + || (d.measured ? '能力与单任务成本采用 Artificial Analysis 当前统一实测口径。' : '该点为官方存在档位的估算值，不作为最高能力结论依据。'); + el.innerHTML = ` +
+
MODEL DETAIL
+

${d.family} · ${effortLabel[d.effort]}

+

${d.provider} ${dataTag} ${statusTag}

+
+
AA Intelligence${d.intelligence}
+
综合能力${normalized(d).toFixed(1)}
+
AA 单任务成本${d.cost.toFixed(d.cost < 0.01 ? 4 : 2)}
+
调整后消耗倍率${ratio(d).toFixed(2)}×
+
${note}
+ `; + } + function visibleModels() { return D.models.filter(d => state.providers.has(d.provider) && state.efforts.has(d.effort) @@ -104,7 +131,8 @@ backgroundColor: arr.map(d=>d.measured?`${color}d9`:'rgba(0,0,0,0)'), pointStyle: arr.map(d=>d.measured?st.pointStyle:'crossRot'), pointRadius: arr.map(d=>d.effort==='max'?7:d.effort==='xhigh'?6.5:6), - pointHoverRadius: 9 + pointHoverRadius: 9, + pointHitRadius: 10 }; }); const p = pareto(points.filter(d=>d.measured)); @@ -119,21 +147,28 @@ const xTitle = state.xMetric === 'ratio' ? '任务消耗倍率（GPT‑6 Luna Max = 1×）' : 'AA 单任务成本（USD，含可选长任务修正）'; const yTitle = state.yMetric === 'normalized' ? '综合能力（当前最高 = 100）' : 'Artificial Analysis Intelligence Index'; return { - responsive:true, maintainAspectRatio:false, interaction:{mode:'nearest',intersect:false}, + responsive:true, maintainAspectRatio:false, interaction:{mode:'nearest',intersect:true}, animation:{duration:260}, + onHover(event,elements,chartRef){ + if(!elements.length)return; + const hit=elements[0],dataset=chartRef.data.datasets[hit.datasetIndex]; + if(dataset?._pareto)return; + const d=dataset?._raw?.[hit.index]; + if(d){state.selectedModel=d;renderModelDetail(d);} + }, + onClick(event,elements,chartRef){ + if(!elements.length)return; + const hit=elements[0],dataset=chartRef.data.datasets[hit.datasetIndex]; + if(dataset?._pareto)return; + const d=dataset?._raw?.[hit.index]; + if(d){state.selectedModel=d;renderModelDetail(d);} + }, plugins:{ legend:{display:true,position:'bottom',labels:{color:'#aab1bc',boxWidth:10,boxHeight:10,usePointStyle:true,padding:18,font:{size:11},filter:item=>item.text!=="Pareto frontier"}}, - tooltip:{backgroundColor:'rgba(12,14,18,.96)',borderColor:'#303642',borderWidth:1,titleColor:'#fff',bodyColor:'#c5cbd5',padding:12, + tooltip:{backgroundColor:'rgba(12,14,18,.96)',borderColor:'#303642',borderWidth:1,bodyColor:'#e7ebf2',padding:9,displayColors:false, callbacks:{ - title(items){const d=items[0]?.raw?.raw; return d?`${d.family} · ${effortLabel[d.effort]}`:'';}, - label(ctx){const d=ctx.raw.raw;if(!d)return'';return [ - `Provider: ${d.provider}`, - `AA Intelligence: ${d.intelligence} · 能力 ${normalized(d).toFixed(1)}`, - `AA task cost: $${d.cost.toFixed(d.cost<0.01?4:2)}`, - `调整后消耗: ${ratio(d).toFixed(2)}× Luna Max`, - `${d.measured?'实测':'估算'}${d.status==='deprecated'?' · 已弃用':''}`, - d.estimateNote || '' - ].filter(Boolean);} + title(){return '';}, + label(ctx){const d=ctx.raw.raw;return d?`${ratio(d).toFixed(2)}× Luna Max`:'';} } } }, @@ -178,7 +213,13 @@ q('sources').innerHTML=D.sources.map(s=>`${s.label}`).join(''); } - function update(){renderChart();renderTable();} + function update(){ + const visible=visibleModels(); + if(state.selectedModel && !visible.includes(state.selectedModel)) state.selectedModel=null; + renderChart(); + renderTable(); + renderModelDetail(state.selectedModel); + } function bind(){ q('agentCorrection').onchange=e=>{state.correction=e.target.checked;update();}; q('logScale').onchange=e=>{state.logScale=e.target.checked;update();};