update-demo

.gitattributes

@@ -33,4 +33,3 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
-app/frontend/logo.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -32,4 +32,4 @@ EXPOSE 7860
 # Run the FastAPI app from the backend directory so local imports resolve
 WORKDIR $HOME/app/app/backend
 
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,11 +1,13 @@
 ---
-title: LionGuard
+title: Lionguard 2 Demo
 emoji: 🦁
 colorFrom: red
 colorTo: yellow
-sdk: docker
-app_port: 7860
+sdk: gradio
+sdk_version: 5.34.2
+app_file: app.py
 pinned: false
+header: mini
 short_description: Localised Multilingual Moderation Classifier for Singapore
 ---
 

app.py

@@ -0,0 +1,450 @@
+"""
+app.py
+"""
+
+# Standard imports
+import json
+import os
+import sys
+import uuid
+import asyncio
+from datetime import datetime
+
+# Third party imports
+import openai
+import gradio as gr
+import gspread
+from google.oauth2 import service_account
+from transformers import AutoModel
+
+# Local imports
+from utils import get_embeddings
+
+# --- Categories
+CATEGORIES = {
+    "binary": ["binary"],
+    "hateful": ["hateful_l1", "hateful_l2"],
+    "insults": ["insults"],
+    "sexual": [
+        "sexual_l1",
+        "sexual_l2",
+    ],
+    "physical_violence": ["physical_violence"],
+    "self_harm": ["self_harm_l1", "self_harm_l2"],
+    "all_other_misconduct": [
+        "all_other_misconduct_l1",
+        "all_other_misconduct_l2",
+    ],
+}
+
+# --- OpenAI Setup ---
+# Create both sync and async clients
+client = openai.OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+async_client = openai.AsyncOpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+
+# --- Model Loading ---
+def load_lionguard2():
+    model = AutoModel.from_pretrained("govtech/lionguard-2", trust_remote_code=True)
+    return model
+
+model = load_lionguard2()
+
+# --- Google Sheets Config ---
+GOOGLE_SHEET_URL = os.environ.get("GOOGLE_SHEET_URL")
+GOOGLE_CREDENTIALS = os.environ.get("GCP_SERVICE_ACCOUNT")
+RESULTS_SHEET_NAME = "results"
+VOTES_SHEET_NAME = "votes"
+CHATBOT_SHEET_NAME = "chatbot"
+
+def get_gspread_client():
+    credentials = service_account.Credentials.from_service_account_info(
+        json.loads(GOOGLE_CREDENTIALS),
+        scopes=[
+            "https://www.googleapis.com/auth/spreadsheets",
+            "https://www.googleapis.com/auth/drive",
+        ],
+    )
+    return gspread.authorize(credentials)
+
+def save_results_data(row):
+    try:
+        gc = get_gspread_client()
+        sheet = gc.open_by_url(GOOGLE_SHEET_URL)
+        ws = sheet.worksheet(RESULTS_SHEET_NAME)
+        ws.append_row(list(row.values()))
+    except Exception as e:
+        print(f"Error saving results data: {e}")
+
+def save_vote_data(text_id, agree):
+    try:
+        gc = get_gspread_client()
+        sheet = gc.open_by_url(GOOGLE_SHEET_URL)
+        ws = sheet.worksheet(VOTES_SHEET_NAME)
+        vote_row = {
+            "datetime": datetime.now().isoformat(),
+            "text_id": text_id,
+            "agree": agree
+        }
+        ws.append_row(list(vote_row.values()))
+    except Exception as e:
+        print(f"Error saving vote data: {e}")
+
+def log_chatbot_data(row):
+    try:
+        gc = get_gspread_client()
+        sheet = gc.open_by_url(GOOGLE_SHEET_URL)
+        ws = sheet.worksheet(CHATBOT_SHEET_NAME)
+        ws.append_row([
+            row["datetime"], row["text_id"], row["text"], row["binary_score"],
+            row["hateful_l1_score"], row["hateful_l2_score"], row["insults_score"],
+            row["sexual_l1_score"], row["sexual_l2_score"], row["physical_violence_score"],
+            row["self_harm_l1_score"], row["self_harm_l2_score"], row["aom_l1_score"],
+            row["aom_l2_score"], row["openai_score"]
+        ])
+    except Exception as e:
+        print(f"Error saving chatbot data: {e}")
+
+# --- Classifier logic ---
+
+def format_score_with_style(score_str):
+    if score_str == "-":
+        return '<span style="color: #9ca3af;">-</span>'
+    try:
+        score = float(score_str)
+        percentage = int(score * 100)
+        if score < 0.4:
+            return f'<span style="color: #34d399; font-weight:600;">👌 {percentage}%</span>'
+        elif 0.4 <= score < 0.7:
+            return f'<span style="color: #fbbf24; font-weight:600;">⚠️ {percentage}%</span>'
+        else:
+            return f'<span style="color: #fca5a5; font-weight:600;">🚨 {percentage}%</span>'
+    except:
+        return score_str
+
+def format_binary_score(score):
+    percentage = int(score * 100)
+    if score < 0.4:
+        return f'<div style="background:linear-gradient(135deg, #065f46 0%, #047857 100%); color:#34d399; padding:24px 0; border-radius:20px; text-align:center; font-weight:900; border:3px solid #10b981; font-size:24px; margin:24px 0; box-shadow:0 4px 24px rgba(0,0,0,0.3);">✅ Pass ({percentage}/100)</div>'
+    elif 0.4 <= score < 0.7:
+        return f'<div style="background:linear-gradient(135deg, #92400e 0%, #b45309 100%); color:#fbbf24; padding:24px 0; border-radius:20px; text-align:center; font-weight:900; border:3px solid #f59e0b; font-size:24px; margin:24px 0; box-shadow:0 4px 24px rgba(0,0,0,0.3);">⚠️ Warning ({percentage}/100)</div>'
+    else:
+        return f'<div style="background:linear-gradient(135deg, #991b1b 0%, #b91c1c 100%); color:#fca5a5; padding:24px 0; border-radius:20px; text-align:center; font-weight:900; border:3px solid #ef4444; font-size:24px; margin:24px 0; box-shadow:0 4px 24px rgba(0,0,0,0.3);">🚨 Fail ({percentage}/100)</div>'
+
+def analyze_text(text):
+    if not text.strip():
+        empty_html = '<div style="text-align: center; color: #9ca3af; padding: 30px; font-style: italic;">Enter text to analyze</div>'
+        return empty_html, empty_html, "", ""
+    try:
+        text_id = str(uuid.uuid4())
+        embeddings = get_embeddings([text])
+        results = model.predict(embeddings)
+        binary_score = results.get('binary', [0.0])[0]
+
+        main_categories = ['hateful', 'insults', 'sexual', 'physical_violence', 'self_harm', 'all_other_misconduct']
+        categories_html = []
+        max_scores = {}
+        for category in main_categories:
+            subcategories = CATEGORIES[category]
+            category_name = category.replace('_', ' ').title()
+            category_emojis = {
+                'Hateful': '🤬',
+                'Insults': '💢',
+                'Sexual': '🔞',
+                'Physical Violence': '⚔️',
+                'Self Harm': '☹️',
+                'All Other Misconduct': '🙅‍♀️'
+            }
+            category_display = f"{category_emojis.get(category_name, '📝')} {category_name}"
+            level_scores = [results.get(subcategory_key, [0.0])[0] for subcategory_key in subcategories]
+            max_score = max(level_scores) if level_scores else 0.0
+            max_scores[category] = max_score
+            categories_html.append(f'''
+            <tr>
+                <td>{category_display}</td>
+                <td style="text-align: center;">{format_score_with_style(f"{max_score:.4f}")}</td>
+            </tr>
+            ''')
+
+        html_table = f'''
+        <table style="width:100%">
+        <thead>
+        <tr><th>Category</th><th>Score</th></tr>
+        </thead>
+        <tbody>
+        {''.join(categories_html)}
+        </tbody>
+        </table>
+        '''
+
+        # Save to Google Sheets if enabled
+        if GOOGLE_SHEET_URL and GOOGLE_CREDENTIALS:
+            results_row = {
+                "datetime": datetime.now().isoformat(),
+                "text_id": text_id,
+                "text": text,
+                "binary_score": binary_score,
+            }
+            for category in main_categories:
+                results_row[f"{category}_max"] = max_scores[category]
+            save_results_data(results_row)
+
+        voting_html = '<div>Help improve LionGuard2! Rate the analysis below.</div>'
+        return format_binary_score(binary_score), html_table, text_id, voting_html
+
+    except Exception as e:
+        error_msg = f"Error analyzing text: {str(e)}"
+        return f'<div style="color: #fca5a5;">❌ {error_msg}</div>', '', '', ''
+
+def vote_thumbs_up(text_id):
+    if text_id and GOOGLE_SHEET_URL and GOOGLE_CREDENTIALS:
+        save_vote_data(text_id, True)
+        return '<div style="color: #34d399; font-weight:700;">🎉 Thank you!</div>'
+    return '<div>Voting not available or analysis not yet run.</div>'
+
+def vote_thumbs_down(text_id):
+    if text_id and GOOGLE_SHEET_URL and GOOGLE_CREDENTIALS:
+        save_vote_data(text_id, False)
+        return '<div style="color: #fca5a5; font-weight:700;">📝 Thanks for the feedback!</div>'
+    return '<div>Voting not available or analysis not yet run.</div>'
+
+# --- Guardrail Comparison logic (ASYNC VERSION) ---
+
+async def get_openai_response_async(message, system_prompt="You are a helpful assistant."):
+    """Async version of OpenAI API call"""
+    try:
+        response = await async_client.chat.completions.create(
+            model="gpt-4.1-nano",
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": message}
+            ],
+            max_tokens=500,
+            temperature=0,
+            seed=42,
+        )
+        return response.choices[0].message.content
+    except Exception as e:
+        return f"Error: {str(e)}. Please check your OpenAI API key."
+
+async def openai_moderation_async(message):
+    """Async version of OpenAI moderation"""
+    try:
+        response = await async_client.moderations.create(input=message)
+        return response.results[0].flagged
+    except Exception as e:
+        print(f"Error in OpenAI moderation: {e}")
+        return False
+
+def lionguard_2_sync(message, threshold=0.5):
+    """LionGuard remains sync as it's using a local model"""
+    try:
+        embeddings = get_embeddings([message])
+        results = model.predict(embeddings)
+        binary_prob = results['binary'][0]
+        return binary_prob > threshold, binary_prob
+    except Exception as e:
+        print(f"Error in LionGuard 2: {e}")
+        return False, 0.0
+
+async def process_no_moderation(message, history_no_mod):
+    """Process message without moderation"""
+    no_mod_response = await get_openai_response_async(message)
+    history_no_mod.append({"role": "user", "content": message})
+    history_no_mod.append({"role": "assistant", "content": no_mod_response})
+    return history_no_mod
+
+async def process_openai_moderation(message, history_openai):
+    """Process message with OpenAI moderation"""
+    openai_flagged = await openai_moderation_async(message)
+    history_openai.append({"role": "user", "content": message})
+    if openai_flagged:
+        openai_response = "🚫 This message has been flagged by OpenAI moderation"
+        history_openai.append({"role": "assistant", "content": openai_response})
+    else:
+        openai_response = await get_openai_response_async(message)
+        history_openai.append({"role": "assistant", "content": openai_response})
+    return history_openai
+
+async def process_lionguard(message, history_lg):
+    """Process message with LionGuard 2"""
+    # Run LionGuard sync check in thread pool to not block
+    loop = asyncio.get_event_loop()
+    lg_flagged, lg_score = await loop.run_in_executor(None, lionguard_2_sync, message, 0.5)
+    
+    history_lg.append({"role": "user", "content": message})
+    if lg_flagged:
+        lg_response = "🚫 This message has been flagged by LionGuard 2"
+        history_lg.append({"role": "assistant", "content": lg_response})
+    else:
+        lg_response = await get_openai_response_async(message)
+        history_lg.append({"role": "assistant", "content": lg_response})
+    return history_lg, lg_score
+
+async def process_message_async(message, history_no_mod, history_openai, history_lg):
+    """Process message concurrently across all three guardrails"""
+    if not message.strip():
+        return history_no_mod, history_openai, history_lg, ""
+    
+    # Run all three processes concurrently using asyncio.gather
+    results = await asyncio.gather(
+        process_no_moderation(message, history_no_mod),
+        process_openai_moderation(message, history_openai),
+        process_lionguard(message, history_lg),
+        return_exceptions=True  # Continue even if one fails
+    )
+    
+    # Unpack results
+    history_no_mod = results[0] if not isinstance(results[0], Exception) else history_no_mod
+    history_openai = results[1] if not isinstance(results[1], Exception) else history_openai
+    history_lg_result = results[2] if not isinstance(results[2], Exception) else (history_lg, 0.0)
+    history_lg = history_lg_result[0]
+    lg_score = history_lg_result[1] if isinstance(history_lg_result, tuple) else 0.0
+
+    # --- Logging for chatbot worksheet (runs in background) ---
+    if GOOGLE_SHEET_URL and GOOGLE_CREDENTIALS:
+        try:
+            loop = asyncio.get_event_loop()
+            # Run logging in thread pool so it doesn't block
+            loop.run_in_executor(None, _log_chatbot_sync, message, lg_score)
+        except Exception as e:
+            print(f"Chatbot logging failed: {e}")
+
+    return history_no_mod, history_openai, history_lg, ""
+
+def _log_chatbot_sync(message, lg_score):
+    """Sync helper for logging - runs in thread pool"""
+    try:
+        embeddings = get_embeddings([message])
+        results = model.predict(embeddings)
+        now = datetime.now().isoformat()
+        text_id = str(uuid.uuid4())
+        row = {
+            "datetime": now,
+            "text_id": text_id,
+            "text": message,
+            "binary_score": results.get("binary", [None])[0],
+            "hateful_l1_score": results.get(CATEGORIES['hateful'][0], [None])[0],
+            "hateful_l2_score": results.get(CATEGORIES['hateful'][1], [None])[0],
+            "insults_score": results.get(CATEGORIES['insults'][0], [None])[0],
+            "sexual_l1_score": results.get(CATEGORIES['sexual'][0], [None])[0],
+            "sexual_l2_score": results.get(CATEGORIES['sexual'][1], [None])[0],
+            "physical_violence_score": results.get(CATEGORIES['physical_violence'][0], [None])[0],
+            "self_harm_l1_score": results.get(CATEGORIES['self_harm'][0], [None])[0],
+            "self_harm_l2_score": results.get(CATEGORIES['self_harm'][1], [None])[0],
+            "aom_l1_score": results.get(CATEGORIES['all_other_misconduct'][0], [None])[0],
+            "aom_l2_score": results.get(CATEGORIES['all_other_misconduct'][1], [None])[0],
+            "openai_score": None
+        }
+        try:
+            openai_result = client.moderations.create(input=message)
+            row["openai_score"] = float(openai_result.results[0].category_scores.get("hate", 0.0))
+        except Exception:
+            row["openai_score"] = None
+
+        log_chatbot_data(row)
+    except Exception as e:
+        print(f"Error in sync logging: {e}")
+
+def process_message(message, history_no_mod, history_openai, history_lg):
+    """Wrapper function for Gradio (converts async to sync)"""
+    return asyncio.run(process_message_async(message, history_no_mod, history_openai, history_lg))
+
+def clear_all_chats():
+    return [], [], []
+
+# ---- MAIN GRADIO UI ----
+
+DISCLAIMER = """
+<div style='background: #fbbf24; color: #1e293b; border-radius: 8px; padding: 14px; margin-bottom: 12px; font-size: 15px; font-weight:500;'>
+⚠️ LionGuard 2 may make mistakes. All entries are logged (anonymised) to improve the model.
+</div>
+"""
+
+with gr.Blocks(title="LionGuard 2 Demo", theme=gr.themes.Soft()) as demo:
+    gr.HTML("<h1 style='text-align:center'>LionGuard 2 Demo</h1>")
+
+    with gr.Tabs():
+        with gr.Tab("Classifier"):
+            gr.HTML(DISCLAIMER)
+            with gr.Row():
+                with gr.Column(scale=1, min_width=400):
+                    text_input = gr.Textbox(
+                        label="Enter text to analyze:",
+                        placeholder="Type your text here...",
+                        lines=8,
+                        max_lines=16,
+                        container=True
+                    )
+                    analyze_btn = gr.Button("Analyze", variant="primary")
+                with gr.Column(scale=1, min_width=400):
+                    binary_output = gr.HTML(
+                        value='<div style="text-align: center; color: #9ca3af; padding: 30px; font-style: italic; font-size:36px;">Enter text to analyze</div>'
+                    )
+                    category_table = gr.HTML(
+                        value='<div style="text-align: center; color: #9ca3af; padding: 30px; font-style: italic;">Category scores will appear here after analysis</div>'
+                    )
+                    voting_feedback = gr.HTML(value="")
+                    current_text_id = gr.Textbox(value="", visible=False)
+
+                    with gr.Row(visible=False) as voting_buttons_row:
+                        thumbs_up_btn = gr.Button("👍 Looks Accurate", variant="primary")
+                        thumbs_down_btn = gr.Button("👎 Looks Wrong", variant="secondary")
+
+            def analyze_and_show_voting(text):
+                binary_score, category_table_val, text_id, voting_html = analyze_text(text)
+                show_vote = gr.update(visible=True) if text_id else gr.update(visible=False)
+                return binary_score, category_table_val, text_id, show_vote, "", ""
+
+            analyze_btn.click(
+                analyze_and_show_voting,
+                inputs=[text_input],
+                outputs=[binary_output, category_table, current_text_id, voting_buttons_row, voting_feedback, voting_feedback]
+            )
+            text_input.submit(
+                analyze_and_show_voting,
+                inputs=[text_input],
+                outputs=[binary_output, category_table, current_text_id, voting_buttons_row, voting_feedback, voting_feedback]
+            )
+            thumbs_up_btn.click(vote_thumbs_up, inputs=[current_text_id], outputs=[voting_feedback])
+            thumbs_down_btn.click(vote_thumbs_down, inputs=[current_text_id], outputs=[voting_feedback])
+
+        with gr.Tab("Guardrail Comparison"):
+            gr.HTML(DISCLAIMER)
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.Markdown("#### 🔵 No Moderation")
+                    chatbot_no_mod = gr.Chatbot(height=650, label="No Moderation", show_label=False, bubble_full_width=False, type='messages')
+                with gr.Column(scale=1):
+                    gr.Markdown("#### 🟠 OpenAI Moderation")
+                    chatbot_openai = gr.Chatbot(height=650, label="OpenAI Moderation", show_label=False, bubble_full_width=False, type='messages')
+                with gr.Column(scale=1):
+                    gr.Markdown("#### 🛡️ LionGuard 2")
+                    chatbot_lg = gr.Chatbot(height=650, label="LionGuard 2", show_label=False, bubble_full_width=False, type='messages')
+            gr.Markdown("##### 💬 Send Message to All Models")
+            with gr.Row():
+                message_input = gr.Textbox(
+                    placeholder="Type your message to compare responses...",
+                    show_label=False,
+                    scale=4
+                )
+                send_btn = gr.Button("Send", variant="primary", scale=1)
+            with gr.Row():
+                clear_btn = gr.Button("Clear All Chats", variant="stop")
+
+            send_btn.click(
+                process_message,
+                inputs=[message_input, chatbot_no_mod, chatbot_openai, chatbot_lg],
+                outputs=[chatbot_no_mod, chatbot_openai, chatbot_lg, message_input]
+            )
+            message_input.submit(
+                process_message,
+                inputs=[message_input, chatbot_no_mod, chatbot_openai, chatbot_lg],
+                outputs=[chatbot_no_mod, chatbot_openai, chatbot_lg, message_input]
+            )
+            clear_btn.click(
+                clear_all_chats,
+                outputs=[chatbot_no_mod, chatbot_openai, chatbot_lg]
+            )
+
+if __name__ == "__main__":
+    demo.launch()

