hz4th_coder/model-eval-site
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.2.0 对比车+运行速度对比图+图表可配置：移除前台后台管理链接(网址直达登录)；新增🛒对比车(排行榜行加入,浮动条隐藏默认,对比页按加入顺序对比,无车默认前5,默认只对比预填充+解码)；首页解码速度对比图改运行速度对比(预填充左轴空心柱+解码右轴实心柱+首字虚线)；对比图支持柱状(空心/实心)/折线(实线/虚线)+左右双轴+三色深度+X轴旋转/间隔/字号防拥挤

Browse Source
This commit is contained in:
hz4th_coder
2026-09-02 13:59:57 +08:00
parent c6eef5e67f
commit 1021a037cf
7 changed files with 275 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/compare.html
+38 -15
View File
@@ -15,21 +15,21 @@
<a href="/compare.html">⚖️ 模型对比</a>
</nav>
<div class="spacer"></div>
<a href="/admin.html" class="hint">⚙️ 后台管理</a>
</div>
<div class="container">
<div class="panel">
<h2>⚖️ 模型对比 <span class="hint">（默认对比全部模型；支持硬件显示；下方勾选可去留对比项）</span></h2>
<h2>⚖️ 模型对比 <span class="hint">（默认对比前5个；有对比车则按加入顺序对比；默认只对比预填充+解码）</span></h2>
<div class="hint" style="margin-bottom:8px">① 选择要对比的模型（默认全部）：</div>
<div class="hint" style="margin-bottom:8px">① 选择要对比的模型（来自对比车，或默认前5；可勾选增删）：</div>
<div class="chips" id="cmp-models"></div>
<div class="form-row" style="margin-top:8px">
<button class="btn small" id="cmp-all">✅ 全选</button>
<button class="btn small" id="cmp-none">❌ 清空</button>
<button class="btn small danger" id="cmp-clear-cart">🗑 清空对比车</button>
</div>
<div class="hint" style="margin:12px 0 6px">② 勾选需要展示的对比项（可去留）：</div>
<div class="hint" style="margin:12px 0 6px">② 勾选需要展示的对比项（可去留，默认预填充+解码）：</div>
<div class="col-toggles" id="cmp-cols"></div>
<div class="form-row" style="margin-top:10px">
@@ -43,25 +43,48 @@
</div>
<div class="panel">
<h2>📊 对比图表</h2>
<div class="chart-toolbar">
<select id="cmp-metric">
<option value="avg_decode_speed">解码速度 (tok/s)</option>
<option value="avg_prefill_speed">预填充速度 (tok/s)</option>
<option value="avg_ttft_ms">首字延迟 (ms)</option>
<option value="best_decode">最佳解码 (tok/s)</option>
<h2>📊 运行速度对比图 <span class="hint">（柱状·空心/实心 / 折线·实线/虚线 / 左右双轴 / 三色深度 / X轴可旋转防拥挤）</span></h2>
<div class="hint" style="margin-bottom:8px">③ 每个系列设置类型与左右轴，颜色按深浅三色区分；默认只对比预填充（左轴·空心柱）+ 解码（右轴·实心柱）：</div>
<div class="tbl-wrap">
<table class="mini" id="cmp-series-cfg">
<thead><tr><th>系列</th><th>显示</th><th>类型</th><th>轴</th><th>颜色</th></tr></thead>
<tbody></tbody>
</table>
</div>
<div class="form-row" style="margin-top:10px">
<label>X轴标签旋转</label>
<select id="cmp-xrotate">
<option value="auto">自动</option>
<option value="0">水平 0°</option>
<option value="30">30°</option>
<option value="45">45°</option>
<option value="60">60°</option>
<option value="90">垂直 90°</option>
</select>
<select id="cmp-chart-type">
<option value="bar">柱状图</option>
<option value="line">折线图</option>
<label>标签字号</label>
<input type="number" id="cmp-xfont" value="12" min="9" max="22" style="width:64px">
<label>标签间隔</label>
<select id="cmp-xinterval">
<option value="auto">不跳(全显示)</option>
<option value="1">隔1个</option>
<option value="2">隔2个</option>
<option value="3">隔3个</option>
</select>
<button class="btn small primary" id="cmp-chart-gen">🎨 生成/刷新图表</button>
<span class="hint" id="cmp-chart-status"></span>
</div>
<div class="chart-img-wrap" id="cmp-chart-img"><div class="hint">选择指标后点击生成（默认对比全部选中模型）</div></div>
<div class="chart-img-wrap" id="cmp-chart-img"><div class="hint">配置好后点击生成；底部横轴字太多可旋转/加间隔避免挤在一起</div></div>
</div>
</div>
<!-- 对比车 -->
<div id="cart-bar" hidden>
<span class="cart-label">🛒 对比车 (<b id="cart-count">0</b>)</span>
<span class="cart-items" id="cart-items"></span>
<button class="btn small danger" id="cart-clear">清空</button>
<button class="btn small primary" id="cart-go">⚖️ 对比</button>
</div>
<div id="toast"></div>
<script src="/js/app.js"></script>
</body>