cloverta/cellpose-web
1
0
Fork 0
mirror of https://github.com/ClovertaTheTrilobita/cellpose-web.git synced 2026-04-01 23:14:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feature(fronted): 前端样式优化

Browse source
This commit is contained in:
ClovertaTheTrilobita 2025-09-18 17:07:22 +00:00
parent 483e0b64e1
commit 86a460afc5
3 changed files with 139 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
backend/flaskApp.py
View file

@ -71,6 +71,7 @@ def upload():
print("cpt:" + str(cellprob_threshold)) print("cpt:" + str(cellprob_threshold))
print("flow:" + str(flow_threshold)) print("flow:" + str(flow_threshold))
print("diameter:" + str(diameter))
# 将文件保存在本地目录中 # 将文件保存在本地目录中
ts = datetime.datetime.now().strftime("%Y-%m-%d-%H-%M-%S") + f"-{int(time.time()*1000)%1000:03d}" ts = datetime.datetime.now().strftime("%Y-%m-%d-%H-%M-%S") + f"-{int(time.time()*1000)%1000:03d}"

119
frontend/index.html
View file

@ -1,28 +1,69 @@
<meta charset="UTF-8" /> <!doctype html>
<input id="fileInput" type="file" multiple /> <html lang="en">
<button id="uploadBtn">Upload</button>
<progress id="bar" max="100" value="0" style="width:300px;"></progress> <head>
<br><br><br> <meta charset="utf-8">
<label>flow_threshold: <meta name="viewport" content="width=device-width, initial-scale=1">
<input id="flow" type="text" placeholder="" /> <title>Bootstrap demo</title>
</label> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
<br><br> integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<label>cellprob_threshold: </head>
<input id="cellprob" type="text" placeholder="" />
</label> <body>
<br><br> <div style="padding: 1rem 1rem;">
<label>diameter: <div class="mb-3 border" style="padding: 1rem 1rem;">
<input id="diameter" type="text" placeholder="" /> <div class="input-group mb-3">
</label> <input id="fileInput" type="file" class="form-control" multiple />
<br><br> </div>
<label>模型（下拉单选）：
<select id="model"> <hr>
<div>
<div style="padding-right: 50rem;">
<div class="input-group mb-3">
<span class="input-group-text">flow threshold:</span>
<input id="flow" type="text" class="form-control" placeholder="" />
</div>
<div class="input-group mb-3">
<span class="input-group-text">cellprob threshold:</span>
<input id="cellprob" type="text" class="form-control" placeholder="" />
</div>
<div class="input-group mb-3">
<span class="input-group-text">diameter:</span>
<input id="diameter" type="text" class="form-control" placeholder="" />
</div>
<label>
<select id="model" class="form-select">
<option value="cpsam">模型（下拉单选）：</option>
<option value="cpsam">cpsam</option> <option value="cpsam">cpsam</option>
</select> </select>
</label> </label>
</div>
</div>
<br>
<div>
<button id="uploadBtn" class="btn btn-success">Upload</button>
<progress id="bar" max="100" value="0" style="width:300px;"></progress>
</div>
</div>
</div>
<br><br><br>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-ep+dxp/oz2RKF89ALMPGc7Z89QFa32C8Uv1A3TcEK8sMzXVysblLA3+eJWTzPJzT"
crossorigin="anonymous"></script>
<script>
const API = "http://10.147.18.141:5000/upload"; const API = "http://10.147.18.141:5000/upload";
function buildUrl() { function buildUrl() {
@ -58,12 +99,42 @@
if (e.total) bar.value = Math.round((e.loaded * 100) / e.total); if (e.total) bar.value = Math.round((e.loaded * 100) / e.total);
}, },
}); });
alert("上传成功：" + JSON.stringify(res.data)); // alert("上传成功：" + JSON.stringify(res.data));
// 创建一个提示元素
const notice = document.createElement("div");
notice.style.position = "fixed";
notice.style.top = "20px";
notice.style.left = "50%";
notice.style.transform = "translateX(-50%)";
notice.style.padding = "10px 20px";
notice.style.background = "#4caf50";
notice.style.color = "white";
notice.style.borderRadius = "8px";
notice.style.fontSize = "16px";
notice.style.zIndex = "9999";
let seconds = 3;
notice.textContent = `上传成功！${seconds} 秒后跳转预览页面…`;
document.body.appendChild(notice);
const timer = setInterval(() => {
seconds--;
if (seconds > 0) {
notice.textContent = `上传成功！${seconds} 秒后跳转预览页面…`;
} else {
clearInterval(timer);
document.body.removeChild(notice);
window.location.href = `preview.html?id=${encodeURIComponent(res.data['id'])}`; window.location.href = `preview.html?id=${encodeURIComponent(res.data['id'])}`;
}
}, 1000);
} catch (e) { } catch (e) {
alert("上传失败：" + (e.response?.data?.message || e.message)); alert("上传失败：" + (e.response?.data?.message || e.message));
} finally { } finally {
bar.value = 0; bar.value = 0;
} }
}); });
</script> </script>
</body>
</html>

8
frontend/preview.html
View file

@ -22,12 +22,18 @@
} else { } else {
try { try {
const res = await axios.get(API_STATUS + "?id=" + encodeURIComponent(ID)); const res = await axios.get(API_STATUS + "?id=" + encodeURIComponent(ID));
console.log(res);
const { exists, status } = res.data; // exists: boolean, status: "running" | "success" | "failed"... const { exists, status } = res.data; // exists: boolean, status: "running" | "success" | "failed"...
if (!exists) { if (!exists) {
msg.textContent = `id "${ID}" 不存在`; msg.textContent = `id "${ID}" 不存在`;
msg.hidden = false; msg.hidden = false;
} else { }
else if (status == "running"){
msg.textContent = `id "${ID}" 仍在运行中，请耐心等待片刻后刷新。`;
msg.hidden = false;
}
else {
msg.hidden = true; msg.hidden = true;
axios.get(API_PIC + "?id=" + encodeURIComponent(ID)).then(res => { axios.get(API_PIC + "?id=" + encodeURIComponent(ID)).then(res => {
if (res.data.ok) { if (res.data.ok) {