Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vietnamese Text to Speech App</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap" | |
| rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| </head> | |
| <body> | |
| <div class="background-effects"> | |
| <div class="glow glow-1"></div> | |
| <div class="glow glow-2"></div> | |
| <div class="glow glow-3"></div> | |
| </div> | |
| <div class="container"> | |
| <!-- Add a language switcher at the top --> | |
| <div style="text-align: right; margin-bottom: 1rem;"> | |
| <a href="/en" class="secondary-btn" style="text-decoration: none; padding: 0.5rem 1rem;"> | |
| 🇬🇧 Switch to English | |
| </a> | |
| <a href="/jp" class="secondary-btn" style="text-decoration: none; padding: 0.5rem 1rem;"> | |
| 🇯🇵 Switch to Japanese | |
| </a> | |
| </div> | |
| <div class="header"> | |
| <h1><i class="fa-solid fa-volume-high"></i> Vietnamese TTS</h1> | |
| <p>Convert your text into natural Vietnamese speech</p> | |
| </div> | |
| <div class="glass-panel"> | |
| <div class="input-group"> | |
| <label for="voice-select">Base TTS Voice</label> | |
| <div class="custom-select-wrapper"> | |
| <select id="voice-select" class="custom-select"> | |
| <option value="hoai_my_southern_female">👩 Hoài My (Southern, Female)</option> | |
| <option value="nam_minh_northern_male">👨 Nam Minh (Northern, Male)</option> | |
| </select> | |
| <i class="fa-solid fa-chevron-down select-icon"></i> | |
| </div> | |
| </div> | |
| <div class="glass-panel"> | |
| <div class="input-group"> | |
| <label for="text-input">Enter Text</label> | |
| <textarea id="text-input" | |
| placeholder="Nhập văn bản tiếng Việt vào đây... (Ví dụ: Xin chào, bạn có khỏe không?)" | |
| rows="6"></textarea> | |
| <div class="char-count"><span id="char-current">0</span> / 1000</div> | |
| </div> | |
| <button id="generate-btn" class="primary-btn"> | |
| <span class="btn-text"><i class="fa-solid fa-wand-magic-sparkles"></i> Generate Speech</span> | |
| <span class="btn-loader hidden"><i class="fa-solid fa-spinner fa-spin"></i> Processing...</span> | |
| </button> | |
| <div id="error-message" class="alert error hidden"> | |
| <i class="fa-solid fa-circle-exclamation"></i> | |
| <span id="error-text">An error occurred.</span> | |
| </div> | |
| <div id="audio-container" class="audio-panel hidden"> | |
| <h3><i class="fa-solid fa-headphones"></i> Your Audio is Ready</h3> | |
| <audio id="audio-player" controls> | |
| Your browser does not support the audio element. | |
| </audio> | |
| <a id="download-btn" class="secondary-btn" href="#" download> | |
| <i class="fa-solid fa-download"></i> Download MP3 | |
| </a> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>Built with <i class="fa-solid fa-heart"></i> using Flask and Microsoft Edge TTS</p> | |
| </footer> | |
| </div> | |
| <script src="{{ url_for('static', filename='script.js') }}"></script> | |
| </body> | |
| </html> |