Fix UI - simpler Gradio-native approach

app.py

@@ -5,7 +5,6 @@ import spaces
 from datetime import datetime
 import random
 import string
-import os
 
 SESSION_ID = f"LIVE_{''.join(random.choices(string.ascii_uppercase + string.digits, k=4))}"
 
@@ -34,15 +33,14 @@ def transcribe(audio, state):
         print(f"[SESSION START] {SESSION_ID}", flush=True)
 
     if audio is None:
-        return state, "<div class='transcript-text'>Listening...</div>"
+        return state, "Listening..."
 
     try:
         sr, data = audio
 
-        # 1. AUDIO RECEIPT LOG
         if len(data) > 0:
             peak = np.abs(data).max()
-            if state['counter'] % 10 == 0: # Log every ~1s
+            if state['counter'] % 10 == 0:
                 print(f"[AUDIO RECV] Step {state['counter']} | Shape: {data.shape} | Peak: {peak:.4f}", flush=True)
 
         # Normalize
@@ -60,13 +58,10 @@ def transcribe(audio, state):
 
         state['counter'] += 1
 
-        # LATENCY FIX: 0.2s Threshold (Fast Response)
         if len(state['buffer']) >= 3200:
             if ASR_MODEL:
                 with torch.no_grad():
-                    # LATENCY FIX: Only send 2s of context (32000) instead of 5s.
                     context = state['buffer'][-32000:]
-
                     results = ASR_MODEL.transcribe([context])
                     print(f"[INFER] Context: {len(context)} | Raw: {results}", flush=True)
 
@@ -83,7 +78,6 @@ def transcribe(audio, state):
                             if not current_lines: current_lines.append(text)
                             else: current_lines[-1] = text
 
-            # LATENCY FIX: Aggressive Buffer Cleanup
             if len(state['buffer']) > 32000:
                 state['buffer'] = state['buffer'][-32000:]
 
@@ -92,228 +86,163 @@ def transcribe(audio, state):
         import traceback
         traceback.print_exc()
 
-    # Format output for HTML display
     valid = [l for l in state['transcript'] if l]
     current = valid[-1] if valid else "Listening..."
-    history = "<br>".join(valid[:-1]) if len(valid) > 1 else ""
-
-    output_html = f"""
-    <div class='transcript-current'>{current}</div>
-    <div class='transcript-history'>{history}</div>
-    """
-    return state, output_html
+    return state, current
 
 def clear_session():
     print("[SESSION RESET]", flush=True)
-    return {'transcript': [], 'buffer': None, 'counter': 0}, "<div class='transcript-text'>Listening...</div>"
+    return {'transcript': [], 'buffer': None, 'counter': 0}, "Tap the mic to start..."
 
 def log_connection():
     print(">>> CLIENT CONNECTED <<<", flush=True)
 
