simplify frontend mels

vocodes/src/v2/tts_result_view/SpectrogramFc.tsx

@@ -9,8 +9,7 @@ interface Props {
 
 interface SpectrogramResponse {
   mel: Array<Array<number>>,
-  mel_postnet: Array<Array<number>>,
-  mel_for_scaling: Array<Array<number>>,
+  mel_scaled: Array<Array<number>>,
 }
 
 const COLOR_MAP_PRESETS = [
@@ -65,10 +64,10 @@ function SpectrogramFc(props: Props) {
       console.log('got spectrogram', res);
       let spectrograms = res as SpectrogramResponse;
 
-      let width = spectrograms.mel_for_scaling.length;
-      let height = spectrograms.mel_for_scaling[0].length;
+      let width = spectrograms.mel_scaled.length;
+      let height = spectrograms.mel_scaled[0].length;
 
-      let pixels = linearizeImage(spectrograms.mel_for_scaling);
+      let pixels = linearizeImage(spectrograms.mel_scaled);
       var image = new ImageData(pixels, width, height);
 
       const canvas = canvasRef.current as any;

vocodes/src/v2/tts_result_view/TtsResultViewFc.tsx

@@ -139,7 +139,10 @@ function TtsResultViewFc(props: Props) {
             <code>audio</code> element.
       </audio>
 
-      <a className="button is-medium" 
+      <br />
+      <br />
+
+      <a className="button is-medium is-primary"
           href={audioLink}
           download={audioDownloadFilename}>Download File</a>
 
@@ -147,13 +150,13 @@ function TtsResultViewFc(props: Props) {
       <br />
 
 
-      <h3 className="title is-3"> Spectrogram </h3>
+      <h4 className="title is-4"> Spectrogram </h4>
       <SpectrogramFc spectrogramJsonLink={spectrogramLink} />
 
       <br />
       <br />
 
-      <h3 className="title is-3"> Details </h3>
+      <h4 className="title is-4"> Spectrogram </h4>
       <table className="table">
         <thead>
           <tr>

vocodes/src/v2/w2l_result_view/W2lResultViewFc.tsx

@@ -75,6 +75,7 @@ function W2lResultViewFc(props: Props) {
 
   let videoLink = `https://storage.googleapis.com/dev-vocodes-public${w2lInferenceResult?.public_bucket_video_path}`; 
   let templateLink = `/w2l/${w2lInferenceResult.maybe_w2l_template_token}`;
+  let videoDownloadFilename = `vocodes-${w2lInferenceResult.w2l_result_token.replace(':', '')}.mp4`;
 
   let durationSeconds = w2lInferenceResult?.duration_millis / 1000;
 
@@ -125,6 +126,19 @@ function W2lResultViewFc(props: Props) {
         Your device doesn't support video.
       </video> 
 
+      <br />
+      <br />
+
+      <a className="button is-medium is-primary" 
+          href={videoLink}
+          download={videoDownloadFilename}>Download File</a>
+
+
+      <br />
+      <br />
+
+      <h4 className="title is-4"> Details </h4>
+
       <table className="table">
         <thead>
           <tr>