Update index.html

index.html

@@ -8,7 +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 */
+        /* ALL EXISTING CSS REMAINS EXACTLY THE SAME - Only adding fixes */
         * {
             margin: 0;
             padding: 0;
@@ -346,12 +346,21 @@
             transform: translateY(-2px);
         }
         
+        /* CARD FIX - prevent edge cutting */
         .card {
             background: rgba(20, 20, 30, 0.8);
             border-radius: 15px;
             padding: 20px;
             border: 1px solid rgba(255, 255, 255, 0.1);
             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+            overflow: visible !important; /* Important fix */
+            margin-bottom: 25px;
+            position: relative;
+        }
+        
+        /* Ensure card contents don't overflow */
+        .card > *:not(:last-child) {
+            margin-bottom: 15px;
         }
         
         .card-title {
@@ -562,6 +571,53 @@
             box-shadow: 0 0 0 2px rgba(90, 108, 255, 0.2);
         }
         
+        /* NEW: Document upload styles */
+        .document-upload-area {
+            margin-top: 15px;
+            padding: 15px;
+            background: rgba(20, 20, 30, 0.5);
+            border-radius: 10px;
+            border: 2px dashed rgba(90, 108, 255, 0.3);
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .document-upload-area:hover {
+            background: rgba(20, 20, 30, 0.7);
+            border-color: #5a6cff;
+        }
+        
+        .document-upload-area.dragover {
+            background: rgba(90, 108, 255, 0.1);
+            border-color: #5a6cff;
+        }
+        
+        .upload-icon {
+            font-size: 2em;
+            color: #5a6cff;
+            margin-bottom: 10px;
+        }
+        
+        .upload-text {
+            color: #a0b0ff;
+            margin-bottom: 10px;
+        }
+        
+        .file-input {
+            display: none;
+        }
+        
+        .file-info {
+            margin-top: 10px;
+            padding: 8px;
+            background: rgba(90, 108, 255, 0.1);
+            border-radius: 8px;
+            font-size: 0.85em;
+            color: #a0b0ff;
+            display: none;
+        }
+        
         .rag-controls {
             display: grid;
             grid-template-columns: 1fr 1fr;
@@ -759,6 +815,17 @@
             .chat-messages {
                 height: 250px;
             }
+            
+            /* Mobile card adjustments */
+            .card {
+                padding: 15px;
+                margin-bottom: 20px;
+            }
+            
+            .rag-controls {
+                grid-template-columns: 1fr;
+                gap: 8px;
+            }
         }
         
         @media (max-width: 768px) {
@@ -774,6 +841,14 @@
                 width: 100%;
                 max-width: 350px;
             }
+            
+            .document-upload-area {
+                padding: 12px;
+            }
+            
+            .upload-icon {
+                font-size: 1.5em;
+            }
         }
         
         @media (max-width: 480px) {
@@ -798,6 +873,10 @@
                 min-height: 48px;
                 height: 48px;
             }
+            
+            .button-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
         }
     </style>
 </head>
@@ -892,6 +971,21 @@
                     <div class="accordion-content" id="trainingControls">
                         <textarea class="rag-textarea" id="knowledgeText" placeholder="Add knowledge for AI training..."></textarea>
                         
+                        <!-- NEW: Document Upload Area -->
+                        <div class="document-upload-area" id="documentUploadArea">
+                            <div class="upload-icon">
+                                <i class="fas fa-cloud-upload-alt"></i>
+                            </div>
+                            <div class="upload-text">
+                                Drag & drop documents or click to upload
+                            </div>
+                            <div class="upload-hint">
+                                Supports: PDF, TXT, DOC, DOCX
+                            </div>
+                            <input type="file" id="documentFile" class="file-input" accept=".pdf,.txt,.doc,.docx" multiple>
+                        </div>
+                        <div class="file-info" id="fileInfo"></div>
+                        
                         <div class="rag-controls">
                             <button class="rag-btn" id="addKnowledgeBtn">
                                 <i class="fas fa-plus"></i>
@@ -1077,14 +1171,15 @@
                             <input type="text" class="rag-textarea" id="modelName" placeholder="microsoft/DialoGPT-medium">
                         </div>
                         
+                        <!-- NEW: Apply/Submit Button -->
                         <div class="rag-controls">
                             <button class="rag-btn" id="testApiBtn">
                                 <i class="fas fa-wifi"></i>
                                 Test Connection
                             </button>
