Hugging Face's logo

Spaces:
govtech
/
lionguard-demo
Running

App Files Community
1
gabrielchua commited on
Commit
730800c
路
verified 路
1 Parent(s): 1f73110

Update app/frontend/index.html

Browse files
Files changed (1) hide show
  1. app/frontend/index.html +31 -31
app/frontend/index.html CHANGED
@@ -3,9 +3,9 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="Lionguard: A content moderation tool designed for Singapore's multilingual environment.">
7
  <meta name="theme-color" content="#E14746">
8
- <title>Lionguard - Content Moderation</title>
9
  <link rel="icon" type="image/png" href="/static/logo.png">
10
 
11
  <!-- Fonts -->
@@ -27,9 +27,9 @@
27
  <div class="container">
28
  <div class="header-content">
29
  <div class="logo-section">
30
- <img src="/static/logo.png" alt="Lionguard Logo" class="logo">
31
  <div class="logo-text">
32
- <h1>Lionguard</h1>
33
  <p>A content moderation tool designed for Singapore</p>
34
  </div>
35
  </div>
@@ -79,7 +79,7 @@
79
  <div id="detector-content" class="tab-content active">
80
  <!-- Disclaimer -->
81
  <div class="warning-card">
82
- <i class='bx bx-error-circle'></i> Inputs are anonymised and logged to improve Lionguard's moderation models.
83
  </div>
84
 
85
  <!-- Model Selector -->
@@ -89,9 +89,9 @@
89
  </div>
90
  <div class="model-dropdown">
91
  <select id="model-select" class="model-select" aria-label="Detector guardrail model">
92
- <option value="lionguard-2.1" selected>Lionguard 2.1 (Gemini Embeddings, API)</option>
93
- <option value="lionguard-2">Lionguard 2 (OpenAI Embeddings, API)</option>
94
- <option value="lionguard-2-lite">Lionguard 2 Lite (Gemma Embeddings, Local)</option>
95
  </select>
96
  </div>
97
  </div>
@@ -150,7 +150,7 @@
150
  <div id="chat-content" class="tab-content full-width-section">
151
  <!-- Disclaimer -->
152
  <div class="warning-card">
153
- <i class='bx bx-error-circle'></i> Inputs are anonymised and logged to improve Lionguard's moderation models.
154
  </div>
155
 
156
  <!-- Model Selector for Guardrail -->
@@ -160,9 +160,9 @@
160
  </div>
161
  <div class="model-dropdown">
162
  <select id="model-select-gc" class="model-select" aria-label="Chat guardrail model">
163
- <option value="lionguard-2.1" selected>Lionguard 2.1 (Gemini Embeddings, API)</option>
164
- <option value="lionguard-2">Lionguard 2 (OpenAI Embeddings, API)</option>
165
- <option value="lionguard-2-lite">Lionguard 2 Lite (Gemma Embeddings, Local)</option>
166
  </select>
167
  </div>
168
  </div>
@@ -187,11 +187,11 @@
187
  <div id="chat-openai" class="chat-messages"></div>
188
  </div>
189
 
190
- <!-- Lionguard -->
191
  <div class="chat-panel">
192
  <div class="chat-header">
193
  <i class='bx bx-shield-quarter chat-icon' style="color: #E14746;"></i>
194
- <h4>Lionguard</h4>
195
  </div>
196
  <div id="chat-lionguard" class="chat-messages"></div>
197
  </div>
@@ -215,7 +215,7 @@
215
  <div id="about-content" class="tab-content">
216
  <!-- Hero Section -->
217
  <section class="about-intro-section">
218
- <p class="lead">Lionguard is a family of open-source content moderation models specifically designed for Singapore's multilingual environment. Optimized for Singapore鈥檚 linguistic mix, including Singlish, Mandarin, Malay, and Tamil, Lionguard delivers accurate moderation grounded in local usage and cultural nuance.</p>
219
  <p class="lead" style="font-style: italic;">Developed by <a href="https://www.tech.gov.sg/" target="_blank" style="color: var(--primary-red); text-decoration: none; font-weight: 600;">GovTech Singapore</a>.</p>
