Added Support for Kokoro

Kokoro TTS Support

Author: slowsynapse

docs/SUMMARY.md

@@ -35,6 +35,7 @@
 * [Using Coqui Local](./guides/using-coqui.md)
 * [Using Piper ](./guides/using-piper.md)
 * [Using Alltalk TTS](./guides/using-alltalk.md)
+* [Using Kokoro TTS](./guides/using-kokoro.md)
 * [Using RVC](./guides/using-rvc.md)
 
 

docs/guides/using-kokoro.md

@@ -0,0 +1,51 @@
+---
+title: Using Kokoro
+order: 16
+---
+
+Navigate to [Kokoro TTS GitHub repository](https://github.com/hexgrad/kokoro).
+
+## Setting Up Kokoro TTS Server
+
+### Clone the Repository
+```bash
+git clone https://github.com/flukexp/kokoro-tts.git
+cd kokoro-tts
+```
+
+### Create a Virtual Environment
+```bash
+python -m venv venv
+source venv/bin/activate  # On Windows, use `venv\Scripts\activate`
+```
+
+### Install Dependencies
+```bash
+pip install -r requirements.txt
+```
+
+## Running the Server
+
+### Start the FastAPI Server
+```bash
+python server.py
+```
+
+## Make sure Kokoro is enabled for TTS:
+
+```bash
+Settings -> Text-to-Speech -> TTS Backend -> Kokoro
+```
+
+## Set the voice
+
+```bash
+Settings -> Text-to-Speech -> Kokoro -> Voice
+```
+
+## Using Kokoro with OpenAI TTS
+You can use Kokoro by choosing OpenAI and configuring your Kokoro endpoint and voice.
+
+### Notes
+- Kokoro TTS can be used as a local text-to-speech backend in your application.
+- If you want to explore more models or functionalities, refer to the official [Kokoro TTS GitHub repository](https://github.com/hexgrad/kokoro).

src/components/settings.tsx

@@ -72,6 +72,7 @@ import { AmicaLifePage } from "./settings/AmicaLifePage";
 import { useVrmStoreContext } from "@/features/vrmStore/vrmStoreContext";
 import { OpenRouterSettings } from "./settings/OpenRouterSettingsPage";
 import { ExternalAPIPage } from "./settings/ExternalAPIPage";
+import { KokoroSettingsPage } from "./settings/KokoroSettingsPage";
 
 
 export const Settings = ({
@@ -135,6 +136,9 @@ export const Settings = ({
 
   const [localXTTSUrl, setLocalXTTSUrl] = useState(config("localXTTS_url"));
 
+  const [kokoroUrl, setKokoroUrl] = useState(config("kokoro_url"));
+  const [kokoroVoice, setKokoroVoice] = useState(config("kokoro_voice"));
+
   const [visionBackend, setVisionBackend] = useState(config("vision_backend"));
   const [visionLlamaCppUrl, setVisionLlamaCppUrl] = useState(config("vision_llamacpp_url"));
   const [visionOllamaUrl, setVisionOllamaUrl] = useState(config("vision_ollama_url"));
@@ -284,6 +288,7 @@ export const Settings = ({
     rvcUrl,rvcEnabled,rvcModelName,rvcIndexPath,rvcF0upKey,rvcF0Method,rvcIndexRate,rvcFilterRadius,,rvcResampleSr,rvcRmsMixRate,rvcProtect,
     coquiLocalUrl,coquiLocalVoiceId,
     localXTTSUrl,
+    kokoroUrl, kokoroVoice,
     visionBackend,
     visionLlamaCppUrl,
     visionOllamaUrl, visionOllamaModel,
@@ -368,7 +373,7 @@ export const Settings = ({
 
     case 'tts':
       return <MenuPage
-        keys={["tts_backend", "elevenlabs_settings", "speecht5_settings", "coquiLocal_settings", "openai_tts_settings", "piper_settings", "localXTTS_settings", "rvc_settings"]}
+        keys={["tts_backend", "elevenlabs_settings", "speecht5_settings", "coquiLocal_settings", "openai_tts_settings", "piper_settings", "localXTTS_settings", "kokoro_settings", "rvc_settings"]}
         menuClick={handleMenuClick} />;
 
     case 'stt':
@@ -583,6 +588,15 @@ export const Settings = ({
         setSettingsUpdated={setSettingsUpdated}
         />
 
+    case 'kokoro_settings':
+      return <KokoroSettingsPage
+        kokoroUrl={kokoroUrl}
+        kokoroVoice={kokoroVoice}
+        setKokoroVoice={setKokoroVoice}
+        setKokoroUrl={setKokoroUrl}
+        setSettingsUpdated={setSettingsUpdated}
+        />
+
     case 'rvc_settings':
       return <RVCSettingsPage
         rvcUrl={rvcUrl}

src/components/settings/CoquiLocalSettingsPage.tsx

@@ -61,6 +61,7 @@ export function CoquiLocalSettingsPage({
         <li className="py-4">
           <FormRow label={t("Voice ID")}>
             <select
+              className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
               value={coquiLocalVoiceId}
               onChange={(event: React.ChangeEvent<any>) => {
                 event.preventDefault();

src/components/settings/KokoroSettingsPage.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BasicPage, FormRow, NotUsingAlert } from './common';
+import { TextInput } from "@/components/textInput";
+import { config, updateConfig } from "@/utils/config";
+import { kokoroVoiceList } from '@/features/kokoro/kokoro';
+
+export function KokoroSettingsPage({
+  kokoroUrl,
+  kokoroVoice,
+  setKokoroUrl,
+  setKokoroVoice,
+  setSettingsUpdated,
+}: {
+  kokoroUrl: string;
+  kokoroVoice: string;
+  setKokoroUrl: (key: string) => void;
+  setSettingsUpdated: (updated: boolean) => void;
+  setKokoroVoice: (key: string) => void;
+}) {
+  const { t } = useTranslation();
+  const [voiceList, setVoiceList] = useState<{ key: string; label: string }[]>([]);
+
+  useEffect(() => {
+    async function fetchVoiceList() {
+      try {
+        const data = await kokoroVoiceList();
+        if (data && data.voices) {
+          const formattedVoices = data.voices.map((voice: string) => ({
+            key: voice,
+            label: voice,
+          }));
+          setVoiceList(formattedVoices);
+        }
+      } catch (error) {
+        console.error("Error fetching kokoro voice list:", error);
+      }
+    }
+    fetchVoiceList();
+  }, []);
+
+  return (
+    <BasicPage
+      title={t("Kokoro") + " "+ t("Settings")}
+      description={t("kokoro_desc", "Configure Kokoro")}
+    >
+      { config("tts_backend") !== "kokoro" && (
+        <NotUsingAlert>
+          {t("not_using_alert", "You are not currently using {{name}} as your {{what}} backend. These settings will not be used.", {name: t("Kokoro"), what: t("TTS")})}
+        </NotUsingAlert>
+      ) }
+      <ul role="list" className="divide-y divide-gray-100 max-w-xs">
+        <li className="py-4">
+          <FormRow label={t("URL")}>
+            <TextInput
+              value={kokoroUrl}
+              onChange={(event: React.ChangeEvent<any>) => {
+                setKokoroUrl(event.target.value);
+                updateConfig("kokoro_url", event.target.value);
+                setSettingsUpdated(true);
+              }}
+            />
+          </FormRow>
+        </li>
+        <li className="py-4">
+          <FormRow label={t("Voices")}>
+            <select
+              className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              value={kokoroVoice}
+              onChange={(event: React.ChangeEvent<any>) => {
+                event.preventDefault();
+                setKokoroVoice(event.target.value);
+                updateConfig("kokoro_voice", event.target.value);
+                setSettingsUpdated(true);
+              }}
+            >
+              {voiceList.map((voice) => (
+                <option key={voice.key} value={voice.key}>{t(voice.label)}</option>
+              ))}
+            </select>
+          </FormRow>
+        </li>
+      </ul>
+    </BasicPage>
+  );
+}

src/components/settings/TTSBackendPage.tsx

@@ -11,6 +11,7 @@ const ttsEngines = [
   {key: "localXTTS",  label: "Alltalk TTS"}, // Our local TTS endpoint (XTTS based)
   {key: "piper",      label: "Piper"},
   {key: "coquiLocal", label: "Coqui Local"},
+  {key: "kokoro",     label: "Kokoro"},
 ];
 
 function idToTitle(id: string): string {
@@ -57,7 +58,7 @@ export function TTSBackendPage({
             </select>
           </FormRow>
         </li>
-        { ["elevenlabs", "speecht5", "openai_tts", "piper", "coquiLocal", "localXTTS"].includes(ttsBackend) && (
+        { ["elevenlabs", "speecht5", "openai_tts", "piper", "coquiLocal", "localXTTS", "kokoro"].includes(ttsBackend) && (
           <li className="py-4">
             <FormRow label={`${t("Configure")} ${t(idToTitle(ttsBackend))}`}>
               <button

src/components/settings/common.tsx

@@ -171,15 +171,16 @@ export function getIconFromPage(page: string): JSX.Element {
     case 'elevenlabs_settings': return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'speecht5_settings':   return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'openai_tts_settings': return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
-    case 'piper_settings': return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
-    case 'rvc_settings': return <CogIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
+    case 'piper_settings':      return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
+    case 'rvc_settings':        return <CogIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'coquiLocal_settings': return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
-    case 'localXTTS_settings': return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
+    case 'localXTTS_settings':  return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
+    case 'kokoro_settings':  return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
 
-    case 'stt_backend':         return <PencilSquareIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
-    case 'stt_wake_word':  return <MoonIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
+    case 'stt_backend':              return <PencilSquareIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
+    case 'stt_wake_word':            return <MoonIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'whisper_openai_settings':  return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
-    case 'whispercpp_settings': return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
+    case 'whispercpp_settings':      return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
 
     case 'vision_backend':           return <EyeDropperIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'vision_llamacpp_settings': return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
@@ -231,6 +232,7 @@ function getLabelFromPage(page: string): string {
     case 'rvc_settings':        return t('RVC');
     case 'coquiLocal_settings': return t('Coqui Local');
     case 'localXTTS_settings':  return t('Alltalk');
+    case 'kokoro_settings':  return t('Kokoro');
 
     case 'vision_backend':           return t('Vision Backend');
     case 'vision_llamacpp_settings': return t('LLama.cpp');

src/features/chat/chat.ts

@@ -43,6 +43,7 @@ import { getOpenRouterChatResponseStream } from './openRouterChat';
 import { handleUserInput } from '../externalAPI/externalAPI';
 import { loadVRMAnimation } from '@/lib/VRMAnimation/loadVRMAnimation';
 import isDev from '@/utils/isDev';
+import { kokoro } from "../kokoro/kokoro";
 
 type Speak = {
   audioBuffer: ArrayBuffer | null;
@@ -663,6 +664,10 @@ export class Chat {
           const voice = await coquiLocal(talk.message);
           return voice.audio;
         }
+        case "kokoro": {
+          const voice = await kokoro(talk.message);
+          return voice.audio;
+        }
       }
     } catch (e: any) {
       console.error(e.toString());

src/features/kokoro/kokoro.ts

@@ -0,0 +1,47 @@
+import { config } from '@/utils/config';
+
+export async function kokoro(
+  message: string,
+) {
+  try {
+    const res = await fetch(`${config("kokoro_url")}/tts`, {
+      method: "POST",
+      body: JSON.stringify({
+        text: message,
+        voice: config("kokoro_voice"),
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    if (! res.ok) {
+      console.error(res);
+      throw new Error("Kokoro TTS API Error");
+    }
+    const data = (await res.arrayBuffer()) as any;
+
+    return { audio: data };
+  } catch (e) {
+    console.error('ERROR', e);
+    throw new Error("Kokoro TTS API Error");
+  }
+}
+
+export async function kokoroVoiceList(
+) {
+  try {
+    const response = await fetch(`${config("kokoro_url")}/voices`, {
+      method: 'GET',
+      headers: {
+        'Accept': "application/text",
+      }
+    })
+
+    return response.json();
+
+  } catch (error) {
+
+    console.error('Error fetching kokoro voice:', error);
+    throw error;
+  }
+}

src/utils/config.ts

@@ -77,6 +77,8 @@ export const defaults = {
   rvc_protect: process.env.NEXT_PUBLIC_RVC_PROTECT ?? '0.33',
   coquiLocal_url: process.env.NEXT_PUBLIC_COQUILOCAL_URL ?? 'http://localhost:5002',
   coquiLocal_voiceid: process.env.NEXT_PUBLIC_COQUILOCAL_VOICEID ?? 'p240',
+  kokoro_url: process.env.NEXT_PUBLIC_KOKORO_URL ?? 'http://localhost:8080',
+  kokoro_voice: process.env.NEXT_PUBLIC_KOKORO_VOICE ?? 'af_bella',
   piper_url: process.env.NEXT_PUBLIC_PIPER_URL ?? 'https://i-love-amica.com:5000/tts',
   elevenlabs_apikey: process.env.NEXT_PUBLIC_ELEVENLABS_APIKEY ??'',
   elevenlabs_voiceid: process.env.NEXT_PUBLIC_ELEVENLABS_VOICEID ?? '21m00Tcm4TlvDq8ikWAM',