Spaces:
Running
Running
| <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> | |
| <script type="module"> | |
| // Import transformers.js 3.0.0 from CDN (new Hugging Face ownership) | |
| import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0'; | |
| // Make available globally | |
| window.transformers = { pipeline, env }; | |
| window.transformersLoaded = true; | |
| console.log('✅ Transformers.js 3.0.0 loaded via ES modules (Hugging Face)'); | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0/dist/transformers.min.js"></script> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>🤖 AI-Powered Document Search & RAG Chat</h1> | |
| <p>Real transformer models running in your browser with Transformers.js</p> | |
| </div> | |
| <div class="status" id="status"> | |
| 📊 Documents: 3 | 🤖 AI Models: Not loaded | 🧠 Embedding Model: 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('llm')">🚀 LLM Chat</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>🚀 Real AI Models!</strong> This system uses actual transformer models via Transformers.js. | |
| </div> | |
| <div class="model-info"> | |
| <h4>🧠 Models Being Loaded:</h4> | |
| <p><strong>Embedding Model:</strong> Xenova/all-MiniLM-L6-v2 (384-dimensional sentence embeddings)</p> | |
| <p><strong>Q&A Model:</strong> Xenova/distilbert-base-cased-distilled-squad (Question Answering)</p> | |
| <p><strong>LLM Model:</strong> Auto-selected GPT-2 or DistilGPT-2 (Transformers.js 3.0.0)</p> | |
| <p><strong>Size:</strong> ~100MB total (cached after first load)</p> | |
| <p><strong>Performance:</strong> CPU inference, ~2-8 seconds per operation</p> | |
| <p><strong>Status:</strong> <span id="transformersStatus">⏳ Loading library...</span></p> | |
| </div> | |
| <div class="alert alert-warning"> | |
| <strong>⚠️ First Load:</strong> Model downloading may take 1-2 minutes depending on your internet connection. Models are cached for subsequent uses. | |
| </div> | |
| <button onclick="initializeModels()" id="initBtn" style="font-size: 18px; padding: 15px 30px;"> | |
| 🚀 Initialize Real AI Models | |
| </button> | |
| <div id="initProgress" style="display: none;"> | |
| <div class="progress"> | |
| <div class="progress-bar" id="progressBar" style="width: 0%"></div> | |
| </div> | |
| <p id="progressText">Preparing to load models...</p> | |
| </div> | |
| <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>🤖 Real AI Chat!</strong> Ask questions and get answers from actual transformer models. | |
| </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?"<br> | |
| • "Explain machine learning in simple terms" | |
| </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()" id="chatBtn">🤖 Ask AI</button> | |
| <div id="chatResponse" class="result" style="display: none;"></div> | |
| </div> | |
| <!-- LLM Chat Tab --> | |
| <div id="llm" class="tab-content"> | |
| <div class="alert alert-info"> | |
| <strong>🚀 Pure LLM Chat!</strong> Chat with a language model (GPT-2 or Llama2.c) running in your browser. | |
| </div> | |
| <div class="alert alert-success"> | |
| <strong>💡 Try these prompts:</strong><br> | |
| • "Tell me a story about space exploration"<br> | |
| • "Explain machine learning in simple terms"<br> | |
| • "Write a poem about artificial intelligence"<br> | |
| • "What are the benefits of renewable energy?" | |
| </div> | |
| <div class="grid"> | |
| <div> | |
| <label for="llmPrompt">Your Prompt</label> | |
| <textarea id="llmPrompt" rows="3" placeholder="Enter your prompt for the language model..."></textarea> | |
| </div> | |
| <div> | |
| <label for="maxTokens">Max Tokens</label> | |
| <div class="slider-container"> | |
| <input type="range" id="maxTokens" class="slider" min="20" max="200" value="100" oninput="updateSliderValue('maxTokens')"> | |
| <span id="maxTokensValue" class="slider-value">100</span> | |
| </div> | |
| <label for="temperature">Temperature</label> | |
| <div class="slider-container"> | |
| <input type="range" id="temperature" class="slider" min="0.1" max="1.5" step="0.1" value="0.7" oninput="updateSliderValue('temperature')"> | |
| <span id="temperatureValue" class="slider-value">0.7</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="display: flex; gap: 10px;"> | |
| <button onclick="chatWithLLM()" id="llmBtn">🚀 Generate Text</button> | |
| <button class="btn-secondary" onclick="chatWithLLMRAG()" id="llmRagBtn">🤖 LLM + RAG</button> | |
| </div> | |
| <div id="llmResponse" class="result" style="display: none;"></div> | |
| </div> | |
| <!-- Semantic Search Tab --> | |
| <div id="search" class="tab-content"> | |
| <div class="alert alert-info"> | |
| <strong>🔮 Real semantic search!</strong> Using transformer embeddings to find documents by meaning. | |
| </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()" id="searchBtn">🔮 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> Upload files or paste text with real AI embeddings. | |
| </div> | |
| <!-- File Upload Section --> | |
| <div class="upload-section"> | |
| <h4>📁 Upload Files</h4> | |
| <div class="upload-area" id="uploadArea"> | |
| <div class="upload-content"> | |
| <div class="upload-icon">📄</div> | |
| <div class="upload-text"> | |
| <strong>Drop files here or click to select</strong> | |
| <br>Supports: .md, .txt, .json, .csv, .html, .js, .py, .xml | |
| </div> | |
| </div> | |
| <input type="file" id="fileInput" accept=".md,.txt,.json,.csv,.html,.js,.py,.xml,.rst,.yaml,.yml" multiple style="display: none;"> | |
| </div> | |
| <div id="uploadProgress" class="progress-container" style="display: none;"> | |
| <div class="progress-bar" id="uploadProgressBar"></div> | |
| <div class="progress-text" id="uploadProgressText">Processing files...</div> | |
| </div> | |
| <div id="uploadStatus" class="result" style="display: none;"></div> | |
| </div> | |
| <div class="divider">OR</div> | |
| <!-- Manual Entry Section --> | |
| <div class="manual-entry"> | |
| <h4>✏️ Manual Entry</h4> | |
| <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="addDocumentManual()" id="addBtn">📝 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> | |
| </div> | |
| <!-- System Test Tab --> | |
| <div id="test" class="tab-content"> | |
| <div class="alert alert-info"> | |
| <strong>🧪 Test the system</strong> to verify AI models are working correctly. | |
| </div> | |
| <button onclick="testSystem()" id="testBtn">🧪 Run System Test</button> | |
| <div id="testOutput" class="result" style="display: none;"></div> | |
| </div> | |
| </div> | |
| <script src="index.js" type="module"></script> | |
| </body> | |
| </html> |