latest

.gitattributes

@@ -0,0 +1 @@
+*.onnx filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,10 @@
+---
+title: Text to speech in Hebrew
+emoji: 🐢
+colorFrom: red
+colorTo: green
+sdk: gradio
+sdk_version: "4.44.0"
+app_file: app.py
+pinned: false
+---

app.py

@@ -0,0 +1,57 @@
+"""
+uv sync
+uv pip install Flask
+wget https://huggingface.co/thewh1teagle/phonikud-onnx/resolve/main/phonikud-1.0.int8.onnx
+wget https://huggingface.co/thewh1teagle/phonikud-tts-checkpoints/resolve/main/model.onnx
+wget https://huggingface.co/thewh1teagle/phonikud-tts-checkpoints/resolve/main/model.config.json
+uv run ./examples/space_v1/app.py
+"""
+
+from flask import Flask, render_template, request, jsonify
+from phonikud_tts import Phonikud, phonemize, Piper
+import soundfile as sf
+import base64
+import io
+
+app = Flask(__name__)
+phonikud = Phonikud("phonikud-1.0.int8.onnx")
+piper = Piper("model.onnx", "model.config.json")
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+@app.route("/generate", methods=["POST"])
+def generate():
+    mode = request.form["mode"]
+    text = request.form.get("text", "")
+    phonemes = request.form.get("phonemes", "")
+
+    if mode == "text":
+        with_diacritics = phonikud.add_diacritics(text)
+        phonemes = phonemize(with_diacritics)
+    elif mode == "diacritics":
+        with_diacritics = text
+        phonemes = phonemize(with_diacritics)
+    else:
+        with_diacritics = None
+
+    samples, sample_rate = piper.create(phonemes, is_phonemes=True, length_scale=1.25)
+    buffer = io.BytesIO()
+    sf.write(buffer, samples, sample_rate, format="WAV")
+    buffer.seek(0)
+    b64_audio = base64.b64encode(buffer.read()).decode("utf-8")
+    data_uri = f"data:audio/wav;base64,{b64_audio}"
+
+    return jsonify({
+        "diacritics": with_diacritics,
+        "phonemes": phonemes,
+        "audio": data_uri
+    })
+
+@app.route("/audio/<filename>")
+def serve_audio(filename):
+    return app.send_static_file(filename)
+
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=7860)

model.config.json

