feat(voice-transcribe): 新增语音转写语言过滤配置功能（支持用户自定义允许的转写语言），优化模型下载的超时处理与进度日志，提升下载稳健性，同步更新相关 UI 样式。

2026-03-25 07:16:51 +00:00 · 2026-01-17 19:54:31 +08:00
parent dc12df0fcf
commit 0853e049c8
9 changed files with 338 additions and 66 deletions
--- a/src/components/VoiceTranscribeDialog.scss
+++ b/src/components/VoiceTranscribeDialog.scss
@@ -14,7 +14,7 @@
 }

 .voice-transcribe-dialog {
-    background: var(--color-bg-elevated);
+    background: var(--bg-secondary);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 90%;
@@ -28,13 +28,13 @@
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--border-color);

    h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
-        color: var(--color-text-primary);
+        color: var(--text-primary);
    }

    .close-button {
@@ -42,13 +42,13 @@
        border: none;
        cursor: pointer;
        padding: 4px;
-        color: var(--color-text-secondary);
+        color: var(--text-secondary);
        border-radius: 6px;
        transition: all 0.15s ease;

        &:hover {
-            background: var(--color-bg-hover);
-            color: var(--color-text-primary);
+            background: var(--bg-hover);
+            color: var(--text-primary);
        }
    }
 }
@@ -65,19 +65,19 @@
    gap: 16px;

    .info-icon {
-        color: var(--color-primary);
+        color: var(--primary);
        opacity: 0.8;
    }

    .info-text {
        font-size: 15px;
-        color: var(--color-text-primary);
+        color: var(--text-primary);
        margin: 0;
    }

    .model-info {
        width: 100%;
-        background: var(--color-bg);
+        background: var(--bg-tertiary);
        border-radius: 12px;
        padding: 16px;
        display: flex;
@@ -91,11 +91,11 @@
            font-size: 14px;

            .label {
-                color: var(--color-text-secondary);
+                color: var(--text-secondary);
            }

            .value {
-                color: var(--color-text-primary);
+                color: var(--text-primary);
                font-weight: 500;
            }
        }
@@ -111,27 +111,27 @@

    .download-icon {
        .downloading-icon {
-            color: var(--color-primary);
+            color: var(--primary);
            animation: bounce 1s ease-in-out infinite;
        }
    }

    .download-text {
        font-size: 15px;
-        color: var(--color-text-primary);
+        color: var(--text-primary);
        margin: 0;
    }

    .progress-bar {
        width: 100%;
        height: 6px;
-        background: var(--color-bg);
+        background: var(--bg-tertiary);
        border-radius: 3px;
        overflow: hidden;

        .progress-fill {
            height: 100%;
-            background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
+            background: var(--primary-gradient);
            border-radius: 3px;
            transition: width 0.3s ease;
        }
@@ -139,10 +139,17 @@

    .progress-text {
        font-size: 14px;
-        color: var(--color-text-secondary);
+        color: var(--text-secondary);
        margin: 0;
        font-variant-numeric: tabular-nums;
    }
+
+    .download-hint {
+        font-size: 12px;
+        color: var(--text-tertiary);
+        margin: 8px 0 0 0;
+        text-align: center;
+    }
 }

 .complete-section {
@@ -153,12 +160,12 @@
    padding: 20px 0;

    .complete-icon {
-        color: var(--color-success);
+        color: #10b981;
    }

    .complete-text {
        font-size: 15px;
-        color: var(--color-text-primary);
+        color: var(--text-primary);
        margin: 0;
    }
 }
