Update index.html

index.html

@@ -329,6 +329,191 @@
             background: #ff5a5a;
         }
         
+        /* === RAG TRAINING PANEL === */
+        .rag-training-panel {
+            position: absolute;
+            top: 30px;
+            left: 350px;
+            width: 350px;
+            height: calc(100vh - 100px);
+            background: rgba(20, 20, 30, 0.9);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 25px;
+            pointer-events: all;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+            z-index: 102;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: slideIn 0.5s ease 1.4s forwards;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .rag-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 20px;
+            color: #a0b0ff;
+            font-size: 1.1em;
+            font-weight: 300;
+        }
+        
+        .rag-section {
+            margin-bottom: 25px;
+        }
+        
+        .rag-label {
+            display: block;
+            margin-bottom: 10px;
+            font-size: 0.9em;
+            color: #8892b0;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .rag-textarea {
+            width: 100%;
+            height: 120px;
+            background: rgba(255, 255, 255, 0.07);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+            padding: 12px 15px;
+            color: white;
+            font-family: 'Segoe UI', system-ui, sans-serif;
+            font-size: 0.9em;
+            resize: vertical;
+            transition: all 0.3s ease;
+        }
+        
+        .rag-textarea:focus {
+            outline: none;
+            border-color: #5a6cff;
+            background: rgba(255, 255, 255, 0.1);
+            box-shadow: 0 0 0 2px rgba(90, 108, 255, 0.2);
+        }
+        
+        .rag-file-upload {
+            width: 100%;
+            padding: 20px;
+            border: 2px dashed rgba(90, 108, 255, 0.3);
+            border-radius: 10px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-bottom: 15px;
+        }
+        
+        .rag-file-upload:hover {
+            border-color: #5a6cff;
+            background: rgba(90, 108, 255, 0.05);
+        }
+        
+        .rag-file-upload input {
+            display: none;
+        }
+        
+        .rag-file-info {
+            font-size: 0.8em;
+            color: #8892b0;
+            margin-bottom: 15px;
+            text-align: center;
+        }
+        
+        .rag-controls {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        
+        .rag-btn {
+            padding: 12px;
+            background: rgba(90, 108, 255, 0.1);
+            border: 1px solid rgba(90, 108, 255, 0.3);
+            color: #a0b0ff;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            font-size: 0.9em;
+        }
+        
+        .rag-btn:hover {
+            background: rgba(90, 108, 255, 0.2);
+            transform: translateY(-2px);
+        }
+        
+        .rag-btn.primary {
+            background: linear-gradient(135deg, #5a6cff, #7a8aff);
+            color: white;
+        }
+        
+        .rag-btn.primary:hover {
+            background: linear-gradient(135deg, #7a8aff, #9aafff);
+        }
+        
+        .rag-progress {
+            width: 100%;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-top: 15px;
+        }
+        
+        .rag-progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #5a6cff, #00ff9d);
+            width: 0%;
+            transition: width 0.3s ease;
+        }
+        
+        .rag-status {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-top: 15px;
+            padding: 10px;
+            background: rgba(0, 255, 157, 0.1);
+            border-radius: 10px;
+            font-size: 0.85em;
+            color: #00ff9d;
+            border: 1px solid rgba(0, 255, 157, 0.2);
+        }
+        
+        .rag-knowledge-list {
+            max-height: 200px;
+            overflow-y: auto;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            padding: 10px;
+            margin-top: 10px;
+        }
+        
+        .knowledge-item {
+            padding: 8px 12px;
+            background: rgba(255, 255, 255, 0.07);
+            border-radius: 8px;
+            margin-bottom: 8px;
+            font-size: 0.85em;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .knowledge-item .delete-btn {
+            color: #ff5a5a;
+            cursor: pointer;
+            padding: 4px;
+        }
+        
         /* === VOICE CONTROLS PANEL === */
         .voice-controls {
             position: absolute;
@@ -338,7 +523,7 @@
             backdrop-filter: blur(10px);
             border-radius: 20px;
             padding: 25px;
-            width: 280px;
+            width: 300px;
             pointer-events: all;
             border: 1px solid rgba(255, 255, 255, 0.1);
             box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
@@ -720,7 +905,13 @@
         }
         
         /* Responsive adjustments */
-        @media (max-width: 1400px) {
+        @media (max-width: 1600px) {
+            .rag-training-panel {
+                left: 30px;
+                top: 150px;
+                height: calc(100vh - 180px);
+            }
+            
             .voice-controls {
                 right: 30px;
                 bottom: 400px;
@@ -740,6 +931,11 @@
                 padding: 20px;
                 width: 260px;
             }
+            
+            .rag-training-panel {
+                padding: 20px;
+                width: 320px;
+            }
         }
     </style>
 </head>
@@ -755,6 +951,76 @@
             </div>
         </div>
         
+        <!-- RAG Training Panel -->
+        <div class="rag-training-panel">
+            <div class="rag-header">
+                <i class="fas fa-graduation-cap"></i>
+                <span>AI Tutor Training</span>
+            </div>
+            
+            <div class="rag-section">
+                <label class="rag-label">
+                    <i class="fas fa-book"></i>
+                    Add Knowledge
+                </label>
+                <textarea class="rag-textarea" id="knowledgeText" placeholder="Enter text, notes, or educational content to teach the AI..."></textarea>
+            </div>
+            
+            <div class="rag-section">
+                <label class="rag-label">
+                    <i class="fas fa-file-upload"></i>
+                    Upload Documents
+                </label>
+                <div class="rag-file-upload" id="fileUploadArea">
+                    <i class="fas fa-cloud-upload-alt" style="font-size: 2em; margin-bottom: 10px; color: #5a6cff;"></i>
+                    <div>Drag & drop files or click to browse</div>
+                    <div style="font-size: 0.8em; margin-top: 5px;">Supports: PDF, TXT, DOCX, MD</div>
+                    <input type="file" id="fileInput" accept=".pdf,.txt,.docx,.md" multiple>
+                </div>
+                <div class="rag-file-info">
+                    Files will be processed for RAG training
+                </div>
+            </div>
+            
+            <div class="rag-controls">
+                <button class="rag-btn" id="addKnowledgeBtn">
+                    <i class="fas fa-plus"></i>
+                    Add Text
+                </button>
+                <button class="rag-btn primary" id="trainBtn">
+                    <i class="fas fa-brain"></i>
+                    Train AI
+                </button>
+            </div>
+            
+            <div class="rag-progress">
+                <div class="rag-progress-bar" id="trainingProgress"></div>
+            </div>
+            
+            <div class="rag-status" id="ragStatus" style="display: none;">
+                <i class="fas fa-sync-alt fa-spin"></i>
+                <span id="ragStatusText">Training in progress...</span>
+            </div>
+            
+            <div class="rag-section">
+                <label class="rag-label">
+                    <i class="fas fa-database"></i>
+                    Knowledge Base
+                </label>
+                <div class="rag-knowledge-list" id="knowledgeList">
+                    <!-- Knowledge items will be added here -->
+                    <div class="knowledge-item">
+                        <span>Physics Basics</span>
+                        <i class="fas fa-trash delete-btn"></i>
+                    </div>
+                    <div class="knowledge-item">
+                        <span>Calculus Fundamentals</span>
+                        <i class="fas fa-trash delete-btn"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
         <!-- Voice Controls Panel -->
         <div class="voice-controls">
             <div class="voice-header">
@@ -852,7 +1118,7 @@
                     
                     <div class="message message-ai">
                         <div class="message-content">
-                            You can type your questions or click the microphone icon to speak. I'll respond with explanations, examples, and follow-up questions to enhance your understanding.
+                            You can type your questions or click the microphone to speak. I'll respond with explanations, examples, and follow-up questions to enhance your understanding.
                         </div>
                         <div class="message-time">Just now</div>
                     </div>
@@ -987,7 +1253,318 @@
             document.getElementById('loadingText').textContent = text;
         }
 
-        // Voice Synthesis System
+        // RAG AI Tutor System
+        class RAGAITutor {
+            constructor() {
+                this.knowledgeBase = [];
+                this.vectorStore = null;
+                this.isTraining = false;
+                this.currentSession = null;
+                this.init();
+            }
+            
+            init() {
+                this.setupEventListeners();
+                this.loadSampleKnowledge();
+            }
+            
+            loadSampleKnowledge() {
+                // Add some sample knowledge for demonstration
+                this.addKnowledgeItem({
+                    id: Date.now(),
+                    title: "Physics Basics",
+                    content: "Newton's laws of motion: 1) An object at rest stays at rest unless acted upon by a force. 2) Force equals mass times acceleration. 3) For every action, there is an equal and opposite reaction.",
+                    type: "text",
+                    timestamp: new Date().toISOString()
+                });
+                
+                this.addKnowledgeItem({
+                    id: Date.now() + 1,
+                    title: "Calculus Fundamentals",
+                    content: "The derivative measures the rate of change of a function. The integral measures the accumulation of a quantity. The Fundamental Theorem of Calculus connects derivatives and integrals.",
+                    type: "text",
+                    timestamp: new Date().toISOString()
+                });
+                
+                this.updateKnowledgeList();
+            }
+            
+            setupEventListeners() {
+                // Add knowledge button
+                document.getElementById('addKnowledgeBtn').addEventListener('click', () => {
+                    this.addKnowledgeFromText();
+                });
+                
+                // Train button
+                document.getElementById('trainBtn').addEventListener('click', () => {
+                    this.trainRAGModel();
+                });
+                
+                // File upload
+                const fileInput = document.getElementById('fileInput');
+                const uploadArea = document.getElementById('fileUploadArea');
+                
+                uploadArea.addEventListener('click', () => {
+                    fileInput.click();
+                });
+                
+                uploadArea.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    uploadArea.style.borderColor = '#5a6cff';
+                    uploadArea.style.background = 'rgba(90, 108, 255, 0.1)';
+                });
+                
+                uploadArea.addEventListener('dragleave', () => {
+                    uploadArea.style.borderColor = 'rgba(90, 108, 255, 0.3)';
+                    uploadArea.style.background = 'transparent';
+                });
+                
+                uploadArea.addEventListener('drop', (e) => {
+                    e.preventDefault();
+                    uploadArea.style.borderColor = 'rgba(90, 108, 255, 0.3)';
+                    uploadArea.style.background = 'transparent';
+                    
+                    const files = e.dataTransfer.files;
+                    this.processUploadedFiles(files);
+                });
+                
+                fileInput.addEventListener('change', (e) => {
+                    const files = e.target.files;
+                    this.processUploadedFiles(files);
+                });
+                
+                // Knowledge list deletion
+                document.getElementById('knowledgeList').addEventListener('click', (e) => {
+                    if (e.target.classList.contains('delete-btn')) {
+                        const item = e.target.closest('.knowledge-item');
+                        const title = item.querySelector('span').textContent;
+                        this.removeKnowledgeItem(title);
+                    }
+                });
+            }
+            
+            addKnowledgeFromText() {
+                const textArea = document.getElementById('knowledgeText');
+                const content = textArea.value.trim();
+                
+                if (!content) {
+                    this.showRAGStatus('Please enter some knowledge content', 'warning');
+                    return;
+                }
+                
+                const title = content.substring(0, 50) + (content.length > 50 ? '...' : '');
+                
+                const knowledgeItem = {
+                    id: Date.now(),
+                    title: title,
+                    content: content,
+                    type: "text",
+                    timestamp: new Date().toISOString()
+                };
+                
+                this.addKnowledgeItem(knowledgeItem);
+                textArea.value = '';
+                this.showRAGStatus('Knowledge added successfully!', 'success');
+            }
+            
+            addKnowledgeItem(item) {
+                this.knowledgeBase.push(item);
+                this.updateKnowledgeList();
+            }
+            
+            removeKnowledgeItem(title) {
+                this.knowledgeBase = this.knowledgeBase.filter(item => item.title !== title);
+                this.updateKnowledgeList();
+                this.showRAGStatus('Knowledge removed', 'info');
+            }
+            
+            updateKnowledgeList() {
+                const list = document.getElementById('knowledgeList');
+                list.innerHTML = '';
+                
+                this.knowledgeBase.forEach(item => {
+                    const div = document.createElement('div');
+                    div.className = 'knowledge-item';
+                    div.innerHTML = `
+                        <span>${item.title}</span>
+                        <i class="fas fa-trash delete-btn"></i>
+                    `;
+                    list.appendChild(div);
+                });
+            }
+            
+            async processUploadedFiles(files) {
+                if (!files.length) return;
+                
+                this.showRAGStatus(`Processing ${files.length} file(s)...`, 'processing');
+                
+                for (let file of files) {
+                    await this.processFile(file);
+                }
+                
+                this.showRAGStatus('Files processed successfully!', 'success');
+                this.updateKnowledgeList();
+            }
+            
+            async processFile(file) {
+                return new Promise((resolve) => {
+                    const reader = new FileReader();
+                    
+                    reader.onload = async (e) => {
+                        const content = e.target.result;
+                        const fileName = file.name.replace(/\.[^/.]+$/, ""); // Remove extension
+                        
+                        const knowledgeItem = {
+                            id: Date.now(),
+                            title: `${fileName} (${file.type})`,
+                            content: content.substring(0, 5000), // Limit content
+                            type: file.type,
+                            filename: file.name,
+                            timestamp: new Date().toISOString()
+                        };
+                        
+                        this.addKnowledgeItem(knowledgeItem);
+                        resolve();
+                    };
+                    
+                    reader.onerror = () => {
+                        this.showRAGStatus(`Error reading file: ${file.name}`, 'error');
+                        resolve();
+                    };
+                    
+                    reader.readAsText(file);
+                });
+            }
+            
+            async trainRAGModel() {
+                if (this.knowledgeBase.length === 0) {
+                    this.showRAGStatus('No knowledge to train on. Please add some content first.', 'warning');
+                    return;
+                }
+                
+                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);
+                }
+                
+                // In a real implementation, this would:
+                // 1. Chunk the knowledge base
+                // 2. Create embeddings using Hugging Face models
+                // 3. Store in a vector database
+                // 4. Set up retrieval mechanisms
+                
+                // For demonstration, we'll simulate successful training
+                this.vectorStore = {
+                    size: this.knowledgeBase.length,
+                    trainedAt: new Date().toISOString(),
+                    model: 'all-MiniLM-L6-v2' // Example embedding model
+                };
+                
+                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);
+            }
+            
+            async queryKnowledge(query) {
+                if (!this.vectorStore) {
+                    return "I haven't been trained on any specific knowledge yet. Please add some content and train me first!";
+                }
+                
+                // Simulate RAG retrieval
+                // In a real implementation, this would:
+                // 1. Embed the query
+                // 2. Search vector store for similar chunks
+                // 3. Retrieve top-k relevant documents
+                // 4. Generate answer using LLM with retrieved context
+                
+                // For demonstration, find relevant knowledge
+                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);
+            }
+            
+            findRelevantKnowledge(query) {
+                const queryLower = query.toLowerCase();
+                const relevant = [];
+                
+                for (const item of this.knowledgeBase) {
+                    if (item.content.toLowerCase().includes(queryLower) || 
+                        item.title.toLowerCase().includes(queryLower)) {
+                        relevant.push(item);
+                        
+                        // Limit to 3 most relevant items
+                        if (relevant.length >= 3) break;
+                    }
+                }
+                
+                return relevant;
+            }
+            
+            generateResponse(query, relevantKnowledge) {
+                const context = relevantKnowledge.map(item => item.content).join('\n\n');
+                
+                // Simulate LLM generation with context
+                // In real implementation, use Hugging Face Inference API or similar
+                return `Based on my knowledge base:\n\n${context}\n\nRegarding your question "${query}", here's what I can explain...`;
+            }
+            
+            showRAGStatus(message, type = 'info') {
+                const statusEl = document.getElementById('ragStatus');
+                const statusText = document.getElementById('ragStatusText');
+                
+                statusText.textContent = message;
+                
+                // Set color based on type
+                const colors = {
+                    'info': '#5a6cff',
+                    'success': '#00ff9d',
+                    'warning': '#ffa500',
+                    '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';
+                
+                // Auto-hide after 5 seconds unless it's a processing message
+                if (type !== 'processing') {
+                    setTimeout(() => {
+                        statusEl.style.display = 'none';
+                    }, 5000);
+                }
+            }
+            
+            sleep(ms) {
+                return new Promise(resolve => setTimeout(resolve, ms));
+            }
+        }
+
+        // Advanced Voice Synthesis System
         class VoiceSynthesis {
             constructor() {
                 this.synth = window.speechSynthesis;
@@ -1304,7 +1881,8 @@
 
         // Chat Interface Functionality
         class ChatInterface {
-            constructor() {
+            constructor(ragTutor) {
+                this.ragTutor = ragTutor;
                 this.isListening = false;
                 this.voiceAnimationInterval = null;
                 this.initChat();
@@ -1440,7 +2018,7 @@
                 }, 500);
             }
             
-            sendMessage() {
+            async sendMessage() {
                 const message = this.chatInput.value.trim();
                 if (message === '') return;
                 
@@ -1452,7 +2030,7 @@
                 this.autoResizeTextarea();
                 
                 // Process and respond
-                this.processAIResponse(message);
+                await this.processAIResponse(message);
             }
             
             addMessage(content, sender) {
@@ -1485,7 +2063,7 @@
                 return div.innerHTML;
             }
             
-            processAIResponse(userMessage) {
+            async processAIResponse(userMessage) {
                 // Show typing indicator
                 this.showTypingIndicator();
                 
@@ -1497,11 +2075,16 @@
                 // Simulate AI processing time
                 const processingTime = 1000 + Math.random() * 2000;
                 
-                setTimeout(() => {
+                setTimeout(async () => {
                     this.hideTypingIndicator();
                     
-                    // Generate AI response
-                    const response = this.generateAIResponse(userMessage);
+                    // Generate AI response using RAG if available
+                    let response;
+                    if (this.ragTutor && this.ragTutor.vectorStore) {
+                        response = await this.ragTutor.queryKnowledge(userMessage);
+                    } else {
+                        response = this.generateAIResponse(userMessage);
+                    }
                     
                     // Add AI response
                     this.addMessage(response, 'ai');
@@ -1537,7 +2120,7 @@
             }
             
             generateAIResponse(userMessage) {
-                // Simple AI response generator
+                // Simple AI response generator (fallback when RAG is not trained)
                 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. Key concepts include superposition, entanglement, and quantum interference.",
                     neural: "Neural networks learn through backpropagation and gradient descent. They adjust weights based on prediction errors, minimizing loss functions. Deep learning uses multiple layers to extract hierarchical features from data.",
@@ -1879,8 +2462,11 @@
                 // Initialize 3D visualization
                 window.visualization = new AITutorVisualization();
                 
-                // Initialize chat interface
-                window.chatInterface = new ChatInterface();
+                // Initialize RAG AI Tutor
+                window.ragTutor = new RAGAITutor();
+                
+                // Initialize chat interface with RAG tutor
+                window.chatInterface = new ChatInterface(window.ragTutor);
                 
                 // Initialize voice synthesis
                 if ('speechSynthesis' in window) {