Merge pull request #148 from ArbiusIntern/moshi

Moshi integration [WebXR]

Author: kasumi-1

package-lock.json

@@ -51,6 +51,7 @@
     "iwer": "^1.0.4",
     "lil-gui": "^0.19.2",
     "next": "^14.2.13",
+    "ogg-opus-decoder": "^1.6.14",
     "opus-recorder": "^8.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package.json

@@ -42,6 +42,7 @@ import { ChatGPTSettingsPage } from './settings/ChatGPTSettingsPage';
 import { LlamaCppSettingsPage } from './settings/LlamaCppSettingsPage';
 import { OllamaSettingsPage } from './settings/OllamaSettingsPage';
 import { KoboldAiSettingsPage } from './settings/KoboldAiSettingsPage';
+import { MoshiSettingsPage } from './settings/MoshiSettingsPage';
 
 import { TTSBackendPage } from './settings/TTSBackendPage';
 import { ElevenLabsSettingsPage } from './settings/ElevenLabsSettingsPage';
@@ -96,6 +97,7 @@ export const Settings = ({
   const [koboldAiUrl, setKoboldAiUrl] = useState(config("koboldai_url"));
   const [koboldAiUseExtra, setKoboldAiUseExtra] = useState<boolean>(config("koboldai_use_extra") === 'true' ? true : false);
   const [koboldAiStopSequence, setKoboldAiStopSequence] = useState(config("koboldai_stop_sequence"));
+  const [moshiUrl, setMoshiUrl] = useState(config("moshi_url"));
 
   const [ttsBackend, setTTSBackend] = useState(config("tts_backend"));
   const [elevenlabsApiKey, setElevenlabsApiKey] = useState(config("elevenlabs_apikey"));
@@ -261,6 +263,7 @@ export const Settings = ({
     llamaCppUrl, llamaCppStopSequence,
     ollamaUrl, ollamaModel,
     koboldAiUrl, koboldAiUseExtra, koboldAiStopSequence,
+    moshiUrl,
     ttsBackend,
     elevenlabsApiKey, elevenlabsVoiceId,
     speechT5SpeakerEmbeddingsUrl,
@@ -341,7 +344,7 @@ export const Settings = ({
 
     case 'chatbot':
       return <MenuPage
-        keys={["chatbot_backend", "name", "system_prompt", "arbius_llm_settings", "chatgpt_settings", "llamacpp_settings", "ollama_settings", "koboldai_settings"]}
+        keys={["chatbot_backend", "name", "system_prompt", "arbius_llm_settings", "chatgpt_settings", "llamacpp_settings", "ollama_settings", "koboldai_settings", "moshi_settings"]}
         menuClick={handleMenuClick} />;
 
     case 'language':
@@ -486,6 +489,13 @@ export const Settings = ({
         setSettingsUpdated={setSettingsUpdated}
         />
 
+    case 'moshi_settings':
+      return <MoshiSettingsPage
+        moshiUrl={moshiUrl}
+        setMoshiUrl={setMoshiUrl}
+        setSettingsUpdated={setSettingsUpdated}
+        />
+
     case 'tts_backend':
       return <TTSBackendPage
         ttsBackend={ttsBackend}

src/components/settings.tsx

@@ -13,6 +13,7 @@ const chatbotBackends = [
   ...isTauri() ? [] : [{key: "windowai", label: "Window.ai"}], // Hides Window.ai when using the desktop app
   {key: "ollama",     label: "Ollama"},
   {key: "koboldai",   label: "KoboldAI"},
+  {key: "moshi",      label: "Moshi"},
 ];
 
 function idToTitle(id: string): string {
@@ -73,7 +74,7 @@ export function ChatbotBackendPage({
             </select>
           </FormRow>
         </li>
-        { ["arbius_llm", "chatgpt", "llamacpp", "ollama", "koboldai"].includes(chatbotBackend) && (
+        { ["arbius_llm", "chatgpt", "llamacpp", "ollama", "koboldai", "moshi"].includes(chatbotBackend) && (
           <li className="py-4">
             <FormRow label={`${t("Configure")} ${t(idToTitle(chatbotBackend))}`}>
               <button

src/components/settings/ChatbotBackendPage.tsx

@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next';
+
+import { BasicPage, FormRow, NotUsingAlert } from "./common";
+import { TextInput } from "@/components/textInput";
+import { config, updateConfig } from "@/utils/config";
+
+export function MoshiSettingsPage({
+  moshiUrl,
+  setMoshiUrl,
+  setSettingsUpdated,
+}: {
+  moshiUrl: string;
+  setMoshiUrl: (url: string) => void;
+  setSettingsUpdated: (updated: boolean) => void;
+}) {
+  const { t } = useTranslation();
+
+  const description = <>{t("moshi_desc", "Moshi is a speech-text foundation model and full-duplex spoken dialogue framework.")} <a href="https://kyutai.org/">{t("kyutai")}</a></>;
+
+  return (
+    <BasicPage
+      title={t("Moshi") + " " + t("Settings")}
+      description={description}
+    >
+      { config("chatbot_backend") !== "moshi" && (
+        <NotUsingAlert>
+          {t("not_using_alert", "You are not currently using {{name}} as your {{what}} backend. These settings will not be used.", {name: t("Moshi"), what: t("ChatBot")})}
+        </NotUsingAlert>
+      ) }
+      <ul role="list" className="divide-y divide-gray-100 max-w-xs">
+        <li className="py-4">
+          <FormRow label={t("API URL")}>
+            <TextInput
+              value={moshiUrl}
+              onChange={(event: React.ChangeEvent<any>) => {
+                setMoshiUrl(event.target.value);
+                updateConfig("moshi_url", event.target.value);
+                setSettingsUpdated(true);
+              }}
+            />
+          </FormRow>
+        </li>
+      </ul>
+    </BasicPage>
+  );
+}

src/components/settings/MoshiSettingsPage.tsx

@@ -160,6 +160,7 @@ export function getIconFromPage(page: string): JSX.Element {
     case 'llamacpp_settings':   return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'ollama_settings':     return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'koboldai_settings':   return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
+    case 'moshi_settings':      return <AdjustmentsHorizontalIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'name':                return <IdentificationIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
     case 'system_prompt':       return <DocumentTextIcon className="h-5 w-5 flex-none text-gray-800" aria-hidden="true" />;
 
@@ -213,6 +214,7 @@ function getLabelFromPage(page: string): string {
     case 'llamacpp_settings':   return t('LLama.cpp');
     case 'ollama_settings':     return t('Ollama');
     case 'koboldai_settings':   return t('KoboldAI');
+    case 'moshi_settings':      return t('Moshi');
     case 'name'         :       return t('Name');
     case 'system_prompt':       return t('System Prompt');