Speaker recognition web UI fixes

extras/speaker-recognition/nginx.conf.template

@@ -46,7 +46,7 @@ http {
     }
 
     upstream web_ui {
-        server web-ui:5175;
+        server web-ui:WEB_UI_PORT_PLACEHOLDER;
     }
 
     # HTTPS Server

extras/speaker-recognition/setup.sh

@@ -141,6 +141,20 @@ if [ -n "$DEEPGRAM_API_KEY" ]; then
     echo "✅ Deepgram API key configured from command line"
 fi
 
+# Determine WEB_UI_PORT and HTTPS setting
+if [ "$HTTPS_MODE" = "https" ]; then
+    WEB_UI_PORT=5175
+    REACT_UI_HTTPS=true
+else
+    WEB_UI_PORT=5174
+    REACT_UI_HTTPS=false
+fi
+
+# Update .env file
+sed -i "s|REACT_UI_HTTPS=.*|REACT_UI_HTTPS=$REACT_UI_HTTPS|" .env
+sed -i "s|REACT_UI_PORT=.*|REACT_UI_PORT=$WEB_UI_PORT|" .env
+
+# Generate SSL certificates (only for HTTPS mode)
 if [ "$HTTPS_MODE" = "https" ]; then
     # Get SERVER_IP if not already set (from command line)
     if [ -z "$SERVER_IP" ]; then
@@ -152,11 +166,6 @@ if [ "$HTTPS_MODE" = "https" ]; then
         SERVER_IP=${SERVER_IP:-localhost}
     fi
 
-    # Update .env for HTTPS mode
-    sed -i "s|REACT_UI_HTTPS=.*|REACT_UI_HTTPS=true|" .env
-    sed -i "s|REACT_UI_PORT=.*|REACT_UI_PORT=5175|" .env
-
-    # Generate SSL certificates
     echo ""
     echo "📄 Generating SSL certificates..."
     if [ -f "ssl/generate-ssl.sh" ]; then
@@ -165,16 +174,20 @@ if [ "$HTTPS_MODE" = "https" ]; then
     else
         echo "⚠️  ssl/generate-ssl.sh not found, SSL setup skipped"
     fi
-
-    # Create nginx.conf from template
-    echo "📄 Creating nginx configuration..."
-    if [ -f "nginx.conf.template" ]; then
-        sed "s/TAILSCALE_IP/$SERVER_IP/g" nginx.conf.template > nginx.conf
-        echo "✅ nginx.conf created for: $SERVER_IP"
-    else
-        echo "⚠️  nginx.conf.template not found, nginx config skipped"
-    fi
-
+fi
+
+# Create nginx.conf from template
+echo "📄 Creating nginx configuration..."
+if [ -f "nginx.conf.template" ]; then
+    # Use SERVER_IP if set, otherwise default to localhost for nginx.conf generation
+    NGINX_SERVER_IP=${SERVER_IP:-localhost}
+    sed "s/TAILSCALE_IP/$NGINX_SERVER_IP/g" nginx.conf.template | sed "s/WEB_UI_PORT_PLACEHOLDER/$WEB_UI_PORT/g" > nginx.conf
+    echo "✅ nginx.conf created for: $NGINX_SERVER_IP"
+else
+    echo "⚠️  nginx.conf.template not found, nginx config skipped"
+fi
+
+if [ "$HTTPS_MODE" = "https" ]; then
     echo ""
     echo "✅ Speaker Recognition configured (HTTPS mode)!"
     echo "📁 Configuration saved to .env"
@@ -186,16 +199,12 @@ if [ "$HTTPS_MODE" = "https" ]; then
     echo "📱 Service API: https://localhost:8444/api/"
     echo "💡 Accept SSL certificate in browser"
 else
-    # HTTP Configuration
-    sed -i "s|REACT_UI_HTTPS=.*|REACT_UI_HTTPS=false|" .env
-    sed -i "s|REACT_UI_PORT=.*|REACT_UI_PORT=5174|" .env
-
     echo ""
     echo "✅ Speaker Recognition configured (HTTP mode)!"
     echo "📁 Configuration saved to .env"
     echo ""
     echo "🚀 To start: docker compose up --build -d speaker-service web-ui"
     echo "📱 Service API: http://localhost:8085"
-    echo "📱 Web Interface: http://localhost:5174"
+    echo "📱 Web Interface: http://localhost:$WEB_UI_PORT"
     echo "⚠️  Note: Microphone access may not work over HTTP on remote connections"
 fi

extras/speaker-recognition/webui/src/App.tsx

