Spaces:

SmartQHSE
/

hse-term-lookup

Running

App Files Files Community

SmartQHSE commited on 14 days ago

Commit

7ed006f

1 Parent(s): 854a3af

publish: HSE Term Lookup space

Browse files

Files changed (2) hide show

README.md +17 -5
index.html +111 -18

README.md CHANGED Viewed

@@ -1,10 +1,22 @@
 ---
-title: Hse Term Lookup
-emoji: 🏃
-colorFrom: pink
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: HSE Term Lookup
+emoji: 🔍
+colorFrom: gray
+colorTo: green
 sdk: static
 pinned: false
+license: cc-by-4.0
+short_description: Searchable HSE / occupational-safety glossary
 ---
+# HSE Term Lookup
+Static HF Space — searchable HSE / occupational-safety glossary. Live data from
+[SmartQHSE Open API](https://www.smartqhse.com/api/v1/glossary). CC BY 4.0.
+Companion to the open dataset
+[SmartQHSE/hse-glossary](https://huggingface.co/datasets/SmartQHSE/hse-glossary)
+and the broader
+[SmartQHSE Open HSE Data collection](https://huggingface.co/collections/SmartQHSE/smartqhse-open-hse-data-69f7597712196f8018c2dab5).
+Built by [SmartQHSE](https://www.smartqhse.com) — the AI-native HSE/QHSE platform.

index.html CHANGED Viewed

@@ -1,19 +1,112 @@
-<!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>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>HSE Term Lookup — SmartQHSE</title>
+<meta name="description" content="Searchable HSE / occupational-safety glossary — TRIR, LTIFR, ALARP, OSHA, hierarchy of controls, permit-to-work. CC BY 4.0. Powered by SmartQHSE." />
+<style>
+  * { box-sizing: border-box; }
+  body { font-family: system-ui, -apple-system, sans-serif; margin: 0; background: #fafaf9; color: #191919; line-height: 1.55; }
+  header { background: #191919; color: white; padding: 32px 24px; text-align: center; }
+  header h1 { margin: 0 0 8px 0; font-size: 28px; font-weight: 700; }
+  header p { margin: 0 auto; opacity: 0.75; font-size: 14px; max-width: 600px; }
+  header a { color: #0B998C; text-decoration: none; }
+  main { max-width: 900px; margin: 0 auto; padding: 24px; }
+  .search { width: 100%; padding: 14px 18px; font-size: 16px; border: 1px solid #e5e5e5; border-radius: 12px; margin-bottom: 24px; outline: none; background: white; }
+  .search:focus { border-color: #0B998C; box-shadow: 0 0 0 3px rgba(11,153,140,0.1); }
+  .stats { font-size: 13px; color: #6B6B6B; margin-bottom: 16px; }
+  .term-card { background: white; border: 1px solid #e5e5e5; border-radius: 12px; padding: 20px 24px; margin-bottom: 14px; }
+  .term-card:hover { border-color: #0B998C; }
+  .term-name { font-weight: 700; font-size: 18px; color: #191919; margin: 0 0 4px 0; }
+  .term-aliases { font-size: 12px; color: #6B6B6B; margin-bottom: 10px; font-family: ui-monospace, monospace; }
+  .term-def { font-size: 14px; color: #37352F; margin: 0; }
+  .term-meta { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; font-size: 12px; }
+  .term-meta a { color: #0B998C; text-decoration: none; }
+  .term-meta a:hover { text-decoration: underline; }
+  .empty { text-align: center; color: #6B6B6B; padding: 40px; }
+  footer { text-align: center; padding: 32px 24px; color: #6B6B6B; font-size: 13px; border-top: 1px solid #e5e5e5; margin-top: 40px; }
+  footer a { color: #0B998C; text-decoration: none; }
+</style>
+</head>
+<body>
+<header>
+  <h1>HSE Term Lookup</h1>
+  <p>Searchable HSE / occupational-safety glossary — definitions, formulas, authoritative sources. Live data from <a href="https://www.smartqhse.com/api/v1/glossary">SmartQHSE Open API</a>. CC BY 4.0.</p>
+</header>
+<main>
+  <input type="search" class="search" id="q" placeholder="Search: TRIR, LTIFR, ALARP, OSHA, permit-to-work…" autofocus />
+  <div class="stats" id="stats">Loading glossary…</div>
+  <div id="results"></div>
+</main>
+<footer>
+  <p>Built by <a href="https://www.smartqhse.com">SmartQHSE</a> — the AI-native HSE/QHSE platform.<br />Open dataset: <a href="https://huggingface.co/datasets/SmartQHSE/hse-glossary">SmartQHSE/hse-glossary</a> · <a href="https://huggingface.co/collections/SmartQHSE/smartqhse-open-hse-data-69f7597712196f8018c2dab5">SmartQHSE Open HSE Data Collection</a></p>
+</footer>
+<script>
+let TERMS = [];
+function el(tag, attrs, children) {
+  const node = document.createElement(tag);
+  if (attrs) for (const k in attrs) {
+    if (k === "class") node.className = attrs[k];
+    else if (k === "href" || k === "target" || k === "rel") node.setAttribute(k, attrs[k]);
+    else node.setAttribute(k, attrs[k]);
+  }
+  if (children !== undefined) {
+    if (Array.isArray(children)) for (const c of children) {
+      if (c == null) continue;
+      node.appendChild(typeof c === "string" ? document.createTextNode(c) : c);
+    } else if (typeof children === "string") {
+      node.textContent = children;
+    } else node.appendChild(children);
+  }
+  return node;
+}
+function renderCard(t) {
+  const aliases = (t.aliases || []).filter(a => a !== t.term).join(" · ");
+  const meta = el("div", { class: "term-meta" }, [
+    el("a", { href: t.url || "#", target: "_blank", rel: "noopener" }, "Read full definition →"),
+    " · category: " + (t.category || "—"),
+  ]);
+  const card = el("article", { class: "term-card" }, [
+    el("h2", { class: "term-name" }, t.term),
+    aliases ? el("div", { class: "term-aliases" }, aliases) : null,
+    el("p", { class: "term-def" }, t.shortDefinition),
+    meta,
+  ]);
+  return card;
+}
+function render(query) {
+  const q = (query || "").trim().toLowerCase();
+  const filtered = !q ? TERMS : TERMS.filter(t => {
+    const haystack = [t.term, t.slug, ...(t.aliases || []), t.shortDefinition, t.category].join(" ").toLowerCase();
+    return haystack.includes(q);
+  });
+  const stats = document.getElementById("stats");
+  stats.textContent = q ? filtered.length + " of " + TERMS.length + " terms match \"" + q + "\"" : TERMS.length + " HSE terms";
+  const results = document.getElementById("results");
+  while (results.firstChild) results.removeChild(results.firstChild);
+  if (filtered.length === 0) {
+    results.appendChild(el("div", { class: "empty" }, "No matches. Try TRIR, ALARP, or permit-to-work."));
+  } else {
+    for (const t of filtered) results.appendChild(renderCard(t));
+  }
+}
+(async () => {
+  try {
+    const r = await fetch("https://www.smartqhse.com/api/v1/glossary");
+    const j = await r.json();
+    TERMS = j.terms || [];
+    render("");
+  } catch (e) {
+    document.getElementById("stats").textContent = "Failed to load glossary. Try again later.";
+    console.error(e);
+  }
+  document.getElementById("q").addEventListener("input", (e) => render(e.target.value));
+})();
+</script>
+</body>
 </html>