-# --- CUSTOM HTML/CSS UI ---
-CUSTOM_CSS = """
+# --- SIMPLE CLEAN CSS ---
+CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
 
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+:root {
+    --bg-dark: #0a0a0f;
+    --bg-gradient: linear-gradient(180deg, #0a0a0f 0%, #151520 50%, #0a0a0f 100%);
 }
 
-body, .gradio-container {
-    background: #0a0a0f !important;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-    min-height: 100vh;
+body {
+    background: var(--bg-dark) !important;
 }
 
 .gradio-container {
+    background: var(--bg-gradient) !important;
+    min-height: 100vh !important;
+    font-family: 'Inter', sans-serif !important;
     max-width: 100% !important;
     padding: 0 !important;
+    margin: 0 !important;
 }
 
-/* Hide default Gradio elements */
-.contain {
-    background: transparent !important;
-}
-
-footer {
-    display: none !important;
-}
-
-/* Main App Container */
-#app-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: linear-gradient(180deg, #0a0a0f 0%, #12121a 50%, #0a0a0f 100%);
+#main-container {
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    background: var(--bg-gradient);
 }
 
 /* Header */
-#header {
+#header-row {
     padding: 20px;
-    text-align: center;
-    z-index: 10;
+    display: flex;
+    justify-content: center;
+    background: transparent !important;
 }
 
 #session-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 20px;
-    padding: 8px 16px;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 13px;
-    font-weight: 500;
-}
-
-#live-dot {
-    width: 8px;
-    height: 8px;
-    background: #22c55e;
-    border-radius: 50%;
-    animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(0.9); }
+    background: rgba(255, 255, 255, 0.05) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 20px !important;
+    padding: 8px 16px !important;
+    color: rgba(255, 255, 255, 0.7) !important;
+    font-size: 14px !important;
 }
 
-/* Transcript Area */
-#transcript-area {
+/* Transcript area */
+#transcript-row {
     flex: 1;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    min-height: 50vh;
+    background: transparent !important;
     padding: 40px 20px;
-    text-align: center;
-    z-index: 10;
 }
 
-.transcript-current {
-    color: #ffffff;
-    font-size: clamp(24px, 5vw, 42px);
-    font-weight: 400;
-    line-height: 1.4;
-    max-width: 800px;
-    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-    animation: fadeIn 0.3s ease-out;
+#transcript-display {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    text-align: center;
 }
 
-.transcript-history {
-    color: rgba(255, 255, 255, 0.35);
-    font-size: clamp(14px, 2.5vw, 18px);
-    font-weight: 300;
-    line-height: 1.8;
-    max-width: 700px;
-    margin-top: 30px;
+#transcript-display textarea {
+    background: transparent !important;
+    border: none !important;
+    color: #ffffff !important;
+    font-size: 36px !important;
+    font-weight: 400 !important;
+    text-align: center !important;
+    line-height: 1.4 !important;
+    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    min-height: 150px !important;
+    resize: none !important;
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
+#transcript-display label {
+    display: none !important;
 }
 
-/* Ambient Glow */
-#ambient-glow {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 150%;
-    height: 50vh;
-    background: radial-gradient(ellipse at center bottom, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
-    pointer-events: none;
-    z-index: 1;
+#transcript-display .wrap {
+    background: transparent !important;
 }
 
-/* Controls Area */
-#controls-area {
-    padding: 30px 20px 50px;
+/* Controls */
+#controls-row {
+    padding: 30px 20px 60px;
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 40px;
-    z-index: 20;
-}
-
-/* Mic Button Container */
-#mic-container {
-    position: relative;
-}
-
-/* Style the Gradio audio component to look like our mic button */
-#mic-container .wrap {
+    gap: 30px;
     background: transparent !important;
-    border: none !important;
-    padding: 0 !important;
 }
 
-#mic-container audio {
-    display: none !important;
-}
-
-#mic-container .audio-container {
+/* Mic button styling */
+#mic-input {
     background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    max-width: 120px;
 }
 
-#mic-container > div {
+#mic-input > div {
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
+    padding: 0 !important;
 }
 
-#mic-container label {
+#mic-input label,
+#mic-input .wrap > div:first-child {
     display: none !important;
 }
 
-#mic-container .controls {
-    background: transparent !important;
+#mic-input audio {
+    display: none !important;
 }
 
-#mic-container button {
+#mic-input button {
     width: 80px !important;
     height: 80px !important;
     border-radius: 50% !important;
     background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
     border: none !important;
     cursor: pointer !important;
-    transition: all 0.2s ease !important;
     box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4) !important;
+    transition: all 0.2s ease !important;
 }
 
-#mic-container button:hover {
+#mic-input button:hover {
     transform: scale(1.05) !important;
     box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5) !important;
 }
 
-#mic-container button:active,
-#mic-container button.recording {
-    transform: scale(0.95) !important;
-    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
-    box-shadow: 0 8px 30px rgba(239, 68, 68, 0.4) !important;
-}
-
-#mic-container button svg {
+#mic-input button svg {
     width: 32px !important;
     height: 32px !important;
-    fill: white !important;
 }
 
-/* Reset Button */
+/* Reset button */
 #reset-btn {
     background: rgba(255, 255, 255, 0.05) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    color: rgba(255, 255, 255, 0.6) !important;
-    padding: 12px 24px !important;
+    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+    color: rgba(255, 255, 255, 0.7) !important;
+    padding: 14px 28px !important;
     border-radius: 12px !important;
     font-size: 14px !important;
     font-weight: 500 !important;
@@ -323,21 +252,15 @@ footer {
 
 #reset-btn:hover {
     background: rgba(255, 255, 255, 0.1) !important;
-    color: rgba(255, 255, 255, 0.9) !important;
-}
-
-/* Transcript display area styling */
-#transcript-display {
-    background: transparent !important;
-    border: none !important;
+    color: #ffffff !important;
 }
 
-#transcript-display > div {
-    background: transparent !important;
+/* Hide Gradio footer and other elements */
+footer {
+    display: none !important;
 }
 
-/* Hide unnecessary Gradio UI elements */
-.svelte-1gfkn6j {
+.contain {
     background: transparent !important;
 }
 
@@ -346,107 +269,77 @@ footer {
     border: none !important;
     box-shadow: none !important;
 }
+
+/* Ambient glow at bottom */
+#controls-row::before {
+    content: '';
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 200%;
+    height: 40vh;
+    background: radial-gradient(ellipse at center bottom, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: 0;
+}
 """
 
 # --- GRADIO APP ---