@@ -0,0 +1,497 @@
+{
+    "dataset": "",
+    "audio": {
+        "sample_rate": 22050,
+        "quality": "train"
+    },
+    "espeak": {
+        "voice": "he"
+    },
+    "language": {
+        "code": "he"
+    },
+    "inference": {
+        "noise_scale": 0.667,
+        "length_scale": 1,
+        "noise_w": 0.8
+    },
+    "phoneme_type": "raw",
+    "phoneme_map": {},
+    "phoneme_id_map": {
+        " ": [
+            3
+        ],
+        "!": [
+            4
+        ],
+        "\"": [
+            150
+        ],
+        "#": [
+            149
+        ],
+        "$": [
+            2
+        ],
+        "'": [
+            5
+        ],
+        "(": [
+            6
+        ],
+        ")": [
+            7
+        ],
+        ",": [
+            8
+        ],
+        "-": [
+            9
+        ],
+        ".": [
+            10
+        ],
+        "0": [
+            130
+        ],
+        "1": [
+            131
+        ],
+        "2": [
+            132
+        ],
+        "3": [
+            133
+        ],
+        "4": [
+            134
+        ],
+        "5": [
+            135
+        ],
+        "6": [
+            136
+        ],
+        "7": [
+            137
+        ],
+        "8": [
+            138
+        ],
+        "9": [
+            139
+        ],
+        ":": [
+            11
+        ],
+        ";": [
+            12
+        ],
+        "?": [
+            13
+        ],
+        "X": [
+            156
+        ],
+        "^": [
+            1
+        ],
+        "_": [
+            0
+        ],
+        "a": [
+            14
+        ],
+        "b": [
+            15
+        ],
+        "c": [
+            16
+        ],
+        "d": [
+            17
+        ],
+        "e": [
+            18
+        ],
+        "f": [
+            19
+        ],
+        "g": [
+            154
+        ],
+        "h": [
+            20
+        ],
+        "i": [
+            21
+        ],
+        "j": [
+            22
+        ],
+        "k": [
+            23
+        ],
+        "l": [
+            24
+        ],
+        "m": [
+            25
+        ],
+        "n": [
+            26
+        ],
+        "o": [
+            27
+        ],
+        "p": [
+            28
+        ],
+        "q": [
+            29
+        ],
+        "r": [
+            30
+        ],
+        "s": [
+            31
+        ],
+        "t": [
+            32
+        ],
+        "u": [
+            33
+        ],
+        "v": [
+            34
+        ],
+        "w": [
+            35
+        ],
+        "x": [
+            36
+        ],
+        "y": [
+            37
+        ],
+        "z": [
+            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
+        ],
+        "ʜ": [
+            114
+        ],
+        "ʝ": [
+            115
+        ],
+        "ʟ": [
+            116
+        ],
+        "ʡ": [
+            117
+        ],
+        "ʢ": [
+            118
+        ],
+        "ʦ": [
+            155
+        ],
+        "ʰ": [
+            145
+        ],
+        "ʲ": [
+            119
+        ],
+        "ˈ": [
+            120
+        ],
+        "ˌ": [
+            121
+        ],
+        "ː": [
+            122
+        ],
+        "ˑ": [
+            123
+        ],
+        "˞": [
+            124
+        ],
+        "ˤ": [
+            146
+        ],
+        "̃": [
+            141
+        ],
+        "̧": [
+            140
+        ],
+        "̩": [
+            144
+        ],
+        "̪": [
+            142
+        ],
+        "̯": [
+            143
+        ],
+        "̺": [
+            152
+        ],
+        "̻": [
+            153
+        ],
+        "β": [
+            125
+        ],
+        "ε": [
+            147
+        ],
+        "θ": [
+            126
+        ],
+        "χ": [
+            127
+        ],
+        "ᵻ": [
+            128
+        ],
+        "↑": [
+            151
+        ],
+        "↓": [
+            148
+        ],
+        "ⱱ": [
+            129
+        ]
+    },
+    "num_symbols": 256,
+    "num_speakers": 1,
+    "speaker_id_map": {},
+    "piper_version": "1.0.0"
+}

model.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:80c90edca36003724c5b200be00301dea756001156d12b81036578f3d5bbc3b8
+size 63511038

phonikud-1.0.int8.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5c4e7b0dbb263315ca124865da1ef3da3e91f64fb8acec6c437312a6bc0a8d51
+size 307683244

phonikud_tts/__init__.py

@@ -0,0 +1,10 @@
+from piper_onnx import Piper
+from phonikud import phonemize
+from phonikud_onnx import Phonikud
+
+class StyleTTS2:
+    def __init__(self):
+        ...
+
+    def create(text: str, is_phonemes = False):
+        ...

requirements.txt

