Add vocoder support. Change default per model, show on model + results

vocodes/src/v2/view/tts/tts_model_edit/TtsModelEditFc.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect, useCallback } from 'react';
 //import axios from 'axios';
 import { ApiConfig } from '../../../../common/ApiConfig';
@@ -11,6 +10,8 @@ import { HiddenIconFc } from '../../_icons/HiddenIcon';
 
 const DEFAULT_VISIBILITY = 'public';
 
+const DEFAULT_PRETRAINED_VOCODER = 'hifigan-superres';
+
 interface TtsModelViewResponsePayload {
   success: boolean,
   model: TtsModel,
@@ -20,6 +21,7 @@ interface TtsModel {
   model_token: string,
   title: string,
   tts_model_type: string,
+  maybe_default_pretrained_vocoder: string | null,
   text_preprocessing_algorithm: string,
   creator_user_token: string,
   creator_username: string,
@@ -55,6 +57,7 @@ function TtsModelEditFc(props: Props) {
   const [title, setTitle] = useState<string>("");
   const [descriptionMarkdown, setDescriptionMarkdown] = useState<string>("");
   const [visibility, setVisibility] = useState<string>(DEFAULT_VISIBILITY);
+  const [defaultPretrainedVocoder, setDefaultPretrainedVocoder] = useState<string>(DEFAULT_PRETRAINED_VOCODER);
 
   const getModel = useCallback((token) => {
     const api = new ApiConfig();
@@ -77,6 +80,7 @@ function TtsModelEditFc(props: Props) {
       setTitle(modelsResponse.model.title || "")
       setDescriptionMarkdown(modelsResponse.model.description_markdown || "")
       setVisibility(modelsResponse.model.creator_set_visibility || DEFAULT_VISIBILITY);
+      setDefaultPretrainedVocoder(modelsResponse.model.maybe_default_pretrained_vocoder || DEFAULT_PRETRAINED_VOCODER);
       setTtsModel(modelsResponse.model);
     })
     .catch(e => {});
@@ -105,6 +109,10 @@ function TtsModelEditFc(props: Props) {
     setVisibility((ev.target as HTMLSelectElement).value)
   };
 
+  const handleDefaultPretrainedVocoderChange = (ev: React.FormEvent<HTMLSelectElement>) => {
+    setDefaultPretrainedVocoder((ev.target as HTMLSelectElement).value)
+  };
+
   const modelLink = FrontendUrlConfig.ttsModelPage(token);
 
   const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) => { 
@@ -127,6 +135,7 @@ function TtsModelEditFc(props: Props) {
       title: title,
       description_markdown: descriptionMarkdown,
       creator_set_visibility: visibility || DEFAULT_VISIBILITY,
+      maybe_default_pretrained_vocoder: defaultPretrainedVocoder || DEFAULT_PRETRAINED_VOCODER,
     }
 
     fetch(endpointUrl, {
@@ -194,6 +203,20 @@ function TtsModelEditFc(props: Props) {
             </div>
           </div>
 
+          <div className="field">
+            <label className="label">Default vocoder</label>
+            <div className="control select">
+              <select 
+                name="default_pretrained_vocoder" 
+                onChange={handleDefaultPretrainedVocoderChange}
+                value={defaultPretrainedVocoder}
+                >
+                <option value="hifigan-superres">HiFi-Gan (typically sounds best)</option>
+                <option value="waveglow">WaveGlow</option>
+              </select>
+            </div>
+          </div>
+
           <div className="field">
             <label className="label">
               Model Visibility&nbsp;{visibilityIcon}

vocodes/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx

@@ -1,6 +1,4 @@
-
 import React, { useState, useEffect, useCallback } from 'react';
-//import axios from 'axios';
 import { ApiConfig } from '../../../../common/ApiConfig';
 import { EnqueueJobResponsePayload } from '../tts_model_list/TtsModelFormFc';
 import { SessionTtsInferenceResultListFc } from '../../_common/SessionTtsInferenceResultsListFc';
@@ -26,6 +24,7 @@ interface TtsModel {
   model_token: string,
   title: string,
   tts_model_type: string,
+  maybe_default_pretrained_vocoder: string | null,
   text_preprocessing_algorithm: string,
   creator_user_token: string,
   creator_username: string,
@@ -273,6 +272,16 @@ function TtsModelViewFc(props: Props) {
     <span>Hidden <HiddenIconFc /></span> :
     <span>Public <VisibleIconFc /></span> ;
 
+  let defaultVocoder = 'not set';
+  switch (ttsModel?.maybe_default_pretrained_vocoder) {
+    case 'hifigan-superres':
+      defaultVocoder = 'HiFi-GAN'
+      break;
+    case 'waveglow':
+      defaultVocoder = 'WaveGlow'
+      break;
+  }
+
   return (
     <div className="content">
       <h1 className="title is-1"> {title} </h1>
@@ -323,6 +332,10 @@ function TtsModelViewFc(props: Props) {
             <th>Model type</th>
             <td>{ttsModel?.tts_model_type}</td>
           </tr>
+          <tr>
+            <th>Default vocoder</th>
+            <td>{defaultVocoder}</td>
+          </tr>
           <tr>
             <th>Text preprocessing algorithm</th>
             <td>{ttsModel?.text_preprocessing_algorithm}</td>

vocodes/src/v2/view/tts/tts_result_view/TtsResultViewFc.tsx

@@ -21,6 +21,8 @@ interface TtsInferenceResult {
   tts_model_token: string,
   tts_model_title: string,
 
+  maybe_pretrained_vocoder_used: string | null,
+
   raw_inference_text: string,
 
   maybe_creator_user_token?: string,
@@ -102,6 +104,16 @@ function TtsResultViewFc(props: Props) {
 
   let modelName = ttsInferenceResult.tts_model_title;
 
+  let vocoderUsed = 'unknown';
+  switch (ttsInferenceResult?.maybe_pretrained_vocoder_used) {
+    case 'hifigan-superres':
+      vocoderUsed = 'HiFi-GAN'
+      break;
+    case 'waveglow':
+      vocoderUsed = 'WaveGlow'
+      break;
+  }
+
   //const currentlyDeleted = !!ttsInferenceResult?.maybe_moderator_fields?.mod_deleted_at || !!ttsInferenceResult?.maybe_moderator_fields?.user_deleted_at;
 
   let moderatorRows = null;
@@ -237,7 +249,6 @@ function TtsResultViewFc(props: Props) {
       <br />
       <br />
 
-
       <h4 className="subtitle is-4"> Spectrogram </h4>
       <SpectrogramFc spectrogramJsonLink={spectrogramLink} />
 
@@ -292,6 +303,10 @@ function TtsResultViewFc(props: Props) {
               {modelCreatorDetails}
             </td>
           </tr>
+          <tr>
+            <th>Vocoder used</th>
+            <td>{vocoderUsed}</td>
+          </tr>
       
           {moderatorRows}