Spaces:

govtech
/

lionguard-demo

Running

App Files Files Community

gabrielchua commited on 7 days ago

Commit

6bd689e

verified ·

1 Parent(s): 1bc2a4e

Update app/frontend/index.html

Browse files

Files changed (1) hide show

app/frontend/index.html +164 -20

app/frontend/index.html CHANGED Viewed

@@ -3,7 +3,22 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Lionguard</title>
     <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
@@ -20,34 +35,38 @@
                 </div>
                 <div class="header-controls">
                     <nav class="tabs" aria-label="Primary navigation">
                         <div class="nav-dropdown">
                             <button
                                 class="tab dropdown-toggle"
                                 aria-haspopup="true"
                                 aria-expanded="false"
                             >
-                                <span class="tab-icon">🛠️</span>
                                 Demos
-                                <span class="dropdown-caret">▾</span>
                             </button>
                             <div class="dropdown-menu" role="menu">
                                 <button class="tab dropdown-item active" data-tab="detector" role="menuitem">
-                                    <span class="tab-icon">🔍</span>
                                     Detector
                                 </button>
                                 <button class="tab dropdown-item" data-tab="chat" role="menuitem">
-                                    <span class="tab-icon">💬</span>
                                     Chatbot Guardrail
                                 </button>
                             </div>
                         </div>
                         <button class="tab nav-link" data-tab="about">
-                            <span class="tab-icon">ℹ️</span>
                             About
                         </button>
                     </nav>
                     <button id="theme-toggle" class="theme-icon-button" aria-label="Toggle theme">
-                        <span class="theme-icon" aria-hidden="true">🌞</span>
                     </button>
                 </div>
             </div>
@@ -60,7 +79,7 @@
         <div id="detector-content" class="tab-content active">
             <!-- Disclaimer -->
             <div class="warning-card">
-                ⚠️ Inputs are anonymised and logged to improve Lionguard's moderation models.
             </div>
             <!-- Model Selector -->
@@ -88,7 +107,7 @@
                         rows="10"
                     ></textarea>
                     <button id="analyze-btn" class="btn btn-primary">
-                        <span class="btn-icon">🔍</span>
                         Analyze
                     </button>
                 </div>
@@ -99,7 +118,7 @@
                     <!-- Binary Score -->
                     <div id="binary-result" class="binary-placeholder">
-                        <div class="placeholder-icon">📝</div>
                         <p>Enter text to analyze</p>
                     </div>
@@ -113,11 +132,11 @@
                         <p class="feedback-prompt">Does this look correct?</p>
                         <div class="feedback-buttons">
                             <button id="thumbs-up" class="btn btn-success">
-                                <span>👍</span>
                                 Yes
                             </button>
                             <button id="thumbs-down" class="btn btn-secondary">
-                                <span>👎</span>
                                 No
                             </button>
                         </div>
@@ -131,7 +150,7 @@
         <div id="chat-content" class="tab-content full-width-section">
             <!-- Disclaimer -->
             <div class="warning-card">
-                ⚠️ Inputs are anonymised and logged to improve Lionguard's moderation models.
             </div>
             <!-- Model Selector for Guardrail -->
@@ -153,7 +172,7 @@
                 <!-- No Moderation -->
                 <div class="chat-panel">
                     <div class="chat-header">
-                        <span class="chat-icon">🔵</span>
                         <h4>No Moderation</h4>
                     </div>
                     <div id="chat-no-mod" class="chat-messages"></div>
@@ -162,7 +181,7 @@
                 <!-- OpenAI Moderation -->
                 <div class="chat-panel">
                     <div class="chat-header">
-                        <span class="chat-icon">🟠</span>
                         <h4>OpenAI Moderation</h4>
                     </div>
                     <div id="chat-openai" class="chat-messages"></div>
@@ -171,7 +190,7 @@
                 <!-- Lionguard -->
                 <div class="chat-panel">
                     <div class="chat-header">
-                        <span class="chat-icon">🛡️</span>
                         <h4>Lionguard</h4>
                     </div>
                     <div id="chat-lionguard" class="chat-messages"></div>
