mirror of
https://github.com/ClovertaTheTrilobita/cellpose-web.git
synced 2026-04-01 23:14:50 +00:00
50 lines
1.7 KiB
HTML
50 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="UTF-8" />
|
|
<h1>This is preview</h1>
|
|
<p id="none-exist" hidden></p>
|
|
<div id="gallery"></div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script type="module">
|
|
const API_BASE = "http://10.147.18.141:5000/status";
|
|
const API_PIC = "http://10.147.18.141:5000/preview"
|
|
const params = new URLSearchParams(window.location.search);
|
|
const ID = params.get("id");
|
|
|
|
const msg = document.getElementById("none-exist");
|
|
|
|
if (!ID) {
|
|
msg.textContent = "missing id in URL";
|
|
msg.hidden = false;
|
|
} else {
|
|
try {
|
|
const res = await axios.get(API_BASE + "?id=" + encodeURIComponent(ID));
|
|
const { exists, status } = res.data; // exists: boolean, status: "running" | "success" | "failed"...
|
|
|
|
if (!exists) {
|
|
msg.textContent = `id "${ID}" 不存在`;
|
|
msg.hidden = false;
|
|
} else {
|
|
msg.hidden = true;
|
|
axios.get(API_PIC + "?id=" + encodeURIComponent(ID)).then(res => {
|
|
if (res.data.ok) {
|
|
const gallery = document.getElementById("gallery");
|
|
res.data.images.forEach(img => {
|
|
const el = document.createElement("img");
|
|
el.src = "data:image/png;base64," + img.image;
|
|
el.alt = img.filename;
|
|
el.style.width = "200px"; // 缩略图大小
|
|
gallery.appendChild(el);
|
|
});
|
|
} else {
|
|
alert(res.data.error);
|
|
}
|
|
});
|
|
}
|
|
} catch (e) {
|
|
msg.textContent = "请求失败";
|
|
msg.hidden = false;
|
|
console.error(e);
|
|
}
|
|
}
|
|
</script>
|