add download btn

ggerganov · Jan 4, 2025 · e4d3364 · e4d3364
1 parent a8153cc
commit e4d3364
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/examples/server/public_tts/index.html b/examples/server/public_tts/index.html
@@ -10,6 +10,7 @@
       margin: 2em;
     }
   </style>
+  <!-- <script src=" https://cdn.jsdelivr.net/npm/[email protected]/lame.min.js"></script> -->
 </head>
 <body>
   <h1>llama.cpp TTS</h1>
@@ -20,11 +21,13 @@ <h1>llama.cpp TTS</h1>
   <br/>
   <p id="status">Status: ready</p><br/>
   <p id="output"></p>
+  <a id="download"></a>
 
   <script>
     const input_el = document.getElementById('input');
     const output_el = document.getElementById('output');
     const status_el = document.getElementById('status');
+    const download_el = document.getElementById('download');
     const btn_speak_el = document.getElementById('btn_speak');
 
     let working = false;
@@ -38,6 +41,7 @@ <h1>llama.cpp TTS</h1>
       input_el.disabled = true;
       btn_speak_el.disabled = true;
       status_el.textContent = 'Status: generating...';
+      download_el.textContent = '';
 
       const input = input_el.value.trim();
 
@@ -56,13 +60,19 @@ <h1>llama.cpp TTS</h1>
         if (res.status === 200) {
           const blob = await res.blob();
           const url = URL.createObjectURL(blob);
+          download_el.href = url;
+          download_el.innerText = 'Download';
+          download_el.download = getFileNameWAV(input);
           const audio = new Audio(url);
           audio.play();
           status_el.textContent = 'Status: playing...';
           audio.addEventListener('ended', () => {
             status_el.textContent = 'Status: ready';
           });
           echoTimings(res.headers, input);
+
+          // const buffer = await blob.arrayBuffer();
+          // wavToMp3(new Int16Array(buffer));
         } else {
           const text = await res.text();
           throw new Error(`Failed to generate speech: ${text}`);
@@ -107,6 +117,14 @@ <h1>llama.cpp TTS</h1>
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
     }
+
+    function getFileNameWAV(input) {
+      return input.replace(/[^a-z0-9]/gi, '_').toLowerCase().substring(0, 32) + '.wav';
+    }
+
+    function wavToMp3(wavData) {
+      // TODO: implement this using lamejs
+    }
   </script>
 </body>
 </html>