-                            <button class="rag-btn primary" id="saveApiBtn">
-                                <i class="fas fa-save"></i>
-                                Save Settings
+                            <button class="rag-btn primary" id="applyApiBtn">
+                                <i class="fas fa-check"></i>
+                                Apply Settings
                             </button>
                         </div>
                         
@@ -1131,7 +1226,7 @@
             document.getElementById('loadingText').textContent = text;
         }
 
-        // ==================== FULLY FUNCTIONAL LLM INTEGRATION ====================
+        // ==================== ENHANCED LLM INTEGRATION ====================
         class LLMIntegration {
             constructor() {
                 this.provider = 'huggingface';
@@ -1140,6 +1235,7 @@
                 this.modelName = '';
                 this.isConnected = false;
                 this.connectionTested = false;
+                this.isApplying = false;
                 
                 // Default endpoints for each provider
                 this.defaultEndpoints = {
@@ -1235,10 +1331,20 @@
                     this.testConnection();
                 });
                 
-                // Save settings button
-                document.getElementById('saveApiBtn').addEventListener('click', () => {
-                    this.saveSettings();
-                    this.showApiStatus('Settings saved successfully!', 'success');
+                // Apply settings button - NEW
+                document.getElementById('applyApiBtn').addEventListener('click', () => {
+                    this.applySettings();
+                });
+                
+                // Also apply on Enter key in API fields
+                const apiFields = ['apiEndpoint', 'apiKey', 'modelName'];
+                apiFields.forEach(fieldId => {
+                    document.getElementById(fieldId).addEventListener('keydown', (e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            this.applySettings();
+                        }
+                    });
                 });
             }
             
@@ -1282,6 +1388,56 @@
                 }
             }
             
+            async applySettings() {
+                if (this.isApplying) return;
+                
+                this.isApplying = true;
+                const applyBtn = document.getElementById('applyApiBtn');
+                const originalText = applyBtn.innerHTML;
+                
+                try {
+                    // Update apply button to show loading
+                    applyBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Applying...';
+                    applyBtn.disabled = true;
+                    
+                    // Save settings first
+                    this.saveSettings();
+                    
+                    // Test connection with new settings
+                    const connected = await this.testConnection();
+                    
+                    if (connected) {
+                        this.showApiStatus('Settings applied and connected successfully!', 'success');
+                        
+                        // Update chat status
+                        if (window.chatInterface && window.chatInterface.chatStatusText) {
+                            window.chatInterface.chatStatusText.textContent = 'Connected to ' + this.provider;
+                        }
+                        
+                        // Update visualization
+                        if (window.visualization) {
+                            window.visualization.setPreset('processing');
+                            setTimeout(() => {
+                                window.visualization.setPreset('idle');
+                            }, 1500);
+                        }
+                    } else {
+                        this.showApiStatus('Settings saved but connection failed', 'warning');
+                    }
+                    
+                } catch (error) {
+                    console.error('Error applying settings:', error);
+                    this.showApiStatus('Error applying settings: ' + error.message, 'error');
+                } finally {
+                    // Reset apply button
+                    setTimeout(() => {
+                        applyBtn.innerHTML = originalText;
+                        applyBtn.disabled = false;
+                        this.isApplying = false;
+                    }, 1000);
+                }
+            }
+            
             async testConnection() {
                 if (!this.apiEndpoint) {
                     this.showApiStatus('Please enter an API endpoint', 'error');
@@ -1850,18 +2006,20 @@
             }
         }
 
