Initial deploy: SciFact multilingual semantic search

FastAPI app with ChromaDB + multilingual-e5-small over 5,183 SciFact
abstracts. Glassmorphism frontend with cross-lingual search (EN/FR/DE/ES).

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

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.sqlite3 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,4 @@
+__pycache__/
+*.pyc
+.DS_Store
+*.egg-info/

Dockerfile

@@ -0,0 +1,7 @@
+FROM python:3.11-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+EXPOSE 7860
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,8 @@
 ---
-title: Scifact Semantic Search
-emoji: 🌍
-colorFrom: yellow
+title: SciFact Multilingual Semantic Search
+emoji: "\U0001F52C"
+colorFrom: indigo
 colorTo: purple
 sdk: docker
-pinned: false
+app_port: 7860
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,76 @@
+"""
+FastAPI Semantic Search over SciFact abstracts.
+
+Uses precomputed ChromaDB + multilingual-e5-small for query encoding.
+    uvicorn app:app --host 0.0.0.0 --port 7860
+"""
+
+import os
+from fastapi import FastAPI, Query
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from sentence_transformers import SentenceTransformer
+import chromadb
+
+MODEL_NAME = "intfloat/multilingual-e5-small"
+CHROMA_PATH = os.path.join(os.path.dirname(__file__), "data", "chroma_db")
+COLLECTION_NAME = "scifact"
+
+app = FastAPI(title="SciFact Multilingual Semantic Search")
+
+model: SentenceTransformer = None
+collection: chromadb.Collection = None
+
+
+@app.on_event("startup")
+def startup():
+    global model, collection
+    print(f"Loading model: {MODEL_NAME}")
+    model = SentenceTransformer(MODEL_NAME)
+    print(f"Loading ChromaDB from: {CHROMA_PATH}")
+    client = chromadb.PersistentClient(path=CHROMA_PATH)
+    collection = client.get_collection(COLLECTION_NAME)
+    print(f"Collection '{COLLECTION_NAME}': {collection.count()} documents ready.")
+
+
+@app.get("/")
+def index():
+    return FileResponse(
+        os.path.join(os.path.dirname(__file__), "static", "index.html")
+    )
+
+
+@app.get("/search")
+def search(q: str = Query(..., min_length=1), top_k: int = Query(5, ge=1, le=20)):
+    query_embedding = model.encode(
+        [f"query: {q.strip()}"],
+        normalize_embeddings=True,
+    ).tolist()
+
+    results = collection.query(
+        query_embeddings=query_embedding,
+        n_results=top_k,
+        include=["metadatas", "distances", "documents"],
+    )
+
+    items = []
+    for i, (meta, dist, doc) in enumerate(
+        zip(
+            results["metadatas"][0],
+            results["distances"][0],
+            results["documents"][0],
+        )
+    ):
+        items.append(
+            {
+                "rank": i + 1,
+                "score": round(1 - dist, 4),
+                "title": meta.get("title", ""),
+                "text": doc[:300] if doc else meta.get("text", "")[:300],
+            }
+        )
+
+    return {"query": q, "results": items}
+
+
+app.mount("/static", StaticFiles(directory=os.path.join(os.path.dirname(__file__), "static")), name="static")

data/chroma_db/chroma.sqlite3

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

data/chroma_db/d0040b94-292a-45b3-9e5b-252ec249af2f/data_level0.bin

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

data/chroma_db/d0040b94-292a-45b3-9e5b-252ec249af2f/header.bin

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

data/chroma_db/d0040b94-292a-45b3-9e5b-252ec249af2f/index_metadata.pickle

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

data/chroma_db/d0040b94-292a-45b3-9e5b-252ec249af2f/length.bin

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

data/chroma_db/d0040b94-292a-45b3-9e5b-252ec249af2f/link_lists.bin

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

precompute.py

@@ -0,0 +1,91 @@
+"""
+Precompute corpus embeddings and store in ChromaDB.
+
+Run once locally:
+    python precompute.py
+
+Produces:  data/chroma_db/  (persistent ChromaDB directory)
+"""
+
+import os
+import chromadb
+import pandas as pd
+from datasets import load_dataset
+from sentence_transformers import SentenceTransformer
+
+MODEL_NAME = "intfloat/multilingual-e5-small"
+CHROMA_PATH = os.path.join(os.path.dirname(__file__), "data", "chroma_db")
+COLLECTION_NAME = "scifact"
+BATCH_SIZE = 64
+
+
+def load_scifact() -> pd.DataFrame:
+    corpus = load_dataset("mteb/scifact", "corpus", split="corpus").to_pandas()
+    corpus["title"] = corpus["title"].fillna("").astype(str)
+    corpus["text"] = corpus["text"].fillna("").astype(str)
+    corpus["full_text"] = (
+        corpus["title"].str.strip() + ". " + corpus["text"].str.strip()
+    ).str.strip(" .")
+    corpus = corpus.rename(columns={"_id": "doc_id"})[
+        ["doc_id", "title", "text", "full_text"]
+    ]
+    return corpus.reset_index(drop=True)
+
+
+def main():
+    print("Loading SciFact corpus...")
+    corpus_df = load_scifact()
+    print(f"  {len(corpus_df)} documents loaded.")
+
+    print(f"Loading model: {MODEL_NAME}")
+    model = SentenceTransformer(MODEL_NAME)
+
+    passages = [f"passage: {t.strip()}" for t in corpus_df["full_text"].tolist()]
+    print(f"Encoding {len(passages)} passages...")
+    embeddings = model.encode(
+        passages,
+        batch_size=BATCH_SIZE,
+        show_progress_bar=True,
+        normalize_embeddings=True,
+    )
+    print(f"  Embedding shape: {embeddings.shape}")
+
+    os.makedirs(CHROMA_PATH, exist_ok=True)
+    client = chromadb.PersistentClient(path=CHROMA_PATH)
+
+    # Delete existing collection if present
+    try:
+        client.delete_collection(COLLECTION_NAME)
+    except Exception:
+        pass
+
+    collection = client.create_collection(
+        name=COLLECTION_NAME,
+        metadata={"hnsw:space": "cosine"},
+    )
+
+    ids = [str(i) for i in range(len(corpus_df))]
+    titles = corpus_df["title"].tolist()
+    texts = [t[:500] for t in corpus_df["text"].tolist()]
+    emb_lists = embeddings.tolist()
+
+    # Add in batches
+    ADD_BATCH = 500
+    for start in range(0, len(ids), ADD_BATCH):
+        end = min(start + ADD_BATCH, len(ids))
+        collection.add(
+            ids=ids[start:end],
+            embeddings=emb_lists[start:end],
+            metadatas=[
+                {"title": titles[i], "text": texts[i]} for i in range(start, end)
+            ],
+            documents=corpus_df["full_text"].tolist()[start:end],
+        )
+        print(f"  Added {end}/{len(ids)} documents to ChromaDB.")
+
+    print(f"\nChromaDB persisted to: {CHROMA_PATH}")
+    print(f"Collection '{COLLECTION_NAME}': {collection.count()} documents")
+
+
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1,8 @@
+fastapi
+uvicorn[standard]
+chromadb
+sentence-transformers
+pandas
+pyarrow
+torch
+datasets

static/index.html

@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html lang="en">
+<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');
+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();
+}
+
+async function doSearch() {
+  const q = input.value.trim();
+  if (!q) return;
+
+  btn.disabled = true;
+  btn.textContent = '...';
+  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('');
+}
+
+function esc(s) {
+  const d = document.createElement('div');
+  d.textContent = s || '';
+  return d.innerHTML;
+}
+</script>
+</body>
+</html>