Refactor SDK initialization and add drag-and-drop file upload for STT

- Updated SDK initialization to use LlamaCPP for acceleration mode.
- Introduced a drag-and-drop file zone for audio file uploads in the transcription view.
- Enhanced styling for the drop zone to improve user experience.
- Implemented file handling logic for transcription from dropped files.

This update improves the usability of the transcription feature by allowing users to easily upload audio files for processing.

Author: sanchitmonga22

examples/web/RunAnywhereAI/src/main.ts

@@ -118,12 +118,12 @@ async function initializeSDK(): Promise<void> {
 
     console.log(
       '[RunAnywhere] SDK initialized, version:', RunAnywhere.version,
-      '| acceleration:', RunAnywhere.accelerationMode,
+      '| acceleration:', LlamaCPP.accelerationMode,
       '| local storage:', localRestored ? RunAnywhere.localStorageDirectoryName : 'OPFS',
     );
 
     // Show an acceleration badge so the user knows which backend is active
-    showAccelerationBadge(RunAnywhere.accelerationMode);
+    showAccelerationBadge(LlamaCPP.accelerationMode);
   } catch (err) {
     // SDK not built or WASM not available -- continue in demo mode
     console.warn('[RunAnywhere] SDK not available, running in demo mode:', err);

examples/web/RunAnywhereAI/src/styles/components.css

@@ -1682,6 +1682,44 @@ input[type="range"]::-webkit-slider-thumb {
   height: 72px;
 }
 
+/** Drag-and-drop file zone for STT */
+.stt-drop-zone {
+  border: 2px dashed var(--border-color);
+  border-radius: 12px;
+  padding: 18px 16px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s, color 0.2s;
+  margin-top: 16px;
+  color: var(--text-tertiary);
+  font-size: 13px;
+  line-height: 1.5;
+  user-select: none;
+}
+
+.stt-drop-zone:hover,
+.stt-drop-zone.drag-over {
+  border-color: var(--color-blue);
+  background: rgba(59, 130, 246, 0.06);
+  color: var(--color-blue);
+}
+
+.stt-drop-zone-icon {
+  font-size: 22px;
+  margin-bottom: 4px;
+}
+
+.stt-drop-zone-label {
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.stt-drop-zone-hint {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 2px;
+}
+
 /* =============================================================================
  * TTS (Speak) Sub-view Specifics
  * ============================================================================= */

examples/web/RunAnywhereAI/src/views/transcribe.ts

@@ -77,6 +77,14 @@ export function initTranscribeTab(el: HTMLElement): TabLifecycle {
         </div>
         <h3 class="font-semibold">Ready to transcribe</h3>
         <p id="stt-mode-desc" class="helper-text text-center">Record first, then transcribe</p>
+
+        <!-- File drop zone — visible in batch mode only -->
+        <div id="stt-drop-zone" class="stt-drop-zone">
+          <div class="stt-drop-zone-icon">📂</div>
+          <div class="stt-drop-zone-label">Drop audio file or click to browse</div>
+          <div class="stt-drop-zone-hint">wav · mp3 · m4a · ogg · flac</div>
+        </div>
+        <input type="file" id="stt-file-input" accept="audio/*" style="display:none">
       </div>
 
       <!-- Transcription result area -->
@@ -119,6 +127,9 @@ export function initTranscribeTab(el: HTMLElement): TabLifecycle {
     showModelSelectionSheet(ModelCategory.SpeechRecognition),
   );
 
+  // File drop zone
+  wireDropZone();
+
   // Subscribe to model changes so the pill label stays current
   ModelManager.onChange(onSTTModelsChanged);
   onSTTModelsChanged(ModelManager.getModels());
@@ -343,6 +354,67 @@ function stopLiveVAD(): void {
   if (unsubscribeVAD) { unsubscribeVAD(); unsubscribeVAD = null; }
 }
 
+// ---------------------------------------------------------------------------
+// File Drop Zone (delegates all conversion + transcription to SDK)
+// ---------------------------------------------------------------------------
+
+function wireDropZone(): void {
+  const dropZone = container.querySelector('#stt-drop-zone') as HTMLElement;
+  const fileInput = container.querySelector('#stt-file-input') as HTMLInputElement;
+
+  // Click → open file picker
+  dropZone.addEventListener('click', () => fileInput.click());
+
+  // File picker selection
+  fileInput.addEventListener('change', () => {
+    const file = fileInput.files?.[0];
+    if (file) {
+      fileInput.value = '';
+      void transcribeFromFile(file);
+    }
+  });
+
+  // Drag events
+  dropZone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropZone.classList.add('drag-over');
+  });
+  dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+  dropZone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('drag-over');
+    const file = e.dataTransfer?.files[0];
+    if (file) void transcribeFromFile(file);
+  });
+}
+
+async function transcribeFromFile(file: File): Promise<void> {
+  if (sttState !== 'idle') return;
+
+  sttError = '';
+  sttTranscription = '';
+  sttState = 'transcribing';
+  renderSTTUI();
+
+  try {
+    const model = await ModelManager.ensureLoaded(ModelCategory.SpeechRecognition);
+    if (!model) throw new Error('No STT model loaded. Tap the model button to download one.');
+
+    const { STT } = await import('../../../../../sdk/runanywhere-web/packages/onnx/src/index');
+    if (!STT.isModelLoaded) throw new Error('STT model not loaded. Select a model first.');
+
+    // SDK handles all decoding, resampling, and transcription
+    const result = await STT.transcribeFile(file);
+    sttTranscription = result.text.trim() || '';
+    if (!sttTranscription) sttError = 'No speech detected in the audio file.';
+  } catch (err) {
+    sttError = err instanceof Error ? err.message : String(err);
+  }
+
+  sttState = 'idle';
+  renderSTTUI();
+}
+
 // ---------------------------------------------------------------------------
 // UI Rendering
 // ---------------------------------------------------------------------------
@@ -382,6 +454,12 @@ function renderSTTUI(): void {
   resultArea.style.display = hasResult ? 'flex' : 'none';
   if (hasResult) resultText.textContent = sttTranscription || 'Transcribing...';
 
+  // Drop zone: visible only in batch idle state
+  const dropZone = container.querySelector('#stt-drop-zone') as HTMLElement | null;
+  if (dropZone) {
+    dropZone.style.display = (sttMode === 'batch' && sttState === 'idle') ? '' : 'none';
+  }
+
   // Level bars
   levelBars.style.display = sttState === 'recording' ? '' : 'none';