Files
icassp2027-experiment/floor_event_review_web/app.js
T

513 lines
23 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use strict";
const state = {
candidates: [],
filtered: [],
reviews: {},
currentId: null,
currentDetail: null,
saving: false,
sessionSpeech: {},
};
const elements = Object.fromEntries(
[
"progressText", "progressMeta", "progressBar", "sessionFilter", "splitFilter",
"familyFilter", "statusFilter", "searchFilter", "clearFilters", "queueTitle",
"queueCount", "queueList", "queueLimit", "familyBadge", "splitBadge",
"autoConfidenceBadge", "eventTitle", "eventSubtitle", "eventPosition",
"llmSuggestion", "llmSuggestionText", "sessionTimeline", "speakerTimeline",
"eventVideo", "mediaEmpty", "jumpEvent", "timeReadout", "clipLabel",
"transcriptList", "rawCandidate", "reviewForm", "reviewerInput", "formError",
"saveButton", "uncertainButton", "saveState", "toast", "relabelFields",
"excludeFields", "eventTypeField", "subtypeField",
].map((id) => [id, document.getElementById(id)])
);
const familyNames = {
eot: "EOT-RESPONSE",
int: "INT-YIELD",
onset: "WEARER ONSET",
offset: "LEGACY EOT PROXY",
interaction: "LEGACY INTERACTION",
};
function escapeText(value) {
return String(value ?? "");
}
function formatTime(value) {
if (value === null || value === undefined || Number.isNaN(Number(value))) return "—";
const seconds = Number(value);
const minutes = Math.floor(seconds / 60);
return `${String(minutes).padStart(2, "0")}:${(seconds % 60).toFixed(1).padStart(4, "0")}`;
}
function toast(message) {
elements.toast.textContent = message;
elements.toast.classList.add("visible");
window.clearTimeout(toast.timeout);
toast.timeout = window.setTimeout(() => elements.toast.classList.remove("visible"), 1800);
}
async function request(url, options) {
const response = await fetch(url, options);
const payload = await response.json().catch(() => ({}));
if (!response.ok) throw new Error(payload.error || `请求失败 (${response.status})`);
return payload;
}
function updateProgress() {
const total = state.candidates.length;
const reviewed = Object.keys(state.reviews).length;
const percent = total ? (reviewed / total) * 100 : 0;
elements.progressText.textContent = `${reviewed} / ${total} 已审核`;
elements.progressMeta.textContent = `${percent.toFixed(1)}%`;
elements.progressBar.style.width = `${percent}%`;
}
function populateSessions() {
const sessions = [...new Set(state.candidates.map((item) => item.session))].sort((a, b) =>
a.localeCompare(b, undefined, { numeric: true })
);
for (const session of sessions) {
const option = document.createElement("option");
option.value = session;
option.textContent = session;
elements.sessionFilter.append(option);
}
}
function applyFilters({ keepCurrent = true } = {}) {
const search = elements.searchFilter.value.trim().toLowerCase();
state.filtered = state.candidates.filter((item) => {
const reviewed = Boolean(state.reviews[item.candidate_id]);
const status = elements.statusFilter.value;
return (
(elements.sessionFilter.value === "all" || item.session === elements.sessionFilter.value) &&
(elements.splitFilter.value === "all" || item.split === elements.splitFilter.value) &&
(elements.familyFilter.value === "all" || item.family === elements.familyFilter.value) &&
(status === "all" || (status === "reviewed" ? reviewed : !reviewed)) &&
(!search || `${item.uid} ${item.candidate_source || ""} ${item.rule_candidate_type || ""} ${item.ai_verdict || ""} ${item.ai_event_type || ""} ${item.ai_subtype || ""} ${item.session}`.toLowerCase().includes(search))
);
});
renderQueue();
if (!keepCurrent || !state.filtered.some((item) => item.candidate_id === state.currentId)) {
selectCandidate(state.filtered[0]?.candidate_id || null);
} else {
updatePosition();
}
}
function renderQueue() {
elements.queueList.replaceChildren();
elements.queueCount.textContent = String(state.filtered.length);
elements.queueTitle.textContent = elements.statusFilter.value === "unreviewed" ? "待审核候选" : "候选事件";
const limit = 250;
for (const item of state.filtered.slice(0, limit)) {
const button = document.createElement("button");
button.type = "button";
button.className = `queue-item${item.candidate_id === state.currentId ? " active" : ""}${state.reviews[item.candidate_id] ? " reviewed" : ""}`;
button.dataset.id = item.candidate_id;
const line = document.createElement("div");
line.className = "queue-line";
const dot = document.createElement("span");
dot.className = "queue-status";
const title = document.createElement("strong");
title.textContent = item.uid;
line.append(dot, title);
const meta = document.createElement("div");
meta.className = "queue-meta";
meta.textContent = `${item.session} · ${familyNames[item.family] || item.family} · ${formatTime(item.event_time_seconds)}`;
const label = document.createElement("div");
label.className = "queue-label";
label.textContent = item.ai_verdict
? `AI ${item.ai_verdict} · ${item.ai_event_type || item.ai_subtype || "—"}`
: `${item.rule_candidate_type || item.automatic_label} · 待 AI 粗标`;
button.append(line, meta, label);
button.addEventListener("click", () => selectCandidate(item.candidate_id));
elements.queueList.append(button);
}
elements.queueLimit.hidden = state.filtered.length <= limit;
elements.queueLimit.textContent = state.filtered.length > limit ? `列表显示前 ${limit} 条;可用筛选缩小范围。` : "";
}
function updatePosition() {
const index = state.filtered.findIndex((item) => item.candidate_id === state.currentId);
elements.eventPosition.textContent = index < 0 ? `— / ${state.filtered.length}` : `${index + 1} / ${state.filtered.length}`;
}
async function selectCandidate(candidateId) {
state.currentId = candidateId;
renderQueue();
updatePosition();
if (!candidateId) {
elements.eventTitle.textContent = "当前筛选下没有候选";
elements.eventSubtitle.textContent = "调整筛选条件后继续。";
elements.eventVideo.removeAttribute("src");
elements.eventVideo.load();
elements.mediaEmpty.hidden = false;
elements.llmSuggestion.hidden = true;
elements.reviewForm.reset();
return;
}
elements.eventTitle.textContent = "载入事件…";
elements.saveButton.disabled = true;
try {
const detail = await request(`/api/event?id=${encodeURIComponent(candidateId)}`);
if (state.currentId !== candidateId) return;
state.currentDetail = detail;
renderDetail(detail);
restoreForm(detail.review);
} catch (error) {
elements.eventTitle.textContent = "事件载入失败";
elements.eventSubtitle.textContent = error.message;
} finally {
elements.saveButton.disabled = false;
}
}
function renderDetail(detail) {
elements.familyBadge.textContent = familyNames[detail.family] || detail.family;
elements.splitBadge.textContent = `${detail.split} · ${detail.session}`;
elements.autoConfidenceBadge.textContent = detail.automatic_confidence ? `auto ${detail.automatic_confidence}` : "auto confidence —";
elements.eventTitle.textContent = detail.candidate_source || detail.automatic_label;
elements.eventSubtitle.textContent = `${detail.uid} · ${detail.source_file}:${detail.source_row}`;
elements.clipLabel.textContent = detail.clip_stem ? `${detail.session} / ${detail.clip_stem}` : detail.session;
elements.rawCandidate.textContent = JSON.stringify(detail.candidate, null, 2);
elements.saveState.textContent = detail.review ? "已保存" : "未保存";
elements.saveState.classList.toggle("saved", Boolean(detail.review));
const suggestion = detail.llm_suggestion;
elements.llmSuggestion.hidden = !suggestion;
if (suggestion) {
const disposition = suggestion.verdict || suggestion.protocol_disposition || "UNSURE";
const subtype = suggestion.event_type || suggestion.subtype || suggestion.hard_negative_type || "—";
const confidence = suggestion.confidence || suggestion.final_confidence || "—";
const rationale = suggestion.reason || suggestion.rationale || "";
elements.llmSuggestionText.textContent = `${disposition} · ${subtype} · ${confidence}${rationale ? ` — ${rationale}` : ""}`;
}
renderSessionTimeline(detail);
renderSpeakerTimeline(detail);
elements.mediaEmpty.hidden = detail.media_available;
if (detail.media_available) {
elements.eventVideo.src = `/media?id=${encodeURIComponent(detail.candidate_id)}`;
elements.eventVideo.load();
} else {
elements.eventVideo.removeAttribute("src");
elements.eventVideo.load();
}
elements.transcriptList.replaceChildren();
if (!detail.transcript.length) {
const empty = document.createElement("div");
empty.className = "empty-copy";
empty.textContent = "当前上下文未找到 transcript。";
elements.transcriptList.append(empty);
} else {
for (const row of detail.transcript) {
const item = document.createElement("div");
item.className = `transcript-row${row.is_anchor ? " anchor" : ""}`;
const speaker = document.createElement("div");
speaker.className = "speaker";
speaker.textContent = `P${row.participant_id ?? "?"}`;
const time = document.createElement("small");
time.textContent = `${formatTime(row.start_seconds)}–${formatTime(row.end_seconds)}`;
speaker.append(time);
const utterance = document.createElement("div");
utterance.className = "utterance";
utterance.textContent = escapeText(row.transcription);
const target = document.createElement("small");
target.textContent = `Target: ${typeof row.target_of_speech === "string" ? row.target_of_speech : JSON.stringify(row.target_of_speech ?? "unknown")}`;
utterance.append(target);
item.append(speaker, utterance);
elements.transcriptList.append(item);
}
}
updateTimeReadout();
}
async function renderSessionTimeline(detail) {
elements.sessionTimeline.replaceChildren();
if (!state.sessionSpeech[detail.session]) {
try {
const payload = await request(`/api/session-timeline?session=${encodeURIComponent(detail.session)}`);
state.sessionSpeech[detail.session] = payload.speech || [];
} catch (_) {
state.sessionSpeech[detail.session] = [];
}
}
if (state.currentId !== detail.candidate_id) return;
const events = state.candidates.filter((item) => item.session === detail.session);
const speech = state.sessionSpeech[detail.session];
const end = Math.max(1,
...events.map((item) => Number(item.event_time_seconds) || 0),
...speech.map((row) => Number(row.end_seconds) || 0));
const speakers = [...new Set(speech.map((row) => row.participant_role === "wearer" ? "W" : `P${row.participant_id}`))];
for (const speakerId of speakers) {
const lane = document.createElement("div"); lane.className = "session-lane";
const label = document.createElement("strong"); label.textContent = speakerId;
const track = document.createElement("div"); track.className = "session-track";
for (const row of speech.filter((row) => (row.participant_role === "wearer" ? "W" : `P${row.participant_id}`) === speakerId)) {
const segment = document.createElement("span");
segment.className = `session-speech${speakerId === "W" ? " wearer" : ""}`;
segment.style.left = `${100 * Number(row.start_seconds) / end}%`;
segment.style.width = `${Math.max(0.08, 100 * (Number(row.end_seconds) - Number(row.start_seconds)) / end)}%`;
track.append(segment);
}
lane.append(label, track); elements.sessionTimeline.append(lane);
}
const eventTrack = document.createElement("div"); eventTrack.className = "session-events";
for (const item of events) {
const marker = document.createElement("button");
marker.type = "button";
marker.className = `session-marker ${item.family}${item.candidate_id === detail.candidate_id ? " current" : ""}`;
marker.style.left = `${Math.min(100, 100 * (Number(item.event_time_seconds) || 0) / end)}%`;
marker.title = `${formatTime(item.event_time_seconds)} · ${item.candidate_source || item.automatic_label} · ${item.ai_verdict || "未粗标"}`;
marker.addEventListener("click", () => selectCandidate(item.candidate_id));
eventTrack.append(marker);
}
elements.sessionTimeline.append(eventTrack);
}
function renderSpeakerTimeline(detail) {
elements.speakerTimeline.replaceChildren();
const rows = detail.candidate.speaker_timeline || detail.candidate.context || [];
if (!rows.length) {
elements.speakerTimeline.textContent = "没有 participant activity evidence。";
return;
}
const eventTime = Number(detail.candidate.event_time ?? detail.candidate.anchor_dense_seconds);
const left = Math.min(...rows.map((row) => Number(row.start_seconds)), eventTime - 3);
const right = Math.max(...rows.map((row) => Number(row.end_seconds)), eventTime + 3);
const span = Math.max(0.001, right - left);
const speakers = [...new Set(rows.map((row) => `${row.participant_role === "wearer" ? "W" : `P${row.participant_id}`}`))];
for (const speakerId of speakers) {
const lane = document.createElement("div");
lane.className = "speaker-lane";
const label = document.createElement("strong"); label.textContent = speakerId;
const track = document.createElement("div"); track.className = "speaker-track";
for (const row of rows.filter((row) => (row.participant_role === "wearer" ? "W" : `P${row.participant_id}`) === speakerId)) {
const segment = document.createElement("span");
segment.className = `speech-segment${speakerId === "W" ? " wearer" : ""}`;
segment.style.left = `${100 * (Number(row.start_seconds) - left) / span}%`;
segment.style.width = `${Math.max(0.8, 100 * (Number(row.end_seconds) - Number(row.start_seconds)) / span)}%`;
segment.title = `${formatTime(row.start_seconds)}–${formatTime(row.end_seconds)} ${row.transcription || ""}`;
track.append(segment);
}
const anchor = document.createElement("i"); anchor.style.left = `${100 * (eventTime - left) / span}%`; track.append(anchor);
lane.append(label, track); elements.speakerTimeline.append(lane);
}
}
function restoreForm(review) {
elements.reviewForm.reset();
elements.formError.hidden = true;
const reviewer = review?.reviewer || localStorage.getItem("floor-reviewer") || "";
elements.reviewerInput.value = reviewer;
if (!review) {
elements.reviewForm.elements.confidence.value = "medium";
updateConditionalFields();
return;
}
for (const [name, value] of Object.entries(review)) {
const control = elements.reviewForm.elements[name];
if (!control) continue;
if (control instanceof RadioNodeList) control.value = String(value);
else control.value = value === null ? "" : String(value);
}
updateConditionalFields();
}
function formPayload() {
const data = new FormData(elements.reviewForm);
const nullable = (name) => data.get(name) || null;
const correction = data.get("boundary_correction_seconds");
return {
human_action: data.get("human_action"),
human_verdict: nullable("human_verdict"),
human_event_type: nullable("human_event_type"),
human_subtype: nullable("human_subtype"),
exclude_reason: nullable("exclude_reason"),
boundary_correction_seconds: correction === "" ? null : Number(correction),
confidence: data.get("confidence"),
reviewer: String(data.get("reviewer") || "").trim(),
notes: String(data.get("notes") || "").trim(),
};
}
function validateReview(review) {
const missing = [];
if (!review.human_action) missing.push("主操作");
if (review.human_action === "relabel" && !review.human_verdict) missing.push("一级 verdict");
if (review.human_action === "relabel" && review.human_verdict === "POSITIVE" && !review.human_event_type) missing.push("positive event");
if (review.human_action === "relabel" && review.human_verdict === "HARD_NEGATIVE" && !review.human_subtype) missing.push("hard-negative subtype");
if (review.human_action === "exclude" && !review.exclude_reason) missing.push("排除原因");
if (review.human_action === "accept" && !state.currentDetail?.candidate?.ai_verdict && !state.currentDetail?.llm_suggestion?.verdict) missing.push("AI 预标注(尚未运行,需 Relabel)");
if (!review.reviewer) missing.push("审核者");
return missing;
}
function updateConditionalFields() {
const action = elements.reviewForm.elements.human_action.value;
const verdict = elements.reviewForm.elements.human_verdict.value;
elements.relabelFields.hidden = action !== "relabel";
elements.excludeFields.hidden = action !== "exclude";
elements.eventTypeField.hidden = action !== "relabel" || verdict !== "POSITIVE";
elements.subtypeField.hidden = action !== "relabel" || verdict !== "HARD_NEGATIVE";
}
async function saveCurrent({ advance = true } = {}) {
if (!state.currentId || state.saving) return;
const review = formPayload();
const missing = validateReview(review);
if (missing.length) {
elements.formError.textContent = `请完成:${missing.join("、")}`;
elements.formError.hidden = false;
return;
}
elements.formError.hidden = true;
state.saving = true;
elements.saveButton.disabled = true;
elements.saveState.textContent = "保存中…";
try {
await request("/api/review", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ candidate_id: state.currentId, review }),
});
state.reviews[state.currentId] = review;
localStorage.setItem("floor-reviewer", review.reviewer);
elements.saveState.textContent = "已保存";
elements.saveState.classList.add("saved");
updateProgress();
toast("审核结果已保存");
if (advance) {
const previousCandidates = [...state.filtered];
const index = previousCandidates.findIndex((item) => item.candidate_id === state.currentId);
applyFilters();
const next = state.filtered[index] || state.filtered[index - 1] || state.filtered[0];
if (elements.statusFilter.value === "all") {
const sequential = previousCandidates[index + 1] || previousCandidates[index];
selectCandidate(sequential?.candidate_id || null);
} else {
selectCandidate(next?.candidate_id || null);
}
} else {
renderQueue();
}
} catch (error) {
elements.formError.textContent = error.message;
elements.formError.hidden = false;
elements.saveState.textContent = "保存失败";
} finally {
state.saving = false;
elements.saveButton.disabled = false;
}
}
function moveCandidate(delta) {
if (!state.filtered.length) return;
const index = state.filtered.findIndex((item) => item.candidate_id === state.currentId);
const nextIndex = Math.max(0, Math.min(state.filtered.length - 1, (index < 0 ? 0 : index) + delta));
selectCandidate(state.filtered[nextIndex].candidate_id);
}
function seek(delta) {
const video = elements.eventVideo;
if (!Number.isFinite(video.duration)) return;
video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + delta));
}
function jumpToEvent() {
const value = state.currentDetail?.event_local_seconds;
if (value !== null && value !== undefined) elements.eventVideo.currentTime = Number(value);
}
function updateTimeReadout() {
const eventTime = state.currentDetail?.event_local_seconds;
const current = Number.isFinite(elements.eventVideo.currentTime) ? elements.eventVideo.currentTime : 0;
const delta = eventTime === null || eventTime === undefined ? null : current - Number(eventTime);
elements.timeReadout.textContent = delta === null ? formatTime(current) : `${formatTime(current)} · event ${delta >= 0 ? "+" : ""}${delta.toFixed(1)} s`;
}
function isTypingTarget(target) {
return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement;
}
function bindEvents() {
for (const control of [elements.sessionFilter, elements.splitFilter, elements.familyFilter, elements.statusFilter]) {
control.addEventListener("change", () => applyFilters({ keepCurrent: false }));
}
elements.searchFilter.addEventListener("input", () => applyFilters({ keepCurrent: false }));
elements.clearFilters.addEventListener("click", () => {
elements.sessionFilter.value = "all";
elements.splitFilter.value = "all";
elements.familyFilter.value = "all";
elements.statusFilter.value = "unreviewed";
elements.searchFilter.value = "";
applyFilters({ keepCurrent: false });
});
elements.reviewForm.addEventListener("submit", (event) => {
event.preventDefault();
saveCurrent();
});
elements.uncertainButton.addEventListener("click", () => {
elements.reviewForm.elements.human_action.value = "second_review";
elements.reviewForm.elements.confidence.value = "low";
updateConditionalFields();
});
elements.reviewForm.elements.human_action.forEach((control) => control.addEventListener("change", updateConditionalFields));
elements.reviewForm.elements.human_verdict.addEventListener("change", updateConditionalFields);
elements.jumpEvent.addEventListener("click", jumpToEvent);
document.querySelectorAll("[data-seek]").forEach((button) =>
button.addEventListener("click", () => seek(Number(button.dataset.seek)))
);
elements.eventVideo.addEventListener("loadedmetadata", () => {
const start = state.currentDetail?.context_start_seconds;
if (start !== null && start !== undefined) elements.eventVideo.currentTime = Number(start);
});
elements.eventVideo.addEventListener("timeupdate", updateTimeReadout);
elements.eventVideo.addEventListener("error", () => { elements.mediaEmpty.hidden = false; });
document.addEventListener("keydown", (event) => {
if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
event.preventDefault();
saveCurrent();
return;
}
if (isTypingTarget(event.target)) return;
if (event.key === "ArrowLeft") { event.preventDefault(); moveCandidate(-1); }
else if (event.key === "ArrowRight") { event.preventDefault(); moveCandidate(1); }
else if (event.key === "[") { event.preventDefault(); seek(-0.2); }
else if (event.key === "]") { event.preventDefault(); seek(0.2); }
else if (event.code === "Space") {
event.preventDefault();
elements.eventVideo.paused ? elements.eventVideo.play() : elements.eventVideo.pause();
}
});
}
async function initialize() {
bindEvents();
try {
const payload = await request("/api/bootstrap");
state.candidates = payload.candidates;
state.reviews = payload.reviews || {};
populateSessions();
updateProgress();
applyFilters({ keepCurrent: false });
} catch (error) {
elements.progressText.textContent = "载入失败";
elements.progressMeta.textContent = error.message;
elements.eventTitle.textContent = "无法载入候选事件";
elements.eventSubtitle.textContent = error.message;
}
}
initialize();