-with gr.Blocks(css=CUSTOM_CSS, title="Nemotron Speech Streaming") as demo:
+with gr.Blocks(css=CSS, title="Nemotron Speech Streaming", theme=gr.themes.Base()) as demo:
     state = gr.State({'transcript': [], 'buffer': None, 'counter': 0})
 
-    # Main HTML Structure
-    gr.HTML(f"""
-    <div id="app-container">
-        <div id="header">
-            <div id="session-badge">
-                <div id="live-dot"></div>
-                <span>Live Session • {SESSION_ID}</span>
-            </div>
-        </div>
-
-        <div id="transcript-area">
-            <!-- Transcript will be injected here via Gradio -->
-        </div>
-
-        <div id="ambient-glow"></div>
-
-        <div id="controls-area">
-            <!-- Audio and Reset button will be placed here -->
-        </div>
-    </div>
-    """)
-
-    # Transcript Display (positioned in transcript area via JS)
-    with gr.Row(elem_id="transcript-row"):
-        transcript_display = gr.HTML(
-            value="<div class='transcript-current'>Tap the microphone to start speaking...</div>",
-            elem_id="transcript-display"
-        )
-
-    # Controls
-    with gr.Row(elem_id="controls-row"):
-        with gr.Column(elem_id="mic-container", scale=0):
+    with gr.Column(elem_id="main-container"):
+        # Header
+        with gr.Row(elem_id="header-row"):
+            gr.HTML(f"""
+                <div id="session-badge" style="display: inline-flex; align-items: center; gap: 10px;
+                     background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
+                     border-radius: 20px; padding: 10px 20px;">
+                    <span style="width: 10px; height: 10px; background: #22c55e; border-radius: 50%;
+                          animation: pulse 2s infinite;"></span>
+                    <span style="color: rgba(255,255,255,0.8); font-size: 14px;">Live Session • {SESSION_ID}</span>
+                </div>
+                <style>
+                    @keyframes pulse {{
+                        0%, 100% {{ opacity: 1; }}
+                        50% {{ opacity: 0.5; }}
+                    }}
+                </style>
+            """)
+
+        # Transcript display
+        with gr.Row(elem_id="transcript-row"):
+            transcript = gr.Textbox(
+                value="Tap the mic to start...",
+                elem_id="transcript-display",
+                show_label=False,
+                lines=4,
+                max_lines=6,
+                interactive=False
+            )
+
+        # Controls
+        with gr.Row(elem_id="controls-row"):
             audio = gr.Audio(
                 sources=["microphone"],
                 streaming=True,
                 type="numpy",
+                elem_id="mic-input",
                 show_label=False
             )
-
-        reset_btn = gr.Button("Reset", elem_id="reset-btn")
-
-    # JavaScript to reposition elements into our custom layout
-    gr.HTML("""
-    <script>
-        function setupUI() {
-            // Move transcript display into our transcript area
-            const transcriptArea = document.getElementById('transcript-area');
-            const transcriptDisplay = document.getElementById('transcript-display');
-            if (transcriptArea && transcriptDisplay) {
-                transcriptArea.appendChild(transcriptDisplay);
-            }
-
-            // Move controls into our controls area
-            const controlsArea = document.getElementById('controls-area');
-            const micContainer = document.getElementById('mic-container');
-            const resetBtn = document.getElementById('reset-btn');
-            if (controlsArea && micContainer) {
-                controlsArea.appendChild(micContainer);
-            }
-            if (controlsArea && resetBtn) {
-                controlsArea.appendChild(resetBtn);
-            }
-
-            // Hide original Gradio rows
-            const transcriptRow = document.getElementById('transcript-row');
-            const controlsRow = document.getElementById('controls-row');
-            if (transcriptRow) transcriptRow.style.display = 'none';
-            if (controlsRow) controlsRow.style.display = 'none';
-        }
-
-        // Run setup when DOM is ready
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', setupUI);
-        } else {
-            setTimeout(setupUI, 100);
-        }
-
-        // Re-run on Gradio updates
-        const observer = new MutationObserver(() => {
-            setTimeout(setupUI, 50);
-        });
-        observer.observe(document.body, { childList: true, subtree: true });
-    </script>
-    """)
+            reset_btn = gr.Button("Reset", elem_id="reset-btn")
 
     # Events
     demo.load(fn=log_connection)
     audio.stream(
         fn=transcribe,
         inputs=[audio, state],
-        outputs=[state, transcript_display],
+        outputs=[state, transcript],
         show_progress="hidden",
         trigger_mode="always_last"
     )
-    reset_btn.click(fn=clear_session, outputs=[state, transcript_display])
+    reset_btn.click(fn=clear_session, outputs=[state, transcript])
 
 if __name__ == "__main__":
     demo.launch(server_name="0.0.0.0", server_port=7860, show_api=False)