Hugging Face's logo

Spaces:
SmartQHSE
/
hse-term-lookup
Running

App Files Community
hse-term-lookup
File size: 5,461 Bytes
7ed006f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
854a3af
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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>