Added support for coqui local tts server

src/components/settings.tsx

@@ -43,10 +43,9 @@ import { KoboldAiSettingsPage } from './settings/KoboldAiSettingsPage';
 import { TTSBackendPage } from './settings/TTSBackendPage';
 import { ElevenLabsSettingsPage } from './settings/ElevenLabsSettingsPage';
 import { SpeechT5SettingsPage } from './settings/SpeechT5SettingsPage';
-import { CoquiSettingsPage } from './settings/CoquiSettingsPage';
 import { OpenAITTSSettingsPage } from './settings/OpenAITTSSettingsPage';
-
 import { PiperSettingsPage } from './settings/PiperSettingsPage';
+import { CoquiLocalSettingsPage } from './settings/CoquiLocalSettingsPage';
 
 import { STTBackendPage } from './settings/STTBackendPage';
 import { STTWakeWordSettingsPage } from './settings/STTWakeWordSettingsPage';
@@ -96,16 +95,16 @@ export const Settings = ({
 
   const [speechT5SpeakerEmbeddingsUrl, setSpeechT5SpeakerEmbeddingsUrl] = useState(config("speecht5_speaker_embedding_url"));
 
-  const [coquiApiKey, setCoquiApiKey] = useState(config("coqui_apikey"));
-  const [coquiVoiceId, setCoquiVoiceId] = useState(config("coqui_voice_id"));
-
   const [openAITTSApiKey, setOpenAITTSApiKey] = useState(config("openai_tts_apikey"));
   const [openAITTSUrl, setOpenAITTSUrl] = useState(config("openai_tts_url"));
   const [openAITTSModel, setOpenAITTSModel] = useState(config("openai_tts_model"));
   const [openAITTSVoice, setOpenAITTSVoice] = useState(config("openai_tts_voice"));
 
   const [piperUrl, setPiperUrl] = useState(config("piper_url"));
 
+  const [coquiLocalUrl, setCoquiLocalUrl] = useState(config("coquiLocal_url"));
+  const [coquiLocalVoiceId, setCoquiLocalVoiceId] = useState(config("coquiLocal_voiceid"));
+
   const [visionBackend, setVisionBackend] = useState(config("vision_backend"));
   const [visionLlamaCppUrl, setVisionLlamaCppUrl] = useState(config("vision_llamacpp_url"));
   const [visionOllamaUrl, setVisionOllamaUrl] = useState(config("vision_ollama_url"));
@@ -221,9 +220,9 @@ export const Settings = ({
     ttsBackend,
     elevenlabsApiKey, elevenlabsVoiceId,
     speechT5SpeakerEmbeddingsUrl,
-    coquiApiKey, coquiVoiceId,
     openAITTSApiKey, openAITTSUrl, openAITTSModel, openAITTSVoice,
     piperUrl,
+    coquiLocalUrl,coquiLocalVoiceId,
     visionBackend,
     visionLlamaCppUrl,
     visionOllamaUrl, visionOllamaModel,
@@ -264,7 +263,7 @@ export const Settings = ({
 
     case 'tts':
       return <MenuPage
-        keys={["tts_backend", "elevenlabs_settings", "speecht5_settings", "coqui_settings", "openai_tts_settings", "piper_settings"]}
+        keys={["tts_backend", "elevenlabs_settings", "speecht5_settings", "openai_tts_settings", "piper_settings", "coquiLocal_settings"]}
         menuClick={handleMenuClick} />;
 
     case 'stt':
@@ -403,15 +402,6 @@ export const Settings = ({
         setSettingsUpdated={setSettingsUpdated}
         />
 
-    case 'coqui_settings':
-      return <CoquiSettingsPage
-        coquiApiKey={coquiApiKey}
-        setCoquiApiKey={setCoquiApiKey}
-        coquiVoiceId={coquiVoiceId}
-        setCoquiVoiceId={setCoquiVoiceId}
-        setSettingsUpdated={setSettingsUpdated}
-        />
-
     case 'openai_tts_settings':
       return <OpenAITTSSettingsPage
         openAITTSApiKey={openAITTSApiKey}
@@ -431,6 +421,15 @@ export const Settings = ({
         setPiperUrl={setPiperUrl}
         setSettingsUpdated={setSettingsUpdated}
         />
+
+    case 'coquiLocal_settings':
+      return <CoquiLocalSettingsPage
+        coquiLocalUrl={coquiLocalUrl}
+        coquiLocalVoiceId={coquiLocalVoiceId}
+        setCoquiLocalVoiceId={setCoquiLocalVoiceId}
+        setCoquiLocalUrl={setCoquiLocalUrl}
+        setSettingsUpdated={setSettingsUpdated}
+        />
 
     case'stt_backend':
       return <STTBackendPage

src/components/settings/CoquiLocalSettingsPage.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 { coquiLocalVoiceIdList } from '@/features/coquiLocal/coquiLocal';
+
+export function CoquiLocalSettingsPage({
+  coquiLocalUrl,
+  setCoquiLocalUrl,
+  setSettingsUpdated,
+  coquiLocalVoiceId,
+  setCoquiLocalVoiceId
+}: {
+  coquiLocalUrl: string;
+  coquiLocalVoiceId: string;
+  setCoquiLocalUrl: (key: string) => void;
+  setSettingsUpdated: (updated: boolean) => void;
+  setCoquiLocalVoiceId: (key: string) => void;
+}) {
+  const { t } = useTranslation();
+  const [voiceList, setVoiceList] = useState<string[]>([]);
+
+  useEffect(() => {
+    async function fetchVoiceList() {
+      try {
+        const data = await coquiLocalVoiceIdList();
+        if (data && data.list) {
+          setVoiceList(data.list);
+        }
+      } catch (error) {
+        console.error('Error fetching voice list:', error);
+      }
+    }
+    fetchVoiceList();
+  }, []);
+
+  return (
+    <BasicPage
+      title={t("CoquiLocal") + " "+ t("Settings")}
+      description={t("coquiLocal_desc", "Configure CoquiLocal")}
+    >
+      { config("tts_backend") !== "coquiLocal" && (
+        <NotUsingAlert>
+          {t("not_using_alert", "You are not currently using {{name}} as your {{what}} backend. These settings will not be used.", {name: t("CoquiLocal"), 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={coquiLocalUrl}
+              onChange={(event: React.ChangeEvent<any>) => {
+                setCoquiLocalUrl(event.target.value);
+                updateConfig("coquiLocal_url", event.target.value);
+                setSettingsUpdated(true);
+              }}
+            />
+          </FormRow>
+        </li>
+        <li className="py-4">
+          <FormRow label={t("Voice ID")}>
+            <select
+              value={coquiLocalVoiceId}
+              onChange={(event: React.ChangeEvent<any>) => {
+                event.preventDefault();
+                setCoquiLocalVoiceId(event.target.value);
+                updateConfig("coquiLocal_voiceid", event.target.value);
+                setSettingsUpdated(true);
+              }}
+            >
+              {voiceList.map((voiceId) =>
+                <option
+                  key={voiceId}
+                  value={voiceId}
+                >
+                  {voiceId}
+                </option>
+              )}
+            </select>
+          </FormRow>
+        </li>
+      </ul>
+    </BasicPage>
+  );
+}

src/components/settings/TTSBackendPage.tsx

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

src/components/settings/common.tsx

@@ -160,9 +160,9 @@ export function getIconFromPage(page: string): JSX.Element {
     case 'tts_backend':         return <SpeakerWaveIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     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 'coqui_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 'coquiLocal_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" />;
@@ -207,9 +207,9 @@ function getLabelFromPage(page: string): string {
     case 'tts_backend':         return t('TTS Backend');
     case 'elevenlabs_settings': return t('ElevenLabs');
     case 'speecht5_settings':   return t('SpeechT5');
-    case 'coqui_settings':      return t('Coqui');
     case 'openai_tts_settings': return t('OpenAI');
     case 'piper_settings':      return t('Piper');
+    case 'coquiLocal_settings':      return t('coquiLocal');
 
     case 'vision_backend':           return t('Vision Backend');
     case 'vision_llamacpp_settings': return t('LLama.cpp');

src/features/chat/chat.ts

@@ -10,9 +10,9 @@ import { getWindowAiChatResponseStream } from './windowAiChat';
 import { getOllamaChatResponseStream, getOllamaVisionChatResponse } from './ollamaChat';
 import { getKoboldAiChatResponseStream } from './koboldAiChat';
 
-import { piper } from "@/features/piper/piper";
+import { coquiLocal} from "@/features/coquiLocal/coquiLocal";
+import { piper} from "@/features/piper/piper";
 import { elevenlabs } from "@/features/elevenlabs/elevenlabs";
-import { coqui } from "@/features/coqui/coqui";
 import { speecht5 } from "@/features/speecht5/speecht5";
 import { openaiTTS } from "@/features/openaiTTS/openaiTTS";
 import { localXTTSTTS} from "@/features/localXTTS/localXTTS";
@@ -476,11 +476,6 @@ export class Chat {
           const voice = await speecht5(talk.message, speakerEmbeddingUrl);
           return voice.audio;
         }
-        case 'coqui': {
-          const voiceId = config('coqui_voice_id');
-          const voice = await coqui(talk.message, voiceId, talk.style);
-          return voice.audio;
-        }
         case 'openai_tts': {
           const voice = await openaiTTS(talk.message);
           return voice.audio;
@@ -492,6 +487,10 @@ export class Chat {
           const voice = await piper(talk.message);
           return voice.audio;
         }
+        case 'coquiLocal': {
+          const voice = await coquiLocal(talk.message);
+          return voice.audio;
+        }
       }
     } catch (e: any) {
       console.error(e.toString());