Spaces:

AptlyDigital
/

UltimateAI

Running

App Files Files Community

AptlyDigital commited on Jan 8

Commit

a41249b

verified ·

1 Parent(s): 1b46bc8

Update index.html

Browse files

Files changed (1) hide show

index.html +2230 -1

index.html CHANGED Viewed

@@ -720,4 +720,2233 @@
             }
             .side-panel {
-                posi

             }
             .side-panel {
+                position: fixed;
+                top: 0;
+                height: 100vh;
+                transform: translateX(-100%);
+                z-index: 1000;
+            }
+            .side-panel.left {
+                left: 0;
+            }
+            .side-panel.right {
+                right: 0;
+                transform: translateX(100%);
+            }
+            .side-panel.active {
+                transform: translateX(0);
+            }
+            .mobile-nav {
+                display: block;
+            }
+            .main-content {
+                padding: 80px 20px 20px 20px;
+            }
+            #canvasContainer {
+                height: 50vh;
+            }
+            .chat-interface {
+                margin-top: 20px;
+            }
+            .chat-messages {
+                height: 250px;
+            }
+        }
+        @media (max-width: 768px) {
+            #canvasContainer {
+                height: 40vh;
+            }
+            .chat-messages {
+                height: 200px;
+            }
+            .side-panel {
+                width: 100%;
+                max-width: 350px;
+            }
+        }
+        @media (max-width: 480px) {
+            #canvasContainer {
+                height: 35vh;
+            }
+            .chat-interface {
+                margin-top: 15px;
+            }
+            .chat-messages {
+                height: 180px;
+                padding: 15px;
+            }
+            .chat-input-container {
+                padding: 15px;
+            }
+            .chat-input, .voice-input-btn, .send-btn {
+                min-height: 48px;
+                height: 48px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Mobile Navigation -->
+    <div class="mobile-nav">
+        <div class="mobile-menu-btn" id="mobileMenuBtn">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </div>
+    <div class="mobile-panel-overlay" id="mobileOverlay"></div>
+    <!-- Loading Screen -->
+    <div class="loading-screen" id="loadingScreen">
+        <div class="spinner"></div>
+        <div id="loadingText">Initializing Neural Network Interface...</div>
+    </div>
+    <!-- Error Screen -->
+    <div class="error-screen" id="errorScreen">
+        <h2>⚠️ Initialization Failed</h2>
+        <p id="errorMessage">Three.js library failed to load. Please check your internet connection or try again.</p>
+        <button class="retry-btn" id="retryBtn">Retry</button>
+    </div>
+    <!-- Main Container -->
+    <div class="main-container">
+        <!-- Left Side Panel -->
+        <aside class="side-panel left">
+            <div class="card">
+                <div class="card-title">
+                    <i class="fas fa-sliders-h"></i>
+                    <span>Animation Controls</span>
+                </div>
+                <div class="accordion">
+                    <div class="accordion-header" data-target="animationControls">
+                        <span>Particle Settings</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </div>
+                    <div class="accordion-content" id="animationControls">
+                        <div class="control-group">
+                            <label>Animation Intensity</label>
+                            <div class="slider-container">
+                                <input type="range" id="intensity" min="0" max="100" value="50">
+                                <span class="value-display" id="intensityValue">50</span>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label>Particle Count</label>
+                            <div class="slider-container">
+                                <input type="range" id="particleCount" min="100" max="5000" value="2000" step="100">
+                                <span class="value-display" id="particleCountValue">2000</span>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label>Energy Level</label>
+                            <div class="slider-container">
+                                <input type="range" id="energy" min="0" max="100" value="30">
+                                <span class="value-display" id="energyValue">30</span>
+                            </div>
+                        </div>
+                        <div class="button-grid">
+                            <button class="preset-btn" data-preset="listening">🎤 Listening</button>
+                            <button class="preset-btn" data-preset="processing">⚡ Processing</button>
+                            <button class="preset-btn" data-preset="responding">💬 Responding</button>
+                            <button class="preset-btn" data-preset="exploring">🔍 Exploring</button>
+                            <button class="preset-btn" data-preset="teaching">📚 Teaching</button>
+                            <button class="preset-btn" data-preset="idle">🌀 Idle</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-title">
+                    <i class="fas fa-graduation-cap"></i>
+                    <span>AI Training</span>
+                </div>
+                <div class="accordion">
+                    <div class="accordion-header" data-target="trainingControls">
+                        <span>RAG Training</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </div>
+                    <div class="accordion-content" id="trainingControls">
+                        <textarea class="rag-textarea" id="knowledgeText" placeholder="Add knowledge for AI training..."></textarea>
+                        <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>
+                </div>
+            </div>
+        </aside>
+        <!-- Main Content -->
+        <main class="main-content">
+            <div id="canvasContainer">
+                <canvas id="mainCanvas"></canvas>
+            </div>
+            <div class="chat-interface">
+                <div class="chat-container">
+                    <div class="chat-header">
+                        <div class="chat-title">
+                            <i class="fas fa-robot"></i>
+                            <span>AI Tutor Assistant</span>
+                        </div>
+                        <div class="chat-status">
+                            <span class="status-indicator"></span>
+                            <span id="chatStatusText">Online</span>
+                        </div>
+                    </div>
+                    <div class="chat-messages" id="chatMessages">
+                        <!-- Messages will be dynamically added here -->
+                        <div class="message message-ai">
+                            <div class="message-content">
+                                Hello! I'm your AI Tutor. I can help explain concepts, answer questions, and guide your learning. How can I assist you today?
+                            </div>
+                            <div class="message-time">Just now</div>
+                        </div>
+                        <div class="message message-ai">
+                            <div class="message-content">
+                                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>
+                    </div>
+                    <div class="chat-input-container">
+                        <div class="input-wrapper">
+                            <textarea
+                                class="chat-input"
+                                id="chatInput"
+                                placeholder="Type your question or click the microphone to speak..."
+                                rows="1"
+                            ></textarea>
+                            <button class="voice-input-btn" id="voiceBtn" title="Start voice input">
+                                <i class="fas fa-microphone"></i>
+                            </button>
+                            <button class="send-btn" id="sendBtn" title="Send message">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <!-- Right Side Panel -->
+        <aside class="side-panel right">
+            <div class="card">
+                <div class="card-title">
+                    <i class="fas fa-robot"></i>
+                    <span>Voice Synthesis</span>
+                </div>
+                <div class="accordion">
+                    <div class="accordion-header" data-target="voiceControls">
+                        <span>Voice Settings</span>
+                        <i class="fas fa-chevron-down"></i>
+                    </div>
+                    <div class="accordion-content" id="voiceControls">
+                        <div class="control-group">
+                            <label>Voice Selection</label>
+                            <select class="voice-select" id="voiceSelect">
+                                <option value="">Loading voices...</option>
+                            </select>
+                        </div>
+                        <div class="control-group">
+                            <label>Speech Rate</label>
+                            <div class="slider-container">
+                                <input type="range" class="voice-slider" id="rateSlider" min="0.5" max="2" step="0.1" value="1">
+                                <span class="value-display" id="rateValue">1.0x</span>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label>Pitch Variation</label>
+                            <div class="slider-container">
+                                <input type="range" class="voice-slider" id="pitchSlider" min="0.5" max="2" step="0.1" value="1">
+                                <span class="value-display" id="pitchValue">1.0</span>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label>Volume Level</label>
+                            <div class="slider-container">
+                                <input type="range" class="voice-slider" id="volumeSlider" min="0.1" max="1" step="0.1" value="0.8">
+                                <span class="value-display" id="volumeValue">80%</span>
+                            </div>
+                        </div>
+                        <div class="voice-control-buttons">
+                            <button class="voice-btn" id="autoSpeakBtn" data-enabled="true">
+                                <i class="fas fa-bullhorn"></i>
+                                Auto-Speak
+                            </button>
+                            <button class="voice-btn stop" id="stopBtn">
+                                <i class="fas fa-stop"></i>
+                                Stop
+                            </button>
+                        </div>
+                        <button class="voice-btn" id="previewBtn" style="width: 100%; margin-top: 10px;">
+                            <i class="fas fa-play"></i>
+                            Preview Voice
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-title">
+                    <i class="fas fa-plug"></i>
+                    <span>LLM Integration</span>
+                </div>
+                <div class="accordion">
+                    <div class="accordion-header" data-target="llmControls">
+                        <span>API Settings</span>
+                        <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-inference.huggingface.co/models/microsoft/DialoGPT-medium">
+                        </div>
+                        <div class="control-group">
+                            <label>API Key</label>
+                            <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>
+                                Test Connection
+                            </button>
+                            <button class="rag-btn primary" id="saveApiBtn">
+                                <i class="fas fa-save"></i>
+                                Save Settings
+                            </button>
+                        </div>
+                        <div class="rag-status" id="apiStatus" style="display: none;">
+                            <i class="fas fa-sync-alt fa-spin"></i>
+                            <span id="apiStatusText">Testing connection...</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </aside>
+    </div>
+    <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;
+        }
+        // ==================== UPDATED NEURAL WEB VISUALIZATION ====================
+        class AITutorVisualization {
+            constructor() {
+                if (!checkThreeJS()) return;
+                this.scene = null;
+                this.camera = null;
+                this.renderer = null;
+                this.particles = null;
+                this.lines = null;
+                this.controls = null;
+                this.params = {
+                    intensity: 0.5,
+                    particleCount: 2000,
+                    energy: 0.3,
+                    mode: 'idle'
+                };
+                this.audioData = new Array(32).fill(0);
+                this.time = 0;
+                this.animationFrameId = null;
+                this.particlePositions = [];
+                try {
+                    this.init();
+                    this.createNeuralWeb();
+                    this.setupControls();
+                    this.animate();
+                    updateStatus('Neural Network Interface Ready');
+                    setTimeout(hideLoading, 500);
+                } catch (error) {
+                    console.error('Initialization error:', error);
+                    showError('Failed to initialize 3D scene: ' + error.message);
+                }
+            }
+            init() {
+                updateStatus('Creating Neural Network...');
+                this.scene = new THREE.Scene();
+                this.scene.background = new THREE.Color(0x0a0a0f);
+                this.camera = new THREE.PerspectiveCamera(
+                    60,
+                    window.innerWidth / window.innerHeight,
+                    0.1,
+                    1000
+                );
+                this.camera.position.set(0, 0, 5);
+                const canvas = document.getElementById('mainCanvas');
+                this.renderer = new THREE.WebGLRenderer({
+                    canvas: canvas,
+                    antialias: true,
+                    alpha: true
+                });
+                this.renderer.setSize(canvas.parentElement.clientWidth, canvas.parentElement.clientHeight);
+                this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+                // Lighting
+                const ambientLight = new THREE.AmbientLight(0x222244, 0.6);
+                this.scene.add(ambientLight);
+                const directionalLight = new THREE.DirectionalLight(0x5a6cff, 0.8);
+                directionalLight.position.set(3, 2, 3);
+                this.scene.add(directionalLight);
+                const pointLight = new THREE.PointLight(0x00ff9d, 0.4, 10);
+                pointLight.position.set(-2, -1, 2);
+                this.scene.add(pointLight);
+                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;
+            }
+            createNeuralWeb() {
+                // Remove existing objects if recreating
+                if (this.particles) this.scene.remove(this.particles);
+                if (this.lines) this.scene.remove(this.lines);
+                if (this.core) this.scene.remove(this.core);
+                // Create particles
+                const particleGeometry = new THREE.BufferGeometry();
+                const positions = new Float32Array(this.params.particleCount * 3);
+                const colors = new Float32Array(this.params.particleCount * 3);
+                this.particlePositions = [];
+                // Create an organic neural network structure
+                const layers = 6;
+                const particlesPerLayer = this.params.particleCount / layers;
+                for (let i = 0; i < this.params.particleCount; i++) {
+                    const i3 = i * 3;
+                    const layer = Math.floor(i / particlesPerLayer);
+                    const layerProgress = layer / layers;
+                    // Spherical coordinates with some noise
+                    const radius = 1.5 + layerProgress * 0.8;
+                    const theta = Math.random() * Math.PI * 2;
+                    const phi = Math.acos(2 * Math.random() - 1);
+                    // Add organic noise
+                    const noise = 0.3;
+                    const x = radius * Math.sin(phi) * Math.cos(theta) + (Math.random() - 0.5) * noise;
+                    const y = radius * Math.sin(phi) * Math.sin(theta) + (Math.random() - 0.5) * noise;
+                    const z = radius * Math.cos(phi) + (Math.random() - 0.5) * noise;
+                    positions[i3] = x;
+                    positions[i3 + 1] = y;
+                    positions[i3 + 2] = z;
+                    this.particlePositions.push(new THREE.Vector3(x, y, z));
+                    // Color based on position and layer
+                    const hue = 0.6 + (layer / layers) * 0.2; // Blue to purple gradient
+                    const saturation = 0.8 - layerProgress * 0.3;
+                    const brightness = 0.7 + (y / 3) * 0.3;
+                    colors[i3] = hue;
+                    colors[i3 + 1] = saturation;
+                    colors[i3 + 2] = brightness;
+                }
+                particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+                particleGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+                const particleMaterial = new THREE.PointsMaterial({
+                    size: 0.03,
+                    vertexColors: true,
+                    transparent: true,
+                    opacity: 0.9,
+                    blending: THREE.AdditiveBlending,
+                    sizeAttenuation: true
+                });
+                this.particles = new THREE.Points(particleGeometry, particleMaterial);
+                this.scene.add(this.particles);
+                // Create neural connections
+                this.createNeuralConnections();
+                // Add central core
+                const coreGeometry = new THREE.IcosahedronGeometry(0.4, 1);
+                const coreMaterial = new THREE.MeshBasicMaterial({
+                    color: 0x5a6cff,
+                    wireframe: true,
+                    transparent: true,
+                    opacity: 0.3
+                });
+                this.core = new THREE.Mesh(coreGeometry, coreMaterial);
+                this.scene.add(this.core);
+            }
+            createNeuralConnections() {
+                const lineGeometry = new THREE.BufferGeometry();
+                const linePositions = [];
+                const lineColors = [];
+                // Connect nearby particles
+                const connectionDistance = 1.8;
+                const maxConnections = 3;
+                for (let i = 0; i < this.params.particleCount; i++) {
+                    const source = this.particlePositions[i];
+                    let connections = 0;
+                    for (let j = i + 1; j < this.params.particleCount && connections < maxConnections; j++) {
+                        const target = this.particlePositions[j];
+                        const distance = source.distanceTo(target);
+                        if (distance < connectionDistance) {
+                            // Add line from source to target
+                            linePositions.push(source.x, source.y, source.z);
+                            linePositions.push(target.x, target.y, target.z);
+                            // Line colors with gradient
+                            const intensity = 1 - (distance / connectionDistance);
+                            const color1 = new THREE.Color(0x5a6cff);
+                            const color2 = new THREE.Color(0x00ff9d);
+                            lineColors.push(color1.r, color1.g, color1.b, intensity * 0.6);
+                            lineColors.push(color2.r, color2.g, color2.b, intensity * 0.6);
+                            connections++;
+                        }
+                    }
+                }
+                lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));
+                lineGeometry.setAttribute('color', new THREE.Float32BufferAttribute(lineColors, 4));
+                const lineMaterial = new THREE.LineBasicMaterial({
+                    vertexColors: true,
+                    transparent: true,
+                    opacity: 0.3,
+                    linewidth: 1
+                });
+                this.lines = new THREE.LineSegments(lineGeometry, lineMaterial);
+                this.scene.add(this.lines);
+            }
+            setupControls() {
+                const intensitySlider = document.getElementById('intensity');
+                const particleCountSlider = document.getElementById('particleCount');
+                const energySlider = document.getElementById('energy');
+                const intensityValue = document.getElementById('intensityValue');
+                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;
+                });
+                particleCountSlider.addEventListener('input', (e) => {
+                    this.params.particleCount = parseInt(e.target.value);
+                    particleCountValue.textContent = e.target.value;
+                    this.updateParticleCount();
+                });
+                energySlider.addEventListener('input', (e) => {
+                    this.params.energy = e.target.value / 100;
+                    energyValue.textContent = e.target.value;
+                });
+                // Preset buttons
+                document.querySelectorAll('.preset-btn').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        const preset = e.target.dataset.preset;
+                        this.setPreset(preset);
+                    });
+                });
+                document.getElementById('retryBtn').addEventListener('click', () => {
+                    location.reload();
+                });
+                // Set initial preset
+                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)';
+                });
+                // Preset parameters
+                const presets = {
+                    'listening': { intensity: 70, energy: 60, particleCount: 2200 },
+                    'processing': { intensity: 85, energy: 80, particleCount: 2500 },
+                    'responding': { intensity: 75, energy: 70, particleCount: 2300 },
+                    'exploring': { intensity: 60, energy: 50, particleCount: 2100 },
+                    'teaching': { intensity: 65, energy: 55, particleCount: 2200 },
+                    'idle': { intensity: 50, energy: 30, particleCount: 2000 }
+                };
+                if (presets[preset]) {
+                    const presetValues = presets[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() {
+                this.createNeuralWeb();
+            }
+            simulateAudioData() {
+                const time = performance.now() * 0.001;
+                const frequency = 0.5 + this.params.energy * 2;
+                for (let i = 0; i < this.audioData.length; i++) {
+                    const base = Math.sin(time * frequency + i * 0.3) * 0.5 + 0.5;
+                    const variation = Math.sin(time * 2 + i * 0.5) * 0.2;
+                    this.audioData[i] = base + variation * this.params.intensity;
+                }
+            }
+            updateParticles() {
+                if (!this.particles) return;
+                const time = this.time;
+                const positions = this.particles.geometry.attributes.position.array;
+                const colors = this.particles.geometry.attributes.color.array;
+                // Update particles
+                for (let i = 0; i < this.params.particleCount; i++) {
+                    const i3 = i * 3;
+                    let wave = 0;
+                    switch(this.params.mode) {
+                        case 'listening':
+                            wave = Math.sin(time * 2 + i * 0.01) * 0.1;
+                            break;
+                        case 'processing':
+                            wave = Math.sin(time * 3 + i * 0.02) * 0.15;
+                            break;
+                        case 'responding':
+                            wave = (Math.sin(time * 1.5 + i * 0.008) + 1) * 0.08;
+                            break;
+                        case 'exploring':
+                            wave = Math.sin(time * 1.2 + i * 0.015) * 0.12;
+                            break;
+                        case 'teaching':
+                            wave = Math.sin(time * 2.5 + i * 0.01) * 0.1;
+                            break;
+                        default: // idle
+                            wave = Math.sin(time * 0.5 + i * 0.005) * 0.05;
+                    }
+                    // Apply movement with intensity and energy
+                    const movement = wave * this.params.intensity * this.params.energy;
+                    // Update position with organic movement
+                    positions[i3] += Math.sin(time * 0.7 + i) * 0.002 * movement;
+                    positions[i3 + 1] += Math.cos(time * 0.5 + i) * 0.002 * movement;
+                    positions[i3 + 2] += Math.sin(time * 0.3 + i) * 0.002 * movement;
+                    // Update color based on activity
+                    const activity = Math.abs(wave) * this.params.intensity;
+                    colors[i3] = 0.6 + activity * 0.2; // Hue shift
+                    colors[i3 + 1] = 0.8 - activity * 0.2; // Saturation
+                    colors[i3 + 2] = 0.7 + Math.sin(time * 2 + i * 0.1) * 0.1; // Brightness pulse
+                    // Update stored positions
+                    if (this.particlePositions[i]) {
+                        this.particlePositions[i].set(positions[i3], positions[i3 + 1], positions[i3 + 2]);
+                    }
+                }
+                this.particles.geometry.attributes.position.needsUpdate = true;
+                this.particles.geometry.attributes.color.needsUpdate = true;
+                // Update lines (simplified - just update opacity)
+                if (this.lines) {
+                    const lineColors = this.lines.geometry.attributes.color.array;
+                    for (let i = 0; i < lineColors.length; i += 8) {
+                        const pulse = Math.sin(time * 2 + i * 0.01) * 0.2 + 0.5;
+                        lineColors[i + 3] = pulse * this.params.intensity * 0.6;
+                        lineColors[i + 7] = pulse * this.params.intensity * 0.6;
+                    }
+                    this.lines.geometry.attributes.color.needsUpdate = true;
+                }
+                // Update core
+                if (this.core) {
+                    this.core.rotation.y = time * 0.2;
+                    this.core.rotation.x = time * 0.1;
+                    // Pulsing core
+                    const scale = 1 + Math.sin(time * 3) * 0.1;
+                    this.core.scale.setScalar(scale);
+                }
+                // Gentle rotation of entire system
+                this.particles.rotation.y = time * 0.03;
+                this.particles.rotation.x = Math.sin(time * 0.02) * 0.02;
+            }
+            animate() {
+                this.animationFrameId = requestAnimationFrame(() => this.animate());
+                this.time += 0.016;
+                this.simulateAudioData();
+                this.updateParticles();
+                this.controls.update();
+                this.renderer.render(this.scene, this.camera);
+            }
+            onWindowResize() {
+                const canvasContainer = document.getElementById('canvasContainer');
+                const width = canvasContainer.clientWidth;
+                const height = canvasContainer.clientHeight;
+                this.camera.aspect = width / height;
+                this.camera.updateProjectionMatrix();
+                this.renderer.setSize(width, height);
+            }
+            destroy() {
+                if (this.animationFrameId) {
+                    cancelAnimationFrame(this.animationFrameId);
+                }
+                if (this.controls) {
+                    this.controls.dispose();
+                }
+                if (this.renderer) {
+                    this.renderer.dispose();
+                }
+            }
+        }
+        // ==================== ALL ORIGINAL CODE BELOW REMAINS EXACTLY THE SAME ====================
+        // Mobile Menu Functionality
+        class MobileMenu {
+            constructor() {
+                this.menuBtn = document.getElementById('mobileMenuBtn');
+                this.overlay = document.getElementById('mobileOverlay');
+                this.leftPanel = document.querySelector('.side-panel.left');
+                this.rightPanel = document.querySelector('.side-panel.right');
+                this.isOpen = false;
+                this.currentPanel = null;
+                this.init();
+            }
+            init() {
+                this.menuBtn.addEventListener('click', () => this.toggleMenu());
+                this.overlay.addEventListener('click', () => this.closeMenu());
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        this.closeMenu();
+                    }
+                });
+            }
+            toggleMenu() {
+                if (!this.isOpen) {
+                    this.openMenu('left');
+                } else {
+                    this.closeMenu();
+                }
+            }
+            openMenu(panel) {
+                this.isOpen = true;
+                this.currentPanel = panel;
+                this.menuBtn.classList.add('active');
+                if (panel === 'left') {
+                    this.leftPanel.classList.add('active');
+                } else if (panel === 'right') {
+                    this.rightPanel.classList.add('active');
+                }
+                this.overlay.style.display = 'block';
+                setTimeout(() => {
+                    this.overlay.style.opacity = '1';
+                }, 10);
+            }
+            closeMenu() {
+                this.isOpen = false;
+                this.menuBtn.classList.remove('active');
+                this.leftPanel.classList.remove('active');
+                this.rightPanel.classList.remove('active');
+                this.overlay.style.opacity = '0';
+                setTimeout(() => {
+                    this.overlay.style.display = 'none';
+                }, 300);
+            }
+        }
+        // Accordion Functionality
+        class Accordion {
+            constructor() {
+                this.accordions = document.querySelectorAll('.accordion-header');
+                this.init();
+            }
+            init() {
+                this.accordions.forEach(accordion => {
+                    accordion.addEventListener('click', () => {
+                        const targetId = accordion.getAttribute('data-target');
+                        const content = document.getElementById(targetId);
+                        const icon = accordion.querySelector('i');
+                        accordion.classList.toggle('active');
+                        content.classList.toggle('active');
+                        if (accordion.classList.contains('active')) {
+                            icon.classList.remove('fa-chevron-down');
+                            icon.classList.add('fa-chevron-up');
+                        } else {
+                            icon.classList.remove('fa-chevron-up');
+                            icon.classList.add('fa-chevron-down');
+                        }
+                    });
+                });
+            }
+        }
+        // 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() {
+                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()
+                });
+            }
+            setupEventListeners() {
+                document.getElementById('addKnowledgeBtn').addEventListener('click', () => {
+                    this.addKnowledgeFromText();
+                });
+                document.getElementById('trainBtn').addEventListener('click', () => {
+                    this.trainRAGModel();
+                });
+            }
+            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);
+            }
+            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');
+                const progressBar = document.getElementById('trainingProgress');
+                progressBar.style.width = '0%';
+                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}%`;
+                    await this.sleep(1000);
+                }
+                this.vectorStore = {
+                    size: this.knowledgeBase.length,
+                    trainedAt: new Date().toISOString(),
+                    model: 'all-MiniLM-L6-v2'
+                };
+                this.isTraining = false;
+                this.showRAGStatus(`RAG training complete! ${this.knowledgeBase.length} documents indexed.`, 'success');
+                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!";
+                }
+                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?";
+                }
+                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);
+                        if (relevant.length >= 3) break;
+                    }
+                }
+                return relevant;
+            }
+            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...`;
+            }
+            showRAGStatus(message, type = 'info') {
+                const statusEl = document.getElementById('ragStatus');
+                const statusText = document.getElementById('ragStatusText');
+                statusText.textContent = message;
+                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';
+                if (type !== 'processing') {
+                    setTimeout(() => {
+                        statusEl.style.display = 'none';
+                    }, 5000);
+                }
+            }
+            sleep(ms) {
+                return new Promise(resolve => setTimeout(resolve, ms));
+            }
+        }
+        // ==================== 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();
+            }
+            init() {
+                this.loadSettings();
+                this.setupEventListeners();
+                this.updateProviderUI();
+            }
+            loadSettings() {
+                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() {
+                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();
+                });
+                // Endpoint change
+                document.getElementById('apiEndpoint').addEventListener('input', (e) => {
+                    this.apiEndpoint = e.target.value.trim();
+                });
+                // 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.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 {
+                    let testResult;
+                    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) {
+                    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) {
+                    console.log('LLM not connected, using fallback');
+                    return null;
+                }
+                try {
+                    const fullPrompt = context ? `${context}\n\nQuestion: ${prompt}` : prompt;
+                    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);
+                    }
+                } catch (error) {
+                    console.error('LLM generation error:', error);
+                    return null;
+                }
+            }
+            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 || '';
+            }
+            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);
+                }
+            }
+        }
+        // Voice Synthesis System
+        class VoiceSynthesis {
+            constructor() {
+                this.synth = window.speechSynthesis;
+                this.voices = [];
+                this.currentVoice = null;
+                this.isAutoSpeak = true;
+                this.isSpeaking = false;
+                this.currentUtterance = null;
+                this.settings = {
+                    rate: 1.0,
+                    pitch: 1.0,
+                    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.";
+                this.initVoices();
+                this.setupEventListeners();
+            }
+            initVoices() {
+                const loadVoices = () => {
+                    this.voices = this.synth.getVoices();
+                    this.populateVoiceList();
+                    this.selectBestVoice();
+                };
+                if (this.synth.onvoiceschanged !== undefined) {
+                    this.synth.onvoiceschanged = loadVoices;
+                }
+                if (this.synth.getVoices().length > 0) {
+                    loadVoices();
+                }
+            }
+            selectBestVoice() {
+                const englishVoices = this.voices.filter(voice =>
+                    voice.lang.startsWith('en-')
+                );
+                if (englishVoices.length === 0) {
+                    console.warn('No English voices found');
+                    return;
+                }
+                const preferredVoices = [
+                    'Google UK English Male',
+                    'Google US English',
+                    'Microsoft David',
+                    'Microsoft Zira',
+                    'Alex',
+                    'Samantha',
+                    'Daniel'
+                ];
+                for (const voiceName of preferredVoices) {
+                    const voice = englishVoices.find(v => v.name.includes(voiceName));
+                    if (voice) {
+                        this.currentVoice = voice;
+                        this.updateVoiceSelect(voice);
+                        break;
+                    }
+                }
+                if (!this.currentVoice && englishVoices.length > 0) {
+                    this.currentVoice = englishVoices[0];
+                    this.updateVoiceSelect(englishVoices[0]);
+                }
+            }
+            populateVoiceList() {
+                const voiceSelect = document.getElementById('voiceSelect');
+                voiceSelect.innerHTML = '';
+                const englishVoices = this.voices.filter(voice =>
+                    voice.lang.startsWith('en-')
+                );
+                if (englishVoices.length === 0) {
+                    const option = document.createElement('option');
+                    option.textContent = 'No English voices found';
+                    option.disabled = true;
+                    voiceSelect.appendChild(option);
+                    return;
+                }
+                englishVoices.forEach(voice => {
+                    const option = document.createElement('option');
+                    option.value = voice.name;
+                    option.textContent = `${voice.name} (${voice.lang})`;
+                    option.dataset.lang = voice.lang;
+                    voiceSelect.appendChild(option);
+                });
+            }
+            updateVoiceSelect(voice) {
+                const voiceSelect = document.getElementById('voiceSelect');
+                const options = voiceSelect.querySelectorAll('option');
+                options.forEach(option => {
+                    if (option.value === voice.name) {
+                        option.selected = true;
+                    }
+                });
+            }
+            setupEventListeners() {
+                document.getElementById('voiceSelect').addEventListener('change', (e) => {
+                    const selectedVoice = this.voices.find(v => v.name === e.target.value);
+                    if (selectedVoice) {
+                        this.currentVoice = selectedVoice;
+                    }
+                });
+                document.getElementById('rateSlider').addEventListener('input', (e) => {
+                    const value = parseFloat(e.target.value);
+                    this.settings.rate = value;
+                    document.getElementById('rateValue').textContent = value.toFixed(1) + 'x';
+                });
+                document.getElementById('pitchSlider').addEventListener('input', (e) => {
+                    const value = parseFloat(e.target.value);
+                    this.settings.pitch = value;
+                    document.getElementById('pitchValue').textContent = value.toFixed(1);
+                });
+                document.getElementById('volumeSlider').addEventListener('input', (e) => {
+                    const value = parseFloat(e.target.value);
+                    this.settings.volume = value;
+                    document.getElementById('volumeValue').textContent = Math.round(value * 100) + '%';
+                });
+                document.getElementById('autoSpeakBtn').addEventListener('click', (e) => {
+                    this.isAutoSpeak = !this.isAutoSpeak;
+                    const btn = e.target.closest('.voice-btn');
+                    btn.dataset.enabled = this.isAutoSpeak;
+                    btn.innerHTML = this.isAutoSpeak
+                        ? '<i class="fas fa-bullhorn"></i> Auto-Speak'
+                        : '<i class="fas fa-volume-mute"></i> Auto-Speak';
+                    btn.classList.toggle('active', this.isAutoSpeak);
+                });
+                document.getElementById('stopBtn').addEventListener('click', () => {
+                    this.stopSpeaking();
+                });
+                document.getElementById('previewBtn').addEventListener('click', () => {
+                    this.previewCurrentVoice();
+                });
+            }
+            speak(text) {
+                if (!this.isAutoSpeak || !text || this.isSpeaking) return;
+                this.stopSpeaking();
+                const utterance = new SpeechSynthesisUtterance(text);
+                if (this.currentVoice) {
+                    utterance.voice = this.currentVoice;
+                }
+                utterance.rate = this.settings.rate;
+                utterance.pitch = this.settings.pitch;
+                utterance.volume = this.settings.volume;
+                utterance.text = this.addNaturalPauses(text);
+                utterance.onerror = (event) => {
+                    console.error('Speech synthesis error:', event);
+                };
+                this.currentUtterance = utterance;
+                this.synth.speak(utterance);
+            }
+            addNaturalPauses(text) {
+                return text
+                    .replace(/,/g, ',<break time="200ms"/>')
+                    .replace(/\./g, '.<break time="300ms"/>')
+                    .replace(/\?/g, '?<break time="400ms"/>')
+                    .replace(/\!/g, '!<break time="400ms"/>');
+            }
+            stopSpeaking() {
+                if (this.isSpeaking) {
+                    this.synth.cancel();
+                    this.isSpeaking = false;
+                    this.currentUtterance = null;
+                }
+            }
+            previewCurrentVoice() {
+                this.speak(this.testScript);
+            }
+        }
+        // Chat Interface - FULLY INTEGRATED WITH LLM
+        class ChatInterface {
+            constructor(ragTutor, llmIntegration) {
+                this.ragTutor = ragTutor;
+                this.llmIntegration = llmIntegration;
+                this.isListening = false;
+                this.initChat();
+            }
+            initChat() {
+                this.chatInput = document.getElementById('chatInput');
+                this.chatMessages = document.getElementById('chatMessages');
+                this.voiceBtn = document.getElementById('voiceBtn');
+                this.sendBtn = document.getElementById('sendBtn');
+                this.chatStatusText = document.getElementById('chatStatusText');
+                this.setupEventListeners();
+                this.autoResizeTextarea();
+            }
+            setupEventListeners() {
+                this.sendBtn.addEventListener('click', () => this.sendMessage());
+                this.chatInput.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        this.sendMessage();
+                    }
+                });
+                this.voiceBtn.addEventListener('click', () => this.toggleVoiceInput());
+                this.chatInput.addEventListener('input', () => this.autoResizeTextarea());
+            }
+            autoResizeTextarea() {
+                const textarea = this.chatInput;
+                textarea.style.height = 'auto';
+                const newHeight = Math.min(textarea.scrollHeight, 120);
+                textarea.style.height = newHeight + 'px';
+            }
+            toggleVoiceInput() {
+                this.isListening = !this.isListening;
+                if (this.isListening) {
+                    this.voiceBtn.classList.add('listening');
+                    this.voiceBtn.innerHTML = '<i class="fas fa-stop"></i>';
+                    this.chatStatusText.textContent = 'Listening...';
+                    if (window.visualization) {
+                        window.visualization.setPreset('listening');
+                    }
+                    setTimeout(() => {
+                        this.simulateVoiceInput();
+                    }, 1500);
+                } else {
+                    this.voiceBtn.classList.remove('listening');
+                    this.voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
+                    this.chatStatusText.textContent = 'Online';
+                    if (window.visualization) {
+                        window.visualization.setPreset('processing');
+                    }
+                }
+            }
+            simulateVoiceInput() {
+                if (!this.isListening) return;
+                const simulatedQuestions = [
+                    "Can you explain quantum computing?",
+                    "How do neural networks learn?",
+                    "What's the difference between AI and machine learning?",
+                    "Help me understand blockchain technology",
+                    "Explain the concept of derivatives in calculus"
+                ];
+                const randomQuestion = simulatedQuestions[Math.floor(Math.random() * simulatedQuestions.length)];
+                this.addMessage(randomQuestion, 'user');
+                this.processAIResponse(randomQuestion);
+                setTimeout(() => {
+                    this.isListening = false;
+                    this.voiceBtn.classList.remove('listening');
+                    this.voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
+                    this.chatStatusText.textContent = 'Online';
+                }, 500);
+            }
+            async sendMessage() {
+                const message = this.chatInput.value.trim();
+                if (message === '') return;
+                this.addMessage(message, 'user');
+                this.chatInput.value = '';
+                this.autoResizeTextarea();
+                await this.processAIResponse(message);
+            }
+            addMessage(content, sender) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `message message-${sender}`;
+                const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                messageDiv.innerHTML = `
+                    <div class="message-content">${this.escapeHtml(content)}</div>
+                    <div class="message-time">${time}</div>
+                `;
+                this.chatMessages.appendChild(messageDiv);
+                this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+                if (window.visualization && sender === 'user') {
+                    window.visualization.setPreset('processing');
+                }
+            }
+            escapeHtml(text) {
+                const div = document.createElement('div');
+                div.textContent = text;
+                return div.innerHTML;
+            }
+            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;
+                    // 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 {
+                        // 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');
+                        setTimeout(() => {
+                            window.visualization.setPreset('idle');
+                        }, 3000);
+                    }
+                }, 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.",
+                    neural: "Neural networks learn through backpropagation and gradient descent. They adjust weights based on prediction errors, minimizing loss functions.",
+                    blockchain: "Blockchain is a decentralized, distributed ledger technology. Each block contains cryptographic hashes linking to previous blocks, ensuring immutability.",
+                    calculus: "Derivatives measure instantaneous rate of change. The derivative of f(x) at point a is the slope of the tangent line.",
+                    default: "I understand you're asking about " + userMessage.substring(0, 30) + "... This is a complex topic that requires careful explanation."
+                };
+                const lowerMessage = userMessage.toLowerCase();
+                if (lowerMessage.includes('quantum')) return responses.quantum;
+                if (lowerMessage.includes('neural') || lowerMessage.includes('network')) return responses.neural;
+                if (lowerMessage.includes('blockchain')) return responses.blockchain;
+                if (lowerMessage.includes('calculus') || lowerMessage.includes('derivative')) return responses.calculus;
+                return responses.default;
+            }
+        }
+        // Initialize everything
+        window.addEventListener('load', () => {
+            updateStatus('Loading Neural Network Interface...');
+            setTimeout(() => {
+                // Initialize UI components first
+                window.mobileMenu = new MobileMenu();
+                window.accordion = new Accordion();
+                // Initialize 3D visualization - NEURAL WEB VERSION
+                window.visualization = new AITutorVisualization();
+                // Initialize RAG AI Tutor
+                window.ragTutor = new RAGAITutor();
+                // 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) {
+                    window.voiceSynthesis = new VoiceSynthesis();
+                    updateStatus('Voice synthesis initialized');
+                }
+                if (window.visualization && window.visualization.scene) {
+                    window.addEventListener('resize', () => window.visualization.onWindowResize());
+                    window.addEventListener('keydown', (e) => {
+                        if (e.code === 'Space') {
+                            window.visualization.setPreset(
+                                window.visualization.params.mode === 'idle' ? 'listening' : 'idle'
+                            );
+                        }
+                        if (e.code === 'Space' && e.ctrlKey && window.voiceSynthesis) {
+                            window.voiceSynthesis.stopSpeaking();
+                        }
+                    });
+                    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);
+        });
+        window.addEventListener('beforeunload', () => {
+            if (window.visualization) {
+                window.visualization.destroy();
+            }
+            if (window.voiceSynthesis) {
+                window.voiceSynthesis.stopSpeaking();
+            }
+        });
+    </script>
+</body>
+</html>