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