updates

ui/services/api.service.js

@@ -1,6 +1,7 @@
 // API Service for WiFi-DensePose UI
 
 import { API_CONFIG, buildApiUrl } from '../config/api.config.js';
+import { backendDetector } from '../utils/backend-detector.js';
 
 export class ApiService {
   constructor() {
@@ -69,8 +70,15 @@ export class ApiService {
       // Process request through interceptors
       const processed = await this.processRequest(url, options);
       
+      // Determine the correct base URL (real backend vs mock)
+      let finalUrl = processed.url;
+      if (processed.url.startsWith(API_CONFIG.BASE_URL)) {
+        const baseUrl = await backendDetector.getBaseUrl();
+        finalUrl = processed.url.replace(API_CONFIG.BASE_URL, baseUrl);
+      }
+      
       // Make the request
-      const response = await fetch(processed.url, {
+      const response = await fetch(finalUrl, {
         ...processed.options,
         headers: this.getHeaders(processed.options.headers)
       });

ui/services/websocket.service.js

@@ -1,6 +1,7 @@
 // WebSocket Service for WiFi-DensePose UI
 
 import { API_CONFIG, buildWsUrl } from '../config/api.config.js';
+import { backendDetector } from '../utils/backend-detector.js';
 
 export class WebSocketService {
   constructor() {
@@ -10,8 +11,18 @@ export class WebSocketService {
   }
 
   // Connect to WebSocket endpoint
-  connect(endpoint, params = {}, handlers = {}) {
-    const url = buildWsUrl(endpoint, params);
+  async connect(endpoint, params = {}, handlers = {}) {
+    // Determine if we should use mock WebSockets
+    const useMock = await backendDetector.shouldUseMockServer();
+    
+    let url;
+    if (useMock) {
+      // Use mock WebSocket URL (served from same origin as UI)
+      url = buildWsUrl(endpoint, params).replace('localhost:8000', window.location.host);
+    } else {
+      // Use real backend WebSocket URL
+      url = buildWsUrl(endpoint, params);
+    }
     
     // Check if already connected
     if (this.connections.has(url)) {