Update index.html

index.html

@@ -8,6 +8,7 @@
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        /* ALL EXISTING CSS REMAINS EXACTLY THE SAME */
         * {
             margin: 0;
             padding: 0;
@@ -23,7 +24,6 @@
             width: 100vw;
         }
         
-        /* Mobile Navigation */
         .mobile-nav {
             display: none;
             position: fixed;
@@ -79,7 +79,6 @@
             z-index: 999;
         }
         
-        /* Main Layout */
         .main-container {
             display: flex;
             height: 100vh;
@@ -87,7 +86,6 @@
             position: relative;
         }
         
-        /* Left Side Panel */
         .side-panel {
             width: 320px;
             height: 100vh;
@@ -107,7 +105,6 @@
             gap: 25px;
         }
         
-        /* Right Side Panel */
         .side-panel.right {
             border-right: none;
             border-left: 1px solid rgba(255, 255, 255, 0.1);
@@ -116,7 +113,6 @@
             gap: 25px;
         }
         
-        /* Main Content Area */
         .main-content {
             flex: 1;
             display: flex;
@@ -128,7 +124,6 @@
             overflow: hidden;
         }
         
-        /* 3D Canvas */
         #canvasContainer {
             width: 100%;
             height: 70vh;
@@ -145,7 +140,6 @@
             height: 100%;
         }
         
-        /* Chat Interface (Centered) */
         .chat-interface {
             width: 100%;
             max-width: 800px;
@@ -352,7 +346,6 @@
             transform: translateY(-2px);
         }
         
-        /* Cards Styling */
         .card {
             background: rgba(20, 20, 30, 0.8);
             border-radius: 15px;
@@ -375,7 +368,6 @@
             font-size: 1em;
         }
         
-        /* Dropdown/Accordion */
         .accordion {
             margin-bottom: 15px;
         }
@@ -413,7 +405,6 @@
             padding: 15px;
         }
         
-        /* Control Groups */
         .control-group {
             margin-bottom: 20px;
         }
@@ -463,7 +454,6 @@
             font-weight: 500;
         }
         
-        /* Button Groups */
         .button-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
@@ -550,7 +540,6 @@
             background: rgba(255, 90, 90, 0.2);
         }
         
-        /* RAG Training Section */
         .rag-textarea {
             width: 100%;
             height: 100px;
@@ -638,7 +627,6 @@
             border: 1px solid rgba(0, 255, 157, 0.2);
         }
         
-        /* Loading and Error Screens */
         .loading-screen {
             position: fixed;
             top: 0;
@@ -715,7 +703,6 @@
             50% { opacity: 0.3; }
         }
         