@@ -9,24 +9,27 @@ import Inference from './pages/Inference'
 import InferLive from './pages/InferLive'
 import InferLiveSimplified from './pages/InferLiveSimplified'
 import './App.css'
+import { ThemeProvider } from './contexts/ThemeContext'
 
 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>
+      <ThemeProvider>
+        <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>
+      </ThemeProvider>
     </UserProvider>
   )
 }

extras/speaker-recognition/webui/src/components/AudioRecordingControls.tsx

@@ -129,14 +129,14 @@ export const AudioRecordingControls: React.FC<AudioRecordingControlsProps> = ({
 
   return (
     <div className={`border rounded-lg p-4 ${className}`}>
-      <h4 className="font-medium mb-3">🎤 Record Audio</h4>
+      <h4 className="mb-3 heading-sm">🎤 Record Audio</h4>
 
       {/* Recording Status */}
       <div className="text-center space-y-4">
         {/* Status Indicator */}
         <div className={`flex items-center justify-center space-x-2 font-medium ${getStatusColor()}`}>
           {getStatusIcon()}
-          <span>{getStatusText()}</span>
+          <span className='text-primary'>{getStatusText()}</span>
         </div>
 
         {/* Recording Controls */}
@@ -171,7 +171,7 @@ export const AudioRecordingControls: React.FC<AudioRecordingControlsProps> = ({
         </div>
 
         {/* Browser Compatibility Info */}
-        <div className="text-sm text-gray-500 space-y-1">
+        <div className="text-sm text-primary space-y-1">
           <p>Record audio for speaker identification</p>
           <p className="text-xs">
             {location.protocol !== 'https:' && location.hostname !== 'localhost' 
@@ -200,11 +200,11 @@ export const AudioRecordingControls: React.FC<AudioRecordingControlsProps> = ({
 
             <div className="grid grid-cols-2 gap-4 text-sm">
               <div className="text-center">
-                <div className="text-gray-500">Duration</div>
+                <div className="text-primary">Duration</div>
                 <div className="font-medium">{formatDuration(processedAudio.buffer.duration * 1000)}</div>
               </div>
               <div className="text-center">
-                <div className="text-gray-500">Sample Rate</div>
+                <div className="text-primary">Sample Rate</div>
                 <div className="font-medium">{(processedAudio.buffer.sampleRate / 1000).toFixed(1)} kHz</div>
               </div>
             </div>

extras/speaker-recognition/webui/src/components/ConnectionStatus.tsx

@@ -102,7 +102,7 @@ export default function ConnectionStatus() {
       onClick={() => checkBackendConnection()}
     >
       <Circle className={`h-3 w-3 ${getStatusColor()} ${status.status === 'connected' ? 'fill-current' : ''}`} />
-      <span className="text-gray-600">{getStatusText()}</span>
+      <span className="text-gray-500 dark:text-gray-400">{getStatusText()}</span>
     </div>
   )
 }

extras/speaker-recognition/webui/src/components/FileUploader.tsx

@@ -127,14 +127,14 @@ export default function FileUploader({
           </div>
 
           <div>
-            <p className={`text-lg font-medium ${disabled ? 'text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}>
+            <p className={`text-lg font-medium ${disabled ? 'text-primary-disabled' : 'text-primary'}`}>
               {isDragOver ? 'Drop files here' : (title || 'Upload Audio Files')}
             </p>
-            <p className={`text-sm ${disabled ? 'text-gray-300 dark:text-gray-600' : 'text-gray-500 dark:text-gray-400'}`}>
+            <p className={`text-sm ${disabled ? 'text-muted-disabled' : 'text-muted'}`}>
               Drag and drop or click to select files
             </p>
             {accept.includes('audio') && (
-              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+              <p className="text-xs text-primary-disabled mt-1">
                 Supported: WAV, FLAC, MP3, M4A, OGG
               </p>
             )}
@@ -149,7 +149,7 @@ export default function FileUploader({
       {/* Selected Files List */}
       {selectedFiles.length > 0 && (
         <div className="mt-4 space-y-2">
-          <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">Selected Files:</h4>
+          <h4 className="text-sm font-medium text-primary">Selected Files:</h4>
           <div className="space-y-2">
             {selectedFiles.map((file, index) => (
               <div
@@ -159,8 +159,8 @@ export default function FileUploader({
                 <div className="flex items-center space-x-3">
                   <FileAudio className="h-5 w-5 text-blue-500" />
                   <div>
-                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{file.name}</p>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">{formatFileSize(file.size)}</p>
+                    <p className="text-sm font-medium text-primary">{file.name}</p>
+                    <p className="text-xs text-muted">{formatFileSize(file.size)}</p>
                   </div>
                 </div>
                 <button