mirror of
https://github.com/ClovertaTheTrilobita/cellpose-web.git
synced 2026-04-01 23:14:50 +00:00
feature(fronted): 前端样式优化
This commit is contained in:
parent
483e0b64e1
commit
86a460afc5
3 changed files with 139 additions and 61 deletions
|
|
@ -71,6 +71,7 @@ def upload():
|
|||
|
||||
print("cpt:" + str(cellprob_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}"
|
||||
|
|
|
|||
|
|
@ -1,69 +1,140 @@
|
|||
<meta charset="UTF-8" />
|
||||
<input id="fileInput" type="file" multiple />
|
||||
<button id="uploadBtn">Upload</button>
|
||||
<progress id="bar" max="100" value="0" style="width:300px;"></progress>
|
||||
<br><br><br>
|
||||
<label>flow_threshold:
|
||||
<input id="flow" type="text" placeholder="" />
|
||||
</label>
|
||||
<br><br>
|
||||
<label>cellprob_threshold:
|
||||
<input id="cellprob" type="text" placeholder="" />
|
||||
</label>
|
||||
<br><br>
|
||||
<label>diameter:
|
||||
<input id="diameter" type="text" placeholder="" />
|
||||
</label>
|
||||
<br><br>
|
||||
<label>模型（下拉单选）：
|
||||
<select id="model">
|
||||
<option value="cpsam">cpsam</option>
|
||||
</select>
|
||||
</label>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
const API = "http://10.147.18.141:5000/upload";
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Bootstrap demo</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
function buildUrl() {
|
||||
// 获取参数
|
||||
const model = document.getElementById('model')?.value;
|
||||
const flow = (document.getElementById('flow')?.value || '').trim();
|
||||
const cellp = (document.getElementById('cellprob')?.value || '').trim();
|
||||
const diameter = (document.getElementById('diameter')?.value || '').trim();
|
||||
<body>
|
||||
<div style="padding: 1rem 1rem;">
|
||||
<div class="mb-3 border" style="padding: 1rem 1rem;">
|
||||
<div class="input-group mb-3">
|
||||
<input id="fileInput" type="file" class="form-control" multiple />
|
||||
</div>
|
||||
|
||||
// 用 URLSearchParams 组装查询串
|
||||
const qs = new URLSearchParams({
|
||||
model: model,
|
||||
flow_threshold: flow,
|
||||
cellprob_threshold: cellp,
|
||||
diameter: diameter
|
||||
});
|
||||
<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="" />
|
||||
|
||||
return `${API}?${qs.toString()}`;
|
||||
}
|
||||
</div>
|
||||
|
||||
document.getElementById("uploadBtn").addEventListener("click", async () => {
|
||||
const input = document.getElementById("fileInput");
|
||||
if (!input.files.length) return alert("请选择文件");
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">cellprob threshold:</span>
|
||||
<input id="cellprob" type="text" class="form-control" placeholder="" />
|
||||
|
||||
const fd = new FormData();
|
||||
for (const f of input.files) fd.append("files", f);
|
||||
</div>
|
||||
|
||||
const bar = document.getElementById("bar");
|
||||
try {
|
||||
const URL = buildUrl();
|
||||
const res = await axios.post(URL, fd, {
|
||||
onUploadProgress: (e) => {
|
||||
if (e.total) bar.value = Math.round((e.loaded * 100) / e.total);
|
||||
},
|
||||
<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>
|
||||
</select>
|
||||
</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 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";
|
||||
|
||||
function buildUrl() {
|
||||
// 获取参数
|
||||
const model = document.getElementById('model')?.value;
|
||||
const flow = (document.getElementById('flow')?.value || '').trim();
|
||||
const cellp = (document.getElementById('cellprob')?.value || '').trim();
|
||||
const diameter = (document.getElementById('diameter')?.value || '').trim();
|
||||
|
||||
// 用 URLSearchParams 组装查询串
|
||||
const qs = new URLSearchParams({
|
||||
model: model,
|
||||
flow_threshold: flow,
|
||||
cellprob_threshold: cellp,
|
||||
diameter: diameter
|
||||
});
|
||||
alert("上传成功：" + JSON.stringify(res.data));
|
||||
window.location.href = `preview.html?id=${encodeURIComponent(res.data['id'])}`;
|
||||
} catch (e) {
|
||||
alert("上传失败：" + (e.response?.data?.message || e.message));
|
||||
} finally {
|
||||
bar.value = 0;
|
||||
|
||||
return `${API}?${qs.toString()}`;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
document.getElementById("uploadBtn").addEventListener("click", async () => {
|
||||
const input = document.getElementById("fileInput");
|
||||
if (!input.files.length) return alert("请选择文件");
|
||||
|
||||
const fd = new FormData();
|
||||
for (const f of input.files) fd.append("files", f);
|
||||
|
||||
const bar = document.getElementById("bar");
|
||||
try {
|
||||
const URL = buildUrl();
|
||||
const res = await axios.post(URL, fd, {
|
||||
onUploadProgress: (e) => {
|
||||
if (e.total) bar.value = Math.round((e.loaded * 100) / e.total);
|
||||
},
|
||||
});
|
||||
// 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'])}`;
|
||||
}
|
||||
}, 1000);
|
||||
} catch (e) {
|
||||
alert("上传失败：" + (e.response?.data?.message || e.message));
|
||||
} finally {
|
||||
bar.value = 0;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -22,12 +22,18 @@
|
|||
} else {
|
||||
try {
|
||||
const res = await axios.get(API_STATUS + "?id=" + encodeURIComponent(ID));
|
||||
console.log(res);
|
||||
const { exists, status } = res.data; // exists: boolean, status: "running" | "success" | "failed"...
|
||||
|
||||
if (!exists) {
|
||||
msg.textContent = `id "${ID}" 不存在`;
|
||||
msg.hidden = false;
|
||||
} else {
|
||||
}
|
||||
else if (status == "running"){
|
||||
msg.textContent = `id "${ID}" 仍在运行中，请耐心等待片刻后刷新。`;
|
||||
msg.hidden = false;
|
||||
}
|
||||
else {
|
||||
msg.hidden = true;
|
||||
axios.get(API_PIC + "?id=" + encodeURIComponent(ID)).then(res => {
|
||||
if (res.data.ok) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue