| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Text-to-Speech</title> |
| </head> |
| <body> |
| <h1>Text-to-Speech Conversion</h1> |
| <form action="/convert" method="post"> |
| <textarea name="text" rows="5" cols="50" placeholder="Enter text here"></textarea><br> |
| <select name="voice"> |
| <option value="">Select Voice</option> |
| |
| </select><br> |
| <label for="rate">Speech Rate Adjustment (%):</label> |
| <input type="range" id="rate" name="rate" min="-50" max="50" value="0"><br> |
| <label for="pitch">Pitch Adjustment (Hz):</label> |
| <input type="range" id="pitch" name="pitch" min="-20" max="20" value="0"><br> |
| <input type="submit" value="Convert"> |
| </form> |
| <script> |
| async function populateVoices() { |
| const response = await fetch('/voices'); |
| const voices = await response.json(); |
| const select = document.querySelector('select[name="voice"]'); |
| for (const [key, value] of Object.entries(voices)) { |
| const option = document.createElement('option'); |
| option.value = key; |
| option.textContent = key; |
| select.appendChild(option); |
| } |
| } |
| populateVoices(); |
| </script> |
| </body> |
| </html> |
