Update script.js

script.js

@@ -1,352 +1,655 @@
-document.addEventListener('DOMContentLoaded', () => {
-    // DOM Elements
-    const chatBox = document.getElementById('chat-box');
-    const textInput = document.getElementById('text-input');
-    const sendBtn = document.getElementById('send-btn');
-    const micBtn = document.getElementById('mic-btn');
-    const loadingIndicator = document.getElementById('loading-indicator');
-    const statusIndicator = document.getElementById('status-indicator');
-    
-    // Mode Buttons
-    const modeTextBtn = document.getElementById('mode-text');
-    const modeVoiceBtn = document.getElementById('mode-voice');
-    const modeVideoBtn = document.getElementById('mode-video');
-
-    // Voice Controls
-    const voiceControls = document.getElementById('voice-controls');
-    const continuousToggle = document.getElementById('continuous-toggle');
-    const rateSlider = document.getElementById('rate');
-    const pitchSlider = document.getElementById('pitch');
-
-    // Video Elements
-    const videoFeed = document.getElementById('video-feed');
-    const canvas = document.getElementById('canvas');
-    const imageModal = document.getElementById('image-capture-modal');
-    const closeModalBtn = document.getElementById('close-modal-btn');
-
-    // State Variables
-    let sessionId = null; // Will be set before each new query
-    let currentMode = 'text'; // 'text', 'voice', 'video'
-    let isListening = false;
-    let isContinuousMode = false;
-    let videoStream = null;
-
-    const API_BASE_URL = 'https://nitinbot001-medbot-backend.hf.space';
-
-    // Speech Recognition (STT) Setup
-    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-    let recognition;
-    if (SpeechRecognition) {
-        recognition = new SpeechRecognition();
-        recognition.continuous = false;
-        recognition.interimResults = false;
-        recognition.lang = 'en-US'; // You can change this
-    } else {
-        micBtn.disabled = true;
-        addMessageToUI('error', 'Speech Recognition is not supported in this browser.');
-    }
-
-    // Speech Synthesis (TTS) Setup
-    const synth = window.speechSynthesis;
-
-    // --- INITIALIZATION ---
-    function initializeApp() {
-        loadHistory();
-        setupEventListeners();
-        statusIndicator.textContent = '● Ready';
-        statusIndicator.style.color = '#cccccc';
-        addMessageToUI('ai', 'Hello! I am your MediBot Assistant. How can I help you today?');
-    }
-
-    async function startNewSession() {
-        statusIndicator.textContent = '● Connecting...';
-        statusIndicator.style.color = 'orange';
-        try {
-            const response = await fetch(`${API_BASE_URL}/start_session`, { method: 'POST' });
-            if (!response.ok) throw new Error('Failed to start session');
-            const data = await response.json();
-            sessionId = data.session_id; // Set the session ID for the current transaction
-            statusIndicator.textContent = '● Connected';
-            statusIndicator.style.color = '#76ff03';
-            console.log('New transaction session started:', sessionId);
-            return true; // Indicate success
-        } catch (error) {
-            console.error('Session start error:', error);
-            sessionId = null; // Ensure session ID is null on failure
-            statusIndicator.textContent = '● Connection Failed';
-            statusIndicator.style.color = '#ff4d4d';
-            addMessageToUI('error', `Could not connect to the server. ${error.message}`);
-            return false; // Indicate failure
-        }
-    }
-
-    // --- EVENT LISTENERS ---
-    function setupEventListeners() {
-        sendBtn.addEventListener('click', handleTextInput);
-        textInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') handleTextInput();
-        });
-
-        // Mode Switching
-        modeTextBtn.addEventListener('click', () => switchMode('text'));
-        modeVoiceBtn.addEventListener('click', () => switchMode('voice'));
-        modeVideoBtn.addEventListener('click', () => switchMode('video'));
-
-        // Voice Controls
-        micBtn.addEventListener('click', toggleListening);
-        continuousToggle.addEventListener('change', (e) => {
-            isContinuousMode = e.target.checked;
-            if (recognition) {
-                recognition.continuous = isContinuousMode;
-            }
-        });
-
-        // STT Events
-        if (recognition) {
-            recognition.onstart = () => {
-                isListening = true;
-                micBtn.classList.add('listening');
-                micBtn.innerHTML = '<i class="fas fa-stop"></i>';
-            };
-            recognition.onend = () => {
-                isListening = false;
-                micBtn.classList.remove('listening');
-                micBtn.innerHTML = '<i class="fas fa-microphone"></i>';
-                if (isContinuousMode && currentMode !== 'text') {
-                    recognition.start(); // Keep listening in continuous mode
-                }
-            };
-            recognition.onresult = (event) => {
-                const transcript = event.results[event.results.length - 1][0].transcript.trim();
-                textInput.value = transcript;
-                processUserQuery(transcript);
-            };
-            recognition.onerror = (event) => {
-                console.error('Speech recognition error:', event.error);
-                addMessageToUI('error', `Speech recognition error: ${event.error}`);
-            };
-        }
-
-        // Image Capture Modal
-        closeModalBtn.addEventListener('click', () => {
-            imageModal.classList.add('hidden');
-            addMessageToUI('ai', 'Capturing image in 1 second...');
-            setTimeout(captureAndSendImage, 1000);
-        });
-    }
-
-    // --- CORE LOGIC ---
-    function handleTextInput() {
-        const query = textInput.value.trim();
-        if (query) {
-            processUserQuery(query);
-            textInput.value = '';
-        }
-    }
-
-    async function processUserQuery(query) {
-        addMessageToUI('user', query);
-        showLoading(true);
-
-        // *** CHANGED LOGIC: Start a new session for every query ***
-        const sessionStarted = await startNewSession();
-        if (!sessionStarted) {
-            showLoading(false);
-            return; // Stop if session could not be created
-        }
-
-        try {
-            const response = await fetch(`${API_BASE_URL}/process_query`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ session_id: sessionId, query: query })
-            });
-
-            const data = await response.json();
-
-            if (!response.ok) {
-                throw new Error(data.error || 'API request failed');
-            }
-
-            if (data.status === 'image_required') {
-                handleImageRequest(data.message);
-            } else {
-                const message = data.response?.response || data.data;
-                handleApiResponse(message);
-            }
-
-        } catch (error) {
-            console.error('Error processing query:', error);
-            handleApiResponse(`Sorry, I encountered an error: ${error.message}`, true);
-        } finally {
-            showLoading(false);
-        }
-    }
-
-    function handleApiResponse(message, isError = false) {
-        const type = isError ? 'error' : 'ai';
-        addMessageToUI(type, message);
-        if (!isError && (currentMode === 'voice' || currentMode === 'video')) {
-            speak(message);
-        }
-    }
-
-    // --- UI & STATE MANAGEMENT ---
-    function switchMode(newMode) {
-        if (currentMode === newMode) return;
-        
-        if (currentMode === 'video') stopCamera();
-        if (isListening && recognition) recognition.stop();
-
-        currentMode = newMode;
-        
-        document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
-        document.getElementById(`mode-${newMode}`).classList.add('active');
-
-        if (newMode === 'text') {
-            document.body.classList.remove('body-video-mode');
-            voiceControls.classList.add('hidden');
-            micBtn.classList.add('hidden');
-            sendBtn.classList.remove('hidden');
-            textInput.classList.remove('hidden');
-            videoFeed.style.display = 'none';
-        } else if (newMode === 'voice') {
-            document.body.classList.remove('body-video-mode');
-            voiceControls.classList.remove('hidden');
-            micBtn.classList.remove('hidden');
-            sendBtn.classList.add('hidden');
-            textInput.classList.add('hidden');
-            videoFeed.style.display = 'none';
-        } else if (newMode === 'video') {
-            document.body.classList.add('body-video-mode');
-            voiceControls.classList.remove('hidden');
-            micBtn.classList.remove('hidden');
-            sendBtn.classList.add('hidden');
-            textInput.classList.add('hidden');
-            videoFeed.style.display = 'block';
-            startCamera();
-        }
-    }
-
-    function addMessageToUI(sender, text) {
-        const messageDiv = document.createElement('div');
-        messageDiv.classList.add('message', `${sender}-message`);
-        messageDiv.textContent = text;
-        chatBox.appendChild(messageDiv);
-        chatBox.scrollTop = chatBox.scrollHeight;
-        saveHistory();
-    }
-    
-    function showLoading(show) {
-        loadingIndicator.style.display = show ? 'flex' : 'none';
-    }
-
-    // --- VOICE & VIDEO ---
-    function toggleListening() {
-        if (!recognition) return;
-        if (isListening) {
-            recognition.stop();
-        } else {
-            recognition.start();
-        }
-    }
-
-    function speak(text) {
-        if (synth.speaking) {
-            console.error('SpeechSynthesis is already speaking.');
-            return;
-        }
-        if (text !== '') {
-            const utterance = new SpeechSynthesisUtterance(text);
-            const femaleVoice = synth.getVoices().find(voice => voice.name.includes('Female') || voice.gender === 'female');
-            if(femaleVoice) utterance.voice = femaleVoice;
-            utterance.pitch = pitchSlider.value;
-            utterance.rate = rateSlider.value;
-            synth.speak(utterance);
-        }
-    }
-
-    async function startCamera() {
-        try {
-            videoStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
-            videoFeed.srcObject = videoStream;
-        } catch (err) {
-            console.error("Error accessing camera: ", err);
-            addMessageToUI('error', 'Could not access the camera. Please grant permission.');
-            switchMode('voice');
-        }
-    }
-
-    function stopCamera() {
-        if (videoStream) {
-            videoStream.getTracks().forEach(track => track.stop());
-            videoFeed.srcObject = null;
-            videoStream = null;
-        }
-    }
-    
-    function handleImageRequest(message) {
-        addMessageToUI('ai', message);
-        if (currentMode !== 'video') {
-            addMessageToUI('ai', "Please switch to Video mode to provide an image.");
-        } else {
-            imageModal.classList.remove('hidden');
-        }
-    }
-
-    async function captureAndSendImage() {
-        if (!videoStream || !sessionId) {
-            addMessageToUI('error', 'Cannot capture image. Video stream or session is not active.');
-            return;
-        };
-        
-        const videoTrack = videoStream.getVideoTracks()[0];
-        const settings = videoTrack.getSettings();
-        canvas.width = settings.width;
-        canvas.height = settings.height;
-        
-        const context = canvas.getContext('2d');
-        context.drawImage(videoFeed, 0, 0, canvas.width, canvas.height);
-
-        canvas.toBlob(async (blob) => {
-            const formData = new FormData();
-            formData.append('session_id', sessionId);
-            formData.append('photo', blob, 'capture.jpg');
-            
-            showLoading(true);
-            try {
-                const response = await fetch(`${API_BASE_URL}/process_with_image`, {
-                    method: 'POST',
-                    body: formData
-                });
-                
-                const data = await response.json();
-                if (!response.ok) throw new Error(data.message || 'Image processing failed');
-
-                const message = data.response?.response || data.data;
-                handleApiResponse(message);
-
-            } catch (error) {
-                console.error('Error sending image:', error);
-                handleApiResponse(`Sorry, I couldn't process the image: ${error.message}`, true);
-            } finally {
-                showLoading(false);
-            }
-        }, 'image/jpeg');
-    }
-
-    // --- LOCAL STORAGE ---
-    function saveHistory() {
-        localStorage.setItem('medibotChatHistory', chatBox.innerHTML);
-    }
-    function loadHistory() {
-        const history = localStorage.getItem('medibotChatHistory');
-        if (history) {
-            chatBox.innerHTML = history;
-            chatBox.scrollTop = chatBox.scrollHeight;
-        }
-    }
-    
-    // --- START THE APP ---
-    initializeApp();
+document.addEventListener('DOMContentLoaded', () => {
+    // DOM Elements
+    const chatBox = document.getElementById('chat-box');
+    const textInput = document.getElementById('text-input');
+    const sendBtn = document.getElementById('send-btn');
+    const micBtn = document.getElementById('mic-btn');
+    const loadingIndicator = document.getElementById('loading-indicator');
+    const statusIndicator = document.getElementById('status-indicator');
+    
+    // Mode Buttons
+    const modeTextBtn = document.getElementById('mode-text');
+    const modeVoiceBtn = document.getElementById('mode-voice');
+    const modeVideoBtn = document.getElementById('mode-video');
+
+    // Voice Controls
+    const voiceControls = document.getElementById('voice-controls');
+    const continuousToggle = document.getElementById('continuous-toggle');
+    const rateSlider = document.getElementById('rate');
+    const pitchSlider = document.getElementById('pitch');
+
+    // Video Elements
+    const videoFeed = document.getElementById('video-feed');
+    const canvas = document.getElementById('canvas');
+    const imageModal = document.getElementById('image-capture-modal');
+    const closeModalBtn = document.getElementById('close-modal-btn');
+
+    // Upload Elements (Optional - if you want file upload capability)
+    const fileUploadBtn = document.getElementById('file-upload-btn');
+    const fileInput = document.getElementById('file-input');
+
+    // State Variables
+    let sessionId = null;
+    let currentMode = 'text';
+    let isListening = false;
+    let isContinuousMode = false;
+    let videoStream = null;
+    let systemStatus = 'disconnected';
+
+    // Updated API Base URL for local development
+    const API_BASE_URL = 'https://nitinbot001-medbot-backend.hf.space';
+
+    // Speech Recognition (STT) Setup
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    let recognition;
+    if (SpeechRecognition) {
+        recognition = new SpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = false;
+        recognition.lang = 'en-US';
+    } else {
+        console.warn('Speech Recognition not supported');
+        if (micBtn) micBtn.disabled = true;
+    }
+
+    // Speech Synthesis (TTS) Setup
+    const synth = window.speechSynthesis;
+
+    // --- INITIALIZATION ---
+    function initializeApp() {
+        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?');
+    }
+
+    async function checkSystemHealth() {
+        try {
+            const response = await fetch(`${API_BASE_URL}/health`);
+            const data = await response.json();
+            
+            if (response.ok && data.status.includes('Running')) {
+                systemStatus = 'connected';
+                updateStatusIndicator('connected', 'System Ready');
+                console.log('System health check passed:', data);
+                
+                // Display system info
+                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);
+                }
+            } else {
+                throw new Error('System health check failed');
+            }
+        } catch (error) {
+            systemStatus = 'disconnected';
+            updateStatusIndicator('error', 'System Offline');
+            console.error('System health check failed:', error);
+            addMessageToUI('error', 'Unable to connect to the medical system. Please ensure the backend server is running on localhost:5000.');
+        }
+    }
+
+    async function startNewSession() {
+        if (systemStatus !== 'connected') {
+            addMessageToUI('error', 'System is not connected. Please refresh the page and try again.');
+            return false;
+        }
+
+        updateStatusIndicator('connecting', 'Starting session...');
+        try {
+            const response = await fetch(`${API_BASE_URL}/start_session`, { 
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Failed to start session');
+            }
+            
+            const data = await response.json();
+            sessionId = data.session_id;
+            updateStatusIndicator('connected', 'Session Active');
+            console.log('New session started:', sessionId);
+            return true;
+        } catch (error) {
+            console.error('Session start error:', error);
+            sessionId = null;
+            updateStatusIndicator('error', 'Session Failed');
+            addMessageToUI('error', `Could not start session: ${error.message}`);
+            return false;
+        }
+    }
+
+    // --- EVENT LISTENERS ---
+    function setupEventListeners() {
+        // Text input handling
+        if (sendBtn) sendBtn.addEventListener('click', handleTextInput);
+        if (textInput) {
+            textInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    handleTextInput();
+                }
+            });
+        }
+
+        // Mode switching
+        if (modeTextBtn) modeTextBtn.addEventListener('click', () => switchMode('text'));
+        if (modeVoiceBtn) modeVoiceBtn.addEventListener('click', () => switchMode('voice'));
+        if (modeVideoBtn) modeVideoBtn.addEventListener('click', () => switchMode('video'));
+
+        // Voice controls
+        if (micBtn) micBtn.addEventListener('click', toggleListening);
+        if (continuousToggle) {
+            continuousToggle.addEventListener('change', (e) => {
+                isContinuousMode = e.target.checked;
+                if (recognition) {
+                    recognition.continuous = isContinuousMode;
+                }
+            });
+        }
+
+        // File upload (optional)
+        if (fileUploadBtn && fileInput) {
+            fileUploadBtn.addEventListener('click', () => fileInput.click());
+            fileInput.addEventListener('change', handleFileUpload);
+        }
+
+        // Speech recognition events
+        if (recognition) {
+            recognition.onstart = () => {
+                isListening = true;
+                if (micBtn) {
+                    micBtn.classList.add('listening');
+                    micBtn.innerHTML = '<i class="fas fa-stop"></i>';
+                }
+                updateStatusIndicator('listening', 'Listening...');
+            };
+
+            recognition.onend = () => {
+                isListening = false;
+                if (micBtn) {
+                    micBtn.classList.remove('listening');
+                    micBtn.innerHTML = '<i class="fas fa-microphone"></i>';
+                }
+                updateStatusIndicator('connected', 'Session Active');
+                
+                if (isContinuousMode && currentMode !== 'text') {
+                    setTimeout(() => recognition.start(), 1000);
+                }
+            };
+
+            recognition.onresult = (event) => {
+                const transcript = event.results[event.results.length - 1][0].transcript.trim();
+                if (textInput) textInput.value = transcript;
+                if (transcript) processUserQuery(transcript);
+            };
+
+            recognition.onerror = (event) => {
+                console.error('Speech recognition error:', event.error);
+                addMessageToUI('error', `Speech recognition error: ${event.error}`);
+                updateStatusIndicator('error', 'Speech Error');
+            };
+        }
+
+        // Image capture modal
+        if (closeModalBtn) {
+            closeModalBtn.addEventListener('click', () => {
+                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
+    }
+
+    // --- CORE LOGIC ---
+    function handleTextInput() {
+        const query = textInput ? textInput.value.trim() : '';
+        if (query) {
+            processUserQuery(query);
+            if (textInput) textInput.value = '';
+        }
+    }
+
+    async function handleFileUpload(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        // Validate file type
+        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
+        if (!allowedTypes.includes(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) {
+            addMessageToUI('error', 'File size too large. Please select an image under 16MB.');
+            return;
+        }
+
+        const query = prompt('Please describe what you want to know about this image:');
+        if (!query) return;
+
+        await processImageQuery(query, file);
+    }
+
+    async function processUserQuery(query) {
+        addMessageToUI('user', query);
+        showLoading(true);
+
+        // Start a new session for every query
+        const sessionStarted = await startNewSession();
+        if (!sessionStarted) {
+            showLoading(false);
+            return;
+        }
+
+        try {
+            const response = await fetch(`${API_BASE_URL}/process_query`, {
+                method: 'POST',
+                headers: { 
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ 
+                    session_id: sessionId, 
+                    query: query 
+                })
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || `Server error: ${response.status}`);
+            }
+
+            if (data.status === 'image_required') {
+                handleImageRequest(data.message, data.category);
+            } else if (data.status === 'success') {
+                handleApiResponse(data.response, data.category);
+            } else {
+                throw new Error('Unexpected response format');
+            }
+
+        } catch (error) {
+            console.error('Error processing query:', error);
+            handleApiResponse(`Sorry, I encountered an error: ${error.message}`, null, true);
+        } finally {
+            showLoading(false);
+        }
+    }
+
+    async function processImageQuery(query, imageFile) {
+        addMessageToUI('user', query);
+        showLoading(true);
+
+        const sessionStarted = await startNewSession();
+        if (!sessionStarted) {
+            showLoading(false);
+            return;
+        }
+
+        try {
+            const formData = new FormData();
+            formData.append('session_id', sessionId);
+            formData.append('photo', imageFile);
+
+            const response = await fetch(`${API_BASE_URL}/process_with_image`, {
+                method: 'POST',
+                body: formData
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || `Server error: ${response.status}`);
+            }
+
+            if (data.status === 'success') {
+                handleApiResponse(data.response, data.category);
+            } else {
+                throw new Error('Unexpected response format');
+            }
+
+        } catch (error) {
+            console.error('Error processing image query:', error);
+            handleApiResponse(`Sorry, I couldn't process the image: ${error.message}`, null, true);
+        } finally {
+            showLoading(false);
+        }
+    }
+
+    function handleApiResponse(responseData, category, isError = false) {
+        let message = '';
+        
+        if (isError) {
+            message = responseData;
+        } else {
+            // Handle different response formats from the integrated backend
+            if (typeof responseData === 'string') {
+                message = responseData;
+            } else if (responseData && responseData.response) {
+                message = responseData.response;
+            } else if (responseData && responseData.data) {
+                message = responseData.data;
+            } else {
+                message = JSON.stringify(responseData, null, 2);
+            }
+        }
+
+        const type = isError ? 'error' : 'ai';
+        addMessageToUI(type, message, category);
+        
+        // Add category info if available
+        if (category && !isError) {
+            const categoryInfo = getCategoryInfo(category);
+            if (categoryInfo) {
+                addMessageToUI('system', categoryInfo);
+            }
+        }
+        
+        // Text-to-speech for voice/video modes
+        if (!isError && (currentMode === 'voice' || currentMode === 'video')) {
+            speak(message);
+        }
+    }
+
+    function getCategoryInfo(category) {
+        const categoryMap = {
+            'disease_query': 'Category: General Disease Information',
+            'medicine_info': 'Category: Medicine Information & Analysis',
+            'skin_disease': 'Category: Skin Condition Analysis',
+            'report_reading': 'Category: Medical Report Interpretation'
+        };
+        return categoryMap[category] || null;
+    }
+
+    // --- UI & STATE MANAGEMENT ---
+    function updateStatusIndicator(status, message) {
+        if (!statusIndicator) return;
+        
+        const colors = {
+            'ready': '#cccccc',
+            'connected': '#76ff03',
+            'connecting': '#ffeb3b',
+            'listening': '#2196f3',
+            'error': '#ff4d4d',
+            'disconnected': '#ff9800'
+        };
+
+        statusIndicator.textContent = `● ${message}`;
+        statusIndicator.style.color = colors[status] || '#cccccc';
+    }
+
+    function switchMode(newMode) {
+        if (currentMode === newMode) return;
+        
+        // Cleanup current mode
+        if (currentMode === 'video') stopCamera();
+        if (isListening && recognition) recognition.stop();
+
+        currentMode = newMode;
+        
+        // Update UI
+        document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
+        const newModeBtn = document.getElementById(`mode-${newMode}`);
+        if (newModeBtn) newModeBtn.classList.add('active');
+
+        // Mode-specific setup
+        switch (newMode) {
+            case 'text':
+                document.body.classList.remove('body-video-mode');
+                if (voiceControls) voiceControls.classList.add('hidden');
+                if (micBtn) micBtn.classList.add('hidden');
+                if (sendBtn) sendBtn.classList.remove('hidden');
+                if (textInput) textInput.classList.remove('hidden');
+                if (videoFeed) videoFeed.style.display = 'none';
+                break;
+
+            case 'voice':
+                document.body.classList.remove('body-video-mode');
+                if (voiceControls) voiceControls.classList.remove('hidden');
+                if (micBtn) micBtn.classList.remove('hidden');
+                if (sendBtn) sendBtn.classList.add('hidden');
+                if (textInput) textInput.classList.add('hidden');
+                if (videoFeed) videoFeed.style.display = 'none';
+                break;
+
+            case 'video':
+                document.body.classList.add('body-video-mode');
+                if (voiceControls) voiceControls.classList.remove('hidden');
+                if (micBtn) micBtn.classList.remove('hidden');
+                if (sendBtn) sendBtn.classList.add('hidden');
+                if (textInput) textInput.classList.add('hidden');
+                if (videoFeed) videoFeed.style.display = 'block';
+                startCamera();
+                break;
+        }
+
+        addMessageToUI('system', `Switched to ${newMode} mode`);
+    }
+
+    function addMessageToUI(sender, text, category = null) {
+        if (!chatBox) return;
+
+        const messageDiv = document.createElement('div');
+        messageDiv.classList.add('message', `${sender}-message`);
+        
+        // Add category class if provided
+        if (category) {
+            messageDiv.classList.add(`category-${category}`);
+        }
+        
+        // Handle different message types
+        if (sender === 'system') {
+            messageDiv.style.fontStyle = 'italic';
+            messageDiv.style.color = '#888';
+            messageDiv.style.fontSize = '0.9em';
+        }
+        
+        messageDiv.textContent = text;
+        chatBox.appendChild(messageDiv);
+        chatBox.scrollTop = chatBox.scrollHeight;
+        saveHistory();
+    }
+    
+    function showLoading(show) {
+        if (loadingIndicator) {
+            loadingIndicator.style.display = show ? 'flex' : 'none';
+        }
+    }
+
+    // --- VOICE & VIDEO ---
+    function toggleListening() {
+        if (!recognition) {
+            addMessageToUI('error', 'Speech recognition is not supported in this browser.');
+            return;
+        }
+
+        if (isListening) {
+            recognition.stop();
+        } else {
+            recognition.start();
+        }
+    }
+
+    function speak(text) {
+        if (!synth || synth.speaking) {
+            console.warn('Speech synthesis not available or already speaking');
+            return;
+        }
+        
+        if (text && text.trim() !== '') {
+            const utterance = new SpeechSynthesisUtterance(text);
+            
+            // Try to find a female voice
+            const voices = synth.getVoices();
+            const femaleVoice = voices.find(voice => 
+                voice.name.toLowerCase().includes('female') || 
+                voice.gender === 'female' ||
+                voice.name.toLowerCase().includes('zira') ||
+                voice.name.toLowerCase().includes('hazel')
+            );
+            
+            if (femaleVoice) utterance.voice = femaleVoice;
+            
+            // Apply voice settings
+            if (pitchSlider) utterance.pitch = parseFloat(pitchSlider.value);
+            if (rateSlider) utterance.rate = parseFloat(rateSlider.value);
+            
+            utterance.onerror = (event) => {
+                console.error('Speech synthesis error:', event.error);
+            };
+            
+            synth.speak(utterance);
+        }
+    }
+
+    async function startCamera() {
+        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');
+        } catch (err) {
+            console.error("Error accessing camera:", err);
+            addMessageToUI('error', 'Could not access the camera. Please grant permission and try again.');
+            switchMode('voice');
+        }
+    }
+
+    function stopCamera() {
+        if (videoStream) {
+            videoStream.getTracks().forEach(track => track.stop());
+            if (videoFeed) videoFeed.srcObject = null;
+            videoStream = null;
+            addMessageToUI('system', 'Camera deactivated');
+        }
+    }
+    
+    function handleImageRequest(message, 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.");
+        } else {
+            if (imageModal) imageModal.classList.remove('hidden');
+        }
+    }
+
+    async function captureAndSendImage() {
+        if (!videoStream || !sessionId) {
+            addMessageToUI('error', 'Cannot capture image. Video stream or session is not active.');
+            return;
+        }
+
+        if (!videoFeed || !canvas) {
+            addMessageToUI('error', 'Video capture elements not found.');
+            return;
+        }
+        
+        const videoTrack = videoStream.getVideoTracks()[0];
+        const settings = videoTrack.getSettings();
+        canvas.width = settings.width || 640;
+        canvas.height = settings.height || 480;
+        
+        const context = canvas.getContext('2d');
+        context.drawImage(videoFeed, 0, 0, canvas.width, canvas.height);
+
+        canvas.toBlob(async (blob) => {
+            if (!blob) {
+                addMessageToUI('error', 'Failed to capture image.');
+                return;
+            }
+
+            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`, {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const data = await response.json();
+                
+                if (!response.ok) {
+                    throw new Error(data.error || 'Image processing failed');
+                }
+
+                if (data.status === 'success') {
+                    handleApiResponse(data.response, data.category);
+                } else {
+                    throw new Error('Unexpected response format');
+                }
+
+            } catch (error) {
+                console.error('Error processing captured image:', error);
+                handleApiResponse(`Sorry, I couldn't process the captured image: ${error.message}`, null, true);
+            } finally {
+                showLoading(false);
+            }
+        }, 'image/jpeg', 0.8);
+    }
+
+    // --- LOCAL STORAGE ---
+    function saveHistory() {
+        if (chatBox) {
+            try {
+                localStorage.setItem('medibotChatHistory', chatBox.innerHTML);
+            } catch (error) {
+                console.warn('Could not save chat history:', error);
+            }
+        }
+    }
+
+    function loadHistory() {
+        try {
+            const history = localStorage.getItem('medibotChatHistory');
+            if (history && chatBox) {
+                chatBox.innerHTML = history;
+                chatBox.scrollTop = chatBox.scrollHeight;
+            }
+        } catch (error) {
+            console.warn('Could not load chat history:', error);
+        }
+    }
+
+    function clearHistory() {
+        if (chatBox) {
+            chatBox.innerHTML = '';
+            localStorage.removeItem('medibotChatHistory');
+            addMessageToUI('system', 'Chat history cleared');
+        }
+    }
+
+    // --- UTILITY FUNCTIONS ---
+    function downloadKnowledgeBase() {
+        addMessageToUI('system', 'Use the upload endpoints to add knowledge base files to the system.');
+    }
+
+    // --- EXPOSE FUNCTIONS TO GLOBAL SCOPE (for debugging) ---
+    window.medibotDebug = {
+        clearHistory,
+        checkSystemHealth,
+        switchMode,
+        getCurrentMode: () => currentMode,
+        getSessionId: () => sessionId,
+        getSystemStatus: () => systemStatus
+    };
+
+    // --- START THE APP ---
+    initializeApp();
 });