"\n    <!DOCTYPE html>\n    <html>\n    <head><title>TTS Service</title></head>\n    <body>\n    <h1>TTS Demo</h1>\n    <textarea id=\"text\" rows=\"4\" cols=\"50\" placeholder=\"Enter text\"></textarea><br/>\n    <select id=\"model\">\n        <option value=\"Bryce\">Bryce</option>\n        <option value=\"John\">John</option>\n        <option value=\"English_man\">English_man</option>\n        <option value=\"Ryan\">Ryan</option>\n        <option value=\"Hfc_male\">Hfc_male</option>\n        <option value=\"Dany\">Dany</option>\n    </select>\n    <button onclick=\"generate()\">Generate</button>\n    <p id=\"status\"></p>\n    <audio id=\"player\" controls></audio>\n    <script>\n    async function generate() {\n        const text = document.getElementById('text').value;\n        const model = document.getElementById('model').value;\n        document.getElementById('status').textContent='Generating...';\n        const resp = await fetch('/tts',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({text,voice_model:model})});\n        if(!resp.ok){\n            const err = await resp.text();\n            document.getElementById('status').textContent='Error: '+err;\n            return;\n        }\n        const blob=await resp.blob();\n        const url=URL.createObjectURL(blob);\n        const audio=document.getElementById('player');\n        audio.src=url;\n        audio.play();\n        document.getElementById('status').textContent='Playing.';\n    }\n    </script>\n    </body>\n    </html>\n    "