196 lines
5.9 KiB
HTML
196 lines
5.9 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>ROI 4-Model Compare</title>
|
||
<style>
|
||
:root {
|
||
--bg: #efe8dc;
|
||
--panel: #fffdf8;
|
||
--ink: #1f1f1f;
|
||
--muted: #6f675c;
|
||
--line: #d8d0c4;
|
||
--accent: #a86d2d;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
color: var(--ink);
|
||
font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
|
||
background:
|
||
radial-gradient(circle at top left, rgba(255,255,255,0.7), transparent 30%),
|
||
linear-gradient(180deg, #f5f1ea 0%, var(--bg) 100%);
|
||
}
|
||
.wrap {
|
||
max-width: 1800px;
|
||
margin: 0 auto;
|
||
padding: 24px;
|
||
}
|
||
h1 {
|
||
margin: 0;
|
||
font-size: 30px;
|
||
}
|
||
.lead {
|
||
margin: 10px 0 24px;
|
||
color: var(--muted);
|
||
line-height: 1.6;
|
||
}
|
||
.legend {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 14px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.legend-item {
|
||
padding: 12px 14px;
|
||
border: 1px solid var(--line);
|
||
background: rgba(255,255,255,0.72);
|
||
border-radius: 12px;
|
||
font-size: 14px;
|
||
}
|
||
.legend-item b {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
color: var(--accent);
|
||
}
|
||
.sample {
|
||
margin-bottom: 24px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 18px;
|
||
background: rgba(255,255,255,0.72);
|
||
overflow: hidden;
|
||
box-shadow: 0 12px 36px rgba(85, 58, 25, 0.08);
|
||
}
|
||
.sample-title {
|
||
padding: 14px 18px;
|
||
font-size: 15px;
|
||
color: var(--muted);
|
||
border-bottom: 1px solid var(--line);
|
||
background: rgba(255,250,244,0.9);
|
||
word-break: break-all;
|
||
}
|
||
.row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 12px;
|
||
padding: 14px;
|
||
}
|
||
.card {
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
background: var(--panel);
|
||
}
|
||
.card-head {
|
||
padding: 10px 12px;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
border-bottom: 1px solid var(--line);
|
||
background: #faf7f1;
|
||
}
|
||
.card-head b {
|
||
color: var(--ink);
|
||
}
|
||
img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
background: #e8dfd1;
|
||
}
|
||
@media (max-width: 1200px) {
|
||
.legend, .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
}
|
||
@media (max-width: 700px) {
|
||
.legend, .row { grid-template-columns: 1fr; }
|
||
.wrap { padding: 14px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<h1>ROI 四模型对照</h1>
|
||
<p class="lead">每一行是一张 ROI 图，四列分别是当前主力、20k filtered 80 轮、100k filtered 35 轮、100k filtered 60 轮。建议重点看框的位置、是否盖住真实鞋区域，以及对大面积复杂纹理鞋子的适应性。</p>
|
||
<div class="legend">
|
||
<div class="legend-item"><b>Current</b>当前主力 ROI 模型</div>
|
||
<div class="legend-item"><b>20k-80</b>20k filtered + 80 epochs</div>
|
||
<div class="legend-item"><b>100k-35</b>100k filtered + 35 epochs</div>
|
||
<div class="legend-item"><b>100k-60</b>100k filtered + 60 epochs</div>
|
||
</div>
|
||
<div id="samples"></div>
|
||
</div>
|
||
<script>
|
||
const files = [
|
||
"屏幕截图 2026-03-15 104013.jpg",
|
||
"屏幕截图 2026-03-15 104056.jpg",
|
||
"屏幕截图 2026-03-15 104132.jpg",
|
||
"屏幕截图 2026-03-15 104233.jpg",
|
||
"屏幕截图 2026-03-15 104318.jpg",
|
||
"屏幕截图 2026-03-15 104349.jpg",
|
||
"屏幕截图 2026-03-15 104428.jpg",
|
||
"屏幕截图 2026-03-15 104443.jpg",
|
||
"屏幕截图 2026-03-15 104503.jpg",
|
||
"屏幕截图 2026-03-15 104530.jpg",
|
||
"屏幕截图 2026-03-15 104547.jpg",
|
||
"屏幕截图 2026-03-15 104614.jpg",
|
||
"屏幕截图 2026-03-15 104636.jpg",
|
||
"屏幕截图 2026-03-15 104647.jpg",
|
||
"屏幕截图 2026-03-15 104827.jpg",
|
||
"屏幕截图 2026-03-15 104839.jpg",
|
||
"屏幕截图 2026-03-15 104852.jpg",
|
||
"屏幕截图 2026-03-15 104901.jpg",
|
||
"屏幕截图 2026-03-15 104915.jpg",
|
||
"屏幕截图 2026-03-15 104942.jpg",
|
||
"屏幕截图 2026-03-15 105007.jpg",
|
||
"屏幕截图 2026-03-15 105043.jpg",
|
||
"屏幕截图 2026-03-15 105101.jpg",
|
||
"屏幕截图 2026-03-15 105116.jpg",
|
||
"屏幕截图 2026-03-15 105156.jpg",
|
||
"屏幕截图 2026-03-15 105219.jpg"
|
||
];
|
||
|
||
const models = [
|
||
{ title: "Current", subtitle: "当前主力", dir: "../../runs/roi_eval/roi_shoes_v1/" },
|
||
{ title: "20k-80", subtitle: "20k filtered + 80 epochs", dir: "../../runs/roi_eval/roi_shoes_20k_filtered_80/" },
|
||
{ title: "100k-35", subtitle: "100k filtered + 35 epochs", dir: "../../runs/roi_eval/roi_shoes_100k_filtered_35/" },
|
||
{ title: "100k-60", subtitle: "100k filtered + 60 epochs", dir: "../../runs/roi_eval/roi_shoes_100k_filtered_60/" }
|
||
];
|
||
|
||
const host = document.getElementById("samples");
|
||
|
||
files.forEach((file) => {
|
||
const section = document.createElement("section");
|
||
section.className = "sample";
|
||
|
||
const title = document.createElement("div");
|
||
title.className = "sample-title";
|
||
title.textContent = file;
|
||
section.appendChild(title);
|
||
|
||
const row = document.createElement("div");
|
||
row.className = "row";
|
||
|
||
models.forEach((model) => {
|
||
const card = document.createElement("div");
|
||
card.className = "card";
|
||
|
||
const head = document.createElement("div");
|
||
head.className = "card-head";
|
||
head.innerHTML = `<b>${model.title}</b>${model.subtitle}`;
|
||
card.appendChild(head);
|
||
|
||
const img = document.createElement("img");
|
||
img.src = model.dir + encodeURIComponent(file);
|
||
img.alt = `${model.title} ${file}`;
|
||
card.appendChild(img);
|
||
|
||
row.appendChild(card);
|
||
});
|
||
|
||
section.appendChild(row);
|
||
host.appendChild(section);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|