Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Japanese 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="/" class="secondary-btn" | |
| style="text-decoration: none; padding: 0.5rem 1rem; margin-right: 0.5rem;"> | |
| 🇻🇳 Switch to Vietnamese | |
| </a> | |
| <a href="/en" class="secondary-btn" style="text-decoration: none; padding: 0.5rem 1rem;"> | |
| 🇺🇸 Switch to English | |
| </a> | |
| </div> | |
| <div class="header"> | |
| <h1><i class="fa-solid fa-volume-high"></i> Japanese TTS</h1> | |
| <p>Convert your text into natural Japanese speech</p> | |
| </div> | |
| <div class="glass-panel"> | |
| <div class="input-group"> | |
| <label for="voice-select">Japanese TTS Voice</label> | |
| <div class="custom-select-wrapper"> | |
| <select id="voice-select" class="custom-select"> | |
| <option value="nanami_jp_female">👩 Nanami (Japan, Female)</option> | |
| <option value="keita_jp_male">👨 Keita (Japan, Male)</option> | |
| </select> | |
| <i class="fa-solid fa-chevron-down select-icon"></i> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label for="text-input">Enter Text</label> | |
| <textarea id="text-input" placeholder="Type your Japanese text here... (Example: こんにちは、お元気ですか？)" | |
| 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_jp.js') }}"></script> | |
| </body> | |
| </html> |