download button, better spectrograms

vocodes/src/v2/tts_result_view/SpectrogramFc.tsx

@@ -16,10 +16,6 @@ interface SpectrogramResponse {
 const COLOR_MAP_PRESETS = [
   VIRIDIS, 
   MAGMA,
-  //CIVIDIS,
-  //BLACK_WHITE,
-  //INFERNO,
-  //PLASMA,  
 ];
 
 function SpectrogramFc(props: Props) {
@@ -33,12 +29,12 @@ function SpectrogramFc(props: Props) {
 
     let bytes = new Uint8ClampedArray(size);
 
-    let k = 0;
-
     let colorMapScale = linearScale([0, 255], [0, 1]);
     let colorMapColors = getRandomArrayValue(COLOR_MAP_PRESETS);
     let colorMap = createColorMap(colorMapColors, colorMapScale);
 
+    let k = 0;
+
     for (let j = 0; j < height; j++) {
       for (let i = 0; i < width; i++) {
         let value = image[i][j];
@@ -58,9 +54,6 @@ function SpectrogramFc(props: Props) {
   }
 
   useEffect(() => {
-    //const api = new ApiConfig();
-    //const endpointUrl = api.viewTtsInferenceResult(token);
-
     fetch(props.spectrogramJsonLink, {
       method: 'GET',
       headers: {
@@ -95,7 +88,6 @@ function SpectrogramFc(props: Props) {
   let width = 150 * 3;
   let height = 80 * 3;
 
-  //onClick={() => this.props.changeSpectrogramMode(nextMode)}
   let canvas = <canvas 
     ref={canvasRef} 
     width={width}
@@ -106,7 +98,6 @@ function SpectrogramFc(props: Props) {
   return (
     <div>
       {canvas}
-      <p>(Click or tap to change spectrogram theme.)</p>
     </div>
   )
 }

vocodes/src/v2/tts_result_view/TtsResultViewFc.tsx

@@ -78,6 +78,9 @@ function TtsResultViewFc(props: Props) {
   let audioLink = `https://storage.googleapis.com/dev-vocodes-public${ttsInferenceResult?.public_bucket_wav_audio_path}`; 
   let modelLink = `/tts/${ttsInferenceResult.tts_model_token}`;
 
+  // NB: Not respected in firefox: https://stackoverflow.com/a/28468261
+  let audioDownloadFilename = `vocodes-${ttsInferenceResult.tts_model_token.replace(':', '')}.wav`;
+
   let spectrogramLink = `https://storage.googleapis.com/dev-vocodes-public${ttsInferenceResult?.public_bucket_wav_audio_path}`.replace(".wav", ".json"); 
 
 
@@ -129,8 +132,6 @@ function TtsResultViewFc(props: Props) {
       <h1 className="title is-1"> {headingTitle} </h1>
       {subtitle}
 
-      <SpectrogramFc spectrogramJsonLink={spectrogramLink} />
-
       <audio
         controls
         src={audioLink}>
@@ -138,6 +139,21 @@ function TtsResultViewFc(props: Props) {
             <code>audio</code> element.
       </audio>
 
+      <a className="button is-medium" 
+          href={audioLink}
+          download={audioDownloadFilename}>Download File</a>
+
+      <br />
+      <br />
+
+
+      <h3 className="title is-3"> Spectrogram </h3>
+      <SpectrogramFc spectrogramJsonLink={spectrogramLink} />
+
+      <br />
+      <br />
+
+      <h3 className="title is-3"> Details </h3>
       <table className="table">
         <thead>
           <tr>