Bootstrap automatic contribution interface

README.md

@@ -1,10 +1,15 @@
 ---
 title: Gene Embeddings Staging
-emoji: 🌍
+emoji: 🧬
 colorFrom: blue
-colorTo: gray
+colorTo: indigo
 sdk: static
+app_file: index.html
 pinned: false
+datasets:
+  - embeddingsSSRF/gene_embeddings_staging
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Gene Embeddings Staging Catalog
+
+A static catalog of approved gene embeddings. Community additions are automatically validated against the published technical policy before appearing here.

app.js

@@ -0,0 +1,87 @@
+(() => {
+  "use strict";
+  const GITHUB_CONTRIBUTING = "https://github.com/DanielTabaresLopez/Gene-Embeddings-Contributions/blob/main/CONTRIBUTING.md";
+  const DATASET_BASE = "https://huggingface.co/datasets/embeddingsSSRF/gene_embeddings_staging/tree/main/";
+
+  const grid = document.getElementById("grid");
+  const search = document.getElementById("search");
+  const category = document.getElementById("category");
+  const dialog = document.getElementById("detail-dialog");
+  const detail = document.getElementById("detail-content");
+  let catalog = [];
+
+  document.getElementById("contribute-link").href = GITHUB_CONTRIBUTING;
+  document.getElementById("contribute-link-bottom").href = GITHUB_CONTRIBUTING;
+  document.getElementById("close-detail").addEventListener("click", () => dialog.close());
+
+  const escapeHtml = (value) => {
+    const div = document.createElement("div");
+    div.textContent = value ?? "";
+    return div.innerHTML;
+  };
+
+  function render() {
+    const term = search.value.trim().toLowerCase();
+    const selected = category.value;
+    const items = catalog.filter((item) => {
+      if (selected !== "All" && item.category !== selected) return false;
+      const haystack = `${item.name} ${item.category} ${item.modality} ${item.algorithm} ${item.description}`.toLowerCase();
+      return !term || haystack.includes(term);
+    });
+    document.getElementById("result-count").textContent = `${items.length} of ${catalog.length} embedding sets`;
+    grid.innerHTML = "";
+    items.forEach((item) => {
+      const card = document.createElement("button");
+      card.className = "card";
+      card.innerHTML = `
+        <span class="badge">${escapeHtml(item.category)}</span>
+        <h3>${escapeHtml(item.name)}</h3>
+        <p>${escapeHtml(item.description || "No description provided.")}</p>
+        <div class="metrics">
+          <span><strong>${Number(item.n_genes).toLocaleString()}</strong> genes</span>
+          <span><strong>${Number(item.n_dims).toLocaleString()}</strong> dims</span>
+          <span><strong>${item.coverage_pct}%</strong> coverage</span>
+        </div>`;
+      card.addEventListener("click", () => openDetail(item));
+      grid.appendChild(card);
+    });
+  }
+
+  function openDetail(item) {
+    const path = item.dataset_path || `data/embeddings/${item.id}`;
+    detail.innerHTML = `
+      <p class="badge">${escapeHtml(item.category)}</p>
+      <h2>${escapeHtml(item.name)}</h2>
+      <p>${escapeHtml(item.description || "")}</p>
+      <div class="detail-grid">
+        <div><strong>${Number(item.n_genes).toLocaleString()}</strong>genes</div>
+        <div><strong>${Number(item.n_dims).toLocaleString()}</strong>dimensions</div>
+        <div><strong>${item.coverage_pct}%</strong>coverage</div>
+      </div>
+      <p><b>Modality:</b> ${escapeHtml(item.modality || "—")}</p>
+      <p><b>Method:</b> ${escapeHtml(item.algorithm || "—")}</p>
+      <p><b>QC:</b> ${escapeHtml(item.qc_status || "legacy package")}</p>
+      <p><b>License:</b> ${escapeHtml(item.license || "see package metadata")}</p>
+      <a class="button primary" href="${DATASET_BASE}${encodeURI(path)}" target="_blank" rel="noopener">Open package files</a>`;
+    dialog.showModal();
+  }
+
+  async function init() {
+    const response = await fetch("catalog.json", { cache: "no-store" });
+    if (!response.ok) throw new Error(`Could not load catalog.json (${response.status})`);
+    catalog = await response.json();
+    const categories = [...new Set(catalog.map((item) => item.category))].sort();
+    categories.forEach((value) => category.add(new Option(value, value)));
+    document.getElementById("stat-count").textContent = catalog.length.toLocaleString();
+    document.getElementById("stat-genes").textContent = Math.max(...catalog.map((item) => Number(item.n_genes) || 0)).toLocaleString();
+    const dims = catalog.map((item) => Number(item.n_dims) || 0);
+    document.getElementById("stat-dims").textContent = `${Math.min(...dims).toLocaleString()}–${Math.max(...dims).toLocaleString()}`;
+    render();
+  }
+
+  search.addEventListener("input", render);
+  category.addEventListener("change", render);
+  init().catch((error) => {
+    grid.innerHTML = `<p>Catalog failed to load: ${escapeHtml(error.message)}</p>`;
+  });
+})();

catalog.json

@@ -0,0 +1 @@
+[]

index.html

