<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>TTS Arabic</title> <link rel="icon" type="image/png" href="favicon.png"> <script src="static/mappings.js"></script> <style> * { box-sizing: border-box; } body { margin: 0; } h1 { font-size: 1.6rem; font-weight: 600; color: #111; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif } header { height: 3rem; border-bottom: 1px solid black; margin-bottom: 4.5rem; padding-left: 0.5rem; } main { width: 38rem; margin: auto; } label { font-size: 1.5rem; margin-bottom: 0.18rem; } textarea { height: 7rem; border: 2px solid #aaa; border-radius: 3px; } #ta-arabic { font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 1.9rem; } #ta-buckw { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 1.5rem; } #audio-output { width: 38rem; height: 2.2rem; } #para-phonemes { font-family: Verdana, Geneva, Tahoma, sans-serif; margin: 0.5rem; font-size: 1.3rem; width: 38rem; } .ta-container { display: flex; flex-direction: column; margin: auto; } button { display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 1rem; background-color: white; border-radius: 3px; margin-top: 0.2rem; width: 4.8rem; height: 2rem; border: 2px solid #888; cursor: pointer; } button svg { fill: #555; } button:hover, button:active { box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.26); } .control-bar { display: flex; justify-content: right; align-items: center; } .control-bar input { height: 1.5rem; width: 3.5rem; margin-right: 0.5rem; } .control-bar label { color: #555; font-size: 1.2rem; margin-right: 0.3rem; } ul { list-style-type: none; padding-left: 0; } </style> </head> <!-- BODY --> <body> <header><h1>TTS Tacotron2 Arabic</h1></header> <main> <div class="ta-container"> <label for="ta-arabic">Arabic</label> <textarea id="ta-arabic" dir="rtl" oninput="taArabicChanged()" ></textarea> </div> <br /> <div class="ta-container"> <label for="ta-buckw">Buckwalter</label> <textarea id="ta-buckw" spellcheck="false" oninput="taBuckwChanged()"></textarea> </div> <div class="control-bar"> <label for="denoise-input">Denoise:</label> <input id="denoise-input" type="number" min="0" value="0.01" step="0.005"/> <label for="speed-input">Speed:</label> <input id="speed-input" type="number" value="1.0" step="0.1"/> <button onclick="tts(event)"> <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M4 22q-.825 0-1.412-.587Q2 20.825 2 20V4q0-.825.588-1.413Q3.175 2 4 2h9l-2 2H4v16h11v-3h2v3q0 .825-.587 1.413Q15.825 22 15 22Zm2-4v-2h7v2Zm0-3v-2h5v2Zm9 0-4-4H8V6h3l4-4Zm2-3.05v-6.9q.9.525 1.45 1.425.55.9.55 2.025t-.55 2.025q-.55.9-1.45 1.425Zm0 4.3v-2.1q1.75-.625 2.875-2.163Q21 10.45 21 8.5q0-1.95-1.125-3.488Q18.75 3.475 17 2.85V.75q2.6.675 4.3 2.812Q23 5.7 23 8.5t-1.7 4.938q-1.7 2.137-4.3 2.812Z"/></svg>TTS </button> </div> <br /> <ul id="res-list"> </ul> </main> <!-- SCRIPT --> <script> const taArabic = document.getElementById("ta-arabic"); const taBuckw = document.getElementById("ta-buckw"); const inputSpeed = document.getElementById("speed-input"); const inputDenoise = document.getElementById("denoise-input"); // const audioOut = document.getElementById("audio-output"); // const phonemesOut = document.getElementById("para-phonemes"); const resList = document.getElementById("res-list"); // audioOut.volume = 0.5; let outputIdx = 0; const taArabicChanged = () => { const buckw = [...taArabic.value] .map((ar) => { if (ar in arabicToBuckw) { return arabicToBuckw[ar]; } return ar; }) .join(""); taBuckw.value = buckw; }; const taBuckwChanged = () => { const arabic = [...taBuckw.value] .map((lat) => { if (lat in buckwToArabic) { return buckwToArabic[lat]; } return lat; }) .join(""); taArabic.value = arabic; }; const addResults = (data) => { while(resList.firstChild) { resList.removeChild(resList.firstChild); } data.forEach((d, i) => { const li = document.createElement('li'); li.innerHTML = ` <label for="para-phonemes">${d.name}</label> <p id="para-phonemes">${d.phon}</p> <audio id="audio-output" src="static/wave${d.id}.wav?${outputIdx}" controls>Play</audio>`; resList.append(li); }); resList.querySelectorAll("audio").forEach( a => a.volume = 0.5 ) }; const tts = async () => { const response = await fetch("/api/tts", { method: "POST", headers: { "content-type": "application/json", }, body: JSON.stringify({ buckw: taBuckw.value, rate: inputSpeed.value, denoise: inputDenoise.value, }), }); const data = await response.json(); // phonemesOut.textContent = data.phonemes; console.log(data); outputIdx++; addResults(data); }; </script> </body> </html>