| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Spectral Nearest Neighbours Playground</title> |
| <style> |
| :root { |
| --bg: #070a12; |
| --card: #0f172a; |
| --card-border: #1e293b; |
| --ink: #f8fafc; |
| --mute: #94a3b8; |
| --accent: #38bdf8; |
| --spec: #f59e0b; |
| --ok: #22c55e; |
| } |
| * { box-sizing: border-box; } |
| body { |
| margin: 0; background: var(--bg); color: var(--ink); |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| padding: 24px; |
| } |
| .container { max-width: 1100px; margin: 0 auto; } |
| header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } |
| .badge { background: #0369a1; color: #fff; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; } |
| .card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 20px; margin-bottom: 18px; } |
| h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #e2e8f0; } |
| input, textarea { width: 100%; background: #020617; border: 1px solid var(--card-border); color: #fff; border-radius: 8px; padding: 10px; outline: none; margin-bottom: 10px; } |
| .btn { background: var(--accent); color: #020617; border: 0; padding: 9px 18px; border-radius: 8px; font-weight: 700; cursor: pointer; } |
| .btn-secondary { background: #334155; color: #f8fafc; margin-left: 8px; } |
| .btn:hover { filter: brightness(1.1); } |
| .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } |
| .chip { background: #1e293b; color: var(--mute); border: 1px solid #334155; padding: 5px 12px; border-radius: 99px; font-size: 12px; cursor: pointer; } |
| .chip:hover { color: #fff; border-color: var(--accent); } |
| .results-list { list-style: none; padding: 0; margin: 0; } |
| .item { display: flex; justify-content: space-between; align-items: center; background: #020617; border: 1px solid var(--card-border); padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; } |
| .item-rank { font-weight: 700; color: var(--spec); width: 24px; } |
| .item-text { flex: 1; padding: 0 12px; font-size: 14px; } |
| .item-sim { font-family: monospace; color: var(--ok); font-weight: 600; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <div> |
| <h1 style="margin:0;font-size:22px;">⚡ Spectral Embeddings Playground</h1> |
| <div style="color:var(--mute);font-size:13px;margin-top:4px;">Direct evaluation of <code>JMullings/Spectral_Embeddings</code></div> |
| </div> |
| <span class="badge">Model: 3.93 MB · 0.45 ms</span> |
| </header> |
|
|
| |
| <div class="card" style="border-color: #0284c7; background: #082f4922;"> |
| <h2>🎲 Automated NN Probe & Random Generator</h2> |
| <p style="font-size:13px;color:var(--mute);margin:0 0 12px;">Instantly populate diverse domains to benchmark semantic discrimination.</p> |
| <div class="chips"> |
| <button class="chip" onclick="loadProbe(0)">🔑 Auth & Security</button> |
| <button class="chip" onclick="loadProbe(1)">🤖 Machine Learning</button> |
| <button class="chip" onclick="loadProbe(2)">🧬 Biology & Medicine</button> |
| <button class="chip" onclick="loadProbe(3)">⚡ Algorithms</button> |
| <button class="chip" onclick="generateRandomList()">🔀 Shuffle Random 6-Domain Mix</button> |
| </div> |
| </div> |
|
|
| |
| <div class="card"> |
| <h2>Target Sentence (Anchor)</h2> |
| <input id="targetInput" value="How do I reset my account password?"> |
|
|
| <h2>Neighbor Sentences (Candidates to Rank)</h2> |
| <textarea id="neighborsInput" rows="6">Steps to change login credentials and regain account access. |
| I forgot my password and need to restore my profile. |
| Enable two-factor authentication for higher security. |
| The capital of France is Paris with many historic landmarks. |
| Database indexes improve query retrieval speed at write expense. |
| Quicksort has an average runtime complexity of O(n log n).</textarea> |
|
|
| <div style="margin-top:6px;"> |
| <button class="btn" id="runBtn" onclick="computeRankings()">Compute Nearest Neighbors</button> |
| <span id="latencySpan" style="font-size:12px;color:var(--mute);margin-left:12px;"></span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" id="resultsCard" style="display:none;"> |
| <h2>Nearest Neighbor Ranking (Spectral Manifold)</h2> |
| <ul class="results-list" id="resultsUl"></ul> |
| </div> |
| </div> |
|
|
| <script> |
| const PROBES = [ |
| { |
| target: "How do I reset my account password?", |
| list: [ |
| "Steps to change login credentials and regain account access.", |
| "I forgot my password and need to restore my profile.", |
| "Enable two-factor authentication for higher security.", |
| "The capital of France is Paris with many historic landmarks.", |
| "Mitochondria produce cellular ATP through oxidative phosphorylation." |
| ] |
| }, |
| { |
| target: "Transformers utilize self-attention mechanisms to process sequential text.", |
| list: [ |
| "Self-attention layers in transformer models model contextual token dependencies.", |
| "Deep neural networks learn hierarchical feature representations from data.", |
| "The optimizer updates model weights step by step down the loss gradient.", |
| "To make espresso, force pressurized hot water through finely ground coffee.", |
| "The local hockey team won their championship game on Sunday evening." |
| ] |
| }, |
| { |
| target: "Antibiotics target bacterial cell walls without damaging human cells.", |
| list: [ |
| "Antimicrobial drugs kill bacteria by disrupting bacterial peptidoglycan synthesis.", |
| "Supernovae scatter heavy elements into the surrounding interstellar medium.", |
| "Monetary tightening through rate hikes aims to cool overheated consumer prices.", |
| "Central banks raise interest rates to suppress rising inflation." |
| ] |
| }, |
| { |
| target: "Quicksort has an average runtime complexity of O(n log n).", |
| list: [ |
| "Partitioning around pivot elements yields n log n expected sorting performance.", |
| "B-tree indices speed up SELECT lookups but increase INSERT latency.", |
| "Database indexes improve query retrieval speed at write expense.", |
| "The ancient Roman colosseum hosted gladiatorial games and spectacles." |
| ] |
| } |
| ]; |
| |
| const RANDOM_POOL = [ |
| "Deadlocks occur when concurrent threads hold locks while waiting on each other.", |
| "Quantum entanglement links particle quantum states across space.", |
| "Central banks raise interest rates to suppress rising inflation.", |
| "Monet painted water lilies using impressionist brushstroke techniques.", |
| "Bake the bread dough at 200 degrees Celsius for 30 minutes.", |
| "Supernovae scatter heavy elements into the surrounding interstellar medium.", |
| "The stock index gained two percent following quarterly corporate earnings." |
| ]; |
| |
| function loadProbe(idx) { |
| const p = PROBES[idx]; |
| if (!p) return; |
| document.getElementById("targetInput").value = p.target; |
| document.getElementById("neighborsInput").value = p.list.join("\n"); |
| computeRankings(); |
| } |
| |
| function generateRandomList() { |
| const shuffled = [...RANDOM_POOL].sort(() => 0.5 - Math.random()).slice(0, 5); |
| const randomProbe = PROBES[Math.floor(Math.random() * PROBES.length)]; |
| document.getElementById("targetInput").value = randomProbe.target; |
| shuffled.unshift(randomProbe.list[0]); |
| document.getElementById("neighborsInput").value = shuffled.join("\n"); |
| computeRankings(); |
| } |
| |
| function meanCenter(embeddings) { |
| const dim = embeddings[0].length; |
| const mean = new Float32Array(dim); |
| for (let i = 0; i < embeddings.length; i++) { |
| for (let d = 0; d < dim; d++) mean[d] += embeddings[i][d]; |
| } |
| for (let d = 0; d < dim; d++) mean[d] /= embeddings.length; |
| |
| return embeddings.map(emb => { |
| const centered = new Float32Array(dim); |
| let norm = 0; |
| for (let d = 0; d < dim; d++) { |
| centered[d] = emb[d] - mean[d]; |
| norm += centered[d] * centered[d]; |
| } |
| norm = Math.sqrt(norm) || 1e-12; |
| return Array.from(centered, x => x / norm); |
| }); |
| } |
| |
| async function computeRankings() { |
| const target = document.getElementById("targetInput").value.trim(); |
| const cands = document.getElementById("neighborsInput").value.split("\n").map(s => s.trim()).filter(Boolean); |
| if (!target || !cands.length) return; |
| |
| const t0 = performance.now(); |
| const resp = await fetch("/api/embed", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ input: [target, ...cands] }) |
| }); |
| const data = await resp.json(); |
| const elapsed = (performance.now() - t0).toFixed(2); |
| |
| document.getElementById("latencySpan").textContent = |
| `Processed in ${elapsed} ms (${(elapsed / (cands.length + 1)).toFixed(3)} ms/sent)`; |
| |
| const normalizedEmbs = meanCenter(data.embeddings); |
| const tEmb = normalizedEmbs[0]; |
| |
| const scored = cands.map((c, i) => { |
| const emb = normalizedEmbs[i + 1]; |
| let dot = 0; |
| for (let j = 0; j < tEmb.length; j++) dot += tEmb[j] * emb[j]; |
| return { text: c, score: dot }; |
| }); |
| |
| scored.sort((a, b) => b.score - a.score); |
| |
| const ul = document.getElementById("resultsUl"); |
| ul.innerHTML = ""; |
| scored.forEach((item, idx) => { |
| const li = document.createElement("li"); |
| li.className = "item"; |
| li.innerHTML = ` |
| <span class="item-rank">#${idx + 1}</span> |
| <span class="item-text">${item.text}</span> |
| <span class="item-sim">cos: ${item.score.toFixed(6)}</span> |
| `; |
| ul.appendChild(li); |
| }); |
| document.getElementById("resultsCard").style.display = "block"; |
| } |
| |
| window.addEventListener("DOMContentLoaded", computeRankings); |
| </script> |
| </body> |
| </html> |