220
  </section>
221
 
@@ -225,10 +225,10 @@
225
  <div class="resource-card">
226
  <h3><i class='bx bx-cube-alt'></i> Open-Sourced Models</h3>
227
  <div class="resource-list">
228
- <a href="https://huggingface.co/govtech/lionguard-2.1" target="_blank">Lionguard 2.1</a>
229
- <a href="https://huggingface.co/govtech/lionguard-2" target="_blank">Lionguard 2</a>
230
- <a href="https://huggingface.co/govtech/lionguard-2-lite" target="_blank">Lionguard 2 Lite</a>
231
- <a href="https://huggingface.co/govtech/lionguard-v1" target="_blank">Lionguard 1</a>
232
  </div>
233
  </div>
234
 
@@ -245,8 +245,8 @@
245
  <div class="resource-card">
246
  <h3><i class='bx bx-news'></i> Blog Posts</h3>
247
  <div class="resource-list">
248
- <a href="https://medium.com/dsaid-govtech/lionguard-2-8066d4e20d16" target="_blank">Lionguard 2</a>
249
- <a href="https://medium.com/dsaid-govtech/building-lionguard-a-contextualised-moderation-classifier-to-tackle-local-unsafe-content-8f68c8f13179" target="_blank">Lionguard</a>
250
  </div>
251
  </div>
252
 
@@ -254,9 +254,9 @@
254
  <div class="resource-card">
255
  <h3><i class='bx bx-file'></i> Research Papers</h3>
256
  <div class="resource-list">
257
- <a href="https://arxiv.org/abs/2507.05980" target="_blank">Lionguard 2 (arXiv:2507.05980)</a>
258
  <a href="https://arxiv.org/abs/2507.15339" target="_blank">RabakBench (arXiv:2507.15339)</a>
259
- <a href="https://arxiv.org/abs/2407.10995" target="_blank">Lionguard 1 (arXiv:2407.10995)</a>
260
  </div>
261
  </div>
262
  </section>
@@ -271,16 +271,16 @@
271
  <i class='bx bx-server option-icon'></i>
272
  <div>
273
  <h2>Option 1: Self-Host the Classifier</h2>
274
- <p>Integrate Lionguard directly into your applications. Toggle between models to see the implementation details.</p>
275
  </div>
276
  </div>
277
 
278
  <div class="code-section">
279
  <div class="code-tabs-header">
280
  <div class="code-tabs">
281
- <button class="code-tab active" data-code="lg2.1">Lionguard 2.1</button>
282
- <button class="code-tab" data-code="lg2">Lionguard 2</button>
283
- <button class="code-tab" data-code="lg2-lite">Lionguard 2 Lite</button>
284
  </div>
285
  <button id="copy-code-btn" class="copy-btn" title="Copy to clipboard">
286
  <i class='bx bx-copy'></i> Copy
@@ -288,7 +288,7 @@
288
  </div>
289
 
290
  <div class="code-display">
291
- <!-- Lionguard 2.1 Snippet -->
292
  <div id="code-lg2.1" class="code-block active">
293
  <pre><code class="language-python">import os
294
  import numpy as np
@@ -313,7 +313,7 @@ embeddings = np.array([emb.values for emb in response.embeddings])
313
  results = model.predict(embeddings)</code></pre>
314
  </div>
315
 
316
- <!-- Lionguard 2 Snippet -->
317
  <div id="code-lg2" class="code-block">
318
  <pre><code class="language-python">import os
319
  import numpy as np
@@ -339,7 +339,7 @@ embeddings = np.array([data.embedding for data in response.data])
339
  results = model.predict(embeddings)</code></pre>
340
  </div>
341
 
342
- <!-- Lionguard 2 Lite Snippet -->
343
  <div id="code-lg2-lite" class="code-block">