@@ -196,16 +203,16 @@
        gap: 6px;

        &.btn-secondary {
-            background: var(--color-bg);
-            color: var(--color-text-primary);
+            background: var(--bg-tertiary);
+            color: var(--text-primary);

            &:hover {
-                background: var(--color-bg-hover);
+                background: var(--bg-hover);
            }
        }

        &.btn-primary {
-            background: var(--color-primary);
+            background: var(--primary);
            color: white;

            &:hover {
--- a/src/components/VoiceTranscribeDialog.tsx
+++ b/src/components/VoiceTranscribeDialog.tsx
@@ -18,7 +18,12 @@ export const VoiceTranscribeDialog: React.FC<VoiceTranscribeDialogProps> = ({

    useEffect(() => {
        // 监听下载进度
-        const removeListener = window.electronAPI.whisper?.onDownloadProgress?.((payload) => {
+        if (!window.electronAPI?.whisper?.onDownloadProgress) {
+            console.warn('[VoiceTranscribeDialog] whisper API 不可用')
+            return
+        }
+
+        const removeListener = window.electronAPI.whisper.onDownloadProgress((payload) => {
            if (payload.percent !== undefined) {
                setDownloadProgress(payload.percent)
            }
@@ -30,12 +35,17 @@ export const VoiceTranscribeDialog: React.FC<VoiceTranscribeDialogProps> = ({
    }, [])

    const handleDownload = async () => {
+        if (!window.electronAPI?.whisper?.downloadModel) {
+            setDownloadError('语音转文字功能不可用')
+            return
+        }
+
        setIsDownloading(true)
        setDownloadError(null)
        setDownloadProgress(0)

        try {
-            const result = await window.electronAPI.whisper?.downloadModel()
+            const result = await window.electronAPI.whisper.downloadModel()

            if (result?.success) {
                setIsComplete(true)
@@ -56,7 +66,7 @@ export const VoiceTranscribeDialog: React.FC<VoiceTranscribeDialogProps> = ({
    }

    const handleCancel = () => {
-        if (!isDownloading) {
+        if (!isDownloading && !isComplete) {
            onClose()
        }
    }
@@ -66,7 +76,7 @@ export const VoiceTranscribeDialog: React.FC<VoiceTranscribeDialogProps> = ({
            <div className="voice-transcribe-dialog" onClick={(e) => e.stopPropagation()}>
                <div className="dialog-header">
                    <h3>语音转文字</h3>
-                    {!isDownloading && (
+                    {!isDownloading && !isComplete && (
                        <button className="close-button" onClick={onClose}>
                            <X size={20} />
                        </button>
@@ -121,7 +131,9 @@ export const VoiceTranscribeDialog: React.FC<VoiceTranscribeDialogProps> = ({
                            <div className="download-icon">
                                <Download size={48} className="downloading-icon" />
                            </div>
-                            <p className="download-text">正在下载模型...</p>
+                            <p className="download-text">
+                                {downloadProgress < 1 ? '正在连接服务器...' : '正在下载模型...'}
+                            </p>
                            <div className="progress-bar">
                                <div
                                    className="progress-fill"
@@ -129,6 +141,9 @@ export const VoiceTranscribeDialog: React.FC<VoiceTranscribeDialogProps> = ({
                                />
                            </div>
                            <p className="progress-text">{downloadProgress.toFixed(1)}%</p>
+                            {downloadProgress < 1 && (
+                                <p className="download-hint">首次连接可能需要较长时间，请耐心等待</p>
+                            )}
                        </div>
                    )}

--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -987,6 +987,11 @@ function ChatPage(_props: ChatPageProps) {
    })
  }

+  const handleRequireModelDownload = useCallback((sessionId: string, messageId: string) => {
+    setPendingVoiceTranscriptRequest({ sessionId, messageId })
+    setShowVoiceTranscribeDialog(true)
+  }, [])
+
  return (
    <div className={`chat-page ${isResizing ? 'resizing' : ''}`}>
      {/* 左侧会话列表 */}
@@ -1166,6 +1171,7 @@ function ChatPage(_props: ChatPageProps) {
                        showTime={!showDateDivider && showTime}
                        myAvatarUrl={myAvatarUrl}
                        isGroupChat={isGroupChat(currentSession.username)}
+                        onRequireModelDownload={handleRequireModelDownload}
                      />
                    </div>
                  )
@@ -1298,20 +1304,16 @@ function ChatPage(_props: ChatPageProps) {
          }}
          onDownloadComplete={async () => {
            setShowVoiceTranscribeDialog(false)
-            // 下载完成后，继续转写
+            // 下载完成后，触发页面刷新让组件重新尝试转写
+            // 通过更新缓存触发组件重新检查
            if (pendingVoiceTranscriptRequest) {
-              try {
-                const result = await window.electronAPI.chat.getVoiceTranscript(
-                  pendingVoiceTranscriptRequest.sessionId,
-                  pendingVoiceTranscriptRequest.messageId
-                )
-                if (result.success) {
-                  const cacheKey = `voice-transcript:${pendingVoiceTranscriptRequest.messageId}`
-                  voiceTranscriptCache.set(cacheKey, (result.transcript || '').trim())
-                }
-              } catch (error) {
-                console.error('[ChatPage] 语音转文字失败:', error)
-              }
+              // 清除缓存中的请求标记，让组件可以重新尝试
+              const cacheKey = `voice-transcript:${pendingVoiceTranscriptRequest.messageId}`
+              // 不直接调用转写，而是让组件自己重试
+              // 通过触发一个自定义事件来通知所有 MessageBubble 组件
+              window.dispatchEvent(new CustomEvent('model-downloaded', {
+                detail: { messageId: pendingVoiceTranscriptRequest.messageId }
+              }))
            }
            setPendingVoiceTranscriptRequest(null)
          }}
@@ -1330,12 +1332,13 @@ const senderAvatarCache = new Map<string, { avatarUrl?: string; displayName?: st
 const senderAvatarLoading = new Map<string, Promise<{ avatarUrl?: string; displayName?: string } | null>>()

 // 消息气泡组件
-function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat }: {
+function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, onRequireModelDownload }: {
  message: Message;
  session: ChatSession;
  showTime?: boolean;
  myAvatarUrl?: string;
  isGroupChat?: boolean;
+  onRequireModelDownload?: (sessionId: string, messageId: string) => void;
 }) {
  const isSystem = isSystemMessage(message.localType)
  const isEmoji = message.localType === 47
@@ -1682,21 +1685,27 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat }:
  const requestVoiceTranscript = useCallback(async () => {
    if (voiceTranscriptLoading || voiceTranscriptRequestedRef.current) return

-    // 检查模型状态
-    const modelStatus = await window.electronAPI.whisper?.getModelStatus()
-    if (!modelStatus?.exists) {
-      // 模型未下载，抛出错误让外层处理
-      const error: any = new Error('MODEL_NOT_DOWNLOADED')
-      error.requiresDownload = true
-      error.sessionId = session.username
-      error.messageId = String(message.localId)
-      throw error
+    // 检查 whisper API 是否可用
+    if (!window.electronAPI?.whisper?.getModelStatus) {
+      console.warn('[ChatPage] whisper API 不可用')
+      setVoiceTranscriptError(true)
+      return
    }

    voiceTranscriptRequestedRef.current = true
    setVoiceTranscriptLoading(true)
    setVoiceTranscriptError(false)
    try {
+      // 检查模型状态
+      const modelStatus = await window.electronAPI.whisper.getModelStatus()
+      if (!modelStatus?.exists) {
+        const error: any = new Error('MODEL_NOT_DOWNLOADED')
+        error.requiresDownload = true
+        error.sessionId = session.username
+        error.messageId = String(message.localId)
+        throw error
+      }
+
      const result = await window.electronAPI.chat.getVoiceTranscript(session.username, String(message.localId))
      if (result.success) {
        const transcriptText = (result.transcript || '').trim()
@@ -1709,8 +1718,10 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat }:
    } catch (error: any) {
      // 检查是否是模型未下载错误
      if (error?.requiresDownload) {
-        // 不显示错误状态，等待用户手动点击转文字按钮时会触发下载弹窗
-        voiceTranscriptRequestedRef.current = false
+        // 模型未下载，触发下载弹窗
+        onRequireModelDownload?.(error.sessionId, error.messageId)
+        // 不要重置 voiceTranscriptRequestedRef，避免重复触发
+        setVoiceTranscriptLoading(false)
        return
      }
      setVoiceTranscriptError(true)
@@ -1718,7 +1729,27 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat }:
    } finally {
      setVoiceTranscriptLoading(false)
    }
-  }, [message.localId, session.username, voiceTranscriptCacheKey, voiceTranscriptLoading])
+  }, [message.localId, session.username, voiceTranscriptCacheKey, voiceTranscriptLoading, onRequireModelDownload])
+
+  // 监听模型下载完成事件
+  useEffect(() => {
+    if (!isVoice) return
+    
+    const handleModelDownloaded = (event: CustomEvent) => {
+      if (event.detail?.messageId === String(message.localId)) {
+        // 重置状态，允许重新尝试转写
+        voiceTranscriptRequestedRef.current = false
+        setVoiceTranscriptError(false)
+        // 立即尝试转写
+        void requestVoiceTranscript()
+      }
+    }
+    
+    window.addEventListener('model-downloaded', handleModelDownloaded as EventListener)
+    return () => {
+      window.removeEventListener('model-downloaded', handleModelDownloaded as EventListener)
+    }
+  }, [isVoice, message.localId, requestVoiceTranscript])

  // 根据设置决定是否自动转写
  const [autoTranscribeEnabled, setAutoTranscribeEnabled] = useState(false)
--- a/src/pages/SettingsPage.scss
+++ b/src/pages/SettingsPage.scss
@@ -352,6 +352,37 @@
  color: var(--text-secondary);
 }

+.language-checkboxes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.language-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+
+  input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: var(--primary);
+  }
+
+  .checkbox-label {
+    font-size: 14px;
+    color: var(--text-primary);
+  }
+
+  &:hover .checkbox-label {
+    color: var(--primary);
+  }
+}
+
 .switch {
  position: relative;
  width: 46px;
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -48,6 +48,7 @@ function SettingsPage() {
  const [whisperDownloadProgress, setWhisperDownloadProgress] = useState(0)
  const [whisperModelStatus, setWhisperModelStatus] = useState<{ exists: boolean; modelPath?: string; tokensPath?: string } | null>(null)
  const [autoTranscribeVoice, setAutoTranscribeVoice] = useState(false)
+  const [transcribeLanguages, setTranscribeLanguages] = useState<string[]>(['zh'])

  const [isLoading, setIsLoadingState] = useState(false)
  const [isTesting, setIsTesting] = useState(false)
@@ -112,6 +113,7 @@ function SettingsPage() {
      const savedWhisperModelName = await configService.getWhisperModelName()
      const savedWhisperModelDir = await configService.getWhisperModelDir()
      const savedAutoTranscribe = await configService.getAutoTranscribeVoice()
+      const savedTranscribeLanguages = await configService.getTranscribeLanguages()

      if (savedKey) setDecryptKey(savedKey)
      if (savedPath) setDbPath(savedPath)
@@ -123,6 +125,15 @@ function SettingsPage() {
      if (savedImageAesKey) setImageAesKey(savedImageAesKey)
      setLogEnabled(savedLogEnabled)
      setAutoTranscribeVoice(savedAutoTranscribe)
+      setTranscribeLanguages(savedTranscribeLanguages)
+      
+      // 如果语言列表为空，保存默认值
+      if (!savedTranscribeLanguages || savedTranscribeLanguages.length === 0) {
+        const defaultLanguages = ['zh']
+        setTranscribeLanguages(defaultLanguages)
+        await configService.setTranscribeLanguages(defaultLanguages)
+      }
+      
      if (savedWhisperModelDir) setWhisperModelDir(savedWhisperModelDir)
    } catch (e) {
      console.error('加载配置失败:', e)
@@ -454,6 +465,7 @@ function SettingsPage() {
      }
      await configService.setWhisperModelDir(whisperModelDir)
      await configService.setAutoTranscribeVoice(autoTranscribeVoice)
+      await configService.setTranscribeLanguages(transcribeLanguages)
      await configService.setOnboardingDone(true)

      showMessage('配置保存成功，正在测试连接...', true)
@@ -490,6 +502,7 @@ function SettingsPage() {
      setCachePath('')
      setLogEnabled(false)
      setAutoTranscribeVoice(false)
+      setTranscribeLanguages(['zh'])
      setWhisperModelDir('')
      setWhisperModelStatus(null)
      setWhisperDownloadProgress(0)
@@ -757,6 +770,46 @@ function SettingsPage() {
          </label>
        </div>
      </div>
+      <div className="form-group">
+        <label>支持的语言</label>
+        <span className="form-hint">选择需要识别的语言（至少选择一种）</span>
+        <div className="language-checkboxes">
+          {[
+            { code: 'zh', name: '中文' },
+            { code: 'en', name: '英文' },
+            { code: 'ja', name: '日文' },
+            { code: 'ko', name: '韩文' }
+          ].map((lang) => (
+            <label key={lang.code} className="language-checkbox">
+              <input
+                type="checkbox"
+                checked={transcribeLanguages.includes(lang.code)}
+                onChange={async (e) => {
+                  const checked = e.target.checked
+                  let newLanguages: string[]
+                  
+                  if (checked) {
+                    // 添加语言
+                    newLanguages = [...transcribeLanguages, lang.code]
+                  } else {
+                    // 移除语言，但至少保留一个
+                    if (transcribeLanguages.length <= 1) {
+                      showMessage('至少需要选择一种语言', false)
+                      return
+                    }
+                    newLanguages = transcribeLanguages.filter(l => l !== lang.code)
+                  }
+                  
+                  setTranscribeLanguages(newLanguages)
+                  await configService.setTranscribeLanguages(newLanguages)
+                  showMessage(`已${checked ? '添加' : '移除'}${lang.name}`, true)
+                }}
+              />
+              <span className="checkbox-label">{lang.name}</span>
+            </label>
+          ))}
+        </div>
+      </div>
      <div className="form-group whisper-section">
        <label>语音识别模型 (SenseVoiceSmall)</label>
        <span className="form-hint">基于 Sherpa-onnx，支持中文、英文、日文、韩文</span>
--- a/src/services/config.ts
+++ b/src/services/config.ts
@@ -21,7 +21,8 @@ export const CONFIG_KEYS = {
  WHISPER_MODEL_NAME: 'whisperModelName',
  WHISPER_MODEL_DIR: 'whisperModelDir',
  WHISPER_DOWNLOAD_SOURCE: 'whisperDownloadSource',
-  AUTO_TRANSCRIBE_VOICE: 'autoTranscribeVoice'
+  AUTO_TRANSCRIBE_VOICE: 'autoTranscribeVoice',
+  TRANSCRIBE_LANGUAGES: 'transcribeLanguages'
 } as const

 // 获取解密密钥
@@ -230,3 +231,15 @@ export async function getAutoTranscribeVoice(): Promise<boolean> {
 export async function setAutoTranscribeVoice(enabled: boolean): Promise<void> {
  await config.set(CONFIG_KEYS.AUTO_TRANSCRIBE_VOICE, enabled)
 }
+
+// 获取语音转文字支持的语言列表
+export async function getTranscribeLanguages(): Promise<string[]> {
+  const value = await config.get(CONFIG_KEYS.TRANSCRIBE_LANGUAGES)
+  // 默认只支持中文
+  return (value as string[]) || ['zh']
+}
+
+// 设置语音转文字支持的语言列表
+export async function setTranscribeLanguages(languages: string[]): Promise<void> {
+  await config.set(CONFIG_KEYS.TRANSCRIBE_LANGUAGES, languages)
+}