634 lines
24 KiB
TypeScript
634 lines
24 KiB
TypeScript
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|||
|
|
import {
|
|||
|
|
Alert,
|
|||
|
|
Badge,
|
|||
|
|
Button,
|
|||
|
|
Card,
|
|||
|
|
Col,
|
|||
|
|
Empty,
|
|||
|
|
Row,
|
|||
|
|
Space,
|
|||
|
|
Statistic,
|
|||
|
|
Tag,
|
|||
|
|
Typography,
|
|||
|
|
message,
|
|||
|
|
} from "antd";
|
|||
|
|
import {
|
|||
|
|
AudioOutlined,
|
|||
|
|
ClockCircleOutlined,
|
|||
|
|
PauseCircleOutlined,
|
|||
|
|
PlayCircleOutlined,
|
|||
|
|
SoundOutlined,
|
|||
|
|
SyncOutlined,
|
|||
|
|
} from "@ant-design/icons";
|
|||
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|||
|
|
import dayjs from "dayjs";
|
|||
|
|
import PageHeader from "../../components/shared/PageHeader";
|
|||
|
|
import {
|
|||
|
|
appendRealtimeTranscripts,
|
|||
|
|
completeRealtimeMeeting,
|
|||
|
|
getMeetingDetail,
|
|||
|
|
getTranscripts,
|
|||
|
|
uploadAudio,
|
|||
|
|
type MeetingTranscriptVO,
|
|||
|
|
type MeetingVO,
|
|||
|
|
type RealtimeTranscriptItemDTO,
|
|||
|
|
} from "../../api/business/meeting";
|
|||
|
|
|
|||
|
|
const { Text, Title } = Typography;
|
|||
|
|
const SAMPLE_RATE = 16000;
|
|||
|
|
const CHUNK_SIZE = 1280;
|
|||
|
|
|
|||
|
|
type WsSpeaker = string | { name?: string; user_id?: string | number } | undefined;
|
|||
|
|
type WsMessage = {
|
|||
|
|
text?: string;
|
|||
|
|
is_final?: boolean;
|
|||
|
|
speaker?: WsSpeaker;
|
|||
|
|
timestamp?: number[][];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
type TranscriptCard = {
|
|||
|
|
id: string;
|
|||
|
|
speakerName: string;
|
|||
|
|
userId?: string | number;
|
|||
|
|
text: string;
|
|||
|
|
startTime?: number;
|
|||
|
|
endTime?: number;
|
|||
|
|
final: boolean;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
type RealtimeMeetingSessionDraft = {
|
|||
|
|
meetingId: number;
|
|||
|
|
meetingTitle: string;
|
|||
|
|
asrModelName: string;
|
|||
|
|
summaryModelName: string;
|
|||
|
|
wsUrl: string;
|
|||
|
|
mode: string;
|
|||
|
|
useSpkId: number;
|
|||
|
|
hotwords: Array<{ hotword: string; weight: number }>;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function getSessionKey(meetingId: number) {
|
|||
|
|
return `realtimeMeetingSession:${meetingId}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function buildWavBlob(samples: number[], sampleRate: number) {
|
|||
|
|
const pcmBuffer = new ArrayBuffer(samples.length * 2);
|
|||
|
|
const pcmView = new DataView(pcmBuffer);
|
|||
|
|
for (let i = 0; i < samples.length; i += 1) {
|
|||
|
|
const value = Math.max(-1, Math.min(1, samples[i]));
|
|||
|
|
pcmView.setInt16(i * 2, value < 0 ? value * 0x8000 : value * 0x7fff, true);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const wavBuffer = new ArrayBuffer(44 + pcmBuffer.byteLength);
|
|||
|
|
const wavView = new DataView(wavBuffer);
|
|||
|
|
const writeString = (offset: number, text: string) => {
|
|||
|
|
for (let i = 0; i < text.length; i += 1) {
|
|||
|
|
wavView.setUint8(offset + i, text.charCodeAt(i));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
writeString(0, "RIFF");
|
|||
|
|
wavView.setUint32(4, 36 + pcmBuffer.byteLength, true);
|
|||
|
|
writeString(8, "WAVE");
|
|||
|
|
writeString(12, "fmt ");
|
|||
|
|
wavView.setUint32(16, 16, true);
|
|||
|
|
wavView.setUint16(20, 1, true);
|
|||
|
|
wavView.setUint16(22, 1, true);
|
|||
|
|
wavView.setUint32(24, sampleRate, true);
|
|||
|
|
wavView.setUint32(28, sampleRate * 2, true);
|
|||
|
|
wavView.setUint16(32, 2, true);
|
|||
|
|
wavView.setUint16(34, 16, true);
|
|||
|
|
writeString(36, "data");
|
|||
|
|
wavView.setUint32(40, pcmBuffer.byteLength, true);
|
|||
|
|
new Uint8Array(wavBuffer, 44).set(new Uint8Array(pcmBuffer));
|
|||
|
|
|
|||
|
|
return new Blob([wavBuffer], { type: "audio/wav" });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function floatTo16BitPCM(input: Float32Array) {
|
|||
|
|
const buffer = new ArrayBuffer(input.length * 2);
|
|||
|
|
const view = new DataView(buffer);
|
|||
|
|
for (let i = 0; i < input.length; i += 1) {
|
|||
|
|
const value = Math.max(-1, Math.min(1, input[i]));
|
|||
|
|
view.setInt16(i * 2, value < 0 ? value * 0x8000 : value * 0x7fff, true);
|
|||
|
|
}
|
|||
|
|
return buffer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function resolveSpeaker(speaker?: WsSpeaker) {
|
|||
|
|
if (!speaker) {
|
|||
|
|
return { speakerId: "spk_0", speakerName: "Unknown", userId: undefined };
|
|||
|
|
}
|
|||
|
|
if (typeof speaker === "string") {
|
|||
|
|
return { speakerId: speaker, speakerName: speaker, userId: undefined };
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
speakerId: speaker.user_id ? String(speaker.user_id) : "spk_0",
|
|||
|
|
speakerName: speaker.name || (speaker.user_id ? String(speaker.user_id) : "Unknown"),
|
|||
|
|
userId: speaker.user_id,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatClock(totalSeconds: number) {
|
|||
|
|
const hours = Math.floor(totalSeconds / 3600);
|
|||
|
|
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
|||
|
|
const seconds = totalSeconds % 60;
|
|||
|
|
if (hours > 0) {
|
|||
|
|
return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
|
|||
|
|
}
|
|||
|
|
return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatTranscriptTime(ms?: number) {
|
|||
|
|
if (ms === undefined || ms === null) {
|
|||
|
|
return "--:--";
|
|||
|
|
}
|
|||
|
|
const totalSeconds = Math.floor(ms / 1000);
|
|||
|
|
const minutes = Math.floor(totalSeconds / 60);
|
|||
|
|
const seconds = totalSeconds % 60;
|
|||
|
|
return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function RealtimeAsrSession() {
|
|||
|
|
const navigate = useNavigate();
|
|||
|
|
const { id } = useParams<{ id: string }>();
|
|||
|
|
const meetingId = Number(id);
|
|||
|
|
|
|||
|
|
const [meeting, setMeeting] = useState<MeetingVO | null>(null);
|
|||
|
|
const [sessionDraft, setSessionDraft] = useState<RealtimeMeetingSessionDraft | null>(null);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [recording, setRecording] = useState(false);
|
|||
|
|
const [connecting, setConnecting] = useState(false);
|
|||
|
|
const [finishing, setFinishing] = useState(false);
|
|||
|
|
const [statusText, setStatusText] = useState("待开始");
|
|||
|
|
const [streamingText, setStreamingText] = useState("");
|
|||
|
|
const [streamingSpeaker, setStreamingSpeaker] = useState("Unknown");
|
|||
|
|
const [transcripts, setTranscripts] = useState<TranscriptCard[]>([]);
|
|||
|
|
const [audioLevel, setAudioLevel] = useState(0);
|
|||
|
|
const [elapsedSeconds, setElapsedSeconds] = useState(0);
|
|||
|
|
|
|||
|
|
const transcriptRef = useRef<HTMLDivElement | null>(null);
|
|||
|
|
const wsRef = useRef<WebSocket | null>(null);
|
|||
|
|
const audioContextRef = useRef<AudioContext | null>(null);
|
|||
|
|
const processorRef = useRef<ScriptProcessorNode | null>(null);
|
|||
|
|
const audioSourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
|
|||
|
|
const streamRef = useRef<MediaStream | null>(null);
|
|||
|
|
const audioBufferRef = useRef<number[]>([]);
|
|||
|
|
const recordedSamplesRef = useRef<number[]>([]);
|
|||
|
|
const completeOnceRef = useRef(false);
|
|||
|
|
const startedAtRef = useRef<number | null>(null);
|
|||
|
|
|
|||
|
|
const finalTranscriptCount = transcripts.length;
|
|||
|
|
const totalTranscriptChars = useMemo(
|
|||
|
|
() => transcripts.reduce((sum, item) => sum + item.text.length, 0) + streamingText.length,
|
|||
|
|
[streamingText, transcripts],
|
|||
|
|
);
|
|||
|
|
const statusColor = recording ? "#1677ff" : connecting || finishing ? "#faad14" : "#94a3b8";
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!meetingId || Number.isNaN(meetingId)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const loadData = async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const stored = sessionStorage.getItem(getSessionKey(meetingId));
|
|||
|
|
setSessionDraft(stored ? JSON.parse(stored) : null);
|
|||
|
|
|
|||
|
|
const [detailRes, transcriptRes] = await Promise.all([getMeetingDetail(meetingId), getTranscripts(meetingId)]);
|
|||
|
|
setMeeting(detailRes.data.data);
|
|||
|
|
setTranscripts(
|
|||
|
|
(transcriptRes.data.data || []).map((item: MeetingTranscriptVO) => ({
|
|||
|
|
id: String(item.id),
|
|||
|
|
speakerName: item.speakerName || item.speakerId || "发言人",
|
|||
|
|
text: item.content,
|
|||
|
|
startTime: item.startTime,
|
|||
|
|
endTime: item.endTime,
|
|||
|
|
final: true,
|
|||
|
|
})),
|
|||
|
|
);
|
|||
|
|
} catch {
|
|||
|
|
message.error("加载实时会议失败");
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
void loadData();
|
|||
|
|
}, [meetingId]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!recording) {
|
|||
|
|
setElapsedSeconds(0);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const timer = window.setInterval(() => {
|
|||
|
|
if (startedAtRef.current) {
|
|||
|
|
setElapsedSeconds(Math.floor((Date.now() - startedAtRef.current) / 1000));
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
return () => window.clearInterval(timer);
|
|||
|
|
}, [recording]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!transcriptRef.current) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
transcriptRef.current.scrollTop = transcriptRef.current.scrollHeight;
|
|||
|
|
}, [streamingText, transcripts]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const handlePageHide = () => {
|
|||
|
|
if (!meetingId || completeOnceRef.current) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const token = localStorage.getItem("accessToken");
|
|||
|
|
completeOnceRef.current = true;
|
|||
|
|
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
|||
|
|
wsRef.current.send(JSON.stringify({ is_speaking: false }));
|
|||
|
|
}
|
|||
|
|
fetch(`/api/biz/meeting/${meetingId}/realtime/complete`, {
|
|||
|
|
method: "POST",
|
|||
|
|
keepalive: true,
|
|||
|
|
headers: {
|
|||
|
|
"Content-Type": "application/json",
|
|||
|
|
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({}),
|
|||
|
|
}).catch(() => undefined);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
window.addEventListener("pagehide", handlePageHide);
|
|||
|
|
return () => window.removeEventListener("pagehide", handlePageHide);
|
|||
|
|
}, [meetingId]);
|
|||
|
|
|
|||
|
|
const shutdownAudioPipeline = async () => {
|
|||
|
|
processorRef.current?.disconnect();
|
|||
|
|
audioSourceRef.current?.disconnect();
|
|||
|
|
if (streamRef.current) {
|
|||
|
|
streamRef.current.getTracks().forEach((track) => track.stop());
|
|||
|
|
}
|
|||
|
|
if (audioContextRef.current && audioContextRef.current.state !== "closed") {
|
|||
|
|
await audioContextRef.current.close();
|
|||
|
|
}
|
|||
|
|
streamRef.current = null;
|
|||
|
|
processorRef.current = null;
|
|||
|
|
audioSourceRef.current = null;
|
|||
|
|
audioContextRef.current = null;
|
|||
|
|
audioBufferRef.current = [];
|
|||
|
|
const recordedSamples = recordedSamplesRef.current;
|
|||
|
|
recordedSamplesRef.current = [];
|
|||
|
|
setAudioLevel(0);
|
|||
|
|
return recordedSamples.length > 0 ? buildWavBlob(recordedSamples, SAMPLE_RATE) : null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const startAudioPipeline = async () => {
|
|||
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|||
|
|
audio: {
|
|||
|
|
channelCount: 1,
|
|||
|
|
echoCancellation: true,
|
|||
|
|
noiseSuppression: true,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
const audioContext = new AudioContext({ sampleRate: SAMPLE_RATE });
|
|||
|
|
const source = audioContext.createMediaStreamSource(stream);
|
|||
|
|
const processor = audioContext.createScriptProcessor(4096, 1, 1);
|
|||
|
|
|
|||
|
|
streamRef.current = stream;
|
|||
|
|
audioContextRef.current = audioContext;
|
|||
|
|
audioSourceRef.current = source;
|
|||
|
|
processorRef.current = processor;
|
|||
|
|
recordedSamplesRef.current = [];
|
|||
|
|
|
|||
|
|
processor.onaudioprocess = (event) => {
|
|||
|
|
const input = event.inputBuffer.getChannelData(0);
|
|||
|
|
let maxAmplitude = 0;
|
|||
|
|
for (let i = 0; i < input.length; i += 1) {
|
|||
|
|
const amplitude = Math.abs(input[i]);
|
|||
|
|
if (amplitude > maxAmplitude) {
|
|||
|
|
maxAmplitude = amplitude;
|
|||
|
|
}
|
|||
|
|
audioBufferRef.current.push(input[i]);
|
|||
|
|
recordedSamplesRef.current.push(input[i]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setAudioLevel(Math.min(100, Math.round(maxAmplitude * 180)));
|
|||
|
|
|
|||
|
|
while (audioBufferRef.current.length >= CHUNK_SIZE) {
|
|||
|
|
const chunk = audioBufferRef.current.slice(0, CHUNK_SIZE);
|
|||
|
|
audioBufferRef.current = audioBufferRef.current.slice(CHUNK_SIZE);
|
|||
|
|
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
|||
|
|
wsRef.current.send(floatTo16BitPCM(new Float32Array(chunk)));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
source.connect(processor);
|
|||
|
|
processor.connect(audioContext.destination);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const saveFinalTranscript = async (msg: WsMessage) => {
|
|||
|
|
if (!msg.text || !meetingId) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const speaker = resolveSpeaker(msg.speaker);
|
|||
|
|
const item: RealtimeTranscriptItemDTO = {
|
|||
|
|
speakerId: speaker.speakerId,
|
|||
|
|
speakerName: speaker.speakerName,
|
|||
|
|
content: msg.text,
|
|||
|
|
startTime: msg.timestamp?.[0]?.[0],
|
|||
|
|
endTime: msg.timestamp?.[msg.timestamp.length - 1]?.[1],
|
|||
|
|
};
|
|||
|
|
await appendRealtimeTranscripts(meetingId, [item]);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleStart = async () => {
|
|||
|
|
if (!sessionDraft?.wsUrl) {
|
|||
|
|
message.error("未找到实时识别配置，请返回创建页重新进入");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (recording || connecting) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setConnecting(true);
|
|||
|
|
setStatusText("连接识别服务...");
|
|||
|
|
try {
|
|||
|
|
const socket = new WebSocket(sessionDraft.wsUrl);
|
|||
|
|
socket.binaryType = "arraybuffer";
|
|||
|
|
wsRef.current = socket;
|
|||
|
|
|
|||
|
|
socket.onopen = async () => {
|
|||
|
|
socket.send(JSON.stringify({
|
|||
|
|
mode: sessionDraft.mode || "2pass",
|
|||
|
|
chunk_size: [0, 8, 4],
|
|||
|
|
chunk_interval: 4,
|
|||
|
|
wav_name: `meeting_${meetingId}`,
|
|||
|
|
is_speaking: true,
|
|||
|
|
speaker_name: null,
|
|||
|
|
use_spk_id: sessionDraft.useSpkId,
|
|||
|
|
save_audio: false,
|
|||
|
|
hotwords: sessionDraft.hotwords,
|
|||
|
|
}));
|
|||
|
|
await startAudioPipeline();
|
|||
|
|
startedAtRef.current = Date.now();
|
|||
|
|
setConnecting(false);
|
|||
|
|
setRecording(true);
|
|||
|
|
setStatusText("实时识别中");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
socket.onmessage = (event) => {
|
|||
|
|
try {
|
|||
|
|
const payload = JSON.parse(event.data) as WsMessage;
|
|||
|
|
if (!payload.text) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const speaker = resolveSpeaker(payload.speaker);
|
|||
|
|
if (payload.is_final) {
|
|||
|
|
setTranscripts((prev) => [
|
|||
|
|
...prev,
|
|||
|
|
{
|
|||
|
|
id: `${Date.now()}-${Math.random()}`,
|
|||
|
|
speakerName: speaker.speakerName,
|
|||
|
|
userId: speaker.userId,
|
|||
|
|
text: payload.text,
|
|||
|
|
startTime: payload.timestamp?.[0]?.[0],
|
|||
|
|
endTime: payload.timestamp?.[payload.timestamp.length - 1]?.[1],
|
|||
|
|
final: true,
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
setStreamingText("");
|
|||
|
|
setStreamingSpeaker("Unknown");
|
|||
|
|
void saveFinalTranscript(payload);
|
|||
|
|
} else {
|
|||
|
|
setStreamingText(payload.text);
|
|||
|
|
setStreamingSpeaker(speaker.speakerName);
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
// ignore invalid payload
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
socket.onerror = () => {
|
|||
|
|
setConnecting(false);
|
|||
|
|
setRecording(false);
|
|||
|
|
setStatusText("连接失败");
|
|||
|
|
message.error("实时识别 WebSocket 连接失败");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
socket.onclose = () => {
|
|||
|
|
setConnecting(false);
|
|||
|
|
setRecording(false);
|
|||
|
|
};
|
|||
|
|
} catch {
|
|||
|
|
setConnecting(false);
|
|||
|
|
setStatusText("启动失败");
|
|||
|
|
message.error("启动实时识别失败");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleStop = async (navigateAfterStop = true) => {
|
|||
|
|
if (!meetingId || completeOnceRef.current) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
completeOnceRef.current = true;
|
|||
|
|
setFinishing(true);
|
|||
|
|
setStatusText("结束会议中...");
|
|||
|
|
|
|||
|
|
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
|||
|
|
wsRef.current.send(JSON.stringify({ is_speaking: false }));
|
|||
|
|
}
|
|||
|
|
wsRef.current?.close();
|
|||
|
|
wsRef.current = null;
|
|||
|
|
|
|||
|
|
const audioBlob = await shutdownAudioPipeline();
|
|||
|
|
let uploadedAudioUrl: string | undefined;
|
|||
|
|
if (audioBlob) {
|
|||
|
|
try {
|
|||
|
|
const file = new File([audioBlob], `meeting-${meetingId}.wav`, { type: audioBlob.type || "audio/wav" });
|
|||
|
|
const uploadRes = await uploadAudio(file);
|
|||
|
|
uploadedAudioUrl = uploadRes.data.data;
|
|||
|
|
} catch {
|
|||
|
|
message.warning("会议音频上传失败，已保留转录内容");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await completeRealtimeMeeting(meetingId, uploadedAudioUrl ? { audioUrl: uploadedAudioUrl } : {});
|
|||
|
|
sessionStorage.removeItem(getSessionKey(meetingId));
|
|||
|
|
setStatusText("已提交总结任务");
|
|||
|
|
message.success("实时会议已结束，正在生成总结");
|
|||
|
|
if (navigateAfterStop) {
|
|||
|
|
navigate(`/meetings/${meetingId}`);
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
completeOnceRef.current = false;
|
|||
|
|
setStatusText("结束失败");
|
|||
|
|
} finally {
|
|||
|
|
setRecording(false);
|
|||
|
|
setFinishing(false);
|
|||
|
|
startedAtRef.current = null;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ padding: 24 }}>
|
|||
|
|
<Card bordered={false} style={{ borderRadius: 18 }}>
|
|||
|
|
<div style={{ textAlign: "center", padding: "96px 0" }}>
|
|||
|
|
<SyncOutlined spin />
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!meeting) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ padding: 24 }}>
|
|||
|
|
<Card bordered={false} style={{ borderRadius: 18 }}>
|
|||
|
|
<Empty description="会议不存在" />
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
|||
|
|
<PageHeader
|
|||
|
|
title={meeting.title || "实时识别中"}
|
|||
|
|
subtitle={`会议编号 #${meeting.id} · ${dayjs(meeting.meetingTime).format("YYYY-MM-DD HH:mm")}`}
|
|||
|
|
extra={<Badge color={statusColor} text={statusText} />}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
|
|||
|
|
{!sessionDraft ? (
|
|||
|
|
<Card bordered={false} style={{ borderRadius: 18 }}>
|
|||
|
|
<Alert
|
|||
|
|
type="warning"
|
|||
|
|
showIcon
|
|||
|
|
message="缺少实时识别启动配置"
|
|||
|
|
description="这个会议的实时会中配置没有保存在当前浏览器中，请返回创建页重新进入。"
|
|||
|
|
action={<Button size="small" onClick={() => navigate("/meeting-live-create")}>返回创建页</Button>}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
) : (
|
|||
|
|
<Row gutter={16} style={{ height: "100%" }}>
|
|||
|
|
<Col xs={24} xl={7} style={{ height: "100%" }}>
|
|||
|
|
<Card
|
|||
|
|
bordered={false}
|
|||
|
|
style={{ height: "100%", borderRadius: 18, boxShadow: "0 8px 22px rgba(15,23,42,0.05)" }}
|
|||
|
|
bodyStyle={{ height: "100%", padding: 16, display: "flex", flexDirection: "column" }}
|
|||
|
|
>
|
|||
|
|
<Space direction="vertical" size={16} style={{ width: "100%" }}>
|
|||
|
|
<div style={{ padding: 14, borderRadius: 16, background: "linear-gradient(135deg, #0f172a 0%, #1e40af 60%, #60a5fa 100%)", color: "#fff" }}>
|
|||
|
|
<Space direction="vertical" size={8}>
|
|||
|
|
<Tag color="blue" style={{ width: "fit-content", margin: 0 }}>LIVE SESSION</Tag>
|
|||
|
|
<Title level={4} style={{ color: "#fff", margin: 0 }}>会中实时识别</Title>
|
|||
|
|
<Text style={{ color: "rgba(255,255,255,0.82)" }}>会中页只保留控制区和实时转写流。</Text>
|
|||
|
|
</Space>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Space style={{ width: "100%" }}>
|
|||
|
|
<Button type="primary" icon={<PlayCircleOutlined />} disabled={recording || connecting || finishing} loading={connecting} onClick={() => void handleStart()} style={{ flex: 1, height: 42 }}>
|
|||
|
|
开始识别
|
|||
|
|
</Button>
|
|||
|
|
<Button danger icon={<PauseCircleOutlined />} disabled={(!recording && !connecting) || finishing} loading={finishing} onClick={() => void handleStop(true)} style={{ flex: 1, height: 42 }}>
|
|||
|
|
结束会议
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
|
|||
|
|
<Row gutter={[12, 12]}>
|
|||
|
|
<Col span={12}><Statistic title="已识别片段" value={finalTranscriptCount} /></Col>
|
|||
|
|
<Col span={12}><Statistic title="实时字数" value={totalTranscriptChars} /></Col>
|
|||
|
|
<Col span={12}><Statistic title="已录时长" value={formatClock(elapsedSeconds)} prefix={<ClockCircleOutlined />} /></Col>
|
|||
|
|
<Col span={12}><Statistic title="说话人区分" value={sessionDraft.useSpkId ? "开启" : "关闭"} /></Col>
|
|||
|
|
</Row>
|
|||
|
|
</Space>
|
|||
|
|
<div style={{ marginTop: 12, padding: 14, borderRadius: 14, background: "#fafcff", border: "1px solid #edf2ff" }}>
|
|||
|
|
<Space direction="vertical" size={10} style={{ width: "100%" }}>
|
|||
|
|
<div style={{ display: "flex", justifyContent: "space-between" }}><Text type="secondary">ASR 模型</Text><Text strong>{sessionDraft.asrModelName}</Text></div>
|
|||
|
|
<div style={{ display: "flex", justifyContent: "space-between" }}><Text type="secondary">总结模型</Text><Text strong>{sessionDraft.summaryModelName}</Text></div>
|
|||
|
|
<div style={{ display: "flex", justifyContent: "space-between" }}><Text type="secondary">识别模式</Text><Text strong>{sessionDraft.mode}</Text></div>
|
|||
|
|
<div style={{ display: "flex", justifyContent: "space-between" }}><Text type="secondary">热词数量</Text><Text strong>{sessionDraft.hotwords.length}</Text></div>
|
|||
|
|
<div>
|
|||
|
|
<Text type="secondary">麦克风输入</Text>
|
|||
|
|
<div style={{ marginTop: 8, height: 10, borderRadius: 999, background: "#e2e8f0", overflow: "hidden" }}>
|
|||
|
|
<div style={{ width: `${audioLevel}%`, height: "100%", background: "linear-gradient(90deg, #38bdf8, #2563eb)" }} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Space>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ marginTop: "auto" }}>
|
|||
|
|
<Alert type="info" showIcon message="异常关闭保护" description="最终转录会实时写入会议；页面关闭时会自动尝试结束会议并触发总结，避免会中内容整体丢失。" />
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
|
|||
|
|
<Col xs={24} xl={17} style={{ height: "100%" }}>
|
|||
|
|
<Card bordered={false} style={{ borderRadius: 18, boxShadow: "0 8px 22px rgba(15,23,42,0.05)", height: "100%" }} bodyStyle={{ padding: 0, height: "100%", display: "flex", flexDirection: "column" }}>
|
|||
|
|
<div style={{ padding: "16px 20px", borderBottom: "1px solid #f0f0f0", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexShrink: 0 }}>
|
|||
|
|
<div>
|
|||
|
|
<Title level={4} style={{ margin: 0 }}>实时转写流</Title>
|
|||
|
|
<Text type="secondary">优先展示最终片段，流式草稿保留在底部作为当前正在识别的内容。</Text>
|
|||
|
|
</div>
|
|||
|
|
<Space wrap>
|
|||
|
|
<Tag icon={<SoundOutlined />} color={recording ? "processing" : "default"}>{recording ? "采集中" : connecting ? "连接中" : "待命"}</Tag>
|
|||
|
|
<Tag color="blue">{sessionDraft.asrModelName}</Tag>
|
|||
|
|
</Space>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div ref={transcriptRef} style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: 18, background: "linear-gradient(180deg, #f8fafc 0%, #ffffff 65%, #f8fafc 100%)" }}>
|
|||
|
|
{transcripts.length === 0 && !streamingText ? (
|
|||
|
|
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
|||
|
|
<Empty description="会议已创建，点击左侧开始识别即可进入转写" />
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<Space direction="vertical" size={12} style={{ width: "100%" }}>
|
|||
|
|
{transcripts.map((item) => (
|
|||
|
|
<div key={item.id} style={{ padding: 16, borderRadius: 16, background: "#fff", boxShadow: "0 6px 18px rgba(15,23,42,0.05)", display: "grid", gridTemplateColumns: "46px 1fr", gap: 14 }}>
|
|||
|
|
<div style={{ width: 46, height: 46, borderRadius: "50%", background: "#e6f4ff", color: "#1677ff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, flexShrink: 0 }}>
|
|||
|
|
{item.speakerName.slice(0, 1).toUpperCase()}
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<Space wrap size={[8, 8]} style={{ marginBottom: 6 }}>
|
|||
|
|
<Text strong>{item.speakerName}</Text>
|
|||
|
|
{item.userId ? <Tag color="blue">UID: {item.userId}</Tag> : null}
|
|||
|
|
<Tag icon={<ClockCircleOutlined />}>{formatTranscriptTime(item.startTime)} - {formatTranscriptTime(item.endTime)}</Tag>
|
|||
|
|
</Space>
|
|||
|
|
<div style={{ color: "#1f2937", lineHeight: 1.8 }}>{item.text}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
|
|||
|
|
{streamingText ? (
|
|||
|
|
<div style={{ padding: 16, borderRadius: 16, background: "linear-gradient(135deg, rgba(230,244,255,0.9), rgba(245,250,255,0.96))", border: "1px solid #b7d8ff", display: "grid", gridTemplateColumns: "46px 1fr", gap: 14 }}>
|
|||
|
|
<div style={{ width: 46, height: 46, borderRadius: "50%", background: "#1677ff", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700 }}>
|
|||
|
|
{streamingSpeaker.slice(0, 1).toUpperCase()}
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<Space wrap size={[8, 8]} style={{ marginBottom: 6 }}>
|
|||
|
|
<Text strong>{streamingSpeaker}</Text>
|
|||
|
|
<Tag color="processing">流式草稿</Tag>
|
|||
|
|
</Space>
|
|||
|
|
<div style={{ color: "#334155", lineHeight: 1.8 }}>{streamingText}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
</Space>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|