add download btn

This commit is contained in:
Xuan Son Nguyen 2025-01-04 12:35:45 +01:00
parent a8153cc681
commit e4d3364e93

View file

@ -10,6 +10,7 @@
margin: 2em; margin: 2em;
} }
</style> </style>
<!-- <script src=" https://cdn.jsdelivr.net/npm/lamejs@1.2.1/lame.min.js"></script> -->
</head> </head>
<body> <body>
<h1>llama.cpp TTS</h1> <h1>llama.cpp TTS</h1>
@ -20,11 +21,13 @@
<br/> <br/>
<p id="status">Status: ready</p><br/> <p id="status">Status: ready</p><br/>
<p id="output"></p> <p id="output"></p>
<a id="download"></a>
<script> <script>
const input_el = document.getElementById('input'); const input_el = document.getElementById('input');
const output_el = document.getElementById('output'); const output_el = document.getElementById('output');
const status_el = document.getElementById('status'); const status_el = document.getElementById('status');
const download_el = document.getElementById('download');
const btn_speak_el = document.getElementById('btn_speak'); const btn_speak_el = document.getElementById('btn_speak');
let working = false; let working = false;
@ -38,6 +41,7 @@
input_el.disabled = true; input_el.disabled = true;
btn_speak_el.disabled = true; btn_speak_el.disabled = true;
status_el.textContent = 'Status: generating...'; status_el.textContent = 'Status: generating...';
download_el.textContent = '';
const input = input_el.value.trim(); const input = input_el.value.trim();
@ -56,6 +60,9 @@
if (res.status === 200) { if (res.status === 200) {
const blob = await res.blob(); const blob = await res.blob();
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
download_el.href = url;
download_el.innerText = 'Download';
download_el.download = getFileNameWAV(input);
const audio = new Audio(url); const audio = new Audio(url);
audio.play(); audio.play();
status_el.textContent = 'Status: playing...'; status_el.textContent = 'Status: playing...';
@ -63,6 +70,9 @@
status_el.textContent = 'Status: ready'; status_el.textContent = 'Status: ready';
}); });
echoTimings(res.headers, input); echoTimings(res.headers, input);
// const buffer = await blob.arrayBuffer();
// wavToMp3(new Int16Array(buffer));
} else { } else {
const text = await res.text(); const text = await res.text();
throw new Error(`Failed to generate speech: ${text}`); throw new Error(`Failed to generate speech: ${text}`);
@ -107,6 +117,14 @@
.replace(/"/g, "&quot;") .replace(/"/g, "&quot;")
.replace(/'/g, "&#039;"); .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> </script>
</body> </body>
</html> </html>