app/frontend/index.html

@@ -3,22 +3,7 @@
 <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" />
-
+    <title>Lionguard</title>
     <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
@@ -27,46 +12,42 @@
         <div class="container">
             <div class="header-content">
                 <div class="logo-section">
-                    <img src="/static/logo.png" alt="LionGuard Logo" class="logo">
+                    <img src="/static/logo.png" alt="Lionguard Logo" class="logo">
                     <div class="logo-text">
-                        <h1>LionGuard</h1>
+                        <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>
+                                <span class="tab-icon">🛠️</span>
                                 Demos
-                                <i class='bx bx-chevron-down dropdown-caret'></i>
+                                <span class="dropdown-caret">▾</span>
                             </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>
+                                    <span class="tab-icon">🔍</span>
                                     Detector
                                 </button>
                                 <button class="tab dropdown-item" data-tab="chat" role="menuitem">
-                                    <i class='bx bx-message-rounded-dots tab-icon'></i>
+                                    <span class="tab-icon">💬</span>
                                     Chatbot Guardrail
                                 </button>
                             </div>
                         </div>
                         <button class="tab nav-link" data-tab="about">
-                            <i class='bx bx-info-circle tab-icon'></i>
+                            <span class="tab-icon">ℹ️</span>
                             About
                         </button>
                     </nav>
                     <button id="theme-toggle" class="theme-icon-button" aria-label="Toggle theme">
