feat: add selectable Kokoro Chinese voices

Author: JeffGuo7

src-tauri/src/voice.rs

@@ -70,11 +70,13 @@ pub async fn download_voice_asset(
     let kind = VoiceAssetKind::parse(&kind)?;
     let runtime = state.inner().clone();
     tauri::async_runtime::spawn_blocking(move || {
-        runtime
-            .assets
-            .install(kind, github_mirror.as_deref(), |progress: VoiceAssetProgress| {
+        runtime.assets.install(
+            kind,
+            github_mirror.as_deref(),
+            |progress: VoiceAssetProgress| {
                 let _ = app.emit("voice-asset-progress", progress);
-            })?;
+            },
+        )?;
         Ok::<VoiceRuntimeStatus, String>(status(&runtime))
     })
     .await
@@ -111,11 +113,14 @@ pub fn speak_text(
     state: tauri::State<Arc<VoiceRuntime>>,
     text: String,
     speed: Option<f32>,
+    speaker_id: Option<i32>,
 ) -> Result<u64, String> {
     let callback = Arc::new(move |event: SpeechPlaybackEvent| {
         let _ = app.emit("voice-playback", event);
     });
-    state.speech.speak(text, speed.unwrap_or(1.0), callback)
+    state
+        .speech
+        .speak(text, speed.unwrap_or(1.0), speaker_id, callback)
 }
 
 #[tauri::command]

src/components/chat/shared/SpeechButton.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { LoaderCircle, Square, Volume2 } from 'lucide-react'
+import { useAppStore } from '../../../stores/appStore'
 import { openVoiceInputSettings } from '../../../utils/voiceInput'
 import {
   getVoiceRuntimeStatus,
@@ -16,6 +17,7 @@ interface SpeechButtonProps {
 }
 
 export function SpeechButton({ text, label }: SpeechButtonProps) {
+  const kokoroSpeakerId = useAppStore((state) => state.kokoroSpeakerId)
   const [installed, setInstalled] = useState(false)
   const [requestId, setRequestId] = useState<number | null>(null)
   const [event, setEvent] = useState<SpeechPlaybackEvent | null>(null)
@@ -51,7 +53,7 @@ export function SpeechButton({ text, label }: SpeechButtonProps) {
       setRequestId(null)
       return
     }
-    const nextRequest = await speakText(text)
+    const nextRequest = await speakText(text, 1, kokoroSpeakerId)
     setRequestId(nextRequest)
   }
 

src/components/settings/VoiceRuntimeSettings.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import {
   Activity,
+  Check,
   Download,
   LoaderCircle,
   Radio,
@@ -10,6 +11,10 @@ import {
   X,
 } from 'lucide-react'
 import i18n from '../../i18n'
+import {
+  getKokoroVoice,
+  KOKORO_CHINESE_VOICES,
+} from '../../config/kokoroVoices'
 import { useAppStore } from '../../stores/appStore'
 import {
   cancelVoiceAssetDownload,
@@ -38,6 +43,10 @@ const text = {
     vadHint: 'Silero detects speech boundaries for continuous conversation.',
     tts: 'Text-to-speech',
     ttsHint: 'Kokoro speaks assistant responses locally in Chinese and English.',
+    voice: 'Chinese voice',
+    voiceHint: 'The selected voice is used for previews, read-aloud, and voice conversations.',
+    female: 'Female',
+    male: 'Male',
     download: 'Download',
     remove: 'Delete',
     cancel: 'Cancel',
@@ -59,6 +68,10 @@ const text = {
     vadHint: 'Silero 用于判断开始说话、结束说话和连续对话轮次。',
     tts: '文字转语音',
     ttsHint: 'Kokoro 在本地朗读助手的中文和英文回答。',
+    voice: '中文音色',
+    voiceHint: '选择后会统一用于试听、消息朗读和实时语音对话。',
+    female: '女声',
+    male: '男声',
     download: '下载',
     remove: '删除',
     cancel: '取消',
@@ -81,6 +94,9 @@ const formatBytes = (bytes: number) => {
 export function VoiceRuntimeSettings() {
   const copy = i18n.resolvedLanguage?.startsWith('zh') ? text.zh : text.en
   const githubMirror = useAppStore((state) => state.githubMirror)
+  const kokoroSpeakerId = useAppStore((state) => state.kokoroSpeakerId)
+  const setKokoroSpeakerId = useAppStore((state) => state.setKokoroSpeakerId)
+  const selectedVoice = getKokoroVoice(kokoroSpeakerId)
   const [status, setStatus] = useState<VoiceRuntimeStatus | null>(null)
   const [progress, setProgress] = useState<VoiceAssetProgress | null>(null)
   const [busy, setBusy] = useState<VoiceAssetKind | null>(null)
@@ -155,7 +171,7 @@ export function VoiceRuntimeSettings() {
         const sample = i18n.resolvedLanguage?.startsWith('zh')
           ? '你好，我是 S-Loop。本地语音播放已经准备好了。'
           : 'Hello, this is S-Loop. Local voice playback is ready.'
-        await speakText(sample)
+        await speakText(sample, 1, kokoroSpeakerId)
       }
     } catch (reason) {
       setError(String(reason))
@@ -218,6 +234,64 @@ export function VoiceRuntimeSettings() {
                     {hint}
                   </p>
 
+                  {asset?.installed && kind === 'tts' && (
+                    <fieldset className="mt-4 rounded-lg border border-border/80 bg-surface p-3">
+                      <legend className="sr-only">{copy.voice}</legend>
+                      <div className="flex items-start justify-between gap-3">
+                        <div>
+                          <div className="text-xs font-semibold text-text">
+                            {copy.voice}
+                          </div>
+                          <p className="mt-0.5 text-[11px] leading-4 text-text-tertiary">
+                            {copy.voiceHint}
+                          </p>
+                        </div>
+                        <span className="shrink-0 rounded-full bg-accent-subtle px-2 py-1 text-[10px] font-bold text-accent">
+                          Kokoro · {selectedVoice.id}
+                        </span>
+                      </div>
+                      <div
+                        className="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-4"
+                        role="radiogroup"
+                        aria-label={copy.voice}
+                      >
+                        {KOKORO_CHINESE_VOICES.map((voice) => {
+                          const selected = voice.id === kokoroSpeakerId
+                          const gender = voice.gender === 'female' ? copy.female : copy.male
+                          return (
+                            <button
+                              key={voice.id}
+                              type="button"
+                              role="radio"
+                              aria-checked={selected}
+                              aria-label={`${voice.nameZh} · ${gender}`}
+                              onClick={() => setKokoroSpeakerId(voice.id)}
+                              className={`relative rounded-lg border px-3 py-2.5 text-left transition-colors ${
+                                selected
+                                  ? 'border-accent bg-accent-subtle text-accent'
+                                  : 'border-border bg-surface-secondary/60 text-text hover:border-accent/45 hover:bg-surface-secondary'
+                              }`}
+                            >
+                              {selected && (
+                                <Check
+                                  size={12}
+                                  className="absolute right-2 top-2"
+                                  aria-hidden="true"
+                                />
+                              )}
+                              <span className="block text-sm font-semibold">
+                                {voice.nameZh}
+                              </span>
+                              <span className="mt-0.5 block text-[10px] opacity-65">
+                                {gender} · ID {voice.id}
+                              </span>
+                            </button>
+                          )
+                        })}
+                      </div>
+                    </fieldset>
+                  )}
+
                   {downloading && currentProgress && (
                     <div className="mt-3">
                       <div className="mb-1 flex justify-between text-[11px] text-text-tertiary">
@@ -277,7 +351,7 @@ export function VoiceRuntimeSettings() {
                           ? copy.installing
                           : playback?.state === 'speaking'
                             ? copy.stop
-                            : copy.test}
+                            : `${copy.test} · ${selectedVoice.nameZh}`}
                       </button>
                     )}
                     {asset?.installed && (

src/config/kokoroVoices.ts

@@ -0,0 +1,28 @@
+export const KOKORO_CHINESE_VOICES = [
+  { id: 45, nameZh: '晓北', nameEn: 'Xiaobei', gender: 'female' },
+  { id: 46, nameZh: '晓妮', nameEn: 'Xiaoni', gender: 'female' },
+  { id: 47, nameZh: '晓晓', nameEn: 'Xiaoxiao', gender: 'female' },
+  { id: 48, nameZh: '晓伊', nameEn: 'Xiaoyi', gender: 'female' },
+  { id: 49, nameZh: '云健', nameEn: 'Yunjian', gender: 'male' },
+  { id: 50, nameZh: '云希', nameEn: 'Yunxi', gender: 'male' },
+  { id: 51, nameZh: '云夏', nameEn: 'Yunxia', gender: 'male' },
+  { id: 52, nameZh: '云扬', nameEn: 'Yunyang', gender: 'male' },
+] as const
+
+export type KokoroChineseVoice = (typeof KOKORO_CHINESE_VOICES)[number]
+export type KokoroSpeakerId = KokoroChineseVoice['id']
+
+export const DEFAULT_KOKORO_SPEAKER_ID: KokoroSpeakerId = 47
+
+export function isKokoroSpeakerId(value: unknown): value is KokoroSpeakerId {
+  return KOKORO_CHINESE_VOICES.some((voice) => voice.id === value)
+}
+
+export function normalizeKokoroSpeakerId(value: unknown): KokoroSpeakerId {
+  return isKokoroSpeakerId(value) ? value : DEFAULT_KOKORO_SPEAKER_ID
+}
+
+export function getKokoroVoice(id: unknown): KokoroChineseVoice {
+  const normalized = normalizeKokoroSpeakerId(id)
+  return KOKORO_CHINESE_VOICES.find((voice) => voice.id === normalized)!
+}

src/stores/appStore.ts

@@ -5,6 +5,11 @@ import type { Session, ProviderConfig, Companion, ProviderInfo, KiloMessage, Mes
 import * as db from '../utils/database'
 import { enrichSession } from '../utils/sessionMeta'
 import { DEFAULT_COLOR_SCHEME } from '../themes'
+import {
+  DEFAULT_KOKORO_SPEAKER_ID,
+  normalizeKokoroSpeakerId,
+  type KokoroSpeakerId,
+} from '../config/kokoroVoices'
 
 interface AppState {
   // Sessions (cached from DB)
@@ -35,6 +40,7 @@ interface AppState {
   workspaceCollapsed: boolean
   workspaceDir: string | null
   fileTreeVersion: number
+  kokoroSpeakerId: KokoroSpeakerId
 
   // Skill mirror config
   githubMirror: string
@@ -88,6 +94,7 @@ interface AppState {
   toggleWorkspace: () => void
   setWorkspaceDir: (dir: string | null) => void
   incrementFileTreeVersion: () => void
+  setKokoroSpeakerId: (speakerId: KokoroSpeakerId) => void
 
   // Actions - Companion
   setCompanion: (companion: Companion | null) => void
@@ -127,6 +134,7 @@ export const useAppStore = create<AppState>()(
       workspaceCollapsed: false,
       workspaceDir: null,
       fileTreeVersion: 0,
+      kokoroSpeakerId: DEFAULT_KOKORO_SPEAKER_ID,
       githubMirror: 'https://mirror.ghproxy.com/https://github.com/',
       npmRegistryMirror: 'https://registry.npmmirror.com',
       companion: null,
@@ -505,6 +513,9 @@ export const useAppStore = create<AppState>()(
       toggleWorkspace: () => set((state) => ({ workspaceCollapsed: !state.workspaceCollapsed })),
       setWorkspaceDir: (dir) => set({ workspaceDir: dir }),
       incrementFileTreeVersion: () => set((state) => ({ fileTreeVersion: state.fileTreeVersion + 1 })),
+      setKokoroSpeakerId: (speakerId) => set({
+        kokoroSpeakerId: normalizeKokoroSpeakerId(speakerId),
+      }),
 
       // ---- Companion actions ----
 
@@ -525,25 +536,33 @@ export const useAppStore = create<AppState>()(
         workspaceDir: state.workspaceDir,
         githubMirror: state.githubMirror,
         npmRegistryMirror: state.npmRegistryMirror,
+        kokoroSpeakerId: state.kokoroSpeakerId,
       }),
-      version: 5,
+      version: 6,
       migrate: (persistedState, version) => {
+        let nextState = persistedState as any
         if (version < 4) {
-          return {
-            ...(persistedState as any),
+          nextState = {
+            ...nextState,
             sessions: [],
             sessionMessages: {},
             streamingMessage: {},
           }
         }
         if (version < 5) {
           // Messages are loaded from SQLite; do not keep full chat history in localStorage.
-          return {
-            ...(persistedState as any),
+          nextState = {
+            ...nextState,
             sessionMessages: {},
           }
         }
-        return persistedState as any
+        if (version < 6) {
+          nextState = {
+            ...nextState,
+            kokoroSpeakerId: normalizeKokoroSpeakerId(nextState.kokoroSpeakerId),
+          }
+        }
+        return nextState
       },
     },
   ),

src/utils/voiceConversation.ts

@@ -1,4 +1,5 @@
 import { speakText, stopSpeaking } from './voiceRuntime'
+import { useAppStore } from '../stores/appStore'
 
 export type VoiceConversationState =
   | 'inactive'
@@ -72,7 +73,7 @@ export const speakVoiceConversationResponse = async (markdown: string) => {
   }
   setVoiceConversationState('speaking')
   try {
-    await speakText(text)
+    await speakText(text, 1, useAppStore.getState().kokoroSpeakerId)
     return true
   } catch (reason) {
     setVoiceConversation(false, 'error', String(reason))

src/utils/voiceRuntime.ts

@@ -1,5 +1,9 @@
 import { invoke } from '@tauri-apps/api/core'
 import { listen } from '@tauri-apps/api/event'
+import {
+  DEFAULT_KOKORO_SPEAKER_ID,
+  type KokoroSpeakerId,
+} from '../config/kokoroVoices'
 
 export type VoiceAssetKind = 'streaming-asr' | 'vad' | 'tts'
 
@@ -63,8 +67,11 @@ export const cancelVoiceAssetDownload = () =>
 export const deleteVoiceAsset = (kind: VoiceAssetKind) =>
   invoke<VoiceRuntimeStatus>('delete_voice_asset', { kind })
 
-export const speakText = (text: string, speed = 1) =>
-  invoke<number>('speak_text', { text, speed })
+export const speakText = (
+  text: string,
+  speed = 1,
+  speakerId: KokoroSpeakerId = DEFAULT_KOKORO_SPEAKER_ID,
+) => invoke<number>('speak_text', { text, speed, speakerId })
 
 export const stopSpeaking = () =>
   invoke<void>('stop_speaking')