Spaces:

RJuro
/

scifact-semantic-search

Sleeping

RJuro Claude Opus 4.6 commited on Feb 11

Commit

33e7dcd

1 Parent(s): c19484b

Redesign frontend: brutalist B&W with red accent

Edgy editorial aesthetic — Bebas Neue + JetBrains Mono typography,
animated SVG vector background (grid, floating geometry, constellation
nodes, scan line), pure black/white with single #E63327 red accent.
Zero JS dependencies.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Files changed (1) hide show

static/index.html +443 -191

static/index.html CHANGED Viewed

@@ -3,209 +3,463 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>SciFact Multilingual Semantic Search</title>
 <style>
-  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
-  body{
-    min-height:100vh;
-    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,sans-serif;
-    overflow-x:hidden;
-    background:#0f0a1a;
-    color:#e2e0ea;
   }
-  /* ── Animated gradient background ── */
-  .bg{
-    position:fixed;inset:0;z-index:0;
-    background:linear-gradient(135deg,#1a1040 0%,#0f0a1a 30%,#0a1628 60%,#0f0a1a 100%);
   }
-  /* ── Floating blobs ── */
-  .blob{
-    position:fixed;border-radius:50%;filter:blur(80px);opacity:.35;
-    animation:drift 20s ease-in-out infinite alternate;z-index:0;
   }
-  .blob-1{width:500px;height:500px;background:#6366f1;top:-120px;left:-100px;animation-duration:22s}
-  .blob-2{width:400px;height:400px;background:#8b5cf6;bottom:-80px;right:-80px;animation-duration:18s;animation-delay:-5s}
-  .blob-3{width:300px;height:300px;background:#14b8a6;top:40%;left:60%;animation-duration:25s;animation-delay:-10s}
-  @keyframes drift{
-    0%{transform:translate(0,0) scale(1)}
-    33%{transform:translate(30px,-40px) scale(1.05)}
-    66%{transform:translate(-20px,30px) scale(.95)}
-    100%{transform:translate(10px,-10px) scale(1.02)}
   }
   /* ── Layout ── */
-  .container{
-    position:relative;z-index:1;
-    max-width:720px;margin:0 auto;padding:40px 20px 60px;
   }
   /* ── Header ── */
-  .header{text-align:center;margin-bottom:32px}
-  .header h1{
-    font-size:1.75rem;font-weight:700;
-    background:linear-gradient(135deg,#a78bfa,#6366f1,#14b8a6);
-    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
-    margin-bottom:6px;
-  }
-  .header p{font-size:.92rem;color:#9f9bb0}
-  /* ── Glass card ── */
-  .glass{
-    background:rgba(255,255,255,.06);
-    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
-    border:1px solid rgba(255,255,255,.1);
-    border-radius:16px;
-    padding:24px;
-  }
-  /* ── Search box ── */
-  .search-box{display:flex;gap:10px;margin-bottom:16px}
-  .search-box input{
-    flex:1;padding:14px 18px;
-    background:rgba(255,255,255,.07);
-    border:1.5px solid rgba(255,255,255,.12);
-    border-radius:12px;color:#e2e0ea;
-    font-size:1rem;outline:none;
-    transition:border-color .2s,box-shadow .2s;
-  }
-  .search-box input::placeholder{color:#7a7490}
-  .search-box input:focus{
-    border-color:#6366f1;
-    box-shadow:0 0 0 3px rgba(99,102,241,.25);
-  }
-  .search-box button{
-    padding:0 22px;
-    background:linear-gradient(135deg,#6366f1,#8b5cf6);
-    border:none;border-radius:12px;color:#fff;
-    font-size:.95rem;font-weight:600;cursor:pointer;
-    transition:opacity .2s;white-space:nowrap;
-  }
-  .search-box button:hover{opacity:.88}
-  .search-box button:disabled{opacity:.5;cursor:not-allowed}
-  /* ── Language chips ── */
-  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
-  .chip{
-    padding:6px 14px;
-    background:rgba(255,255,255,.07);
-    border:1px solid rgba(255,255,255,.1);
-    border-radius:20px;font-size:.8rem;color:#c4bfd6;
-    cursor:pointer;transition:background .2s,color .2s;
-  }
-  .chip:hover{background:rgba(99,102,241,.25);color:#e2e0ea}
-  .chip span{font-weight:600;margin-right:4px;color:#a78bfa}
   /* ── Results ── */
-  .results{margin-top:24px;display:flex;flex-direction:column;gap:14px}
-  .result-card{
-    background:rgba(255,255,255,.05);
-    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
-    border:1px solid rgba(255,255,255,.08);
-    border-radius:14px;padding:18px 20px;
-    transition:border-color .2s;
   }
-  .result-card:hover{border-color:rgba(99,102,241,.35)}
-  .result-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
-  .rank-badge{
-    width:28px;height:28px;border-radius:8px;
-    display:flex;align-items:center;justify-content:center;
-    font-size:.78rem;font-weight:700;color:#fff;flex-shrink:0;
-    background:linear-gradient(135deg,#6366f1,#8b5cf6);
   }
-  .result-title{font-size:.95rem;font-weight:600;color:#e2e0ea;line-height:1.3}
-  .score-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
-  .score-bar-bg{
-    flex:1;height:6px;border-radius:3px;
-    background:rgba(255,255,255,.08);overflow:hidden;
   }
-  .score-bar{
-    height:100%;border-radius:3px;
-    background:linear-gradient(90deg,#6366f1,#14b8a6);
-    transition:width .6s ease;
   }
-  .score-label{font-size:.78rem;color:#a78bfa;font-weight:600;white-space:nowrap}
-  .result-text{font-size:.85rem;color:#9f9bb0;line-height:1.55}
   /* ── Empty state ── */
-  .empty-state{text-align:center;padding:40px 20px}
-  .empty-state .icon{font-size:2.5rem;margin-bottom:12px}
-  .empty-state h3{font-size:1.1rem;color:#c4bfd6;margin-bottom:8px}
-  .empty-state p{font-size:.88rem;color:#7a7490;line-height:1.5;max-width:400px;margin:0 auto}
-  /* ── Skeleton loading ── */
-  .skeleton-card{
-    background:rgba(255,255,255,.04);
-    border:1px solid rgba(255,255,255,.06);
-    border-radius:14px;padding:20px;
-    animation:pulse 1.5s ease-in-out infinite;
-  }
-  .skeleton-line{
-    height:12px;border-radius:6px;
-    background:rgba(255,255,255,.08);margin-bottom:10px;
-  }
-  .skeleton-line.short{width:40%}
-  .skeleton-line.medium{width:70%}
-  .skeleton-line.long{width:100%}
-  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
-  /* ── Info bar ── */
-  .info-bar{
-    text-align:center;margin-top:28px;
-    font-size:.78rem;color:#5e5874;
-  }
-  @media(max-width:500px){
-    .container{padding:24px 14px 40px}
-    .header h1{font-size:1.35rem}
-    .search-box{flex-direction:column}
-    .search-box button{padding:12px}
   }
 </style>
 </head>
 <body>
-  <div class="bg"></div>
-  <div class="blob blob-1"></div>
-  <div class="blob blob-2"></div>
-  <div class="blob blob-3"></div>
-  <div class="container">
-    <div class="header">
-      <h1>SciFact Semantic Search</h1>
-      <p>Multilingual search over 5,183 scientific abstracts &mdash; powered by E5-small</p>
-    </div>
-    <div class="glass">
-      <div class="search-box">
-        <input id="q" type="text" placeholder="Search scientific literature..." autocomplete="off">
-        <button id="btn" onclick="doSearch()">Search</button>
-      </div>
-      <div class="chips">
-        <div class="chip" onclick="chipSearch(this)"><span>EN</span> effects of vaccination</div>
-        <div class="chip" onclick="chipSearch(this)"><span>FR</span> effets de la vaccination</div>
-        <div class="chip" onclick="chipSearch(this)"><span>DE</span> Auswirkungen der Impfung</div>
-        <div class="chip" onclick="chipSearch(this)"><span>ES</span> efectos de la vacunaci&oacute;n</div>
-      </div>
     </div>
-    <div id="results" class="results">
-      <div class="empty-state">
-        <div class="icon">&#128300;</div>
-        <h3>Multilingual Semantic Search</h3>
-        <p>Search 5,183 SciFact abstracts in any language. The model understands meaning, not just keywords. Try a query above or click a language chip.</p>
-      </div>
     </div>
-    <div class="info-bar">
-      intfloat/multilingual-e5-small &middot; ChromaDB &middot; FastAPI &middot; CPU inference
     </div>
   </div>
 <script>
 const input = document.getElementById('q');
 const btn = document.getElementById('btn');
@@ -214,8 +468,7 @@ const results = document.getElementById('results');
 input.addEventListener('keydown', e => { if (e.key === 'Enter') doSearch(); });
 function chipSearch(el) {
-  // Get text after the language tag span
-  const text = el.textContent.replace(/^[A-Z]{2}\s*/, '').trim();
   input.value = text;
   doSearch();
 }
@@ -229,48 +482,47 @@ async function doSearch() {
   results.innerHTML = skeletonHTML();
   try {
-    const res = await fetch(`/search?q=${encodeURIComponent(q)}&top_k=5`);
     if (!res.ok) throw new Error(res.statusText);
     const data = await res.json();
     renderResults(data.results);
   } catch (err) {
-    results.innerHTML = `<div class="empty-state"><div class="icon">&#9888;&#65039;</div><h3>Search failed</h3><p>${err.message}</p></div>`;
   } finally {
     btn.disabled = false;
-    btn.textContent = 'Search';
   }
 }
 function skeletonHTML() {
   let h = '';
-  for (let i = 0; i < 3; i++) {
-    h += `<div class="skeleton-card">
-      <div class="skeleton-line short"></div>
-      <div class="skeleton-line long"></div>
-      <div class="skeleton-line medium"></div>
-    </div>`;
   }
   return h;
 }
 function renderResults(items) {
   if (!items || !items.length) {
-    results.innerHTML = `<div class="empty-state"><div class="icon">&#128269;</div><h3>No results</h3><p>Try a different query.</p></div>`;
     return;
   }
-  results.innerHTML = items.map(r => {
     const pct = Math.max(0, Math.min(100, r.score * 100));
-    return `<div class="result-card">
-      <div class="result-header">
-        <div class="rank-badge">${r.rank}</div>
-        <div class="result-title">${esc(r.title)}</div>
-      </div>
-      <div class="score-row">
-        <div class="score-bar-bg"><div class="score-bar" style="width:${pct}%"></div></div>
-        <div class="score-label">${(pct).toFixed(1)}%</div>
-      </div>
-      <div class="result-text">${esc(r.text)}</div>
-    </div>`;
   }).join('');
 }

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>SciFact Semantic Search</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@400;600&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
 <style>
+  :root {
+    --red: #E63327;
+    --black: #0A0A0A;
+    --white: #F5F5F0;
+    --gray-1: #1A1A1A;
+    --gray-2: #2A2A2A;
+    --gray-3: #555;
+    --gray-4: #888;
+    --gray-5: #BBB;
   }
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    min-height: 100vh;
+    background: var(--black);
+    color: var(--white);
+    font-family: 'Outfit', sans-serif;
+    font-weight: 300;
+    overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
+  }
+  /* ── SVG Vector Background ── */
+  .vector-bg {
+    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .12;
+  }
+  .vector-bg line {
+    stroke: var(--white);
+    stroke-width: .5;
+  }
+  .vector-bg circle {
+    fill: none;
+    stroke: var(--white);
+    stroke-width: .5;
+  }
+  .vector-bg .node {
+    fill: var(--red);
+    opacity: .8;
+  }
+  /* Grid pulse */
+  @keyframes gridFade {
+    0%, 100% { opacity: .08; }
+    50% { opacity: .18; }
   }
+  .grid-line { animation: gridFade 6s ease-in-out infinite; }
+  .grid-line:nth-child(odd) { animation-delay: -3s; }
+  /* Floating geometry */
+  @keyframes float1 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(15px,-25px) rotate(180deg)} }
+  @keyframes float2 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(-20px,20px) rotate(-120deg)} }
+  @keyframes float3 { 0%,100%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(10px,30px) rotate(90deg)} }
+  @keyframes orbitPulse { 0%,100%{r:2;opacity:.6} 50%{r:3.5;opacity:1} }
+  .geo-float-1 { animation: float1 18s ease-in-out infinite; }
+  .geo-float-2 { animation: float2 22s ease-in-out infinite; }
+  .geo-float-3 { animation: float3 15s ease-in-out infinite; }
+  /* Scan line */
+  @keyframes scanDown {
+    0% { transform: translateY(-100vh); opacity: 0; }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { transform: translateY(100vh); opacity: 0; }
   }
+  .scan-line {
+    animation: scanDown 8s linear infinite;
   }
   /* ── Layout ── */
+  .container {
+    position: relative; z-index: 1;
+    max-width: 760px; margin: 0 auto;
+    padding: 48px 24px 72px;
   }
   /* ── Header ── */
+  .header {
+    margin-bottom: 48px;
+    border-bottom: 1px solid var(--gray-2);
+    padding-bottom: 32px;
+  }
+  .header-top {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 12px;
+  }
+  .header h1 {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 4.2rem;
+    font-weight: 400;
+    letter-spacing: 2px;
+    line-height: .9;
+    color: var(--white);
+  }
+  .header h1 .accent {
+    color: var(--red);
+  }
+  .header .tag {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: .65rem;
+    color: var(--gray-4);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    white-space: nowrap;
+    padding-bottom: 6px;
+  }
+  .header .subtitle {
+    font-size: .88rem;
+    color: var(--gray-4);
+    font-weight: 300;
+    letter-spacing: .3px;
+  }
+  /* ── Search ── */
+  .search-area { margin-bottom: 40px; }
+  .search-row {
+    display: flex;
+    gap: 0;
+    border: 1px solid var(--gray-2);
+    transition: border-color .2s;
+  }
+  .search-row:focus-within {
+    border-color: var(--red);
+  }
+  .search-row input {
+    flex: 1;
+    padding: 16px 20px;
+    background: transparent;
+    border: none;
+    color: var(--white);
+    font-family: 'Outfit', sans-serif;
+    font-size: 1rem;
+    font-weight: 300;
+    outline: none;
+    letter-spacing: .3px;
+  }
+  .search-row input::placeholder { color: var(--gray-3); }
+  .search-row button {
+    padding: 16px 28px;
+    background: var(--red);
+    border: none;
+    color: var(--white);
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 1.05rem;
+    letter-spacing: 2px;
+    cursor: pointer;
+    transition: background .15s;
+  }
+  .search-row button:hover { background: #C42A20; }
+  .search-row button:disabled { background: var(--gray-2); color: var(--gray-3); cursor: not-allowed; }
+  /* ── Chips ── */
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 16px;
+  }
+  .chip {
+    padding: 6px 14px;
+    border: 1px solid var(--gray-2);
+    background: transparent;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: .7rem;
+    color: var(--gray-4);
+    cursor: pointer;
+    transition: all .15s;
+    letter-spacing: .5px;
+  }
+  .chip:hover {
+    border-color: var(--red);
+    color: var(--white);
+  }
+  .chip .lang {
+    color: var(--red);
+    font-weight: 600;
+    margin-right: 6px;
+  }
   /* ── Results ── */
+  .results { display: flex; flex-direction: column; gap: 0; }
+  .result-card {
+    border-top: 1px solid var(--gray-2);
+    padding: 24px 0;
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    gap: 0 20px;
+    opacity: 0;
+    transform: translateY(12px);
+    animation: cardIn .4s ease forwards;
   }
+  .result-card:last-child { border-bottom: 1px solid var(--gray-2); }
+  @keyframes cardIn {
+    to { opacity: 1; transform: translateY(0); }
   }
+  .rank-col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 2px;
   }
+  .rank-num {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 1.8rem;
+    color: var(--red);
+    line-height: 1;
+  }
+  .rank-line {
+    width: 1px;
+    flex: 1;
+    background: var(--gray-2);
+    margin-top: 8px;
+    min-height: 20px;
   }
+  .result-body { min-width: 0; }
+  .result-title {
+    font-family: 'Outfit', sans-serif;
+    font-size: .95rem;
+    font-weight: 500;
+    color: var(--white);
+    line-height: 1.4;
+    margin-bottom: 10px;
+  }
+  .score-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+  .score-track {
+    flex: 1;
+    height: 2px;
+    background: var(--gray-2);
+    position: relative;
+    overflow: hidden;
+  }
+  .score-fill {
+    position: absolute;
+    left: 0; top: 0;
+    height: 100%;
+    background: var(--red);
+    transition: width .6s cubic-bezier(.22,1,.36,1);
+  }
+  .score-val {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: .72rem;
+    color: var(--red);
+    font-weight: 600;
+    white-space: nowrap;
+    min-width: 48px;
+    text-align: right;
+  }
+  .result-text {
+    font-size: .82rem;
+    color: var(--gray-4);
+    line-height: 1.6;
+    font-weight: 300;
+  }
   /* ── Empty state ── */
+  .empty-state {
+    padding: 64px 20px;
+    text-align: center;
+    border-top: 1px solid var(--gray-2);
+    border-bottom: 1px solid var(--gray-2);
+  }
+  .empty-state svg {
+    margin-bottom: 24px;
+    opacity: .3;
+  }
+  .empty-state h3 {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 1.4rem;
+    letter-spacing: 2px;
+    color: var(--gray-5);
+    margin-bottom: 8px;
+    font-weight: 400;
+  }
+  .empty-state p {
+    font-size: .85rem;
+    color: var(--gray-3);
+    line-height: 1.6;
+    max-width: 380px;
+    margin: 0 auto;
+  }
+  /* ── Skeleton ── */
+  .skeleton-card {
+    border-top: 1px solid var(--gray-2);
+    padding: 24px 0;
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    gap: 0 20px;
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+  .skeleton-card:last-child { border-bottom: 1px solid var(--gray-2); }
+  .skel-rank {
+    width: 24px; height: 32px;
+    background: var(--gray-2);
+  }
+  .skel-line {
+    height: 10px;
+    background: var(--gray-2);
+    margin-bottom: 10px;
+  }
+  .skel-line.w30 { width: 30%; }
+  .skel-line.w80 { width: 80%; }
+  .skel-line.w60 { width: 60%; }
+  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
+  /* ── Footer ── */
+  .footer {
+    margin-top: 48px;
+    padding-top: 24px;
+    border-top: 1px solid var(--gray-2);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .footer span {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: .62rem;
+    color: var(--gray-3);
+    letter-spacing: .5px;
+    text-transform: uppercase;
+  }
+  .footer .dot { color: var(--red); margin: 0 6px; }
+  /* ── Responsive ── */
+  @media (max-width: 560px) {
+    .header h1 { font-size: 2.8rem; }
+    .header-top { flex-direction: column; align-items: flex-start; }
+    .header .tag { padding-bottom: 0; }
+    .container { padding: 32px 16px 48px; }
+    .search-row { flex-direction: column; }
+    .search-row button { padding: 14px; }
+    .result-card { grid-template-columns: 36px 1fr; }
   }
 </style>
 </head>
 <body>
+<!-- ── Animated SVG Vector Background ── -->
+<svg class="vector-bg" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1000 1000" width="100%" height="100%">
+  <!-- Grid -->
+  <g class="grid-line"><line x1="0" y1="200" x2="1000" y2="200"/></g>
+  <g class="grid-line"><line x1="0" y1="400" x2="1000" y2="400"/></g>
+  <g class="grid-line"><line x1="0" y1="600" x2="1000" y2="600"/></g>
+  <g class="grid-line"><line x1="0" y1="800" x2="1000" y2="800"/></g>
+  <g class="grid-line"><line x1="200" y1="0" x2="200" y2="1000"/></g>
+  <g class="grid-line"><line x1="400" y1="0" x2="400" y2="1000"/></g>
+  <g class="grid-line"><line x1="600" y1="0" x2="600" y2="1000"/></g>
+  <g class="grid-line"><line x1="800" y1="0" x2="800" y2="1000"/></g>
+  <!-- Floating triangles -->
+  <g class="geo-float-1" transform="translate(150,120)">
+    <polygon points="0,-20 17,10 -17,10" fill="none" stroke="#E63327" stroke-width=".8" opacity=".5"/>
+  </g>
+  <g class="geo-float-2" transform="translate(820,300)">
+    <polygon points="0,-28 24,14 -24,14" fill="none" stroke="#F5F5F0" stroke-width=".6" opacity=".3"/>
+  </g>
+  <g class="geo-float-3" transform="translate(700,750)">
+    <polygon points="0,-18 16,9 -16,9" fill="none" stroke="#E63327" stroke-width=".7" opacity=".4"/>
+  </g>
+  <!-- Floating circles -->
+  <g class="geo-float-2" transform="translate(100,650)">
+    <circle cx="0" cy="0" r="18" stroke-width=".6" opacity=".25"/>
+  </g>
+  <g class="geo-float-1" transform="translate(880,150)">
+    <circle cx="0" cy="0" r="12" stroke-width=".6" opacity=".2"/>
+  </g>
+  <!-- Constellation nodes -->
+  <line x1="150" y1="120" x2="400" y2="200" stroke-width=".3" opacity=".15" stroke="#E63327"/>
+  <line x1="400" y1="200" x2="600" y2="150" stroke-width=".3" opacity=".1" stroke="#F5F5F0"/>
+  <line x1="600" y1="150" x2="820" y2="300" stroke-width=".3" opacity=".12" stroke="#E63327"/>
+  <line x1="820" y1="300" x2="700" y2="750" stroke-width=".3" opacity=".08" stroke="#F5F5F0"/>
+  <circle class="node" cx="400" cy="200"><animate attributeName="r" values="2;3.5;2" dur="4s" repeatCount="indefinite"/></circle>
+  <circle class="node" cx="600" cy="150"><animate attributeName="r" values="1.5;3;1.5" dur="5s" repeatCount="indefinite"/></circle>
+  <circle class="node" cx="200" cy="600"><animate attributeName="r" values="2;4;2" dur="3.5s" repeatCount="indefinite"/></circle>
+  <circle class="node" cx="750" cy="500"><animate attributeName="r" values="1.5;3;1.5" dur="4.5s" repeatCount="indefinite"/></circle>
+  <!-- Scan line -->
+  <rect class="scan-line" x="0" y="0" width="1000" height="1" fill="url(#scanGrad)"/>
+  <defs>
+    <linearGradient id="scanGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#E63327" stop-opacity="0"/>
+      <stop offset="50%" stop-color="#E63327" stop-opacity=".4"/>
+      <stop offset="100%" stop-color="#E63327" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+</svg>
+<div class="container">
+  <!-- Header -->
+  <div class="header">
+    <div class="header-top">
+      <h1>SCI<span class="accent">FACT</span><br>SEARCH</h1>
+      <div class="tag">multilingual-e5-small<br>5,183 abstracts</div>
     </div>
+    <div class="subtitle">Semantic search across scientific literature. Understands meaning, not keywords.</div>
+  </div>
+  <!-- Search -->
+  <div class="search-area">
+    <div class="search-row">
+      <input id="q" type="text" placeholder="Enter a query in any language..." autocomplete="off" spellcheck="false">
+      <button id="btn" onclick="doSearch()">SEARCH</button>
     </div>
+    <div class="chips">
+      <div class="chip" onclick="chipSearch(this)"><span class="lang">EN</span>effects of vaccination</div>
+      <div class="chip" onclick="chipSearch(this)"><span class="lang">FR</span>effets de la vaccination</div>
+      <div class="chip" onclick="chipSearch(this)"><span class="lang">DE</span>Auswirkungen der Impfung</div>
+      <div class="chip" onclick="chipSearch(this)"><span class="lang">ES</span>efectos de la vacunaci&oacute;n</div>
+    </div>
+  </div>
+  <!-- Results -->
+  <div id="results" class="results">
+    <div class="empty-state">
+      <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="24" cy="24" r="22" stroke="#F5F5F0" stroke-width="1"/>
+        <line x1="12" y1="24" x2="36" y2="24" stroke="#E63327" stroke-width="1"/>
+        <line x1="24" y1="12" x2="24" y2="36" stroke="#E63327" stroke-width="1"/>
+      </svg>
+      <h3>VECTOR SEARCH</h3>
+      <p>Cross-lingual semantic retrieval over SciFact scientific abstracts. Type a query or select a language sample above.</p>
     </div>
   </div>
+  <!-- Footer -->
+  <div class="footer">
+    <span>intfloat/multilingual-e5-small</span>
+    <span>chromadb<span class="dot">/</span>fastapi<span class="dot">/</span>cpu</span>
+  </div>
+</div>
 <script>
 const input = document.getElementById('q');
 const btn = document.getElementById('btn');
 input.addEventListener('keydown', e => { if (e.key === 'Enter') doSearch(); });
 function chipSearch(el) {
+  const text = el.textContent.replace(/^[A-Z]{2}/, '').trim();
   input.value = text;
   doSearch();
 }
   results.innerHTML = skeletonHTML();
   try {
+    const res = await fetch('/search?q=' + encodeURIComponent(q) + '&top_k=5');
     if (!res.ok) throw new Error(res.statusText);
     const data = await res.json();
     renderResults(data.results);
   } catch (err) {
+    results.innerHTML = '<div class="empty-state"><h3>ERROR</h3><p>' + esc(err.message) + '</p></div>';
   } finally {
     btn.disabled = false;
+    btn.textContent = 'SEARCH';
   }
 }
 function skeletonHTML() {
   let h = '';
+  for (let i = 0; i < 4; i++) {
+    h += '<div class="skeleton-card">' +
+      '<div><div class="skel-rank"></div></div>' +
+      '<div><div class="skel-line w80"></div><div class="skel-line w30"></div><div class="skel-line w60"></div></div>' +
+      '</div>';
   }
   return h;
 }
 function renderResults(items) {
   if (!items || !items.length) {
+    results.innerHTML = '<div class="empty-state"><h3>NO RESULTS</h3><p>Try a different query.</p></div>';
     return;
   }
+  results.innerHTML = items.map((r, i) => {
     const pct = Math.max(0, Math.min(100, r.score * 100));
+    return '<div class="result-card" style="animation-delay:' + (i * .08) + 's">' +
+      '<div class="rank-col"><div class="rank-num">0' + r.rank + '</div><div class="rank-line"></div></div>' +
+      '<div class="result-body">' +
+        '<div class="result-title">' + esc(r.title) + '</div>' +
+        '<div class="score-row">' +
+          '<div class="score-track"><div class="score-fill" style="width:' + pct + '%"></div></div>' +
+          '<div class="score-val">' + pct.toFixed(1) + '%</div>' +
+        '</div>' +
+        '<div class="result-text">' + esc(r.text) + '</div>' +
+      '</div>' +
+    '</div>';
   }).join('');
 }