@@ -0,0 +1,139 @@
+# This file was autogenerated by uv via the following command:
+#    uv export --no-hashes --no-emit-project
+attrs==25.3.0
+    # via
+    #   csvw
+    #   jsonschema
+    #   phonemizer-fork
+    #   referencing
+babel==2.17.0
+    # via csvw
+certifi==2025.4.26
+    # via requests
+cffi==1.17.1
+    # via
+    #   sounddevice
+    #   soundfile
+charset-normalizer==3.4.2
+    # via requests
+colorama==0.4.6
+    # via
+    #   colorlog
+    #   csvw
+    #   tqdm
+coloredlogs==15.0.1
+    # via onnxruntime
+colorlog==6.9.0
+    # via phonikud
+csvw==3.5.1
+    # via segments
+dlinfo==2.0.0
+    # via phonemizer-fork
+docopt==0.6.2
+    # via num2words
+espeakng-loader==0.2.4
+    # via piper-onnx
+filelock==3.18.0
+    # via huggingface-hub
+flatbuffers==25.2.10
+    # via onnxruntime
+fsspec==2025.5.1
+    # via huggingface-hub
+hf-xet==1.1.2 ; platform_machine == 'aarch64' or platform_machine == 'amd64' or platform_machine == 'arm64' or platform_machine == 'x86_64'
+    # via huggingface-hub
+huggingface-hub==0.32.2
+    # via tokenizers
+humanfriendly==10.0
+    # via coloredlogs
+idna==3.10
+    # via requests
+isodate==0.7.2
+    # via csvw
+joblib==1.5.1
+    # via phonemizer-fork
+jsonschema==4.24.0
+    # via csvw
+jsonschema-specifications==2025.4.1
+    # via jsonschema
+language-tags==1.2.0
+    # via csvw
+mpmath==1.3.0
+    # via sympy
+num2words==0.5.14
+    # via phonikud
+numpy==2.2.6
+    # via
+    #   onnxruntime
+    #   soundfile
+onnxruntime==1.22.0
+    # via
+    #   phonikud-onnx
+    #   piper-onnx
+packaging==25.0
+    # via
+    #   huggingface-hub
+    #   onnxruntime
+phonemizer-fork==3.3.2
+    # via piper-onnx
+phonikud @ git+https://github.com/thewh1teagle/phonikud@fe201c7c1840185a3b8d8b65cd1bfdb00af959e6
+    # via phonikud-tts
+phonikud-onnx==1.0.1
+    # via phonikud-tts
+piper-onnx==1.0.5
+    # via phonikud-tts
+protobuf==6.31.1
+    # via onnxruntime
+pycparser==2.22
+    # via cffi
+pyparsing==3.2.3
+    # via rdflib
+pyreadline3==3.5.4 ; sys_platform == 'win32'
+    # via humanfriendly
+python-dateutil==2.9.0.post0
+    # via csvw
+pyyaml==6.0.2
+    # via huggingface-hub
+rdflib==7.1.4
+    # via csvw
+referencing==0.36.2
+    # via
+    #   jsonschema
+    #   jsonschema-specifications
+regex==2024.11.6
+    # via
+    #   phonikud
+    #   segments
+requests==2.32.3
+    # via
+    #   csvw
+    #   huggingface-hub
+rfc3986==1.5.0
+    # via csvw
+rpds-py==0.25.1
+    # via
+    #   jsonschema
+    #   referencing
+segments==2.3.0
+    # via phonemizer-fork
+six==1.17.0
+    # via python-dateutil
+sounddevice==0.5.2
+    # via phonikud-tts
+soundfile==0.13.1
+    # via phonikud-tts
+sympy==1.14.0
+    # via onnxruntime
+tokenizers==0.21.1
+    # via phonikud-onnx
+tqdm==4.67.1
+    # via huggingface-hub
+typing-extensions==4.13.2
+    # via
+    #   huggingface-hub
+    #   phonemizer-fork
+    #   referencing
+uritemplate==4.1.1
+    # via csvw
+urllib3==2.4.0
+    # via requests
+Flask

static/script.js