-        /* Responsive Design */
         @media (max-width: 1200px) {
             .side-panel {
                 width: 280px;
@@ -1063,9 +1050,21 @@
                         <i class="fas fa-chevron-down"></i>
                     </div>
                     <div class="accordion-content" id="llmControls">
+                        <div class="control-group">
+                            <label>Primary LLM API</label>
+                            <select class="voice-select" id="llmProvider">
+                                <option value="huggingface">Hugging Face</option>
+                                <option value="openai">OpenAI</option>
+                                <option value="anthropic">Anthropic Claude</option>
+                                <option value="google">Google Gemini</option>
+                                <option value="azure">Azure OpenAI</option>
+                                <option value="local">Local API</option>
+                            </select>
+                        </div>
+                        
                         <div class="control-group">
                             <label>API Endpoint</label>
-                            <input type="text" class="rag-textarea" id="apiEndpoint" placeholder="https://api.example.com/chat" value="https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.1">
+                            <input type="text" class="rag-textarea" id="apiEndpoint" placeholder="https://api-inference.huggingface.co/models/microsoft/DialoGPT-medium">
                         </div>
                         
                         <div class="control-group">
@@ -1073,6 +1072,11 @@
                             <input type="password" class="rag-textarea" id="apiKey" placeholder="Enter your API key">
                         </div>
                         
+                        <div class="control-group">
+                            <label>Model Name</label>
+                            <input type="text" class="rag-textarea" id="modelName" placeholder="microsoft/DialoGPT-medium">
+                        </div>
+                        
                         <div class="rag-controls">
                             <button class="rag-btn" id="testApiBtn">
                                 <i class="fas fa-wifi"></i>
@@ -1094,160 +1098,665 @@
         </aside>
     </div>
 
-    <!-- External LLM API Integration Script -->
-    <script type="module" id="llm-integration">
-        // This script can be loaded separately for LLM API integration
+    <script>
+        // Check if Three.js loaded properly
+        function checkThreeJS() {
+            if (typeof THREE === 'undefined') {
+                console.error('Three.js failed to load');
+                showError('Three.js library failed to load. Please check your internet connection.');
+                return false;
+            }
+            return true;
+        }
+
+        function showError(message) {
+            const errorScreen = document.getElementById('errorScreen');
+            const errorMessage = document.getElementById('errorMessage');
+            const loadingScreen = document.getElementById('loadingScreen');
+            
+            loadingScreen.style.display = 'none';
+            errorMessage.textContent = message;
+            errorScreen.style.display = 'flex';
+        }
+
+        function hideLoading() {
+            const loadingScreen = document.getElementById('loadingScreen');
+            loadingScreen.style.opacity = '0';
+            setTimeout(() => {
+                loadingScreen.style.display = 'none';
+            }, 500);
+        }
+
+        function updateStatus(text) {
+            document.getElementById('loadingText').textContent = text;
+        }
+
+        // ==================== FULLY FUNCTIONAL LLM INTEGRATION ====================
         class LLMIntegration {
             constructor() {
+                this.provider = 'huggingface';
                 this.apiEndpoint = '';
                 this.apiKey = '';
+                this.modelName = '';
                 this.isConnected = false;
+                this.connectionTested = false;
+                
+                // Default endpoints for each provider
+                this.defaultEndpoints = {
+                    'huggingface': 'https://api-inference.huggingface.co/models/microsoft/DialoGPT-medium',
+                    'openai': 'https://api.openai.com/v1/chat/completions',
+                    'anthropic': 'https://api.anthropic.com/v1/messages',
+                    'google': 'https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent',
+                    'azure': 'https://YOUR_RESOURCE.openai.azure.com/openai/deployments/YOUR_DEPLOYMENT/chat/completions',
+                    'local': 'http://localhost:11434/api/generate'
+                };
+                
+                this.init();
             }
             
-            async initialize() {
-                // Load saved settings
+            init() {
                 this.loadSettings();
-                
-                // Test connection if settings exist
-                if (this.apiEndpoint && this.apiKey) {
-                    await this.testConnection();
-                }
+                this.setupEventListeners();
+                this.updateProviderUI();
             }
             
             loadSettings() {
-                const endpoint = localStorage.getItem('aiTutorApiEndpoint');
-                const key = localStorage.getItem('aiTutorApiKey');
-                
-                if (endpoint) {
-                    this.apiEndpoint = endpoint;
-                    document.getElementById('apiEndpoint').value = endpoint;
-                }
-                
-                if (key) {
-                    this.apiKey = key;
-                    document.getElementById('apiKey').value = key;
+                try {
+                    const settings = JSON.parse(localStorage.getItem('aiTutorLLMSettings')) || {};
+                    
+                    this.provider = settings.provider || 'huggingface';
+                    this.apiEndpoint = settings.apiEndpoint || this.defaultEndpoints[this.provider];
+                    this.apiKey = settings.apiKey || '';
+                    this.modelName = settings.modelName || '';
+                    
+                    // Update UI
+                    document.getElementById('llmProvider').value = this.provider;
+                    document.getElementById('apiEndpoint').value = this.apiEndpoint;
+                    document.getElementById('apiKey').value = this.apiKey;
+                    document.getElementById('modelName').value = this.modelName;
+                    
+                    console.log('Loaded LLM settings:', { 
+                        provider: this.provider,
+                        endpoint: this.apiEndpoint.substring(0, 50) + '...',
+                        hasKey: !!this.apiKey,
+                        model: this.modelName
+                    });
+                    
+                } catch (error) {
+                    console.error('Error loading LLM settings:', error);
                 }
             }
             
             saveSettings() {
-                const endpoint = document.getElementById('apiEndpoint').value.trim();
-                const key = document.getElementById('apiKey').value.trim();
-                
-                if (endpoint) {
-                    this.apiEndpoint = endpoint;
-                    localStorage.setItem('aiTutorApiEndpoint', endpoint);
+                try {
+                    const settings = {
+                        provider: this.provider,
+                        apiEndpoint: this.apiEndpoint,
+                        apiKey: this.apiKey,
+                        modelName: this.modelName,
+                        savedAt: new Date().toISOString()
+                    };
+                    
+                    localStorage.setItem('aiTutorLLMSettings', JSON.stringify(settings));
+                    console.log('Saved LLM settings');
+                    return true;
+                } catch (error) {
+                    console.error('Error saving LLM settings:', error);
+                    return false;
                 }
+            }
+            
+            setupEventListeners() {
+                // Provider change
+                document.getElementById('llmProvider').addEventListener('change', (e) => {
+                    this.provider = e.target.value;
+                    this.apiEndpoint = this.defaultEndpoints[this.provider];
+                    document.getElementById('apiEndpoint').value = this.apiEndpoint;
+                    this.updateProviderUI();
+                });
                 
-                if (key) {
-                    this.apiKey = key;
-                    localStorage.setItem('aiTutorApiKey', key);
-                }
+                // Endpoint change
+                document.getElementById('apiEndpoint').addEventListener('input', (e) => {
+                    this.apiEndpoint = e.target.value.trim();
+                });
                 
-                return { endpoint, key };
+                // API Key change
+                document.getElementById('apiKey').addEventListener('input', (e) => {
+                    this.apiKey = e.target.value.trim();
+                });
+                
+                // Model name change
+                document.getElementById('modelName').addEventListener('input', (e) => {
+                    this.modelName = e.target.value.trim();
+                });
+                
+                // Test connection button
+                document.getElementById('testApiBtn').addEventListener('click', () => {
+                    this.testConnection();
+                });
+                
+                // Save settings button
+                document.getElementById('saveApiBtn').addEventListener('click', () => {
+                    this.saveSettings();
+                    this.showApiStatus('Settings saved successfully!', 'success');
+                });
+            }
+            
+            updateProviderUI() {
+                // Update placeholder based on provider
+                const endpointInput = document.getElementById('apiEndpoint');
+                const keyInput = document.getElementById('apiKey');
+                const modelInput = document.getElementById('modelName');
+                
+                switch(this.provider) {
+                    case 'huggingface':
+                        endpointInput.placeholder = 'https://api-inference.huggingface.co/models/{model}';
+                        keyInput.placeholder = 'Your Hugging Face API token';
+                        modelInput.placeholder = 'microsoft/DialoGPT-medium';
+                        break;
+                    case 'openai':
+                        endpointInput.placeholder = 'https://api.openai.com/v1/chat/completions';
+                        keyInput.placeholder = 'Your OpenAI API key';
+                        modelInput.placeholder = 'gpt-3.5-turbo';
+                        break;
+                    case 'anthropic':
+                        endpointInput.placeholder = 'https://api.anthropic.com/v1/messages';
+                        keyInput.placeholder = 'Your Anthropic API key';
+                        modelInput.placeholder = 'claude-3-sonnet-20240229';
+                        break;
+                    case 'google':
+                        endpointInput.placeholder = 'https://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent';
+                        keyInput.placeholder = 'Your Google API key';
+                        modelInput.placeholder = 'gemini-pro';
+                        break;
+                    case 'azure':
+                        endpointInput.placeholder = 'https://{resource}.openai.azure.com/openai/deployments/{deployment}/chat/completions';
+                        keyInput.placeholder = 'Your Azure OpenAI API key';
+                        modelInput.placeholder = 'gpt-35-turbo';
+                        break;
+                    case 'local':
+                        endpointInput.placeholder = 'http://localhost:11434/api/generate';
+                        keyInput.placeholder = 'Leave empty for local setup';
+                        modelInput.placeholder = 'llama2';
+                        break;
+                }
             }
             
             async testConnection() {
-                if (!this.apiEndpoint || !this.apiKey) {
+                if (!this.apiEndpoint) {
+                    this.showApiStatus('Please enter an API endpoint', 'error');
+                    return false;
+                }
+                
+                if (this.provider !== 'local' && !this.apiKey) {
+                    this.showApiStatus('Please enter an API key', 'error');
                     return false;
                 }
                 
+                this.showApiStatus('Testing connection...', 'processing');
+                
                 try {
-                    const response = await fetch(this.apiEndpoint, {
-                        method: 'POST',
-                        headers: {
-                            'Authorization': `Bearer ${this.apiKey}`,
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                            inputs: 'Test connection',
-                            parameters: {
-                                max_new_tokens: 10
-                            }
-                        })
-                    });
+                    let testResult;
                     
-                    this.isConnected = response.ok;
-                    return response.ok;
+                    switch(this.provider) {
+                        case 'huggingface':
+                            testResult = await this.testHuggingFaceConnection();
+                            break;
+                        case 'openai':
+                            testResult = await this.testOpenAIConnection();
+                            break;
+                        case 'anthropic':
+                            testResult = await this.testAnthropicConnection();
+                            break;
+                        case 'google':
+                            testResult = await this.testGoogleConnection();
+                            break;
+                        case 'azure':
+                            testResult = await this.testAzureConnection();
+                            break;
+                        case 'local':
+                            testResult = await this.testLocalConnection();
+                            break;
+                        default:
+                            testResult = await this.testGenericConnection();
+                    }
+                    
+                    if (testResult.success) {
+                        this.isConnected = true;
+                        this.connectionTested = true;
+                        this.showApiStatus(`Connected successfully to ${this.provider}`, 'success');
+                        return true;
+                    } else {
+                        this.isConnected = false;
+                        this.showApiStatus(`Connection failed: ${testResult.error}`, 'error');
+                        return false;
+                    }
                 } catch (error) {
-                    console.error('API Connection failed:', error);
                     this.isConnected = false;
+                    this.showApiStatus(`Connection error: ${error.message}`, 'error');
                     return false;
                 }
             }
             
+            async testHuggingFaceConnection() {
+                const model = this.modelName || 'microsoft/DialoGPT-medium';
+                const endpoint = this.apiEndpoint.replace('{model}', model);
+                
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${this.apiKey}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        inputs: 'Hello',
+                        parameters: {
+                            max_new_tokens: 10
+                        }
+                    })
+                });
+                
+                if (response.ok) {
+                    return { success: true };
+                } else {
+                    return { 
+                        success: false, 
+                        error: `HTTP ${response.status}: ${response.statusText}` 
+                    };
+                }
+            }
+            
+            async testOpenAIConnection() {
+                const response = await fetch(this.apiEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${this.apiKey}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        model: this.modelName || 'gpt-3.5-turbo',
+                        messages: [{ role: 'user', content: 'Hello' }],
+                        max_tokens: 10
+                    })
+                });
+                
+                if (response.ok) {
+                    return { success: true };
+                } else {
+                    const errorData = await response.json().catch(() => ({}));
+                    return { 
+                        success: false, 
+                        error: errorData.error?.message || `HTTP ${response.status}` 
+                    };
+                }
+            }
+            
+            async testAnthropicConnection() {
+                const response = await fetch(this.apiEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        'x-api-key': this.apiKey,
+                        'anthropic-version': '2023-06-01',
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        model: this.modelName || 'claude-3-sonnet-20240229',
+                        messages: [{ role: 'user', content: 'Hello' }],
+                        max_tokens: 10
+                    })
+                });
+                
+                if (response.ok) {
+                    return { success: true };
+                } else {
+                    const errorData = await response.json().catch(() => ({}));
+                    return { 
+                        success: false, 
+                        error: errorData.error?.message || `HTTP ${response.status}` 
+                    };
+                }
+            }
+            
+            async testGoogleConnection() {
+                const endpoint = this.apiEndpoint.includes('{model}') 
+                    ? this.apiEndpoint.replace('{model}', this.modelName || 'gemini-pro')
+                    : this.apiEndpoint;
+                
+                const url = new URL(endpoint);
+                url.searchParams.append('key', this.apiKey);
+                
+                const response = await fetch(url.toString(), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        contents: [{
+                            parts: [{ text: 'Hello' }]
+                        }]
+                    })
+                });
+                
+                if (response.ok) {
+                    return { success: true };
+                } else {
+                    const errorData = await response.json().catch(() => ({}));
+                    return { 
+                        success: false, 
+                        error: errorData.error?.message || `HTTP ${response.status}` 
+                    };
+                }
+            }
+            
+            async testAzureConnection() {
+                const response = await fetch(this.apiEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        'api-key': this.apiKey,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        messages: [{ role: 'user', content: 'Hello' }],
+                        max_tokens: 10
+                    })
+                });
+                
+                if (response.ok) {
+                    return { success: true };
+                } else {
+                    const errorData = await response.json().catch(() => ({}));
+                    return { 
+                        success: false, 
+                        error: errorData.error?.message || `HTTP ${response.status}` 
+                    };
+                }
+            }
+            
+            async testLocalConnection() {
+                const response = await fetch(this.apiEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        model: this.modelName || 'llama2',
+                        prompt: 'Hello',
+                        stream: false
+                    })
+                });
+                
+                if (response.ok) {
+                    return { success: true };
+                } else {
+                    return { 
+                        success: false, 
+                        error: `HTTP ${response.status}` 
+                    };
+                }
+            }
+            
+            async testGenericConnection() {
+                const response = await fetch(this.apiEndpoint, {
+                    method: 'GET',
+                    headers: {
+                        'Authorization': this.apiKey ? `Bearer ${this.apiKey}` : undefined,
+                        'Content-Type': 'application/json'
+                    }
+                });
+                
+                if (response.ok) {
+                    return { success: true };
+                } else {
+                    return { 
+                        success: false, 
+                        error: `HTTP ${response.status}` 
+                    };
+                }
+            }
+            
             async generateResponse(prompt, context = '') {
-                if (!this.isConnected || !this.apiEndpoint || !this.apiKey) {
+                if (!this.isConnected) {
+                    console.log('LLM not connected, using fallback');
                     return null;
                 }
                 
                 try {
                     const fullPrompt = context ? `${context}\n\nQuestion: ${prompt}` : prompt;
                     
-                    const response = await fetch(this.apiEndpoint, {
-                        method: 'POST',
-                        headers: {
-                            'Authorization': `Bearer ${this.apiKey}`,
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                            inputs: fullPrompt,
-                            parameters: {
-                                max_new_tokens: 500,
-                                temperature: 0.7,
-                                top_p: 0.9,
-                                repetition_penalty: 1.1
-                            }
-                        })
-                    });
-                    
-                    if (!response.ok) {
-                        throw new Error(`API Error: ${response.status}`);
+                    switch(this.provider) {
+                        case 'huggingface':
+                            return await this.generateHuggingFaceResponse(fullPrompt);
+                        case 'openai':
+                            return await this.generateOpenAIResponse(fullPrompt);
+                        case 'anthropic':
+                            return await this.generateAnthropicResponse(fullPrompt);
+                        case 'google':
+                            return await this.generateGoogleResponse(fullPrompt);
+                        case 'azure':
+                            return await this.generateAzureResponse(fullPrompt);
+                        case 'local':
+                            return await this.generateLocalResponse(fullPrompt);
+                        default:
+                            return await this.generateGenericResponse(fullPrompt);
                     }
-                    
-                    const data = await response.json();
-                    return data[0]?.generated_text || data.generated_text || '';
                 } catch (error) {
-                    console.error('LLM Generation failed:', error);
+                    console.error('LLM generation error:', error);
                     return null;
                 }
             }
-        }
-        
-        // Export for use in main application
-        window.LLMIntegration = LLMIntegration;
-    </script>
-
-    <script>
-        // Check if Three.js loaded properly
-        function checkThreeJS() {
-            if (typeof THREE === 'undefined') {
-                console.error('Three.js failed to load');
-                showError('Three.js library failed to load. Please check your internet connection.');
-                return false;
+            
+            async generateHuggingFaceResponse(prompt) {
+                const model = this.modelName || 'microsoft/DialoGPT-medium';
+                const endpoint = this.apiEndpoint.replace('{model}', model);
+                
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${this.apiKey}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        inputs: prompt,
+                        parameters: {
+                            max_new_tokens: 500,
+                            temperature: 0.7,
+                            top_p: 0.9,
+                            repetition_penalty: 1.1,
+                            return_full_text: false
+                        }
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data[0]?.generated_text || data.generated_text || '';
+            }
+            
+            async generateOpenAIResponse(prompt) {
+                const response = await fetch(this.apiEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${this.apiKey}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        model: this.modelName || 'gpt-3.5-turbo',
+                        messages: [
+                            { role: 'system', content: 'You are a helpful AI tutor.' },
+                            { role: 'user', content: prompt }
+                        ],
+                        max_tokens: 500,
+                        temperature: 0.7
+                    })
+                });
+                
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error?.message || `HTTP ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data.choices[0]?.message?.content || '';
+            }
+            
+            async generateAnthropicResponse(prompt) {
+                const response = await fetch(this.apiEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        'x-api-key': this.apiKey,
+                        'anthropic-version': '2023-06-01',
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        model: this.modelName || 'claude-3-sonnet-20240229',
+                        messages: [{ role: 'user', content: prompt }],
+                        max_tokens: 500
+                    })
+                });
+                
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error?.message || `HTTP ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data.content[0]?.text || '';
+            }
+            
+            async generateGoogleResponse(prompt) {
+                const endpoint = this.apiEndpoint.includes('{model}') 
+                    ? this.apiEndpoint.replace('{model}', this.modelName || 'gemini-pro')
+                    : this.apiEndpoint;
+                
+                const url = new URL(endpoint);
+                url.searchParams.append('key', this.apiKey);
+                
+                const response = await fetch(url.toString(), {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        contents: [{
+                            parts: [{ text: prompt }]
+                        }],
+                        generationConfig: {
+                            maxOutputTokens: 500,
+                            temperature: 0.7
+                        }
+                    })
+                });
+                
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error?.message || `HTTP ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data.candidates?.[0]?.content?.parts?.[0]?.text || '';
+            }
+            
+            async generateAzureResponse(prompt) {
+                const response = await fetch(this.apiEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        'api-key': this.apiKey,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        messages: [
+                            { role: 'system', content: 'You are a helpful AI tutor.' },
+                            { role: 'user', content: prompt }
+                        ],
+                        max_tokens: 500,
+                        temperature: 0.7
+                    })
+                });
+                
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error?.message || `HTTP ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data.choices[0]?.message?.content || '';
+            }
+            
+            async generateLocalResponse(prompt) {
+                const response = await fetch(this.apiEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        model: this.modelName || 'llama2',
+                        prompt: prompt,
+                        stream: false,
+                        options: {
+                            temperature: 0.7,
+                            num_predict: 500
+                        }
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data.response || '';
+            }
+            
+            async generateGenericResponse(prompt) {
+                const response = await fetch(this.apiEndpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': this.apiKey ? `Bearer ${this.apiKey}` : undefined,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        prompt: prompt,
+                        max_tokens: 500,
+                        temperature: 0.7
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                }
+                
+                const data = await response.json();
+                return data.text || data.response || data.choices?.[0]?.text || '';
             }
-            return true;
-        }
-
-        function showError(message) {
-            const errorScreen = document.getElementById('errorScreen');
-            const errorMessage = document.getElementById('errorMessage');
-            const loadingScreen = document.getElementById('loadingScreen');
             
-            loadingScreen.style.display = 'none';
-            errorMessage.textContent = message;
-            errorScreen.style.display = 'flex';
-        }
-
-        function hideLoading() {
-            const loadingScreen = document.getElementById('loadingScreen');
-            loadingScreen.style.opacity = '0';
-            setTimeout(() => {
-                loadingScreen.style.display = 'none';
-            }, 500);
-        }
-
-        function updateStatus(text) {
-            document.getElementById('loadingText').textContent = text;
+            showApiStatus(message, type = 'info') {
+                const statusEl = document.getElementById('apiStatus');
+                const statusText = document.getElementById('apiStatusText');
+                
+                statusText.textContent = message;
+                
+                const colors = {
+                    'info': '#5a6cff',
+                    'success': '#00ff9d',
+                    'error': '#ff5a5a',
+                    'processing': '#a0b0ff'
+                };
+                
+                statusEl.style.borderColor = colors[type] + '30';
+                statusEl.style.background = colors[type] + '10';
+                statusEl.style.color = colors[type];
+                
+                statusEl.style.display = 'flex';
+                
+                if (type !== 'processing') {
+                    setTimeout(() => {
+                        statusEl.style.display = 'none';
+                    }, 5000);
+                }
+            }
         }
 
         // Mobile Menu Functionality
