Hugging Face's logo

Spaces:
Niansuh
/
elve
Running

App Files Community
Niansuh commited on
Commit
30f5ae5
·
verified ·
1 Parent(s): b032d22

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +22 -25
templates/index.html CHANGED
@@ -55,23 +55,22 @@
55
  .button:hover {
56
  background: #5a6cd3;
57
  }
58
- .voice-grid {
59
- display: grid;
60
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
61
- gap: 20px;
62
  margin-top: 30px;
63
- }
64
- .voice-card {
65
- background: #f8f9fa;
66
- padding: 15px;
67
- border-radius: 8px;
68
  text-align: center;
69
  }
70
- .voice-card button {
71
- margin-top: 10px;
 
 
 
 
72
  background: #764ba2;
 
 
 
73
  }
74
- .voice-card button:hover {
75
  background: #633d87;
76
  }
77
  .error {
@@ -91,21 +90,19 @@
91
  <option value="{{ voice }}">{{ voice }}</option>
92
  {% endfor %}
93
  </select>
94
- <button type="submit" name="generate" class="button">Generate & Download</button>
95
  </form>
96
 
97
- <h2 style="margin-top: 40px; text-align: center;">Voice Previews</h2>
98
- <div class="voice-grid">
99
- {% for voice in voices %}
100
- <div class="voice-card">
101
- <h3>{{ voice }}</h3>
102
- <form method="post">
103
- <input type="hidden" name="preview_voice" value="{{ voice }}">
104
- <button type="submit" name="preview" class="button">Preview</button>
105
- </form>
106
- </div>
107
- {% endfor %}
108
- </div>
109
 
110
  {% if error %}
111
  <p class="error">Error: {{ error }}</p>
 
55
  .button:hover {
56
  background: #5a6cd3;
57
  }
58
+ .preview-section {
 
 
 
59
  margin-top: 30px;
 
 
 
 
 
60
  text-align: center;
61
  }
62
+ audio {
63
+ width: 100%;
64
+ max-width: 400px;
65
+ margin: 20px 0;
66
+ }
67
+ .download-button {
68
  background: #764ba2;
69
+ text-decoration: none;
70
+ display: inline-block;
71
+ margin-top: 10px;
72
  }
73
+ .download-button:hover {
74
  background: #633d87;
75
  }
76
  .error {
 
90
  <option value="{{ voice }}">{{ voice }}</option>
91
  {% endfor %}
92
  </select>
93
+ <button type="submit" class="button">Generate Audio</button>
94
  </form>
95
 
96
+ {% if audio_url %}
97
+ <div class="preview-section">
98
+ <h2>Preview Your Audio</h2>
99
+ <audio controls>
100
+ <source src="{{ audio_url }}" type="audio/mpeg">
101
+ Your browser does not support the audio element.
102
+ </audio>
103
+ <a href="{{ audio_url }}" download="{{ download_filename }}" class="button download-button">Download MP3</a>
104
+ </div>
105
+ {% endif %}
 
 
106
 
107
  {% if error %}
108
  <p class="error">Error: {{ error }}</p>