@@ -0,0 +1,139 @@
+function hasDiacritics(text) {
+    // Check for Hebrew diacritics (nikud) in the range \u05b0 to \u05c7
+    return /[\u05b0-\u05c7]/.test(text);
+}
+
+function generate(mode) {
+    const statusId = mode + "-status";
+    const buttonId = mode + "-btn";
+    const statusElement = document.getElementById(statusId);
+    const buttonElement = document.getElementById(buttonId);
+    const alertElement = document.getElementById("diacritics-alert");
+
+    // Hide alert first
+    if (alertElement) {
+        alertElement.style.display = "none";
+    }
+
+    // Check for diacritics if in diacritics mode
+    if (mode === "diacritics") {
+        const text = document.getElementById("diacritics-input").value;
+        if (text && !hasDiacritics(text)) {
+            alertElement.style.display = "block";
+            statusElement.style.display = 'none'
+            return;
+        }
+    }
+
+    // Show and update status
+    statusElement.style.display = "flex";
+    statusElement.textContent = "Generating audio...";
+    statusElement.className = "status-indicator status-generating";
+
+    // Disable button
+    buttonElement.disabled = true;
+
+    // Hide audio section
+    const audioSection = document.getElementById("audio-section");
+    const audio = document.getElementById("audio");
+    audio.pause();
+    audio.src = "";
+
+    const formData = new FormData();
+    formData.append("mode", mode);
+    formData.append(
+        "text",
+        mode === "phonemes" ? "" : document.getElementById(mode + "-input").value
+    );
+    formData.append("phonemes", document.getElementById("phonemes-input").value);
+
+    fetch("/generate", { method: "POST", body: formData })
+        .then((res) => res.json())
+        .then((data) => {
+            // Update all fields with returned data
+            if (data.diacritics) {
+                document.getElementById("diacritics-input").value = data.diacritics || "";
+            }
+            if (data.phonemes) {
+                document.getElementById("phonemes-input").value = data.phonemes || "";
+            }
+            
+            
+
+            // Set up audio
+            audio.src = data.audio;
+            audioSection.style.display = "block";
+
+            // Auto-play audio
+            setTimeout(() => {
+                audio.play().catch(e => console.log("Auto-play prevented by browser"));
+            }, 300);
+
+            // Update status to success
+            statusElement.textContent = "✓ Audio generated successfully";
+            statusElement.className = "status-indicator status-ready";
+        })
+        .catch((err) => {
+            statusElement.textContent = "✗ Error generating audio";
+            statusElement.className = "status-indicator status-error";
+            console.error(err);
+        })
+        .finally(() => {
+            // Re-enable button
+            buttonElement.disabled = false;
+        });
+}
+
+const diacriticsInput = document.getElementById('diacritics-input');
+const phonemesInput = document.getElementById('phonemes-input');
+const textInput = document.getElementById('text-input');
+const btnHatama = document.getElementById('btnHatama');
+const btnVocalShva = document.getElementById('btnVocalShva');
+const btnStress = document.getElementById('btnStress');
+
+function insertAtCursor(charToInsert, inputName) {
+    const inputElement = inputName == 'diacritics' ? diacriticsInput : inputName == 'text' ? textInput : phonemesInput
+    const start = inputElement.selectionStart;
+    const end = inputElement.selectionEnd;
+    const text = inputElement.value;
+
+    inputElement.value = text.slice(0, start) + charToInsert + text.slice(end);
+    // Move cursor after inserted char
+    inputElement.selectionStart = inputElement.selectionEnd = start + charToInsert.length;
+    inputElement.focus();
+}
+
+btnHatama.addEventListener('click', () => {
+    insertAtCursor('\u05ab'); // Hebrew Shin Dot (Hatama)
+});
+
+btnVocalShva.addEventListener('click', () => {
+    insertAtCursor('\u05bd'); // Hebrew Vocal Shva
+});
+
+// btnStress.addEventListener('click', () => {
+//     insertAtCursor('\u05bd');
+// })
+
+// Set initial example text
+window.addEventListener('load', () => {
+    setTimeout(() => {
+        document.getElementById("text-input").value =
+            "מה שבהגדרה משאיר את הכלכלה ההונגרית מאחור, אפילו ביחס למדינות כמו פולין.";
+        document.getElementById('diacritics-input').value = "מָה שֶׁבַּ|הַגְדָּרָה מַשְׁאִיר אֶת הַ|כַּלְכָּלָה הַ|הוּנְגָּרִית מֵאָחוֹר, אֲפִ֫ילּוּ בְּֽ|יַ֫חַס לִ|מְדִינוֹת כְּמוֹ פּוֹלִין."
+        document.getElementById('phonemes-input').value = "mˈa ʃebahaɡdaʁˈa maʃʔˈiʁ ʔˈet hakalkalˈa hahunɡaʁˈit meʔaχˈoʁ, ʔafˈilu bejˈaχas limdinˈot kmˈo polˈin."
+    }, 500);
+});
+
+// Tab switching enhancement
+document.querySelectorAll('[data-bs-toggle="tab"]').forEach(tab => {
+    tab.addEventListener('shown.bs.tab', function (event) {
+        // Hide all status indicators and alerts when switching tabs
+        document.querySelectorAll('.status-indicator').forEach(status => {
+            status.style.display = 'none';
+        });
+        document.querySelectorAll('.alert').forEach(alert => {
+            alert.style.display = 'none';
+        });
+    });
+});

