UI upgrade

master
MightyAlex200 2021-08-11 00:46:10 -04:00
parent 00560e7ed2
commit cebe2206af
3 changed files with 36 additions and 3 deletions

View File

@ -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>

View File

@ -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);
});
});

25
style.css Normal file
View File

@ -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;
}