Fix: Frontend url handling changed

frontend/index.html

@@ -1134,7 +1134,22 @@
         // API Service for backend communication
         class APIService {
             constructor() {
-                this.baseURL = 'http://localhost:8000'; // Backend server URL
+                // AUTO-DETECT the correct base URL
+                const currentOrigin = window.location.origin;
+                
+                // Check if we're in HuggingFace Spaces or localhost
+                if (currentOrigin.includes('hf.space') || currentOrigin.includes('huggingface.co')) {
+                    // HuggingFace Spaces
+                    this.baseURL = currentOrigin;
+                } else if (currentOrigin.includes('localhost') || currentOrigin.includes('127.0.0.1')) {
+                    // Local development
+                    this.baseURL = 'http://localhost:8000';
+                } else {
+                    // Any other deployment 
+                    this.baseURL = currentOrigin;
+                }
+                
+                console.log('API Service initialized with baseURL:', this.baseURL);
             }
             
             async cleanupSession(sessionId) {
@@ -1164,17 +1179,42 @@
                     formData.append('files', file);
                 }
 
-                const response = await fetch(`${this.baseURL}/api/upload`, {
-                    method: 'POST',
-                    body: formData
-                });
+                console.log('Uploading files to:', `${this.baseURL}/api/upload`);
                 
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.detail || `Upload failed: ${response.statusText}`);
+                try {
+                    const response = await fetch(`${this.baseURL}/api/upload`, {
+                        method: 'POST',
+                        body: formData
+                    });
+                    
+                    console.log('Upload response status:', response.status);
+                    
+                    if (!response.ok) {
+                        let errorMessage = `Upload failed: ${response.status} ${response.statusText}`;
+                        try {
+                            const errorData = await response.json();
+                            errorMessage = errorData.detail || errorData.message || errorMessage;
+                        } catch (e) {
+                            const text = await response.text();
+                            errorMessage = `${errorMessage} - ${text.substring(0, 100)}`;
+                        }
+                        throw new Error(errorMessage);
+                    }
+                    
+                    const result = await response.json();
+                    console.log('Upload successful:', result);
+                    return result;
+                    
+                } catch (error) {
+                    console.error('Upload error:', error);
+                    
+                    // Better error message for network issues
+                    if (error.message.includes('Failed to fetch')) {
+                        throw new Error(`Cannot connect to server at ${this.baseURL}. Check if backend is running.`);
+                    }
+                    
+                    throw error;
                 }
-                
-                return await response.json();
             }
 
             async startProcessing() {
@@ -1201,7 +1241,7 @@
             }
 
             async sendChatMessage(message, sessionId = null) {
-                console.log('Sending chat message to backend:', message);
+                console.log('Sending chat message to backend:', this.baseURL);
                 
                 try {
                     const response = await fetch(`${this.baseURL}/api/chat`, {
@@ -1215,9 +1255,19 @@
                         })
                     });
                     
+                    console.log('Response status:', response.status);
+                    
                     if (!response.ok) {
-                        const errorData = await response.json();
-                        throw new Error(errorData.detail || `Chat failed: ${response.statusText}`);
+                        let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+                        try {
+                            const errorData = await response.json();
+                            errorMessage = errorData.detail || errorData.message || errorMessage;
+                        } catch (e) {
+                            // If response is not JSON, get text
+                            const text = await response.text();
+                            errorMessage = `${errorMessage} - ${text.substring(0, 100)}`;
+                        }
+                        throw new Error(errorMessage);
                     }
                     
                     const result = await response.json();
@@ -1226,7 +1276,13 @@
                     return result;
                     
                 } catch (error) {
-                    console.error('Chat API error details:', error);
+                    console.error('Chat API error:', error);
+                    
+                    // Better error messages for common issues
+                    if (error.message.includes('Failed to fetch')) {
+                        throw new Error(`Cannot connect to server at ${this.baseURL}. Please make sure the backend is running.`);
+                    }
+                    
                     throw error;
                 }
             }
@@ -1418,6 +1474,22 @@
         // Main app functions
         async function initializeApp() {
             setupEventListeners();
+            
+            // Show current API endpoint in console
+            console.log('🔧 QuerySphere initialized');
+            console.log('🔧 Frontend URL:', window.location.origin);
+            console.log('🔧 API Base URL:', apiService.baseURL);
+            
+            // Test backend connection
+            try {
+                const health = await apiService.getHealth();
+                console.log('✅ Backend connection successful:', health);
+                showNotification('Connected to backend', 'success');
+            } catch (error) {
+                console.error('❌ Backend connection failed:', error);
+                showNotification(`Cannot connect to backend at ${apiService.baseURL}`, 'error');
+            }
+            
             await checkSystemStatus();
             startStatusPolling();
         }
@@ -1560,6 +1632,27 @@
             try {
                 showNotification('Uploading files...', 'info');
                 
+                // First, check if we can connect to the backend
+                try {
+                    console.log('Testing connection to:', apiService.baseURL);
+                    await fetch(`${apiService.baseURL}/api/health`);
+                } catch (connectionError) {
+                    console.error('Connection test failed:', connectionError);
+                    showNotification(`Cannot connect to backend at ${apiService.baseURL}. Please check if the server is running.`, 'error');
+                    return;
+                }
+                
+                // Check file size limits for HuggingFace Spaces
+                const MAX_SIZE_MB = 50;
+                const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
+                
+                for (let file of files) {
+                    if (file.size > MAX_SIZE_BYTES) {
+                        showNotification(`File ${file.name} is too large (max ${MAX_SIZE_MB}MB for HuggingFace Spaces)`, 'error');
+                        return;
+                    }
+                }
+                
                 // Update UI immediately
                 for (let file of files) {
                     addFileToList(file, 'uploading');
@@ -1576,7 +1669,15 @@
                 
             } catch (error) {
                 console.error('Upload error:', error);
-                showNotification(`Upload failed: ${error.message}`, 'error');
+                
+                // More specific error messages
+                if (error.message.includes('Cannot connect to server')) {
+                    showNotification(error.message, 'error');
+                } else if (error.message.includes('Failed to fetch')) {
+                    showNotification(`Network error: Cannot connect to ${apiService.baseURL}`, 'error');
+                } else {
+                    showNotification(`Upload failed: ${error.message}`, 'error');
+                }
                 
                 // Remove failed files from list
                 updateFileList();