Spaces:

wasmdashai
/

wasm-ar-tts

Sleeping

File size: 6,457 Bytes

7694c84

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