kevin/operating-room-monitor-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: demo CORS, demo client, openpyxl catalog load

Browse Source 
- Load consumable catalog XLSX with openpyxl and drop the pandas dependency.
- Add optional demo CORS settings and FastAPI CORSMiddleware for browser clients.
- Add scripts/demo_client static page and local server for API smoke tests.

Made-with: Cursor
This commit is contained in:
Kevin
2026-04-22 17:00:56 +08:00
parent 132702aea9
commit 42720f81cf
8 changed files with 991 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
scripts/demo_client/README.md Normal file
View File

@@ -0,0 +1,64 @@
# Demo Client
一个浏览器里的单页 demo，用于手动触发 `app/api.py` 里的 5 个 `/client/*` 接口，覆盖开始/结束手术、查询结果、拉取待确认耗材，以及**本地麦克风录 WAV 并上传**语音确认接口。
## 结构
```
scripts/demo_client/
server.py # 基于 stdlib 的静态服务器；额外暴露 /labels.json
index.html # 单文件页面（原生 JS，零构建依赖）
```
## 运行方式
```bash
# 1) 启动后端（默认 38080）。CORS 中间件在 settings.demo_cors_enabled=True 时自动挂载。
uv run python main.py
# 2) 启动 demo 客户端静态服务（默认 127.0.0.1:38081）。
python scripts/demo_client/server.py
# 或指定端口：
python scripts/demo_client/server.py -p 9000 --host 0.0.0.0
# 3) 浏览器访问：
open http://localhost:38081/
```
页面顶部的「服务端 Base URL」默认是 `http://localhost:38080`；如果后端部署在其他主机/端口，直接改这里即可。
## 页面包含什么
- `GET /health` 连通性检查
- §4.1 `POST /client/surgeries/start` — 含 `surgery_id` 校验、`camera_ids` 多值输入、`candidate_consumables` 标签编辑器（初始值从 `/labels.json` 载入，可增删）
- §4.2 `POST /client/surgeries/end`
- §4.3 `GET /client/surgeries/{id}/result` — 以表格渲染 `details` 与 `summary`
- §4.4 `GET /client/surgeries/{id}/pending-confirmation` — 支持手动拉取与 2s 自动轮询
- §4.5 `POST .../resolve` — 本地麦克风录音 → 16 kHz 单声道 WAV → `multipart/form-data` 上传
右侧「响应日志」按时间倒序展示每次请求的 method/url/status/body，便于联调截图。
## 关于 `/labels.json`
`server.py` 在进程启动时读 `app/resources/consumable_classifier_labels.yaml` 的 `names` 映射并返回 `{"labels": [...]}`。优先用 `PyYAML`（主项目依赖已间接引入），缺失时回退到手写的最小 YAML 解析器（仅兼容该文件的已知形状）。
## 关于麦克风
浏览器的 `getUserMedia` 仅在**安全上下文**可用，对 demo 实际意味着：
- **可以用**：`http://localhost`、`http://127.0.0.1`、`https://...`
- **不能用**：直接 `file://` 双击打开 `index.html`，或通过非本机 `http://` 访问 —— 所以这里用了独立的静态 HTTP 服务器而不是 `file://`。
页面采用：
1. `navigator.mediaDevices.getUserMedia` 拿到单声道音轨
2. `AudioContext` + `ScriptProcessorNode` 捕获 Float32 原始 PCM（输入采样率取决于系统，如 48 kHz）
3. 前端把样本线性降采样到 16 kHz、转 Int16 并拼 RIFF/WAVE 头
4. 产出 `Blob("audio/wav")` 后可以「下载 wav（调试）」或直接「上传并确认」
## 关闭 CORS（生产环境）
`app/config.py` 新增：
- `DEMO_CORS_ENABLED`（默认 `True`，生产请在 `.env` 里置 `false`）
- `DEMO_CORS_ORIGINS`（默认 `*`，可写 `http://my-host:38081,https://or-demo.example.com`）

717
scripts/demo_client/index.html Normal file
View File

