Redesign SignSpeak demo interface

app.py

@@ -12,6 +12,32 @@ from signspeak.tts import generate_tts
 APP_DIR = Path(__file__).resolve().parent
 CUSTOM_CSS = (APP_DIR / "assets" / "styles.css").read_text(encoding="utf-8")
 
+LANGUAGE_CHOICES = [
+    "Auto",
+    "Chinese",
+    "English",
+    "Japanese",
+    "Korean",
+    "German",
+    "French",
+    "Russian",
+    "Portuguese",
+    "Spanish",
+    "Italian",
+]
+
+SPEAKER_CHOICES = [
+    "Vivian",
+    "Serena",
+    "Uncle_Fu",
+    "Dylan",
+    "Eric",
+    "Ryan",
+    "Aiden",
+    "Ono_Anna",
+    "Sohee",
+]
+
 
 def run_asl_brick(video_file: str | None) -> tuple[str, dict, str]:
     try:
@@ -56,81 +82,73 @@ def build_video_input(label: str) -> gr.Video:
 with gr.Blocks(title="SignSpeak Local") as demo:
     gr.HTML(
         """
-        <section id="hero">
-          <h1>SignSpeak Local</h1>
-          <p>
-            ASL video to expressive speech, with independent ASL, llama.cpp,
-            and Qwen3-TTS bricks for controlled demo runs.
-          </p>
-          <div class="badge-row">
-            <span class="badge">ASL video</span>
-            <span class="badge">live camera</span>
-            <span class="badge">llama.cpp</span>
-            <span class="badge">Qwen3-TTS</span>
+        <main id="hero">
+          <div class="brand-lockup">
+            <span class="brand-mark" aria-hidden="true"></span>
+            <div>
+              <p class="eyebrow">Local ASL speech console</p>
+              <h1>SignSpeak Local</h1>
+            </div>
+          </div>
+          <div class="hero-grid">
+            <div>
+              <p class="hero-copy">
+                Translate camera or uploaded ASL clips into expressive speech with a
+                controllable ASL, llama.cpp, and Qwen3-TTS pipeline.
+              </p>
+              <div class="pipeline-rail" aria-label="Pipeline stages">
+                <span>Capture</span>
+                <span>ASL</span>
+                <span>Intent</span>
+                <span>Voice</span>
+              </div>
+            </div>
+            <div class="system-strip" aria-label="System capabilities">
+              <span>Camera ready</span>
+              <span>Offline LLM</span>
+              <span>Expressive TTS</span>
+            </div>
           </div>
-        </section>
+        </main>
         """
     )
 
     with gr.Tabs():
-        with gr.Tab("Full pipeline"):
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("### Input")
+        with gr.Tab("Run demo"):
+            with gr.Row(elem_classes=["demo-grid"]):
+                with gr.Column(scale=6, elem_classes=["panel-shell", "input-panel"]):
+                    gr.HTML('<div class="section-kicker">01 Capture</div>')
                     full_video_input = build_video_input("Video or camera capture")
-                    full_language_input = gr.Dropdown(
-                        label="Language",
-                        choices=[
-                            "Auto",
-                            "Chinese",
-                            "English",
-                            "Japanese",
-                            "Korean",
-                            "German",
-                            "French",
-                            "Russian",
-                            "Portuguese",
-                            "Spanish",
-                            "Italian",
-                        ],
-                        value="English",
-                    )
-                    full_speaker_input = gr.Dropdown(
-                        label="Speaker",
-                        choices=[
-                            "Vivian",
-                            "Serena",
-                            "Uncle_Fu",
-                            "Dylan",
-                            "Eric",
-                            "Ryan",
-                            "Aiden",
-                            "Ono_Anna",
-                            "Sohee",
-                        ],
-                        value="Ryan",
-                    )
-                    run_full_button = gr.Button(
-                        "Run full pipeline",
-                        elem_id="run_full",
-                    )
-
-                with gr.Column(scale=1):
-                    gr.Markdown("### Output")
+                    with gr.Row(elem_classes=["control-row"]):
+                        full_language_input = gr.Dropdown(
+                            label="Language",
+                            choices=LANGUAGE_CHOICES,
+                            value="English",
+                        )
+                        full_speaker_input = gr.Dropdown(
+                            label="Speaker",
+                            choices=SPEAKER_CHOICES,
+                            value="Ryan",
+                        )
+                    run_full_button = gr.Button("Run full pipeline", elem_id="run_full")
+
+                with gr.Column(scale=5, elem_classes=["panel-shell", "output-panel"]):
+                    gr.HTML('<div class="section-kicker">02 Speech output</div>')
+                    full_audio_output = gr.Audio(label="Generated audio", type="filepath")
                     full_summary_output = gr.Textbox(label="ASL summary", lines=4)
                     full_subtitle_output = gr.Textbox(label="Subtitle", lines=3)
                     full_instruction_output = gr.Textbox(label="Voice instruction", lines=3)
