From 69f4677ca059038989d024e0d7bc971e9a4a7a0c Mon Sep 17 00:00:00 2001
From: Roshan John <63011948+roshatron2@users.noreply.github.com>
Date: Mon, 27 Oct 2025 02:56:54 +0530
Subject: [PATCH] Update UI components, add ThemeToggle, and modify enrollment,
 layout, and inference pages

---
 extras/speaker-recognition/webui/src/App.tsx  | 35 ++++++++++---------
 .../webui/src/components/ThemeToggle.tsx      | 21 +++++++++++
 .../webui/src/components/UserSelector.tsx     |  2 +-
 .../webui/src/components/layout/Layout.tsx    | 22 ++++++------
 .../live-inference/SessionStats.tsx           | 14 ++++----
 .../webui/src/pages/Annotation.tsx            | 26 +++++++-------
 .../webui/src/pages/Enrollment.tsx            | 12 +++----
 .../webui/src/pages/InferLiveSimplified.tsx   | 18 +++++-----
 .../webui/src/pages/Inference.tsx             | 10 +++---
 .../webui/src/pages/Speakers.tsx              | 34 +++++++++---------
 .../webui/tailwind.config.js                  |  1 +
 .../speaker-recognition/webui/vite.config.ts  | 18 ++++++++++
 12 files changed, 129 insertions(+), 84 deletions(-)
 create mode 100644 extras/speaker-recognition/webui/src/components/ThemeToggle.tsx

diff --git a/extras/speaker-recognition/webui/src/App.tsx b/extras/speaker-recognition/webui/src/App.tsx
index 9d4650b5..4c12ca29 100644
--- a/extras/speaker-recognition/webui/src/App.tsx
+++ b/extras/speaker-recognition/webui/src/App.tsx
@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { UserProvider } from './contexts/UserContext'
+import { ThemeProvider } from './contexts/ThemeContext'
 import Layout from './components/layout/Layout'
 import AudioViewer from './pages/AudioViewer'
 import Annotation from './pages/Annotation'
@@ -12,22 +13,24 @@ import './App.css'
 
 function App() {
   return (
-    <UserProvider>
-      <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
-        <Layout>
-          <Routes>
-            <Route path="/" element={<AudioViewer />} />
-            <Route path="/audio" element={<AudioViewer />} />
-            <Route path="/annotation" element={<Annotation />} />
-            <Route path="/enrollment" element={<Enrollment />} />
-            <Route path="/speakers" element={<Speakers />} />
-            <Route path="/inference" element={<Inference />} />
-            <Route path="/infer-live" element={<InferLive />} />
-            <Route path="/infer-live-simple" element={<InferLiveSimplified />} />
-          </Routes>
-        </Layout>
-      </Router>
-    </UserProvider>
+    <ThemeProvider>
+      <UserProvider>
+        <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+          <Layout>
+            <Routes>
+              <Route path="/" element={<AudioViewer />} />
+              <Route path="/audio" element={<AudioViewer />} />
+              <Route path="/annotation" element={<Annotation />} />
+              <Route path="/enrollment" element={<Enrollment />} />
+              <Route path="/speakers" element={<Speakers />} />
+              <Route path="/inference" element={<Inference />} />
+              <Route path="/infer-live" element={<InferLive />} />
+              <Route path="/infer-live-simple" element={<InferLiveSimplified />} />
+            </Routes>
+          </Layout>
+        </Router>
+      </UserProvider>
+    </ThemeProvider>
   )
 }
 
