Update templates/index.html

templates/index.html

@@ -57,12 +57,13 @@
         }
         .preview-section {
             margin-top: 30px;
-            text-align: center;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 8px;
         }
-        audio {
+        .preview-section audio {
             width: 100%;
-            max-width: 400px;
-            margin: 20px 0;
+            margin-bottom: 15px;
         }
         .download-button {
             background: #764ba2;
@@ -84,23 +85,23 @@
     <div class="container">
         <h1>Text to Speech Converter</h1>
         <form method="post">
-            <textarea name="text" placeholder="Enter your text here..."></textarea>
+            <textarea name="text" placeholder="Enter your text here...">{{ text if text else '' }}</textarea>
             <select name="voice">
-                {% for voice in voices %}
-                    <option value="{{ voice }}">{{ voice }}</option>
+                {% 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_url %}
+        {% if audio_file %}
             <div class="preview-section">
                 <h2>Preview Your Audio</h2>
                 <audio controls>
-                    <source src="{{ audio_url }}" type="audio/mpeg">
+                    <source src="/audio/{{ audio_file.split('/')[-1] }}" type="audio/mpeg">
                     Your browser does not support the audio element.
                 </audio>
-                <a href="{{ audio_url }}" download="{{ download_filename }}" class="button download-button">Download MP3</a>
+                <a href="/audio/{{ audio_file.split('/')[-1] }}" download="{{ voice }}_output.mp3" class="button download-button">Download MP3</a>
             </div>
         {% endif %}