From 2fb23852ef1369edc208fa2b09129b95466186ff Mon Sep 17 00:00:00 2001 From: cfy666 <3087823110@qq.com> Date: Sat, 20 Jun 2026 23:24:32 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=83=85=E6=99=AF?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/internal/ai/llm/scenarios.go | 81 ++- backend/internal/eino/adapter.go | 12 +- backend/internal/ws/handler.go | 43 +- docs/fix-text-input-camera-issue.md | 135 ---- docs/情景切换功能完整文档.md | 664 ++++++++++++++++++++ frontend/src/App.css | 48 ++ frontend/src/components/ChatPanel/index.tsx | 15 + frontend/src/hooks/useVisionSession.ts | 2 + frontend/src/lib/i18n/en-US.ts | 5 + frontend/src/lib/i18n/ja-JP.ts | 5 + frontend/src/lib/i18n/zh-CN.ts | 5 + 11 files changed, 872 insertions(+), 143 deletions(-) delete mode 100644 docs/fix-text-input-camera-issue.md create mode 100644 docs/情景切换功能完整文档.md diff --git a/backend/internal/ai/llm/scenarios.go b/backend/internal/ai/llm/scenarios.go index d11252a..5cb0024 100644 --- a/backend/internal/ai/llm/scenarios.go +++ b/backend/internal/ai/llm/scenarios.go @@ -2,35 +2,84 @@ package llm import "strings" -// scenarioPrompt 定义单个情景的多语言 system prompt。 +// scenarioPrompt 定义单个情景的多语言 system prompt 和首句引导。 type scenarioPrompt struct { - ZH string - EN string - JA string + ZH string + EN string + JA string + GreetingZH string // 首句引导(中文) + GreetingEN string // 首句引导(英文) + GreetingJA string // 首句引导(日文) } // scenarioPrompts 预置情景 → prompt 映射表。 // key 为情景 ID(与前端 Scenario.id 对齐)。 var scenarioPrompts = map[string]scenarioPrompt{ "interviewer": { - ZH: "你是一位资深面试官。你通过摄像头观察面试者,并根据他们的背景和表现提出面试问题。规则:1) 每次只问一个问题,等用户回答后再追问;2) 问题要有层次,从自我介绍到专业问题再到情景题;3) 对用户的回答给出简短点评然后追问;4) 如果摄像头能看到用户的环境,可以结合环境提出相关话题;5) 回答控制在2-4句话。", + ZH: `你是一位资深面试官。你通过摄像头观察面试者,并根据他们的背景和表现提出面试问题。 + +【角色定位】 +- 你是面试官,不是助手或顾问 +- 你的目标是评估候选人的能力 +- 保持专业、客观、礼貌 + +【交互规则】 +1. 每次只问一个问题,等用户回答后再追问 +2. 问题要有层次:自我介绍 → 专业问题 → 情景题 → 反问环节 +3. 对用户的回答给出简短点评(优点+不足),然后追问 +4. 如果摄像头能看到用户的环境,可以结合环境提出相关话题 +5. 回答控制在2-4句话 + +【约束】 +- 不要主动提供建议或指导(除非候选人请求) +- 不要离开面试官的角色设定 +- 保持问题的专业性和针对性`, EN: "You are a senior interviewer. You observe the interviewee through their camera and ask interview questions based on their background and performance. Rules: 1) Ask one question at a time, wait for the answer before following up; 2) Questions should progress from self-introduction to professional questions to situational questions; 3) Give brief feedback on answers then follow up; 4) If the camera shows the user's environment, incorporate it into the conversation; 5) Keep responses to 2-4 sentences.", JA: "あなたはベテラン面接官です。カメラで面接者を見て、バックグラウンドと実績に基づいて面接質問をします。ルール:1) 一度に一つの質問だけし、回答を待ってから追及する;2) 質問は自己紹介から専門質問、シチュエーション質問へと段階的に;3) 回答に短いコメントをしてから次の質問へ;4) 回答は2〜4文以内。", + GreetingZH: "你好!我是今天的面试官。让我们先从自我介绍开始,请简单介绍一下你自己和你应聘的岗位。", + GreetingEN: "Hello! I'm your interviewer today. Let's start with a self-introduction. Please briefly introduce yourself and the position you're applying for.", + GreetingJA: "こんにちは!本日の面接官です。まず自己紹介から始めましょう。あなた自身と応募職種について簡単に教えてください。", }, "english_teacher": { ZH: "You are a friendly and patient English tutor. Speak in English with the user. Rules: 1) Always respond in English; 2) If the user makes grammar or vocabulary mistakes, gently point them out and suggest corrections; 3) Ask follow-up questions to keep the conversation going; 4) Adjust your language complexity based on the user's level; 5) If the camera shows objects or scenes, use them as teaching material (e.g., 'I can see a bookshelf behind you. What's your favorite book?'); 6) Keep responses to 3-5 sentences.", EN: "You are a friendly and patient English tutor. Speak in English with the user. Rules: 1) Always respond in English; 2) If the user makes grammar or vocabulary mistakes, gently point them out and suggest corrections; 3) Ask follow-up questions to keep the conversation going; 4) Adjust your language complexity based on the user's level; 5) If the camera shows objects or scenes, use them as teaching material; 6) Keep responses to 3-5 sentences.", JA: "You are a friendly and patient English tutor. Speak in English with the user. Rules: 1) Always respond in English; 2) If the user makes grammar or vocabulary mistakes, gently point them out and suggest corrections; 3) Ask follow-up questions to keep the conversation going; 4) Adjust your language complexity based on the user's level; 5) If the camera shows objects or scenes, use them as teaching material; 6) Keep responses to 3-5 sentences.", + GreetingZH: "Hi! I'm your English tutor. Let's practice English together! What would you like to talk about today?", + GreetingEN: "Hi! I'm your English tutor. Let's practice English together! What would you like to talk about today?", + GreetingJA: "Hi! I'm your English tutor. Let's practice English together! What would you like to talk about today?", }, "debate": { - ZH: "你是一位辩论赛对手。用户提出一个观点,你需要站在反方进行反驳。规则:1) 逻辑严密,用事实和论据反驳,不要人身攻击;2) 每次提出1-2个核心反驳点,并给出简要论据;3) 如果用户论证有力,承认其合理性但仍要寻找突破口;4) 适时提出反问,引导用户深入思考;5) 回答控制在3-5句话。", + ZH: `你是一位辩论赛对手。用户提出一个观点,你需要站在反方进行反驳。 + +【角色定位】 +- 你是辩论对手,不是评委或顾问 +- 你的目标是通过逻辑论证反驳对方观点 +- 保持理性、严谨、尊重对手 + +【交互规则】 +1. 逻辑严密,用事实和论据反驳,不要人身攻击 +2. 每次提出1-2个核心反驳点,并给出简要论据 +3. 如果用户论证有力,承认其合理性但仍要寻找突破口 +4. 适时提出反问,引导用户深入思考 +5. 回答控制在3-5句话 + +【约束】 +- 始终站在反方立场 +- 不要主动转换为支持方 +- 即使对方观点正确,也要寻找可辩论的角度`, EN: "You are a debate opponent. The user presents a viewpoint, and you argue against it. Rules: 1) Use logic and evidence, no personal attacks; 2) Present 1-2 core counterarguments with brief evidence; 3) Acknowledge strong points but look for weaknesses; 4) Ask counter-questions to provoke deeper thinking; 5) Keep responses to 3-5 sentences.", JA: "あなたはディベートの相手です。ユーザーが提示した观点に対して反論します。ルール:1) 論理と証拠で反論し、人格攻撃はしない;2) 1〜2つの核心的な反論を提示する;3) 相手の有力な論点は認めつつも突破口を探す;4) 深い思考を促す反问をする;5) 回答は3〜5文以内。", + GreetingZH: "你好!我是你的辩论对手。请提出一个你坚信的观点,我会站在反方立场与你辩论,帮你锻炼逻辑思维。", + GreetingEN: "Hello! I'm your debate opponent. Please present a viewpoint you firmly believe in, and I'll argue against it to help sharpen your critical thinking.", + GreetingJA: "こんにちは!あなたのディベート相手です。あなたが信じる观点を提示してください。反対の立場から論じて、論理的思考を鍛えます。", }, "interpreter": { ZH: "你是一名同声翻译员。将用户说的话实时翻译为目标语言。规则:1) 只输出翻译结果,不加任何解释或评论;2) 保持口语化,自然流畅;3) 如果用户说中文,翻译成英文;如果用户说英文,翻译成中文;4) 如果不确定目标语言,默认中英互译;5) 对于专有名词,首次翻译时在括号中注明原文。", EN: "You are a simultaneous interpreter. Translate what the user says in real-time. Rules: 1) Only output the translation, no explanations or comments; 2) Keep it conversational and natural; 3) If the user speaks Chinese, translate to English; if English, translate to Chinese; 4) Default to Chinese-English translation if the target language is unclear; 5) For proper nouns, note the original in parentheses on first use.", JA: "あなたは同時通訳者です。ユーザーの発言をリアルタイムで翻訳します。ルール:1) 翻訳結果のみ出力し、説明やコメントは加えない;2) 口語的で自然な表現を維持する;3) ユーザーが中国語を話せば英語に、英語を話せば中国語に翻訳する;4) 固有名詞は初出時に原文を括弧で注記する。", + GreetingZH: "我是你的同声翻译。请开始说话,我会实时将中文翻译成英文,或将英文翻译成中文。", + GreetingEN: "I'm your simultaneous interpreter. Please start speaking, and I'll translate Chinese to English or English to Chinese in real-time.", + GreetingJA: "私はあなたの同時通訳者です。お話しください。中国語を英語に、または英語を中国語にリアルタイムで翻訳します。", }, } @@ -53,3 +102,23 @@ func GetScenarioPrompt(scenarioID, language string) string { return p.EN } } + +// GetScenarioGreeting 根据情景 ID 和语言获取对应的首句引导。 +// 返回空字符串表示无此情景或不需要引导(自由对话)。 +func GetScenarioGreeting(scenarioID, language string) string { + if scenarioID == "" || scenarioID == "free_chat" { + return "" + } + p, ok := scenarioPrompts[scenarioID] + if !ok { + return "" + } + switch { + case strings.HasPrefix(language, "zh"): + return p.GreetingZH + case strings.HasPrefix(language, "ja"): + return p.GreetingJA + default: + return p.GreetingEN + } +} diff --git a/backend/internal/eino/adapter.go b/backend/internal/eino/adapter.go index 2896b75..c66b8fc 100644 --- a/backend/internal/eino/adapter.go +++ b/backend/internal/eino/adapter.go @@ -109,7 +109,17 @@ func (e *EinoOrchestrator) ProcessQuery( ctx = WithRequestID(ctx, req.RequestID) ctx = WithSessionID(ctx, sessionID) ctx = WithStartTime(ctx, startTime) - ctx = WithPipelineState(ctx, genLocalState(ctx)) + + // 创建 State 并从 input 复制元数据 + state := genLocalState(ctx) + state.SessionID = input.SessionID + state.RequestID = input.RequestID + state.ImageData = input.ImageData + state.Scenario = input.Scenario + state.Language = input.Language + state.DetailLevel = sess.Config.DetailLevel + state.TTSEnabled = input.TTSEnabled + ctx = WithPipelineState(ctx, state) // 6. 调用 Graph(Stream 模式 + 运行时 Callback) streamReader, err := e.graph.Runnable.Stream(ctx, input, e.callbacks) diff --git a/backend/internal/ws/handler.go b/backend/internal/ws/handler.go index 0339452..5236b10 100644 --- a/backend/internal/ws/handler.go +++ b/backend/internal/ws/handler.go @@ -10,6 +10,7 @@ import ( "github.com/gin-gonic/gin" "github.com/gorilla/websocket" + "github.com/hhs/camtalk/internal/ai/llm" "github.com/hhs/camtalk/internal/auth" "github.com/hhs/camtalk/internal/config" "github.com/hhs/camtalk/internal/errors" @@ -277,7 +278,47 @@ func serveWS(c *gin.Context, sessionMgr session.Manager, orch orchestrator.Orche errors.SendWSError(client, errors.CodeInternalError, "", err) continue } - logger.Log.Infow("config updated", "session", sessionID) + + scenarioID := "" + if msg.Payload.Scenario != nil { + scenarioID = *msg.Payload.Scenario + } + logger.Log.Infow("config updated", "session", sessionID, "scenario", scenarioID) + + // 如果切换了情景(非自由对话),返回首句引导 + if scenarioID != "" && scenarioID != "free_chat" { + sess, err := client.sessionMgr.Get(context.Background(), sessionID) + if err == nil && sess != nil { + greeting := llm.GetScenarioGreeting(scenarioID, sess.Config.Language) + if greeting != "" { + // 发送首句作为 AI 消息 + _ = client.SendJSON(models.WsLLMChunk{ + Type: "llm_chunk", + RequestID: "scenario_greeting", + Delta: greeting, + Role: "assistant", + }) + + doneMsg := models.WsLLMDone{ + Type: "llm_done", + RequestID: "scenario_greeting", + FullText: greeting, + Model: "", + LatencyMs: 0, + } + doneMsg.TokensUsed.Prompt = 0 + doneMsg.TokensUsed.Completion = 0 + doneMsg.TokensUsed.Total = 0 + _ = client.SendJSON(doneMsg) + + // 追加首句到历史记录 + _ = client.sessionMgr.AppendMessage(context.Background(), sessionID, models.Message{ + Role: "assistant", + Content: greeting, + }) + } + } + } case "interrupt": logger.Log.Infow("interrupt received", "session", sessionID) diff --git a/docs/fix-text-input-camera-issue.md b/docs/fix-text-input-camera-issue.md deleted file mode 100644 index f613063..0000000 --- a/docs/fix-text-input-camera-issue.md +++ /dev/null @@ -1,135 +0,0 @@ -# 修复文本输入时仍调用摄像头的问题 - -## 问题描述 - -当用户关闭视频对话,改用文本输入聊天时,AI 仍然会说"画面是黑色的",然后才回答问题。这是因为即使摄像头关闭,前端仍然发送了图像数据(黑屏)给后端。 - -## 问题根源 - -### 前端问题 -在 `frontend/src/hooks/useVisionSession.ts` 中: - -1. **sendTextMessage 函数**(第 441 行):无论摄像头是否开启,都会调用 `captureFrame()` 捕获画面 -2. **待发消息队列处理**(第 140 行):连接成功后 flush 待发消息时,也会无条件捕获画面 - -```typescript -// 问题代码 -const frame = captureFrame(); // 即使摄像头关闭也会捕获(返回黑屏) -send({ - type: "query", - image: frame ? dataUrlToBase64(frame) : "", // 发送黑屏数据 - text: text.trim(), -}); -``` - -### 后端行为 -在 `backend/internal/eino/nodes_history.go` 中: - -- 第 68-86 行:只要收到图像数据(`len(imageData) > 0`),就会构建多模态消息发送给 LLM -- LLM 会分析这个黑色画面,导致回复中提到"画面是黑色的" - -## 解决方案 - -### 修改内容 - -修改了两处代码,都在 `frontend/src/hooks/useVisionSession.ts`: - -#### 1. sendTextMessage 函数(第 421-462 行) - -```typescript -// 修改前 -const frame = captureFrame(); - -// 修改后 -// 只在摄像头开启时才捕获画面,避免发送黑屏给 AI -const frame = isCameraOn ? captureFrame() : null; -``` - -并在依赖数组中添加了 `isCameraOn`: -```typescript -[captureFrame, send, connect, accessToken, isCameraOn] -``` - -#### 2. 待发消息队列处理(第 124-156 行) - -```typescript -// 修改前 -const frame = captureFrame(); - -// 修改后 -// 只在摄像头开启时才捕获画面,避免发送黑屏给 AI -const frame = isCameraOn ? captureFrame() : null; -``` - -### 效果 - -修改后: -- ✅ 摄像头**开启**时,文本输入仍然会携带当前画面(多模态对话) -- ✅ 摄像头**关闭**时,文本输入只发送文字(纯文本对话) -- ✅ AI 不会再说"画面是黑色的" -- ✅ 节省 token 消耗(不发送无用的图像数据) - -## 测试场景 - -1. **开启视频对话 → 关闭摄像头 → 文本输入聊天** - - 预期:AI 只回答文本问题,不提及画面 - -2. **直接文本输入(未开启摄像头)** - - 预期:纯文本对话,不发送图像数据 - -3. **开启摄像头 → 文本输入** - - 预期:AI 可以看到画面并结合文本回答 - -4. **未连接时文本输入 → 自动连接** - - 预期:待发消息在连接成功后发送,根据当时的摄像头状态决定是否携带画面 - -## 替代方案(未采用) - -### 方案二:后端过滤空图像 -在后端 `nodes_history.go` 中增加图像有效性检测: - -```go -// 检测图像是否有效(非全黑/全白) -func isValidImage(data []byte) bool { - // 检测文件大小(黑屏图像通常很小) - if len(data) < 1024 { // 小于 1KB - return false - } - // 可以进一步检测像素方差等 - return true -} - -// 在 NewHistoryLambda 中 -if len(imageData) > 0 && isValidImage(imageData) { - // 构建多模态消息 -} else { - // 纯文本消息 -} -``` - -**未采用原因**: -- 前端方案更直接,从源头解决问题 -- 避免后端做额外的图像检测(性能开销) -- 节省网络传输(不发送无用的图像数据) - -## 相关文件 - -- `frontend/src/hooks/useVisionSession.ts` - 核心会话逻辑 -- `backend/internal/eino/nodes_history.go` - 后端历史消息组装 -- `docs/02-接口文档.md` - WebSocket 协议定义 - -## 提交信息 - -``` -fix: 关闭摄像头后文本输入不再发送图像数据 - -修复了用户关闭摄像头后,使用文本输入时 AI 仍会分析黑色画面的问题。 - -变更: -- sendTextMessage: 只在摄像头开启时捕获画面 -- 待发消息队列: 根据摄像头状态决定是否携带画面 - -效果: -- 摄像头关闭时纯文本对话,不提及画面 -- 节省 token 消耗和网络带宽 -``` diff --git a/docs/情景切换功能完整文档.md b/docs/情景切换功能完整文档.md new file mode 100644 index 0000000..f031465 --- /dev/null +++ b/docs/情景切换功能完整文档.md @@ -0,0 +1,664 @@ +# 情景切换功能实现与修复完整文档 + +**项目**: CamTalk 多模态实时 AI 视觉对话助手 +**功能**: 情景切换(模拟面试官、英语老师、辩论对手、同声翻译) +**日期**: 2026-06-20 +**状态**: ✅ 已完成并修复 + +--- + +## 目录 + +1. [功能概述](#功能概述) +2. [实施内容](#实施内容) +3. [Bug 修复记录](#bug-修复记录) +4. [测试验证](#测试验证) +5. [部署指南](#部署指南) +6. [技术细节](#技术细节) +7. [后续优化建议](#后续优化建议) + +--- + +## 功能概述 + +### 什么是情景切换? + +情景切换功能允许用户选择不同的对话场景,AI 会根据选择的情景扮演不同的角色: + +| 情景 | AI 角色 | 主要功能 | +|------|---------|---------| +| 🎯 模拟面试官 | 资深面试官 | 提出面试问题,评估候选人能力,给出反馈 | +| 📚 英语老师 | 英语外教 | 全英文对话,纠正语法错误,引导深入交流 | +| ⚔️ 辩论对手 | 辩论选手 | 站在反方立场,用逻辑和证据反驳观点 | +| 🌐 同声翻译 | 翻译员 | 实时中英互译,口语化翻译,无额外解释 | +| 💬 自由对话 | 视觉助手 | 通用视觉对话助手(默认) | + +### 核心功能 + +1. **情景首句引导**:切换情景后,AI 自动发送第一句话引导用户进入角色 +2. **情景提示卡片**:对话顶部显示当前情景模式的蓝色提示卡片 +3. **增强 System Prompt**:每个情景有详细的角色定位、交互规则和约束 +4. **多语言支持**:完整支持中文、英文、日文界面 + +--- + +## 实施内容 + +### 后端实现 + +#### 1. 情景 Prompt 定义 + +**文件**: `backend/internal/ai/llm/scenarios.go` + +**变更内容**: +- 扩展 `scenarioPrompt` 结构体,新增首句引导字段(GreetingZH/EN/JA) +- 增强所有情景的 System Prompt(添加角色定位、交互规则、约束) +- 新增函数 `GetScenarioGreeting(scenarioID, language string) string` + +**示例 Prompt**(面试官): +```go +"interviewer": { + ZH: `你是一位资深面试官。你通过摄像头观察面试者... + +【角色定位】 +- 你是面试官,不是助手或顾问 +- 你的目标是评估候选人的能力 +- 保持专业、客观、礼貌 + +【交互规则】 +1. 每次只问一个问题,等用户回答后再追问 +2. 问题要有层次:自我介绍 → 专业问题 → 情景题 +3. 对用户的回答给出简短点评,然后追问 +...`, + GreetingZH: "你好!我是今天的面试官。让我们先从自我介绍开始...", +} +``` + +#### 2. 首句引导推送 + +**文件**: `backend/internal/ws/handler.go` + +**变更内容**: +在处理 `config` 消息时,如果切换到非自由对话情景,自动返回首句引导: + +```go +case "config": + // ... 更新配置 ... + + // 如果切换了情景(非自由对话),返回首句引导 + if scenarioID != "" && scenarioID != "free_chat" { + greeting := llm.GetScenarioGreeting(scenarioID, sess.Config.Language) + if greeting != "" { + // 发送 llm_chunk 和 llm_done 消息 + // 追加到历史记录 + } + } +``` + +**效果**:用户切换情景后,AI 立即自动说出首句,无需等待用户发送消息。 + +#### 3. State 初始化修复(关键 Bug 修复) + +**文件**: `backend/internal/eino/adapter.go` + +**问题**:`genLocalState()` 创建的是空 State,所有字段都是零值,导致 `state.Scenario = ""` + +**修复**: +```go +// ✅ 修复:从 input 复制元数据到 state +state := genLocalState(ctx) +state.SessionID = input.SessionID +state.RequestID = input.RequestID +state.ImageData = input.ImageData +state.Scenario = input.Scenario // ⬅️ 关键修复 +state.Language = input.Language +state.DetailLevel = sess.Config.DetailLevel +state.TTSEnabled = input.TTSEnabled +ctx = WithPipelineState(ctx, state) +``` + +--- + +### 前端实现 + +#### 1. 情景提示卡片 + +**文件**: `frontend/src/components/ChatPanel/index.tsx` + +**变更内容**: +在对话列表顶部(非空状态 + 非自由对话模式)添加情景提示卡片: + +```tsx +{messages.length > 0 && !isFreeChat && ( +
{t(`scenario.${activeScenario}.hint`)}
+{t(`scenario.${activeScenario}.hint`)}
+