diff --git a/extras/speaker-recognition/webui/src/components/ThemeToggle.tsx b/extras/speaker-recognition/webui/src/components/ThemeToggle.tsx
new file mode 100644
index 00000000..34d916bd
--- /dev/null
+++ b/extras/speaker-recognition/webui/src/components/ThemeToggle.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Sun, Moon } from 'lucide-react'
+import { useTheme } from '../contexts/ThemeContext'
+
+export default function ThemeToggle() {
+  const { isDark, toggleTheme } = useTheme()
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="flex items-center justify-center w-8 h-8 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+      title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {isDark ? (
+        <Sun className="h-5 w-5 text-yellow-500" />
+      ) : (
+        <Moon className="h-5 w-5 text-gray-600 dark:text-gray-300" />
+      )}
+    </button>
+  )
+}
diff --git a/extras/speaker-recognition/webui/src/components/UserSelector.tsx b/extras/speaker-recognition/webui/src/components/UserSelector.tsx
index ece819bb..c9b2d7ea 100644
--- a/extras/speaker-recognition/webui/src/components/UserSelector.tsx
+++ b/extras/speaker-recognition/webui/src/components/UserSelector.tsx
@@ -60,7 +60,7 @@ export default function UserSelector() {
 
       {/* Dropdown Menu */}
       {isDropdownOpen && (
-        <div className="absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg border z-50">
+        <div className="absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
           <div className="py-2">
             {/* Existing Users */}
             {users.length > 0 && (
diff --git a/extras/speaker-recognition/webui/src/components/layout/Layout.tsx b/extras/speaker-recognition/webui/src/components/layout/Layout.tsx
index 29c8d681..4c85b6af 100644
--- a/extras/speaker-recognition/webui/src/components/layout/Layout.tsx
+++ b/extras/speaker-recognition/webui/src/components/layout/Layout.tsx
@@ -3,6 +3,7 @@ import { Link, useLocation } from 'react-router-dom'
 import { Mic, Music, FileText, Users, Brain, User, Radio, Wifi } from 'lucide-react'
 import UserSelector from '../UserSelector'
 import ConnectionStatus from '../ConnectionStatus'
+import ThemeToggle from '../ThemeToggle'
 
 interface LayoutProps {
   children: React.ReactNode
@@ -22,20 +23,21 @@ export default function Layout({ children }: LayoutProps) {
   ]
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       {/* Header */}
-      <header className="bg-white shadow-sm border-b border-gray-200">
+      <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
             <div className="flex items-center space-x-4">
               <Mic className="h-8 w-8 text-blue-600" />
-              <h1 className="text-xl font-semibold text-gray-900">
+              <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
                 Speaker Recognition System
               </h1>
             </div>
             <div className="flex items-center space-x-4">
+              <ThemeToggle />
               <ConnectionStatus />
-              <div className="border-l border-gray-300 h-6"></div>
+              <div className="border-l border-gray-300 dark:border-gray-600 h-6"></div>
               <UserSelector />
             </div>
           </div>
@@ -46,7 +48,7 @@ export default function Layout({ children }: LayoutProps) {
         <div className="flex flex-col lg:flex-row gap-8">
           {/* Sidebar Navigation */}
           <nav className="lg:w-64 flex-shrink-0">
-            <div className="card p-4">
+            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm">
               <ul className="space-y-2">
                 {navigationItems.map(({ path, label, icon: Icon }) => (
                   <li key={path}>
@@ -54,8 +56,8 @@ export default function Layout({ children }: LayoutProps) {
                       to={path}
                       className={`flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                         location.pathname === path
-                          ? 'bg-blue-100 text-blue-900'
-                          : 'text-gray-700 hover:bg-gray-100'
+                          ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100 border-l-4 border-blue-500 dark:border-blue-400'
+                          : 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100'
                       }`}
                     >
                       <Icon className="h-5 w-5" />
@@ -69,7 +71,7 @@ export default function Layout({ children }: LayoutProps) {
 
           {/* Main Content */}
           <main className="flex-1 min-w-0">
-            <div className="card p-6">
+            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
               {children}
             </div>
           </main>
@@ -77,9 +79,9 @@ export default function Layout({ children }: LayoutProps) {
       </div>
 
       {/* Footer */}
-      <footer className="bg-white border-t border-gray-200 mt-auto">
+      <footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-auto">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <div className="text-center text-sm text-gray-500">
+          <div className="text-center text-sm text-gray-500 dark:text-gray-400">
             🎤 Speaker Recognition System v0.1.0 | Built with React and PyTorch
           </div>
         </div>
diff --git a/extras/speaker-recognition/webui/src/components/live-inference/SessionStats.tsx b/extras/speaker-recognition/webui/src/components/live-inference/SessionStats.tsx
index e42e3b0c..aa01d31a 100644
--- a/extras/speaker-recognition/webui/src/components/live-inference/SessionStats.tsx
+++ b/extras/speaker-recognition/webui/src/components/live-inference/SessionStats.tsx
@@ -24,24 +24,24 @@ export function SessionStats({ stats, isRecording }: SessionStatsProps) {
   }
 
   return (
-    <div className="bg-white border rounded-lg p-4">
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-6">
           <div className="flex items-center space-x-2">
-            <Clock className="h-4 w-4 text-gray-500" />
-            <span className="text-sm text-gray-900">
+            <Clock className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+            <span className="text-sm text-gray-900 dark:text-gray-100">
               {formatDuration(stats.sessionDuration)}
             </span>
           </div>
           <div className="flex items-center space-x-2">
-            <Volume2 className="h-4 w-4 text-gray-500" />
-            <span className="text-sm text-gray-900">
+            <Volume2 className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+            <span className="text-sm text-gray-900 dark:text-gray-100">
               {stats.totalWords} words
             </span>
           </div>
           <div className="flex items-center space-x-2">
-            <Users className="h-4 w-4 text-gray-500" />
-            <span className="text-sm text-gray-900">
+            <Users className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+            <span className="text-sm text-gray-900 dark:text-gray-100">
               {stats.identifiedSpeakers.size} speakers
             </span>
           </div>
diff --git a/extras/speaker-recognition/webui/src/pages/Annotation.tsx b/extras/speaker-recognition/webui/src/pages/Annotation.tsx
index fb04c0ca..ac81c2c9 100644
--- a/extras/speaker-recognition/webui/src/pages/Annotation.tsx
+++ b/extras/speaker-recognition/webui/src/pages/Annotation.tsx
@@ -788,7 +788,7 @@ export default function Annotation() {
       {/* File Upload */}
       <div className="grid md:grid-cols-2 gap-6">
         <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6">
-          <h3 className="text-lg font-medium mb-4">📁 Upload Audio File</h3>
+          <h3 className="text-lg font-medium mb-4 text-gray-900 dark:text-gray-100">📁 Upload Audio File</h3>
           <FileUploader
             onUpload={handleFileUpload}
             accept=".wav,.flac,.mp3,.m4a,.ogg"
@@ -799,7 +799,7 @@ export default function Annotation() {
 
         {/* Import JSON */}
         <div className="border-2 border-dashed border-blue-300 dark:border-blue-600 rounded-lg p-6">
-          <h3 className="text-lg font-medium mb-4">📄 Import Deepgram JSON</h3>
+          <h3 className="text-lg font-medium mb-4 text-gray-900 dark:text-gray-100">📄 Import Deepgram JSON</h3>
           <FileUploader
             onUpload={handleDeepgramUpload}
             accept=".json"
@@ -815,7 +815,7 @@ export default function Annotation() {
 
       {/* Processing Mode Selector - Full Width Section */}
       <div className="border-2 border-dashed border-green-300 dark:border-green-600 rounded-lg p-6">
-        <h3 className="text-xl font-medium mb-4 text-gray-900 dark:text-gray-100">🎯 Speaker Processing Modes</h3>
+        <h3 className="text-xl font-medium mb-4 text-gray-900 dark:text-gray-50">🎯 Speaker Processing Modes</h3>
         
         {audioData ? (
           <ProcessingModeSelector
@@ -857,7 +857,7 @@ export default function Annotation() {
       {isLoading && (
         <div className="text-center py-8">
           <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-          <p className="mt-2 text-gray-600">Processing audio file...</p>
+          <p className="mt-2 text-gray-600 dark:text-gray-300">Processing audio file...</p>
         </div>
       )}
 
@@ -865,7 +865,7 @@ export default function Annotation() {
         <>
           {/* Audio Information */}
           <div className="card-secondary p-4">
-            <h3 className="text-lg font-medium mb-2">🎵 {audioData.file.name}</h3>
+            <h3 className="text-lg font-medium mb-2 text-gray-900 dark:text-gray-100">🎵 {audioData.file.name}</h3>
             <div className="grid grid-cols-3 gap-4 text-sm">
               <div>Duration: {formatDuration(audioData.buffer.duration * 1000)}</div>
               <div>Sample Rate: {(audioData.buffer.sampleRate / 1000).toFixed(1)} kHz</div>
@@ -876,7 +876,7 @@ export default function Annotation() {
           {/* Waveform with segments */}
           <div className="space-y-4">
             <div className="flex items-center justify-between">
-              <h3 className="text-lg font-medium">📊 Timeline</h3>
+              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">📊 Timeline</h3>
               <button
                 onClick={addManualSegment}
                 className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
@@ -908,7 +908,7 @@ export default function Annotation() {
 
           {/* Segments List */}
           <div className="space-y-4">
-            <h3 className="text-lg font-medium">🗣️ Speaker Segments</h3>
+            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">🗣️ Speaker Segments</h3>
             
             {/* Filter Controls */}
             {segments.length > 0 && (
@@ -920,7 +920,7 @@ export default function Annotation() {
                     className="flex items-center space-x-2 px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
                   >
                     <Filter className="h-4 w-4" />
-                    <span className="text-sm">Filter Speakers</span>
+                    <span className="text-sm text-gray-900 dark:text-gray-100">Filter Speakers</span>
                     {selectedSpeakers.size > 0 && (
                       <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
                         {selectedSpeakers.size}
@@ -957,7 +957,7 @@ export default function Annotation() {
                               className="rounded"
                             />
                             <span className="text-sm">{speaker}</span>
-                            <span className="text-xs text-gray-500">({count})</span>
+                            <span className="text-xs text-gray-500 dark:text-gray-400">({count})</span>
                           </label>
                         ))}
                       </div>
@@ -976,7 +976,7 @@ export default function Annotation() {
                             e.stopPropagation()
                             clearAllSpeakers()
                           }}
-                          className="flex-1 px-2 py-1 text-xs bg-gray-100 text-gray-800 rounded hover:bg-gray-200"
+                          className="flex-1 px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded hover:bg-gray-200 dark:hover:bg-gray-600"
                         >
                           Clear All
                         </button>
@@ -1061,7 +1061,7 @@ export default function Annotation() {
                     step="0.1"
                     min={minDuration}
                   />
-                  <span className="text-sm text-gray-500">
+                  <span className="text-sm text-gray-500 dark:text-gray-400">
                     ({filteredSegments.length} segments)
                   </span>
                 </div>
@@ -1154,7 +1154,7 @@ export default function Annotation() {
                         }`}>
                           {speakerLabel}
                         </span>
-                        <span className="text-sm text-gray-600">
+                        <span className="text-sm text-gray-600 dark:text-gray-300">
                           {speakerSegments.length} segments • {formatDuration(totalDuration * 1000)}
                         </span>
                       </div>
@@ -1251,7 +1251,7 @@ export default function Annotation() {
                 <h4 className="font-medium text-primary">🔍 Debug Output</h4>
                 <button
                   onClick={() => setShowJsonOutput(!showJsonOutput)}
-                  className="flex items-center space-x-2 px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"
+                  className="flex items-center space-x-2 px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600"
                 >
                   <span>{showJsonOutput ? 'Hide' : 'Show'} JSON</span>
                 </button>
diff --git a/extras/speaker-recognition/webui/src/pages/Enrollment.tsx b/extras/speaker-recognition/webui/src/pages/Enrollment.tsx
index df732c55..d482379f 100644
--- a/extras/speaker-recognition/webui/src/pages/Enrollment.tsx
+++ b/extras/speaker-recognition/webui/src/pages/Enrollment.tsx
@@ -548,7 +548,7 @@ export default function Enrollment() {
           {/* Recording Section */}
           <div className="grid md:grid-cols-2 gap-6 mb-6">
             <div className="border rounded-lg p-4">
-              <h3 className="text-lg font-medium mb-4">🎤 Record Audio</h3>
+              <h3 className="text-lg font-medium mb-4 text-gray-900 dark:text-gray-100">🎤 Record Audio</h3>
               <div className="text-center space-y-4">
                 {!isRecording ? (
                   <button
@@ -586,7 +586,7 @@ export default function Enrollment() {
 
             {/* File Upload Section */}
             <div className="border rounded-lg p-4">
-              <h3 className="text-lg font-medium mb-4">📁 Upload Audio</h3>
+              <h3 className="text-lg font-medium mb-4 text-gray-900 dark:text-gray-100">📁 Upload Audio</h3>
               <FileUploader
                 onUpload={handleFileUpload}
                 accept=".wav"
@@ -599,7 +599,7 @@ export default function Enrollment() {
           {currentSession.audioFiles.length > 0 && (
             <div className="space-y-4">
               <div className="flex items-center justify-between">
-                <h3 className="text-lg font-medium">Audio Samples</h3>
+                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Audio Samples</h3>
                 <span className="text-sm text-green-600 bg-green-100 px-2 py-1 rounded-full">
                   💾 Files will be saved during enrollment
                 </span>
@@ -652,7 +652,7 @@ export default function Enrollment() {
 
           {/* Quality Guidelines */}
           <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
-            <h4 className="font-medium text-blue-800 mb-2">Quality Guidelines</h4>
+            <h4 className="font-medium text-blue-800 dark:text-blue-200 mb-2">Quality Guidelines</h4>
             <ul className="text-sm text-blue-700 space-y-1">
               <li>• Excellent: 60+ seconds, 5+ samples, 30+ dB SNR</li>
               <li>• Good: 30+ seconds, 3+ samples, 20+ dB SNR</li>
@@ -667,7 +667,7 @@ export default function Enrollment() {
       {/* Previous Sessions */}
       {sessions.length > 0 && !currentSession && (
         <div className="space-y-4">
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Previous Enrollments</h2>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Previous Enrollments</h2>
           <div className="space-y-3">
             {sessions.map((session) => (
               <div
@@ -675,7 +675,7 @@ export default function Enrollment() {
                 className="flex items-center justify-between p-4 bg-gray-50 rounded-lg"
               >
                 <div>
-                  <p className="font-medium text-gray-900 dark:text-gray-100">{session.speakerName}</p>
+                  <p className="font-medium text-gray-900 dark:text-gray-50">{session.speakerName}</p>
                   <div className="flex items-center space-x-3 text-sm text-gray-500 dark:text-gray-400">
                     <span>{session.audioFiles.length} samples</span>
                     <span>{formatDuration(session.totalDuration)}</span>
diff --git a/extras/speaker-recognition/webui/src/pages/InferLiveSimplified.tsx b/extras/speaker-recognition/webui/src/pages/InferLiveSimplified.tsx
index fe0197e3..3b2a27e4 100644
--- a/extras/speaker-recognition/webui/src/pages/InferLiveSimplified.tsx
+++ b/extras/speaker-recognition/webui/src/pages/InferLiveSimplified.tsx
@@ -232,7 +232,7 @@ export default function InferLiveSimplified() {
       <div className="text-center py-12">
         <Users className="h-16 w-16 text-gray-300 mx-auto mb-4" />
         <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">User Required</h3>
-        <p className="text-gray-500">Please select a user to access live inference.</p>
+        <p className="text-gray-500 dark:text-gray-400">Please select a user to access live inference.</p>
       </div>
     )
   }
@@ -243,8 +243,8 @@ export default function InferLiveSimplified() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">🎙️ Live Inference</h1>
-          <p className="text-gray-600">Real-time transcription with server-side processing</p>
-          <p className="text-sm text-gray-500">Server handles audio processing, VAD, and speaker identification</p>
+          <p className="text-gray-600 dark:text-gray-300">Real-time transcription with server-side processing</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400">Server handles audio processing, VAD, and speaker identification</p>
         </div>
       </div>
 
@@ -264,7 +264,7 @@ export default function InferLiveSimplified() {
       />
 
       {/* Connection Status */}
-      <div className="bg-white border rounded-lg p-4">
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-4">
             <div className="flex items-center space-x-2">
@@ -285,7 +285,7 @@ export default function InferLiveSimplified() {
 
       {/* Session Stats */}
       {speakerWS.isStreaming && (
-        <div className="bg-white border rounded-lg p-4">
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-6">
               <div className="flex items-center space-x-2">
@@ -308,7 +308,7 @@ export default function InferLiveSimplified() {
               </div>
               {speakerWS.stats.averageConfidence > 0 && (
                 <div className="flex items-center space-x-2">
-                  <span className="text-sm text-gray-500">Avg Confidence:</span>
+                  <span className="text-sm text-gray-500 dark:text-gray-400">Avg Confidence:</span>
                   <span className="text-sm text-gray-900 dark:text-gray-100">
                     {(speakerWS.stats.averageConfidence * 100).toFixed(1)}%
                   </span>
@@ -341,10 +341,10 @@ export default function InferLiveSimplified() {
       </div>
 
       {/* Live Results */}
-      <div className="bg-white border rounded-lg">
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
         <div className="p-4 border-b">
           <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Live Transcription</h3>
-          <p className="text-sm text-gray-500">Utterance boundaries detected using server-side VAD processing</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400">Utterance boundaries detected using server-side VAD processing</p>
         </div>
         <div className="p-4 space-y-4 max-h-96 overflow-y-auto">
           {speakerWS.transcriptSegments.length === 0 ? (
@@ -397,7 +397,7 @@ export default function InferLiveSimplified() {
         <div className="flex justify-center">
           <button
             onClick={speakerWS.clearTranscripts}
-            className="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
+            className="px-4 py-2 text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
           >
             Clear Transcripts
           </button>
diff --git a/extras/speaker-recognition/webui/src/pages/Inference.tsx b/extras/speaker-recognition/webui/src/pages/Inference.tsx
index dd9b9f0c..adb17793 100644
--- a/extras/speaker-recognition/webui/src/pages/Inference.tsx
+++ b/extras/speaker-recognition/webui/src/pages/Inference.tsx
@@ -98,7 +98,7 @@ export default function Inference() {
       {/* Header */}
       <div>
         <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">🎯 Speaker Inference</h1>
-        <p className="text-gray-600 mt-2">
+        <p className="text-gray-600 dark:text-gray-300 mt-2">
           Upload audio files or record live audio for speaker identification and transcription
         </p>
       </div>
@@ -108,7 +108,7 @@ export default function Inference() {
         {/* File Upload */}
         <div className="border rounded-lg p-6">
           <div className="flex items-center space-x-2 mb-4">
-            <Upload className="h-5 w-5 text-gray-600" />
+            <Upload className="h-5 w-5 text-gray-600 dark:text-gray-400" />
             <h4 className="font-medium text-gray-900 dark:text-gray-100">Upload Audio File</h4>
           </div>
           <FileUploader
@@ -132,7 +132,7 @@ export default function Inference() {
 
       {/* Audio Visualization */}
       {audioForProcessing && (
-        <div className="bg-white border rounded-lg p-6">
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
           <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-4">🎵 {audioForProcessing.filename}</h4>
           
           {/* Audio Info */}
@@ -166,7 +166,7 @@ export default function Inference() {
           {audioForProcessing.quality && (
             <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
               <div className="flex items-center justify-between text-sm">
-                <span className="text-gray-600">Audio Quality:</span>
+                <span className="text-gray-600 dark:text-gray-300">Audio Quality:</span>
                 <span className={`font-medium ${
                   audioForProcessing.quality.level === 'excellent' ? 'text-green-600' :
                   audioForProcessing.quality.level === 'good' ? 'text-blue-600' :
@@ -286,7 +286,7 @@ export default function Inference() {
             showExport={true}
             showStats={true}
             onExport={speakerProcessing.exportResult}
-            className="bg-white border rounded-lg p-6"
+            className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6"
           />
         )}
 
diff --git a/extras/speaker-recognition/webui/src/pages/Speakers.tsx b/extras/speaker-recognition/webui/src/pages/Speakers.tsx
index cce46dff..e5eb4b8f 100644
--- a/extras/speaker-recognition/webui/src/pages/Speakers.tsx
+++ b/extras/speaker-recognition/webui/src/pages/Speakers.tsx
@@ -374,19 +374,19 @@ export default function Speakers() {
           {/* Statistics Cards */}
           {stats && (
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-          <div className="bg-white border rounded-lg p-4">
+          <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
             <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Total Speakers</div>
             <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.total_speakers}</div>
           </div>
-          <div className="bg-white border rounded-lg p-4">
+          <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
             <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Audio Samples</div>
             <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.total_audio_samples}</div>
           </div>
-          <div className="bg-white border rounded-lg p-4">
+          <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
             <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Total Duration</div>
             <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">{formatDuration(stats.total_duration)}</div>
           </div>
-          <div className="bg-white border rounded-lg p-4">
+          <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
             <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Quality</div>
             <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.average_quality.toFixed(1)} dB</div>
           </div>
@@ -394,7 +394,7 @@ export default function Speakers() {
       )}
 
       {/* Filters and Search */}
-      <div className="bg-white border rounded-lg p-4">
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
         <div className="grid md:grid-cols-4 gap-4">
           <div>
             <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Search</label>
@@ -405,17 +405,17 @@ export default function Speakers() {
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
                 placeholder="Search speakers..."
-                className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md"
+                className="pl-10 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400"
               />
             </div>
           </div>
           
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
             <select
               value={statusFilter}
               onChange={(e) => setStatusFilter(e.target.value as any)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400"
             >
               <option value="all">All Statuses</option>
               <option value="completed">Completed</option>
@@ -425,11 +425,11 @@ export default function Speakers() {
           </div>
           
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sort By</label>
             <select
               value={sortBy}
               onChange={(e) => setSortBy(e.target.value as any)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400"
             >
               <option value="name">Name</option>
               <option value="created_at">Created Date</option>
@@ -440,11 +440,11 @@ export default function Speakers() {
           </div>
           
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Order</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Order</label>
             <select
               value={sortOrder}
               onChange={(e) => setSortOrder(e.target.value as any)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400"
             >
               <option value="asc">Ascending</option>
               <option value="desc">Descending</option>
@@ -455,7 +455,7 @@ export default function Speakers() {
 
       {/* Speakers List */}
       {filteredAndSortedSpeakers().length > 0 ? (
-        <div className="bg-white border rounded-lg overflow-hidden">
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
           <div className="overflow-x-auto">
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50 dark:bg-gray-700">
@@ -483,7 +483,7 @@ export default function Speakers() {
                   </th>
                 </tr>
               </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
+              <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                 {filteredAndSortedSpeakers().map((speaker) => (
                   <tr key={speaker.id} className="hover:bg-gray-50">
                     <td className="px-6 py-4 whitespace-nowrap">
@@ -569,7 +569,7 @@ export default function Speakers() {
       {/* Speaker Details Modal */}
       {selectedSpeaker && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-          <div className="bg-white rounded-lg max-w-2xl w-full max-h-[80vh] overflow-y-auto">
+          <div className="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full max-h-[80vh] overflow-y-auto">
             <div className="p-6 border-b">
               <div className="flex items-center justify-between">
                 <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Speaker Details</h2>
@@ -639,7 +639,7 @@ export default function Speakers() {
       {/* Delete Confirmation Modal */}
       {showDeleteConfirm && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-          <div className="bg-white rounded-lg max-w-md w-full">
+          <div className="bg-white dark:bg-gray-800 rounded-lg max-w-md w-full">
             <div className="p-6">
               <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Delete Speaker</h3>
               <p className="text-gray-600 mb-6">
@@ -667,7 +667,7 @@ export default function Speakers() {
       {/* Import Dialog Modal */}
       {showImportDialog && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-          <div className="bg-white rounded-lg max-w-lg w-full">
+          <div className="bg-white dark:bg-gray-800 rounded-lg max-w-lg w-full">
             <div className="p-6">
               <div className="flex items-center justify-between mb-4">
                 <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Import Speakers</h3>
diff --git a/extras/speaker-recognition/webui/tailwind.config.js b/extras/speaker-recognition/webui/tailwind.config.js
index 89a305e0..73324ed5 100644
--- a/extras/speaker-recognition/webui/tailwind.config.js
+++ b/extras/speaker-recognition/webui/tailwind.config.js
@@ -4,6 +4,7 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {},
   },
diff --git a/extras/speaker-recognition/webui/vite.config.ts b/extras/speaker-recognition/webui/vite.config.ts
index 405770f7..c3ba998b 100644
--- a/extras/speaker-recognition/webui/vite.config.ts
+++ b/extras/speaker-recognition/webui/vite.config.ts
@@ -16,6 +16,24 @@ export default defineConfig({
           '127.0.0.1',
           '.nip.io'
         ],
+    proxy: {
+      '/api': {
+        target: `http://${process.env.SPEAKER_SERVICE_HOST || 'localhost'}:${process.env.SPEAKER_SERVICE_PORT || '8085'}`,
+        changeOrigin: true,
+        secure: false,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+      '/ws': {
+        target: `ws://${process.env.SPEAKER_SERVICE_HOST || 'localhost'}:${process.env.SPEAKER_SERVICE_PORT || '8085'}`,
+        ws: true,
+        changeOrigin: true,
+      },
+      '/v1': {
+        target: `http://${process.env.SPEAKER_SERVICE_HOST || 'localhost'}:${process.env.SPEAKER_SERVICE_PORT || '8085'}`,
+        changeOrigin: true,
+        secure: false,
+      },
+    },
   },
   define: {
     global: 'globalThis',