@@ -204,7 +223,7 @@
             <section class="about-resources-grid">
                 <!-- Models -->
                 <div class="resource-card">
-                    <h3>🤗 Open-Sourced Models</h3>
                     <div class="resource-list">
                         <a href="https://huggingface.co/govtech/lionguard-2.1" target="_blank">Lionguard 2.1</a>
                         <a href="https://huggingface.co/govtech/lionguard-2" target="_blank">Lionguard 2</a>
@@ -215,7 +234,7 @@
                 <!-- Datasets -->
                 <div class="resource-card">
-                    <h3>📊 Open-Sourced Datasets</h3>
                     <div class="resource-list">
                         <a href="https://huggingface.co/datasets/govtech/lionguard-2-synthetic-instruct" target="_blank">Subset of Training Data</a>
                         <a href="https://huggingface.co/datasets/govtech/RabakBench" target="_blank">RabakBench</a>
@@ -224,7 +243,7 @@
                 <!-- Blog Posts -->
                 <div class="resource-card">
-                    <h3>📝 Blog Posts</h3>
                     <div class="resource-list">
                         <a href="https://medium.com/dsaid-govtech/lionguard-2-8066d4e20d16" target="_blank">Lionguard 2</a>
                         <a href="https://medium.com/dsaid-govtech/building-lionguard-a-contextualised-moderation-classifier-to-tackle-local-unsafe-content-8f68c8f13179" target="_blank">Lionguard</a>
@@ -233,7 +252,7 @@
                 <!-- Papers -->
                 <div class="resource-card">
-                    <h3>📄 Research Papers</h3>
                     <div class="resource-list">
                         <a href="https://arxiv.org/abs/2507.05980" target="_blank">Lionguard 2 (arXiv:2507.05980)</a>
                         <a href="https://arxiv.org/abs/2507.15339" target="_blank">RabakBench (arXiv:2507.15339)</a>
@@ -242,6 +261,127 @@
                 </div>
             </section>
         </div>
     </main>
     <!-- Footer -->
@@ -252,5 +392,9 @@
     </footer>
     <script src="/static/script.js"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Lionguard: A content moderation tool designed for Singapore's multilingual environment.">
+    <meta name="theme-color" content="#E14746">
+    <title>Lionguard - Content Moderation</title>
+    <link rel="icon" type="image/png" href="/static/logo.png">
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
+    <!-- Icons -->
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+    <!-- Syntax Highlighting -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
                 </div>
                 <div class="header-controls">
                     <nav class="tabs" aria-label="Primary navigation">
+                        <button class="tab nav-link" data-tab="get-started">
+                            <i class='bx bx-rocket tab-icon'></i>
+                            Get Started
+                        </button>
                         <div class="nav-dropdown">
                             <button
                                 class="tab dropdown-toggle"
                                 aria-haspopup="true"
                                 aria-expanded="false"
                             >
+                                <i class='bx bx-grid-alt tab-icon'></i>
                                 Demos
+                                <i class='bx bx-chevron-down dropdown-caret'></i>
                             </button>
                             <div class="dropdown-menu" role="menu">
                                 <button class="tab dropdown-item active" data-tab="detector" role="menuitem">
+                                    <i class='bx bx-search tab-icon'></i>
                                     Detector
                                 </button>
                                 <button class="tab dropdown-item" data-tab="chat" role="menuitem">
+                                    <i class='bx bx-message-rounded-dots tab-icon'></i>
                                     Chatbot Guardrail
                                 </button>
                             </div>
                         </div>
                         <button class="tab nav-link" data-tab="about">
+                            <i class='bx bx-info-circle tab-icon'></i>
                             About
                         </button>
                     </nav>
                     <button id="theme-toggle" class="theme-icon-button" aria-label="Toggle theme">
+                        <i class='bx bx-sun theme-icon'></i>
                     </button>
                 </div>
             </div>
         <div id="detector-content" class="tab-content active">
             <!-- Disclaimer -->
             <div class="warning-card">
+                <i class='bx bx-error-circle'></i> Inputs are anonymised and logged to improve Lionguard's moderation models.
             </div>
             <!-- Model Selector -->
                         rows="10"
                     ></textarea>
                     <button id="analyze-btn" class="btn btn-primary">
