2026-06-12 17:46:25 +08:00
|
|
|
|
// ============================================================
|
2026-06-13 16:16:37 +08:00
|
|
|
|
// CamTalk — 主应用组件（Web 端双栏布局）
|
2026-06-12 17:46:25 +08:00
|
|
|
|
// ============================================================
|
|
|
|
|
|
|
2026-06-13 19:01:33 +08:00
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
2026-06-12 17:46:25 +08:00
|
|
|
|
import { useVisionSession } from "./hooks/useVisionSession";
|
|
|
|
|
|
import { VideoPreview } from "./components/VideoPreview";
|
|
|
|
|
|
import { ChatPanel } from "./components/ChatPanel";
|
2026-06-13 14:19:47 +08:00
|
|
|
|
import { ConfigPanel } from "./components/ConfigPanel";
|
2026-06-13 11:43:16 +08:00
|
|
|
|
import { ToastContainer } from "./components/Toast";
|
2026-06-13 17:08:56 +08:00
|
|
|
|
import { loadTheme, saveTheme } from "./lib/storage";
|
|
|
|
|
|
import type { Theme } from "./types";
|
2026-06-12 17:46:25 +08:00
|
|
|
|
import "./App.css";
|
|
|
|
|
|
|
|
|
|
|
|
function App() {
|
2026-06-13 14:19:47 +08:00
|
|
|
|
const [showConfig, setShowConfig] = useState(false);
|
2026-06-13 17:08:56 +08:00
|
|
|
|
const [theme, setTheme] = useState<Theme>(loadTheme);
|
2026-06-13 19:01:33 +08:00
|
|
|
|
const [elapsed, setElapsed] = useState(0);
|
|
|
|
|
|
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
2026-06-13 17:08:56 +08:00
|
|
|
|
|
|
|
|
|
|
// 切换主题时更新 <html> 的 data-theme 属性
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
|
|
|
|
}, [theme]);
|
|
|
|
|
|
|
|
|
|
|
|
const handleThemeChange = useCallback((t: Theme) => {
|
|
|
|
|
|
setTheme(t);
|
|
|
|
|
|
saveTheme(t);
|
|
|
|
|
|
}, []);
|
2026-06-13 14:19:47 +08:00
|
|
|
|
|
2026-06-13 19:01:33 +08:00
|
|
|
|
const formatTime = (s: number) => {
|
|
|
|
|
|
const m = Math.floor(s / 60);
|
|
|
|
|
|
const sec = s % 60;
|
|
|
|
|
|
return `${m.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
|
|
|
|
|
|
};
|
|
|
|
|
|
|
2026-06-12 17:46:25 +08:00
|
|
|
|
const {
|
|
|
|
|
|
messages,
|
|
|
|
|
|
currentReply,
|
|
|
|
|
|
isProcessing,
|
2026-06-13 13:57:36 +08:00
|
|
|
|
isAudioPlaying,
|
2026-06-12 17:46:25 +08:00
|
|
|
|
isSpeaking,
|
2026-06-13 11:10:29 +08:00
|
|
|
|
isVADReady,
|
|
|
|
|
|
vadError,
|
2026-06-12 17:46:25 +08:00
|
|
|
|
connectionStatus,
|
|
|
|
|
|
videoRef,
|
|
|
|
|
|
stream,
|
2026-06-13 14:19:47 +08:00
|
|
|
|
config,
|
|
|
|
|
|
updateConfig,
|
2026-06-13 14:38:15 +08:00
|
|
|
|
stats,
|
2026-06-13 14:46:42 +08:00
|
|
|
|
mode,
|
|
|
|
|
|
isObserving,
|
|
|
|
|
|
toggleMode,
|
2026-06-12 17:46:25 +08:00
|
|
|
|
startSession,
|
|
|
|
|
|
stopSession,
|
|
|
|
|
|
interrupt,
|
2026-06-13 20:01:37 +08:00
|
|
|
|
isCameraOn,
|
|
|
|
|
|
isMicOn,
|
|
|
|
|
|
toggleCamera,
|
|
|
|
|
|
toggleMic,
|
2026-06-12 17:46:25 +08:00
|
|
|
|
} = useVisionSession();
|
|
|
|
|
|
|
2026-06-13 11:10:29 +08:00
|
|
|
|
const isConnected = connectionStatus === "connected";
|
|
|
|
|
|
|
2026-06-13 19:01:33 +08:00
|
|
|
|
// 连接计时器
|
|
|
|
|
|
const elapsedRef = useRef(0);
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
if (isConnected) {
|
|
|
|
|
|
elapsedRef.current = 0;
|
|
|
|
|
|
setElapsed(0); // eslint-disable-line react-hooks/set-state-in-effect -- 连接时重置计时器
|
|
|
|
|
|
}
|
|
|
|
|
|
}, [isConnected]);
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
if (!isConnected) {
|
|
|
|
|
|
if (timerRef.current) {
|
|
|
|
|
|
clearInterval(timerRef.current);
|
|
|
|
|
|
timerRef.current = null;
|
|
|
|
|
|
}
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
const id = setInterval(() => {
|
|
|
|
|
|
elapsedRef.current += 1;
|
|
|
|
|
|
setElapsed(elapsedRef.current);
|
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
timerRef.current = id;
|
|
|
|
|
|
return () => clearInterval(id);
|
|
|
|
|
|
}, [isConnected]);
|
|
|
|
|
|
|
2026-06-12 17:46:25 +08:00
|
|
|
|
return (
|
|
|
|
|
|
<div className="app">
|
2026-06-13 16:16:37 +08:00
|
|
|
|
{/* ---- 顶部导航栏 ---- */}
|
|
|
|
|
|
<header className="header">
|
|
|
|
|
|
<div className="header__left">
|
|
|
|
|
|
<h1 className="header__title">CamTalk</h1>
|
|
|
|
|
|
<span className="header__subtitle">AI 视觉对话助手</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="header__right">
|
|
|
|
|
|
{isConnected && (stats.queryCount > 0 || stats.totalTokens > 0) && (
|
|
|
|
|
|
<span className="header__stats">
|
|
|
|
|
|
{stats.queryCount} 次请求 · {stats.totalTokens} tokens
|
|
|
|
|
|
</span>
|
|
|
|
|
|
)}
|
|
|
|
|
|
<span className={`badge badge--${connectionStatus}`}>
|
|
|
|
|
|
{isConnected ? "已连接" : connectionStatus === "connecting" ? "连接中..." : "未连接"}
|
2026-06-13 14:19:47 +08:00
|
|
|
|
</span>
|
2026-06-13 16:54:57 +08:00
|
|
|
|
<button
|
|
|
|
|
|
className="btn-icon"
|
|
|
|
|
|
onClick={() => setShowConfig((v) => !v)}
|
|
|
|
|
|
title="设置"
|
|
|
|
|
|
>
|
|
|
|
|
|
⚙️
|
|
|
|
|
|
</button>
|
2026-06-13 14:19:47 +08:00
|
|
|
|
</div>
|
2026-06-12 17:46:25 +08:00
|
|
|
|
</header>
|
|
|
|
|
|
|
2026-06-13 14:19:47 +08:00
|
|
|
|
{showConfig && (
|
|
|
|
|
|
<ConfigPanel
|
|
|
|
|
|
config={config}
|
2026-06-13 17:08:56 +08:00
|
|
|
|
theme={theme}
|
2026-06-13 14:19:47 +08:00
|
|
|
|
onUpdate={updateConfig}
|
2026-06-13 17:08:56 +08:00
|
|
|
|
onThemeChange={handleThemeChange}
|
2026-06-13 14:19:47 +08:00
|
|
|
|
onClose={() => setShowConfig(false)}
|
|
|
|
|
|
/>
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
2026-06-13 16:16:37 +08:00
|
|
|
|
{/* ---- 主体：左侧视频 + 右侧聊天 ---- */}
|
|
|
|
|
|
<div className="workspace">
|
|
|
|
|
|
{/* 左侧：视频预览 + 控制栏 */}
|
|
|
|
|
|
<div className="video-panel">
|
|
|
|
|
|
<div className="video-container">
|
|
|
|
|
|
<VideoPreview ref={videoRef} isStreaming={!!stream} />
|
2026-06-13 19:01:33 +08:00
|
|
|
|
{isConnected && (
|
|
|
|
|
|
<div className="live-badge">
|
|
|
|
|
|
<span className="live-badge__dot" />
|
|
|
|
|
|
LIVE {formatTime(elapsed)}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)}
|
2026-06-13 16:16:37 +08:00
|
|
|
|
{config.detailLevel === "high" && (
|
|
|
|
|
|
<div className="detail-badge">HD</div>
|
|
|
|
|
|
)}
|
|
|
|
|
|
{isObserving && (
|
|
|
|
|
|
<div className="observation-badge">👁️ 观察中</div>
|
|
|
|
|
|
)}
|
|
|
|
|
|
{isSpeaking && (
|
|
|
|
|
|
<div className="video-indicator">🎤 正在聆听...</div>
|
|
|
|
|
|
)}
|
|
|
|
|
|
{isAudioPlaying && config.ttsEnabled && (
|
|
|
|
|
|
<div className="video-indicator video-indicator--audio">🔊 正在播放...</div>
|
|
|
|
|
|
)}
|
|
|
|
|
|
{isConnected && !isVADReady && !vadError && (
|
|
|
|
|
|
<div className="video-indicator video-indicator--loading">正在初始化语音检测...</div>
|
|
|
|
|
|
)}
|
|
|
|
|
|
{vadError && (
|
|
|
|
|
|
<div className="video-indicator video-indicator--error">⚠️ {vadError}</div>
|
|
|
|
|
|
)}
|
|
|
|
|
|
{isProcessing && (
|
|
|
|
|
|
<div className="video-overlay">
|
|
|
|
|
|
<div className="video-overlay__spinner" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)}
|
|
|
|
|
|
{!isConnected && !stream && (
|
|
|
|
|
|
<div className="video-placeholder">
|
|
|
|
|
|
<span className="video-placeholder__icon">📷</span>
|
|
|
|
|
|
<span>点击右侧按钮开始对话</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)}
|
|
|
|
|
|
</div>
|
2026-06-12 17:46:25 +08:00
|
|
|
|
|
2026-06-13 16:16:37 +08:00
|
|
|
|
{/* 视频下方控制栏 */}
|
|
|
|
|
|
<div className="video-controls">
|
|
|
|
|
|
{!isConnected ? (
|
|
|
|
|
|
<button className="btn btn--primary btn--lg" onClick={startSession}>
|
|
|
|
|
|
{connectionStatus === "connecting" ? "连接中..." : "🎙️ 开始对话"}
|
|
|
|
|
|
</button>
|
|
|
|
|
|
) : (
|
|
|
|
|
|
<div className="video-controls__row">
|
2026-06-13 20:01:37 +08:00
|
|
|
|
<button
|
|
|
|
|
|
className={`btn btn--ctrl ${isCameraOn ? "btn--ctrl-on" : "btn--ctrl-off"}`}
|
|
|
|
|
|
onClick={toggleCamera}
|
|
|
|
|
|
title={isCameraOn ? "关闭摄像头" : "开启摄像头"}
|
|
|
|
|
|
>
|
|
|
|
|
|
📷
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button
|
|
|
|
|
|
className={`btn btn--ctrl ${isMicOn ? "btn--ctrl-on" : "btn--ctrl-off"} ${isSpeaking ? "btn--speaking" : ""}`}
|
|
|
|
|
|
onClick={toggleMic}
|
|
|
|
|
|
title={isMicOn ? "关闭麦克风" : "开启麦克风"}
|
|
|
|
|
|
>
|
|
|
|
|
|
🎤
|
|
|
|
|
|
</button>
|
2026-06-13 16:16:37 +08:00
|
|
|
|
<button
|
|
|
|
|
|
className={`btn ${mode === "observation" ? "btn--active" : "btn--secondary"}`}
|
|
|
|
|
|
onClick={toggleMode}
|
|
|
|
|
|
>
|
|
|
|
|
|
{mode === "observation" ? "👁️ 观察中" : "👁️ 观察模式"}
|
|
|
|
|
|
</button>
|
|
|
|
|
|
{isProcessing && (
|
|
|
|
|
|
<button className="btn btn--warning" onClick={interrupt}>
|
|
|
|
|
|
⏹ 打断
|
|
|
|
|
|
</button>
|
|
|
|
|
|
)}
|
|
|
|
|
|
<button className="btn btn--danger" onClick={stopSession}>
|
|
|
|
|
|
结束对话
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)}
|
|
|
|
|
|
</div>
|
2026-06-13 14:38:15 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-06-13 16:16:37 +08:00
|
|
|
|
{/* 右侧：聊天面板 */}
|
|
|
|
|
|
<div className="chat-panel-wrapper">
|
|
|
|
|
|
<div className="chat-panel-header">
|
|
|
|
|
|
<span>对话</span>
|
|
|
|
|
|
{isConnected && mode === "observation" && (
|
|
|
|
|
|
<span className="chat-panel-header__mode">观察模式</span>
|
2026-06-12 17:46:25 +08:00
|
|
|
|
)}
|
2026-06-13 16:16:37 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div className="chat-panel-body">
|
|
|
|
|
|
{connectionStatus === "disconnected" && messages.length > 0 && (
|
|
|
|
|
|
<div className="system-message system-message--warning">
|
|
|
|
|
|
连接已断开，正在重连...
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)}
|
|
|
|
|
|
<ChatPanel
|
|
|
|
|
|
messages={messages}
|
|
|
|
|
|
currentReply={currentReply}
|
|
|
|
|
|
connectionStatus={connectionStatus}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2026-06-13 11:43:16 +08:00
|
|
|
|
|
|
|
|
|
|
<ToastContainer />
|
2026-06-12 17:46:25 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default App;
|