-                    full_audio_output = gr.Audio(label="Generated audio", type="filepath")
 
-            with gr.Row():
-                full_intent_output = gr.Code(label="Intent JSON", language="json", lines=12)
-                full_asl_json_output = gr.JSON(label="ASL structured output")
-                full_llm_json_output = gr.JSON(label="LLM structured output")
+            with gr.Accordion("Pipeline diagnostics", open=False):
+                with gr.Row(elem_classes=["diagnostic-grid"]):
+                    full_intent_output = gr.Code(label="Intent JSON", language="json", lines=12)
+                    full_asl_json_output = gr.JSON(label="ASL structured output")
+                    full_llm_json_output = gr.JSON(label="LLM structured output")
 
-        with gr.Tab("Brick tests"):
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("### ASL video")
+        with gr.Tab("Inspect bricks"):
+            with gr.Row(elem_classes=["brick-grid"]):
+                with gr.Column(scale=1, elem_classes=["panel-shell"]):
+                    gr.HTML('<div class="section-kicker">ASL brick</div>')
                     asl_video_input = build_video_input("Video or camera capture")
                     run_asl_button = gr.Button("Run ASL brick", elem_id="run_asl")
                     asl_summary_output = gr.Textbox(label="ASL summary", lines=4)
@@ -138,9 +156,9 @@ with gr.Blocks(title="SignSpeak Local") as demo:
                 with gr.Column(scale=1):
                     asl_json_output = gr.JSON(label="ASL structured output")
 
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("### llama.cpp")
+            with gr.Row(elem_classes=["brick-grid"]):
+                with gr.Column(scale=1, elem_classes=["panel-shell"]):
+                    gr.HTML('<div class="section-kicker">llama.cpp brick</div>')
                     intent_input = gr.Code(
                         label="Intent JSON",
                         value=json_text(DEFAULT_INTENT),
@@ -156,39 +174,17 @@ with gr.Blocks(title="SignSpeak Local") as demo:
                     instruction_output = gr.Textbox(label="Voice instruction", lines=3)
                     llm_json_output = gr.JSON(label="LLM structured output")
 
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("### Qwen3-TTS")
+            with gr.Row(elem_classes=["brick-grid"]):
+                with gr.Column(scale=1, elem_classes=["panel-shell"]):
+                    gr.HTML('<div class="section-kicker">Qwen3-TTS brick</div>')
                     tts_language_input = gr.Dropdown(
                         label="Language",
-                        choices=[
-                            "Auto",
-                            "Chinese",
-                            "English",
-                            "Japanese",
-                            "Korean",
-                            "German",
-                            "French",
-                            "Russian",
-                            "Portuguese",
-                            "Spanish",
-                            "Italian",
-                        ],
+                        choices=LANGUAGE_CHOICES,
                         value="English",
                     )
                     tts_speaker_input = gr.Dropdown(
                         label="Speaker",
-                        choices=[
-                            "Vivian",
-                            "Serena",
-                            "Uncle_Fu",
-                            "Dylan",
-                            "Eric",
-                            "Ryan",
-                            "Aiden",
-                            "Ono_Anna",
-                            "Sohee",
-                        ],
+                        choices=SPEAKER_CHOICES,
                         value="Ryan",
                     )
                     run_tts_button = gr.Button("Generate speech", elem_id="run_tts")

assets/styles.css

@@ -1,64 +1,228 @@
 :root {
-  --bg: #080a12;
-  --panel: rgba(255, 255, 255, 0.08);
-  --panel-strong: rgba(255, 255, 255, 0.12);
-  --panel-border: rgba(255, 255, 255, 0.16);
+  --app-bg: #080b10;
+  --surface: #101722;
+  --surface-raised: #151f2c;
+  --surface-soft: rgba(255, 255, 255, 0.055);
+  --line: rgba(226, 232, 240, 0.14);
+  --line-strong: rgba(226, 232, 240, 0.24);
   --text: #f8fafc;
-  --muted: #a8b3c7;
-  --accent: #2dd4bf;
-  --accent-2: #818cf8;
-  --warm: #f59e0b;
-  --danger: #f43f5e;
+  --text-soft: #cbd5e1;
+  --muted: #8ea0b8;
+  --teal: #2dd4bf;
+  --teal-dark: #0f766e;
+  --indigo: #818cf8;
+  --blue: #38bdf8;
+  --amber: #f59e0b;
+  --rose: #fb7185;
+  --green: #22c55e;
+  --shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
 }
 
 .gradio-container {
   background:
-    linear-gradient(135deg, #080a12 0%, #101827 52%, #111322 100%) !important;
+    linear-gradient(180deg, rgba(45, 212, 191, 0.08) 0, transparent 240px),
+    linear-gradient(135deg, #080b10 0%, #0d1420 48%, #111827 100%) !important;
   color: var(--text) !important;
-  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
+}
+
+.gradio-container > .main {
+  max-width: 1280px !important;
+  margin: 0 auto !important;
 }
 
 #hero {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(129, 140, 248, 0.10) 52%, rgba(245, 158, 11, 0.08)),
+    rgba(16, 23, 34, 0.86);
+  box-shadow: var(--shadow);
   padding: 24px;
-  border: 1px solid var(--panel-border);
+  margin: 8px 0 18px;
+}
+
+.brand-lockup {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.brand-mark {
+  width: 42px;
+  height: 42px;
   border-radius: 8px;
-  background: linear-gradient(135deg, rgba(45, 212, 191, 0.14), rgba(129, 140, 248, 0.10));
-  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
+  background:
+    linear-gradient(135deg, var(--teal), var(--indigo));
+  border: 1px solid rgba(255, 255, 255, 0.36);
+  box-shadow: 0 12px 32px rgba(45, 212, 191, 0.22);
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.brand-mark::after {
+  content: "";
+  position: absolute;
+  inset: 11px;
+  border: 2px solid rgba(8, 11, 16, 0.76);
+  border-radius: 6px;
+}
+
+.eyebrow {
+  margin: 0 0 4px;
+  color: var(--teal);
+  font-size: 12px;
+  line-height: 1.2;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
 }
 
 #hero h1 {
-  font-size: 38px;
-  line-height: 1.08;
-  margin-bottom: 8px;
+  margin: 0;
+  color: var(--text);
+  font-size: 42px;
+  line-height: 1.05;
   letter-spacing: 0;
 }
 
-#hero p {
-  color: var(--muted);
-  font-size: 16px;
+.hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 24px;
+  align-items: end;
+  margin-top: 18px;
+}
+
+.hero-copy {
   max-width: 760px;
+  color: var(--text-soft);
+  font-size: 16px;
+  line-height: 1.6;
+  margin: 0 0 16px;
 }
 
-.badge-row {
-  display: flex;
-  flex-wrap: wrap;
+.pipeline-rail {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 8px;
-  margin-top: 14px;
+  max-width: 680px;
 }
 
-.badge {
-  padding: 7px 10px;
+.pipeline-rail span {
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  color: #dbeafe;
-  font-weight: 700;
+  background: rgba(8, 11, 16, 0.42);
+  color: #e2e8f0;
   font-size: 13px;
+  font-weight: 800;
 }
 
-.stage-title {
-  margin: 8px 0 4px;
-  color: #e2e8f0;
+.pipeline-rail span:nth-child(1) {
+  border-color: rgba(45, 212, 191, 0.40);
+}
+
+.pipeline-rail span:nth-child(2) {
+  border-color: rgba(34, 197, 94, 0.36);
+}
+
+.pipeline-rail span:nth-child(3) {
+  border-color: rgba(129, 140, 248, 0.40);
+}
+
+.pipeline-rail span:nth-child(4) {
+  border-color: rgba(245, 158, 11, 0.40);
+}
+
+.system-strip {
+  min-width: 220px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(8, 11, 16, 0.38);
+  padding: 10px;
+  display: grid;
+  gap: 8px;
+}
+
+.system-strip span {
+  color: var(--text-soft);
+  font-size: 13px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.system-strip span::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--green);
+  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
+}
+
+.tabs {
+  border-radius: 8px !important;
+}
+
+.tab-nav {
+  border-bottom: 1px solid var(--line) !important;
+}
+
+.tab-nav button {
+  color: var(--muted) !important;
+}
+
+.tab-nav button.selected {
+  color: var(--text) !important;
+  border-color: var(--teal) !important;
+}
+
+.demo-grid,
+.brick-grid,
+.diagnostic-grid {
+  gap: 16px !important;
+}
+
+.panel-shell {
+  border: 1px solid var(--line) !important;
+  border-radius: 8px !important;
+  background: rgba(16, 23, 34, 0.72) !important;
+  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
+  padding: 14px !important;
+}
+
+.input-panel {
+  border-color: rgba(45, 212, 191, 0.22) !important;
+}
+
+.output-panel {
+  border-color: rgba(245, 158, 11, 0.24) !important;
+}
+
+.section-kicker {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 10px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.055);
+  color: var(--teal);
+  font-size: 12px;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.control-row {
+  align-items: end !important;
 }
 
 .block,
@@ -67,52 +231,136 @@
   border-radius: 8px !important;
 }
 
+.block {
+  border-color: var(--line) !important;
+  background: rgba(15, 23, 42, 0.60) !important;
+}
+
+label,
+.label-wrap span {
+  color: var(--text-soft) !important;
+  font-weight: 800 !important;
+}
+
 textarea,
 input,
 select {
-  background: rgba(15, 23, 42, 0.78) !important;
+  background: rgba(8, 11, 16, 0.68) !important;
   color: var(--text) !important;
-  border-color: rgba(255, 255, 255, 0.14) !important;
+  border-color: rgba(226, 232, 240, 0.14) !important;
+  border-radius: 8px !important;
+  font-size: 15px !important;
+}
+
+textarea:focus,
+input:focus,
+select:focus,
+button:focus-visible {
+  outline: 2px solid rgba(45, 212, 191, 0.90) !important;
+  outline-offset: 2px !important;
 }
 
 button.primary,
 button {
   border-radius: 8px !important;
-  font-weight: 800 !important;
-  min-height: 44px !important;
+  font-weight: 900 !important;
+  min-height: 46px !important;
+  transition: transform 160ms ease, border-color 160ms ease, filter 160ms ease !important;
+  touch-action: manipulation;
+}
+
+button:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.04);
+}
+
+button:active {
+  transform: translateY(0);
 }
 
 #run_asl {
-  background: linear-gradient(135deg, var(--accent), #22c55e) !important;
+  background: linear-gradient(135deg, var(--teal), var(--green)) !important;
   color: #04111a !important;
   border: none !important;
 }
 
 #run_llm {
-  background: linear-gradient(135deg, var(--accent-2), #3b82f6) !important;
+  background: linear-gradient(135deg, var(--indigo), var(--blue)) !important;
   color: white !important;
   border: none !important;
 }
 
 #run_tts,
 #run_full {
-  background: linear-gradient(135deg, var(--warm), #ec4899) !important;
-  color: white !important;
+  background: linear-gradient(135deg, var(--amber), var(--rose)) !important;
+  color: #111827 !important;
   border: none !important;
 }
 
+.video-container,
+video {
+  border-radius: 8px !important;
+}
+
+audio {
+  width: 100%;
+}
+
+.json-holder,
+pre,
+code {
+  border-radius: 8px !important;
+}
+
 .footer-note {
   color: var(--muted);
   font-size: 13px;
   text-align: center;
+  margin: 18px 0 4px;
 }
 
-@media (max-width: 720px) {
+@media (prefers-reduced-motion: reduce) {
+  button {
+    transition: none !important;
+  }
+
+  button:hover {
+    transform: none;
+  }
+}
+
+@media (max-width: 900px) {
   #hero {
     padding: 18px;
   }
 
   #hero h1 {
-    font-size: 30px;
+    font-size: 32px;
+  }
+
+  .hero-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .system-strip {
+    min-width: 0;
+  }
+
+  .pipeline-rail {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 560px) {
+  #hero h1 {
+    font-size: 28px;
+  }
+
+  .brand-lockup {
+    align-items: flex-start;
+  }
+
+  .pipeline-rail {
+    grid-template-columns: 1fr;
   }
 }