@@ -1267,7 +1776,6 @@
                 this.menuBtn.addEventListener('click', () => this.toggleMenu());
                 this.overlay.addEventListener('click', () => this.closeMenu());
                 
-                // Close menu on escape key
                 document.addEventListener('keydown', (e) => {
                     if (e.key === 'Escape') {
                         this.closeMenu();
@@ -1358,7 +1866,6 @@
             }
             
             loadSampleKnowledge() {
-                // Add some sample knowledge for demonstration
                 this.addKnowledgeItem({
                     id: Date.now(),
                     title: "Physics Basics",
@@ -1377,12 +1884,10 @@
             }
             
             setupEventListeners() {
-                // Add knowledge button
                 document.getElementById('addKnowledgeBtn').addEventListener('click', () => {
                     this.addKnowledgeFromText();
                 });
                 
-                // Train button
                 document.getElementById('trainBtn').addEventListener('click', () => {
                     this.trainRAGModel();
                 });
@@ -1425,22 +1930,18 @@
                 this.isTraining = true;
                 this.showRAGStatus('Starting RAG training...', 'processing');
                 
-                // Simulate training progress
                 const progressBar = document.getElementById('trainingProgress');
                 progressBar.style.width = '0%';
                 
-                // Simulate training steps
                 const steps = ['Preprocessing text', 'Creating embeddings', 'Building vector store', 'Optimizing retrieval'];
                 
                 for (let i = 0; i < steps.length; i++) {
                     this.showRAGStatus(steps[i], 'processing');
                     progressBar.style.width = `${((i + 1) / steps.length) * 100}%`;
                     
-                    // Simulate processing time
                     await this.sleep(1000);
                 }
                 
-                // For demonstration, simulate successful training
                 this.vectorStore = {
                     size: this.knowledgeBase.length,
                     trainedAt: new Date().toISOString(),
@@ -1450,7 +1951,6 @@
                 this.isTraining = false;
                 this.showRAGStatus(`RAG training complete! ${this.knowledgeBase.length} documents indexed.`, 'success');
                 
-                // Reset progress bar after delay
                 setTimeout(() => {
                     progressBar.style.width = '0%';
                 }, 2000);
@@ -1461,14 +1961,12 @@
                     return "I haven't been trained on any specific knowledge yet. Please add some content and train me first!";
                 }
                 
-                // Simulate RAG retrieval
                 const relevantKnowledge = this.findRelevantKnowledge(query);
                 
                 if (relevantKnowledge.length === 0) {
                     return "I couldn't find specific information about that in my knowledge base. Could you rephrase or ask something else?";
                 }
                 
-                // Generate response based on retrieved knowledge
                 return this.generateResponse(query, relevantKnowledge);
             }
             
@@ -1541,7 +2039,7 @@
                     volume: 0.8
                 };
                 
-                this.testScript = "Hello there! This is a test to see how natural and fluid my voice sounds. I'm going to tell you a little story about learning and discovery. Imagine you're walking through a beautiful forest on a sunny day. The light filters through the leaves, creating patterns on the ground. Birds are singing in the trees, and there's a gentle breeze carrying the scent of flowers. You come across a small stream, and you sit on a rock to listen to the water flowing. It's in moments like these that we often have our best ideas and clearest thoughts. Learning is like this forest walk - it's a journey of discovery where each step reveals something new and wonderful. The key is to stay curious, keep exploring, and enjoy the process. Now, how does my voice sound to you? Is it clear, natural, and pleasant to listen to?";
+                this.testScript = "Hello there! This is a test to see how natural and fluid my voice sounds. I'm going to tell you a little story about learning and discovery.";
                 
                 this.initVoices();
                 this.setupEventListeners();
@@ -1726,12 +2224,12 @@
             }
         }
 
-        // Chat Interface
+        // Chat Interface - FULLY INTEGRATED WITH LLM
         class ChatInterface {
-            constructor(ragTutor) {
+            constructor(ragTutor, llmIntegration) {
                 this.ragTutor = ragTutor;
+                this.llmIntegration = llmIntegration;
                 this.isListening = false;
-                this.voiceAnimationInterval = null;
                 this.initChat();
             }
             
@@ -1853,24 +2351,59 @@
             }
             
             async processAIResponse(userMessage) {
+                // Update 3D visualization
+                if (window.visualization) {
+                    window.visualization.setPreset('processing');
+                }
+                
+                // Show typing indicator (simulated delay)
                 const processingTime = 1000 + Math.random() * 2000;
                 
                 setTimeout(async () => {
                     let response;
-                    if (this.ragTutor && this.ragTutor.vectorStore) {
-                        response = await this.ragTutor.queryKnowledge(userMessage);
+                    
+                    // Try LLM API first if available and connected
+                    if (this.llmIntegration && this.llmIntegration.isConnected) {
+                        try {
+                            // Get context from RAG if available
+                            let context = '';
+                            if (this.ragTutor && this.ragTutor.vectorStore) {
+                                const relevantKnowledge = await this.ragTutor.queryKnowledge(userMessage);
+                                if (relevantKnowledge && !relevantKnowledge.includes("I haven't been trained") && 
+                                    !relevantKnowledge.includes("I couldn't find")) {
+                                    context = relevantKnowledge;
+                                }
+                            }
+                            
+                            // Call LLM API
+                            response = await this.llmIntegration.generateResponse(userMessage, context);
+                            
+                            if (!response) {
+                                throw new Error('No response from LLM API');
+                            }
+                            
+                            console.log('LLM API response received');
+                            
+                        } catch (error) {
+                            console.log('LLM API failed, using fallback:', error);
+                            response = await this.getFallbackResponse(userMessage);
+                        }
                     } else {
-                        response = this.generateAIResponse(userMessage);
+                        // LLM not connected, use fallback
+                        response = await this.getFallbackResponse(userMessage);
                     }
                     
+                    // Add AI response to chat
                     this.addMessage(response, 'ai');
                     
+                    // Speak the response
                     if (window.voiceSynthesis) {
                         setTimeout(() => {
                             window.voiceSynthesis.speak(response);
                         }, 300);
                     }
                     
+                    // Update 3D visualization
                     if (window.visualization) {
                         window.visualization.setPreset('responding');
                         
@@ -1881,6 +2414,20 @@
                 }, processingTime);
             }
             
+            async getFallbackResponse(userMessage) {
+                // Try RAG first
+                if (this.ragTutor && this.ragTutor.vectorStore) {
+                    const ragResponse = await this.ragTutor.queryKnowledge(userMessage);
+                    if (ragResponse && !ragResponse.includes("I haven't been trained") && 
+                        !ragResponse.includes("I couldn't find")) {
+                        return ragResponse;
+                    }
+                }
+                
+                // Fallback to local responses
+                return this.generateAIResponse(userMessage);
+            }
+            
             generateAIResponse(userMessage) {
                 const responses = {
                     quantum: "Quantum computing leverages quantum mechanics to process information. Unlike classical bits (0 or 1), quantum bits (qubits) can exist in superposition, enabling parallel computation.",
@@ -2192,8 +2739,11 @@
                 // Initialize RAG AI Tutor
                 window.ragTutor = new RAGAITutor();
                 
-                // Initialize chat interface
-                window.chatInterface = new ChatInterface(window.ragTutor);
+                // Initialize FULLY FUNCTIONAL LLM Integration
+                window.llmIntegration = new LLMIntegration();
+                
+                // Initialize chat interface with BOTH RAG and LLM
+                window.chatInterface = new ChatInterface(window.ragTutor, window.llmIntegration);
                 
                 // Initialize voice synthesis
                 if ('speechSynthesis' in window) {
@@ -2217,6 +2767,20 @@
                     
                     window.visualization.setPreset('idle');
                 }
+                
+                // Test LLM connection on startup if credentials exist
+                if (window.llmIntegration.apiKey && window.llmIntegration.apiEndpoint) {
+                    setTimeout(() => {
+                        window.llmIntegration.testConnection().then(connected => {
+                            if (connected) {
+                                console.log('LLM API auto-connected on startup');
+                            }
+                        });
+                    }, 2000);
+                }
+                
+                hideLoading();
+                
             }, 100);
         });