UI upgrade
parent
00560e7ed2
commit
cebe2206af
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TensorflowTTS in Tensorflow.js</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.8.0/dist/tf.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/transliteration@2.2.0/dist/browser/bundle.umd.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/number-to-words@1.2.4/numberToWords.min.js"></script>
|
||||
|
@ -10,8 +11,10 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<textarea id="tts-input"></textarea>
|
||||
<h1>TensorflowTTS in Tensorflow.js</h1>
|
||||
<textarea placeholder="write text here to have it read out" autofocus spellcheck id="tts-input"></textarea>
|
||||
<br>
|
||||
<p id="tts-status"></p>
|
||||
<button id="tts-start">Speak</button>
|
||||
</body>
|
||||
|
||||
|
|
9
index.js
9
index.js
|
@ -298,7 +298,8 @@ function expand_number(match) {
|
|||
return numberToWords.toWords(num);
|
||||
}
|
||||
|
||||
async function tts(text) {
|
||||
async function tts(text, ttsStatus) {
|
||||
ttsStatus.innerText = "Converting input";
|
||||
const input_ids = tf.tensor([convertText(text)], null, 'int32');
|
||||
inputs = {
|
||||
"input_ids": input_ids,
|
||||
|
@ -307,14 +308,17 @@ async function tts(text) {
|
|||
"f0_ratios": tf.tensor([1.0], null, 'float32'),
|
||||
"energy_ratios": tf.tensor([1.0], null, 'float32'),
|
||||
};
|
||||
ttsStatus.innerText = "Generating mel spectrogram (be patient)";
|
||||
console.time("inference");
|
||||
console.time("mel generation");
|
||||
const mel = await (await text2mel).executeAsync(inputs);
|
||||
console.timeEnd("mel generation");
|
||||
console.time("vocoding");
|
||||
ttsStatus.innerText = "Generating waveform (be patient)";
|
||||
const wav = (await vocoder).execute(mel[0]);
|
||||
console.timeEnd("vocoding");
|
||||
console.timeEnd("inference");
|
||||
ttsStatus.innerText = "Done!";
|
||||
playAudio(wav);
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
inputs[i].dispose();
|
||||
|
@ -324,7 +328,8 @@ async function tts(text) {
|
|||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const ttsInput = document.getElementById("tts-input");
|
||||
const ttsStart = document.getElementById("tts-start");
|
||||
const ttsStatus = document.getElementById("tts-status");
|
||||
ttsStart.addEventListener("click", async function () {
|
||||
await tts(ttsInput.value);
|
||||
await tts(ttsInput.value, ttsStatus);
|
||||
});
|
||||
});
|
|
@ -0,0 +1,25 @@
|
|||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#tts-status {
|
||||
margin: 8 0 8 0;
|
||||
}
|
||||
|
||||
#tts-input {
|
||||
width: 50vw;
|
||||
height: 12em;
|
||||
}
|
||||
|
||||
#tts-start {
|
||||
font-size: large;
|
||||
margin: 4px;
|
||||
padding: 5px;
|
||||
background: #ddd;
|
||||
border: 1px solid rgb(44, 44, 44);
|
||||
border-radius: 0.25em;
|
||||
}
|
Loading…
Reference in New Issue