Upload app.js with huggingface_hub

app.js

@@ -0,0 +1,200 @@
+const dataUrl = "./data/registry.json";
+
+const searchInput = document.getElementById("search-input");
+const sphereFilter = document.getElementById("sphere-filter");
+const comboFilter = document.getElementById("combo-filter");
+const statusFilter = document.getElementById("status-filter");
+const artifactFilter = document.getElementById("artifact-filter");
+const registryGrid = document.getElementById("registry-grid");
+const stats = document.getElementById("stats");
+const resultCount = document.getElementById("result-count");
+const cardTemplate = document.getElementById("card-template");
+
+let registryEntries = [];
+
+function titleCase(value) {
+  return value
+    .split(/[\s_-]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function prettyLabel(key, value) {
+  if (!value) {
+    return "";
+  }
+
+  if (key === "sphere") {
+    return titleCase(value);
+  }
+
+  if (key === "artifactType" || key === "validationStage") {
+    return titleCase(value);
+  }
+
+  return value;
+}
+
+function uniqueValues(entries, key) {
+  return [...new Set(entries.map((entry) => entry[key]).filter(Boolean))].sort();
+}
+
+function fillSelect(select, values, key) {
+  for (const value of values) {
+    const option = document.createElement("option");
+    option.value = value;
+    option.textContent = prettyLabel(key, value);
+    select.appendChild(option);
+  }
+}
+
+function buildStats(entries) {
+  const bySphere = ["science", "entrepreneurship", "technology"].map((sphere) => ({
+    label: prettyLabel("sphere", sphere),
+    value: entries.filter((entry) => entry.primarySphere === sphere).length,
+    className: sphere,
+  }));
+
+  const cards = [
+    { label: "Total entries", value: entries.length, className: "total" },
+    ...bySphere,
+    {
+      label: "Hybrid lanes",
+      value: entries.filter((entry) => entry.combo.includes("+")).length,
+      className: "hybrid",
+    },
+  ];
+
+  stats.innerHTML = "";
+  for (const card of cards) {
+    const wrapper = document.createElement("article");
+    wrapper.className = `stat ${card.className}`;
+    wrapper.innerHTML = `
+      <div class="stat-value">${card.value}</div>
+      <div class="stat-label">${card.label}</div>
+    `;
+    stats.appendChild(wrapper);
+  }
+}
+
+function setText(target, value) {
+  target.textContent = value && value.length ? value : "—";
+}
+
+function renderCards(entries) {
+  registryGrid.innerHTML = "";
+  resultCount.textContent = `${entries.length} result${entries.length === 1 ? "" : "s"}`;
+
+  if (!entries.length) {
+    const empty = document.createElement("div");
+    empty.className = "empty";
+    empty.textContent = "No entries match the current filters yet.";
+    registryGrid.appendChild(empty);
+    return;
+  }
+
+  for (const entry of entries) {
+    const fragment = cardTemplate.content.cloneNode(true);
+    const sphereBadge = fragment.querySelector(".badge.sphere");
+    const comboBadge = fragment.querySelector(".badge.combo");
+    const statusBadge = fragment.querySelector(".badge.status");
+    const title = fragment.querySelector(".title");
+    const summary = fragment.querySelector(".summary");
+    const track = fragment.querySelector(".track");
+    const artifactType = fragment.querySelector(".artifact-type");
+    const secondarySpheres = fragment.querySelector(".secondary-spheres");
+    const deliveryLayers = fragment.querySelector(".delivery-layers");
+    const validationStage = fragment.querySelector(".validation-stage");
+    const tags = fragment.querySelector(".tags");
+    const links = fragment.querySelector(".links");
+
+    sphereBadge.textContent = prettyLabel("sphere", entry.primarySphere);
+    sphereBadge.classList.add(entry.primarySphere);
+    comboBadge.textContent = entry.combo;
+    comboBadge.classList.add(`combo-${entry.combo.toLowerCase().replace(/\+/g, "-")}`);
+    statusBadge.textContent = prettyLabel("status", entry.status);
+
+    title.textContent = entry.title;
+    summary.textContent = entry.summary;
+    setText(track, entry.track);
+    setText(artifactType, prettyLabel("artifactType", entry.artifactType));
+    setText(
+      secondarySpheres,
+      entry.secondarySpheres.length
+        ? entry.secondarySpheres.map((item) => prettyLabel("sphere", item)).join(", ")
+        : "",
+    );
+    setText(deliveryLayers, entry.deliveryLayers.join(", "));
+    setText(validationStage, prettyLabel("validationStage", entry.validationStage));
+    setText(tags, entry.tags.join(", "));
+
+    for (const link of entry.links) {
+      const anchor = document.createElement("a");
+      anchor.href = link.href;
+      anchor.textContent = link.label;
+      anchor.target = "_blank";
+      anchor.rel = "noreferrer";
+      links.appendChild(anchor);
+    }
+
+    registryGrid.appendChild(fragment);
+  }
+}
+
+function applyFilters() {
+  const query = searchInput.value.trim().toLowerCase();
+  const sphere = sphereFilter.value;
+  const combo = comboFilter.value;
+  const status = statusFilter.value;
+  const artifact = artifactFilter.value;
+
+  const filtered = registryEntries.filter((entry) => {
+    const matchesSphere = sphere === "all" || entry.primarySphere === sphere;
+    const matchesCombo = combo === "all" || entry.combo === combo;
+    const matchesStatus = status === "all" || entry.status === status;
+    const matchesArtifact = artifact === "all" || entry.artifactType === artifact;
+    const haystack = [
+      entry.title,
+      entry.summary,
+      entry.track,
+      entry.entryType,
+      entry.primarySphere,
+      entry.combo,
+      entry.artifactType,
+      entry.validationStage,
+      ...entry.secondarySpheres,
+      ...entry.deliveryLayers,
+      ...entry.tags,
+    ]
+      .join(" ")
+      .toLowerCase();
+    const matchesQuery = !query || haystack.includes(query);
+    return matchesSphere && matchesCombo && matchesStatus && matchesArtifact && matchesQuery;
+  });
+
+  renderCards(filtered);
+}
+
+async function init() {
+  const response = await fetch(dataUrl);
+  registryEntries = await response.json();
+
+  fillSelect(sphereFilter, uniqueValues(registryEntries, "primarySphere"), "sphere");
+  fillSelect(comboFilter, uniqueValues(registryEntries, "combo"), "combo");
+  fillSelect(statusFilter, uniqueValues(registryEntries, "status"), "status");
+  fillSelect(artifactFilter, uniqueValues(registryEntries, "artifactType"), "artifactType");
+  buildStats(registryEntries);
+  renderCards(registryEntries);
+
+  searchInput.addEventListener("input", applyFilters);
+  sphereFilter.addEventListener("change", applyFilters);
+  comboFilter.addEventListener("change", applyFilters);
+  statusFilter.addEventListener("change", applyFilters);
+  artifactFilter.addEventListener("change", applyFilters);
+}
+
+init().catch((error) => {
+  registryGrid.innerHTML = `<div class="empty">Failed to load registry data: ${error.message}</div>`;
+  resultCount.textContent = "Error";
+});