added ChaptGPT (selfhosted) option with the objective of use custom hosted voices

Author: gerardob

css/options.css

@@ -234,6 +234,22 @@ input[type=checkbox], input[type=radio] {
   margin-top: 1.5em;
 }
 
+#voice-custom-input-div {
+  display: none;
+}
+
+div.inline-div { display: table; }
+div.inline-input {
+    display: table-cell;
+    width: 100%;
+    margin: 1px;
+}
+#voice-custom-input {
+    display: table-cell;
+    width: 100%;
+    margin: 1px;
+}
+
 #rate-input-div {
   display: none;
 }

js/defaults.js

@@ -266,7 +266,7 @@ function parseUrl(url) {
  */
 function getSettings(names) {
   return new Promise(function(fulfill) {
-    brapi.storage.local.get(names || ["voiceName", "rate", "pitch", "volume", "showHighlighting", "languages", "highlightFontSize", "highlightWindowSize", "preferredVoices"], fulfill);
+    brapi.storage.local.get(names || ["voiceName", "voiceCustom", "rate", "pitch", "volume", "showHighlighting", "languages", "highlightFontSize", "highlightWindowSize", "preferredVoices"], fulfill);
   });
 }
 
@@ -278,7 +278,7 @@ function updateSettings(items) {
 
 function clearSettings(names) {
   return new Promise(function(fulfill) {
-    brapi.storage.local.remove(names || ["voiceName", "rate", "pitch", "volume", "showHighlighting", "languages", "highlightFontSize", "highlightWindowSize", "preferredVoices"], fulfill);
+    brapi.storage.local.remove(names || ["voiceName", "voiceCustom", "rate", "pitch", "volume", "showHighlighting", "languages", "highlightFontSize", "highlightWindowSize", "preferredVoices"], fulfill);
   });
 }
 

js/options.js

@@ -62,15 +62,31 @@ function initialize(allVoices, settings) {
     .val(settings.voiceName || "")
     .change(function() {
       var voiceName = $(this).val();
-      if (voiceName == "@custom") location.href = "custom-voices.html";
-      else if (voiceName == "@premium") brapi.tabs.create({url: "premium-voices.html"});
-      else if (voiceName == "@piper") bgPageInvoke("managePiperVoices")
-      else saveSettings({voiceName: voiceName});
+      if (voiceName == "ChatGPT English (selfhosted)") {
+        $("#voice-custom-input-div").show();
+        saveSettings({voiceName: voiceName});
+      } else {
+        $("#voice-custom-input-div").hide();
+        if (voiceName == "@custom") location.href = "custom-voices.html";
+        else if (voiceName == "@premium") brapi.tabs.create({url: "premium-voices.html"});
+        else if (voiceName == "@piper") bgPageInvoke("managePiperVoices")
+        else saveSettings({voiceName: voiceName});
+      }
     });
   $("#languages-edit-button").click(function() {
     location.href = "languages.html";
   })
 
+  //voice custom input
+  if(settings.voiceName == "ChatGPT English (selfhosted)") $("#voice-custom-input-div").show();
+  $("#voice-custom-input").val(settings.voiceCustom || "");
+
+  //voice custom save button
+  $("#save-custom-voice").click(function() {
+    var voiceCustom = $("#voice-custom-input").val().trim();
+    saveSettings({voiceCustom: voiceCustom});
+    showConfirmation();
+  });
 
   //rate input
   $("#rate-edit-button").click(function() {

js/tts-engines.js

@@ -1472,7 +1472,7 @@ function OpenaiTtsEngine() {
   async function getAudioUrl(text, voice, pitch) {
     assert(text && voice)
     const matches = voice.voiceName.match(/^ChatGPT .* \((\w+)\)$/)
-    const voiceName = matches[1]
+    const voiceName = matches[1] != "selfhosted" ? matches[1] : (await getSettings(["voiceCustom"])).voiceCustom;
     const {openaiCreds} = await getSettings(["openaiCreds"])
     const res = await fetch((openaiCreds.url || defaultApiUrl) + "/audio/speech", {
       method: "POST",
@@ -1497,6 +1497,7 @@ function OpenaiTtsEngine() {
     {"voiceName":"ChatGPT English (onyx)","lang":"en-US","gender":"male"},
     {"voiceName":"ChatGPT English (nova)","lang":"en-US","gender":"female"},
     {"voiceName":"ChatGPT English (shimmer)","lang":"en-US","gender":"female"},
+    {"voiceName":"ChatGPT English (selfhosted)","lang":"en-US","gender":"male"},
   ]
 }
 

options.html

@@ -49,6 +49,14 @@ <h2 data-i18n="options_heading"></h2>
           Note: This voice may become unavailable at any time.
           <a href='http://blog.readaloud.app/2018/10/the-state-of-text-to-speech-technology.html' target='_blank'>Read more</a> about it on our blog.
         </small>
+        <div id="voice-custom-input-div">
+          <div class="inline-div">
+            <div class="inline-input"><input placeholder="Custom voice name" id="voice-custom-input" class="form-control" type="text" /></div>
+            <button type="button" id="save-custom-voice" class="btn btn-info">
+              <span data-i18n="options_save_button"></span>
+            </button>
+          </div>
+        </div>
       </div>
 
       <div>