-                        <i class='bx bx-sun theme-icon'></i>
+                        <span class="theme-icon" aria-hidden="true">🌞</span>
                     </button>
                 </div>
             </div>
@@ -79,7 +60,7 @@
         <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.
+                ⚠️ Inputs are anonymised and logged to improve Lionguard's moderation models.
             </div>
 
             <!-- Model Selector -->
@@ -89,9 +70,9 @@
                 </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>
+                        <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>
@@ -107,7 +88,7 @@
                         rows="10"
                     ></textarea>
                     <button id="analyze-btn" class="btn btn-primary">
-                        <i class='bx bx-search btn-icon'></i>
+                        <span class="btn-icon">🔍</span>
                         Analyze
                     </button>
                 </div>
@@ -118,7 +99,7 @@
                     
                     <!-- Binary Score -->
                     <div id="binary-result" class="binary-placeholder">
-                        <i class='bx bx-edit placeholder-icon'></i>
+                        <div class="placeholder-icon">📝</div>
                         <p>Enter text to analyze</p>
                     </div>
 
@@ -132,11 +113,11 @@
                         <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>
+                                <span>👍</span>
                                 Yes
                             </button>
                             <button id="thumbs-down" class="btn btn-secondary">
-                                <i class='bx bx-dislike'></i>
+                                <span>👎</span>
                                 No
                             </button>
                         </div>
