Sync app.py and gitignore; ignore .DS_Store

.gitignore

@@ -1,9 +1,13 @@
+# OS
+.DS_Store
+
 # Python
 __pycache__/
 *.py[cod]
 *.pyo
 *.pyd
 *.pyc
+onnx_models
 
 # Virtual environments
 venv/

app.py

@@ -863,135 +863,114 @@ body, .gradio-container {
     outline: none !important;
     box-shadow: 0 0 0 3px rgba(96,165,250,0.1) !important;
 }
-.gradio-textbox label span, .gradio-dropdown label span,
-.gradio-radio label span, .gradio-slider label span { color: #9ca3af !important; font-size: 0.8rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
-
-/* Controls grid — 4 equal cells, all top-aligned */
-.controls-row {
-    margin-top: 1.25rem;
-    display: grid !important;
-    grid-template-columns: repeat(4, 1fr) !important;
-    gap: 0.75rem !important;
-    align-items: start !important;
-}
-/* Remove any Gradio flex overrides inside the row */
-.controls-row > div,
-.controls-row > div > div { all: unset; display: contents; }
-
-/* Shared label style for all four controls */
-.controls-row .gradio-dropdown > label > span,
-.controls-row .gradio-radio   > fieldset > legend > span,
-.controls-row .gradio-slider  > label > span {
-    display: block !important;
+/* Shared label style */
+.gradio-textbox label span,
+.gradio-dropdown label span,
+.gradio-slider label span {
     color: #9ca3af !important;
     font-size: 0.75rem !important;
     font-weight: 600 !important;
     text-transform: uppercase !important;
     letter-spacing: 0.06em !important;
-    margin-bottom: 0.4rem !important;
-    line-height: 1 !important;
 }
 
-/* Shared control surface height */
-.ctrl-surface {
-    background: #0d0d14;
-    border: 1px solid #2a2a3e;
-    border-radius: 8px;
-    height: 42px;
-    display: flex;
-    align-items: center;
-    padding: 0 0.75rem;
-    transition: border-color 0.2s;
+/* ── Controls rows ─────────────────────────────────────── */
+.controls-row {
+    margin-top: 1rem;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 0.75rem !important;
+}
+
+/* Row 1: Language + Voice side by side */
+.ctrl-row1,
+.ctrl-row2 {
+    display: flex !important;
+    flex-direction: row !important;
+    gap: 0.75rem !important;
+    align-items: flex-start !important;
+    width: 100% !important;
 }
-.ctrl-surface:focus-within { border-color: #60a5fa; }
 
-/* Dropdown */
-.controls-row .gradio-dropdown { display: block !important; }
-.controls-row .gradio-dropdown > label > div {
+/* Language dropdown takes ~40%, Voice takes ~60% */
+.ctrl-lang { flex: 2 !important; min-width: 0 !important; }
+.ctrl-voice { flex: 3 !important; min-width: 0 !important; }
+
+/* Quality + Speed each take 50% */
+.ctrl-steps,
+.ctrl-speed { flex: 1 !important; min-width: 0 !important; }
+
+/* Dropdown styling */
+.ctrl-lang .gradio-dropdown > label > div,
+.ctrl-lang .gradio-dropdown > label > div > div {
     background: #0d0d14 !important;
     border: 1px solid #2a2a3e !important;
     border-radius: 8px !important;
     color: #e8e8f0 !important;
-    min-height: 42px !important;
-    padding: 0 0.75rem !important;
-}
-.controls-row .gradio-dropdown > label > div:focus-within {
-    border-color: #60a5fa !important;
 }
 
-/* Radio — horizontal pills */
-.controls-row .gradio-radio { display: block !important; }
-.controls-row .gradio-radio > fieldset {
+/* Voice radio — pill buttons */
+.ctrl-voice .gradio-radio fieldset {
     border: none !important;
     padding: 0 !important;
     margin: 0 !important;
-    background: transparent !important;
 }
-.controls-row .gradio-radio > fieldset > div {
+.ctrl-voice .gradio-radio fieldset > div {
     display: flex !important;
     flex-direction: row !important;
-    gap: 0.4rem !important;
     flex-wrap: wrap !important;
+    gap: 0.4rem !important;
+    margin-top: 0.35rem !important;
 }
-.controls-row .gradio-radio > fieldset > div > label {
+.ctrl-voice .gradio-radio fieldset > div > label {
     flex: 1 !important;
+    min-width: 80px !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    height: 42px !important;
+    height: 36px !important;
     background: #0d0d14 !important;
     border: 1px solid #2a2a3e !important;
     border-radius: 8px !important;
     cursor: pointer !important;
-    transition: border-color 0.2s, background 0.2s !important;
-    padding: 0 0.5rem !important;
-    white-space: nowrap !important;
+    transition: border-color 0.15s, background 0.15s !important;
+    padding: 0 0.75rem !important;
+    gap: 0.4rem !important;
 }
-.controls-row .gradio-radio > fieldset > div > label:has(input:checked) {
-    background: #1a2744 !important;
+.ctrl-voice .gradio-radio fieldset > div > label:has(input:checked) {
+    background: #0f1f3d !important;
     border-color: #60a5fa !important;
 }
-.controls-row .gradio-radio > fieldset > div > label > input[type=radio] {
-    display: none !important;
+.ctrl-voice .gradio-radio fieldset > div > label > input[type=radio] {
+    width: 14px !important;
+    height: 14px !important;
+    accent-color: #60a5fa !important;
+    flex-shrink: 0 !important;
 }
-.controls-row .gradio-radio > fieldset > div > label > span {
+.ctrl-voice .gradio-radio fieldset > div > label > span {
     color: #c4c4d4 !important;
-    font-size: 0.85rem !important;
+    font-size: 0.82rem !important;
     font-weight: 500 !important;
     text-transform: none !important;
     letter-spacing: normal !important;
+    white-space: nowrap !important;
 }
-.controls-row .gradio-radio > fieldset > div > label:has(input:checked) > span {
+.ctrl-voice .gradio-radio fieldset > div > label:has(input:checked) > span {
     color: #60a5fa !important;
 }
-
-/* Sliders */
-.controls-row .gradio-slider { display: block !important; }
-.controls-row .gradio-slider > label > div {
-    background: #0d0d14 !important;
-    border: 1px solid #2a2a3e !important;
-    border-radius: 8px !important;
-    height: 42px !important;
-    display: flex !important;
-    align-items: center !important;
-    padding: 0 0.75rem !important;
-    gap: 0.6rem !important;
-}
-.controls-row .gradio-slider > label > div > input[type=range] {
-    flex: 1 !important;
-    accent-color: #60a5fa !important;
-    margin: 0 !important;
-}
-.controls-row .gradio-slider > label > div > input[type=number] {
-    background: transparent !important;
-    border: none !important;
+.ctrl-voice .gradio-radio legend span {
     color: #9ca3af !important;
-    font-size: 0.8rem !important;
-    width: 3rem !important;
-    text-align: right !important;
-    padding: 0 !important;
+    font-size: 0.75rem !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.06em !important;
 }
 
+/* Sliders */
+.ctrl-steps .gradio-slider,
+.ctrl-speed .gradio-slider { width: 100% !important; }
+input[type=range] { accent-color: #60a5fa !important; }
+
 /* Generate button */
 .gen-btn {
     background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
@@ -1036,14 +1015,13 @@ table.examples td:first-child { border-left: 1px solid #1e1e2e !important; borde
 table.examples td:last-child { border-right: 1px solid #1e1e2e !important; border-radius: 0 8px 8px 0 !important; }
 table.examples tr:hover td { background: #1a1a2e !important; border-color: #2a2a4e !important; color: #e8e8f0 !important; }
 
-/* Dropdown / Radio / Slider */
+/* Dropdown base */
 .gradio-dropdown select, .gradio-dropdown input {
-    background: #0d0d14 !important; border: 1px solid #2a2a3e !important;
-    color: #e8e8f0 !important; border-radius: 8px !important;
+    background: #0d0d14 !important;
+    border: 1px solid #2a2a3e !important;
+    color: #e8e8f0 !important;
+    border-radius: 8px !important;
 }
-.gradio-radio label { color: #c4c4d4 !important; }
-.gradio-radio input:checked + span { color: #60a5fa !important; }
-input[type=range] { accent-color: #60a5fa !important; }
 
 /* Responsive */
 @media (max-width: 640px) {
@@ -1069,16 +1047,22 @@ with gr.Blocks(title="BlueTTS — Multilingual TTS") as demo:
             value="The power to change begins the moment you believe it's possible!",
         )
 
-        with gr.Row(elem_classes="controls-row"):
-            lang_input = gr.Dropdown(
-                choices=[("English 🇺🇸", "en"), ("Hebrew 🇮🇱", "he"), ("Spanish 🇪🇸", "es"), ("German 🇩🇪", "de"), ("Italian 🇮🇹", "it")],
-                value="en", label="Language", elem_id="ctrl-lang",
-            )
-            voice_input = gr.Radio(
-                choices=list(VOICES.keys()), value="Female 1", label="Voice", elem_id="ctrl-voice",
-            )
-            steps_input = gr.Slider(2, 16, 8, step=1, label="Quality (steps)", elem_id="ctrl-steps")
-            speed_input = gr.Slider(0.5, 2.0, 1.0, step=0.05, label="Speed", elem_id="ctrl-speed")
+        with gr.Column(elem_classes="controls-row"):
+            with gr.Row(elem_classes="ctrl-row1"):
+                with gr.Column(elem_classes="ctrl-lang"):
+                    lang_input = gr.Dropdown(
+                        choices=[("English 🇺🇸", "en"), ("Hebrew 🇮🇱", "he"), ("Spanish 🇪🇸", "es"), ("German 🇩🇪", "de"), ("Italian 🇮🇹", "it")],
+                        value="en", label="Language",
+                    )
+                with gr.Column(elem_classes="ctrl-voice"):
+                    voice_input = gr.Radio(
+                        choices=list(VOICES.keys()), value="Female 1", label="Voice",
+                    )
+            with gr.Row(elem_classes="ctrl-row2"):
+                with gr.Column(elem_classes="ctrl-steps"):
+                    steps_input = gr.Slider(2, 16, 8, step=1, label="Quality (steps)")
+                with gr.Column(elem_classes="ctrl-speed"):
+                    speed_input = gr.Slider(0.5, 2.0, 1.0, step=0.05, label="Speed")
 
         btn = gr.Button("⚡ Generate Speech", elem_classes="gen-btn")