| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Text to Speech Converter</title> |
| <style> |
| body { |
| font-family: 'Arial', sans-serif; |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| margin: 0; |
| padding: 20px; |
| color: #333; |
| } |
| .container { |
| max-width: 800px; |
| margin: 0 auto; |
| background: white; |
| padding: 30px; |
| border-radius: 15px; |
| box-shadow: 0 0 20px rgba(0,0,0,0.1); |
| } |
| h1 { |
| color: #4a4a4a; |
| text-align: center; |
| margin-bottom: 30px; |
| } |
| textarea { |
| width: 100%; |
| height: 150px; |
| padding: 15px; |
| border: 2px solid #ddd; |
| border-radius: 8px; |
| font-size: 16px; |
| resize: vertical; |
| margin-bottom: 20px; |
| } |
| select { |
| padding: 10px; |
| font-size: 16px; |
| border-radius: 8px; |
| margin-bottom: 20px; |
| width: 200px; |
| } |
| .button { |
| background: #667eea; |
| color: white; |
| padding: 12px 25px; |
| border: none; |
| border-radius: 8px; |
| cursor: pointer; |
| font-size: 16px; |
| transition: background 0.3s; |
| } |
| .button:hover { |
| background: #5a6cd3; |
| } |
| .preview-section { |
| margin-top: 30px; |
| padding: 20px; |
| background: #f8f9fa; |
| border-radius: 8px; |
| } |
| .preview-section audio { |
| width: 100%; |
| margin-bottom: 15px; |
| } |
| .download-button { |
| background: #764ba2; |
| text-decoration: none; |
| display: inline-block; |
| margin-top: 10px; |
| } |
| .download-button:hover { |
| background: #633d87; |
| } |
| .error { |
| color: #dc3545; |
| text-align: center; |
| margin-top: 20px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>Text to Speech Converter</h1> |
| <form method="post"> |
| <textarea name="text" placeholder="Enter your text here...">{{ text if text else '' }}</textarea> |
| <select name="voice"> |
| {% for voice_option in voices %} |
| <option value="{{ voice_option }}" {% if voice_option == voice %}selected{% endif %}>{{ voice_option }}</option> |
| {% endfor %} |
| </select> |
| <button type="submit" class="button">Generate Audio</button> |
| </form> |
|
|
| {% if audio_file %} |
| <div class="preview-section"> |
| <h2>Preview Your Audio</h2> |
| <audio controls> |
| <source src="/audio/{{ audio_file.split('/')[-1] }}" type="audio/mpeg"> |
| Your browser does not support the audio element. |
| </audio> |
| <a href="/audio/{{ audio_file.split('/')[-1] }}" download="{{ voice }}_output.mp3" class="button download-button">Download MP3</a> |
| </div> |
| {% endif %} |
|
|
| {% if error %} |
| <p class="error">Error: {{ error }}</p> |
| {% endif %} |
| </div> |
| </body> |
| </html> |