static/style.css

@@ -0,0 +1,516 @@
+:root {
+  --primary-color: #2563eb;
+  --secondary-color: #64748b;
+  --success-color: #059669;
+  --warning-color: #d97706;
+  --accent-color: #7c3aed;
+  --bg-gradient: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+  --card-bg: rgba(255, 255, 255, 0.98);
+  --border-radius: 12px;
+  --shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --hover-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
+  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--bg-gradient);
+  min-height: 100vh;
+  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+  padding: 20px;
+  color: #1f2937;
+}
+
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 32px;
+  color: white;
+}
+
+.header h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  letter-spacing: -0.025em;
+}
+
+.header-subtitle {
+  font-size: 1rem;
+  opacity: 0.9;
+  margin-bottom: 20px;
+  font-weight: 400;
+}
+
+.github-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: white;
+  text-decoration: none;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 6px 12px;
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  transition: var(--transition);
+  font-weight: 500;
+}
+
+.github-link:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  transform: translateY(-1px);
+}
+
+.main-card {
+  background: var(--card-bg);
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: var(--transition);
+}
+
+.main-card:hover {
+  box-shadow: var(--hover-shadow);
+}
+
+.tabs-container {
+  border-bottom: 1px solid #e5e7eb;
+  background: #f8fafc;
+  padding: 0;
+}
+
+.nav-tabs {
+  border: none;
+  margin: 0;
+  display: flex;
+}
+
+.nav-tabs .nav-link {
+  border: none;
+  border-radius: 0;
+  padding: 16px 24px;
+  font-weight: 600;
+  color: var(--secondary-color);
+  transition: var(--transition);
+  position: relative;
+  background: transparent;
+  border-bottom: 3px solid transparent;
+  flex: 1;
+  text-align: center;
+}
+
+.nav-tabs .nav-link:hover {
+  color: var(--primary-color);
+  background-color: rgba(37, 99, 235, 0.05);
+}
+
+.nav-tabs .nav-link.active {
+  color: var(--primary-color);
+  background-color: white;
+  border-bottom: 3px solid var(--primary-color);
+}
+
+.nav-tabs .nav-link i {
+  margin-right: 8px;
+}
+
+.tab-content {
+  padding: 32px;
+  /* min-height: 60vh; */
+  display: flex;
+  flex-direction: column;
+}
+
+.input-section {
+  margin-bottom: 24px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-description {
+  color: var(--secondary-color);
+  font-size: 0.95rem;
+  margin-bottom: 16px;
+}
+
+.input-group {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  flex: 1;
+}
+
+.form-control {
+  border: 2px solid #e5e7eb;
+  border-radius: var(--border-radius);
+  padding: 12px 16px;
+  font-size: 1.7rem;
+  transition: var(--transition);
+  flex: 1;
+  min-height: 120px;
+  resize: vertical;
+  font-family: "Noto Sans", sans-serif;
+  font-weight: 400;
+  color: #333;
+}
+
+.form-control:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+  outline: none;
+}
+
+.rtl {
+  direction: rtl;
+  font-family: "Noto Sans", "Times New Roman", serif;
+}
+
+.phoneme-input {
+  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+  font-size: 1.7rem;
+}
+
+.btn-generate {
+  background: var(--primary-color);
+  border: none;
+  border-radius: var(--border-radius);
+  color: white;
+  padding: 12px 24px;
+  font-weight: 600;
+  font-size: 14px;
+  min-width: 120px;
+  height: fit-content;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+}
+
+.btn-generate:hover {
+  background: #1d4ed8;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+
+.btn-generate:active {
+  transform: translateY(0);
+}
+
+.btn-generate:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Alef:wght@400;700&display=swap');
+
+#diacritics-input, #text-input {
+  font-family: 'Noto Sans';
+  font-weight: 100;
+}
+
+.status-indicator {
+  margin-top: 16px;
+  padding: 12px 16px;
+  border-radius: var(--border-radius);
+  font-weight: 500;
+  text-align: center;
+  font-size: 14px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition);
+}
+
+.status-generating {
+  background: linear-gradient(90deg, #fbbf24, #f59e0b);
+  color: white;
+}
+
+.status-ready {
+  background: linear-gradient(90deg, #10b981, #059669);
+  color: white;
+}
+
+.status-error {
+  background: linear-gradient(90deg, #ef4444, #dc2626);
+  color: white;
+}
+
+.helper-info {
+  background: #f1f5f9;
+  border: 1px solid #cbd5e1;
+  border-radius: var(--border-radius);
+  padding: 12px 16px;
+  font-size: 13px;
+  color: #475569;
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.helper-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-family: "Noto Sans", sans-serif;
+  font-size: 0.85rem;
+  color: #444;
+  background-color: #f7f7f7;
+  border: 1.5px solid #bbb;
+  border-radius: var(--border-radius);
+  box-shadow: inset 0 -1px 0 #bbb, 0 2px 0 #ccc;
+  cursor: pointer;
+  user-select: none;
+  transition: var(--transition);
+}
+
+.helper-btn:hover {
+  background-color: #e7e7e7;
+  box-shadow: inset 0 -1px 0 #999, 0 3px 0 #aaa;
+}
+
+.audio-section {
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--border-radius);
+  padding: 24px;
+  text-align: center;
+  margin-top: 24px;
+}
+
+.audio-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+#audio {
+  width: 100%;
+  max-width: 400px;
+  border-radius: var(--border-radius);
+}
+
+.alert {
+  border-radius: var(--border-radius);
+  border: none;
+  padding: 12px 16px;
+  margin-top: 12px;
+}
+
+.alert-warning {
+  background: linear-gradient(90deg, #fbbf24, #f59e0b);
+  color: white;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tab-pane {
+  animation: fadeIn 0.3s ease-out;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+
+  body {
+    padding: 10px;
+  }
+
+
+
+  .container {
+    padding: 0;
+  }
+
+  .header h2 {
+    font-size: 2rem;
+  }
+
+  .header-subtitle {
+    font-size: 0.9rem;
+  }
+
+  .main-card {
+    
+    min-height: 95vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav-tabs {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .nav-tabs .nav-link {
+    padding: 14px 6px;
+    font-size: 14px;
+    flex: 1;
+    text-align: center;
+    min-width: 0;
+    word-wrap: break-word;
+  }
+
+  .nav-tabs .nav-link i {
+    margin-right: 4px;
+  }
+
+  .tab-content {
+    padding: 20px 16px;
+    /* flex: 1; */
+    /* overflow-y: auto; */
+    height: 100%;
+    min-height: 0;
+  }
+
+  .input-section {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .input-group {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .form-control {
+    font-size: 1.3rem;
+    min-height: 200px;
+    flex: 1;
+  }
+
+  .btn-generate {
+    width: 100%;
+    margin-top: 12px;
+  }
+
+  .helper-info {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .helper-btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .audio-section {
+    padding: 16px;
+    margin-top: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+
+
+
+  .header h2 {
+    font-size: 1.75rem;
+  }
+
+  .nav-tabs .nav-link {
+    padding: 12px 4px;
+    font-size: 13px;
+  }
+
+  .tab-content {
+    padding: 16px 12px;
+  }
+
+  .section-title {
+    font-size: 1.1rem;
+  }
+
+  .section-description {
+    font-size: 0.9rem;
+  }
+}
+
+
+.main-card {
+  min-height: 65vh;
+}
+
+
+textarea {
+  min-height: 180px !important;
+}
+
+@media (max-width: 768px) {
+  .main-card {
+    min-height: 80vh;
+  }
+
+  textarea {
+    /* min-height: 50px !important; */
+  }
+}
+
+
+#phonemes-input {
+  font-family: 'Noto Sans', sans-serif;
+}
+
+.helper-phonemes {
+  display: flex;
+  flex-direction: row;
+}
+
+.helper-phonemes button {
+  width: unset;
+}
+
+
+@media (max-width: 768px) {
+
+  textarea {
+    height: 30vh !important;
+  }
+}

templates/index.html

@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<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>