+                        <i class='bx bx-search btn-icon'></i>
                         Analyze
                     </button>
                 </div>
                     <!-- Binary Score -->
                     <div id="binary-result" class="binary-placeholder">
+                        <i class='bx bx-edit placeholder-icon'></i>
                         <p>Enter text to analyze</p>
                     </div>
                         <p class="feedback-prompt">Does this look correct?</p>
                         <div class="feedback-buttons">
                             <button id="thumbs-up" class="btn btn-success">
+                                <i class='bx bx-like'></i>
                                 Yes
                             </button>
                             <button id="thumbs-down" class="btn btn-secondary">
+                                <i class='bx bx-dislike'></i>
                                 No
                             </button>
                         </div>
         <div id="chat-content" class="tab-content full-width-section">
             <!-- Disclaimer -->
             <div class="warning-card">
+                <i class='bx bx-error-circle'></i> Inputs are anonymised and logged to improve Lionguard's moderation models.
             </div>
             <!-- Model Selector for Guardrail -->
                 <!-- No Moderation -->
                 <div class="chat-panel">
                     <div class="chat-header">
+                        <i class='bx bxs-circle chat-icon' style="color: #3B82F6;"></i>
                         <h4>No Moderation</h4>
                     </div>
                     <div id="chat-no-mod" class="chat-messages"></div>
                 <!-- OpenAI Moderation -->
                 <div class="chat-panel">
                     <div class="chat-header">
+                        <i class='bx bxs-circle chat-icon' style="color: #F59E0B;"></i>
                         <h4>OpenAI Moderation</h4>
                     </div>
                     <div id="chat-openai" class="chat-messages"></div>
                 <!-- Lionguard -->
                 <div class="chat-panel">
                     <div class="chat-header">
+                        <i class='bx bx-shield-quarter chat-icon' style="color: #E14746;"></i>
                         <h4>Lionguard</h4>
                     </div>
                     <div id="chat-lionguard" class="chat-messages"></div>
             <section class="about-resources-grid">
                 <!-- Models -->
                 <div class="resource-card">
+                    <h3><i class='bx bx-cube-alt'></i> Open-Sourced Models</h3>
                     <div class="resource-list">
                         <a href="https://huggingface.co/govtech/lionguard-2.1" target="_blank">Lionguard 2.1</a>
                         <a href="https://huggingface.co/govtech/lionguard-2" target="_blank">Lionguard 2</a>
                 <!-- Datasets -->
                 <div class="resource-card">
+                    <h3><i class='bx bx-data'></i> Open-Sourced Datasets</h3>
                     <div class="resource-list">
                         <a href="https://huggingface.co/datasets/govtech/lionguard-2-synthetic-instruct" target="_blank">Subset of Training Data</a>
                         <a href="https://huggingface.co/datasets/govtech/RabakBench" target="_blank">RabakBench</a>
                 <!-- Blog Posts -->
                 <div class="resource-card">
+                    <h3><i class='bx bx-news'></i> Blog Posts</h3>
                     <div class="resource-list">
                         <a href="https://medium.com/dsaid-govtech/lionguard-2-8066d4e20d16" target="_blank">Lionguard 2</a>
                         <a href="https://medium.com/dsaid-govtech/building-lionguard-a-contextualised-moderation-classifier-to-tackle-local-unsafe-content-8f68c8f13179" target="_blank">Lionguard</a>
                 <!-- Papers -->
                 <div class="resource-card">
+                    <h3><i class='bx bx-file'></i> Research Papers</h3>
                     <div class="resource-list">
                         <a href="https://arxiv.org/abs/2507.05980" target="_blank">Lionguard 2 (arXiv:2507.05980)</a>
                         <a href="https://arxiv.org/abs/2507.15339" target="_blank">RabakBench (arXiv:2507.15339)</a>
                 </div>
             </section>
         </div>