344
  <pre><code class="language-python">import numpy as np
345
  from sentence_transformers import SentenceTransformer
@@ -387,7 +387,7 @@ results = model.predict(embeddings)</code></pre>
387
  <!-- Footer -->
388
  <footer class="footer">
389
  <div class="container">
390
- <p>Lionguard 路 Powered by <a href="https://www.tech.gov.sg/" target="_blank">GovTech</a></p>
391
  </div>
392
  </footer>
393
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="LionGuard: A content moderation tool designed for Singapore's multilingual environment.">
7
  <meta name="theme-color" content="#E14746">
8
+ <title>LionGuard - Content Moderation</title>
9
  <link rel="icon" type="image/png" href="/static/logo.png">
10
 
11
  <!-- Fonts -->
 
27
  <div class="container">
28
  <div class="header-content">
29
  <div class="logo-section">
30
+ <img src="/static/logo.png" alt="LionGuard Logo" class="logo">
31
  <div class="logo-text">
32
+ <h1>LionGuard</h1>
33
  <p>A content moderation tool designed for Singapore</p>
34
  </div>
35
  </div>
 
79
  <div id="detector-content" class="tab-content active">
80
  <!-- Disclaimer -->
81
  <div class="warning-card">
82
+ <i class='bx bx-error-circle'></i> Inputs are anonymised and logged to improve LionGuard's moderation models.
83
  </div>
84
 
85
  <!-- Model Selector -->
 
89
  </div>
90
  <div class="model-dropdown">
91
  <select id="model-select" class="model-select" aria-label="Detector guardrail model">
92
+ <option value="lionguard-2.1" selected>LionGuard 2.1 (Gemini Embeddings, API)</option>
93
+ <option value="lionguard-2">LionGuard 2 (OpenAI Embeddings, API)</option>
94
+ <option value="lionguard-2-lite">LionGuard 2 Lite (Gemma Embeddings, Local)</option>
95
  </select>
96
  </div>
97
  </div>
 
150
  <div id="chat-content" class="tab-content full-width-section">
151
  <!-- Disclaimer -->
152
  <div class="warning-card">
153
+ <i class='bx bx-error-circle'></i> Inputs are anonymised and logged to improve LionGuard's moderation models.
154
  </div>
155
 
156
  <!-- Model Selector for Guardrail -->
 
160
  </div>
161
  <div class="model-dropdown">
162
  <select id="model-select-gc" class="model-select" aria-label="Chat guardrail model">
163
+ <option value="lionguard-2.1" selected>LionGuard 2.1 (Gemini Embeddings, API)</option>
164
+ <option value="lionguard-2">LionGuard 2 (OpenAI Embeddings, API)</option>
165
+ <option value="lionguard-2-lite">LionGuard 2 Lite (Gemma Embeddings, Local)</option>
166
  </select>
167
  </div>
168
  </div>
 
187
  <div id="chat-openai" class="chat-messages"></div>
188
  </div>
189
 
190
+ <!-- LionGuard -->
191
  <div class="chat-panel">
192
  <div class="chat-header">
193
  <i class='bx bx-shield-quarter chat-icon' style="color: #E14746;"></i>
194
+ <h4>LionGuard</h4>
195
  </div>
196
  <div id="chat-lionguard" class="chat-messages"></div>
197
  </div>
 
215
  <div id="about-content" class="tab-content">
216
  <!-- Hero Section -->
217
  <section class="about-intro-section">
218
+ <p class="lead">LionGuard is a family of open-source content moderation models specifically designed for Singapore's multilingual environment. Optimized for Singapore鈥檚 linguistic mix, including Singlish, Mandarin, Malay, and Tamil, LionGuard delivers accurate moderation grounded in local usage and cultural nuance.</p>
219
  <p class="lead" style="font-style: italic;">Developed by <a href="https://www.tech.gov.sg/" target="_blank" style="color: var(--primary-red); text-decoration: none; font-weight: 600;">GovTech Singapore</a>.</p>
