Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Hebrew TTS with Phonikud</title> | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | |
| rel="stylesheet" | |
| /> | |
| <link | |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" | |
| rel="stylesheet" | |
| /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" href="static/style.css" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <h2><i class="fas fa-microphone-alt"></i> Hebrew TTS with Phonikud</h2> | |
| <p class="header-subtitle"> | |
| Fast Text-to-Speech in Hebrew with Phonetic Control | |
| </p> | |
| </div> | |
| <!-- Main Card with Tabs --> | |
| <div class="main-card"> | |
| <!-- Tab Navigation --> | |
| <div class="tabs-container"> | |
| <ul class="nav nav-tabs w-100 d-flex" role="tablist"> | |
| <li class="nav-item flex-fill"> | |
| <button | |
| class="nav-link w-100 text-center active" | |
| data-bs-toggle="tab" | |
| data-bs-target="#text-tab" | |
| type="button" | |
| > | |
| <i class="fas fa-font"></i> Text | |
| </button> | |
| </li> | |
| <li class="nav-item flex-fill"> | |
| <button | |
| class="nav-link w-100 text-center" | |
| data-bs-toggle="tab" | |
| data-bs-target="#diacritics-tab" | |
| type="button" | |
| > | |
| <i class="fas fa-language"></i> Diacritics | |
| </button> | |
| </li> | |
| <li class="nav-item flex-fill"> | |
| <button | |
| class="nav-link w-100 text-center" | |
| data-bs-toggle="tab" | |
| data-bs-target="#phonemes-tab" | |
| type="button" | |
| > | |
| <i class="fas fa-code"></i> Phonemes | |
| </button> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Tab Content --> | |
| <div class="tab-content"> | |
| <!-- Hebrew Text Tab --> | |
| <div class="tab-pane fade show active" id="text-tab"> | |
| <div class="input-section"> | |
| <h3 class="section-title"> | |
| <i class="fas fa-font"></i> | |
| Hebrew Text Input | |
| </h3> | |
| <p class="section-description"> | |
| Enter unvocalized Hebrew text to generate speech. | |
| </p> | |
| <div class="input-group"> | |
| <textarea | |
| autocomplete="off" | |
| autocorrect="off" | |
| autocapitalize="off" | |
| spellcheck="false" | |
| id="text-input" | |
| class="form-control rtl w-100 " | |
| placeholder="הכנס כאן את הטקסט העברי שלך..." | |
| ></textarea> | |
| </div> | |
| </div> | |
| <div> | |
| <button | |
| class="btn-generate" | |
| onclick="generate('text')" | |
| id="text-btn" | |
| > | |
| <i class="fas fa-play"></i> | |
| Generate | |
| </button> | |
| <div | |
| id="text-status" | |
| class="status-indicator" | |
| style="display: none" | |
| ></div> | |
| </div> | |
| </div> | |
| <!-- Diacritics Tab --> | |
| <div class="tab-pane fade" id="diacritics-tab"> | |
| <div class="input-section"> | |
| <h3 class="section-title"> | |
| <i class="fas fa-language"></i> | |
| Text with Diacritics | |
| </h3> | |
| <p class="section-description"> | |
| Enter Hebrew text with vowel markings and enhanced symbols | |
| indicating pronunciation. | |
| </p> | |
| <div class="input-group"> | |
| <textarea | |
| autocomplete="off" | |
| autocorrect="off" | |
| autocapitalize="off" | |
| spellcheck="false" | |
| id="diacritics-input" | |
| class="form-control rtl w-100" | |
| placeholder="טקסט עם ניקוד יופיע כאן או הכנס ידנית..." | |
| ></textarea> | |
| <div> | |
| <button | |
| class="btn-generate" | |
| onclick="generate('diacritics')" | |
| id="diacritics-btn" | |
| > | |
| <i class="fas fa-play"></i> | |
| Generate | |
| </button> | |
| <div | |
| id="text-status" | |
| class="status-indicator" | |
| style="display: none" | |
| ></div> | |
| </div> | |
| </div> | |
| <div class="helper-info"> | |
| <button type="button" class="helper-btn" id="btnHatama" onclick="insertAtCursor('\u05ab', 'diacritics')"> | |
| <i class="fas fa-dot-circle"></i> | |
| Press for Stress | |
| </button> | |
| <button type="button" class="helper-btn" id="btnVocalShva" onclick="insertAtCursor('\u05bd', 'diacritics')"> | |
| <i class="fas fa-circle"></i> | |
| Press for Vocal Shva | |
| </button> | |
| </div> | |
| <div | |
| id="diacritics-status" | |
| class="status-indicator" | |
| style="display: none" | |
| ></div> | |
| <div | |
| id="diacritics-alert" | |
| class="alert alert-warning" | |
| style="display: none" | |
| > | |
| <i class="fas fa-exclamation-triangle"></i> | |
| Text must contain diacritics. Switch to the Text tab to generate | |
| them automatically. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phonemes Tab --> | |
| <div class="tab-pane fade" id="phonemes-tab"> | |
| <div class="input-section"> | |
| <h3 class="section-title"> | |
| <i class="fas fa-code"></i> | |
| Phonetic Representation | |
| </h3> | |
| <p class="section-description"> | |
| Enter IPA phonemes directly to generate speech. | |
| </p> | |
| <div class="input-group"> | |
| <textarea | |
| autocomplete="off" | |
| autocorrect="off" | |
| autocapitalize="off" | |
| spellcheck="false" | |
| id="phonemes-input" | |
| class="form-control w-100 phoneme-input" | |
| placeholder="Phonetic transcription will appear here or enter manually..." | |
| ></textarea> | |
| <div> | |
| <button | |
| class="btn-generate" | |
| onclick="generate('phonemes')" | |
| id="phonemes-btn" | |
| > | |
| <i class="fas fa-play"></i> | |
| Generate | |
| </button> | |
| <div | |
| id="text-status" | |
| class="status-indicator" | |
| style="display: none" | |
| ></div> | |
| </div> | |
| </div> | |
| <div class="helper-info helper-phonemes"> | |
| <button | |
| type="button" | |
| class="helper-btn" | |
| id="btnStress" | |
| onclick="insertAtCursor('\u02c8', 'phonemes')" | |
| > | |
| <i class="fas fa-dot-circle"></i> | |
| Stress ˈ | |
| </button> | |
| <button | |
| type="button" | |
| class="helper-btn" | |
| id="btnStress" | |
| onclick="insertAtCursor('χ', 'phonemes')" | |
| > | |
| <i class="fas fa-dot-circle"></i> | |
| χ | |
| </button> | |
| <button | |
| type="button" | |
| class="helper-btn" | |
| id="btnStress" | |
| onclick="insertAtCursor('ʃ', 'phonemes')" | |
| > | |
| <i class="fas fa-dot-circle"></i> | |
| ʃ | |
| </button> | |
| <button | |
| type="button" | |
| class="helper-btn" | |
| id="btnStress" | |
| onclick="insertAtCursor('ʔ', 'phonemes')" | |
| > | |
| <i class="fas fa-dot-circle"></i> | |
| ʔ | |
| </button> | |
| <button | |
| type="button" | |
| class="helper-btn" | |
| id="btnStress" | |
| onclick="insertAtCursor('χ', 'phonemes')" | |
| > | |
| <i class="fas fa-dot-circle"></i> | |
| χ | |
| </button> | |
| <button | |
| type="button" | |
| class="helper-btn" | |
| id="btnStress" | |
| onclick="insertAtCursor('ʁ', 'phonemes')" | |
| > | |
| <i class="fas fa-dot-circle"></i> | |
| ʁ | |
| </button> | |
| <button | |
| type="button" | |
| class="helper-btn" | |
| id="btnStress" | |
| onclick="insertAtCursor('ʒ', 'phonemes')" | |
| > | |
| <i class="fas fa-dot-circle"></i> | |
| ʒ | |
| </button> | |
| <button | |
| type="button" | |
| class="helper-btn" | |
| id="btnStress" | |
| onclick="insertAtCursor('ɡ', 'phonemes')" | |
| > | |
| <i class="fas fa-dot-circle"></i> | |
| ɡ | |
| </button> | |
| </div> | |
| <div | |
| id="phonemes-status" | |
| class="status-indicator" | |
| style="display: none" | |
| ></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audio Result Section --> | |
| <div class="audio-section" id="audio-section" style="display: none"> | |
| <h3 class="audio-title"> | |
| <i class="fas fa-volume-up"></i> | |
| Generated Audio | |
| </h3> | |
| <audio id="audio" controls></audio> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container text-center mt-4"> | |
| <a | |
| href="https://github.com/thewh1teagle/phonikud" | |
| class="github-link" | |
| target="_blank" | |
| > | |
| <i class="fab fa-github"></i> | |
| View Phonikud on GitHub | |
| </a> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="static/script.js"></script> | |
| </body> | |
| </html> | |