Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Piper Demo</title> | |
| <style type="text/css"> | |
| body { | |
| margin: auto; | |
| max-width: 90%; | |
| } | |
| #textInput { | |
| width: 100%; | |
| } | |
| #logo { | |
| margin-left: -30px; | |
| height: 6em; | |
| } | |
| #sponsored { | |
| position: absolute; | |
| right: 75px; | |
| top: 20px; | |
| } | |
| #buttonSpeak { | |
| font-size: 1.25em; | |
| padding: 5px 8px 5px 8px; | |
| } | |
| #divSpeak { | |
| margin-top: 10px; | |
| margin-bottom: 20px; | |
| } | |
| #divSpeak > audio { | |
| vertical-align: bottom; | |
| margin-left: 10px; | |
| } | |
| #key { | |
| font-weight: bold; | |
| margin-left: 10px; | |
| } | |
| #languages { | |
| margin-bottom: 15px; | |
| } | |
| #status { | |
| margin-left: 10px; | |
| } | |
| .setting { | |
| margin-top: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="https://github.com/rhasspy/piper" title="Piper TTS"> | |
| <img id="logo" src="img/logo.png" alt="Piper logo"> | |
| </a> | |
| <a href="https://www.openhomefoundation.org/" title="A library from the Open Home Foundation"> | |
| <img id="sponsored" src="https://www.openhomefoundation.org/badges/ohf-library.png" alt="A library from the Open Home Foundation"> | |
| </a> | |
| <br /> | |
| <select id="languages" onchange="setLanguage()"> | |
| <option value="">Language</option> | |
| </select> | |
| <select id="voice" onchange="setVoiceName()"> | |
| <option value="">Voice</option> | |
| </select> | |
| <select id="quality" onchange="setQuality()"> | |
| <option value="">Quality</option> | |
| </select> | |
| <select id="speaker" onchange="setSpeaker()"> | |
| <option value="">Speaker</option> | |
| </select> | |
| <span id="key"></span> | |
| <br /> | |
| <textarea id="textInput" rows=5 disabled></textarea> | |
| <div id="divSpeak"> | |
| <button id="buttonSpeak" disabled>Speak</button> | |
| <audio id="audioTTS" controls></audio> | |
| <span id="status">Ready</span> | |
| </div> | |
| <div class="setting"> | |
| <label for="lengthScale">Length Scale:</label> | |
| <input id="lengthScale" type="number" step="0.1" value="1.0" /> | |
| </div> | |
| <div class="setting"> | |
| <label for="noiseScale">Noise Scale:</label> | |
| <input id="noiseScale" type="number" step="0.1" value="0.667" /> | |
| </div> | |
| <div class="setting"> | |
| <label for="noiseWScale">Noise W Scale:</label> | |
| <input id="noiseWScale" type="number" step="0.1" value="0.8" /> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script> | |
| <script type="module" src="js/app.js"></script> | |
| </body> | |
| </html> | |