Spaces:
Running
Running
| import { pipeline, cos_sim } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0"; | |
| const form = document.getElementById("ask-form"); | |
| const input = document.getElementById("question"); | |
| const askBtn = document.getElementById("ask-btn"); | |
| const btnLabel = askBtn.querySelector(".btn-label"); | |
| const spinner = askBtn.querySelector(".spinner"); | |
| const result = document.getElementById("result"); | |
| const sourcesList = document.getElementById("sources-list"); | |
| const errorEl = document.getElementById("error"); | |
| const statusBadge = document.getElementById("status-badge"); | |
| let embedder = null; | |
| let index = []; // [{page, modality, text, image, embedding}] | |
| function setLoading(isLoading) { | |
| askBtn.disabled = isLoading; | |
| spinner.hidden = !isLoading; | |
| btnLabel.textContent = isLoading ? "Searching" : "Search"; | |
| } | |
| function enableUI() { | |
| input.disabled = false; | |
| askBtn.disabled = false; | |
| document.querySelectorAll(".chip").forEach((c) => (c.disabled = false)); | |
| } | |
| async function init() { | |
| try { | |
| const [model, data] = await Promise.all([ | |
| pipeline("feature-extraction", "Xenova/all-MiniLM-L6-v2"), | |
| fetch("data/index.json").then((r) => { | |
| if (!r.ok) throw new Error("index.json not found"); | |
| return r.json(); | |
| }), | |
| ]); | |
| embedder = model; | |
| index = data; | |
| statusBadge.textContent = `index ready · ${index.length} chunks`; | |
| statusBadge.classList.add("ok"); | |
| enableUI(); | |
| } catch (err) { | |
| statusBadge.textContent = "failed to load index"; | |
| statusBadge.classList.add("bad"); | |
| errorEl.textContent = | |
| "Could not load the model or data/index.json. Make sure data/index.json and images/ were copied in (see README.md)."; | |
| errorEl.hidden = false; | |
| } | |
| } | |
| async function embedQuery(text) { | |
| const output = await embedder(text, { pooling: "mean", normalize: true }); | |
| return Array.from(output.data); | |
| } | |
| function renderResults(hits) { | |
| sourcesList.innerHTML = ""; | |
| hits.forEach((h) => { | |
| const item = document.createElement("div"); | |
| item.className = "source-item"; | |
| if (h.image) { | |
| const img = document.createElement("img"); | |
| img.src = `images/${h.image}`; | |
| img.alt = `Page ${h.page} visual`; | |
| item.appendChild(img); | |
| } | |
| const body = document.createElement("div"); | |
| const meta = document.createElement("div"); | |
| meta.className = "source-meta"; | |
| meta.innerHTML = `<span class="source-page">PAGE ${h.page}</span><span class="source-modality">${h.modality}</span><span class="source-score">${(h.score * 100).toFixed(0)}% match</span>`; | |
| const snippet = document.createElement("p"); | |
| snippet.className = "source-snippet"; | |
| snippet.textContent = h.text.length > 400 ? h.text.slice(0, 400) + "…" : h.text; | |
| body.appendChild(meta); | |
| body.appendChild(snippet); | |
| item.appendChild(body); | |
| sourcesList.appendChild(item); | |
| }); | |
| } | |
| async function ask(question) { | |
| errorEl.hidden = true; | |
| setLoading(true); | |
| try { | |
| const qEmb = await embedQuery(question); | |
| const scored = index.map((chunk) => ({ | |
| ...chunk, | |
| score: cos_sim(qEmb, chunk.embedding), | |
| })); | |
| scored.sort((a, b) => b.score - a.score); | |
| renderResults(scored.slice(0, 5)); | |
| result.hidden = false; | |
| } catch (err) { | |
| errorEl.textContent = "Search failed — check the console for details."; | |
| errorEl.hidden = false; | |
| console.error(err); | |
| } finally { | |
| setLoading(false); | |
| } | |
| } | |
| form.addEventListener("submit", (e) => { | |
| e.preventDefault(); | |
| const q = input.value.trim(); | |
| if (!q) return; | |
| ask(q); | |
| }); | |
| document.querySelectorAll(".chip").forEach((chip) => { | |
| chip.addEventListener("click", () => { | |
| const q = chip.dataset.q; | |
| input.value = q; | |
| ask(q); | |
| }); | |
| }); | |
| init(); | |