@@ -0,0 +1,717 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Operation Room Monitor · Demo Client</title>
<style>
:root {
--bg: #0f172a;
--panel: #111827;
--panel-2: #1f2937;
--border: #334155;
--text: #e2e8f0;
--muted: #94a3b8;
--accent: #38bdf8;
--accent-2: #22c55e;
--danger: #ef4444;
--warn: #f59e0b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
background: var(--bg);
color: var(--text);
font-size: 14px;
}
.layout {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr);
gap: 16px;
padding: 16px;
min-height: 100vh;
}
h1 { font-size: 18px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 10px; color: var(--accent); }
h3 { font-size: 13px; margin: 14px 0 6px; color: var(--muted); }
section.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 14px;
}
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
input[type=text], input[type=url], input[type=number], select, textarea {
width: 100%;
background: var(--panel-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
padding: 7px 9px;
font-size: 13px;
font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: 1px solid var(--accent); }
button {
background: var(--accent);
color: #0b1220;
border: 0;
border-radius: 6px;
padding: 7px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
button.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
button.danger { background: var(--danger); color: #fff; }
button.warn { background: var(--warn); color: #0b1220; }
button:disabled { opacity: .5; cursor: not-allowed; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.kv { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); }
.pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 10px;
margin: 3px 4px 3px 0;
font-size: 12px;
}
.pill button {
background: transparent;
color: var(--muted);
padding: 0 0 0 4px;
font-size: 13px;
}
.pill button:hover { color: var(--danger); }
.tags-wrap {
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px;
min-height: 42px;
max-height: 160px;
overflow-y: auto;
}
.tags-wrap input {
background: transparent;
border: 0;
padding: 3px 6px;
min-width: 140px;
width: auto;
color: var(--text);
}
.log {
background: #0b1220;
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
height: calc(100vh - 64px);
overflow-y: auto;
position: sticky;
top: 16px;
}
.log-item { border-bottom: 1px dashed var(--border); padding: 8px 4px; }
.log-item:last-child { border-bottom: 0; }
.log-head { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.log-method { font-weight: 700; color: var(--accent); font-size: 11px; letter-spacing: .5px; }
.log-status { font-size: 11px; }
.log-status.ok { color: var(--accent-2); }
.log-status.err { color: var(--danger); }
.log-url { font-size: 11px; color: var(--muted); word-break: break-all; }
.log-body {
background: var(--panel-2);
border-radius: 4px;
padding: 6px 8px;
margin-top: 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
max-height: 220px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}
.log-time { color: var(--muted); font-size: 11px; }
.badge {
display: inline-block;
font-size: 10px;
padding: 2px 6px;
border-radius: 3px;
margin-left: 6px;
background: var(--panel-2);
color: var(--muted);
}
.badge.on { background: #064e3b; color: #a7f3d0; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-weight: 500; }
.record-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meter {
flex: 1;
min-width: 140px;
height: 10px;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 5px;
overflow: hidden;
}
.meter > span {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444);
transition: width 0.06s linear;
}
.muted { color: var(--muted); }
.err { color: var(--danger); }
.ok { color: var(--accent-2); }
.small { font-size: 12px; }
.grow { flex: 1; }
audio { width: 100%; margin-top: 8px; }
.pending-box { background: var(--panel-2); border-radius: 6px; padding: 10px; margin-top: 8px; }
.option-row { display: flex; justify-content: space-between; padding: 2px 0; }
@media (max-width: 960px) {
.layout { grid-template-columns: 1fr; }
.log { position: static; height: auto; max-height: 50vh; }
}
</style>
</head>
<body>
<div class="layout">
<main>
<section class="card">
<h1>Operation Room Monitor · Demo Client</h1>
<p class="muted small">手动触发 <code>/client/*</code> 5 个接口；本地麦克风录音后生成 WAV 上传语音确认接口。</p>
<div class="row" style="margin-top:10px">
<div>
<label>服务端 Base URL</label>
<input id="base-url" type="url" value="http://localhost:38080" />
</div>
<div>
<label>手术号 surgery_id（6 位数字）</label>
<input id="surgery-id" type="text" inputmode="numeric" pattern="\d{6}" maxlength="6" value="123456" />
</div>
</div>
<div class="actions">
<button id="btn-health" class="secondary">GET /health</button>
<span id="health-status" class="small muted"></span>
</div>
</section>
<section class="card">
<h2>§4.1 开始手术</h2>
<div class="row">
<div>
<label>camera_ids（逗号分隔，至少一个）</label>
<input id="camera-ids" type="text" value="or-cam-01" />
</div>
<div>
<label>candidate_consumables<span id="labels-hint" class="badge">loading…</span></label>
<div class="tags-wrap" id="tags">
<input id="tag-input" type="text" placeholder="输入后回车添加" />
</div>
</div>
</div>
<div class="actions">
<button id="btn-start">POST /client/surgeries/start</button>
<button id="btn-load-all-labels" class="secondary" type="button">载入全部标签</button>
<button id="btn-clear-labels" class="secondary" type="button">清空</button>
</div>
</section>
<section class="card">
<h2>§4.2 结束手术</h2>
<div class="actions">
<button id="btn-end" class="warn">POST /client/surgeries/end</button>
</div>
</section>
<section class="card">
<h2>§4.3 查询结果</h2>
<div class="actions">
<button id="btn-result" class="secondary">GET /client/surgeries/{id}/result</button>
</div>
<div id="result-render"></div>
</section>
<section class="card">
<h2>§4.4 待确认耗材</h2>
<div class="actions">
<button id="btn-pending" class="secondary">拉一条待确认</button>
<label class="small" style="display:flex;align-items:center;gap:6px;cursor:pointer">
<input id="auto-poll" type="checkbox" /> 自动轮询（2s）
</label>
<span id="voice-status" class="small muted"></span>
</div>
<div id="pending-render" class="pending-box" hidden></div>
</section>
<section class="card">
<h2>§4.5 语音确认（录音 → WAV → 上传）</h2>
<div class="row">
<div>
<label>confirmation_id（从 §4.4 自动填入，也可手动修改）</label>
<input id="confirmation-id" type="text" />
</div>
</div>
<h3>录音</h3>
<div class="record-controls">
<button id="btn-rec-start">开始录音</button>
<button id="btn-rec-stop" class="danger" disabled>停止</button>
<div class="meter"><span id="meter-bar"></span></div>
<span id="rec-info" class="muted small">就绪</span>
</div>
<audio id="audio-preview" controls hidden></audio>
<div class="actions">
<button id="btn-resolve" disabled>上传并确认</button>
<a id="btn-download" class="small muted" href="#" download="voice.wav" style="display:none">下载 WAV（调试）</a>
</div>
</section>
</main>
<aside>
<div class="log" id="log">
<div class="small muted" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
<strong style="color:var(--text)">响应日志</strong>
<button class="secondary" id="btn-clear-log" style="padding:3px 8px;font-size:11px">清空</button>
</div>
</div>
</aside>
</div>
<script>
// ============================================================
// Utilities
// ============================================================
const $ = (id) => document.getElementById(id);
const baseUrl = () => $("base-url").value.trim().replace(/\/+$/, "");
const surgeryId = () => $("surgery-id").value.trim();
const logEl = $("log");
function addLog(method, url, status, body, { error = false } = {}) {
const item = document.createElement("div");
item.className = "log-item";
const time = new Date().toLocaleTimeString();
const statusClass = error || (typeof status === "number" && status >= 400) ? "err" : "ok";
const statusText = typeof status === "number" ? status : status || (error ? "ERROR" : "—");
item.innerHTML = `
<div class="log-head">
<span><span class="log-method">${method}</span> <span class="log-url">${url}</span></span>
<span><span class="log-status ${statusClass}">${statusText}</span> <span class="log-time">${time}</span></span>
</div>`;
const bodyEl = document.createElement("div");
bodyEl.className = "log-body";
if (body === undefined || body === null || body === "") {
bodyEl.textContent = "(empty)";
} else if (typeof body === "string") {
bodyEl.textContent = body;
} else {
try { bodyEl.textContent = JSON.stringify(body, null, 2); }
catch { bodyEl.textContent = String(body); }
}
item.appendChild(bodyEl);
logEl.insertBefore(item, logEl.children[1] ?? null);
}
$("btn-clear-log").onclick = () => {
[...logEl.querySelectorAll(".log-item")].forEach(n => n.remove());
};
async function apiJson(method, path, payload) {
const url = baseUrl() + path;
let res;
try {
res = await fetch(url, {
method,
headers: payload ? { "Content-Type": "application/json" } : undefined,
body: payload ? JSON.stringify(payload) : undefined,
});
} catch (e) {
addLog(method, url, "NETWORK", String(e), { error: true });
throw e;
}
const text = await res.text();
let parsed;
try { parsed = text ? JSON.parse(text) : null; } catch { parsed = text; }
addLog(method, url, res.status, parsed);
return { res, body: parsed };
}
// ============================================================
// Surgery ID validation
// ============================================================
function ensureSurgeryId() {
const sid = surgeryId();
if (!/^\d{6}$/.test(sid)) {
alert("surgery_id 必须是 6 位数字");
return null;
}
return sid;
}
// ============================================================
// Tags for candidate_consumables
// ============================================================
const tagsEl = $("tags");
const tagInput = $("tag-input");
let tags = [];
function renderTags() {
[...tagsEl.querySelectorAll(".pill")].forEach(n => n.remove());
tags.forEach((t, idx) => {
const pill = document.createElement("span");
pill.className = "pill";
pill.innerHTML = `<span></span><button title="移除" aria-label="移除">×</button>`;
pill.firstChild.textContent = t;
pill.querySelector("button").onclick = () => {
tags.splice(idx, 1);
renderTags();
};
tagsEl.insertBefore(pill, tagInput);
});
}
function addTag(name) {
const v = name.trim();
if (!v) return;
if (tags.includes(v)) return;
tags.push(v);
renderTags();
}
tagInput.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === ",") {
e.preventDefault();
addTag(tagInput.value);
tagInput.value = "";
} else if (e.key === "Backspace" && !tagInput.value && tags.length) {
tags.pop();
renderTags();
}
});
tagsEl.addEventListener("click", (e) => {
if (e.target === tagsEl) tagInput.focus();
});
async function loadLabels() {
const hint = $("labels-hint");
try {
const res = await fetch("/labels.json");
if (!res.ok) throw new Error("HTTP " + res.status);
const data = await res.json();
const labels = Array.isArray(data.labels) ? data.labels : [];
tags = labels.slice(0, 5);
renderTags();
hint.textContent = `共 ${labels.length} 个标签`;
hint.classList.add("on");
window.__ALL_LABELS__ = labels;
} catch (e) {
hint.textContent = "labels.json 加载失败";
console.warn(e);
}
}
$("btn-load-all-labels").onclick = () => {
const all = window.__ALL_LABELS__ || [];
tags = [...all];
renderTags();
};
$("btn-clear-labels").onclick = () => { tags = []; renderTags(); };
// ============================================================
// §health
// ============================================================
$("btn-health").onclick = async () => {
const { res } = await apiJson("GET", "/health");
$("health-status").textContent = `HTTP ${res.status}`;
$("health-status").className = "small " + (res.ok ? "ok" : "err");
};
// ============================================================
// §4.1 start
// ============================================================
$("btn-start").onclick = async () => {
const sid = ensureSurgeryId();
if (!sid) return;
const camera_ids = $("camera-ids").value.split(",").map(s => s.trim()).filter(Boolean);
if (camera_ids.length === 0) { alert("camera_ids 至少要 1 个"); return; }
await apiJson("POST", "/client/surgeries/start", {
surgery_id: sid,
camera_ids,
candidate_consumables: [...tags],
});
};
// ============================================================
// §4.2 end
// ============================================================
$("btn-end").onclick = async () => {
const sid = ensureSurgeryId();
if (!sid) return;
await apiJson("POST", "/client/surgeries/end", { surgery_id: sid });
};
// ============================================================
// §4.3 result
// ============================================================
$("btn-result").onclick = async () => {
const sid = ensureSurgeryId();
if (!sid) return;
const { res, body } = await apiJson("GET", `/client/surgeries/${sid}/result`);
const target = $("result-render");
target.innerHTML = "";
if (!res.ok || !body || typeof body !== "object") return;
const { details = [], summary = [] } = body;
const renderTable = (title, rows, cols) => {
const h = document.createElement("h3");
h.textContent = title;
target.appendChild(h);
const t = document.createElement("table");
const thead = document.createElement("thead");
thead.innerHTML = "<tr>" + cols.map(c => `<th>${c.label}</th>`).join("") + "</tr>";
t.appendChild(thead);
const tbody = document.createElement("tbody");
if (!rows.length) {
tbody.innerHTML = `<tr><td colspan="${cols.length}" class="muted">（空）</td></tr>`;
} else {
rows.forEach(row => {
const tr = document.createElement("tr");
tr.innerHTML = cols.map(c => `<td>${row[c.key] ?? ""}</td>`).join("");
tbody.appendChild(tr);
});
}
t.appendChild(tbody);
target.appendChild(t);
};
renderTable("明细 details[]", details, [
{ key: "timestamp", label: "time" },
{ key: "item_id", label: "item_id" },
{ key: "item_name", label: "item_name" },
{ key: "quantity", label: "qty" },
{ key: "doctor_id", label: "doctor" },
{ key: "source", label: "source" },
]);
renderTable("汇总 summary[]", summary, [
{ key: "item_id", label: "item_id" },
{ key: "item_name", label: "item_name" },
{ key: "total_quantity", label: "total" },
]);
};
// ============================================================
// §4.4 pending-confirmation
// ============================================================
let pollTimer = null;
async function fetchPendingOnce() {
const sid = surgeryId();
if (!/^\d{6}$/.test(sid)) return;
const { res, body } = await apiJson("GET", `/client/surgeries/${sid}/pending-confirmation`);
const box = $("pending-render");
if (res.status === 200 && body && body.confirmation_id) {
box.hidden = false;
$("confirmation-id").value = body.confirmation_id;
const opts = (body.options || [])
.map(o => `<div class="option-row"><span>${o.label}</span><span class="muted">${(o.confidence * 100).toFixed(1)}%</span></div>`)
.join("");
box.innerHTML = `
<div><strong>confirmation_id:</strong> <span class="kv">${body.confirmation_id}</span></div>
<div style="margin-top:4px"><strong>prompt_text:</strong> ${body.prompt_text || ""}</div>
<div style="margin-top:4px"><strong>Top1:</strong> ${body.model_top1_label} <span class="muted">(${(body.model_top1_confidence * 100).toFixed(1)}%)</span></div>
<div style="margin-top:6px"><strong>options:</strong>${opts || '<div class="muted">（无）</div>'}</div>`;
} else if (res.status === 404) {
box.hidden = false;
box.innerHTML = '<span class="muted">暂无待确认项。</span>';
} else {
box.hidden = false;
box.innerHTML = `<span class="err">HTTP ${res.status}</span>`;
}
}
$("btn-pending").onclick = fetchPendingOnce;
$("auto-poll").onchange = (e) => {
if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
if (e.target.checked) {
$("voice-status").textContent = "自动轮询中…";
pollTimer = setInterval(fetchPendingOnce, 2000);
fetchPendingOnce();
} else {
$("voice-status").textContent = "";
}
};
// ============================================================
// §4.5 Recording (mic → WAV 16kHz mono PCM)
// ============================================================
let audioCtx = null;
let mediaStream = null;
let sourceNode = null;
let processorNode = null;
let pcmChunks = [];
let inputSampleRate = 48000;
let recStartAt = 0;
let recordingWav = null;
function floatTo16BitPCM(view, offset, input) {
for (let i = 0; i < input.length; i++, offset += 2) {
const s = Math.max(-1, Math.min(1, input[i]));
view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);
}
}
function writeString(view, offset, str) {
for (let i = 0; i < str.length; i++) view.setUint8(offset + i, str.charCodeAt(i));
}
function downsampleTo16k(inputBuffer, inputRate) {
const target = 16000;
if (inputRate === target) return inputBuffer;
const ratio = inputRate / target;
const newLen = Math.round(inputBuffer.length / ratio);
const out = new Float32Array(newLen);
let offsetOut = 0;
let offsetIn = 0;
while (offsetOut < newLen) {
const nextIn = Math.round((offsetOut + 1) * ratio);
let accum = 0, count = 0;
for (let i = offsetIn; i < nextIn && i < inputBuffer.length; i++) {
accum += inputBuffer[i]; count++;
}
out[offsetOut] = count > 0 ? accum / count : 0;
offsetOut++;
offsetIn = nextIn;
}
return out;
}
function encodeWav(samples, sampleRate) {
const buffer = new ArrayBuffer(44 + samples.length * 2);
const view = new DataView(buffer);
writeString(view, 0, "RIFF");
view.setUint32(4, 36 + samples.length * 2, true);
writeString(view, 8, "WAVE");
writeString(view, 12, "fmt ");
view.setUint32(16, 16, true); // PCM subchunk size
view.setUint16(20, 1, true); // format = PCM
view.setUint16(22, 1, true); // channels = 1
view.setUint32(24, sampleRate, true);
view.setUint32(28, sampleRate * 2, true); // byte rate
view.setUint16(32, 2, true); // block align
view.setUint16(34, 16, true); // bits per sample
writeString(view, 36, "data");
view.setUint32(40, samples.length * 2, true);
floatTo16BitPCM(view, 44, samples);
return new Blob([view], { type: "audio/wav" });
}
function concatFloat32(chunks) {
let total = 0;
chunks.forEach(c => { total += c.length; });
const out = new Float32Array(total);
let offset = 0;
chunks.forEach(c => { out.set(c, offset); offset += c.length; });
return out;
}
async function startRecording() {
try {
mediaStream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true } });
} catch (e) {
alert("无法获取麦克风：" + e.message + "\n请确保使用 http://localhost 或 https 访问，并授权麦克风。");
return;
}
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
inputSampleRate = audioCtx.sampleRate;
sourceNode = audioCtx.createMediaStreamSource(mediaStream);
processorNode = audioCtx.createScriptProcessor(4096, 1, 1);
pcmChunks = [];
let peak = 0;
processorNode.onaudioprocess = (ev) => {
const input = ev.inputBuffer.getChannelData(0);
pcmChunks.push(new Float32Array(input));
let localPeak = 0;
for (let i = 0; i < input.length; i++) {
const v = Math.abs(input[i]);
if (v > localPeak) localPeak = v;
}
peak = Math.max(peak * 0.85, localPeak);
$("meter-bar").style.width = Math.min(100, peak * 140) + "%";
};
sourceNode.connect(processorNode);
processorNode.connect(audioCtx.destination);
recStartAt = performance.now();
$("btn-rec-start").disabled = true;
$("btn-rec-stop").disabled = false;
$("btn-resolve").disabled = true;
$("audio-preview").hidden = true;
$("btn-download").style.display = "none";
$("rec-info").textContent = `录音中 @ ${inputSampleRate} Hz…`;
$("rec-info").className = "warn small";
}
async function stopRecording() {
if (processorNode) { processorNode.disconnect(); processorNode.onaudioprocess = null; }
if (sourceNode) sourceNode.disconnect();
if (mediaStream) mediaStream.getTracks().forEach(t => t.stop());
if (audioCtx) await audioCtx.close();
const durationMs = performance.now() - recStartAt;
const samples = concatFloat32(pcmChunks);
const downsampled = downsampleTo16k(samples, inputSampleRate);
recordingWav = encodeWav(downsampled, 16000);
const url = URL.createObjectURL(recordingWav);
const audio = $("audio-preview");
audio.src = url;
audio.hidden = false;
const dl = $("btn-download");
dl.href = url;
dl.style.display = "inline-block";
$("btn-rec-start").disabled = false;
$("btn-rec-stop").disabled = true;
$("btn-resolve").disabled = false;
$("rec-info").textContent = `录音完成：${(durationMs / 1000).toFixed(1)}s · ${(recordingWav.size / 1024).toFixed(1)} KB · 16 kHz mono`;
$("rec-info").className = "ok small";
$("meter-bar").style.width = "0";
pcmChunks = [];
}
$("btn-rec-start").onclick = startRecording;
$("btn-rec-stop").onclick = stopRecording;
$("btn-resolve").onclick = async () => {
const sid = ensureSurgeryId();
if (!sid) return;
const cid = $("confirmation-id").value.trim();
if (!cid) { alert("请先获取 confirmation_id"); return; }
if (!recordingWav) { alert("请先录制音频"); return; }
const url = baseUrl() + `/client/surgeries/${sid}/pending-confirmation/${encodeURIComponent(cid)}/resolve`;
const fd = new FormData();
fd.append("audio", recordingWav, "voice.wav");
let res;
try {
res = await fetch(url, { method: "POST", body: fd });
} catch (e) {
addLog("POST", url, "NETWORK", String(e), { error: true });
return;
}
const text = await res.text();
let parsed;
try { parsed = text ? JSON.parse(text) : null; } catch { parsed = text; }
addLog("POST (multipart)", url, res.status, parsed);
};
// ============================================================
// Boot
// ============================================================
loadLabels();
</script>
</body>
</html>

134
scripts/demo_client/server.py Normal file
View File

@@ -0,0 +1,134 @@
"""Tiny stdlib HTTP server for the demo client page.
- Serves `index.html` (and other sibling files) from this directory.
- Exposes `GET /labels.json`, which parses the repo's
`app/resources/consumable_classifier_labels.yaml` and returns its label
list so the page can prefill the candidate-consumables input.
Run:
python scripts/demo_client/server.py # 127.0.0.1:38081
python scripts/demo_client/server.py -p 9000 # custom port
"""
from __future__ import annotations
import argparse
import json
import re
import sys
from http import HTTPStatus
from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
from pathlib import Path
from typing import Any
SCRIPT_DIR = Path(__file__).resolve().parent
REPO_ROOT = SCRIPT_DIR.parents[1]
LABELS_YAML = REPO_ROOT / "app" / "resources" / "consumable_classifier_labels.yaml"
def _load_labels_with_pyyaml(path: Path) -> list[str] | None:
try:
import yaml # type: ignore[import-untyped]
except ImportError:
return None
try:
data: Any = yaml.safe_load(path.read_text(encoding="utf-8"))
except (OSError, yaml.YAMLError):
return None
if not isinstance(data, dict):
return None
names = data.get("names")
if isinstance(names, dict):
try:
items = sorted(names.items(), key=lambda kv: int(kv[0]))
except (TypeError, ValueError):
items = list(names.items())
return [str(v) for _, v in items]
if isinstance(names, list):
return [str(v) for v in names]
return None
def _load_labels_fallback(path: Path) -> list[str]:
"""Minimal parser for the known labels.yaml shape: `<int>: <text>` under `names:`."""
labels: list[tuple[int, str]] = []
in_names = False
pattern = re.compile(r"^\s+(\d+)\s*:\s*(.+?)\s*$")
try:
text = path.read_text(encoding="utf-8")
except OSError:
return []
for line in text.splitlines():
stripped = line.strip()
if not stripped or stripped.startswith("#"):
continue
if stripped.startswith("names:"):
in_names = True
continue
if in_names and not line.startswith((" ", "\t")):
in_names = False
if not in_names:
continue
match = pattern.match(line)
if match:
labels.append((int(match.group(1)), match.group(2)))
labels.sort(key=lambda kv: kv[0])
return [name for _, name in labels]
def load_labels() -> list[str]:
if not LABELS_YAML.is_file():
return []
labels = _load_labels_with_pyyaml(LABELS_YAML)
if labels is None:
labels = _load_labels_fallback(LABELS_YAML)
return labels
class DemoHandler(SimpleHTTPRequestHandler):
def __init__(self, *args: Any, **kwargs: Any) -> None:
super().__init__(*args, directory=str(SCRIPT_DIR), **kwargs)
def do_GET(self) -> None: # noqa: N802 (stdlib override)
if self.path.split("?", 1)[0] == "/labels.json":
self._send_labels()
return
super().do_GET()
def _send_labels(self) -> None:
body = json.dumps({"labels": load_labels()}, ensure_ascii=False).encode("utf-8")
self.send_response(HTTPStatus.OK)
self.send_header("Content-Type", "application/json; charset=utf-8")
self.send_header("Content-Length", str(len(body)))
self.send_header("Cache-Control", "no-store")
self.end_headers()
self.wfile.write(body)
def log_message(self, format: str, *args: Any) -> None: # noqa: A002
sys.stderr.write(
"[demo-client] %s - %s\n" % (self.address_string(), format % args)
)
def main() -> None:
parser = argparse.ArgumentParser(description="Operation room demo client server")
parser.add_argument("--host", default="127.0.0.1")
parser.add_argument("-p", "--port", type=int, default=38081)
args = parser.parse_args()
server = ThreadingHTTPServer((args.host, args.port), DemoHandler)
url = f"http://{args.host}:{args.port}/"
print(f"Demo client serving at {url}")
print(f" static dir : {SCRIPT_DIR}")
print(f" labels yaml: {LABELS_YAML}")
print("Press Ctrl+C to stop.")
try:
server.serve_forever()
except KeyboardInterrupt:
print("\nShutting down.")
finally:
server.server_close()
if __name__ == "__main__":
main()