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

2026-05-18-17-40-02 构建导丝分割Web系统

Browse Source
This commit is contained in:
admin
2026-05-18 17:49:30 +08:00
commit debd0bfd50
22 changed files with 1349 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/index.html Normal file
View File

@@ -0,0 +1,96 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ISISeg 导丝分割工作台</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<main class="shell">
<section class="mast">
<div>
<p class="eyebrow">ISISeg</p>
<h1>介入导丝视频分割工作台</h1>
</div>
<div class="status" id="health">服务检查中</div>
</section>
<section class="workspace">
<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>
</div>
<input id="sensitivity" name="sensitivity" type="range" min="0.05" max="0.95" value="0.56" step="0.01" />
</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>
<button class="primary" type="submit">
<span>开始分割</span>
</button>
</form>
<section class="results">
<div class="results-head">
<div>
<p class="eyebrow">Result</p>
<h2>分割结果</h2>
</div>
<a class="download" id="videoLink" hidden>下载叠加视频</a>
</div>
<div class="empty" id="emptyState">上传文件后，这里会显示原帧、叠加图和导丝掩膜。</div>
<div class="grid" id="resultGrid"></div>
</section>
</section>
</main>
<template id="resultCardTemplate">
<article class="result-card">
<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>
<dl class="metrics">
<div><dt>覆盖率</dt><dd class="coverage"></dd></div>
<div><dt>骨架长度</dt><dd class="skeleton"></dd></div>
<div><dt>连通域</dt><dd class="components"></dd></div>
</dl>
</article>
</template>
<script src="/app.js"></script>
</body>
</html>