+        <!-- Get Started Tab Content -->
+        <div id="get-started-content" class="tab-content">
+            <div class="get-started-container">
+                <!-- Option 1 -->
+                <div class="option-card full-width-card">
+                    <div class="option-header">
+                        <i class='bx bx-server option-icon'></i>
+                        <div>
+                            <h2>Option 1: Self-Host the Classifier</h2>
+                            <p>Integrate Lionguard directly into your applications. Toggle between models to see the implementation details.</p>
+                        </div>
+                    </div>
+                    <div class="code-section">
+                        <div class="code-tabs-header">
+                            <div class="code-tabs">
+                                <button class="code-tab active" data-code="lg2.1">Lionguard 2.1</button>
+                                <button class="code-tab" data-code="lg2">Lionguard 2</button>
+                                <button class="code-tab" data-code="lg2-lite">Lionguard 2 Lite</button>
+                            </div>
+                            <button id="copy-code-btn" class="copy-btn" title="Copy to clipboard">
+                                <i class='bx bx-copy'></i> Copy
+                            </button>
+                        </div>
+                        <div class="code-display">
+                            <!-- Lionguard 2.1 Snippet -->
+                            <div id="code-lg2.1" class="code-block active">
+<pre><code class="language-python">import os
+import numpy as np
+from transformers import AutoModel
+from google import genai
+# Load model directly from HF
+model = AutoModel.from_pretrained("govtech/lionguard-2.1", trust_remote_code=True)
+# Text to classify
+texts = ["hello", "world"]
+# Get embeddings (users to input their own Gemini API key)
+client = genai.Client(api_key=os.getenv("GEMINI_API_KEY"))
+response = client.models.embed_content(
+    model="gemini-embedding-001",
+    contents=texts
+)
+embeddings = np.array([emb.values for emb in response.embeddings])
+# Run inference
+results = model.predict(embeddings)</code></pre>
+                            </div>
+                            <!-- Lionguard 2 Snippet -->
+                            <div id="code-lg2" class="code-block">
+<pre><code class="language-python">import os
+import numpy as np
+from transformers import AutoModel
+from openai import OpenAI
+# Load model directly from HF
+model = AutoModel.from_pretrained(
+    "govtech/lionguard-2",
+    trust_remote_code=True
+    )
+# Get OpenAI embeddings (users to input their own OpenAI API key)
+client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+response = client.embeddings.create(
+    input="Hello, world!", # users to input their own text
+    model="text-embedding-3-large",
+    dimensions=3072 # dimensions of the embedding
+    )
+embeddings = np.array([data.embedding for data in response.data])
+# Run LionGuard 2
+results = model.predict(embeddings)</code></pre>
+                            </div>
+                            <!-- Lionguard 2 Lite Snippet -->
+                            <div id="code-lg2-lite" class="code-block">
+<pre><code class="language-python">import numpy as np
+from sentence_transformers import SentenceTransformer
+from transformers import AutoModel
+# Load model directly from Hub
+model = AutoModel.from_pretrained("govtech/lionguard-2-lite", trust_remote_code=True)
+# Download model from the 🤗 Hub
+embedding_model = SentenceTransformer("google/embeddinggemma-300m")
+# Text to classify
+texts = ["hello", "world"]
+# Add prompt instructions to generate embeddings that are optimized to classify texts according to preset labels
+formatted_texts = [f"task: classification | query: {c}" for c in texts]
+embeddings = embedding_model.encode(formatted_texts) # NOTE: use encode() instead of encode_documents()
+# Run inference
+results = model.predict(embeddings)</code></pre>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Option 2 -->
+                <div class="option-card full-width-card">
+                    <div class="option-header">
+                        <i class='bx bx-shield-quarter option-icon'></i>
+                        <div>
+                            <h2>Option 2: via AI Guardians - Sentinel</h2>
+                            <p>Managed service for Singapore public sector agencies.</p>
+                        </div>
+                    </div>
+                    <div class="option-action">
+                        <a href="https://www.aiguardian.gov.sg/" target="_blank" class="btn btn-primary">
+                            Visit AI Guardians
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
     </main>
     <!-- Footer -->
     </footer>
     <script src="/static/script.js"></script>
+    <!-- Syntax Highlighting -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
 </body>
 </html>