@@ -1,19 +1,57 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Gene Embeddings</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <div class="hero-inner">
+      <p class="eyebrow">Unified human gene representations</p>
+      <h1>Gene Embeddings</h1>
+      <p class="lead">Browse standardized gene-level representations across sequence, expression, literature, pathway, network, regulatory, knowledge-graph, and single-cell modalities.</p>
+      <div class="actions">
+        <a class="button primary" id="contribute-link" href="#">Contribute an embedding</a>
+        <a class="button" href="https://huggingface.co/datasets/embeddingsSSRF/gene_embeddings_staging" target="_blank" rel="noopener">Open Dataset</a>
+      </div>
+      <p class="notice">Community contributions are automatically checked for compliance with the technical policy. Inclusion is not independent scientific or legal endorsement.</p>
+    </div>
+  </header>
+
+  <main>
+    <section class="stats" aria-label="Catalog summary">
+      <article><strong id="stat-count">—</strong><span>embedding sets</span></article>
+      <article><strong id="stat-genes">—</strong><span>maximum genes</span></article>
+      <article><strong id="stat-dims">—</strong><span>dimension range</span></article>
+    </section>
+
+    <section class="controls">
+      <input id="search" type="search" placeholder="Search names, modalities, or methods" aria-label="Search catalog" />
+      <select id="category" aria-label="Filter by category"><option value="All">All categories</option></select>
+    </section>
+
+    <p id="result-count" class="result-count"></p>
+    <section id="grid" class="grid" aria-live="polite"></section>
+
+    <section class="contribute" id="contribute">
+      <h2>Automatic contribution workflow</h2>
+      <ol>
+        <li>Put <code>embeddings.npz</code>, <code>genes.tsv</code>, <code>metadata.json</code>, and <code>README.md</code> in a public Hugging Face Dataset.</li>
+        <li>Freeze the candidate at a full commit SHA.</li>
+        <li>Add one submission YAML through a GitHub Pull Request.</li>
+        <li>GitHub validates the frozen package. A strict PASS is merged and published automatically.</li>
+      </ol>
+      <a class="button primary" id="contribute-link-bottom" href="#">Open contribution instructions</a>
+    </section>
+  </main>
+
+  <dialog id="detail-dialog">
+    <button id="close-detail" class="close" aria-label="Close">×</button>
+    <div id="detail-content"></div>
+  </dialog>
+
+  <script src="app.js"></script>
+</body>
 </html>

style.css

@@ -1,28 +1,53 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+:root {
+  --ink: #172033;
+  --muted: #647089;
+  --line: #dbe2ee;
+  --paper: #ffffff;
+  --wash: #f4f7fb;
+  --brand: #3157d5;
+  --brand-dark: #213c9d;
+  --success: #167c5a;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
+* { box-sizing: border-box; }
+body { margin: 0; color: var(--ink); background: var(--wash); }
+a { color: inherit; }
+.hero { background: linear-gradient(135deg, #182858, #3157d5 62%, #5a80ef); color: white; }
+.hero-inner { max-width: 1160px; margin: auto; padding: 72px 24px 58px; }
+.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .78rem; opacity: .8; }
+h1 { font-size: clamp(2.5rem, 7vw, 5.2rem); line-height: .98; margin: 12px 0 20px; }
+.lead { max-width: 800px; font-size: 1.15rem; line-height: 1.65; color: #e9efff; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 17px; border-radius: 10px; border: 1px solid currentColor; text-decoration: none; font-weight: 700; }
+.hero .button { color: white; }
+.hero .button.primary { background: white; color: var(--brand-dark); border-color: white; }
+.notice { max-width: 850px; font-size: .88rem; color: #d6e0ff; margin-top: 20px; }
+main { max-width: 1160px; margin: auto; padding: 0 24px 70px; }
+.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: -28px; }
+.stats article { background: var(--paper); border: 1px solid var(--line); border-radius: 15px; padding: 22px; box-shadow: 0 8px 28px rgba(31, 47, 88, .08); }
+.stats strong { display: block; font-size: 2rem; }
+.stats span { color: var(--muted); }
+.controls { display: grid; grid-template-columns: 1fr 260px; gap: 12px; margin: 38px 0 12px; }
+input, select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font: inherit; }
+.result-count { color: var(--muted); }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
+.card { text-align: left; border: 1px solid var(--line); background: var(--paper); border-radius: 15px; padding: 19px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
+.card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(31,47,88,.10); }
+.card h3 { margin: 0 0 9px; font-size: 1.05rem; }
+.card p { color: var(--muted); line-height: 1.5; min-height: 4.5em; }
+.badge { display: inline-block; border-radius: 999px; background: #e8edff; color: var(--brand-dark); padding: 5px 9px; font-size: .75rem; font-weight: 700; }
+.metrics { display: flex; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 13px; font-size: .83rem; color: var(--muted); }
+.metrics strong { color: var(--ink); }
+.contribute { margin-top: 54px; padding: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
+.contribute li { margin: 10px 0; line-height: 1.55; }
+.contribute .button.primary { background: var(--brand); color: white; border-color: var(--brand); }
+dialog { width: min(720px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 28px; box-shadow: 0 30px 100px rgba(0,0,0,.3); }
+dialog::backdrop { background: rgba(12,20,40,.55); }
+.close { float: right; border: 0; background: none; font-size: 2rem; cursor: pointer; }
+.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
+.detail-grid div { background: var(--wash); border-radius: 10px; padding: 13px; }
+.detail-grid strong { display: block; font-size: 1.2rem; }
+@media (max-width: 720px) {
+  .stats, .controls { grid-template-columns: 1fr; }
+  .hero-inner { padding-top: 48px; }
 }