Spaces:
Running
Running
File size: 11,571 Bytes
27613d2 cca4a24 27613d2 cca4a24 27613d2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 |
<!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>
<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> |