Mobile friendly

index.html

@@ -376,6 +376,212 @@
         .error-message.visible {
             display: block;
         }
+
+        /* Mobile-first live caption - shown at top on mobile */
+        .live-caption-mobile {
+            display: none;
+        }
+
+        /* Mobile styles */
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+
+            h1 {
+                font-size: 1.4rem;
+                margin-bottom: 15px;
+            }
+
+            /* Show mobile live caption at top */
+            .live-caption-mobile {
+                display: block;
+                position: sticky;
+                top: 0;
+                z-index: 100;
+                margin: -10px -10px 15px -10px;
+                padding: 20px 15px;
+                background: rgba(0, 0, 0, 0.9);
+                border-radius: 0 0 12px 12px;
+                min-height: 80px;
+                text-align: center;
+                backdrop-filter: blur(10px);
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+            }
+
+            .live-caption-mobile.active {
+                background: rgba(20, 0, 0, 0.95);
+                box-shadow: 0 4px 20px rgba(255, 68, 68, 0.2);
+            }
+
+            .live-caption-mobile .live-caption-label {
+                font-size: 10px;
+                color: rgba(255, 255, 255, 0.5);
+                text-transform: uppercase;
+                letter-spacing: 2px;
+                margin-bottom: 8px;
+            }
+
+            .live-caption-mobile.active .live-caption-label {
+                color: #ff6b6b;
+            }
+
+            .live-caption-mobile .live-caption-text {
+                font-size: 22px;
+                font-weight: 400;
+                line-height: 1.4;
+                color: #ffffff;
+                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+            }
+
+            .live-caption-mobile .live-caption-text.placeholder {
+                color: rgba(255, 255, 255, 0.35);
+                font-style: italic;
+                font-size: 16px;
+                font-weight: 300;
+            }
+
+            /* Hide desktop live caption on mobile */
+            .transcripts-section .live-caption {
+                display: none;
+            }
+
+            /* Compact status bar */
+            .status-bar {
+                flex-direction: column;
+                gap: 12px;
+                padding: 12px 15px;
+            }
+
+            .controls {
+                width: 100%;
+                justify-content: center;
+            }
+
+            button {
+                padding: 12px 24px;
+                font-size: 16px;
+                min-height: 44px;
+            }
+
+            /* Collapsible config section */
+            .config-section {
+                padding: 15px;
+            }
+
+            .config-section h3 {
+                cursor: pointer;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .config-section h3::after {
+                content: '▼';
+                font-size: 12px;
+                transition: transform 0.2s;
+            }
+
+            .config-section.collapsed h3::after {
+                transform: rotate(-90deg);
+            }
+
+            .config-section.collapsed .config-grid {
+                display: none;
+            }
+
+            .config-grid {
+                grid-template-columns: 1fr;
+                gap: 12px;
+            }
+
+            .config-item select,
+            .config-item input {
+                padding: 12px;
+                font-size: 16px;
+                min-height: 44px;
+            }
+
+            /* Collapsible VAD section */
+            .vad-section {
+                padding: 15px;
+            }
+
+            .vad-section h3 {
+                cursor: pointer;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .vad-section h3::after {
+                content: '▼';
+                font-size: 12px;
+                transition: transform 0.2s;
+            }
+
+            .vad-section.collapsed h3::after {
+                transform: rotate(-90deg);
+            }
+
+            .vad-section.collapsed .vad-graph,
+            .vad-section.collapsed .vad-bar,
+            .vad-section.collapsed .pipeline-status {
+                display: none;
+            }
+
+            .vad-graph {
+                height: 80px;
+            }
+
+            .pipeline-status {
+                flex-wrap: wrap;
+                gap: 10px;
+            }
+
+            /* Transcripts section */
+            .transcripts-section {
+                padding: 15px;
+                min-height: auto;
+            }
+
+            .transcripts-list {
+                max-height: 150px;
+            }
+
+            .transcript-item {
+                padding: 8px 12px;
+                font-size: 14px;
+            }
+
+            /* Loading overlay mobile */
+            .loading-progress {
+                width: 250px;
+            }
+
+            .loading-text {
+                font-size: 16px;
+            }
+        }
+
+        /* Extra small screens */
+        @media (max-width: 400px) {
+            .live-caption-mobile .live-caption-text {
+                font-size: 18px;
+            }
+
+            h1 {
+                font-size: 1.2rem;
+            }
+
+            .controls {
+                flex-direction: column;
+            }
+
+            button {
+                width: 100%;
+            }
+        }
     </style>
 </head>
 <body>
@@ -394,6 +600,14 @@
     </div>
 
     <div class="container">
+        <!-- Mobile live caption at top (hidden on desktop) -->
+        <div class="live-caption-mobile" id="liveCaptionMobile">
+            <div class="live-caption-label">Live Caption</div>
+            <div class="live-caption-text placeholder" id="liveCaptionTextMobile">
+                Waiting for speech...
+            </div>
+        </div>
+
         <h1>Streaming ASR Demo</h1>
 
         <div class="error-message" id="errorMessage"></div>

streaming_asr.js

@@ -675,6 +675,8 @@ class ASRDemoUI {
         this.transcriptsList = document.getElementById('transcriptsList');
         this.liveCaption = document.getElementById('liveCaption');
         this.liveCaptionText = document.getElementById('liveCaptionText');
+        this.liveCaptionMobile = document.getElementById('liveCaptionMobile');
+        this.liveCaptionTextMobile = document.getElementById('liveCaptionTextMobile');
         this.modelSelect = document.getElementById('modelSelect');
         this.onnxUrl = document.getElementById('onnxUrl');
         this.onsetThreshold = document.getElementById('onsetThreshold');
@@ -694,6 +696,27 @@ class ASRDemoUI {
     bindEvents() {
         this.startBtn.addEventListener('click', () => this.handleStart());
         this.stopBtn.addEventListener('click', () => this.handleStop());
+
+        // Mobile: collapsible sections
+        const configSection = document.querySelector('.config-section');
+        const vadSection = document.querySelector('.vad-section');
+
+        configSection?.querySelector('h3')?.addEventListener('click', () => {
+            configSection.classList.toggle('collapsed');
+        });
+
+        vadSection?.querySelector('h3')?.addEventListener('click', () => {
+            vadSection.classList.toggle('collapsed');
+            // Re-init canvas on expand in case it needs redrawing
+            if (!vadSection.classList.contains('collapsed')) {
+                this.initCanvas();
+            }
+        });
+
+        // Start with config collapsed on mobile
+        if (window.innerWidth <= 768) {
+            configSection?.classList.add('collapsed');
+        }
     }
 
     async handleStart() {
@@ -809,13 +832,23 @@ class ASRDemoUI {
 
     updateLiveCaption(text) {
         if (text) {
+            // Desktop
             this.liveCaptionText.textContent = text;
             this.liveCaptionText.classList.remove('placeholder');
             this.liveCaption.classList.add('active');
+            // Mobile
+            this.liveCaptionTextMobile.textContent = text;
+            this.liveCaptionTextMobile.classList.remove('placeholder');
+            this.liveCaptionMobile.classList.add('active');
         } else {
+            // Desktop
             this.liveCaptionText.textContent = 'Waiting for speech...';
             this.liveCaptionText.classList.add('placeholder');
             this.liveCaption.classList.remove('active');
+            // Mobile
+            this.liveCaptionTextMobile.textContent = 'Waiting for speech...';
+            this.liveCaptionTextMobile.classList.add('placeholder');
+            this.liveCaptionMobile.classList.remove('active');
         }
     }