xsl
5101bb5f6b
- test_interface2.html: 新增「重绘分辨率」下拉(默认896/1024/768/640/不缩图0)， 仅 female 生效，append redraw_max_side 字段；male 时自动隐藏 - 新增分辨率对比测试工具 (image/compare_test, image/res_test): - batch_test.py: 串行批量测试脚本，支持断点续跑 - gen_report.py: 生成自包含 HTML 对比报告(速度色阶+缩略图+点击放大) - 两轮测试结果: - v1: 4图×5发型×2档=40次 (compare_test) - v2: 5图×3发型×5档=75次 (res_test) - 结论: 大图(长边>1600)原图直送比896档慢~3倍; 中小图各档差异小 - .gitignore: 忽略测试结果图/原图副本/运行日志(out/, *.log, progress.json)
91 lines
18 KiB
HTML
91 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>接口2 分辨率对比测试报告</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f3f4f6; color: #1f2937; line-height: 1.5; padding: 20px; }
|
||
.wrap { max-width: 1200px; margin: 0 auto; }
|
||
h1 { font-size: 24px; margin-bottom: 4px; }
|
||
.sub { color: #6b7280; font-size: 13px; margin-bottom: 20px; }
|
||
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
|
||
.stat { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
|
||
.stat .num { font-size: 26px; font-weight: 700; }
|
||
.stat .lbl { font-size: 12px; color: #6b7280; margin-top: 2px; }
|
||
.stat.d .num { color: #2563eb; }
|
||
.stat.o .num { color: #f59e0b; }
|
||
.card { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.07); margin-bottom: 20px; overflow: hidden; }
|
||
.card-h { padding: 12px 18px; background: #fafafa; border-bottom: 1px solid #f0f0f0; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
|
||
.card-h .tag { font-size: 11px; font-weight: 500; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 10px; }
|
||
.card-b { padding: 16px; }
|
||
.chart { width: 100%; height: auto; max-width: 880px; }
|
||
.barlabel { font-size: 12px; fill: #374151; font-weight: 600; }
|
||
.rowlabel { font-size: 11px; fill: #6b7280; }
|
||
.imglabel { font-size: 14px; fill: #111; font-weight: 700; }
|
||
.imgside { font-size: 10px; fill: #9ca3af; font-weight: 400; }
|
||
table.cmp { width: 100%; border-collapse: collapse; }
|
||
table.cmp th { font-size: 12px; color: #6b7280; font-weight: 600; padding: 8px; text-align: center; border-bottom: 2px solid #f0f0f0; }
|
||
table.cmp td { padding: 8px; border-bottom: 1px solid #f6f6f6; vertical-align: top; text-align: center; }
|
||
table.cmp th.d, table.cmp td.d { background: #eff6ff; }
|
||
table.cmp th.o, table.cmp td.o { background: #fffbeb; }
|
||
td.sname { font-weight: 600; text-align: left; width: 90px; }
|
||
td.sname span { display: block; font-size: 11px; color: #9ca3af; font-weight: 400; }
|
||
td.diff { font-size: 13px; width: 90px; }
|
||
.thumb { background: #222; border-radius: 6px; overflow: hidden; margin-bottom: 4px; cursor: zoom-in; }
|
||
.thumb img { width: 100%; height: 220px; object-fit: contain; display: block; }
|
||
.noimg { color: #d1d5db; font-size: 12px; padding: 40px 0; }
|
||
.meta { font-size: 11px; color: #6b7280; }
|
||
.err { font-size: 10px; color: #dc2626; margin-top: 2px; }
|
||
.note { background: #fef3c7; border-left: 3px solid #f59e0b; padding: 12px 16px; border-radius: 6px; font-size: 13px; margin-bottom: 20px; }
|
||
.legend { display: flex; gap: 20px; font-size: 12px; color: #6b7280; margin-bottom: 12px; }
|
||
.legend span { display: inline-flex; align-items: center; gap: 5px; }
|
||
.legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
|
||
/* 图片放大层 */
|
||
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 999; justify-content: center; align-items: center; cursor: zoom-out; padding: 30px; }
|
||
.overlay.active { display: flex; }
|
||
.overlay img { max-width: 95%; max-height: 95%; object-fit: contain; border-radius: 4px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<h1>💄 接口2 生发 · 分辨率对比测试报告</h1>
|
||
<p class="sub">POST /api/v1/hair/grow · female · 4 张图 × 5 发型 × 2 档分辨率 = 40 次 · 串行 · 4090 (24G)</p>
|
||
|
||
<div class="summary">
|
||
<div class="stat"><div class="num">40/40</div><div class="lbl">成功 / 总数</div></div>
|
||
<div class="stat d"><div class="num">10.4s</div><div class="lbl">默认896 平均耗时</div></div>
|
||
<div class="stat o"><div class="num">17.4s</div><div class="lbl">原图直送 平均耗时</div></div>
|
||
<div class="stat"><div class="num" style="color:#dc2626">×1.67</div><div class="lbl">原图/默认 倍率</div></div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<b>📊 结论：</b>原图长边 ≤ 1082（girl2/girl5）时两档耗时接近；原图长边 > 1600（qwer/asdf）时，<b>原图直送比默认896慢约 2.3~2.5 倍</b>。
|
||
4090 24G 显存扛得住长边 1678 的原图直送（无 OOM）。<b>画质对比</b>见下方左右并排图，点击可放大。
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-h">📈 平均耗时对比（按图分组，单位：秒）</div>
|
||
<div class="card-b">
|
||
<div class="legend"><span><i style="background:#2563eb"></i>默认 896</span><span><i style="background:#f59e0b"></i>原图直送 0</span></div>
|
||
<svg viewBox="0 0 890 320" class="chart"><rect x="70" y="10" width="296" height="24" rx="3" fill="#2563eb"/><text x="372" y="27" class="barlabel">11.7s</text><text x="62" y="27" class="rowlabel" text-anchor="end">默认896</text><rect x="70" y="38" width="315" height="24" rx="3" fill="#f59e0b"/><text x="391" y="55" class="barlabel">12.4s </text><text x="62" y="55" class="rowlabel" text-anchor="end">原图0</text><text x="0" y="36" class="imglabel">girl2<tspan class="imgside">长边1082</tspan></text><rect x="70" y="80" width="215" height="24" rx="3" fill="#2563eb"/><text x="291" y="97" class="barlabel">8.5s</text><text x="62" y="97" class="rowlabel" text-anchor="end">默认896</text><rect x="70" y="108" width="187" height="24" rx="3" fill="#f59e0b"/><text x="263" y="125" class="barlabel">7.4s </text><text x="62" y="125" class="rowlabel" text-anchor="end">原图0</text><text x="0" y="106" class="imglabel">girl5<tspan class="imgside">长边767</tspan></text><rect x="70" y="150" width="270" height="24" rx="3" fill="#2563eb"/><text x="346" y="167" class="barlabel">10.7s</text><text x="62" y="167" class="rowlabel" text-anchor="end">默认896</text><rect x="70" y="178" width="654" height="24" rx="3" fill="#f59e0b"/><text x="730" y="195" class="barlabel">25.8s ⚠</text><text x="62" y="195" class="rowlabel" text-anchor="end">原图0</text><text x="0" y="176" class="imglabel">qwer<tspan class="imgside">长边1678</tspan></text><rect x="70" y="220" width="273" height="24" rx="3" fill="#2563eb"/><text x="349" y="237" class="barlabel">10.8s</text><text x="62" y="237" class="rowlabel" text-anchor="end">默认896</text><rect x="70" y="248" width="606" height="24" rx="3" fill="#f59e0b"/><text x="682" y="265" class="barlabel">24.0s ⚠</text><text x="62" y="265" class="rowlabel" text-anchor="end">原图0</text><text x="0" y="246" class="imglabel">asdf<tspan class="imgside">长边1666</tspan></text></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 style="font-size:18px;margin:8px 0 14px">🔍 画质对比（左：默认896 · 右：原图直送）</h2>
|
||
<div class="card"><div class="card-h">📷 girl2 <span class="tag">原图长边 1082px</span></div><div class="card-b"><table class="cmp"><thead><tr><th>发型</th><th class="d">默认 896</th><th class="o">原图直送 0</th><th>耗时差</th></tr></thead><tbody><tr><td class="sname">ellipse<span>椭圆</span></td><td class="d"><div class="thumb"><img loading="lazy" src="girl2_ellipse_default896.jpg" onclick="openImg(this.src)" alt="girl2_ellipse_default896"></div><div class="meta">✅ 10.8s · 1082×1081</div></td><td class="o"><div class="thumb"><img loading="lazy" src="girl2_ellipse_origin0.jpg" onclick="openImg(this.src)" alt="girl2_ellipse_origin0"></div><div class="meta">✅ 13.3s · 1088×1088</div></td><td class="diff"><span style="color:#16a34a;font-weight:600">+2.5s</span></td></tr><tr><td class="sname">flower<span>花瓣</span></td><td class="d"><div class="thumb"><img loading="lazy" src="girl2_flower_default896.jpg" onclick="openImg(this.src)" alt="girl2_flower_default896"></div><div class="meta">✅ 11.0s · 1082×1081</div></td><td class="o"><div class="thumb"><img loading="lazy" src="girl2_flower_origin0.jpg" onclick="openImg(this.src)" alt="girl2_flower_origin0"></div><div class="meta">✅ 12.5s · 1088×1088</div></td><td class="diff"><span style="color:#9ca3af;font-weight:600">+1.5s</span></td></tr><tr><td class="sname">heart<span>心形</span></td><td class="d"><div class="thumb"><img loading="lazy" src="girl2_heart_default896.jpg" onclick="openImg(this.src)" alt="girl2_heart_default896"></div><div class="meta">✅ 11.9s · 1082×1081</div></td><td class="o"><div class="thumb"><img loading="lazy" src="girl2_heart_origin0.jpg" onclick="openImg(this.src)" alt="girl2_heart_origin0"></div><div class="meta">✅ 12.2s · 1088×1088</div></td><td class="diff"><span style="color:#9ca3af;font-weight:600">+0.3s</span></td></tr><tr><td class="sname">straight<span>直线</span></td><td class="d"><div class="thumb"><img loading="lazy" src="girl2_straight_default896.jpg" onclick="openImg(this.src)" alt="girl2_straight_default896"></div><div class="meta">✅ 12.1s · 1082×1081</div></td><td class="o"><div class="thumb"><img loading="lazy" src="girl2_straight_origin0.jpg" onclick="openImg(this.src)" alt="girl2_straight_origin0"></div><div class="meta">✅ 12.3s · 1088×1088</div></td><td class="diff"><span style="color:#9ca3af;font-weight:600">+0.2s</span></td></tr><tr><td class="sname">wave<span>波浪</span></td><td class="d"><div class="thumb"><img loading="lazy" src="girl2_wave_default896.jpg" onclick="openImg(this.src)" alt="girl2_wave_default896"></div><div class="meta">✅ 12.7s · 1082×1081</div></td><td class="o"><div class="thumb"><img loading="lazy" src="girl2_wave_origin0.jpg" onclick="openImg(this.src)" alt="girl2_wave_origin0"></div><div class="meta">✅ 11.9s · 1088×1088</div></td><td class="diff"><span style="color:#9ca3af;font-weight:600">-0.8s</span></td></tr></tbody></table></div></div><div class="card"><div class="card-h">📷 girl5 <span class="tag">原图长边 767px</span></div><div class="card-b"><table class="cmp"><thead><tr><th>发型</th><th class="d">默认 896</th><th class="o">原图直送 0</th><th>耗时差</th></tr></thead><tbody><tr><td class="sname">ellipse<span>椭圆</span></td><td class="d"><div class="thumb"><img loading="lazy" src="girl5_ellipse_default896.jpg" onclick="openImg(this.src)" alt="girl5_ellipse_default896"></div><div class="meta">✅ 9.6s · 768×752</div></td><td class="o"><div class="thumb"><img loading="lazy" src="girl5_ellipse_origin0.jpg" onclick="openImg(this.src)" alt="girl5_ellipse_origin0"></div><div class="meta">✅ 7.3s · 768×752</div></td><td class="diff"><span style="color:#16a34a;font-weight:600">-2.3s</span></td></tr><tr><td class="sname">flower<span>花瓣</span></td><td class="d"><div class="thumb"><img loading="lazy" src="girl5_flower_default896.jpg" onclick="openImg(this.src)" alt="girl5_flower_default896"></div><div class="meta">✅ 8.0s · 768×752</div></td><td class="o"><div class="thumb"><img loading="lazy" src="girl5_flower_origin0.jpg" onclick="openImg(this.src)" alt="girl5_flower_origin0"></div><div class="meta">✅ 7.2s · 768×752</div></td><td class="diff"><span style="color:#9ca3af;font-weight:600">-0.8s</span></td></tr><tr><td class="sname">heart<span>心形</span></td><td class="d"><div class="thumb"><img loading="lazy" src="girl5_heart_default896.jpg" onclick="openImg(this.src)" alt="girl5_heart_default896"></div><div class="meta">✅ 8.1s · 768×752</div></td><td class="o"><div class="thumb"><img loading="lazy" src="girl5_heart_origin0.jpg" onclick="openImg(this.src)" alt="girl5_heart_origin0"></div><div class="meta">✅ 7.6s · 768×752</div></td><td class="diff"><span style="color:#9ca3af;font-weight:600">-0.5s</span></td></tr><tr><td class="sname">straight<span>直线</span></td><td class="d"><div class="thumb"><img loading="lazy" src="girl5_straight_default896.jpg" onclick="openImg(this.src)" alt="girl5_straight_default896"></div><div class="meta">✅ 8.4s · 768×752</div></td><td class="o"><div class="thumb"><img loading="lazy" src="girl5_straight_origin0.jpg" onclick="openImg(this.src)" alt="girl5_straight_origin0"></div><div class="meta">✅ 7.2s · 768×752</div></td><td class="diff"><span style="color:#9ca3af;font-weight:600">-1.2s</span></td></tr><tr><td class="sname">wave<span>波浪</span></td><td class="d"><div class="thumb"><img loading="lazy" src="girl5_wave_default896.jpg" onclick="openImg(this.src)" alt="girl5_wave_default896"></div><div class="meta">✅ 8.4s · 768×752</div></td><td class="o"><div class="thumb"><img loading="lazy" src="girl5_wave_origin0.jpg" onclick="openImg(this.src)" alt="girl5_wave_origin0"></div><div class="meta">✅ 7.7s · 768×752</div></td><td class="diff"><span style="color:#9ca3af;font-weight:600">-0.7s</span></td></tr></tbody></table></div></div><div class="card"><div class="card-h">📷 qwer <span class="tag">原图长边 1678px</span></div><div class="card-b"><table class="cmp"><thead><tr><th>发型</th><th class="d">默认 896</th><th class="o">原图直送 0</th><th>耗时差</th></tr></thead><tbody><tr><td class="sname">ellipse<span>椭圆</span></td><td class="d"><div class="thumb"><img loading="lazy" src="qwer_ellipse_default896.jpg" onclick="openImg(this.src)" alt="qwer_ellipse_default896"></div><div class="meta">✅ 10.2s · 1288×1678</div></td><td class="o"><div class="thumb"><img loading="lazy" src="qwer_ellipse_origin0.jpg" onclick="openImg(this.src)" alt="qwer_ellipse_origin0"></div><div class="meta">✅ 30.0s · 1280×1680</div></td><td class="diff"><span style="color:#dc2626;font-weight:600">+19.8s</span></td></tr><tr><td class="sname">flower<span>花瓣</span></td><td class="d"><div class="thumb"><img loading="lazy" src="qwer_flower_default896.jpg" onclick="openImg(this.src)" alt="qwer_flower_default896"></div><div class="meta">✅ 10.2s · 1288×1678</div></td><td class="o"><div class="thumb"><img loading="lazy" src="qwer_flower_origin0.jpg" onclick="openImg(this.src)" alt="qwer_flower_origin0"></div><div class="meta">✅ 25.0s · 1280×1680</div></td><td class="diff"><span style="color:#dc2626;font-weight:600">+14.8s</span></td></tr><tr><td class="sname">heart<span>心形</span></td><td class="d"><div class="thumb"><img loading="lazy" src="qwer_heart_default896.jpg" onclick="openImg(this.src)" alt="qwer_heart_default896"></div><div class="meta">✅ 11.1s · 1288×1678</div></td><td class="o"><div class="thumb"><img loading="lazy" src="qwer_heart_origin0.jpg" onclick="openImg(this.src)" alt="qwer_heart_origin0"></div><div class="meta">✅ 25.0s · 1280×1680</div></td><td class="diff"><span style="color:#dc2626;font-weight:600">+13.9s</span></td></tr><tr><td class="sname">straight<span>直线</span></td><td class="d"><div class="thumb"><img loading="lazy" src="qwer_straight_default896.jpg" onclick="openImg(this.src)" alt="qwer_straight_default896"></div><div class="meta">✅ 10.7s · 1288×1678</div></td><td class="o"><div class="thumb"><img loading="lazy" src="qwer_straight_origin0.jpg" onclick="openImg(this.src)" alt="qwer_straight_origin0"></div><div class="meta">✅ 23.4s · 1280×1680</div></td><td class="diff"><span style="color:#dc2626;font-weight:600">+12.7s</span></td></tr><tr><td class="sname">wave<span>波浪</span></td><td class="d"><div class="thumb"><img loading="lazy" src="qwer_wave_default896.jpg" onclick="openImg(this.src)" alt="qwer_wave_default896"></div><div class="meta">✅ 11.1s · 1288×1678</div></td><td class="o"><div class="thumb"><img loading="lazy" src="qwer_wave_origin0.jpg" onclick="openImg(this.src)" alt="qwer_wave_origin0"></div><div class="meta">✅ 25.8s · 1280×1680</div></td><td class="diff"><span style="color:#dc2626;font-weight:600">+14.7s</span></td></tr></tbody></table></div></div><div class="card"><div class="card-h">📷 asdf <span class="tag">原图长边 1666px</span></div><div class="card-b"><table class="cmp"><thead><tr><th>发型</th><th class="d">默认 896</th><th class="o">原图直送 0</th><th>耗时差</th></tr></thead><tbody><tr><td class="sname">ellipse<span>椭圆</span></td><td class="d"><div class="thumb"><img loading="lazy" src="asdf_ellipse_default896.jpg" onclick="openImg(this.src)" alt="asdf_ellipse_default896"></div><div class="meta">✅ 11.2s · 1254×1666</div></td><td class="o"><div class="thumb"><img loading="lazy" src="asdf_ellipse_origin0.jpg" onclick="openImg(this.src)" alt="asdf_ellipse_origin0"></div><div class="meta">✅ 25.7s · 1248×1664</div></td><td class="diff"><span style="color:#dc2626;font-weight:600">+14.5s</span></td></tr><tr><td class="sname">flower<span>花瓣</span></td><td class="d"><div class="thumb"><img loading="lazy" src="asdf_flower_default896.jpg" onclick="openImg(this.src)" alt="asdf_flower_default896"></div><div class="meta">✅ 10.7s · 1254×1666</div></td><td class="o"><div class="thumb"><img loading="lazy" src="asdf_flower_origin0.jpg" onclick="openImg(this.src)" alt="asdf_flower_origin0"></div><div class="meta">✅ 22.9s · 1248×1664</div></td><td class="diff"><span style="color:#dc2626;font-weight:600">+12.2s</span></td></tr><tr><td class="sname">heart<span>心形</span></td><td class="d"><div class="thumb"><img loading="lazy" src="asdf_heart_default896.jpg" onclick="openImg(this.src)" alt="asdf_heart_default896"></div><div class="meta">✅ 10.4s · 1254×1666</div></td><td class="o"><div class="thumb"><img loading="lazy" src="asdf_heart_origin0.jpg" onclick="openImg(this.src)" alt="asdf_heart_origin0"></div><div class="meta">✅ 22.9s · 1248×1664</div></td><td class="diff"><span style="color:#dc2626;font-weight:600">+12.5s</span></td></tr><tr><td class="sname">straight<span>直线</span></td><td class="d"><div class="thumb"><img loading="lazy" src="asdf_straight_default896.jpg" onclick="openImg(this.src)" alt="asdf_straight_default896"></div><div class="meta">✅ 9.8s · 1254×1666</div></td><td class="o"><div class="thumb"><img loading="lazy" src="asdf_straight_origin0.jpg" onclick="openImg(this.src)" alt="asdf_straight_origin0"></div><div class="meta">✅ 24.0s · 1248×1664</div></td><td class="diff"><span style="color:#dc2626;font-weight:600">+14.2s</span></td></tr><tr><td class="sname">wave<span>波浪</span></td><td class="d"><div class="thumb"><img loading="lazy" src="asdf_wave_default896.jpg" onclick="openImg(this.src)" alt="asdf_wave_default896"></div><div class="meta">✅ 11.9s · 1254×1666</div></td><td class="o"><div class="thumb"><img loading="lazy" src="asdf_wave_origin0.jpg" onclick="openImg(this.src)" alt="asdf_wave_origin0"></div><div class="meta">✅ 24.3s · 1248×1664</div></td><td class="diff"><span style="color:#dc2626;font-weight:600">+12.4s</span></td></tr></tbody></table></div></div>
|
||
|
||
</div>
|
||
<div class="overlay" id="overlay" onclick="this.classList.remove('active')">
|
||
<img id="overlayImg" src="">
|
||
</div>
|
||
<script>
|
||
function openImg(src) {
|
||
document.getElementById('overlayImg').src = src;
|
||
document.getElementById('overlay').classList.add('active');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|