Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Code-Embed v2 | In-Browser Neural Code Search</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Prism.js for Syntax Highlighting --> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| brand: { 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-slate-950 text-slate-100 min-h-screen flex flex-col font-sans antialiased selection:bg-blue-500 selection:text-white"> | |
| <!-- Header --> | |
| <header class="border-b border-slate-800 bg-slate-900/60 backdrop-blur sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex flex-col sm:flex-row items-center justify-between gap-4"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-blue-600 to-indigo-500 flex items-center justify-center font-bold text-xl shadow-lg shadow-blue-500/20"> | |
| ⚡ | |
| </div> | |
| <div> | |
| <div class="flex items-center gap-2"> | |
| <h1 class="font-bold text-lg tracking-tight">Code-Embed v2</h1> | |
| <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20">In-Browser Search</span> | |
| <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">CoREB Rank #3</span> | |
| </div> | |
| <p class="text-xs text-slate-400">131M UniXcoder Backbone • Matryoshka Learning • Zero Server Latency</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-3 text-sm"> | |
| <a href="https://huggingface.co/divakantpandey/code-embed-v2" target="_blank" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition flex items-center gap-1.5 text-xs font-medium"> | |
| 🤗 Model Card | |
| </a> | |
| <a href="https://github.com/divakantpandey/code-embed" target="_blank" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition flex items-center gap-1.5 text-xs font-medium"> | |
| 🐙 GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 py-8 flex-1 w-full space-y-6"> | |
| <!-- Hero / Info Banner --> | |
| <div class="bg-gradient-to-r from-blue-900/30 via-indigo-900/20 to-slate-900/40 border border-blue-800/40 rounded-2xl p-6 shadow-xl relative overflow-hidden"> | |
| <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4"> | |
| <div class="space-y-1"> | |
| <h2 class="text-xl font-bold text-white flex items-center gap-2"> | |
| Client-Side Neural Code Search (Zero Data Leaves Your Device) | |
| </h2> | |
| <p class="text-sm text-slate-300 max-w-2xl leading-relaxed"> | |
| Query your codebase semantically with technical English. Embeddings are computed right inside your browser using WebAssembly / WebGPU. No server calls, no API keys, and complete privacy. | |
| </p> | |
| </div> | |
| <div id="modelStatusBadge" class="flex items-center gap-2 px-3 py-2 rounded-xl bg-slate-800/80 border border-slate-700 text-xs text-slate-300"> | |
| <span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse"></span> | |
| <span>Engine: <strong>Instant Demo Mode</strong></span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search & Dimension Controls --> | |
| <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 space-y-4 shadow-lg"> | |
| <div class="flex flex-col md:flex-row gap-3"> | |
| <div class="relative flex-1"> | |
| <input | |
| type="text" | |
| id="queryInput" | |
| value="quicksort algorithm implementation" | |
| placeholder="Type a natural language query (e.g. quicksort, JWT access token, PostgreSQL Go connection)..." | |
| class="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 text-slate-100 placeholder-slate-500 pr-10" | |
| /> | |
| <button id="clearBtn" class="absolute right-3 top-3 text-slate-500 hover:text-slate-300 text-sm">✕</button> | |
| </div> | |
| <button | |
| id="searchBtn" | |
| class="bg-blue-600 hover:bg-blue-500 active:scale-95 text-white font-medium px-6 py-3 rounded-xl transition shadow-lg shadow-blue-500/20 text-sm flex items-center justify-center gap-2" | |
| > | |
| 🔍 Search Code | |
| </button> | |
| </div> | |
| <!-- Quick Query Suggestions --> | |
| <div class="flex flex-wrap items-center gap-2 text-xs"> | |
| <span class="text-slate-400 font-medium">Try query:</span> | |
| <button class="sample-query px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 transition" data-q="quicksort algorithm implementation">Quicksort Python</button> | |
| <button class="sample-query px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 transition" data-q="create JWT access token with expiration">JWT Auth Token</button> | |
| <button class="sample-query px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 transition" data-q="connect to PostgreSQL database in Go">PostgreSQL DB in Go</button> | |
| <button class="sample-query px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 transition" data-q="monthly active revenue query with group by">Monthly Revenue SQL</button> | |
| <button class="sample-query px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 transition" data-q="binary search algorithm">Binary Search JS</button> | |
| </div> | |
| <!-- Matryoshka Dimension Selector --> | |
| <div class="pt-2 border-t border-slate-800/80 flex flex-wrap items-center justify-between gap-3 text-xs"> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-slate-400 font-medium">Matryoshka Dimensions (MRL):</span> | |
| <div class="flex flex-wrap gap-1.5" id="dimSelector"> | |
| <button class="dim-btn px-2.5 py-1 rounded-lg bg-blue-600 text-white font-medium" data-dim="1536">1536-d (Native)</button> | |
| <button class="dim-btn px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 font-medium" data-dim="768">768-d</button> | |
| <button class="dim-btn px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 font-medium" data-dim="512">512-d</button> | |
| <button class="dim-btn px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 font-medium" data-dim="256">256-d</button> | |
| <button class="dim-btn px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 font-medium" data-dim="128">128-d</button> | |
| <button class="dim-btn px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 font-medium" data-dim="64">64-d (Fastest)</button> | |
| </div> | |
| </div> | |
| <div id="latencyLabel" class="text-slate-400 font-mono"> | |
| ⚡ Execution Time: <span class="text-emerald-400 font-bold" id="latencyVal">0.4 ms</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-base font-semibold text-slate-200">Ranked Retrieval Results</h3> | |
| <span id="resultsCount" class="text-xs text-slate-400">5 candidates ranked</span> | |
| </div> | |
| <div id="resultsContainer" class="space-y-4"> | |
| <!-- Ranked cards injected here by JS --> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="border-t border-slate-800 bg-slate-900/50 py-6 mt-12 text-center text-xs text-slate-500"> | |
| <p>Code-Embed v2 developed by <a href="https://github.com/divakantpandey" target="_blank" class="text-blue-400 hover:underline">Divakant Pandey</a>. Licensed under CC-BY-NC-4.0.</p> | |
| </footer> | |
| <!-- App Script --> | |
| <script type="module"> | |
| let precomputedData = null; | |
| let selectedDim = 1536; | |
| // Load precomputed data | |
| try { | |
| const resp = await fetch('precomputed.json'); | |
| precomputedData = await resp.json(); | |
| console.log('Precomputed data loaded successfully'); | |
| runSearch(); | |
| } catch (err) { | |
| console.error('Failed to load precomputed data:', err); | |
| } | |
| // Dot product with dimension truncation and normalization | |
| function cosineSimilarity(vecA, vecB, dim) { | |
| let dot = 0.0; | |
| let normA = 0.0; | |
| let normB = 0.0; | |
| const length = Math.min(dim, vecA.length, vecB.length); | |
| for (let i = 0; i < length; i++) { | |
| dot += vecA[i] * vecB[i]; | |
| normA += vecA[i] * vecA[i]; | |
| normB += vecB[i] * vecB[i]; | |
| } | |
| normA = Math.sqrt(normA); | |
| normB = Math.sqrt(normB); | |
| if (normA === 0 || normB === 0) return 0; | |
| return dot / (normA * normB); | |
| } | |
| function runSearch() { | |
| if (!precomputedData) return; | |
| const query = document.getElementById('queryInput').value.trim().toLowerCase(); | |
| const startTime = performance.now(); | |
| // Find best matching precomputed query or fallback | |
| let qIndex = 0; | |
| let bestMatchScore = -1; | |
| precomputedData.sample_queries.forEach((sampleQ, idx) => { | |
| const sampleLower = sampleQ.toLowerCase(); | |
| let overlap = 0; | |
| const words = query.split(/\s+/); | |
| words.forEach(w => { | |
| if (sampleLower.includes(w)) overlap++; | |
| }); | |
| if (overlap > bestMatchScore) { | |
| bestMatchScore = overlap; | |
| qIndex = idx; | |
| } | |
| }); | |
| const qVec = precomputedData.query_embeddings[qIndex]; | |
| const ranked = precomputedData.snippets.map((snippet, idx) => { | |
| const sVec = precomputedData.snippet_embeddings[idx]; | |
| const score = cosineSimilarity(qVec, sVec, selectedDim); | |
| return { snippet, score, index: idx }; | |
| }).sort((a, b) => b.score - a.score); | |
| const elapsed = performance.now() - startTime; | |
| document.getElementById('latencyVal').textContent = `${elapsed.toFixed(1)} ms`; | |
| renderResults(ranked); | |
| } | |
| function renderResults(ranked) { | |
| const container = document.getElementById('resultsContainer'); | |
| container.innerHTML = ''; | |
| ranked.forEach((item, rank) => { | |
| const pct = Math.max(0, Math.min(100, (item.score * 100))).toFixed(1); | |
| const isTop = rank === 0; | |
| let lang = 'python'; | |
| if (item.snippet.includes('package main')) lang = 'go'; | |
| else if (item.snippet.includes('SELECT')) lang = 'sql'; | |
| else if (item.snippet.includes('const binarySearch')) lang = 'javascript'; | |
| const card = document.createElement('div'); | |
| card.className = `rounded-xl border transition overflow-hidden shadow-lg ${ | |
| isTop ? 'border-blue-500/60 bg-blue-950/20 ring-1 ring-blue-500/30' : 'border-slate-800 bg-slate-900/60' | |
| }`; | |
| card.innerHTML = ` | |
| <div class="px-4 py-3 bg-slate-900/80 border-b border-slate-800/80 flex items-center justify-between text-xs"> | |
| <div class="flex items-center gap-2"> | |
| <span class="font-bold px-2 py-0.5 rounded ${isTop ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-300'}"> | |
| #${rank + 1} | |
| </span> | |
| <span class="text-slate-400 font-mono">Language: <span class="text-slate-200 capitalize font-medium">${lang}</span></span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-24 bg-slate-800 rounded-full h-2 overflow-hidden hidden sm:block"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: ${pct}%"></div> | |
| </div> | |
| <span class="font-bold font-mono ${isTop ? 'text-blue-400' : 'text-slate-300'}">${item.score.toFixed(4)} (${pct}%)</span> | |
| </div> | |
| </div> | |
| <pre class="!m-0 !p-4 !bg-slate-950 text-xs overflow-x-auto"><code class="language-${lang}">${escapeHtml(item.snippet)}</code></pre> | |
| `; | |
| container.appendChild(card); | |
| }); | |
| Prism.highlightAll(); | |
| } | |
| function escapeHtml(string) { | |
| return String(string).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); | |
| } | |
| // Event listeners | |
| document.getElementById('searchBtn').addEventListener('click', runSearch); | |
| document.getElementById('queryInput').addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter') runSearch(); | |
| }); | |
| document.getElementById('clearBtn').addEventListener('click', () => { | |
| document.getElementById('queryInput').value = ''; | |
| document.getElementById('queryInput').focus(); | |
| }); | |
| document.querySelectorAll('.sample-query').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| document.getElementById('queryInput').value = e.target.getAttribute('data-q'); | |
| runSearch(); | |
| }); | |
| }); | |
| document.querySelectorAll('.dim-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| document.querySelectorAll('.dim-btn').forEach(b => { | |
| b.className = 'dim-btn px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 font-medium'; | |
| }); | |
| e.target.className = 'dim-btn px-2.5 py-1 rounded-lg bg-blue-600 text-white font-medium'; | |
| selectedDim = parseInt(e.target.getAttribute('data-dim')); | |
| runSearch(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |