Update: Re-rank button label after ranking + new doc

assets/index-C0wdVFKl.css

@@ -0,0 +1 @@
+*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #07080A;--surface: #0D0F12;--border: #1C1F26;--border-hi: #2E3340;--amber: #F59E0B;--amber-dim: #7C4F05;--amber-glow: rgba(245,158,11,.12);--green: #22C55E;--red: #EF4444;--text: #E2E8F0;--text-dim: #4A5568;--text-mid: #94A3B8;--mono: "JetBrains Mono", monospace;--display: "Syne", sans-serif}html{background:var(--bg);color:var(--text);font-family:var(--mono)}body{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(ellipse 80% 40% at 50% -10%,rgba(245,158,11,.06) 0%,transparent 60%),var(--bg)}header{padding:2rem 2rem 0;max-width:860px;margin:0 auto;width:100%}.header-tag{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--amber);font-weight:600;display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.header-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;box-shadow:0 0 8px var(--amber)}50%{opacity:.4;box-shadow:0 0 3px var(--amber)}}.header-title{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--text)}.header-title span{color:var(--amber)}.header-sub{margin-top:.6rem;font-size:.75rem;color:var(--text-dim);font-weight:300;letter-spacing:.02em}.header-sub a{color:var(--text-mid);text-decoration:none;border-bottom:1px solid var(--border-hi)}.header-sub a:hover{color:var(--amber);border-color:var(--amber)}main{max-width:860px;margin:0 auto;width:100%;padding:2rem 2rem 3rem}#status-bar{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.75rem 1rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem;font-size:.72rem;transition:border-color .3s}#status-bar.loading{border-color:var(--amber-dim)}#status-bar.ready{border-color:#166534}#status-bar.error{border-color:#7f1d1d}.status-icon{width:8px;height:8px;border-radius:50%;background:var(--text-dim);flex-shrink:0}#status-bar.loading .status-icon{background:var(--amber);animation:pulse-dot 1s infinite}#status-bar.ready .status-icon{background:var(--green)}#status-bar.error .status-icon{background:var(--red)}#status-text{color:var(--text-mid);flex:1}#progress-bar-wrap{height:2px;flex:1;max-width:120px;background:var(--border);border-radius:1px;overflow:hidden;display:none}#progress-bar-wrap.visible{display:block}#progress-bar{height:100%;background:var(--amber);width:0%;transition:width .3s ease;border-radius:1px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin-bottom:1rem}.panel-label{font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:.6rem}#query-panel{border-color:var(--amber-dim)}#query-input{width:100%;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:.9rem;font-weight:400;resize:none;line-height:1.6;min-height:2.5rem;max-height:8rem;overflow-y:auto}#query-input::placeholder{color:var(--text-dim)}.instruction-row{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border)}.instruction-label{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;font-weight:600}#instruction-input{flex:1;background:transparent;border:none;outline:none;color:var(--text-mid);font-family:var(--mono);font-size:.72rem;font-style:italic}#docs-list{display:flex;flex-direction:column;gap:.5rem}.doc-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.85rem 1rem;display:grid;grid-template-columns:1.6rem 1fr auto;gap:.6rem;align-items:start;transition:border-color .2s,box-shadow .2s;will-change:transform;animation:card-in .25s ease both}@keyframes card-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.doc-card:focus-within{border-color:var(--border-hi)}.doc-index{font-size:.65rem;color:var(--text-dim);font-weight:600;padding-top:.15rem;user-select:none}.doc-text{width:100%;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:.8rem;font-weight:300;resize:none;line-height:1.65;min-height:2.4rem;max-height:6rem;overflow-y:auto}.doc-text::placeholder{color:var(--text-dim)}.doc-score-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;min-width:3.5rem}.doc-score-num{font-size:1.1rem;font-weight:700;color:var(--text-dim);font-variant-numeric:tabular-nums;transition:color .4s;line-height:1}.doc-score-bar-wrap{width:3rem;height:3px;background:var(--border);border-radius:1.5px;overflow:hidden}.doc-score-bar{height:100%;width:0%;background:var(--text-dim);border-radius:1.5px;transition:width .6s cubic-bezier(.16,1,.3,1),background .4s}.doc-card.ranked-1{border-color:#f59e0b66;background:#f59e0b0a}.doc-card.ranked-1 .doc-score-num{color:var(--amber)}.doc-card.ranked-1 .doc-score-bar{background:var(--amber)}.doc-card.ranked-2 .doc-score-num{color:#a78bfa}.doc-card.ranked-2 .doc-score-bar{background:#a78bfa}.doc-card.ranked-3 .doc-score-num{color:#60a5fa}.doc-card.ranked-3 .doc-score-bar{background:#60a5fa}.doc-card.computing{border-color:var(--amber-dim);box-shadow:inset 3px 0 0 var(--amber),0 0 12px #f59e0b14;animation:card-compute-pulse 1.4s ease-in-out infinite}@keyframes card-compute-pulse{0%,to{box-shadow:inset 3px 0 0 var(--amber),0 0 8px #f59e0b0f}50%{box-shadow:inset 3px 0 0 var(--amber),0 0 18px #f59e0b2e}}.doc-card.computing .doc-score-num{display:inline-block;color:var(--amber);font-size:1.2rem;animation:spin .7s linear infinite;transform-origin:center}@keyframes spin{to{transform:rotate(360deg)}}.doc-card.computing .doc-score-bar{background:var(--amber);width:100%!important;animation:bar-indeterminate 1.2s ease-in-out infinite;transform-origin:left}@keyframes bar-indeterminate{0%{transform:scaleX(0);opacity:.6}50%{transform:scaleX(1);opacity:1}to{transform:scaleX(0);opacity:.6}}.doc-card.needs-rank{border-color:var(--amber-dim);border-style:dashed}.doc-card.needs-rank .doc-score-num:after{content:" ↺";font-size:.65rem;color:var(--amber-dim)}.doc-card.flipping{transition:transform .45s cubic-bezier(.16,1,.3,1)}.actions-row{display:flex;gap:.6rem;margin-top:.75rem;align-items:center;flex-wrap:wrap}button{font-family:var(--mono);cursor:pointer;border:1px solid transparent;border-radius:5px;font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:.5rem 1rem;transition:all .15s;display:inline-flex;align-items:center;gap:.4rem}#rank-btn{background:var(--amber);color:#0a0a0a;border-color:var(--amber);padding:.55rem 1.4rem;font-size:.78rem}#rank-btn:hover:not(:disabled){background:#fbbf24;box-shadow:0 0 16px #f59e0b59}#rank-btn:disabled{opacity:.45;cursor:not-allowed}#rank-btn.running{animation:btn-pulse 1.2s ease-in-out infinite}@keyframes btn-pulse{0%,to{box-shadow:0 0 #f59e0b00}50%{box-shadow:0 0 20px #f59e0b80}}#add-doc-btn{background:transparent;color:var(--text-mid);border-color:var(--border-hi)}#add-doc-btn:hover{border-color:var(--amber-dim);color:var(--amber)}#clear-btn{background:transparent;color:var(--text-dim);border-color:transparent;margin-left:auto;font-size:.68rem}#clear-btn:hover{color:var(--red)}#results-header{display:none;align-items:center;gap:.75rem;margin:1.5rem 0 .75rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);font-weight:600}#results-header.visible{display:flex}#results-header:after{content:"";flex:1;height:1px;background:var(--border)}footer{padding:1rem 2rem;max-width:860px;margin:0 auto;width:100%;display:flex;align-items:center;gap:1rem;font-size:.62rem;color:var(--text-dim);border-top:1px solid var(--border)}footer a{color:var(--text-dim);text-decoration:none}footer a:hover{color:var(--amber)}.sep{color:var(--border-hi)}#runtime-info{margin-left:auto}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px}.dtype-select{background:var(--surface);border:1px solid var(--border-hi);border-radius:4px;color:var(--text-mid);font-family:var(--mono);font-size:.65rem;padding:.2rem .4rem;cursor:pointer;outline:none}.dtype-select:hover{border-color:var(--amber-dim)}

assets/index-CaEweXpE.js

@@ -0,0 +1 @@
+(function(){const c=document.createElement("link").relList;if(c&&c.supports&&c.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))o(t);new MutationObserver(t=>{for(const s of t)if(s.type==="childList")for(const a of s.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&o(a)}).observe(document,{childList:!0,subtree:!0});function r(t){const s={};return t.integrity&&(s.integrity=t.integrity),t.referrerPolicy&&(s.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?s.credentials="include":t.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function o(t){if(t.ep)return;t.ep=!0;const s=r(t);fetch(t.href,s)}})();const I="onnx-community/Qwen3-Reranker-0.6B-ONNX",$="Given a web search query, retrieve relevant passages that answer the query",N=["Paris is the capital and largest city of France, located in northern France.","Berlin is the capital city of Germany.","France is a country in Western Europe known for its wine, cuisine, and art.","The Eiffel Tower is a famous landmark located in Paris, France."];let b=0;const M=document.getElementById("status-bar"),R=document.getElementById("status-text"),x=document.getElementById("progress-bar-wrap"),F=document.getElementById("progress-bar"),i=document.getElementById("rank-btn"),v=document.getElementById("docs-list"),S=document.getElementById("results-header"),g=document.getElementById("dtype-select"),y=document.getElementById("query-input");let h=w();function w(){const e=new Worker(new URL(""+new URL("worker-Cv6xZSLB.js",import.meta.url).href,import.meta.url),{type:"module"});return e.addEventListener("message",O),e}const f=new Map;function O({data:e}){const{type:c}=e;if(c==="progress"){const r=e.progress!=null?Math.round(e.progress):null;u("loading",`${e.file??"model"} — ${r!=null?r+"%":"…"}`,r);return}if(c==="ready"){document.getElementById("runtime-info").textContent=`dtype: ${e.dtype}`,u("ready",`Model ready · ${I}`),i.disabled=!1,g.disabled=!1;return}if(c==="load_error"){u("error",`Failed to load: ${e.message}`),g.disabled=!1;return}if(c==="scored"){const r=f.get(e.id);r&&(r.resolve(e.score),f.delete(e.id));return}if(c==="score_error"){const r=f.get(e.id);r&&(r.reject(new Error(e.message)),f.delete(e.id));return}}function A(e,c,r,o){return new Promise((t,s)=>{f.set(e,{resolve:t,reject:s}),h.postMessage({type:"score",id:e,query:c,doc:r,instruction:o})})}function u(e,c,r=null){M.className=e,R.textContent=c,r!=null?(x.classList.add("visible"),F.style.width=`${r}%`):x.classList.remove("visible")}function C(e){e.style.height="auto",e.style.height=Math.min(e.scrollHeight,128)+"px"}y.addEventListener("input",()=>C(y));function B(e=""){const c=String(++b),r=document.createElement("div");r.className="doc-card",r.dataset.id=c,r.style.animationDelay=`${Math.min((b-1)*30,100)}ms`;const o=document.createElement("span");o.className="doc-index",o.textContent=c.padStart(2,"0");const t=document.createElement("textarea");t.className="doc-text",t.rows=2,t.placeholder="Paste a document or passage…",t.value=e,t.addEventListener("input",()=>C(t));const s=document.createElement("div");s.className="doc-score-wrap";const a=document.createElement("span");a.className="doc-score-num",a.textContent="—";const d=document.createElement("div");d.className="doc-score-bar-wrap";const n=document.createElement("div");n.className="doc-score-bar",d.appendChild(n),s.appendChild(a),s.appendChild(d),r.appendChild(o),r.appendChild(t),r.appendChild(s),v.appendChild(r)}let k=!1;function D(){k&&(i.textContent="↺ Re-rank")}N.forEach(e=>B(e));document.getElementById("add-doc-btn").addEventListener("click",()=>{B(),D()});document.getElementById("clear-btn").addEventListener("click",()=>{document.querySelectorAll(".doc-card").forEach(e=>{e.className="doc-card",e.querySelector(".doc-score-num").textContent="—",e.querySelector(".doc-score-bar").style.width="0%"}),S.classList.remove("visible")});function P(e,c,r){const o=performance.now(),t=a=>(a*100).toFixed(1)+"%";function s(a){const d=Math.min((a-o)/600,1),n=1-Math.pow(1-d,3);e.textContent=t(n*r),c.style.width=`${n*r*100}%`,d<1?requestAnimationFrame(s):e.textContent=t(r)}requestAnimationFrame(s)}function T(e,c){const r=new Map(e.map(o=>[o.dataset.id,o.getBoundingClientRect().top]));c.forEach(o=>{const t=v.querySelector(`[data-id="${CSS.escape(o)}"]`);t&&v.appendChild(t)}),e.forEach(o=>{const t=r.get(o.dataset.id)-o.getBoundingClientRect().top;Math.abs(t)>1&&(o.style.transform=`translateY(${t}px)`,o.style.transition="none",requestAnimationFrame(()=>{o.classList.add("flipping"),o.style.transform="translateY(0)",setTimeout(()=>{o.classList.remove("flipping"),o.style.transition=""},500)}))})}async function L(){const e=y.value.trim(),c=document.getElementById("instruction-input").value.trim()||$;if(!e){y.focus();return}document.querySelectorAll(".doc-card.needs-rank").forEach(n=>n.classList.remove("needs-rank"));const r=[...document.querySelectorAll(".doc-card")],o=r.map(n=>({id:n.dataset.id,text:n.querySelector(".doc-text").value.trim(),card:n})),t=o.filter(n=>n.text);if(!t.length)return;i.disabled=!0,i.classList.add("running"),i.textContent="⟳ Ranking…",t.forEach(({card:n})=>{n.classList.add("computing"),n.querySelector(".doc-score-num").textContent="⟳"});const s=[];for(let n=0;n<t.length;n++){const{id:l,text:E,card:m}=t[n];u("loading",`Scoring document ${n+1} / ${t.length}…`,n/t.length*100);try{const p=await A(l,e,E,c);m.classList.remove("computing"),P(m.querySelector(".doc-score-num"),m.querySelector(".doc-score-bar"),p),s.push({id:l,score:p,card:m})}catch(p){console.error("Scoring failed for doc",l,p),m.classList.remove("computing"),m.querySelector(".doc-score-num").textContent="err",u("error",`Error: ${p.message}`),s.push({id:l,score:-1,card:m})}}s.sort((n,l)=>l.score-n.score),s.forEach(({card:n},l)=>{n.className="doc-card",l<3&&n.classList.add(`ranked-${l+1}`)});const a=o.filter(n=>!n.text).map(n=>n.id);T(r,[...s.map(n=>n.id),...a]);const d=o.filter(n=>n.card.querySelector(".doc-text").value.trim()&&!t.some(E=>E.id===n.id));d.forEach(({card:n})=>n.classList.add("needs-rank")),d.length>0?u("ready",`Scored ${t.length} · ${d.length} unscored — hit Rank again ↺`):u("ready",`Scored ${t.length} document${t.length!==1?"s":""} · model ready`),S.classList.add("visible"),k=!0,i.disabled=!1,i.classList.remove("running"),i.textContent="↺ Re-rank"}i.addEventListener("click",L);function q(){const e=g.value;g.disabled=!0,i.disabled=!0,u("loading",`Downloading model (${e})…`,0),h.postMessage({type:"load",dtype:e})}g.addEventListener("change",()=>{i.removeEventListener("click",L),h.terminate(),h=w(),i.addEventListener("click",L),q()});q();

assets/ort-wasm-simd-threaded.asyncify-DFMnNRgU.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:de8f373400e38d4c253f5c6535be22825b733f5238f50bd331427b6ecb872afd
+size 22498509

index.html

@@ -7,490 +7,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,600;0,700;1,300&family=Syne:wght@700;800;900&display=swap" rel="stylesheet">
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    :root {
-      --bg:          #07080A;
-      --surface:     #0D0F12;
-      --border:      #1C1F26;
-      --border-hi:   #2E3340;
-      --amber:       #F59E0B;
-      --amber-dim:   #7C4F05;
-      --amber-glow:  rgba(245,158,11,0.12);
-      --green:       #22C55E;
-      --red:         #EF4444;
-      --text:        #E2E8F0;
-      --text-dim:    #4A5568;
-      --text-mid:    #94A3B8;
-      --mono:        'JetBrains Mono', monospace;
-      --display:     'Syne', sans-serif;
-    }
-
-    html { background: var(--bg); color: var(--text); font-family: var(--mono); }
-
-    body {
-      min-height: 100vh;
-      display: grid;
-      grid-template-rows: auto 1fr auto;
-      background:
-        radial-gradient(ellipse 80% 40% at 50% -10%, rgba(245,158,11,0.06) 0%, transparent 60%),
-        var(--bg);
-    }
-
-    /* ── Header ───────────────────────────────────────── */
-    header {
-      padding: 2rem 2rem 0;
-      max-width: 860px;
-      margin: 0 auto;
-      width: 100%;
-    }
-
-    .header-tag {
-      font-size: 0.65rem;
-      letter-spacing: 0.25em;
-      text-transform: uppercase;
-      color: var(--amber);
-      font-weight: 600;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      margin-bottom: 0.75rem;
-    }
-
-    .header-tag::before {
-      content: '';
-      width: 6px; height: 6px;
-      border-radius: 50%;
-      background: var(--amber);
-      box-shadow: 0 0 8px var(--amber);
-      animation: pulse-dot 2s ease-in-out infinite;
-    }
-
-    @keyframes pulse-dot {
-      0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--amber); }
-      50%       { opacity: 0.4; box-shadow: 0 0 3px var(--amber); }
-    }
-
-    .header-title {
-      font-family: var(--display);
-      font-size: clamp(1.8rem, 4vw, 2.6rem);
-      font-weight: 800;
-      letter-spacing: -0.02em;
-      line-height: 1.1;
-      color: var(--text);
-    }
-
-    .header-title span { color: var(--amber); }
-
-    .header-sub {
-      margin-top: 0.6rem;
-      font-size: 0.75rem;
-      color: var(--text-dim);
-      font-weight: 300;
-      letter-spacing: 0.02em;
-    }
-
-    .header-sub a { color: var(--text-mid); text-decoration: none; border-bottom: 1px solid var(--border-hi); }
-    .header-sub a:hover { color: var(--amber); border-color: var(--amber); }
-
-    /* ── Main ─────────────────────────────────────────── */
-    main {
-      max-width: 860px;
-      margin: 0 auto;
-      width: 100%;
-      padding: 2rem 2rem 3rem;
-    }
-
-    /* ── Status bar ───────────────────────────────────── */
-    #status-bar {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 0.75rem 1rem;
-      margin-bottom: 1.5rem;
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      font-size: 0.72rem;
-      transition: border-color 0.3s;
-    }
-
-    #status-bar.loading { border-color: var(--amber-dim); }
-    #status-bar.ready   { border-color: #166534; }
-    #status-bar.error   { border-color: #7f1d1d; }
-
-    .status-icon {
-      width: 8px; height: 8px;
-      border-radius: 50%;
-      background: var(--text-dim);
-      flex-shrink: 0;
-    }
-
-    #status-bar.loading .status-icon { background: var(--amber); animation: pulse-dot 1s infinite; }
-    #status-bar.ready   .status-icon { background: var(--green); }
-    #status-bar.error   .status-icon { background: var(--red); }
-
-    #status-text { color: var(--text-mid); flex: 1; }
-
-    #progress-bar-wrap {
-      height: 2px;
-      flex: 1;
-      max-width: 120px;
-      background: var(--border);
-      border-radius: 1px;
-      overflow: hidden;
-      display: none;
-    }
-
-    #progress-bar-wrap.visible { display: block; }
-
-    #progress-bar {
-      height: 100%;
-      background: var(--amber);
-      width: 0%;
-      transition: width 0.3s ease;
-      border-radius: 1px;
-    }
-
-    /* ── Panels ───────────────────────────────────────── */
-    .panel {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 1.25rem;
-      margin-bottom: 1rem;
-    }
-
-    .panel-label {
-      font-size: 0.6rem;
-      font-weight: 600;
-      letter-spacing: 0.2em;
-      text-transform: uppercase;
-      color: var(--amber);
-      margin-bottom: 0.6rem;
-    }
-
-    /* ── Query input ──────────────────────────────────── */
-    #query-panel { border-color: var(--amber-dim); }
-
-    #query-input {
-      width: 100%;
-      background: transparent;
-      border: none;
-      outline: none;
-      color: var(--text);
-      font-family: var(--mono);
-      font-size: 0.9rem;
-      font-weight: 400;
-      resize: none;
-      line-height: 1.6;
-      min-height: 2.5rem;
-      max-height: 8rem;
-      overflow-y: auto;
-    }
-
-    #query-input::placeholder { color: var(--text-dim); }
-
-    /* ── Instruction row ──────────────────────────────── */
-    .instruction-row {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      margin-top: 0.75rem;
-      padding-top: 0.75rem;
-      border-top: 1px solid var(--border);
-    }
-
-    .instruction-label {
-      font-size: 0.6rem;
-      letter-spacing: 0.15em;
-      text-transform: uppercase;
-      color: var(--text-dim);
-      white-space: nowrap;
-      font-weight: 600;
-    }
-
-    #instruction-input {
-      flex: 1;
-      background: transparent;
-      border: none;
-      outline: none;
-      color: var(--text-mid);
-      font-family: var(--mono);
-      font-size: 0.72rem;
-      font-style: italic;
-    }
-
-    /* ── Documents ────────────────────────────────────── */
-    #docs-list {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    .doc-card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 0.85rem 1rem;
-      display: grid;
-      grid-template-columns: 1.6rem 1fr auto;
-      gap: 0.6rem;
-      align-items: start;
-      transition: border-color 0.2s, box-shadow 0.2s;
-      will-change: transform;
-      animation: card-in 0.25s ease both;
-    }
-
-    @keyframes card-in {
-      from { opacity: 0; transform: translateY(6px); }
-      to   { opacity: 1; transform: translateY(0); }
-    }
-
-    .doc-card:focus-within { border-color: var(--border-hi); }
-
-    .doc-index {
-      font-size: 0.65rem;
-      color: var(--text-dim);
-      font-weight: 600;
-      padding-top: 0.15rem;
-      user-select: none;
-    }
-
-    .doc-text {
-      width: 100%;
-      background: transparent;
-      border: none;
-      outline: none;
-      color: var(--text);
-      font-family: var(--mono);
-      font-size: 0.8rem;
-      font-weight: 300;
-      resize: none;
-      line-height: 1.65;
-      min-height: 2.4rem;
-      max-height: 6rem;
-      overflow-y: auto;
-    }
-
-    .doc-text::placeholder { color: var(--text-dim); }
-
-    .doc-score-wrap {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      gap: 0.25rem;
-      min-width: 3.5rem;
-    }
-
-    .doc-score-num {
-      font-size: 1.1rem;
-      font-weight: 700;
-      color: var(--text-dim);
-      font-variant-numeric: tabular-nums;
-      transition: color 0.4s;
-      line-height: 1;
-    }
-
-    .doc-score-bar-wrap {
-      width: 3rem;
-      height: 3px;
-      background: var(--border);
-      border-radius: 1.5px;
-      overflow: hidden;
-    }
-
-    .doc-score-bar {
-      height: 100%;
-      width: 0%;
-      background: var(--text-dim);
-      border-radius: 1.5px;
-      transition: width 0.6s cubic-bezier(0.16,1,0.3,1), background 0.4s;
-    }
-
-    .doc-card.ranked-1 { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.04); }
-    .doc-card.ranked-1 .doc-score-num { color: var(--amber); }
-    .doc-card.ranked-1 .doc-score-bar { background: var(--amber); }
-    .doc-card.ranked-2 .doc-score-num { color: #A78BFA; }
-    .doc-card.ranked-2 .doc-score-bar { background: #A78BFA; }
-    .doc-card.ranked-3 .doc-score-num { color: #60A5FA; }
-    .doc-card.ranked-3 .doc-score-bar { background: #60A5FA; }
-
-    /* Active card being scored — amber left-border + glow pulse */
-    .doc-card.computing {
-      border-color: var(--amber-dim);
-      box-shadow: inset 3px 0 0 var(--amber), 0 0 12px rgba(245,158,11,0.08);
-      animation: card-compute-pulse 1.4s ease-in-out infinite;
-    }
-
-    @keyframes card-compute-pulse {
-      0%, 100% { box-shadow: inset 3px 0 0 var(--amber), 0 0 8px rgba(245,158,11,0.06); }
-      50%       { box-shadow: inset 3px 0 0 var(--amber), 0 0 18px rgba(245,158,11,0.18); }
-    }
-
-    /* CSS-only spinner — works even when WASM blocks the JS event loop */
-    .doc-card.computing .doc-score-num {
-      display: inline-block;          /* required for transform */
-      color: var(--amber);
-      font-size: 1.2rem;
-      animation: spin 0.7s linear infinite;
-      transform-origin: center;
-    }
-
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-
-    /* Indeterminate progress bar (also CSS-only) */
-    .doc-card.computing .doc-score-bar {
-      background: var(--amber);
-      width: 100% !important;
-      animation: bar-indeterminate 1.2s ease-in-out infinite;
-      transform-origin: left;
-    }
-
-    @keyframes bar-indeterminate {
-      0%   { transform: scaleX(0); opacity: 0.6; }
-      50%  { transform: scaleX(1); opacity: 1; }
-      100% { transform: scaleX(0); opacity: 0.6; }
-    }
-
-    /* ── Unscored doc (has text but wasn't in last rank run) ── */
-    .doc-card.needs-rank {
-      border-color: var(--amber-dim);
-      border-style: dashed;
-    }
-
-    .doc-card.needs-rank .doc-score-num::after {
-      content: ' ↺';
-      font-size: 0.65rem;
-      color: var(--amber-dim);
-    }
-
-    /* ── Actions ──────────────────────────────────────── */
-    .actions-row {
-      display: flex;
-      gap: 0.6rem;
-      margin-top: 0.75rem;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-
-    button {
-      font-family: var(--mono);
-      cursor: pointer;
-      border: 1px solid transparent;
-      border-radius: 5px;
-      font-size: 0.72rem;
-      font-weight: 600;
-      letter-spacing: 0.04em;
-      padding: 0.5rem 1rem;
-      transition: all 0.15s;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.4rem;
-    }
-
-    #rank-btn {
-      background: var(--amber);
-      color: #0A0A0A;
-      border-color: var(--amber);
-      padding: 0.55rem 1.4rem;
-      font-size: 0.78rem;
-    }
-
-    #rank-btn:hover:not(:disabled) {
-      background: #FBBF24;
-      box-shadow: 0 0 16px rgba(245,158,11,0.35);
-    }
-
-    #rank-btn:disabled { opacity: 0.45; cursor: not-allowed; }
-
-    #rank-btn.running { animation: btn-pulse 1.2s ease-in-out infinite; }
-
-    @keyframes btn-pulse {
-      0%, 100% { box-shadow: 0 0 0 rgba(245,158,11,0); }
-      50%       { box-shadow: 0 0 20px rgba(245,158,11,0.5); }
-    }
-
-    #add-doc-btn {
-      background: transparent;
-      color: var(--text-mid);
-      border-color: var(--border-hi);
-    }
-
-    #add-doc-btn:hover { border-color: var(--amber-dim); color: var(--amber); }
-
-    #clear-btn {
-      background: transparent;
-      color: var(--text-dim);
-      border-color: transparent;
-      margin-left: auto;
-      font-size: 0.68rem;
-    }
-
-    #clear-btn:hover { color: var(--red); }
-
-    /* ── Results header ───────────────────────────────── */
-    #results-header {
-      display: none;
-      align-items: center;
-      gap: 0.75rem;
-      margin: 1.5rem 0 0.75rem;
-      font-size: 0.6rem;
-      letter-spacing: 0.2em;
-      text-transform: uppercase;
-      color: var(--text-dim);
-      font-weight: 600;
-    }
-
-    #results-header.visible { display: flex; }
-    #results-header::after { content: ''; flex: 1; height: 1px; background: var(--border); }
-
-    /* ── FLIP helper ──────────────────────────────────── */
-    .doc-card.flipping {
-      transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
-    }
-
-    /* ── Footer ───────────────────────────────────────── */
-    footer {
-      padding: 1rem 2rem;
-      max-width: 860px;
-      margin: 0 auto;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      font-size: 0.62rem;
-      color: var(--text-dim);
-      border-top: 1px solid var(--border);
-    }
-
-    footer a { color: var(--text-dim); text-decoration: none; }
-    footer a:hover { color: var(--amber); }
-    .sep { color: var(--border-hi); }
-    #runtime-info { margin-left: auto; }
-
-    ::-webkit-scrollbar { width: 4px; }
-    ::-webkit-scrollbar-track { background: transparent; }
-    ::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }
-
-    /* ── dtype selector ───────────────────────────────── */
-    .dtype-select {
-      background: var(--surface);
-      border: 1px solid var(--border-hi);
-      border-radius: 4px;
-      color: var(--text-mid);
-      font-family: var(--mono);
-      font-size: 0.65rem;
-      padding: 0.2rem 0.4rem;
-      cursor: pointer;
-      outline: none;
-    }
-
-    .dtype-select:hover { border-color: var(--amber-dim); }
-  </style>
+  <script type="module" crossorigin src="./assets/index-CaEweXpE.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-C0wdVFKl.css">
 </head>
 <body>
 
@@ -506,7 +24,6 @@
   </header>
 
   <main>
-    <!-- Status bar -->
     <div id="status-bar">
       <div class="status-icon"></div>
       <span id="status-text">Loading model…</span>
@@ -521,32 +38,20 @@
       </select>
     </div>
 
-    <!-- Query -->
     <div class="panel" id="query-panel">
       <div class="panel-label">Query</div>
-      <textarea
-        id="query-input"
-        rows="1"
-        placeholder="Enter your search query…"
-      >What is the capital of France?</textarea>
+      <textarea id="query-input" rows="1" placeholder="Enter your search query…">What is the capital of France?</textarea>
       <div class="instruction-row">
         <span class="instruction-label">Instruct</span>
-        <input
-          type="text"
-          id="instruction-input"
+        <input type="text" id="instruction-input"
           placeholder="Given a web search query, retrieve relevant passages that answer the query"
-          value="Given a web search query, retrieve relevant passages that answer the query"
-        >
+          value="Given a web search query, retrieve relevant passages that answer the query">
       </div>
     </div>
 
-    <!-- Results header -->
     <div id="results-header">ranked results</div>
-
-    <!-- Documents -->
     <div id="docs-list"></div>
 
-    <!-- Actions -->
     <div class="actions-row">
       <button id="rank-btn" disabled>▶ Rank Documents</button>
       <button id="add-doc-btn">+ Add Document</button>
@@ -565,336 +70,5 @@
     <span id="runtime-info"></span>
   </footer>
 
-  <script type="module">
-    import {
-      AutoTokenizer,
-      AutoModelForCausalLM,
-    } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@next";
-
-    const MODEL_ID = "onnx-community/Qwen3-Reranker-0.6B-ONNX"; // https://huggingface.co/onnx-community/Qwen3-Reranker-0.6B-ONNX
-
-    const SYSTEM =
-      'Judge whether the Document meets the requirements based on the Query and the Instruct provided. ' +
-      'Note that the answer can only be "yes" or "no".';
-
-    const DEFAULT_INSTRUCTION =
-      "Given a web search query, retrieve relevant passages that answer the query";
-
-    const DEFAULT_DOCS = [
-      "Paris is the capital and largest city of France, located in northern France.",
-      "Berlin is the capital city of Germany.",
-      "France is a country in Western Europe known for its wine, cuisine, and art.",
-      "The Eiffel Tower is a famous landmark located in Paris, France.",
-    ];
-
-    // ── State ─────────────────────────────────────────────
-    let tokenizer = null;
-    let model = null;
-    let tokenYes = -1;
-    let tokenNo = -1;
-    let docCount = 0;
-
-    // ── DOM ───────────────────────────────────────────────
-    const statusBar   = document.getElementById("status-bar");
-    const statusText  = document.getElementById("status-text");
-    const progressWrap = document.getElementById("progress-bar-wrap");
-    const progressBar = document.getElementById("progress-bar");
-    const rankBtn     = document.getElementById("rank-btn");
-    const docsList    = document.getElementById("docs-list");
-    const resultsHdr  = document.getElementById("results-header");
-    const dtypeSelect = document.getElementById("dtype-select");
-    const queryInput  = document.getElementById("query-input");
-
-    // ── Status helper ─────────────────────────────────────
-    function setStatus(type, text, progress = null) {
-      statusBar.className = type;
-      statusText.textContent = text;
-      if (progress !== null) {
-        progressWrap.classList.add("visible");
-        progressBar.style.width = `${progress}%`;
-      } else {
-        progressWrap.classList.remove("visible");
-      }
-    }
-
-    // Auto-resize textareas
-    function autoResize(el) {
-      el.style.height = "auto";
-      el.style.height = Math.min(el.scrollHeight, 128) + "px";
-    }
-
-    queryInput.addEventListener("input", () => autoResize(queryInput));
-
-    // ── Build prompt (no user data in template) ───────────
-    function buildPrompt(query, doc, instruction) {
-      return (
-        `<|im_start|>system\n${SYSTEM}<|im_end|>\n` +
-        `<|im_start|>user\n<Instruct>: ${instruction}\n\n<Query>: ${query}\n\n<Document>: ${doc}<|im_end|>\n` +
-        `<|im_start|>assistant\n<think>\n\n</think>\n`
-      );
-    }
-
-    // ── Add document card (safe DOM construction) ─────────
-    function addDoc(text = "") {
-      const id = String(++docCount);
-
-      const card = document.createElement("div");
-      card.className = "doc-card";
-      card.dataset.id = id;
-      card.style.animationDelay = `${Math.min((docCount - 1) * 30, 100)}ms`;
-
-      const idxSpan = document.createElement("span");
-      idxSpan.className = "doc-index";
-      idxSpan.textContent = id.padStart(2, "0");
-
-      const textarea = document.createElement("textarea");
-      textarea.className = "doc-text";
-      textarea.rows = 2;
-      textarea.placeholder = "Paste a document or passage…";
-      textarea.value = text;          // safe: sets value, not HTML
-      textarea.addEventListener("input", () => autoResize(textarea));
-
-      const scoreWrap = document.createElement("div");
-      scoreWrap.className = "doc-score-wrap";
-
-      const scoreNum = document.createElement("span");
-      scoreNum.className = "doc-score-num";
-      scoreNum.textContent = "—";
-
-      const barWrap = document.createElement("div");
-      barWrap.className = "doc-score-bar-wrap";
-
-      const bar = document.createElement("div");
-      bar.className = "doc-score-bar";
-
-      barWrap.appendChild(bar);
-      scoreWrap.appendChild(scoreNum);
-      scoreWrap.appendChild(barWrap);
-
-      card.appendChild(idxSpan);
-      card.appendChild(textarea);
-      card.appendChild(scoreWrap);
-
-      docsList.appendChild(card);
-    }
-
-    // Seed defaults
-    DEFAULT_DOCS.forEach(d => addDoc(d));
-
-    document.getElementById("add-doc-btn").addEventListener("click", () => addDoc());
-
-    document.getElementById("clear-btn").addEventListener("click", () => {
-      document.querySelectorAll(".doc-card").forEach(card => {
-        card.className = "doc-card";
-        card.querySelector(".doc-score-num").textContent = "—";
-        card.querySelector(".doc-score-bar").style.width = "0%";
-      });
-      resultsHdr.classList.remove("visible");
-    });
-
-    // ── Animated score counter ────────────────────────────
-    function animateScore(numEl, barEl, target) {
-      const start = performance.now();
-      const duration = 600;
-      const fmt = v => (v * 100).toFixed(1) + "%";
-
-      function tick(now) {
-        const t = Math.min((now - start) / duration, 1);
-        const ease = 1 - Math.pow(1 - t, 3);
-        numEl.textContent = fmt(ease * target);
-        barEl.style.width = `${ease * target * 100}%`;
-        if (t < 1) requestAnimationFrame(tick);
-        else numEl.textContent = fmt(target);
-      }
-
-      requestAnimationFrame(tick);
-    }
-
-    // ── FLIP reorder animation ────────────────────────────
-    function flipReorder(cards, sortedIds) {
-      const before = new Map(cards.map(c => [c.dataset.id, c.getBoundingClientRect().top]));
-
-      sortedIds.forEach(id => {
-        const card = docsList.querySelector(`[data-id="${CSS.escape(id)}"]`);
-        if (card) docsList.appendChild(card);
-      });
-
-      cards.forEach(card => {
-        const delta = before.get(card.dataset.id) - card.getBoundingClientRect().top;
-        if (Math.abs(delta) > 1) {
-          card.style.transform = `translateY(${delta}px)`;
-          card.style.transition = "none";
-          requestAnimationFrame(() => {
-            card.classList.add("flipping");
-            card.style.transform = "translateY(0)";
-            setTimeout(() => {
-              card.classList.remove("flipping");
-              card.style.transition = "";
-            }, 500);
-          });
-        }
-      });
-    }
-
-    // ── Main inference ────────────────────────────────────
-    async function runReranking() {
-      const query = queryInput.value.trim();
-      const instruction = document.getElementById("instruction-input").value.trim()
-        || DEFAULT_INSTRUCTION;
-
-      if (!query) { queryInput.focus(); return; }
-
-      // Clear any previous "needs re-rank" markers
-      document.querySelectorAll(".doc-card.needs-rank").forEach(c => c.classList.remove("needs-rank"));
-
-      const cards = [...document.querySelectorAll(".doc-card")];
-      const entries = cards.map(card => ({
-        id: card.dataset.id,
-        text: card.querySelector(".doc-text").value.trim(),
-        card,
-      }));
-      const toScore = entries.filter(e => e.text);
-      if (!toScore.length) return;
-
-      rankBtn.disabled = true;
-      rankBtn.classList.add("running");
-      rankBtn.textContent = "⟳ Ranking…";
-
-      // Set ⟳ once — CSS rotates it on the compositor thread,
-      // so it spins even while WASM inference blocks the JS event loop.
-      toScore.forEach(({ card }) => {
-        card.classList.add("computing");
-        card.querySelector(".doc-score-num").textContent = "⟳";
-      });
-
-      const scored = [];
-
-      for (let i = 0; i < toScore.length; i++) {
-        const { id, text, card } = toScore[i];
-        setStatus("loading", `Scoring document ${i + 1} / ${toScore.length}…`, (i / toScore.length) * 100);
-
-        try {
-          const prompt = buildPrompt(query, text, instruction);
-          const inputs = tokenizer(prompt, { truncation: true, max_length: 8192 });
-          const output = await model(inputs);
-
-          const [, seqLen, vocabSize] = output.logits.dims.map(Number);
-          const offset = (seqLen - 1) * vocabSize;
-          const data = output.logits.data;
-
-          // Numerically stable softmax over yes/no
-          const ly = data[offset + tokenYes];
-          const ln = data[offset + tokenNo];
-          const m = Math.max(ly, ln);
-          const ey = Math.exp(ly - m);
-          const en = Math.exp(ln - m);
-          const score = ey / (ey + en);
-
-          card.classList.remove("computing");
-          animateScore(
-            card.querySelector(".doc-score-num"),
-            card.querySelector(".doc-score-bar"),
-            score,
-          );
-          scored.push({ id, score, card });
-
-        } catch (err) {
-          console.error("Inference error on doc", id, err);
-          card.classList.remove("computing");
-          card.querySelector(".doc-score-num").textContent = "err";
-          setStatus("error", `Error: ${err?.message ?? String(err)}`);
-          scored.push({ id, score: -1, card });
-        }
-      }
-
-      // Rank + reorder
-      scored.sort((a, b) => b.score - a.score);
-      scored.forEach(({ card }, rank) => {
-        card.className = "doc-card";
-        if (rank < 3) card.classList.add(`ranked-${rank + 1}`);
-      });
-
-      const unscoredEntries = entries.filter(e => !e.text);
-      const unscoredIds = unscoredEntries.map(e => e.id);
-      flipReorder(cards, [...scored.map(s => s.id), ...unscoredIds]);
-
-      // Highlight any cards that now have text but weren't scored this run
-      // (e.g. user typed into a new card after hitting Rank)
-      const newlyFilled = entries.filter(e => {
-        const currentText = e.card.querySelector(".doc-text").value.trim();
-        return currentText && !toScore.some(s => s.id === e.id);
-      });
-      newlyFilled.forEach(({ card }) => card.classList.add("needs-rank"));
-
-      const needsRankCount = newlyFilled.length;
-      if (needsRankCount > 0) {
-        setStatus("ready", `Scored ${toScore.length} · ${needsRankCount} unscored doc${needsRankCount > 1 ? "s" : ""} — hit Rank again ↺`);
-      } else {
-        setStatus("ready", `Scored ${toScore.length} document${toScore.length !== 1 ? "s" : ""} · model ready`);
-      }
-
-      resultsHdr.classList.add("visible");
-      rankBtn.disabled = false;
-      rankBtn.classList.remove("running");
-      rankBtn.textContent = "▶ Rank Documents";
-    }
-
-    // ── Load model ────────────────────────────────────────
-    //
-    // NOTE on scoring approach:
-    // Traditional BERT cross-encoders (see github.com/huggingface/transformers.js/issues/497)
-    // use text-classification + logits.sigmoid(). Qwen3-Reranker is a CausalLM — it
-    // outputs "yes"/"no" at the next-token position instead. We do a numerically stable
-    // softmax over just those two token logits rather than sigmoid over a classification head.
-    async function loadModel() {
-      const dtype = dtypeSelect.value;
-      dtypeSelect.disabled = true;
-      rankBtn.disabled = true;
-
-      setStatus("loading", `Downloading model (${dtype})…`, 0);
-
-      try {
-        tokenizer = await AutoTokenizer.from_pretrained(MODEL_ID);
-
-        // Resolve token IDs for "yes" / "no" (last subword of each)
-        const yesIds = tokenizer("yes", { add_special_tokens: false }).input_ids.data;
-        const noIds  = tokenizer("no",  { add_special_tokens: false }).input_ids.data;
-        tokenYes = Number(yesIds[yesIds.length - 1]);
-        tokenNo  = Number(noIds[noIds.length - 1]);
-
-        model = await AutoModelForCausalLM.from_pretrained(MODEL_ID, {
-          dtype,
-          progress_callback(info) {
-            if (info.status === "progress" && info.progress != null) {
-              const pct = Math.round(info.progress);
-              setStatus("loading", `${info.file ?? "model"} — ${pct}%`, pct);
-            }
-          },
-        });
-
-        document.getElementById("runtime-info").textContent = `dtype: ${dtype}`;
-        setStatus("ready", `Model ready · ${MODEL_ID}`);
-        rankBtn.disabled = false;
-        dtypeSelect.disabled = false;
-
-      } catch (err) {
-        console.error(err);
-        setStatus("error", `Failed to load: ${err.message}`);
-        dtypeSelect.disabled = false;
-      }
-    }
-
-    // Single stable listener — removed/re-added on dtype reload to avoid double-firing
-    rankBtn.addEventListener("click", runReranking);
-
-    dtypeSelect.addEventListener("change", () => {
-      model = null;
-      tokenizer = null;
-      rankBtn.removeEventListener("click", runReranking);
-      loadModel().then(() => rankBtn.addEventListener("click", runReranking));
-    });
-
-    loadModel();
-  </script>
 </body>
 </html>