index.html

<!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>

    <!-- Random Test Suite Card -->
    <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>

    <!-- Playground Form -->
    <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>

    <!-- Output Ranking -->
    <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>