@@ -150,7 +131,7 @@
         <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.
+                ⚠️ Inputs are anonymised and logged to improve Lionguard's moderation models.
             </div>
 
             <!-- Model Selector for Guardrail -->
@@ -160,9 +141,9 @@
                 </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>
+                        <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>
@@ -172,7 +153,7 @@
                 <!-- No Moderation -->
                 <div class="chat-panel">
                     <div class="chat-header">
-                        <i class='bx bxs-circle chat-icon' style="color: #3B82F6;"></i>
+                        <span class="chat-icon">🔵</span>
                         <h4>No Moderation</h4>
                     </div>
                     <div id="chat-no-mod" class="chat-messages"></div>
@@ -181,17 +162,17 @@
                 <!-- OpenAI Moderation -->
                 <div class="chat-panel">
                     <div class="chat-header">
-                        <i class='bx bxs-circle chat-icon' style="color: #F59E0B;"></i>
+                        <span class="chat-icon">🟠</span>
                         <h4>OpenAI Moderation</h4>
                     </div>
                     <div id="chat-openai" class="chat-messages"></div>
                 </div>
 
-                <!-- LionGuard -->
+                <!-- Lionguard -->
                 <div class="chat-panel">
                     <div class="chat-header">
-                        <i class='bx bx-shield-quarter chat-icon' style="color: #E14746;"></i>
-                        <h4>LionGuard</h4>
+                        <span class="chat-icon">🛡️</span>
+                        <h4>Lionguard</h4>
                     </div>
                     <div id="chat-lionguard" class="chat-messages"></div>
                 </div>
