File size: 3,400 Bytes
213867b 6bd1186 213867b 6bd1186 a972300 6bd1186 a972300 6bd1186 a972300 6bd1186 a972300 6bd1186 a972300 6bd1186 a972300 6bd1186 a972300 6bd1186 a972300 6bd1186 a972300 6bd1186 a972300 6bd1186 a972300 6bd1186 30f5ae5 6bd1186 feb8aa2 6bd1186 feb8aa2 30f5ae5 feb8aa2 30f5ae5 a972300 30f5ae5 6bd1186 30f5ae5 a972300 6bd1186 a972300 6bd1186 213867b 6bd1186 feb8aa2 a972300 feb8aa2 a972300 30f5ae5 6bd1186 a972300 feb8aa2 30f5ae5 feb8aa2 30f5ae5 feb8aa2 30f5ae5 a972300 6bd1186 213867b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<!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> |