admin/ISISeg
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

2026-05-18-19-06-50 构建网页端分割工作台

Browse Source
This commit is contained in:
admin
2026-05-18 19:11:58 +08:00
parent dd2a49ad91
commit 77b8ecdfbe
10 changed files with 851 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -5,6 +5,7 @@
## 功能
- Web 上传图片或视频。
- Web 端支持拖拽上传、样例视频一键加载、算法卡片选择、参数调节、输入预览和结果详情弹窗。
- 支持 `hessian_ridge`、`edge_morphology`、`temporal_difference`、`fusion`、`compare` 五种模式。
- 显示原图、导丝叠加结果、掩膜、覆盖率、骨架长度和连通域数量。
- 提供合成导丝视频生成脚本，便于快速验证。

18
backend/main.py
View File

@@ -52,6 +52,24 @@ def methods() -> dict[str, Any]:
return {"methods": METHOD_DESCRIPTIONS}
@app.get("/api/samples")
def samples() -> dict[str, Any]:
ensure_dirs()
items = []
for path in sorted(SAMPLE_DIR.glob("*")):
suffix = path.suffix.lower()
if suffix in IMAGE_SUFFIXES | VIDEO_SUFFIXES:
items.append(
{
"name": path.name,
"url": _public(path),
"kind": "image" if suffix in IMAGE_SUFFIXES else "video",
"size": path.stat().st_size,
}
)
return {"samples": items}
def _public(path: Path) -> str:
return "/" + path.relative_to(ROOT).as_posix()

193
frontend/app.js
View File