@@ -215,7 +196,7 @@
         <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">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>
 
@@ -223,18 +204,18 @@
             <section class="about-resources-grid">
                 <!-- Models -->
                 <div class="resource-card">
-                    <h3><i class='bx bx-cube-alt'></i> Open-Sourced Models</h3>
+                    <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>
+                        <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>
+                    <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>
@@ -243,158 +224,33 @@
 
                 <!-- Blog Posts -->
                 <div class="resource-card">
-                    <h3><i class='bx bx-news'></i> Blog Posts</h3>
+                    <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>
+                        <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>
+                    <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.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>
+                        <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>
+            <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>

app/frontend/script.js

@@ -29,12 +29,12 @@ function hideLoading(button, originalText) {
 
 function getScoreLevel(score) {
     if (score < 0.4) {
-        return { className: 'good', icon: '<i class="bx bx-check-circle"></i>', title: 'Low risk' };
+        return { className: 'good', icon: '👌', title: 'Low risk' };
     }
     if (score < 0.7) {
-        return { className: 'warn', icon: '<i class="bx bx-error"></i>', title: 'Needs review' };
+        return { className: 'warn', icon: '⚠️', title: 'Needs review' };
     }
-    return { className: 'bad', icon: '<i class="bx bx-error-circle"></i>', title: 'High risk' };
+    return { className: 'bad', icon: '🚨', title: 'High risk' };
 }
 
 function formatScore(score) {
@@ -197,9 +197,9 @@ async function analyzeText() {
         const verdictClass = data.binary_verdict;
         const verdictText = verdictClass.charAt(0).toUpperCase() + verdictClass.slice(1);
         const verdictIcons = {
-            'pass': '<i class="bx bx-check-shield"></i>',
-            'warn': '<i class="bx bx-shield-minus"></i>',
-            'fail': '<i class="bx bx-shield-x"></i>'
+            'pass': '✅',
+            'warn': '⚠️',
+            'fail': '🚨'
         };
         
         binaryResult.innerHTML = `
@@ -403,9 +403,7 @@ function initThemeToggle() {
     const updateIcon = (isDark) => {
         themeToggle.setAttribute('aria-pressed', isDark ? 'true' : 'false');
         if (themeIcon) {
-            // Toggle class for boxicons
-            themeIcon.className = isDark ? 'bx bx-moon theme-icon' : 'bx bx-sun theme-icon';
-            themeIcon.textContent = ''; // clear text content
+            themeIcon.textContent = isDark ? '🌙' : '🌞';
         }
     };
 
@@ -424,68 +422,6 @@ function initThemeToggle() {
     });
 }
 
-// Code snippet tabs for Get Started
-function initCodeTabs() {
-    const tabs = document.querySelectorAll('.code-tab');
-    const blocks = document.querySelectorAll('.code-block');
-
-    if (!tabs.length) return;
-
-    tabs.forEach(tab => {
-        tab.addEventListener('click', () => {
-            // Remove active class from all tabs
-            tabs.forEach(t => t.classList.remove('active'));
-            // Add active class to clicked tab
-            tab.classList.add('active');
-
-            // Hide all blocks
-            blocks.forEach(b => b.classList.remove('active'));
-
-            // Show target block
-            const targetId = `code-${tab.dataset.code}`;
-            const targetBlock = document.getElementById(targetId);
-            if (targetBlock) {
-                targetBlock.classList.add('active');
-            }
-        });
-    });
-}
-
-// Copy Code Functionality
-function initCopyButton() {
-    const copyBtn = document.getElementById('copy-code-btn');
-    if (!copyBtn) return;
-
-    copyBtn.addEventListener('click', async () => {
-        // Find active code block
-        const activeBlock = document.querySelector('.code-block.active code');
-        if (!activeBlock) return;
-
-        const textToCopy = activeBlock.textContent;
-
-        try {
-            await navigator.clipboard.writeText(textToCopy);
-            
-            // Provide feedback
-            const originalHtml = copyBtn.innerHTML;
-            copyBtn.innerHTML = `<i class='bx bx-check'></i> Copied!`;
-            copyBtn.classList.add('success');
-            
-            setTimeout(() => {
-                copyBtn.innerHTML = originalHtml;
-                copyBtn.classList.remove('success');
-            }, 2000);
-        } catch (err) {
-            console.error('Failed to copy:', err);
-            copyBtn.innerHTML = `<i class='bx bx-x'></i> Failed`;
-            
-            setTimeout(() => {
-                copyBtn.innerHTML = `<i class='bx bx-copy'></i> Copy`;
-            }, 2000);
-        }
-    });
-}
-
 // Initialize app
 document.addEventListener('DOMContentLoaded', () => {
     initTabs();
@@ -494,8 +430,6 @@ document.addEventListener('DOMContentLoaded', () => {
     initModelSelectorGC();
     initEventListeners();
     initThemeToggle();
-    initCodeTabs();
-    initCopyButton();
 
     console.log('LionGuard 2 app initialized');
 });

app/frontend/style.css

@@ -1,10 +1,5 @@
 /* LionGuard 2 - Warm, Inviting, and Bright Design */
-
-/* Icons alignment */
-.bx {
-    vertical-align: middle;
-    line-height: 1;
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap');
 
 :root {
     /* Modern color palette inspired by logo */
@@ -110,7 +105,7 @@ main {
     margin-left: auto;
     display: flex;
     align-items: center;
-    gap: 24px; /* Increased gap for better spacing */
+    gap: 16px;
     flex-wrap: wrap;
     justify-content: flex-end;
     background: transparent;
@@ -135,10 +130,8 @@ main {
 
 .logo-text h1 {
     font-family: 'Poppins', sans-serif;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--primary-dark);
-    letter-spacing: -0.02em;
+    font-size: 1.4rem;
+    color: var(--primary-red);
     margin-bottom: 0px;
     line-height: 1.2;
 }
@@ -328,7 +321,7 @@ body.dark-mode .toggle-icon-moon {
     display: inline-flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 24px; /* Increased gap for better spacing */
+    gap: 18px;
     margin-bottom: 0;
     background: transparent;
     border: none;
@@ -380,12 +373,11 @@ body.dark-mode .toggle-icon-moon {
 }
 
 .tab-icon {
-    font-size: 1.25rem;
-    margin-bottom: 1px;
+    font-size: 1.2rem;
 }
 
 .dropdown-toggle {
-    /* padding-right: 22px; removed to fix gap */
+    padding-right: 22px;
 }
 
 .dropdown-caret {
@@ -950,45 +942,39 @@ body.dark-mode .score-chip.bad {
     background: var(--warm-cream);
     border: 1px solid var(--warm-tan);
     border-radius: var(--border-radius);
-    padding: 16px 20px; /* Increased padding */
-    margin-top: 12px;
+    padding: 10px 14px;
+    margin-top: 8px;
     text-align: center;
 }
 
 .feedback-prompt {
     color: var(--text-secondary);
-    margin-bottom: 12px; /* Balanced spacing */
+    margin-bottom: 4px;
     font-weight: 500;
-    font-size: 0.85rem; /* Slightly larger */
+    font-size: 0.78rem;
 }
 
 .feedback-buttons {
     display: flex;
-    gap: 12px; /* More gap between buttons */
-    margin-bottom: 0; /* Remove bottom margin, let padding handle it unless message appears */
+    gap: 8px;
+    margin-bottom: 6px;
     flex-wrap: wrap;
     justify-content: center;
 }
 
+.feedback-buttons .btn {
+    flex: 0 0 auto;
+    padding: 6px 12px;
+    font-size: 0.8rem;
+    justify-content: center;
+}
+
 .feedback-message {
-    /* Removed default padding to avoid ghost space */
+    padding: 8px;
     border-radius: var(--border-radius-sm);
     font-weight: 600;
     text-align: center;
     font-size: 0.85rem;
-    margin-top: 0;
-    transition: all 0.3s ease;
-    opacity: 0;
-    height: 0;
-    overflow: hidden;
-}
-
-.feedback-message.success,
-.feedback-message.info {
-    padding: 10px;
-    margin-top: 12px; /* Add space only when message appears */
-    opacity: 1;
-    height: auto;
 }
 
 .feedback-message.success {
@@ -1054,7 +1040,7 @@ body.dark-mode .score-chip.bad {
 .chat-header h4 {
     font-family: 'Poppins', sans-serif;
     color: var(--primary-dark);
-    font-size: 1.05rem;
+    font-size: 0.95rem;
 }
 
 .chat-messages {
@@ -1301,153 +1287,3 @@ body.dark-mode .score-chip.bad {
         grid-template-columns: 1fr;
     }
 }
-
-/* Get Started Tab Styles */
-.get-started-container {
-    max-width: 1000px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-.option-card.full-width-card {
-    width: 100%;
-    background: var(--soft-white);
-    border: 1px solid var(--warm-tan);
-    border-radius: var(--border-radius);
-    padding: 16px; /* Restored to a slightly larger padding */
-    box-shadow: var(--shadow-soft);
-    display: flex;
-    flex-direction: column;
-    gap: 12px; /* Slightly reduced gap */
-}
-
-.option-header {
-    display: flex;
-    gap: 12px;
-    align-items: flex-start; /* Reverted to align-items: flex-start */
-}
-
-.option-icon {
-    font-size: 1.5rem;
-    color: var(--primary-red);
-    background: var(--warm-cream);
-    padding: 8px;
-    border-radius: 50%;
-}
-
-.option-header h2 {
-    font-family: 'Poppins', sans-serif;
-    font-size: 1.4rem;
-    color: var(--primary-dark);
-    margin-bottom: 4px;
-}
-
-.option-header p {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-}
-
-.code-section {
-    background: #2d2d2d; /* Prism Tomorrow bg match */
-    border-radius: var(--border-radius);
-    overflow: hidden;
-    margin-top: 4px;
-}
-
-.code-tabs-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: #1f1f1f; /* Slightly darker */
-    border-bottom: 1px solid #3d3d3d;
-    padding-right: 10px;
-}
-
-.code-tabs {
-    display: flex;
-    overflow-x: auto;
-}
-
-.code-tab {
-    background: transparent;
-    border: none;
-    color: #94A3B8;
-    padding: 8px 16px;
-    cursor: pointer;
-    font-size: 0.8rem;
-    font-family: 'Inter', sans-serif;
-    font-weight: 500;
-    border-bottom: 2px solid transparent;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-}
-
-.code-tab:hover {
-    color: #E2E8F0;
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.code-tab.active {
-    color: #FFFFFF;
-    border-bottom-color: var(--primary-red);
-    background: rgba(255, 255, 255, 0.08);
-}
-
-.copy-btn {
-    background: transparent;
-    border: 1px solid #475569;
-    color: #cbd5e1;
-    padding: 4px 10px;
-    border-radius: 4px;
-    font-size: 0.75rem;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    transition: all 0.2s ease;
-}
-
-.copy-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: #94a3b8;
-    color: white;
-}
-
-.code-display {
-    padding: 16px;
-    background: #2d2d2d; /* Match Prism theme */
-    overflow-x: auto;
-}
-
-.code-block {
-    display: none;
-}
-
-.code-block.active {
-    display: block;
-    animation: fadeIn 0.3s ease;
-}
-
-/* Override Prism margins */
-.code-block pre[class*="language-"] {
-    margin: 0 !important;
-    padding: 0 !important;
-    background: transparent !important;
-    text-shadow: none !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-}
-
-.code-block code[class*="language-"] {
-    font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important;
-    font-size: 0.85rem !important;
-    line-height: 1.5 !important;
-}
-
-.option-action {
-    display: flex;
-    justify-content: flex-start; /* Align button to the left */
-    margin-top: 0; /* Relies on parent gap */
-}

requirements.txt

@@ -8,4 +8,5 @@ transformers==4.57.1
 google-genai==1.51.0
 sentence-transformers==5.1.2
 fastapi==0.115.0
-uvicorn[standard]==0.32.0
+uvicorn[standard]==0.32.0
+gradio==5.34.2