-        // RAG AI Tutor System
+        // ENHANCED RAG AI Tutor System with Document Upload
         class RAGAITutor {
             constructor() {
                 this.knowledgeBase = [];
                 this.vectorStore = null;
                 this.isTraining = false;
                 this.currentSession = null;
+                this.uploadedDocuments = [];
                 this.init();
             }
             
             init() {
                 this.setupEventListeners();
+                this.setupDocumentUpload();
                 this.loadSampleKnowledge();
             }
             
@@ -1891,6 +2049,144 @@
                 document.getElementById('trainBtn').addEventListener('click', () => {
                     this.trainRAGModel();
                 });
+                
+                // Enter key in textarea
+                document.getElementById('knowledgeText').addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' && e.ctrlKey) {
+                        e.preventDefault();
+                        this.addKnowledgeFromText();
+                    }
+                });
+            }
+            
+            setupDocumentUpload() {
+                const uploadArea = document.getElementById('documentUploadArea');
+                const fileInput = document.getElementById('documentFile');
+                const fileInfo = document.getElementById('fileInfo');
+                
+                // Click to upload
+                uploadArea.addEventListener('click', () => {
+                    fileInput.click();
+                });
+                
+                // Drag and drop
+                uploadArea.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    uploadArea.classList.add('dragover');
+                });
+                
+                uploadArea.addEventListener('dragleave', () => {
+                    uploadArea.classList.remove('dragover');
+                });
+                
+                uploadArea.addEventListener('drop', (e) => {
+                    e.preventDefault();
+                    uploadArea.classList.remove('dragover');
+                    
+                    if (e.dataTransfer.files.length) {
+                        this.handleFiles(e.dataTransfer.files);
+                    }
+                });
+                
+                // File input change
+                fileInput.addEventListener('change', (e) => {
+                    if (e.target.files.length) {
+                        this.handleFiles(e.target.files);
+                    }
+                });
+            }
+            
+            async handleFiles(files) {
+                const fileInfo = document.getElementById('fileInfo');
+                let fileNames = [];
+                
+                for (let i = 0; i < files.length; i++) {
+                    const file = files[i];
+                    fileNames.push(file.name);
+                    
+                    try {
+                        const content = await this.readFileContent(file);
+                        
+                        const knowledgeItem = {
+                            id: Date.now() + i,
+                            title: file.name,
+                            content: content,
+                            type: "document",
+                            fileType: file.type,
+                            size: file.size,
+                            timestamp: new Date().toISOString()
+                        };
+                        
+                        this.addKnowledgeItem(knowledgeItem);
+                        this.uploadedDocuments.push({
+                            name: file.name,
+                            size: this.formatFileSize(file.size),
+                            type: file.type
+                        });
+                        
+                    } catch (error) {
+                        console.error('Error reading file:', error);
+                        this.showRAGStatus(`Error reading ${file.name}: ${error.message}`, 'error');
+                    }
+                }
+                
+                // Show file info
+                fileInfo.innerHTML = `
+                    <i class="fas fa-file"></i>
+                    Uploaded: ${fileNames.join(', ')}
+                    <br>
+                    <small>${this.uploadedDocuments.length} documents ready for training</small>
+                `;
+                fileInfo.style.display = 'block';
+                
+                this.showRAGStatus(`${fileNames.length} document(s) uploaded successfully!`, 'success');
+                
+                // Update visualization
+                if (window.visualization) {
+                    window.visualization.setPreset('processing');
+                    setTimeout(() => {
+                        window.visualization.setPreset('idle');
+                    }, 1000);
+                }
+            }
+            
+            readFileContent(file) {
+                return new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    
+                    reader.onload = (e) => {
+                        resolve(e.target.result);
+                    };
+                    
+                    reader.onerror = (e) => {
+                        reject(new Error('Failed to read file'));
+                    };
+                    
+                    // Handle different file types
+                    if (file.type === 'application/pdf') {
+                        // For PDF files, we'll extract text (simplified)
+                        reader.readAsArrayBuffer(file);
+                    } else if (file.type.includes('text') || 
+                              file.name.endsWith('.txt') || 
+                              file.name.endsWith('.md')) {
+                        reader.readAsText(file);
+                    } else if (file.type.includes('document') || 
+                              file.name.endsWith('.doc') || 
+                              file.name.endsWith('.docx')) {
+                        // For Word documents, we'll extract text
+                        reader.readAsText(file);
+                    } else {
+                        reject(new Error('Unsupported file type'));
+                    }
+                });
+            }
+            
+            formatFileSize(bytes) {
+                if (bytes === 0) return '0 Bytes';
+                const k = 1024;
+                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+                const i = Math.floor(Math.log(bytes) / Math.log(k));
+                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
             }
             
             addKnowledgeFromText() {
@@ -1915,10 +2211,19 @@
                 this.addKnowledgeItem(knowledgeItem);
                 textArea.value = '';
                 this.showRAGStatus('Knowledge added successfully!', 'success');
+                
+                // Update visualization
+                if (window.visualization) {
+                    window.visualization.setPreset('processing');
+                    setTimeout(() => {
+                        window.visualization.setPreset('idle');
+                    }, 500);
+                }
             }
             
             addKnowledgeItem(item) {
                 this.knowledgeBase.push(item);
+                console.log('Knowledge base updated:', this.knowledgeBase.length, 'items');
             }
             
             async trainRAGModel() {
@@ -1933,23 +2238,49 @@
                 const progressBar = document.getElementById('trainingProgress');
                 progressBar.style.width = '0%';
                 
-                const steps = ['Preprocessing text', 'Creating embeddings', 'Building vector store', 'Optimizing retrieval'];
+                const steps = [
+                    'Preprocessing text...',
+                    'Creating embeddings...', 
+                    'Building vector store...',
+                    'Optimizing retrieval...',
+                    'Finalizing training...'
+                ];
+                
+                // Update visualization for training
+                if (window.visualization) {
+                    window.visualization.setPreset('processing');
+                    window.visualization.params.intensity = 0.8;
+                }
                 
                 for (let i = 0; i < steps.length; i++) {
                     this.showRAGStatus(steps[i], 'processing');
                     progressBar.style.width = `${((i + 1) / steps.length) * 100}%`;
                     
-                    await this.sleep(1000);
+                    await this.sleep(800 + Math.random() * 400);
                 }
                 
                 this.vectorStore = {
                     size: this.knowledgeBase.length,
                     trainedAt: new Date().toISOString(),
-                    model: 'all-MiniLM-L6-v2'
+                    model: 'all-MiniLM-L6-v2',
+                    documents: this.uploadedDocuments.length,
+                    textEntries: this.knowledgeBase.filter(k => k.type === 'text').length
                 };
                 
                 this.isTraining = false;
-                this.showRAGStatus(`RAG training complete! ${this.knowledgeBase.length} documents indexed.`, 'success');
+                this.showRAGStatus(
+                    `RAG training complete! ${this.knowledgeBase.length} items indexed.`, 
+                    'success'
+                );
+                
+                // Update visualization
+                if (window.visualization) {
+                    window.visualization.setPreset('teaching');
+                    setTimeout(() => {
+                        window.visualization.setPreset('idle');
+                        window.visualization.params.intensity = 0.5;
+                    }, 3000);
+                }
                 
                 setTimeout(() => {
                     progressBar.style.width = '0%';
@@ -1973,22 +2304,49 @@
             findRelevantKnowledge(query) {
                 const queryLower = query.toLowerCase();
                 const relevant = [];
+                const scoredItems = [];
                 
+                // Simple keyword matching with scoring
                 for (const item of this.knowledgeBase) {
-                    if (item.content.toLowerCase().includes(queryLower) || 
-                        item.title.toLowerCase().includes(queryLower)) {
-                        relevant.push(item);
-                        
-                        if (relevant.length >= 3) break;
+                    let score = 0;
+                    
+                    // Check title
+                    if (item.title.toLowerCase().includes(queryLower)) {
+                        score += 3;
+                    }
+                    
+                    // Check content
+                    const contentLower = item.content.toLowerCase();
+                    if (contentLower.includes(queryLower)) {
+                        score += 2;
+                    }
+                    
+                    // Check for partial matches
+                    const queryWords = queryLower.split(' ');
+                    for (const word of queryWords) {
+                        if (word.length > 3 && contentLower.includes(word)) {
+                            score += 1;
+                        }
+                    }
+                    
+                    if (score > 0) {
+                        scoredItems.push({ item, score });
                     }
                 }
                 
-                return relevant;
+                // Sort by score
+                scoredItems.sort((a, b) => b.score - a.score);
+                
+                // Return top 3
+                return scoredItems.slice(0, 3).map(s => s.item);
             }
             
             generateResponse(query, relevantKnowledge) {
-                const context = relevantKnowledge.map(item => item.content).join('\n\n');
-                return `Based on my knowledge base:\n\n${context}\n\nRegarding your question "${query}", here's what I can explain...`;
+                const context = relevantKnowledge.map(item => 
+                    `[From: ${item.title}]\n${item.content.substring(0, 300)}${item.content.length > 300 ? '...' : ''}`
+                ).join('\n\n');
+                
+                return `Based on my training knowledge:\n\n${context}\n\nRegarding your question "${query}", I can provide detailed explanations from these sources.`;
             }
             
             showRAGStatus(message, type = 'info') {
@@ -2448,7 +2806,7 @@
             }
         }
 
-        // 3D Visualization
+        // 3D Visualization - IMPROVED
         class AITutorVisualization {
             constructor() {
                 if (!checkThreeJS()) return;
@@ -2503,7 +2861,7 @@
                     antialias: true,
                     alpha: true
                 });
-                this.renderer.setSize(window.innerWidth, window.innerHeight);
+                this.renderer.setSize(canvas.parentElement.clientWidth, canvas.parentElement.clientHeight);
                 this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
                 
                 this.scene.fog = new THREE.Fog(0x0a0a0f, 10, 25);
@@ -2515,9 +2873,20 @@
                 directionalLight.position.set(5, 3, 5);
                 this.scene.add(directionalLight);
                 
+                // Add subtle point lights
+                const pointLight1 = new THREE.PointLight(0x5a6cff, 0.5, 10);
+                pointLight1.position.set(2, 2, 2);
+                this.scene.add(pointLight1);
+                
+                const pointLight2 = new THREE.PointLight(0x00ff9d, 0.3, 10);
+                pointLight2.position.set(-2, -1, 3);
+                this.scene.add(pointLight2);
+                
                 this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
                 this.controls.enableDamping = true;
                 this.controls.dampingFactor = 0.05;
+                this.controls.maxDistance = 10;
+                this.controls.minDistance = 2;
             }
             
             createParticles() {
@@ -2525,22 +2894,33 @@
                 const positions = new Float32Array(this.params.particleCount * 3);
                 const colors = new Float32Array(this.params.particleCount * 3);
                 
+                // Create a more interesting particle distribution
                 for (let i = 0; i < this.params.particleCount; i++) {
                     const i3 = i * 3;
+                    
+                    // Create particles in a spherical distribution with some noise
+                    const radius = 2 + Math.random() * 0.5;
                     const phi = Math.acos(-1 + (2 * i) / this.params.particleCount);
                     const theta = Math.sqrt(this.params.particleCount * Math.PI) * phi;
                     
-                    const x = Math.cos(theta) * Math.sin(phi);
-                    const y = Math.sin(theta) * Math.sin(phi);
-                    const z = Math.cos(phi);
+                    // Add some randomness for more organic look
+                    const randomOffset = 0.3;
+                    const x = (Math.cos(theta) * Math.sin(phi)) * radius + (Math.random() - 0.5) * randomOffset;
+                    const y = (Math.sin(theta) * Math.sin(phi)) * radius + (Math.random() - 0.5) * randomOffset;
+                    const z = (Math.cos(phi)) * radius + (Math.random() - 0.5) * randomOffset;
                     
                     positions[i3] = x;
                     positions[i3 + 1] = y;
                     positions[i3 + 2] = z;
                     
-                    colors[i3] = 0.5 + x * 0.5;
-                    colors[i3 + 1] = 0.3 + y * 0.7;
-                    colors[i3 + 2] = 0.8 + z * 0.2;
+                    // Color based on position for gradient effect
+                    const hue = 0.6 + (z / 3) * 0.2; // Blue to purple gradient
+                    const saturation = 0.7 + (x / 3) * 0.3;
+                    const lightness = 0.5 + (y / 3) * 0.2;
+                    
+                    colors[i3] = hue;
+                    colors[i3 + 1] = saturation;
+                    colors[i3 + 2] = lightness;
                 }
                 
                 geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
@@ -2551,21 +2931,23 @@
                     vertexColors: true,
                     transparent: true,
                     opacity: 0.8,
-                    blending: THREE.AdditiveBlending
+                    blending: THREE.AdditiveBlending,
+                    sizeAttenuation: true
                 });
                 
                 this.particles = new THREE.Points(geometry, material);
                 this.scene.add(this.particles);
                 
-                const testGeometry = new THREE.SphereGeometry(0.5, 32, 32);
-                const testMaterial = new THREE.MeshBasicMaterial({ 
+                // Add a central core sphere
+                const coreGeometry = new THREE.SphereGeometry(0.3, 16, 16);
+                const coreMaterial = new THREE.MeshBasicMaterial({ 
                     color: 0x5a6cff,
                     wireframe: true,
                     transparent: true,
-                    opacity: 0.1
+                    opacity: 0.2
                 });
-                const testSphere = new THREE.Mesh(testGeometry, testMaterial);
-                this.scene.add(testSphere);
+                const coreSphere = new THREE.Mesh(coreGeometry, coreMaterial);
+                this.scene.add(coreSphere);
             }
             
             setupControls() {
@@ -2577,6 +2959,11 @@
                 const particleCountValue = document.getElementById('particleCountValue');
                 const energyValue = document.getElementById('energyValue');
                 
+                // Set initial values
+                intensityValue.textContent = intensitySlider.value;
+                particleCountValue.textContent = particleCountSlider.value;
+                energyValue.textContent = energySlider.value;
+                
                 intensitySlider.addEventListener('input', (e) => {
                     this.params.intensity = e.target.value / 100;
                     intensityValue.textContent = e.target.value;
@@ -2593,6 +2980,7 @@
                     energyValue.textContent = e.target.value;
                 });
                 
+                // Preset buttons
                 document.querySelectorAll('.preset-btn').forEach(btn => {
                     btn.addEventListener('click', (e) => {
                         const preset = e.target.dataset.preset;
@@ -2603,16 +2991,53 @@
                 document.getElementById('retryBtn').addEventListener('click', () => {
                     location.reload();
                 });
+                
+                // Auto-update sliders when preset changes
+                this.setPreset('idle');
             }
             
             setPreset(preset) {
                 this.params.mode = preset;
                 
+                // Update button styles
                 document.querySelectorAll('.preset-btn').forEach(btn => {
                     btn.style.background = btn.dataset.preset === preset 
                         ? 'rgba(90, 108, 255, 0.4)' 
                         : 'rgba(90, 108, 255, 0.1)';
+                    btn.style.transform = btn.dataset.preset === preset 
+                        ? 'translateY(-2px)' 
+                        : 'translateY(0)';
                 });
+                
+                // Update sliders based on preset
+                const sliders = {
+                    'listening': { intensity: 70, energy: 60, particleCount: 2500 },
+                    'processing': { intensity: 85, energy: 80, particleCount: 3000 },
+                    'responding': { intensity: 75, energy: 70, particleCount: 2800 },
+                    'exploring': { intensity: 60, energy: 50, particleCount: 2200 },
+                    'teaching': { intensity: 65, energy: 55, particleCount: 2400 },
+                    'idle': { intensity: 50, energy: 30, particleCount: 2000 }
+                };
+                
+                if (sliders[preset]) {
+                    const presetValues = sliders[preset];
+                    
+                    document.getElementById('intensity').value = presetValues.intensity;
+                    document.getElementById('energy').value = presetValues.energy;
+                    document.getElementById('particleCount').value = presetValues.particleCount;
+                    
+                    document.getElementById('intensityValue').textContent = presetValues.intensity;
+                    document.getElementById('energyValue').textContent = presetValues.energy;
+                    document.getElementById('particleCountValue').textContent = presetValues.particleCount;
+                    
+                    this.params.intensity = presetValues.intensity / 100;
+                    this.params.energy = presetValues.energy / 100;
+                    
+                    if (this.params.particleCount !== presetValues.particleCount) {
+                        this.params.particleCount = presetValues.particleCount;
+                        this.updateParticleCount();
+                    }
+                }
             }
             
             updateParticleCount() {
@@ -2637,6 +3062,7 @@
                 if (!this.particles) return;
                 
                 const positions = this.particles.geometry.attributes.position.array;
+                const colors = this.particles.geometry.attributes.color.array;
                 const originalPositions = this.particles.geometry.attributes.originalPosition;
                 
                 if (!originalPositions) {
@@ -2656,41 +3082,55 @@
                     
                     let radius = 2.0;
                     let intensity = this.params.intensity;
+                    let energy = this.params.energy;
                     
+                    // Different movement patterns based on mode
                     switch(this.params.mode) {
                         case 'listening':
                             radius += Math.sin(time * 3 + i * 0.01) * 0.5 * intensity;
+                            radius += Math.cos(time * 2 + i * 0.02) * 0.3 * energy;
                             break;
                         case 'processing':
                             radius += Math.sin(time * 5 + i * 0.02) * 0.6 * intensity;
+                            radius += Math.sin(time * 8 + i * 0.01) * 0.4 * energy;
                             break;
                         case 'responding':
                             radius += (Math.sin(time * 2 + i * 0.005) + 1) * 0.4 * intensity;
+                            radius += Math.cos(time * 4 + i * 0.01) * 0.3 * energy;
                             break;
                         case 'exploring':
                             radius += Math.sin(time * 1.5 + i * 0.015) * 0.7 * intensity;
+                            radius += Math.cos(time * 3 + i * 0.008) * 0.5 * energy;
                             break;
                         case 'teaching':
                             radius += Math.sin(time * 4 + i * 0.008) * 0.55 * intensity;
+                            radius += Math.cos(time * 6 + i * 0.012) * 0.4 * energy;
                             break;
-                        default:
+                        default: // idle
                             radius += Math.sin(time * 0.5 + i * 0.01) * 0.2 * intensity;
+                            radius += Math.cos(time * 0.3 + i * 0.005) * 0.1 * energy;
                     }
                     
-                    radius += Math.sin(time * 8) * 0.2 * this.params.energy;
-                    
+                    // Add audio-reactive movement
                     const audioIndex = Math.floor((i / this.params.particleCount) * this.audioData.length);
                     radius += this.audioData[audioIndex] * 0.5 * intensity;
                     
+                    // Apply movement
                     positions[i3] = x * radius;
                     positions[i3 + 1] = y * radius;
                     positions[i3 + 2] = z * radius;
+                    
+                    // Color animation
+                    const colorShift = Math.sin(time * 0.5 + i * 0.001) * 0.1;
+                    colors[i3] = 0.6 + colorShift * intensity;
                 }
                 
                 this.particles.geometry.attributes.position.needsUpdate = true;
+                this.particles.geometry.attributes.color.needsUpdate = true;
                 
-                this.particles.rotation.y = time * 0.1;
-                this.particles.rotation.x = Math.sin(time * 0.05) * 0.1;
+                // Gentle rotation
+                this.particles.rotation.y = time * 0.05;
+                this.particles.rotation.x = Math.sin(time * 0.02) * 0.05;
             }
             
             animate() {
@@ -2706,9 +3146,13 @@
             }
             
             onWindowResize() {
-                this.camera.aspect = window.innerWidth / window.innerHeight;
+                const canvasContainer = document.getElementById('canvasContainer');
+                const width = canvasContainer.clientWidth;
+                const height = canvasContainer.clientHeight;
+                
+                this.camera.aspect = width / height;
                 this.camera.updateProjectionMatrix();
-                this.renderer.setSize(window.innerWidth, window.innerHeight);
+                this.renderer.setSize(width, height);
             }
             
             destroy() {
@@ -2736,10 +3180,10 @@
                 // Initialize 3D visualization
                 window.visualization = new AITutorVisualization();
                 
-                // Initialize RAG AI Tutor
+                // Initialize Enhanced RAG AI Tutor with document upload
                 window.ragTutor = new RAGAITutor();
                 
-                // Initialize FULLY FUNCTIONAL LLM Integration
+                // Initialize ENHANCED LLM Integration with Apply button
                 window.llmIntegration = new LLMIntegration();
                 
                 // Initialize chat interface with BOTH RAG and LLM
@@ -2754,6 +3198,7 @@
                 if (window.visualization && window.visualization.scene) {
                     window.addEventListener('resize', () => window.visualization.onWindowResize());
                     
+                    // Add keyboard shortcuts
                     window.addEventListener('keydown', (e) => {
                         if (e.code === 'Space') {
                             window.visualization.setPreset(
@@ -2763,6 +3208,14 @@
                         if (e.code === 'Space' && e.ctrlKey && window.voiceSynthesis) {
                             window.voiceSynthesis.stopSpeaking();
                         }
+                        if (e.code === 'KeyT' && e.ctrlKey) {
+                            const trainingBtn = document.getElementById('trainBtn');
+                            if (trainingBtn) trainingBtn.click();
+                        }
+                        if (e.code === 'KeyL' && e.ctrlKey) {
+                            const applyBtn = document.getElementById('applyApiBtn');
+                            if (applyBtn) applyBtn.click();
+                        }
                     });
                     
                     window.visualization.setPreset('idle');
@@ -2774,6 +3227,9 @@
                         window.llmIntegration.testConnection().then(connected => {
                             if (connected) {
                                 console.log('LLM API auto-connected on startup');
+                                if (window.chatInterface && window.chatInterface.chatStatusText) {
+                                    window.chatInterface.chatStatusText.textContent = 'Connected to ' + window.llmIntegration.provider;
+                                }
                             }
                         });
                     }, 2000);
@@ -2781,6 +3237,16 @@
                 
                 hideLoading();
                 
+                // Show welcome message
+                setTimeout(() => {
+                    if (window.visualization) {
+                        window.visualization.setPreset('exploring');
+                        setTimeout(() => {
+                            window.visualization.setPreset('idle');
+                        }, 2000);
+                    }
+                }, 1000);
+                
             }, 100);
         });