Spaces:
Running
Running
| <html lang="en"> | |
| <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> | |
| <!-- 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"> | |
| <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> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container"> | |
| <!-- Detector Tab Content --> | |
| <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 --> | |
| <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"> | |
| <span class="btn-icon">🔍</span> | |
| Analyze | |
| </button> | |
| </div> | |
| <!-- Results Panel --> | |
| <div class="panel results-panel"> | |
| <h3>Analysis</h3> | |
| <!-- Binary Score --> | |
| <div id="binary-result" class="binary-placeholder"> | |
| <div class="placeholder-icon">📝</div> | |
| <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"> | |
| <span>👍</span> | |
| Yes | |
| </button> | |
| <button id="thumbs-down" class="btn btn-secondary"> | |
| <span>👎</span> | |
| 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"> | |
| ⚠️ 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"> | |
| <span class="chat-icon">🔵</span> | |
| <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"> | |
| <span class="chat-icon">🟠</span> | |
| <h4>OpenAI Moderation</h4> | |
| </div> | |
| <div id="chat-openai" class="chat-messages"></div> | |
| </div> | |
| <!-- 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> | |
| </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>🤗 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>📊 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>📝 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>📄 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> | |
| </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> | |
| </body> | |
| </html> | |