@@ -1,21 +1,79 @@
const form = document.querySelector("#segmentForm");
const methodSelect = document.querySelector("#method");
const methodGrid = document.querySelector("#methodGrid");
const sensitivity = document.querySelector("#sensitivity");
const sensitivityValue = document.querySelector("#sensitivityValue");
const fileInput = document.querySelector("#file");
const fileName = document.querySelector("#fileName");
const dropZone = document.querySelector("#dropZone");
const sampleButton = document.querySelector("#sampleButton");
const clearButton = document.querySelector("#clearButton");
const resultGrid = document.querySelector("#resultGrid");
const emptyState = document.querySelector("#emptyState");
const videoLink = document.querySelector("#videoLink");
const health = document.querySelector("#health");
const template = document.querySelector("#resultCardTemplate");
const previewEmpty = document.querySelector("#previewEmpty");
const videoPreview = document.querySelector("#videoPreview");
const imagePreview = document.querySelector("#imagePreview");
const progressWrap = document.querySelector("#progressWrap");
const progressText = document.querySelector("#progressText");
const summaryStrip = document.querySelector("#summaryStrip");
const summaryJob = document.querySelector("#summaryJob");
const summaryFrames = document.querySelector("#summaryFrames");
const summaryCoverage = document.querySelector("#summaryCoverage");
const summarySkeleton = document.querySelector("#summarySkeleton");
const resultCount = document.querySelector("#resultCount");
const jobMeta = document.querySelector("#jobMeta");
const detailDialog = document.querySelector("#detailDialog");
const closeDialog = document.querySelector("#closeDialog");
const methodLabels = new Map();
const methodDescriptions = new Map();
let selectedFile = null;
let currentObjectUrl = null;
let lastFrames = [];
function setBusy(isBusy) {
const button = form.querySelector("button");
function setBusy(isBusy, text = "运行分割") {
const button = form.querySelector(".primary");
button.disabled = isBusy;
button.querySelector("span").textContent = isBusy ? "分割中" : "开始分割";
button.querySelector("span").textContent = isBusy ? "分割中" : text;
progressWrap.hidden = !isBusy;
if (isBusy) {
progressText.textContent = "正在上传、抽帧并执行导丝分割";
}
}
function setFile(file) {
selectedFile = file;
const transfer = new DataTransfer();
transfer.items.add(file);
fileInput.files = transfer.files;
fileName.textContent = `${file.name} · ${(file.size / 1024 / 1024).toFixed(2)} MB`;
renderPreview(file);
}
function revokePreview() {
if (currentObjectUrl) {
URL.revokeObjectURL(currentObjectUrl);
currentObjectUrl = null;
}
}
function renderPreview(file) {
revokePreview();
currentObjectUrl = URL.createObjectURL(file);
previewEmpty.hidden = true;
videoPreview.hidden = true;
imagePreview.hidden = true;
if (file.type.startsWith("video/")) {
videoPreview.src = currentObjectUrl;
videoPreview.hidden = false;
} else {
imagePreview.src = currentObjectUrl;
imagePreview.hidden = false;
}
jobMeta.textContent = `已选择 ${file.name}`;
}
async function loadHealth() {
@@ -31,53 +89,171 @@ async function loadHealth() {
}
}
function activateMethod(key) {
methodSelect.value = key;
[...methodGrid.querySelectorAll(".method-option")].forEach((node) => {
node.classList.toggle("is-active", node.dataset.method === key);
});
}
async function loadMethods() {
const response = await fetch("/api/methods");
const data = await response.json();
methodSelect.innerHTML = "";
methodGrid.innerHTML = "";
Object.entries(data.methods).forEach(([key, value]) => {
methodLabels.set(key, value.label);
methodDescriptions.set(key, value.description);
const option = document.createElement("option");
option.value = key;
option.textContent = value.label;
if (key === "fusion") option.selected = true;
methodSelect.appendChild(option);
const card = document.createElement("button");
card.type = "button";
card.className = "method-option";
card.dataset.method = key;
card.innerHTML = `<strong>${value.label}</strong><span>${value.description}</span>`;
card.addEventListener("click", () => activateMethod(key));
methodGrid.appendChild(card);
});
activateMethod("fusion");
}
function updateSummary(data) {
const frames = data.frames || [];
const coverage = frames.reduce((sum, frame) => sum + frame.metrics.coverage, 0) / Math.max(1, frames.length);
const skeleton = frames.reduce((sum, frame) => sum + frame.metrics.skeleton_length, 0) / Math.max(1, frames.length);
summaryJob.textContent = data.job_id;
summaryFrames.textContent = frames.length;
summaryCoverage.textContent = `${(coverage * 100).toFixed(3)}%`;
summarySkeleton.textContent = Math.round(skeleton);
summaryStrip.hidden = false;
resultCount.textContent = `${frames.length} 个结果`;
jobMeta.textContent = `${data.kind === "video" ? "视频" : "图像"} · ${methodLabels.get(data.method) || data.method}`;
}
function openDetail(frame) {
document.querySelector("#detailMethod").textContent = methodLabels.get(frame.method) || frame.method;
document.querySelector("#detailTitle").textContent = `帧 ${frame.frame_index} 分割详情`;
document.querySelector("#detailOriginal").src = frame.original_url;
document.querySelector("#detailOverlay").src = frame.overlay_url;
document.querySelector("#detailMask").src = frame.mask_url;
const metrics = document.querySelector("#detailMetrics");
metrics.innerHTML = `
<div><dt>覆盖率</dt><dd>${(frame.metrics.coverage * 100).toFixed(3)}%</dd></div>
<div><dt>掩膜像素</dt><dd>${frame.metrics.mask_pixels}</dd></div>
<div><dt>骨架长度</dt><dd>${frame.metrics.skeleton_length}</dd></div>
<div><dt>连通域</dt><dd>${frame.metrics.components}</dd></div>
`;
detailDialog.showModal();
}
function renderResults(data) {
lastFrames = data.frames || [];
resultGrid.innerHTML = "";
emptyState.hidden = true;
emptyState.hidden = lastFrames.length > 0;
videoLink.hidden = !data.video_url;
if (data.video_url) {
videoLink.href = data.video_url;
videoLink.setAttribute("download", "");
}
updateSummary(data);
data.frames.forEach((frame) => {
lastFrames.forEach((frame) => {
const node = template.content.firstElementChild.cloneNode(true);
node.querySelector(".method").textContent = methodLabels.get(frame.method) || frame.method;
node.querySelector(".frame-index").textContent = `帧 ${frame.frame_index}`;
node.querySelector(".overlay").src = frame.overlay_url;
node.querySelector(".mask").src = frame.mask_url;
node.querySelector(".coverage").textContent = `${(frame.metrics.coverage * 100).toFixed(3)}%`;
node.querySelector(".skeleton").textContent = frame.metrics.skeleton_length;
node.querySelector(".components").textContent = frame.metrics.components;
node.addEventListener("click", () => openDetail(frame));
node.addEventListener("keydown", (event) => {
if (event.key === "Enter") openDetail(frame);
});
resultGrid.appendChild(node);
});
}
async function loadSample() {
sampleButton.disabled = true;
sampleButton.textContent = "加载中";
try {
const response = await fetch("/api/samples");
const data = await response.json();
const sample = data.samples.find((item) => item.kind === "video") || data.samples[0];
if (!sample) throw new Error("未找到样例文件");
const blobResponse = await fetch(sample.url);
const blob = await blobResponse.blob();
const file = new File([blob], sample.name, { type: sample.kind === "video" ? "video/mp4" : "image/png" });
setFile(file);
} finally {
sampleButton.disabled = false;
sampleButton.textContent = "加载样例";
}
}
function clearAll() {
selectedFile = null;
fileInput.value = "";
fileName.textContent = "支持 mp4、avi、png、jpg、tiff";
revokePreview();
videoPreview.removeAttribute("src");
imagePreview.removeAttribute("src");
videoPreview.hidden = true;
imagePreview.hidden = true;
previewEmpty.hidden = false;
resultGrid.innerHTML = "";
emptyState.hidden = false;
summaryStrip.hidden = true;
videoLink.hidden = true;
resultCount.textContent = "0 个结果";
jobMeta.textContent = "等待输入";
}
sensitivity.addEventListener("input", () => {
sensitivityValue.textContent = Number(sensitivity.value).toFixed(2);
});
fileInput.addEventListener("change", () => {
const file = fileInput.files[0];
fileName.textContent = file ? file.name : "支持 mp4、avi、png、jpg、tiff";
if (file) setFile(file);
});
["dragenter", "dragover"].forEach((eventName) => {
dropZone.addEventListener(eventName, (event) => {
event.preventDefault();
dropZone.classList.add("is-dragging");
});
});
["dragleave", "drop"].forEach((eventName) => {
dropZone.addEventListener(eventName, (event) => {
event.preventDefault();
dropZone.classList.remove("is-dragging");
});
});
dropZone.addEventListener("drop", (event) => {
const file = event.dataTransfer.files[0];
if (file) setFile(file);
});
sampleButton.addEventListener("click", loadSample);
clearButton.addEventListener("click", clearAll);
closeDialog.addEventListener("click", () => detailDialog.close());
form.addEventListener("submit", async (event) => {
event.preventDefault();
const file = fileInput.files[0] || selectedFile;
if (!file) {
emptyState.hidden = false;
emptyState.textContent = "请先选择文件或加载样例。";
return;
}
setBusy(true);
emptyState.hidden = false;
emptyState.textContent = "正在抽帧和分割，请稍候。";
@@ -86,6 +262,7 @@ form.addEventListener("submit", async (event) => {
try {
const payload = new FormData(form);
payload.set("file", file);
const response = await fetch("/api/segment", {
method: "POST",
body: payload,

175
frontend/index.html
View File

@@ -7,85 +7,156 @@
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<main class="shell">
<section class="mast">
<div>
<p class="eyebrow">ISISeg</p>
<h1>介入导丝视频分割工作台</h1>
<main class="app-shell">
<header class="topbar">
<div class="brand">
<span class="brand-mark">IS</span>
<div>
<p class="eyebrow">ISISeg Console</p>
<h1>介入导丝视频分割工作台</h1>
</div>
</div>
<div class="status" id="health">服务检查中</div>
</section>
<div class="top-actions">
<span class="pill" id="health">服务检查中</span>
<a class="pill link-pill" id="videoLink" hidden>输出视频</a>
</div>
</header>
<section class="workspace">
<section class="workbench">
<form class="control-panel" id="segmentForm">
<label class="drop-zone" for="file">
<input id="file" name="file" type="file" accept="image/*,video/*" required />
<span class="drop-title">选择介入视频或图像</span>
<span class="drop-subtitle" id="fileName">支持 mp4、avi、png、jpg、tiff</span>
</label>
<div class="field">
<label for="method">分割方式</label>
<select id="method" name="method"></select>
</div>
<div class="field">
<div class="field-head">
<label for="sensitivity">灵敏度</label>
<output id="sensitivityValue">0.56</output>
<section class="panel-section">
<div class="section-title">
<span>01</span>
<h2>输入</h2>
</div>
<input id="sensitivity" name="sensitivity" type="range" min="0.05" max="0.95" value="0.56" step="0.01" />
</div>
<label class="drop-zone" id="dropZone" for="file">
<input id="file" name="file" type="file" accept="image/*,video/*" required />
<span class="drop-icon">+</span>
<span class="drop-title">拖拽或选择视频/图像</span>
<span class="drop-subtitle" id="fileName">支持 mp4、avi、png、jpg、tiff</span>
</label>
<div class="input-actions">
<button class="ghost" id="sampleButton" type="button">加载样例</button>
<button class="ghost" id="clearButton" type="button">清空</button>
</div>
</section>
<div class="compact-grid">
<div class="field">
<label for="frameStride">帧步长</label>
<input id="frameStride" name="frame_stride" type="number" min="1" max="90" value="5" />
<section class="panel-section">
<div class="section-title">
<span>02</span>
<h2>方法</h2>
</div>
<select class="sr-only" id="method" name="method" aria-label="分割方式"></select>
<div class="method-grid" id="methodGrid"></div>
</section>
<section class="panel-section">
<div class="section-title">
<span>03</span>
<h2>参数</h2>
</div>
<div class="field">
<label for="maxFrames">最大帧数</label>
<input id="maxFrames" name="max_frames" type="number" min="1" max="80" value="12" />
<div class="field-head">
<label for="sensitivity">灵敏度</label>
<output id="sensitivityValue">0.56</output>
</div>
<input id="sensitivity" name="sensitivity" type="range" min="0.05" max="0.95" value="0.56" step="0.01" />
</div>
</div>
<div class="compact-grid">
<div class="field">
<label for="frameStride">帧步长</label>
<input id="frameStride" name="frame_stride" type="number" min="1" max="90" value="5" />
</div>
<div class="field">
<label for="maxFrames">最大帧数</label>
<input id="maxFrames" name="max_frames" type="number" min="1" max="80" value="12" />
</div>
</div>
</section>
<button class="primary" type="submit">
<span>开始分割</span>
<span>运行分割</span>
</button>
</form>
<section class="results">
<div class="results-head">
<section class="viewer">
<div class="viewer-head">
<div>
<p class="eyebrow">Result</p>
<h2>分割结果</h2>
<p class="eyebrow">Live Workspace</p>
<h2>预览与结果</h2>
</div>
<a class="download" id="videoLink" hidden>下载叠加视频</a>
<div class="job-meta" id="jobMeta">等待输入</div>
</div>
<div class="empty" id="emptyState">上传文件后，这里会显示原帧、叠加图和导丝掩膜。</div>
<div class="grid" id="resultGrid"></div>
<div class="preview-stage" id="previewStage">
<div class="preview-empty" id="previewEmpty">选择文件或加载样例后开始</div>
<video id="videoPreview" controls muted hidden></video>
<img id="imagePreview" alt="输入图像预览" hidden />
</div>
<div class="progress-wrap" id="progressWrap" hidden>
<div class="progress-line"><span id="progressBar"></span></div>
<p id="progressText">准备任务</p>
</div>
<div class="summary-strip" id="summaryStrip" hidden>
<div><span>任务</span><strong id="summaryJob">-</strong></div>
<div><span>帧数</span><strong id="summaryFrames">-</strong></div>
<div><span>平均覆盖率</span><strong id="summaryCoverage">-</strong></div>
<div><span>平均骨架</span><strong id="summarySkeleton">-</strong></div>
</div>
<div class="results-toolbar">
<div>
<p class="eyebrow">Result Frames</p>
<h3>分割帧</h3>
</div>
<span id="resultCount">0 个结果</span>
</div>
<div class="empty" id="emptyState">运行分割后，这里会显示原帧、叠加图、掩膜和指标。</div>
<div class="result-grid" id="resultGrid"></div>
</section>
</section>
</main>
<dialog class="detail-dialog" id="detailDialog">
<div class="dialog-head">
<div>
<p class="eyebrow" id="detailMethod">Method</p>
<h2 id="detailTitle">帧详情</h2>
</div>
<button class="icon-button" id="closeDialog" type="button" aria-label="关闭详情">×</button>
</div>
<div class="detail-images">
<figure>
<img id="detailOriginal" alt="原始帧" />
<figcaption>原始帧</figcaption>
</figure>
<figure>
<img id="detailOverlay" alt="叠加结果" />
<figcaption>叠加结果</figcaption>
</figure>
<figure>
<img id="detailMask" alt="导丝掩膜" />
<figcaption>导丝掩膜</figcaption>
</figure>
</div>
<dl class="detail-metrics" id="detailMetrics"></dl>
</dialog>
<template id="resultCardTemplate">
<article class="result-card">
<article class="result-card" tabindex="0">
<div class="card-top">
<span class="method"></span>
<span class="frame-index"></span>
</div>
<div class="image-pair">
<figure>
<img class="overlay" alt="导丝叠加结果" />
<figcaption>叠加</figcaption>
</figure>
<figure>
<img class="mask" alt="导丝掩膜" />
<figcaption>掩膜</figcaption>
</figure>
</div>
<figure>
<img class="overlay" alt="导丝叠加结果" />
<figcaption>叠加视图</figcaption>
</figure>
<dl class="metrics">
<div><dt>覆盖率</dt><dd class="coverage"></dd></div>
<div><dt>骨架长度</dt><dd class="skeleton"></dd></div>
<div><dt>骨架</dt><dd class="skeleton"></dd></div>
<div><dt>连通域</dt><dd class="components"></dd></div>
</dl>
</article>

535
frontend/styles.css
View File

@@ -1,29 +1,36 @@
:root {
--bg: #111412;
--panel: #181d1b;
--panel-2: #202622;
--line: #344038;
--text: #f0f5ef;
--muted: #9aa89c;
--bg: #0f1210;
--panel: #171c19;
--panel-2: #202720;
--panel-3: #101411;
--line: #334239;
--line-soft: rgba(255, 255, 255, 0.08);
--text: #edf5ee;
--muted: #93a297;
--faint: #66736a;
--accent: #ffd166;
--accent-2: #3dd6b5;
--accent-2: #38d8b8;
--danger: #ff6b6b;
--shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
--ok: #63e6be;
--shadow: 0 28px 92px rgba(0, 0, 0, 0.38);
}
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
body {
margin: 0;
min-height: 100vh;
background:
linear-gradient(135deg, rgba(61, 214, 181, 0.08), transparent 38%),
radial-gradient(circle at 85% 8%, rgba(255, 209, 102, 0.12), transparent 28%),
var(--bg);
linear-gradient(135deg, rgba(56, 216, 184, 0.09), transparent 30%),
linear-gradient(180deg, #121613 0%, var(--bg) 54%, #0a0c0b 100%);
color: var(--text);
font-family: "Aptos", "Segoe UI", sans-serif;
font-family: "Aptos", "Segoe UI", "Microsoft YaHei", sans-serif;
}
button,
@@ -32,117 +39,281 @@ select {
font: inherit;
}
.shell {
width: min(1440px, calc(100vw - 32px));
margin: 0 auto;
padding: 28px 0 42px;
button {
color: inherit;
}
.mast {
.app-shell {
width: min(1540px, calc(100vw - 32px));
margin: 0 auto;
padding: 22px 0 36px;
}
.topbar {
min-height: 88px;
display: flex;
align-items: end;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 0 24px;
gap: 18px;
border-bottom: 1px solid var(--line);
}
.brand,
.top-actions,
.section-title,
.field-head,
.viewer-head,
.results-toolbar,
.card-top,
.dialog-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.brand {
justify-content: flex-start;
}
.brand-mark {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid rgba(56, 216, 184, 0.55);
background: #10211d;
color: var(--accent-2);
border-radius: 8px;
font-weight: 950;
}
.eyebrow {
margin: 0 0 8px;
margin: 0 0 6px;
color: var(--accent-2);
font-size: 11px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 12px;
font-weight: 800;
}
h1,
h2 {
h2,
h3 {
margin: 0;
letter-spacing: 0;
}
h1 {
font-size: clamp(34px, 5vw, 68px);
line-height: 0.92;
max-width: 820px;
font-size: clamp(24px, 3vw, 38px);
line-height: 1.05;
}
h2 {
font-size: 28px;
font-size: 24px;
}
.status,
.download {
h3 {
font-size: 18px;
}
.pill {
display: inline-flex;
align-items: center;
min-height: 38px;
border: 1px solid var(--line);
background: rgba(24, 29, 27, 0.75);
background: rgba(23, 28, 25, 0.86);
color: var(--muted);
padding: 10px 14px;
padding: 0 12px;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
}
.status.ok {
color: var(--accent-2);
border-color: rgba(61, 214, 181, 0.5);
.pill.ok {
color: var(--ok);
border-color: rgba(99, 230, 190, 0.55);
}
.status.bad {
.pill.bad {
color: var(--danger);
border-color: rgba(255, 107, 107, 0.55);
}
.workspace {
.link-pill {
color: var(--accent);
}
.workbench {
display: grid;
grid-template-columns: 360px 1fr;
grid-template-columns: 390px 1fr;
gap: 18px;
align-items: start;
padding-top: 18px;
}
.control-panel,
.results {
background: rgba(24, 29, 27, 0.92);
.viewer,
.detail-dialog {
background: rgba(23, 28, 25, 0.94);
border: 1px solid var(--line);
box-shadow: var(--shadow);
border-radius: 8px;
box-shadow: var(--shadow);
}
.control-panel {
position: sticky;
top: 18px;
top: 16px;
display: grid;
gap: 18px;
padding: 18px;
gap: 14px;
padding: 14px;
}
.panel-section {
display: grid;
gap: 12px;
padding: 14px;
border: 1px solid var(--line-soft);
border-radius: 8px;
background: rgba(16, 20, 17, 0.62);
}
.section-title span {
color: var(--accent);
font-weight: 950;
font-size: 13px;
}
.section-title h2 {
margin-right: auto;
font-size: 16px;
}
.drop-zone {
position: relative;
display: grid;
place-items: center;
gap: 8px;
min-height: 170px;
border: 1px dashed rgba(61, 214, 181, 0.55);
border-radius: 8px;
background: linear-gradient(145deg, rgba(61, 214, 181, 0.08), rgba(255, 209, 102, 0.06));
cursor: pointer;
text-align: center;
padding: 18px;
border: 1px dashed rgba(56, 216, 184, 0.58);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(56, 216, 184, 0.1), transparent 45%),
rgba(32, 39, 32, 0.72);
text-align: center;
cursor: pointer;
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.drop-zone.is-dragging {
border-color: var(--accent);
background: rgba(255, 209, 102, 0.12);
transform: translateY(-1px);
}
.drop-zone input {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
cursor: pointer;
}
.drop-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 209, 102, 0.55);
border-radius: 999px;
color: var(--accent);
font-size: 28px;
line-height: 1;
}
.drop-title {
font-size: 20px;
font-weight: 800;
font-size: 18px;
font-weight: 900;
}
.drop-subtitle {
color: var(--muted);
max-width: 280px;
overflow-wrap: anywhere;
font-size: 13px;
}
.input-actions,
.compact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ghost,
.primary,
.icon-button {
border-radius: 8px;
cursor: pointer;
}
.ghost {
min-height: 40px;
border: 1px solid var(--line);
background: var(--panel-2);
color: var(--text);
}
.ghost:hover,
.method-option:hover,
.result-card:hover {
border-color: rgba(255, 209, 102, 0.62);
}
.primary {
min-height: 52px;
border: 0;
background: linear-gradient(90deg, var(--accent), #ffad5c);
color: #17140d;
font-weight: 950;
}
.primary:disabled {
cursor: wait;
opacity: 0.65;
filter: grayscale(0.45);
}
.method-grid {
display: grid;
gap: 8px;
}
.method-option {
display: grid;
gap: 5px;
padding: 11px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel-2);
text-align: left;
cursor: pointer;
}
.method-option.is-active {
border-color: rgba(56, 216, 184, 0.78);
background: #13231f;
}
.method-option strong {
color: var(--text);
font-size: 14px;
}
.method-option span {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.field {
@@ -150,22 +321,17 @@ h2 {
gap: 8px;
}
.field-head,
.results-head,
.card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
label {
color: var(--muted);
font-size: 13px;
font-weight: 700;
font-weight: 800;
}
output {
color: var(--accent);
font-weight: 900;
}
select,
input[type="number"] {
width: 100%;
min-height: 42px;
@@ -180,82 +346,177 @@ input[type="range"] {
accent-color: var(--accent);
}
.compact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.primary {
min-height: 48px;
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.viewer {
min-height: 720px;
padding: 16px;
}
.viewer-head {
margin-bottom: 14px;
}
.job-meta {
color: var(--muted);
font-size: 13px;
border: 1px solid var(--line);
border-radius: 8px;
background: linear-gradient(90deg, var(--accent), #ff9f5a);
color: #17140d;
font-weight: 900;
cursor: pointer;
padding: 8px 10px;
}
.primary:disabled {
cursor: wait;
filter: grayscale(0.8);
opacity: 0.65;
.preview-stage {
display: grid;
place-items: center;
min-height: 320px;
border: 1px solid var(--line);
border-radius: 8px;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
#080a09;
background-size: 28px 28px;
overflow: hidden;
}
.results {
min-height: 620px;
padding: 18px;
.preview-empty,
.empty {
color: var(--muted);
text-align: center;
padding: 28px;
}
.results-head {
margin-bottom: 18px;
#videoPreview,
#imagePreview {
display: block;
width: 100%;
max-height: 520px;
object-fit: contain;
background: #050605;
}
.progress-wrap {
margin-top: 14px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel-3);
}
.progress-line {
height: 8px;
border-radius: 999px;
background: #2a332d;
overflow: hidden;
}
.progress-line span {
display: block;
width: 12%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent-2), var(--accent));
animation: pulse-progress 1.4s ease-in-out infinite alternate;
}
.progress-wrap p {
margin: 8px 0 0;
color: var(--muted);
}
@keyframes pulse-progress {
from {
width: 18%;
}
to {
width: 92%;
}
}
.summary-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
margin-top: 14px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--line);
}
.summary-strip div {
display: grid;
gap: 4px;
padding: 12px;
background: var(--panel-3);
}
.summary-strip span,
.results-toolbar span {
color: var(--muted);
font-size: 12px;
}
.summary-strip strong {
color: var(--text);
font-size: 18px;
}
.results-toolbar {
margin: 18px 0 12px;
}
.empty {
min-height: 500px;
min-height: 180px;
display: grid;
place-items: center;
color: var(--muted);
border: 1px solid var(--line);
border-radius: 8px;
background: rgba(17, 20, 18, 0.55);
text-align: center;
padding: 24px;
background: rgba(16, 20, 17, 0.62);
}
.grid {
.result-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.result-card {
border: 1px solid var(--line);
background: #121614;
border-radius: 8px;
background: #111512;
overflow: hidden;
cursor: pointer;
transition: border-color 160ms ease, transform 160ms ease;
}
.result-card:hover {
transform: translateY(-1px);
}
.card-top {
padding: 12px;
padding: 10px 12px;
border-bottom: 1px solid var(--line);
}
.method {
font-weight: 900;
color: var(--accent);
font-weight: 950;
}
.frame-index {
color: var(--muted);
font-size: 13px;
}
.image-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--line);
font-size: 12px;
}
figure {
@@ -277,19 +538,22 @@ figcaption {
border-top: 1px solid var(--line);
}
.metrics {
.metrics,
.detail-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 0;
border-top: 1px solid var(--line);
}
.metrics div {
.metrics div,
.detail-metrics div {
padding: 10px;
border-right: 1px solid var(--line);
}
.metrics div:last-child {
.metrics div:last-child,
.detail-metrics div:last-child {
border-right: 0;
}
@@ -301,20 +565,55 @@ dt {
dd {
margin: 0;
font-weight: 850;
font-weight: 900;
}
@media (max-width: 900px) {
.shell {
width: min(100vw - 20px, 720px);
.detail-dialog {
width: min(1120px, calc(100vw - 36px));
color: var(--text);
padding: 0;
}
.detail-dialog::backdrop {
background: rgba(0, 0, 0, 0.72);
}
.dialog-head {
padding: 16px;
border-bottom: 1px solid var(--line);
}
.icon-button {
width: 42px;
height: 42px;
border: 1px solid var(--line);
background: var(--panel-2);
font-size: 26px;
line-height: 1;
}
.detail-images {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--line);
}
.detail-images img {
aspect-ratio: 4 / 3;
}
@media (max-width: 980px) {
.app-shell {
width: min(100vw - 20px, 760px);
}
.mast,
.workspace {
.topbar,
.workbench {
display: grid;
}
.workspace {
.workbench {
grid-template-columns: 1fr;
}
@@ -322,7 +621,13 @@ dd {
position: static;
}
.status {
justify-self: start;
.top-actions {
justify-content: flex-start;
flex-wrap: wrap;
}
.summary-strip,
.detail-images {
grid-template-columns: 1fr;
}
}

3
tests/test_api.py
View File

@@ -18,6 +18,9 @@ def test_health_and_methods():
methods = client.get("/api/methods")
assert methods.status_code == 200
assert "fusion" in methods.json()["methods"]
samples = client.get("/api/samples")
assert samples.status_code == 200
assert "samples" in samples.json()
def test_segment_image(tmp_path: Path):

33
工程分析/实现方案-2026-05-18-19-06-50.md Normal file
View File

@@ -0,0 +1,33 @@
# 实现方案
开始时间：2026-05-18-19-06-50
## Web 端改造
1. 信息架构
- 顶部状态栏显示服务状态、当前任务和输出视频入口。
- 左侧工作流区域包含上传/样例、算法、参数和运行按钮。
- 右侧结果区域包含预览、指标总览、结果帧网格和单帧详情。
2. 交互增强
- 文件拖拽上传。
- 样例视频一键加载为 `File` 对象后提交。
- 算法使用卡片式单选，保留 `<select>` 作为表单值。
- 运行中显示进度条和状态文案。
- 点击结果卡片可打开详情弹窗，查看原图、叠加图、掩膜和指标。
3. 后端补充
- 增加 `/api/samples`，返回可用样例文件和 URL，便于前端加载样例。
4. 视觉方向
- 医学影像控制台风格：深色工作台、琥珀高亮、青绿色状态色、紧凑信息密度。
- 避免营销页布局，首屏就是工具。
## 影响范围
- `frontend/index.html`
- `frontend/styles.css`
- `frontend/app.js`
- `backend/main.py`
- `README.md`
- 相关测试与工程分析文档

34
工程分析/测试方案-2026-05-18-19-06-50.md Normal file
View File

@@ -0,0 +1,34 @@
# 测试方案
开始时间：2026-05-18-19-06-50
## 自动化测试
- `pytest -q`
- 新增或更新 API 测试，验证 `/api/samples` 返回样例清单。
## 运行验证
- `curl -s http://127.0.0.1:8001/api/health`
- `curl -s http://127.0.0.1:8001/api/samples`
- 使用 Chrome headless 截图首页，确认网页端可渲染。
- 调用 `python3 scripts/record_demo.py` 重新生成演示视频，确认网页端仍可作为演示素材。
## 手工验收路径
1. 打开 `http://127.0.0.1:8001`。
2. 点击“加载样例”。
3. 选择融合模式或多方法对比。
4. 点击“运行分割”。
5. 查看结果卡片、详情弹窗和输出视频链接。
## 执行结果
- `pytest -q`：通过，4 个测试全部通过。
- `python3 -m py_compile backend/main.py`：通过。
- `curl -s http://127.0.0.1:8001/api/health`：通过，返回 `status=ok`。
- `curl -s http://127.0.0.1:8001/api/samples`：通过，返回样例视频和样例图像。
- 首页截图：通过，Chrome headless 成功渲染新工作台，截图文件 `/tmp/isiseg_web_fixed.png`。
- 样例视频 API 分割：通过，返回 `job_id=02a3d8ff9aac` 和叠加视频链接。
- `python3 scripts/record_demo.py`：通过，重新生成 `storage/demos/isiseg_usage_demo.mp4`。
- `ffprobe` 校验演示视频：通过，时长 21 秒，大小约 3.4 MB。

12
工程分析/经验记录.md
View File

@@ -45,3 +45,15 @@ B. 产生问题原因：Playwright 包体积较大，当前网络下载速度或
C. 解决问题方案：终止该安装进程，改用系统已有 `google-chrome --headless` 截取首页，并使用当前已安装的 OpenCV 将真实页面截图和真实 API 分割结果合成为演示 mp4。
D. 后续如何避免问题：演示录制优先复用本机已有工具；只有确实需要完整浏览器交互录屏时，再单独安装 Playwright 并预留下载时间。
## 2026-05-18-19-06-50 网页端工作台增强
### 1. CSS 覆盖 hidden 导致初始预览控件显示
A. 具体问题：Chrome headless 截图发现初始页面里本应隐藏的视频控件和图像预览同时显示，破坏首屏布局。
B. 产生问题原因：CSS 中对 `#videoPreview`、`#imagePreview` 设置了 `display: block`，其选择器优先级覆盖了浏览器对 `hidden` 属性的默认 `display: none`。
C. 解决问题方案：在全局 CSS 中增加 `[hidden] { display: none !important; }`，确保所有使用 `hidden` 的状态元素都能可靠隐藏。
D. 后续如何避免问题：前端页面涉及显隐状态时，必须用 headless 截图检查初始状态；如果自定义了 display 样式，需要显式保护 `[hidden]`。

22
工程分析/需求分析-2026-05-18-19-06-50.md Normal file
View File

@@ -0,0 +1,22 @@
# 需求分析
开始时间：2026-05-18-19-06-50
## 用户目标
用户强调“网页端构建”，说明第一版虽然已有静态页面，但需要更明确地完成 Web 端可交互工作台，而不仅是后端接口或演示脚本。
## 本轮目标
- 强化首页为真正的导丝分割 Web 操作台。
- 支持拖拽上传、样例视频一键加载、原始文件预览、算法卡片选择、运行状态、结果详情查看。
- 结果区展示叠加图、掩膜、指标和输出视频，能直接从网页端完成完整使用流程。
- 保持无需前端构建工具的部署方式，FastAPI 直接服务静态页面。
## 验收标准
- 访问 `http://127.0.0.1:8001` 可以看到完整网页端工作台。
- 可以点击“加载样例”并直接运行分割。
- 可以上传图片或视频并运行分割。
- 分割完成后网页端展示结果帧、指标、输出视频链接。
- `pytest -q` 通过，健康检查通过。