Spaces:

johko
/

in-browser-rag

Running

File size: 28,826 Bytes

cca4a24

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🤖 AI-Powered Document Search & RAG Chat</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 { font-size: 2.5em; margin-bottom: 10px; }
        .header p { font-size: 1.2em; opacity: 0.9; }
        
        .status {
            background: #f8f9fa;
            padding: 15px 30px;
            border-bottom: 1px solid #e9ecef;
            font-weight: 600;
            color: #495057;
        }
        
        .tabs {
            display: flex;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }
        
        .tab {
            flex: 1;
            padding: 15px 20px;
            background: none;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
        }
        
        .tab:hover { background: #e9ecef; }
        .tab.active { background: white; border-bottom-color: #667eea; color: #667eea; }
        
        .tab-content {
            display: none;
            padding: 30px;
        }
        
        .tab-content.active { display: block; }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #495057;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #667eea;
        }
        
        button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        button:hover { transform: translateY(-2px); }
        
        .btn-secondary {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        }
        
        .result {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin-top: 15px;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
        }
        
        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .alert {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .alert-info {
            background: #d1ecf1;
            border: 1px solid #b8daff;
            color: #0c5460;
        }
        
        .alert-success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .slider {
            flex: 1;
        }
        
        .slider-value {
            min-width: 40px;
            text-align: center;
            font-weight: 600;
            color: #667eea;
        }
        
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 AI-Powered Document Search & RAG Chat</h1>
            <p>Complete RAG system with semantic search and intelligent responses</p>
        </div>
        
        <div class="status" id="status">
            📊 Documents: 3 | 🤖 AI Models: Not loaded
        </div>
        
        <div class="tabs">
            <button class="tab active" onclick="showTab('init')">🚀 Initialize AI</button>
            <button class="tab" onclick="showTab('chat')">🤖 AI Chat (RAG)</button>
            <button class="tab" onclick="showTab('search')">🔍 Semantic Search</button>
            <button class="tab" onclick="showTab('add')">📝 Add Documents</button>
            <button class="tab" onclick="showTab('test')">🧪 System Test</button>
        </div>
        
        <!-- Initialize AI Tab -->
        <div id="init" class="tab-content active">
            <div class="alert alert-info">
                <strong>🚀 Start here!</strong> Initialize the AI system for semantic search and intelligent chat.
            </div>
            <div class="alert alert-success">
                <strong>⚡ Features:</strong><br>
                • 🔮 <strong>Semantic Search:</strong> AI-powered similarity matching<br>
                • 🧠 <strong>Smart Chat:</strong> Context-aware responses with document retrieval<br>
                • 📚 <strong>RAG Pipeline:</strong> Retrieval-Augmented Generation for accurate answers
            </div>
            <button onclick="initializeModels()" style="font-size: 18px; padding: 15px 30px;">
                🚀 Initialize AI Models
            </button>
            <div id="initStatus" class="result" style="display: none;"></div>
        </div>
        
        <!-- AI Chat Tab -->
        <div id="chat" class="tab-content">
            <div class="alert alert-info">
                <strong>🤖 Ask questions!</strong> The AI searches through documents and provides intelligent answers.
            </div>
            <div class="alert alert-success">
                <strong>💡 Try asking:</strong><br>
                • "What is artificial intelligence?"<br>
                • "How does space exploration work?"<br>
                • "What are renewable energy sources?"
            </div>
            <div class="grid">
                <div>
                    <label for="chatQuestion">Your Question</label>
                    <textarea id="chatQuestion" rows="3" placeholder="Ask anything about the documents..."></textarea>
                </div>
                <div>
                    <label for="maxContext">Context Documents</label>
                    <div class="slider-container">
                        <input type="range" id="maxContext" class="slider" min="1" max="5" value="3" oninput="updateSliderValue('maxContext')">
                        <span id="maxContextValue" class="slider-value">3</span>
                    </div>
                </div>
            </div>
            <button onclick="chatWithRAG()">🤖 Ask AI</button>
            <div id="chatResponse" class="result" style="display: none;"></div>
        </div>
        
        <!-- Semantic Search Tab -->
        <div id="search" class="tab-content">
            <div class="alert alert-info">
                <strong>🔮 Semantic search!</strong> Find documents by meaning, not just keywords.
            </div>
            <div class="grid">
                <div>
                    <label for="searchQuery">Search Query</label>
                    <input type="text" id="searchQuery" placeholder="Try: 'machine learning', 'Mars missions', 'solar power'">
                </div>
                <div>
                    <label for="maxResults">Max Results</label>
                    <div class="slider-container">
                        <input type="range" id="maxResults" class="slider" min="1" max="10" value="5" oninput="updateSliderValue('maxResults')">
                        <span id="maxResultsValue" class="slider-value">5</span>
                    </div>
                </div>
            </div>
            <div style="display: flex; gap: 10px;">
                <button onclick="searchDocumentsSemantic()">🔮 Semantic Search</button>
                <button class="btn-secondary" onclick="searchDocumentsKeyword()">🔤 Keyword Search</button>
            </div>
            <div id="searchResults" class="result" style="display: none;"></div>
        </div>
        
        <!-- Add Documents Tab -->
        <div id="add" class="tab-content">
            <div class="alert alert-info">
                <strong>📚 Expand your knowledge base!</strong> Add your own documents to search and chat with.
            </div>
            <div class="form-group">
                <label for="docTitle">Document Title (optional)</label>
                <input type="text" id="docTitle" placeholder="Enter document title...">
            </div>
            <div class="form-group">
                <label for="docContent">Document Content</label>
                <textarea id="docContent" rows="8" placeholder="Paste your document text here..."></textarea>
            </div>
            <button onclick="addDocument()">📝 Add Document</button>
            <div class="grid">
                <div id="addStatus" class="result" style="display: none;"></div>
                <div id="docPreview" class="result" style="display: none;"></div>
            </div>
        </div>
        
        <!-- System Test Tab -->
        <div id="test" class="tab-content">
            <div class="alert alert-info">
                <strong>🧪 Test the system</strong> to verify everything is working correctly.
            </div>
            <button onclick="testSystem()">🧪 Run System Test</button>
            <div id="testOutput" class="result" style="display: none;"></div>
        </div>
    </div>

    <script>
        // Document storage and AI state
        let documents = [
            {
                id: 0,
                title: "Artificial Intelligence Overview",
                content: "Artificial Intelligence (AI) is a branch of computer science that aims to create intelligent machines that work and react like humans. Some activities computers with AI are designed for include speech recognition, learning, planning, and problem-solving. AI is used in healthcare, finance, transportation, and entertainment. Machine learning enables computers to learn from experience without explicit programming. Deep learning uses neural networks to understand complex patterns.",
                embedding: null
            },
            {
                id: 1,
                title: "Space Exploration",
                content: "Space exploration is the ongoing discovery and exploration of celestial structures in outer space through evolving space technology. Physical exploration is conducted by unmanned robotic probes and human spaceflight. Space exploration has been used for geopolitical rivalries like the Cold War. The early era was driven by a Space Race between the Soviet Union and United States. Modern exploration includes Mars missions, the International Space Station, and satellite programs.",
                embedding: null
            },
            {
                id: 2,
                title: "Renewable Energy", 
                content: "Renewable energy comes from naturally replenished resources on a human timescale. It includes sunlight, wind, rain, tides, waves, and geothermal heat. Renewable energy contrasts with fossil fuels that are used faster than replenished. Most renewable sources are sustainable. Solar energy is abundant and promising. Wind energy and hydroelectric power are major contributors to renewable generation worldwide.",
                embedding: null
            }
        ];

        let modelsInitialized = false;

        // Simple embedding generation based on word frequency
        function generateEmbedding(text) {
            const words = text.toLowerCase().split(/\s+/);
            const embedding = new Array(10).fill(0);
            
            // Word to dimension mapping
            const wordDims = {
                'ai': 0, 'artificial': 0, 'intelligence': 0, 'machine': 0, 'learning': 0,
                'space': 1, 'exploration': 1, 'mars': 1, 'satellite': 1, 'rocket': 1,
                'energy': 2, 'renewable': 2, 'solar': 2, 'wind': 2, 'power': 2,
                'computer': 3, 'technology': 3, 'science': 3, 'data': 3,
                'human': 4, 'people': 4, 'society': 4, 'world': 4,
                'system': 5, 'network': 5, 'process': 5, 'method': 5,
                'research': 6, 'study': 6, 'analysis': 6, 'development': 6,
                'future': 7, 'modern': 7, 'new': 7, 'advanced': 7,
                'problem': 8, 'solution': 8, 'application': 8, 'use': 8,
                'important': 9, 'major': 9, 'significant': 9, 'key': 9
            };
            
            // Count word frequencies
            words.forEach(word => {
                if (wordDims.hasOwnProperty(word)) {
                    embedding[wordDims[word]]++;
                }
            });
            
            // Normalize vector
            const magnitude = Math.sqrt(embedding.reduce((sum, val) => sum + val * val, 0));
            if (magnitude > 0) {
                return embedding.map(val => val / magnitude);
            }
            return embedding;
        }

        // Calculate cosine similarity
        function cosineSimilarity(a, b) {
            const dotProduct = a.reduce((sum, val, i) => sum + val * b[i], 0);
            const magnitudeA = Math.sqrt(a.reduce((sum, val) => sum + val * val, 0));
            const magnitudeB = Math.sqrt(b.reduce((sum, val) => sum + val * val, 0));
            
            if (magnitudeA === 0 || magnitudeB === 0) return 0;
            return dotProduct / (magnitudeA * magnitudeB);
        }

        // UI Functions
        function showTab(tabName) {
            // Hide all tabs
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelectorAll('.tab').forEach(button => {
                button.classList.remove('active');
            });
            
            // Show selected tab
            document.getElementById(tabName).classList.add('active');
            event.target.classList.add('active');
        }

        function updateSliderValue(sliderId) {
            const slider = document.getElementById(sliderId);
            const valueSpan = document.getElementById(sliderId + 'Value');
            valueSpan.textContent = slider.value;
        }

        function updateStatus() {
            const status = document.getElementById('status');
            status.textContent = `📊 Documents: ${documents.length} | 🤖 AI Models: ${modelsInitialized ? 'Loaded' : 'Not loaded'}`;
        }

        // AI Functions
        function initializeModels() {
            const statusDiv = document.getElementById('initStatus');
            statusDiv.style.display = 'block';
            statusDiv.innerHTML = '<div class="loading"></div> Initializing AI models...';
            
            setTimeout(() => {
                modelsInitialized = true;
                
                // Generate embeddings for all documents
                documents.forEach(doc => {
                    doc.embedding = generateEmbedding(doc.content);
                });
                
                statusDiv.innerHTML = `✅ AI Models initialized successfully!
🔮 Embeddings generated for all documents
🧠 Ready for semantic search and RAG chat!

📊 System Status:
• Documents processed: ${documents.length}
• Embedding dimensions: 10
• Similarity algorithm: Cosine similarity
• Ready for advanced queries!`;
                
                updateStatus();
            }, 2000);
        }

        function searchDocumentsSemantic() {
            const query = document.getElementById('searchQuery').value;
            const maxResults = parseInt(document.getElementById('maxResults').value);
            const resultsDiv = document.getElementById('searchResults');
            
            if (!query.trim()) {
                resultsDiv.style.display = 'block';
                resultsDiv.textContent = '❌ Please enter a search query';
                return;
            }
            
            if (!modelsInitialized) {
                resultsDiv.style.display = 'block';
                resultsDiv.textContent = '❌ Please initialize AI models first!';
                return;
            }
            
            resultsDiv.style.display = 'block';
            resultsDiv.innerHTML = '<div class="loading"></div> Searching...';
            
            setTimeout(() => {
                const queryEmbedding = generateEmbedding(query);
                const results = [];
                
                documents.forEach(doc => {
                    if (doc.embedding) {
                        const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
                        results.push({ doc, similarity });
                    }
                });
                
                results.sort((a, b) => b.similarity - a.similarity);
                
                if (results.length === 0) {
                    resultsDiv.textContent = `❌ No documents found for '${query}'`;
                    return;
                }
                
                let output = `🔍 Semantic search results for '${query}':\n\n`;
                results.slice(0, maxResults).forEach((result, i) => {
                    const doc = result.doc;
                    const similarity = result.similarity;
                    const excerpt = doc.content.length > 200 ? doc.content.substring(0, 200) + '...' : doc.content;
                    output += `**Result ${i + 1}** (similarity: ${similarity.toFixed(3)})\n📄 Title: ${doc.title}\n📝 Content: ${excerpt}\n\n`;
                });
                
                resultsDiv.textContent = output;
            }, 500);
        }

        function searchDocumentsKeyword() {
            const query = document.getElementById('searchQuery').value;
            const maxResults = parseInt(document.getElementById('maxResults').value);
            const resultsDiv = document.getElementById('searchResults');
            
            if (!query.trim()) {
                resultsDiv.style.display = 'block';
                resultsDiv.textContent = '❌ Please enter a search query';
                return;
            }
            
            resultsDiv.style.display = 'block';
            resultsDiv.innerHTML = '<div class="loading"></div> Searching...';
            
            setTimeout(() => {
                const results = [];
                const queryWords = query.toLowerCase().split(/\s+/);
                
                documents.forEach(doc => {
                    const contentLower = doc.content.toLowerCase();
                    const titleLower = doc.title.toLowerCase();
                    
                    let matches = 0;
                    queryWords.forEach(word => {
                        matches += (contentLower.match(new RegExp(word, 'g')) || []).length;
                        matches += (titleLower.match(new RegExp(word, 'g')) || []).length * 2; // Title matches weighted more
                    });
                    
                    if (matches > 0) {
                        results.push({ doc, score: matches });
                    }
                });
                
                results.sort((a, b) => b.score - a.score);
                
                if (results.length === 0) {
                    resultsDiv.textContent = `❌ No documents found containing '${query}'`;
                    return;
                }
                
                let output = `🔍 Keyword search results for '${query}':\n\n`;
                results.slice(0, maxResults).forEach((result, i) => {
                    const doc = result.doc;
                    const excerpt = doc.content.length > 200 ? doc.content.substring(0, 200) + '...' : doc.content;
                    output += `**Result ${i + 1}**\n📄 Title: ${doc.title}\n📝 Content: ${excerpt}\n\n`;
                });
                
                resultsDiv.textContent = output;
            }, 500);
        }

        function chatWithRAG() {
            const question = document.getElementById('chatQuestion').value;
            const maxContext = parseInt(document.getElementById('maxContext').value);
            const responseDiv = document.getElementById('chatResponse');
            
            if (!question.trim()) {
                responseDiv.style.display = 'block';
                responseDiv.textContent = '❌ Please enter a question';
                return;
            }
            
            if (!modelsInitialized) {
                responseDiv.style.display = 'block';
                responseDiv.textContent = '❌ AI models not loaded yet. Please initialize them first!';
                return;
            }
            
            responseDiv.style.display = 'block';
            responseDiv.innerHTML = '<div class="loading"></div> Generating response...';
            
            setTimeout(() => {
                // Use semantic search to find relevant documents
                const queryEmbedding = generateEmbedding(question);
                const relevantDocs = [];
                
                documents.forEach(doc => {
                    if (doc.embedding) {
                        const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
                        if (similarity > 0.1) { // Threshold for relevance
                            relevantDocs.push({ doc, similarity });
                        }
                    }
                });
                
                relevantDocs.sort((a, b) => b.similarity - a.similarity);
                relevantDocs.splice(maxContext); // Limit to maxContext documents
                
                if (relevantDocs.length === 0) {
                    responseDiv.textContent = '❌ No relevant context found. Try asking about AI, space exploration, or renewable energy.';
                    return;
                }
                
                // Generate response based on context
                const contextTexts = relevantDocs.map(item => item.doc.content.substring(0, 400));
                const context = contextTexts.join(' ');
                
                // Simple response generation based on question type
                const questionLower = question.toLowerCase();
                let response = '';
                
                if (questionLower.includes('what') || questionLower.includes('define')) {
                    response = `🤖 Based on the documents, here's what I found:\n\n${context.substring(0, 500)}...`;
                } else if (questionLower.includes('how') || questionLower.includes('process') || questionLower.includes('work')) {
                    response = `🤖 Here's how it works according to the documents:\n\n${context.substring(0, 500)}...`;
                } else if (questionLower.includes('why') || questionLower.includes('reason')) {
                    response = `🤖 The reasons include:\n\n${context.substring(0, 500)}...`;
                } else {
                    response = `🤖 Based on the relevant documents:\n\n${context.substring(0, 500)}...`;
                }
                
                response += `\n\n📚 Sources: ${relevantDocs.length} documents | Best similarity: ${relevantDocs[0].similarity.toFixed(3)}`;
                
                responseDiv.textContent = response;
            }, 1500);
        }

        function addDocument() {
            const title = document.getElementById('docTitle').value || `User Document ${documents.length - 2}`;
            const content = document.getElementById('docContent').value;
            const statusDiv = document.getElementById('addStatus');
            const previewDiv = document.getElementById('docPreview');
            
            if (!content.trim()) {
                statusDiv.style.display = 'block';
                statusDiv.textContent = '❌ Please enter document content';
                previewDiv.style.display = 'none';
                return;
            }
            
            const docId = documents.length;
            const document = {
                id: docId,
                title: title,
                content: content.trim(),
                embedding: modelsInitialized ? generateEmbedding(content) : null
            };
            
            documents.push(document);
            
            const preview = content.length > 300 ? content.substring(0, 300) + '...' : content;
            const status = `✅ Document added successfully!
📄 Title: ${title}
📊 Size: ${content.length.toLocaleString()} characters
📚 Total documents: ${documents.length}${modelsInitialized ? '\n🔮 Embedding generated automatically' : ''}`;
            
            statusDiv.style.display = 'block';
            statusDiv.textContent = status;
            
            previewDiv.style.display = 'block';
            previewDiv.textContent = `📖 Preview:\n${preview}`;
            
            // Clear form
            document.getElementById('docTitle').value = '';
            document.getElementById('docContent').value = '';
            
            updateStatus();
        }

        function testSystem() {
            const outputDiv = document.getElementById('testOutput');
            outputDiv.style.display = 'block';
            outputDiv.innerHTML = '<div class="loading"></div> Running system tests...';
            
            setTimeout(() => {
                if (documents.length === 0) {
                    outputDiv.textContent = '❌ No documents found!';
                    return;
                }
                
                // Perform a test search
                const testQuery = 'AI';
                const queryEmbedding = generateEmbedding(testQuery);
                let testResults = [];
                
                if (modelsInitialized) {
                    documents.forEach(doc => {
                        if (doc.embedding) {
                            const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
                            if (similarity > 0) {
                                testResults.push({ doc, similarity });
                            }
                        }
                    });
                    testResults.sort((a, b) => b.similarity - a.similarity);
                }
                
                let output = `✅ System test successful! ${documents.length} documents loaded.\n\n`;
                
                if (modelsInitialized) {
                    output += `🔮 AI Models: ✅ Loaded\n🧮 Embeddings: ✅ Generated\n🔍 Test search for "AI": ${testResults.length} results\n\n`;
                    if (testResults.length > 0) {
                        const topResult = testResults[0];
                        output += `📄 Top result: "${topResult.doc.title}" (similarity: ${topResult.similarity.toFixed(3)})\n`;
                        output += `📝 Content: ${topResult.doc.content.substring(0, 150)}...`;
                    }
                } else {
                    output += `⚠️  AI Models: Not initialized\n💡 Click "Initialize AI Models" to enable semantic search and RAG chat`;
                }
                
                outputDiv.textContent = output;
            }, 1000);
        }

        // Initialize UI
        updateStatus();
    </script>
</body>
</html>