elevenlabs new model and options (#357)

* elevenlabs new model and options

* beautify

* fix review comments

src/api/constants.ts

@@ -1,5 +1,6 @@
 import type {
   Currency,
+  ElevenLabsOptions,
   LimitField,
   LimitUnitOption,
   PasswordSettings,
@@ -210,6 +211,15 @@ export const GOOGLE_CUSTOM_VOICES_REPORTED_USAGE = [
   { name: "REALTIME", value: "REALTIME" },
   { name: "OFFLINE", value: "OFFLINE" },
 ];
+// Eleven Labs options
+export const DEFAULT_ELEVENLABS_OPTIONS: Partial<ElevenLabsOptions> = {
+  optimize_streaming_latency: 100,
+  voice_settings: {
+    stability: 0.5,
+    similarity_boost: 0.5,
+    use_speaker_boost: true,
+  },
+};
 /** Password Length options */
 
 export const PASSWORD_MIN = 8;

src/api/types.ts

@@ -417,6 +417,7 @@ export interface SpeechCredential {
   cobalt_server_uri: null | string;
   model_id: null | string;
   model: null | string;
+  options: null | string;
 }
 
 export interface Alert {
@@ -712,3 +713,13 @@ export interface GetLanguages extends GetVoices {
 export interface LanguageOption extends SelectorOptions {
   [key: string]: unknown;
 }
+
+export interface ElevenLabsOptions {
+  optimize_streaming_latency: number;
+  voice_settings: Partial<{
+    similarity_boost: number;
+    stability: number;
+    style: number;
+    use_speaker_boost: boolean;
+  }>;
+}

src/containers/internal/views/speech-services/form.tsx

@@ -66,6 +66,7 @@ import type {
 } from "src/api/types";
 import { setAccountFilter, setLocation } from "src/store/localStore";
 import {
+  DEFAULT_ELEVENLABS_OPTIONS,
   DEFAULT_GOOGLE_CUSTOM_VOICES_REPORTED_USAGE,
   DISABLE_CUSTOM_SPEECH,
   GOOGLE_CUSTOM_VOICES_REPORTED_USAGE,
@@ -140,6 +141,9 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
   const [customVoices, setCustomVoices] = useState<GoogleCustomVoice[]>([]);
   const [customVoicesMessage, setCustomVoicesMessage] = useState("");
   const ttsModels = useTtsModels();
+  const [optionsInitialChecked, setOptionsInitialChecked] = useState(false);
+  const [options, setOptions] = useState("");
+  const [tmpOptions, setTmpOptions] = useState("");
 
   const handleFile = (file: File) => {
     const handleError = () => {
@@ -285,6 +289,9 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
         ...((vendor === VENDOR_ELEVENLABS || vendor === VENDOR_WHISPER) && {
           model_id: ttsModelId || null,
         }),
+        ...(vendor === VENDOR_ELEVENLABS && {
+          options: options || null,
+        }),
       };
 
       if (credential && credential.data) {
@@ -502,6 +509,10 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
         setTtsModelId(credential.data.model_id);
       }
     }
+    if (credential?.data?.options) {
+      setOptions(credential.data.options);
+      setOptionsInitialChecked(true);
+    }
     if (credential?.data?.vendor === VENDOR_GOOGLE) {
       // let try to check if there is custom voices
       getGoogleCustomVoices({
@@ -1124,6 +1135,86 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
               />
             </fieldset>
           )}
+        {vendor === VENDOR_ELEVENLABS && (
+          <fieldset>
+            <Checkzone
+              hidden
+              name="cz_speech_credential_options"
+              label="Extra Options"
+              initialCheck={optionsInitialChecked}
+              handleChecked={(e) => {
+                if (e.target.checked) {
+                  setOptions(
+                    tmpOptions
+                      ? tmpOptions
+                      : JSON.stringify(DEFAULT_ELEVENLABS_OPTIONS, null, 2)
+                  );
+                }
+                if (!e.target.checked) {
+                  setTmpOptions(options);
+                  setOptions("");
+                }
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-end",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center", // Align items vertically in the center
+                  }}
+                >
+                  <a
+                    href="https://elevenlabs.io/docs/api-reference/streaming"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ marginRight: "10px", fontSize: "16px" }}
+                  >
+                    Docs
+                  </a>
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      if (options) {
+                        setOptions((prev) => {
+                          try {
+                            return JSON.stringify(JSON.parse(options), null, 2);
+                          } catch (err) {
+                            return prev;
+                          }
+                        });
+                      }
+                    }}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: "green",
+                      fontSize: "16px",
+                    }}
+                  >
+                    Beautify
+                  </button>
+                </div>
+
+                <textarea
+                  id="input_speech_credential_options"
+                  name="speech_credential_options"
+                  rows={6}
+                  cols={55}
+                  placeholder="extra options in Json"
+                  value={options}
+                  onChange={(e) => setOptions(e.target.value)}
+                />
+              </div>
+            </Checkzone>
+          </fieldset>
+        )}
         {regions &&
           regions[vendor as keyof RegionVendors] &&
           vendor !== VENDOR_IBM &&

src/vendor/speech-synthsis-models/elevenlabs-models.ts

@@ -1,9 +1,11 @@
 import type { Model } from "../types";
 
 export const models: Model[] = [
+  { name: "Turbo v2", value: "eleven_turbo_v2" },
   { name: "Multilingual v2", value: "eleven_multilingual_v2" },
   { name: "Multilingual v1", value: "eleven_multilingual_v1" },
   { name: "English v1", value: "eleven_monolingual_v1" },
+  { name: "English v2", value: "eleven_english_sts_v2" },
 ];
 
 export default models;