220
  </section>
221
 
 
225
  <div class="resource-card">
226
  <h3><i class='bx bx-cube-alt'></i> Open-Sourced Models</h3>
227
  <div class="resource-list">
228
+ <a href="https://huggingface.co/govtech/lionguard-2.1" target="_blank">LionGuard 2.1</a>
229
+ <a href="https://huggingface.co/govtech/lionguard-2" target="_blank">LionGuard 2</a>
230
+ <a href="https://huggingface.co/govtech/lionguard-2-lite" target="_blank">LionGuard 2 Lite</a>
231
+ <a href="https://huggingface.co/govtech/lionguard-v1" target="_blank">LionGuard 1</a>
232
  </div>
233
  </div>
234
 
 
245
  <div class="resource-card">
246
  <h3><i class='bx bx-news'></i> Blog Posts</h3>
247
  <div class="resource-list">
248
+ <a href="https://medium.com/dsaid-govtech/lionguard-2-8066d4e20d16" target="_blank">LionGuard 2</a>
249
+ <a href="https://medium.com/dsaid-govtech/building-lionguard-a-contextualised-moderation-classifier-to-tackle-local-unsafe-content-8f68c8f13179" target="_blank">LionGuard</a>
250
  </div>
251
  </div>
252
 
 
254
  <div class="resource-card">
255
  <h3><i class='bx bx-file'></i> Research Papers</h3>
256
  <div class="resource-list">
257
+ <a href="https://arxiv.org/abs/2507.05980" target="_blank">LionGuard 2 (arXiv:2507.05980)</a>
258
  <a href="https://arxiv.org/abs/2507.15339" target="_blank">RabakBench (arXiv:2507.15339)</a>
259
+ <a href="https://arxiv.org/abs/2407.10995" target="_blank">LionGuard 1 (arXiv:2407.10995)</a>
260
  </div>
261
  </div>
262
  </section>
 
271
  <i class='bx bx-server option-icon'></i>
272
  <div>
273
  <h2>Option 1: Self-Host the Classifier</h2>
274
+ <p>Integrate LionGuard directly into your applications. Toggle between models to see the implementation details.</p>
275
  </div>
276
  </div>
277
 
278
  <div class="code-section">
279
  <div class="code-tabs-header">
280
  <div class="code-tabs">
281
+ <button class="code-tab active" data-code="lg2.1">LionGuard 2.1</button>
282
+ <button class="code-tab" data-code="lg2">LionGuard 2</button>
283
+ <button class="code-tab" data-code="lg2-lite">LionGuard 2 Lite</button>
284
  </div>
285
  <button id="copy-code-btn" class="copy-btn" title="Copy to clipboard">
286
  <i class='bx bx-copy'></i> Copy
 
288
  </div>
289
 
290
  <div class="code-display">
291
+ <!-- LionGuard 2.1 Snippet -->
292
  <div id="code-lg2.1" class="code-block active">
293
  <pre><code class="language-python">import os
294
  import numpy as np
 
313
  results = model.predict(embeddings)</code></pre>
314
  </div>
315
 
316
+ <!-- LionGuard 2 Snippet -->
317
  <div id="code-lg2" class="code-block">
318
  <pre><code class="language-python">import os
319
  import numpy as np
 
339
  results = model.predict(embeddings)</code></pre>
340
  </div>
341
 
342
+ <!-- LionGuard 2 Lite Snippet -->
343
  <div id="code-lg2-lite" class="code-block">
344
  <pre><code class="language-python">import numpy as np
345
  from sentence_transformers import SentenceTransformer
 
387
  <!-- Footer -->
388
  <footer class="footer">
389
  <div class="container">
390
+ <p>LionGuard 路 Powered by <a href="https://www.tech.gov.sg/" target="_blank">GovTech</a></p>
391
  </div>
392
  </footer>
393