360 lines
16 KiB
TypeScript
360 lines
16 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
useEffect,
|
|||
|
|
useId,
|
|||
|
|
useMemo,
|
|||
|
|
useRef,
|
|||
|
|
useState,
|
|||
|
|
type CSSProperties,
|
|||
|
|
type KeyboardEvent,
|
|||
|
|
type PointerEvent,
|
|||
|
|
} from "react";
|
|||
|
|
import styles from "./timeline.module.css";
|
|||
|
|
|
|||
|
|
export interface TimelineTranscript {
|
|||
|
|
role: "agent" | "user";
|
|||
|
|
start_ms: number;
|
|||
|
|
end_ms: number;
|
|||
|
|
transcript: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export interface TimelineAnnotation {
|
|||
|
|
id: string;
|
|||
|
|
decision_ms: number;
|
|||
|
|
can_reply_now: "1" | "0" | "";
|
|||
|
|
reason?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export interface TimelineProps {
|
|||
|
|
durationMs: number;
|
|||
|
|
currentMs: number;
|
|||
|
|
decisionMs: number | null;
|
|||
|
|
transcripts: TimelineTranscript[];
|
|||
|
|
annotations: TimelineAnnotation[];
|
|||
|
|
selectedId: string | null;
|
|||
|
|
waveform: number[] | null;
|
|||
|
|
readOnly?: boolean;
|
|||
|
|
onSeek: (ms: number) => void;
|
|||
|
|
onDecisionChange: (ms: number) => void;
|
|||
|
|
onSelectAnnotation: (id: string) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ZOOM_LEVELS = [1, 2, 4, 8];
|
|||
|
|
const TICK_STEPS = [100, 200, 500, 1_000, 2_000, 5_000, 10_000, 15_000, 30_000, 60_000, 120_000, 300_000, 600_000];
|
|||
|
|
|
|||
|
|
function finite(value: number, fallback = 0) {
|
|||
|
|
return Number.isFinite(value) ? value : fallback;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function timeLabel(ms: number, showMilliseconds = false) {
|
|||
|
|
const bounded = Math.max(0, Math.round(ms));
|
|||
|
|
const minutes = Math.floor(bounded / 60_000);
|
|||
|
|
const seconds = Math.floor((bounded % 60_000) / 1_000);
|
|||
|
|
const fraction = String(bounded % 1_000).padStart(3, "0");
|
|||
|
|
return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}${showMilliseconds ? `.${fraction}` : ""}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function annotationLabel(value: TimelineAnnotation["can_reply_now"], reason?: string) {
|
|||
|
|
return value === "1" ? "可以接话" : value === "0" ? "继续等待" : reason ? "待仲裁" : "待标注";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function Timeline({
|
|||
|
|
durationMs,
|
|||
|
|
currentMs,
|
|||
|
|
decisionMs,
|
|||
|
|
transcripts,
|
|||
|
|
annotations,
|
|||
|
|
selectedId,
|
|||
|
|
waveform,
|
|||
|
|
readOnly = false,
|
|||
|
|
onSeek,
|
|||
|
|
onDecisionChange,
|
|||
|
|
onSelectAnnotation,
|
|||
|
|
}: TimelineProps) {
|
|||
|
|
const helpId = useId();
|
|||
|
|
const rangeId = useId();
|
|||
|
|
const viewportRef = useRef<HTMLDivElement>(null);
|
|||
|
|
const canvasRef = useRef<HTMLDivElement>(null);
|
|||
|
|
const draggingRef = useRef<{ kind: "seek" | "decision"; pointerId: number } | null>(null);
|
|||
|
|
const zoomAnchorRef = useRef<number | null>(null);
|
|||
|
|
const [viewportWidth, setViewportWidth] = useState(800);
|
|||
|
|
const [zoom, setZoom] = useState(1);
|
|||
|
|
|
|||
|
|
const duration = Math.max(
|
|||
|
|
1_000,
|
|||
|
|
finite(durationMs),
|
|||
|
|
...transcripts.map((item) => finite(item.end_ms)),
|
|||
|
|
...annotations.map((item) => finite(item.decision_ms)),
|
|||
|
|
finite(decisionMs ?? 0),
|
|||
|
|
);
|
|||
|
|
const canvasWidth = Math.max(360, viewportWidth) * zoom;
|
|||
|
|
const clamp = (value: number) => Math.round(Math.max(0, Math.min(duration, finite(value))));
|
|||
|
|
const current = clamp(currentMs);
|
|||
|
|
const decision = decisionMs === null ? null : clamp(decisionMs);
|
|||
|
|
const position = (ms: number) => (clamp(ms) / duration) * canvasWidth;
|
|||
|
|
const selectedAnnotation = annotations.find((item) => item.id === selectedId);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const viewport = viewportRef.current;
|
|||
|
|
if (!viewport) return;
|
|||
|
|
const updateSize = () => setViewportWidth(viewport.clientWidth);
|
|||
|
|
updateSize();
|
|||
|
|
const observer = new ResizeObserver(updateSize);
|
|||
|
|
observer.observe(viewport);
|
|||
|
|
return () => observer.disconnect();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (zoomAnchorRef.current === null || !viewportRef.current) return;
|
|||
|
|
viewportRef.current.scrollLeft = zoomAnchorRef.current * canvasWidth - viewportWidth / 2;
|
|||
|
|
zoomAnchorRef.current = null;
|
|||
|
|
}, [canvasWidth, viewportWidth]);
|
|||
|
|
|
|||
|
|
const ticks = useMemo(() => {
|
|||
|
|
const desiredStep = (duration / canvasWidth) * 90;
|
|||
|
|
const step = TICK_STEPS.find((item) => item >= desiredStep) ?? Math.ceil(desiredStep / 600_000) * 600_000;
|
|||
|
|
const result = [];
|
|||
|
|
for (let time = 0; time <= duration; time += step) result.push({ time, label: timeLabel(time, step < 1_000) });
|
|||
|
|
return result;
|
|||
|
|
}, [duration, canvasWidth]);
|
|||
|
|
|
|||
|
|
const waveformPath = useMemo(() => {
|
|||
|
|
if (!waveform?.length) return "";
|
|||
|
|
// Each visible bar is the maximum of a real sample bucket. No generated peaks.
|
|||
|
|
const barCount = Math.min(waveform.length, Math.ceil(canvasWidth / 3), 3_200);
|
|||
|
|
const bucketSize = waveform.length / barCount;
|
|||
|
|
let path = "";
|
|||
|
|
for (let bar = 0; bar < barCount; bar++) {
|
|||
|
|
const start = Math.floor(bar * bucketSize);
|
|||
|
|
const end = Math.min(waveform.length, Math.ceil((bar + 1) * bucketSize));
|
|||
|
|
let peak = 0;
|
|||
|
|
for (let index = start; index < end; index++) peak = Math.max(peak, Math.min(1, Math.abs(finite(waveform[index]))));
|
|||
|
|
const x = ((bar + 0.5) / barCount) * canvasWidth;
|
|||
|
|
const halfHeight = Math.max(0.75, peak * 28);
|
|||
|
|
path += `M${x.toFixed(2)},${(38 - halfHeight).toFixed(2)}v${(halfHeight * 2).toFixed(2)}`;
|
|||
|
|
}
|
|||
|
|
return path;
|
|||
|
|
}, [waveform, canvasWidth]);
|
|||
|
|
|
|||
|
|
function changeZoom(nextZoom: number) {
|
|||
|
|
const viewport = viewportRef.current;
|
|||
|
|
if (viewport) zoomAnchorRef.current = (viewport.scrollLeft + viewport.clientWidth / 2) / canvasWidth;
|
|||
|
|
setZoom(nextZoom);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function locateDecision() {
|
|||
|
|
if (decision === null || !viewportRef.current) return;
|
|||
|
|
viewportRef.current.scrollTo({ left: position(decision) - viewportWidth / 2, behavior: "smooth" });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function pointerTime(event: PointerEvent<HTMLElement>) {
|
|||
|
|
const bounds = canvasRef.current?.getBoundingClientRect();
|
|||
|
|
if (!bounds) return current;
|
|||
|
|
return clamp(((event.clientX - bounds.left) / bounds.width) * duration);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function beginDrag(event: PointerEvent<HTMLElement>, kind: "seek" | "decision") {
|
|||
|
|
if (event.button !== 0 || (kind === "decision" && (decision === null || readOnly))) return;
|
|||
|
|
event.preventDefault();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
event.currentTarget.focus({ preventScroll: true });
|
|||
|
|
event.currentTarget.setPointerCapture(event.pointerId);
|
|||
|
|
draggingRef.current = { kind, pointerId: event.pointerId };
|
|||
|
|
if (kind === "seek") onSeek(pointerTime(event));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function moveDrag(event: PointerEvent<HTMLElement>) {
|
|||
|
|
const drag = draggingRef.current;
|
|||
|
|
if (!drag || drag.pointerId !== event.pointerId) return;
|
|||
|
|
event.stopPropagation();
|
|||
|
|
const ms = pointerTime(event);
|
|||
|
|
if (drag.kind === "seek") onSeek(ms);
|
|||
|
|
else onDecisionChange(ms);
|
|||
|
|
// Keep the pointer near the visible edge usable while a zoomed track scrolls.
|
|||
|
|
const viewport = viewportRef.current;
|
|||
|
|
if (viewport) {
|
|||
|
|
const bounds = viewport.getBoundingClientRect();
|
|||
|
|
if (event.clientX > bounds.right - 24) viewport.scrollLeft += 14;
|
|||
|
|
else if (event.clientX < bounds.left + 24) viewport.scrollLeft -= 14;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function endDrag(event: PointerEvent<HTMLElement>) {
|
|||
|
|
if (draggingRef.current?.pointerId !== event.pointerId) return;
|
|||
|
|
draggingRef.current = null;
|
|||
|
|
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function keyboardMove(event: KeyboardEvent<HTMLElement>, kind: "seek" | "decision") {
|
|||
|
|
if (kind === "decision" && readOnly) return;
|
|||
|
|
const base = kind === "seek" ? current : decision;
|
|||
|
|
if (base === null) return;
|
|||
|
|
const increment = event.shiftKey ? 1_000 : event.altKey ? 10 : 100;
|
|||
|
|
let next: number | null = null;
|
|||
|
|
if (["ArrowLeft", "ArrowDown", "-"].includes(event.key)) next = base - increment;
|
|||
|
|
if (["ArrowRight", "ArrowUp", "+", "="].includes(event.key)) next = base + increment;
|
|||
|
|
if (event.key === "Home") next = 0;
|
|||
|
|
if (event.key === "End") next = duration;
|
|||
|
|
if (next === null) return;
|
|||
|
|
event.preventDefault();
|
|||
|
|
event.stopPropagation();
|
|||
|
|
if (kind === "seek") onSeek(clamp(next));
|
|||
|
|
else onDecisionChange(clamp(next));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const trackStyle = { "--timeline-width": `${canvasWidth}px` } as CSSProperties;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section className={styles.timeline} aria-label="对话时间轴">
|
|||
|
|
<div className={styles.toolbar}>
|
|||
|
|
<div className={styles.toolbarTitle}>
|
|||
|
|
<span className={styles.title}>对话时间轴</span>
|
|||
|
|
<span className={styles.duration}>{timeLabel(duration)} <span>总时长</span></span>
|
|||
|
|
</div>
|
|||
|
|
<div className={styles.tools}>
|
|||
|
|
<button className={styles.locate} type="button" onClick={locateDecision} disabled={decision === null} title="将当前判断点移到视图中央">
|
|||
|
|
<span aria-hidden="true">⌖</span> 定位判断点
|
|||
|
|
</button>
|
|||
|
|
<div className={styles.zoom} aria-label="时间轴缩放">
|
|||
|
|
<button type="button" aria-label="缩小时间轴" disabled={zoom === 1} onClick={() => changeZoom(ZOOM_LEVELS[ZOOM_LEVELS.indexOf(zoom) - 1])}>−</button>
|
|||
|
|
<span aria-live="polite">{zoom}×</span>
|
|||
|
|
<button type="button" aria-label="放大时间轴" disabled={zoom === 8} onClick={() => changeZoom(ZOOM_LEVELS[ZOOM_LEVELS.indexOf(zoom) + 1])}>+</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className={styles.trackLayout}>
|
|||
|
|
<div className={styles.trackNames} aria-hidden="true">
|
|||
|
|
<div className={styles.rulerName}>时间</div>
|
|||
|
|
<div className={styles.waveName}>录音</div>
|
|||
|
|
<div className={styles.speechName}><span className={styles.agentDot} />机器人</div>
|
|||
|
|
<div className={styles.speechName}><span className={styles.userDot} />用户</div>
|
|||
|
|
<div className={styles.markerName}>判断点</div>
|
|||
|
|
</div>
|
|||
|
|
<div className={styles.viewport} ref={viewportRef}>
|
|||
|
|
<div
|
|||
|
|
className={styles.canvas}
|
|||
|
|
style={trackStyle}
|
|||
|
|
ref={canvasRef}
|
|||
|
|
tabIndex={0}
|
|||
|
|
role="group"
|
|||
|
|
aria-label={`播放位置 ${timeLabel(current, true)}：点击或拖动时间轴定位，方向键微调，Home 到开头，End 到结尾`}
|
|||
|
|
onPointerDown={(event) => beginDrag(event, "seek")}
|
|||
|
|
onPointerMove={moveDrag}
|
|||
|
|
onPointerUp={endDrag}
|
|||
|
|
onPointerCancel={endDrag}
|
|||
|
|
onLostPointerCapture={() => { draggingRef.current = null; }}
|
|||
|
|
onKeyDown={(event) => keyboardMove(event, "seek")}
|
|||
|
|
>
|
|||
|
|
<div className={styles.ruler} aria-hidden="true">
|
|||
|
|
{ticks.map((tick) => <span key={tick.time} className={styles.tick} style={{ left: position(tick.time) }}>{tick.label}</span>)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className={styles.waveTrack}>
|
|||
|
|
{waveformPath ? (
|
|||
|
|
<svg className={styles.waveform} viewBox={`0 0 ${canvasWidth} 76`} preserveAspectRatio="none" role="img" aria-label="录音真实振幅波形">
|
|||
|
|
<path d={waveformPath} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
|
|||
|
|
</svg>
|
|||
|
|
) : (
|
|||
|
|
<div className={styles.waveEmpty} style={{ width: viewportWidth }}>
|
|||
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 10v4m4-7v10m4-13v16m4-13v10m4-7v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
|
|||
|
|
<span>载入录音后显示波形</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{(["agent", "user"] as const).map((role) => (
|
|||
|
|
<div className={styles.speechTrack} key={role} aria-label={role === "agent" ? "机器人发言" : "用户发言"}>
|
|||
|
|
{transcripts.filter((item) => item.role === role).map((item, index) => {
|
|||
|
|
const start = position(item.start_ms);
|
|||
|
|
const end = position(item.end_ms);
|
|||
|
|
return <span
|
|||
|
|
key={`${role}-${item.start_ms}-${index}`}
|
|||
|
|
className={`${styles.speechBlock} ${role === "agent" ? styles.agentBlock : styles.userBlock}`}
|
|||
|
|
style={{ left: start, width: Math.max(3, end - start) }}
|
|||
|
|
title={`${role === "agent" ? "机器人" : "用户"} · ${timeLabel(item.start_ms, true)}—${timeLabel(item.end_ms, true)}\n${item.transcript}`}
|
|||
|
|
><span>{item.transcript}</span></span>;
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
|
|||
|
|
<div className={styles.annotationTrack} aria-label="已保存的 EOT 标注">
|
|||
|
|
{annotations.filter((item) => item.id !== selectedId).map((item, index) => (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
key={item.id}
|
|||
|
|
className={`${styles.annotation} ${item.can_reply_now === "1" ? styles.positive : item.can_reply_now === "0" ? styles.negative : styles.pending}`}
|
|||
|
|
style={{ left: position(item.decision_ms) }}
|
|||
|
|
title={`标注 ${index + 1} · ${timeLabel(item.decision_ms, true)} · ${annotationLabel(item.can_reply_now, item.reason)}`}
|
|||
|
|
aria-label={`选择 ${timeLabel(item.decision_ms, true)} 的标注，${annotationLabel(item.can_reply_now, item.reason)}`}
|
|||
|
|
onPointerDown={(event) => event.stopPropagation()}
|
|||
|
|
onClick={(event) => { event.stopPropagation(); onSelectAnnotation(item.id); }}
|
|||
|
|
onKeyDown={(event) => event.stopPropagation()}
|
|||
|
|
><span className={styles.annotationStem} aria-hidden="true" /><span>{item.can_reply_now === "" ? "·" : item.can_reply_now}</span></button>
|
|||
|
|
))}
|
|||
|
|
{decision !== null && <span className={styles.selectedLabel} style={{ left: position(decision) }}>
|
|||
|
|
{selectedAnnotation ? annotationLabel(selectedAnnotation.can_reply_now, selectedAnnotation.reason) : "当前判断"}
|
|||
|
|
</span>}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className={styles.playhead} style={{ left: position(current) }} aria-hidden="true"><span /></div>
|
|||
|
|
|
|||
|
|
{decision !== null && <div className={styles.decisionMarker} style={{ left: position(decision) }}>
|
|||
|
|
<div className={styles.decisionLine} aria-hidden="true" />
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className={styles.decisionHandle}
|
|||
|
|
title={readOnly ? "当前判断时间（查看模式）" : "拖动调整判断时间；方向键微调 100 ms，Shift 微调 1 秒"}
|
|||
|
|
aria-label={`当前判断点 ${timeLabel(decision, true)}${readOnly ? "，查看模式" : "，拖动或使用方向键调整"}`}
|
|||
|
|
aria-describedby={helpId}
|
|||
|
|
aria-disabled={readOnly}
|
|||
|
|
style={readOnly ? { cursor: "default" } : undefined}
|
|||
|
|
onPointerDown={(event) => { event.stopPropagation(); if (!readOnly) beginDrag(event, "decision"); }}
|
|||
|
|
onPointerMove={moveDrag}
|
|||
|
|
onPointerUp={endDrag}
|
|||
|
|
onPointerCancel={endDrag}
|
|||
|
|
onLostPointerCapture={(event) => { event.stopPropagation(); draggingRef.current = null; }}
|
|||
|
|
onKeyDown={(event) => { event.stopPropagation(); keyboardMove(event, "decision"); }}
|
|||
|
|
><span aria-hidden="true" /></button>
|
|||
|
|
</div>}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className={styles.bottomBar}>
|
|||
|
|
<div className={styles.timeReadout}><span className={styles.playheadDot} /> 播放 <strong>{timeLabel(current, true)}</strong></div>
|
|||
|
|
<span id={helpId} className={styles.help}>{readOnly ? "点击定位播放 · 选择标记查看详情" : "点击定位播放 · 拖动橙色标记调整判断点"}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className={styles.decisionControls}>
|
|||
|
|
<label htmlFor={rangeId}><span className={styles.decisionDot} />判断时间</label>
|
|||
|
|
<input
|
|||
|
|
id={rangeId}
|
|||
|
|
type="range"
|
|||
|
|
min={0}
|
|||
|
|
max={duration}
|
|||
|
|
step={1}
|
|||
|
|
value={decision ?? 0}
|
|||
|
|
disabled={decision === null || readOnly}
|
|||
|
|
aria-valuetext={decision === null ? "未选择判断点" : timeLabel(decision, true)}
|
|||
|
|
onChange={(event) => onDecisionChange(clamp(Number(event.currentTarget.value)))}
|
|||
|
|
/>
|
|||
|
|
<label className={styles.numberInput}>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
aria-label="判断时间，单位毫秒"
|
|||
|
|
min={0}
|
|||
|
|
max={duration}
|
|||
|
|
step={1}
|
|||
|
|
value={decision ?? ""}
|
|||
|
|
placeholder="—"
|
|||
|
|
disabled={decision === null || readOnly}
|
|||
|
|
onChange={(event) => { if (event.currentTarget.value !== "") onDecisionChange(clamp(Number(event.currentTarget.value))); }}
|
|||
|
|
/>
|
|||
|
|
<span>ms</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|