Spaces:
Running
Running
| <html lang="en"> | |
| <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/[email protected]/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> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="logo-section"> | |
| <img src="/static/logo.png" alt="LionGuard Logo" class="logo"> | |
| <div class="logo-text"> | |
| <h1>LionGuard</h1> | |
| <p>A content moderation tool designed for Singapore</p> | |
| </div> | |
| </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> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container"> | |
| <!-- Detector Tab Content --> | |
| <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 --> | |
| <div class="model-selector-prominent"> | |
| <div class="model-selector-header"> | |
| <h3>Model Selection</h3> | |
| </div> | |
| <div class="model-dropdown"> | |
| <select id="model-select" class="model-select" aria-label="Detector guardrail model"> | |
| <option value="lionguard-2.1" selected>LionGuard 2.1 (Gemini Embeddings, API)</option> | |
| <option value="lionguard-2">LionGuard 2 (OpenAI Embeddings, API)</option> | |
| <option value="lionguard-2-lite">LionGuard 2 Lite (Gemma Embeddings, Local)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Analysis Section --> | |
| <div class="analysis-grid"> | |
| <!-- Input Panel --> | |
| <div class="panel input-panel"> | |
| <h3>Input</h3> | |
| <textarea | |
| id="text-input" | |
| placeholder="Enter text to analyze for content moderation..." | |
| rows="10" | |
| ></textarea> | |
| <button id="analyze-btn" class="btn btn-primary"> | |
| <i class='bx bx-search btn-icon'></i> | |
| Analyze | |
| </button> | |
| </div> | |
| <!-- Results Panel --> | |
| <div class="panel results-panel"> | |
| <h3>Analysis</h3> | |
| <!-- Binary Score --> | |
| <div id="binary-result" class="binary-placeholder"> | |
| <i class='bx bx-edit placeholder-icon'></i> | |
| <p>Enter text to analyze</p> | |
| </div> | |
| <!-- Category Scores --> | |
| <div id="category-results" class="category-placeholder"> | |
| <p>Category scores will appear here after analysis</p> | |
| </div> | |
| <!-- Feedback Section --> | |
| <div id="feedback-section" class="feedback-section" style="display: none;"> | |
| <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="feedback-message" class="feedback-message"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chatbot Guardrail Tab Content --> | |
| <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 --> | |
| <div class="model-selector-prominent"> | |
| <div class="model-selector-header"> | |
| <h3>Model Selection</h3> | |
| </div> | |
| <div class="model-dropdown"> | |
| <select id="model-select-gc" class="model-select" aria-label="Chat guardrail model"> | |
| <option value="lionguard-2.1" selected>LionGuard 2.1 (Gemini Embeddings, API)</option> | |
| <option value="lionguard-2">LionGuard 2 (OpenAI Embeddings, API)</option> | |
| <option value="lionguard-2-lite">LionGuard 2 Lite (Gemma Embeddings, Local)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Chat Grid --> | |
| <div class="chat-grid"> | |
| <!-- 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> | |
| </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> | |
| </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> | |
| </div> | |
| </div> | |
| <!-- Message Input --> | |
| <div class="message-input-section"> | |
| <div class="message-input-group"> | |
| <input | |
| type="text" | |
| id="message-input" | |
| placeholder="Enter message to test across all guardrails..." | |
| > | |
| <button id="send-btn" class="btn btn-primary">Send</button> | |
| <button id="clear-btn" class="btn btn-danger">Clear</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- About Tab Content --> | |
| <div id="about-content" class="tab-content"> | |
| <!-- Hero Section --> | |
| <section class="about-intro-section"> | |
| <p class="lead">LionGuard is a family of open-source content moderation models specifically designed for Singapore's multilingual environment. Optimized for Singapore’s linguistic mix, including Singlish, Mandarin, Malay, and Tamil, LionGuard delivers accurate moderation grounded in local usage and cultural nuance.</p> | |
| <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> | |
| </section> | |
| <!-- Resources Section --> | |
| <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> | |
| <a href="https://huggingface.co/govtech/lionguard-2-lite" target="_blank">LionGuard 2 Lite</a> | |
| <a href="https://huggingface.co/govtech/lionguard-v1" target="_blank">LionGuard 1</a> | |
| </div> | |
| </div> | |
| <!-- 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> | |
| </div> | |
| </div> | |
| <!-- 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> | |
| </div> | |
| </div> | |
| <!-- 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> | |
| <a href="https://arxiv.org/abs/2407.10995" target="_blank">LionGuard 1 (arXiv:2407.10995)</a> | |
| </div> | |
| </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 class="footer"> | |
| <div class="container"> | |
| <p>LionGuard · Powered by <a href="https://www.tech.gov.sg/" target="_blank">GovTech</a></p> | |
| </div> | |
| </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> | |