Update script.js

script.js

@@ -37,7 +37,7 @@ document.addEventListener('DOMContentLoaded', () => {
     let systemStatus = 'disconnected';
 
     // Updated API Base URL for local development
-    const API_BASE_URL = 'https://nitinbot001-medbot-backend.hf.space';
+    const API_BASE_URL = 'http://localhost:5000';
 
     // Speech Recognition (STT) Setup
     const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
@@ -57,14 +57,17 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // --- INITIALIZATION ---
     function initializeApp() {
+        console.log('MediBot initializing...');
         checkSystemHealth();
         loadHistory();
         setupEventListeners();
         updateStatusIndicator('ready', 'Ready');
         addMessageToUI('ai', 'Hello! I am your MediBot Assistant. I can help you with medical information, analyze images of medicines, and answer questions about diseases. How can I assist you today?');
+        console.log('MediBot initialization complete');
     }
 
     async function checkSystemHealth() {
+        console.log('Checking system health...');
         try {
             const response = await fetch(`${API_BASE_URL}/health`);
             const data = await response.json();
@@ -74,10 +77,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 updateStatusIndicator('connected', 'System Ready');
                 console.log('System health check passed:', data);
                 
-                // Display system info
+                // Display system info only if there are loaded files
                 if (data.disease_fact_sheets > 0 || data.medicine_knowledge_files > 0) {
-                    const info = `System loaded with ${data.disease_fact_sheets} disease fact sheets and ${data.medicine_knowledge_files} medicine knowledge files.`;
-                    addMessageToUI('system', info);
+                    console.log(`System loaded with ${data.disease_fact_sheets} disease fact sheets and ${data.medicine_knowledge_files} medicine knowledge files`);
                 }
             } else {
                 throw new Error('System health check failed');
@@ -92,10 +94,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
     async function startNewSession() {
         if (systemStatus !== 'connected') {
+            console.error('Cannot start session - system not connected');
             addMessageToUI('error', 'System is not connected. Please refresh the page and try again.');
             return false;
         }
 
+        console.log('Starting new session...');
         updateStatusIndicator('connecting', 'Starting session...');
         try {
             const response = await fetch(`${API_BASE_URL}/start_session`, { 
@@ -126,6 +130,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // --- EVENT LISTENERS ---
     function setupEventListeners() {
+        console.log('Setting up event listeners...');
+        
         // Text input handling
         if (sendBtn) sendBtn.addEventListener('click', handleTextInput);
         if (textInput) {
@@ -147,6 +153,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (continuousToggle) {
             continuousToggle.addEventListener('change', (e) => {
                 isContinuousMode = e.target.checked;
+                console.log('Continuous mode toggled:', isContinuousMode);
                 if (recognition) {
                     recognition.continuous = isContinuousMode;
                 }
@@ -162,6 +169,7 @@ document.addEventListener('DOMContentLoaded', () => {
         // Speech recognition events
         if (recognition) {
             recognition.onstart = () => {
+                console.log('Speech recognition started');
                 isListening = true;
                 if (micBtn) {
                     micBtn.classList.add('listening');
@@ -171,6 +179,7 @@ document.addEventListener('DOMContentLoaded', () => {
             };
 
             recognition.onend = () => {
+                console.log('Speech recognition ended');
                 isListening = false;
                 if (micBtn) {
                     micBtn.classList.remove('listening');
@@ -179,12 +188,14 @@ document.addEventListener('DOMContentLoaded', () => {
                 updateStatusIndicator('connected', 'Session Active');
                 
                 if (isContinuousMode && currentMode !== 'text') {
+                    console.log('Restarting speech recognition in continuous mode');
                     setTimeout(() => recognition.start(), 1000);
                 }
             };
 
             recognition.onresult = (event) => {
                 const transcript = event.results[event.results.length - 1][0].transcript.trim();
+                console.log('Speech recognition result:', transcript);
                 if (textInput) textInput.value = transcript;
                 if (transcript) processUserQuery(transcript);
             };
@@ -199,20 +210,22 @@ document.addEventListener('DOMContentLoaded', () => {
         // Image capture modal
         if (closeModalBtn) {
             closeModalBtn.addEventListener('click', () => {
+                console.log('Image capture modal closed, starting capture...');
                 if (imageModal) imageModal.classList.add('hidden');
-                addMessageToUI('ai', 'Capturing image in 2 seconds...');
                 setTimeout(captureAndSendImage, 2000);
             });
         }
 
         // System health check interval
         setInterval(checkSystemHealth, 30000); // Check every 30 seconds
+        console.log('Event listeners setup complete');
     }
 
     // --- CORE LOGIC ---
     function handleTextInput() {
         const query = textInput ? textInput.value.trim() : '';
         if (query) {
+            console.log('Processing text input:', query);
             processUserQuery(query);
             if (textInput) textInput.value = '';
         }
@@ -222,15 +235,19 @@ document.addEventListener('DOMContentLoaded', () => {
         const file = event.target.files[0];
         if (!file) return;
 
+        console.log('File selected for upload:', file.name, file.type, file.size);
+
         // Validate file type
         const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
         if (!allowedTypes.includes(file.type)) {
+            console.error('Invalid file type:', file.type);
             addMessageToUI('error', 'Please select a valid image file (JPEG, PNG, GIF, BMP, or WebP).');
             return;
         }
 
         // Check file size (16MB limit)
         if (file.size > 16 * 1024 * 1024) {
+            console.error('File size too large:', file.size);
             addMessageToUI('error', 'File size too large. Please select an image under 16MB.');
             return;
         }
@@ -238,10 +255,12 @@ document.addEventListener('DOMContentLoaded', () => {
         const query = prompt('Please describe what you want to know about this image:');
         if (!query) return;
 
+        console.log('Processing file upload with query:', query);
         await processImageQuery(query, file);
     }
 
     async function processUserQuery(query) {
+        console.log('Processing user query:', query);
         addMessageToUI('user', query);
         showLoading(true);
 
@@ -253,6 +272,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         try {
+            console.log('Sending query to API...');
             const response = await fetch(`${API_BASE_URL}/process_query`, {
                 method: 'POST',
                 headers: { 
@@ -265,14 +285,17 @@ document.addEventListener('DOMContentLoaded', () => {
             });
 
             const data = await response.json();
+            console.log('API response received:', data);
 
             if (!response.ok) {
                 throw new Error(data.error || `Server error: ${response.status}`);
             }
 
             if (data.status === 'image_required') {
+                console.log('Image required for query');
                 handleImageRequest(data.message, data.category);
             } else if (data.status === 'success') {
+                console.log('Query processed successfully');
                 handleApiResponse(data.response, data.category);
             } else {
                 throw new Error('Unexpected response format');
@@ -287,6 +310,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     async function processImageQuery(query, imageFile) {
+        console.log('Processing image query:', query, 'with file:', imageFile.name);
         addMessageToUI('user', query);
         showLoading(true);
 
@@ -297,6 +321,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         try {
+            console.log('Sending image to API...');
             const formData = new FormData();
             formData.append('session_id', sessionId);
             formData.append('photo', imageFile);
@@ -307,12 +332,14 @@ document.addEventListener('DOMContentLoaded', () => {
             });
 
             const data = await response.json();
+            console.log('Image API response received:', data);
 
             if (!response.ok) {
                 throw new Error(data.error || `Server error: ${response.status}`);
             }
 
             if (data.status === 'success') {
+                console.log('Image processed successfully');
                 handleApiResponse(data.response, data.category);
             } else {
                 throw new Error('Unexpected response format');
@@ -331,7 +358,9 @@ document.addEventListener('DOMContentLoaded', () => {
         
         if (isError) {
             message = responseData;
+            console.error('API Error:', responseData);
         } else {
+            console.log('Handling API response:', responseData, 'Category:', category);
             // Handle different response formats from the integrated backend
             if (typeof responseData === 'string') {
                 message = responseData;
@@ -349,14 +378,12 @@ document.addEventListener('DOMContentLoaded', () => {
         
         // Add category info if available
         if (category && !isError) {
-            const categoryInfo = getCategoryInfo(category);
-            if (categoryInfo) {
-                addMessageToUI('system', categoryInfo);
-            }
+            console.log('Response category:', category);
         }
         
         // Text-to-speech for voice/video modes
         if (!isError && (currentMode === 'voice' || currentMode === 'video')) {
+            console.log('Speaking response in', currentMode, 'mode');
             speak(message);
         }
     }
@@ -386,11 +413,14 @@ document.addEventListener('DOMContentLoaded', () => {
 
         statusIndicator.textContent = `● ${message}`;
         statusIndicator.style.color = colors[status] || '#cccccc';
+        console.log('Status updated:', status, message);
     }
 
     function switchMode(newMode) {
         if (currentMode === newMode) return;
         
+        console.log('Switching mode from', currentMode, 'to', newMode);
+        
         // Cleanup current mode
         if (currentMode === 'video') stopCamera();
         if (isListening && recognition) recognition.stop();
@@ -433,7 +463,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 break;
         }
 
-        addMessageToUI('system', `Switched to ${newMode} mode`);
+        console.log('Mode switch completed to:', newMode);
     }
 
     function addMessageToUI(sender, text, category = null) {
@@ -464,15 +494,18 @@ document.addEventListener('DOMContentLoaded', () => {
         if (loadingIndicator) {
             loadingIndicator.style.display = show ? 'flex' : 'none';
         }
+        console.log('Loading indicator:', show ? 'shown' : 'hidden');
     }
 
     // --- VOICE & VIDEO ---
     function toggleListening() {
         if (!recognition) {
+            console.error('Speech recognition not supported');
             addMessageToUI('error', 'Speech recognition is not supported in this browser.');
             return;
         }
 
+        console.log('Toggling listening, current state:', isListening);
         if (isListening) {
             recognition.stop();
         } else {
@@ -487,6 +520,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         
         if (text && text.trim() !== '') {
+            console.log('Speaking text:', text.substring(0, 50) + '...');
             const utterance = new SpeechSynthesisUtterance(text);
             
             // Try to find a female voice
@@ -498,7 +532,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 voice.name.toLowerCase().includes('hazel')
             );
             
-            if (femaleVoice) utterance.voice = femaleVoice;
+            if (femaleVoice) {
+                utterance.voice = femaleVoice;
+                console.log('Using voice:', femaleVoice.name);
+            }
             
             // Apply voice settings
             if (pitchSlider) utterance.pitch = parseFloat(pitchSlider.value);
@@ -513,13 +550,14 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     async function startCamera() {
+        console.log('Starting camera...');
         try {
             videoStream = await navigator.mediaDevices.getUserMedia({ 
                 video: { width: 640, height: 480 }, 
                 audio: false 
             });
             if (videoFeed) videoFeed.srcObject = videoStream;
-            addMessageToUI('system', 'Camera activated for image capture');
+            console.log('Camera started successfully');
         } catch (err) {
             console.error("Error accessing camera:", err);
             addMessageToUI('error', 'Could not access the camera. Please grant permission and try again.');
@@ -528,15 +566,17 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function stopCamera() {
+        console.log('Stopping camera...');
         if (videoStream) {
             videoStream.getTracks().forEach(track => track.stop());
             if (videoFeed) videoFeed.srcObject = null;
             videoStream = null;
-            addMessageToUI('system', 'Camera deactivated');
+            console.log('Camera stopped');
         }
     }
     
     function handleImageRequest(message, category) {
+        console.log('Image request received:', message, 'Category:', category);
         addMessageToUI('ai', message);
         if (currentMode !== 'video') {
             addMessageToUI('ai', "Please switch to Video mode to capture an image, or use the file upload option in Text mode.");
@@ -546,12 +586,15 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     async function captureAndSendImage() {
+        console.log('Capturing image...');
         if (!videoStream || !sessionId) {
+            console.error('Cannot capture image - missing video stream or session');
             addMessageToUI('error', 'Cannot capture image. Video stream or session is not active.');
             return;
         }
 
         if (!videoFeed || !canvas) {
+            console.error('Video capture elements not found');
             addMessageToUI('error', 'Video capture elements not found.');
             return;
         }
@@ -566,16 +609,17 @@ document.addEventListener('DOMContentLoaded', () => {
 
         canvas.toBlob(async (blob) => {
             if (!blob) {
+                console.error('Failed to create image blob');
                 addMessageToUI('error', 'Failed to capture image.');
                 return;
             }
 
+            console.log('Image captured, sending to server...');
             const formData = new FormData();
             formData.append('session_id', sessionId);
             formData.append('photo', blob, 'capture.jpg');
             
             showLoading(true);
-            addMessageToUI('system', 'Processing captured image...');
 
             try {
                 const response = await fetch(`${API_BASE_URL}/process_with_image`, {
@@ -584,6 +628,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 });
                 
                 const data = await response.json();
+                console.log('Captured image processed:', data);
                 
                 if (!response.ok) {
                     throw new Error(data.error || 'Image processing failed');
@@ -621,6 +666,7 @@ document.addEventListener('DOMContentLoaded', () => {
             if (history && chatBox) {
                 chatBox.innerHTML = history;
                 chatBox.scrollTop = chatBox.scrollHeight;
+                console.log('Chat history loaded');
             }
         } catch (error) {
             console.warn('Could not load chat history:', error);
@@ -631,13 +677,13 @@ document.addEventListener('DOMContentLoaded', () => {
         if (chatBox) {
             chatBox.innerHTML = '';
             localStorage.removeItem('medibotChatHistory');
-            addMessageToUI('system', 'Chat history cleared');
+            console.log('Chat history cleared');
         }
     }
 
     // --- UTILITY FUNCTIONS ---
     function downloadKnowledgeBase() {
-        addMessageToUI('system', 'Use the upload endpoints to add knowledge base files to the system.');
+        console.log('Knowledge base download requested');
     }
 
     // --- EXPOSE FUNCTIONS TO GLOBAL SCOPE (for debugging) ---