update

Dockerfile

@@ -0,0 +1,35 @@
+FROM python:3.11-slim
+
+# Install build dependencies for packages such as uvicorn[standard]
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends build-essential git && \
+    rm -rf /var/lib/apt/lists/*
+
+# Create the non-root user expected by Hugging Face Spaces
+RUN useradd -m -u 1000 user
+
+USER user
+
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PORT=7860
+
+WORKDIR $HOME/app
+
+# Install Python dependencies first to leverage Docker layer caching
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code
+COPY --chown=user . .
+
+# Expose the port expected by Hugging Face Spaces
+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"]

app/backend/__init__.py

@@ -0,0 +1,6 @@
+"""
+LionGuard 2 Backend Package
+"""
+
+
+

app/backend/main.py

@@ -0,0 +1,135 @@
+"""
+FastAPI backend for LionGuard moderation
+"""
+
+from fastapi import FastAPI, HTTPException
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from fastapi.middleware.cors import CORSMiddleware
+import os
+from typing import List
+
+from models import (
+    ModerateRequest,
+    ModerateResponse,
+    FeedbackRequest,
+    FeedbackResponse,
+    ChatRequest,
+    ChatResponse,
+    CategoryScore,
+    ChatHistories,
+)
+from services import (
+    analyze_text,
+    submit_feedback,
+    process_chat_message,
+)
+
+app = FastAPI(
+    title="LionGuard API",
+    description="Multilingual moderation and guardrail comparison",
+    version="2.0.0"
+)
+
+# Enable CORS for development
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Get the path to frontend directory
+FRONTEND_DIR = os.path.join(os.path.dirname(__file__), "../frontend")
+
+
+@app.post("/moderate", response_model=ModerateResponse)
+async def moderate_text(request: ModerateRequest):
+    """
+    Analyze text for moderation risks using LionGuard models
+    """
+    try:
+        result = analyze_text(request.text, request.model)
+        return ModerateResponse(**result)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error analyzing text: {str(e)}")
+
+
+@app.post("/send_feedback", response_model=FeedbackResponse)
+async def send_feedback(request: FeedbackRequest):
+    """
+    Submit user feedback on moderation result
+    """
+    try:
+        result = submit_feedback(request.text_id, request.agree)
+        return FeedbackResponse(**result)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error submitting feedback: {str(e)}")
+
+
+@app.post("/chat", response_model=ChatResponse)
+async def chat_comparison(request: ChatRequest):
+    """
+    Compare guardrails across three approaches:
+    - No moderation
+    - OpenAI moderation
+    - LionGuard moderation
+    """
+    try:
+        # Convert request histories to list of dicts
+        history_no_mod = [msg.dict() for msg in request.histories.no_moderation]
+        history_openai = [msg.dict() for msg in request.histories.openai_moderation]
+        history_lg = [msg.dict() for msg in request.histories.lionguard]
+        
+        # Process message
+        updated_no_mod, updated_openai, updated_lg, lg_score = await process_chat_message(
+            request.message,
+            request.model,
+            history_no_mod,
+            history_openai,
+            history_lg
+        )
+        
+        # Convert back to response format
+        return ChatResponse(
+            histories=ChatHistories(
+                no_moderation=updated_no_mod,
+                openai_moderation=updated_openai,
+                lionguard=updated_lg
+            ),
+            lionguard_score=lg_score
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error processing chat: {str(e)}")
+
+
+# Serve static frontend files
+app.mount("/static", StaticFiles(directory=FRONTEND_DIR), name="static")
+
+
+@app.get("/")
+async def serve_frontend():
+    """
+    Serve the main HTML page
+    """
+    index_path = os.path.join(FRONTEND_DIR, "index.html")
+    if os.path.exists(index_path):
+        return FileResponse(index_path)
+    raise HTTPException(status_code=404, detail="Frontend not found")
+
+
+@app.get("/health")
+async def health_check():
+    """
+    Health check endpoint
+    """
+    return {"status": "healthy", "service": "lionguard-api"}
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)
+
+
+

app/backend/models.py

@@ -0,0 +1,67 @@
+"""
+Pydantic models for request/response validation
+"""
+
+from typing import Dict, List, Optional
+from pydantic import BaseModel, Field
+
+
+class ModerateRequest(BaseModel):
+    text: str = Field(..., description="Text to moderate")
+    model: str = Field(
+        default="lionguard-2.1",
+        description="Model to use: lionguard-2, lionguard-2.1, or lionguard-2-lite"
+    )
+
+
+class CategoryScore(BaseModel):
+    name: str
+    emoji: str
+    max_score: float
+
+
+class ModerateResponse(BaseModel):
+    binary_score: float
+    binary_verdict: str  # "pass", "warn", "fail"
+    binary_percentage: int
+    categories: List[CategoryScore]
+    text_id: str
+    model_used: str
+
+
+class FeedbackRequest(BaseModel):
+    text_id: str = Field(..., description="ID of the text being voted on")
+    agree: bool = Field(..., description="True for thumbs up, False for thumbs down")
+
+
+class FeedbackResponse(BaseModel):
+    success: bool
+    message: str
+
+
+class ChatMessage(BaseModel):
+    role: str
+    content: str
+
+
+class ChatHistories(BaseModel):
+    no_moderation: List[ChatMessage] = Field(default_factory=list)
+    openai_moderation: List[ChatMessage] = Field(default_factory=list)
+    lionguard: List[ChatMessage] = Field(default_factory=list)
+
+
+class ChatRequest(BaseModel):
+    message: str = Field(..., description="Message to send to all guardrails")
+    model: str = Field(
+        default="lionguard-2.1",
+        description="LionGuard model variant to use"
+    )
+    histories: ChatHistories = Field(default_factory=ChatHistories)
+
+
+class ChatResponse(BaseModel):
+    histories: ChatHistories
+    lionguard_score: Optional[float] = None
+
+
+

app.py → app/backend/services.py

@@ -1,54 +1,38 @@
 """
-app.py
+Business logic for moderation and guardrail services
 """
 
-# Standard imports
 import json
 import os
-import sys
 import uuid
 import asyncio
 from datetime import datetime
+from typing import Dict, List, Tuple, Optional
 
-# 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
+# Import from parent directory
+import sys
+sys.path.append(os.path.join(os.path.dirname(__file__), '../..'))
+from utils import MODEL_CONFIGS, predict_with_model
 
-# --- Categories
+# --- Categories ---
 CATEGORIES = {
     "binary": ["binary"],
     "hateful": ["hateful_l1", "hateful_l2"],
     "insults": ["insults"],
-    "sexual": [
-        "sexual_l1",
-        "sexual_l2",
-    ],
+    "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",
-    ],
+    "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")
@@ -56,7 +40,9 @@ RESULTS_SHEET_NAME = "results"
 VOTES_SHEET_NAME = "votes"
 CHATBOT_SHEET_NAME = "chatbot"
 
+
 def get_gspread_client():
+    """Get authenticated Google Sheets client"""
     credentials = service_account.Credentials.from_service_account_info(
         json.loads(GOOGLE_CREDENTIALS),
         scopes=[
@@ -66,7 +52,9 @@ def get_gspread_client():
     )
     return gspread.authorize(credentials)
 
-def save_results_data(row):
+
+def save_results_data(row: Dict):
+    """Save moderation results to Google Sheets"""
     try:
         gc = get_gspread_client()
         sheet = gc.open_by_url(GOOGLE_SHEET_URL)
@@ -75,7 +63,9 @@ def save_results_data(row):
     except Exception as e:
         print(f"Error saving results data: {e}")
 
-def save_vote_data(text_id, agree):
+
+def save_vote_data(text_id: str, agree: bool):
+    """Save user feedback vote to Google Sheets"""
     try:
         gc = get_gspread_client()
         sheet = gc.open_by_url(GOOGLE_SHEET_URL)
@@ -89,7 +79,9 @@ def save_vote_data(text_id, agree):
     except Exception as e:
         print(f"Error saving vote data: {e}")
 
-def log_chatbot_data(row):
+
+def log_chatbot_data(row: Dict):
+    """Log chatbot interaction to Google Sheets"""
     try:
         gc = get_gspread_client()
         sheet = gc.open_by_url(GOOGLE_SHEET_URL)
@@ -104,78 +96,64 @@ def log_chatbot_data(row):
     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>'
+# --- Moderation Logic ---
 
-def analyze_text(text):
+def analyze_text(text: str, model_key: str = None) -> Dict:
+    """
+    Analyze text for moderation risks
+    Returns dict with binary score, categories, text_id, and model info
+    """
     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, "", ""
+        return {
+            "binary_score": 0.0,
+            "binary_verdict": "pass",
+            "binary_percentage": 0,
+            "categories": [],
+            "text_id": "",
+            "model_used": model_key or "lionguard-2.1"
+        }
+    
     try:
         text_id = str(uuid.uuid4())
-        embeddings = get_embeddings([text])
-        results = model.predict(embeddings)
+        results, selected_model_key = predict_with_model([text], model_key)
         binary_score = results.get('binary', [0.0])[0]
-
+        
+        # Determine verdict
+        if binary_score < 0.4:
+            verdict = "pass"
+        elif 0.4 <= binary_score < 0.7:
+            verdict = "warn"
+        else:
+            verdict = "fail"
+        
+        # Process categories
         main_categories = ['hateful', 'insults', 'sexual', 'physical_violence', 'self_harm', 'all_other_misconduct']
-        categories_html = []
+        category_emojis = {
+            'hateful': '🤬',
+            'insults': '💢',
+            'sexual': '🔞',
+            'physical_violence': '⚔️',
+            'self_harm': '☹️',
+            'all_other_misconduct': '🙅‍♀️'
+        }
+        
+        categories_list = []
         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>
-        '''
-
+            
+            category_name = category.replace('_', ' ').title()
+            categories_list.append({
+                "name": category_name,
+                "emoji": category_emojis.get(category, '📝'),
+                "max_score": max_score
+            })
+        
         # Save to Google Sheets if enabled
         if GOOGLE_SHEET_URL and GOOGLE_CREDENTIALS:
             results_row = {
@@ -183,34 +161,43 @@ def analyze_text(text):
                 "text_id": text_id,
                 "text": text,
                 "binary_score": binary_score,
+                "model": selected_model_key,
             }
             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
-
+        
+        return {
+            "binary_score": binary_score,
+            "binary_verdict": verdict,
+            "binary_percentage": int(binary_score * 100),
+            "categories": categories_list,
+            "text_id": text_id,
+            "model_used": selected_model_key
+        }
+    
     except Exception as e:
-        error_msg = f"Error analyzing text: {str(e)}"
-        return f'<div style="color: #fca5a5;">❌ {error_msg}</div>', '', '', ''
+        print(f"Error analyzing text: {e}")
+        raise
 
-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>'
+def submit_feedback(text_id: str, agree: bool) -> Dict:
+    """Submit user feedback"""
+    if not text_id:
+        return {"success": False, "message": "No text ID provided"}
+    
+    if GOOGLE_SHEET_URL and GOOGLE_CREDENTIALS:
+        save_vote_data(text_id, agree)
+        message = "🎉 Thank you!" if agree else "📝 Thanks for the feedback!"
+        return {"success": True, "message": message}
+    
+    return {"success": False, "message": "Voting not available"}
 
-# --- 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"""
+# --- Guardrail Comparison Logic (Async) ---
+
+async def get_openai_response_async(message: str, system_prompt: str = "You are a helpful assistant.") -> str:
+    """Get OpenAI chat response asynchronously"""
     try:
         response = await async_client.chat.completions.create(
             model="gpt-4.1-nano",
@@ -226,8 +213,9 @@ async def get_openai_response_async(message, system_prompt="You are a helpful as
     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"""
+
+async def openai_moderation_async(message: str) -> bool:
+    """Check if message is flagged by OpenAI moderation"""
     try:
         response = await async_client.moderations.create(input=message)
         return response.results[0].flagged
@@ -235,87 +223,58 @@ async def openai_moderation_async(message):
         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"""
+
+def lionguard_2_sync(message: str, model_key: str, threshold: float = 0.5) -> Tuple[bool, float]:
+    """Check if message is flagged by Lionguard"""
     try:
-        embeddings = get_embeddings([message])
-        results = model.predict(embeddings)
-        binary_prob = results['binary'][0]
+        results, _ = predict_with_model([message], model_key)
+        binary_prob = results.get('binary', [0.0])[0]
         return binary_prob > threshold, binary_prob
     except Exception as e:
-        print(f"Error in LionGuard 2: {e}")
+        print(f"Error in LionGuard inference for {model_key}: {e}")
         return False, 0.0
 
-async def process_no_moderation(message, history_no_mod):
+
+async def process_no_moderation(message: str, history: List[Dict]) -> List[Dict]:
     """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
+    history.append({"role": "user", "content": message})
+    history.append({"role": "assistant", "content": no_mod_response})
+    return history
+
 
-async def process_openai_moderation(message, history_openai):
+async def process_openai_moderation(message: str, history: List[Dict]) -> List[Dict]:
     """Process message with OpenAI moderation"""
     openai_flagged = await openai_moderation_async(message)
-    history_openai.append({"role": "user", "content": message})
+    history.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})
+        history.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
+        history.append({"role": "assistant", "content": openai_response})
+    return history
 
-async def process_lionguard(message, history_lg):
-    """Process message with LionGuard 2"""
-    # Run LionGuard sync check in thread pool to not block
+
+async def process_lionguard(message: str, history: List[Dict], model_key: str) -> Tuple[List[Dict], float]:
+    """Process message with Lionguard model"""
     loop = asyncio.get_event_loop()
-    lg_flagged, lg_score = await loop.run_in_executor(None, lionguard_2_sync, message, 0.5)
+    lg_flagged, lg_score = await loop.run_in_executor(None, lionguard_2_sync, message, model_key, 0.5)
     
-    history_lg.append({"role": "user", "content": message})
+    history.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})
+        lg_response = f"🚫 This message has been flagged by {MODEL_CONFIGS[model_key]['label']}"
+        history.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}")
+        history.append({"role": "assistant", "content": lg_response})
+    return history, lg_score
 
-    return history_no_mod, history_openai, history_lg, ""
 
-def _log_chatbot_sync(message, lg_score):
-    """Sync helper for logging - runs in thread pool"""
+def _log_chatbot_sync(message: str, lg_score: float, model_key: str):
+    """Sync helper for logging chatbot data"""
     try:
-        embeddings = get_embeddings([message])
-        results = model.predict(embeddings)
+        results, selected_model_key = predict_with_model([message], model_key)
         now = datetime.now().isoformat()
         text_id = str(uuid.uuid4())
         row = {
@@ -333,118 +292,55 @@ def _log_chatbot_sync(message, lg_score):
             "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
+            "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>
-"""
+async def process_chat_message(
+    message: str,
+    model_key: str,
+    history_no_mod: List[Dict],
+    history_openai: List[Dict],
+    history_lg: List[Dict]
+) -> Tuple[List[Dict], List[Dict], List[Dict], Optional[float]]:
+    """
+    Process message concurrently across all three guardrails
+    Returns updated histories and LionGuard score
+    """
+    if not message.strip():
+        return history_no_mod, history_openai, history_lg, None
+    
+    # Run all three processes concurrently
+    results = await asyncio.gather(
+        process_no_moderation(message, history_no_mod),
+        process_openai_moderation(message, history_openai),
+        process_lionguard(message, history_lg, model_key),
+        return_exceptions=True
+    )
+    
+    # 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
+    
+    # Log to Google Sheets in background
+    if GOOGLE_SHEET_URL and GOOGLE_CREDENTIALS:
+        try:
+            loop = asyncio.get_event_loop()
+            loop.run_in_executor(None, _log_chatbot_sync, message, lg_score, model_key)
+        except Exception as e:
+            print(f"Chatbot logging failed: {e}")
+    
+    return history_no_mod, history_openai, history_lg, lg_score
 
-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

@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<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>

app/frontend/script.js

@@ -0,0 +1,435 @@
+// LionGuard 2 Frontend JavaScript
+
+// State management
+const state = {
+    selectedModel: 'lionguard-2.1',
+    selectedModelGC: 'lionguard-2.1',
+    currentTextId: '',
+    chatHistories: {
+        no_moderation: [],
+        openai_moderation: [],
+        lionguard: []
+    }
+};
+
+// Utility functions
+function showLoading(button) {
+    button.disabled = true;
+    button.classList.add('loading');
+    const originalText = button.textContent;
+    button.textContent = 'Loading...';
+    return originalText;
+}
+
+function hideLoading(button, originalText) {
+    button.disabled = false;
+    button.classList.remove('loading');
+    button.textContent = originalText;
+}
+
+function getScoreLevel(score) {
+    if (score < 0.4) {
+        return { className: 'good', icon: '👌', title: 'Low risk' };
+    }
+    if (score < 0.7) {
+        return { className: 'warn', icon: '⚠️', title: 'Needs review' };
+    }
+    return { className: 'bad', icon: '🚨', title: 'High risk' };
+}
+
+function formatScore(score) {
+    const percentage = Math.round(score * 100);
+    const { className, icon, title } = getScoreLevel(score);
+    
+    return `<span class="score-chip ${className}" title="${title}">${icon} ${percentage}%</span>`;
+}
+
+function renderCategoryMeter(score) {
+    const filledSegments = Math.min(10, Math.round(score * 10));
+    const { className } = getScoreLevel(score);
+    
+    const segments = Array.from({ length: 10 }, (_, index) => {
+        const isFilled = index < filledSegments;
+        const filledClass = isFilled ? `filled ${className}` : '';
+        return `<span class="category-meter-segment ${filledClass}"></span>`;
+    }).join('');
+    
+    return `<div class="category-meter" aria-label="${Math.round(score * 100)}%">${segments}</div>`;
+}
+
+// Tab switching
+function initTabs() {
+    const tabs = document.querySelectorAll('.tab[data-tab]');
+    const tabContents = document.querySelectorAll('.tab-content');
+    const dropdownToggle = document.querySelector('.dropdown-toggle');
+    const demoTabs = ['detector', 'chat'];
+
+    const updateDropdownState = (targetTab) => {
+        if (!dropdownToggle) return;
+        if (demoTabs.includes(targetTab)) {
+            dropdownToggle.classList.add('active');
+        } else {
+            dropdownToggle.classList.remove('active');
+        }
+    };
+    
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            const targetTab = tab.dataset.tab;
+            
+            // Update tabs
+            tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            
+            // Update content
+            tabContents.forEach(content => {
+                content.classList.remove('active');
+                if (content.id === `${targetTab}-content`) {
+                    content.classList.add('active');
+                }
+            });
+
+            updateDropdownState(targetTab);
+            
+            // Smooth scroll to top when switching tabs
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+    });
+
+    const initialActiveTab = document.querySelector('.tab[data-tab].active');
+    if (initialActiveTab) {
+        updateDropdownState(initialActiveTab.dataset.tab);
+    }
+}
+
+function initNavDropdown() {
+    const dropdown = document.querySelector('.nav-dropdown');
+    if (!dropdown) return;
+    
+    const toggle = dropdown.querySelector('.dropdown-toggle');
+    const dropdownTabs = dropdown.querySelectorAll('.dropdown-item[data-tab]');
+    
+    const closeDropdown = () => {
+        dropdown.classList.remove('open');
+        toggle.setAttribute('aria-expanded', 'false');
+    };
+    
+    const toggleDropdown = (event) => {
+        event.stopPropagation();
+        const isOpen = dropdown.classList.toggle('open');
+        toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+    };
+    
+    toggle.addEventListener('click', toggleDropdown);
+    
+    dropdownTabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            closeDropdown();
+        });
+    });
+    
+    document.addEventListener('click', (event) => {
+        if (!dropdown.contains(event.target)) {
+            closeDropdown();
+        }
+    });
+}
+
+// Model selection for Classifier
+function initModelSelector() {
+    const select = document.getElementById('model-select');
+    if (!select) return;
+    select.value = state.selectedModel;
+    select.addEventListener('change', () => {
+        state.selectedModel = select.value;
+    });
+}
+
+// Model selection for Guardrail Comparison
+function initModelSelectorGC() {
+    const select = document.getElementById('model-select-gc');
+    if (!select) return;
+    select.value = state.selectedModelGC;
+    select.addEventListener('change', () => {
+        state.selectedModelGC = select.value;
+    });
+}
+
+// Classifier: Analyze text
+async function analyzeText() {
+    const textInput = document.getElementById('text-input');
+    const analyzeBtn = document.getElementById('analyze-btn');
+    const binaryResult = document.getElementById('binary-result');
+    const categoryResults = document.getElementById('category-results');
+    const feedbackSection = document.getElementById('feedback-section');
+    const feedbackMessage = document.getElementById('feedback-message');
+    
+    const text = textInput.value.trim();
+    
+    if (!text) {
+        alert('Please enter some text to analyze');
+        return;
+    }
+    
+    const originalText = showLoading(analyzeBtn);
+    feedbackMessage.textContent = '';
+    feedbackMessage.className = 'feedback-message';
+    
+    try {
+        const response = await fetch('/moderate', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                text: text,
+                model: state.selectedModel
+            })
+        });
+        
+        if (!response.ok) {
+            throw new Error('Failed to analyze text');
+        }
+        
+        const data = await response.json();
+        
+        // Display binary result
+        const verdictClass = data.binary_verdict;
+        const verdictText = verdictClass.charAt(0).toUpperCase() + verdictClass.slice(1);
+        const verdictIcons = {
+            'pass': '✅',
+            'warn': '⚠️',
+            'fail': '🚨'
+        };
+        
+        binaryResult.innerHTML = `
+            <div class="binary-card ${verdictClass}">
+                <div class="binary-icon">${verdictIcons[verdictClass]}</div>
+                <div class="binary-body">
+                    <div class="binary-label">Overall</div>
+                    <div class="binary-score-line">
+                        <h2>${verdictText}</h2>
+                        <span class="binary-percentage">${data.binary_percentage}/100</span>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Display category results
+        const categoryHTML = data.categories.map(cat => `
+            <div class="category-card">
+                <div class="category-label">${cat.emoji} ${cat.name}</div>
+                ${renderCategoryMeter(cat.max_score)}
+                <div class="category-score">${formatScore(cat.max_score)}</div>
+            </div>
+        `).join('');
+        
+        categoryResults.innerHTML = `
+            <div class="category-grid">
+                ${categoryHTML}
+            </div>
+        `;
+        
+        // Show feedback section
+        state.currentTextId = data.text_id;
+        feedbackSection.style.display = 'block';
+        
+    } catch (error) {
+        console.error('Error:', error);
+        binaryResult.innerHTML = `
+            <div style="color: #E63946; padding: 20px; text-align: center;">
+                ❌ Error analyzing text: ${error.message}
+            </div>
+        `;
+    } finally {
+        hideLoading(analyzeBtn, originalText);
+    }
+}
+
+// Classifier: Submit feedback
+async function submitFeedback(agree) {
+    const feedbackMessage = document.getElementById('feedback-message');
+    
+    if (!state.currentTextId) {
+        feedbackMessage.textContent = 'No analysis to provide feedback on';
+        feedbackMessage.className = 'feedback-message info';
+        return;
+    }
+    
+    try {
+        const response = await fetch('/send_feedback', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                text_id: state.currentTextId,
+                agree: agree
+            })
+        });
+        
+        if (!response.ok) {
+            throw new Error('Failed to submit feedback');
+        }
+        
+        const data = await response.json();
+        
+        feedbackMessage.textContent = data.message;
+        feedbackMessage.className = 'feedback-message success';
+        
+    } catch (error) {
+        console.error('Error:', error);
+        feedbackMessage.textContent = 'Error submitting feedback';
+        feedbackMessage.className = 'feedback-message info';
+    }
+}
+
+// Guardrail Comparison: Render chat messages
+function renderChatMessages(containerId, messages) {
+    const container = document.getElementById(containerId);
+    container.innerHTML = messages.map(msg => `
+        <div class="chat-message ${msg.role}">
+            ${msg.content}
+        </div>
+    `).join('');
+    
+    // Scroll to bottom
+    container.scrollTop = container.scrollHeight;
+}
+
+// Guardrail Comparison: Send message
+async function sendMessage() {
+    const messageInput = document.getElementById('message-input');
+    const sendBtn = document.getElementById('send-btn');
+    
+    const message = messageInput.value.trim();
+    
+    if (!message) {
+        alert('Please enter a message');
+        return;
+    }
+    
+    const originalText = showLoading(sendBtn);
+    
+    try {
+        const response = await fetch('/chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                message: message,
+                model: state.selectedModelGC,
+                histories: state.chatHistories
+            })
+        });
+        
+        if (!response.ok) {
+            throw new Error('Failed to send message');
+        }
+        
+        const data = await response.json();
+        
+        // Update state
+        state.chatHistories = data.histories;
+        
+        // Render all chat panels
+        renderChatMessages('chat-no-mod', data.histories.no_moderation);
+        renderChatMessages('chat-openai', data.histories.openai_moderation);
+        renderChatMessages('chat-lionguard', data.histories.lionguard);
+        
+        // Clear input
+        messageInput.value = '';
+        
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error sending message: ' + error.message);
+    } finally {
+        hideLoading(sendBtn, originalText);
+    }
+}
+
+// Guardrail Comparison: Clear all chats
+function clearAllChats() {
+    state.chatHistories = {
+        no_moderation: [],
+        openai_moderation: [],
+        lionguard: []
+    };
+    
+    document.getElementById('chat-no-mod').innerHTML = '';
+    document.getElementById('chat-openai').innerHTML = '';
+    document.getElementById('chat-lionguard').innerHTML = '';
+}
+
+// Initialize event listeners
+function initEventListeners() {
+    // Classifier tab
+    const analyzeBtn = document.getElementById('analyze-btn');
+    const textInput = document.getElementById('text-input');
+    const thumbsUpBtn = document.getElementById('thumbs-up');
+    const thumbsDownBtn = document.getElementById('thumbs-down');
+    
+    analyzeBtn.addEventListener('click', analyzeText);
+    textInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter' && e.ctrlKey) {
+            analyzeText();
+        }
+    });
+    thumbsUpBtn.addEventListener('click', () => submitFeedback(true));
+    thumbsDownBtn.addEventListener('click', () => submitFeedback(false));
+    
+    // Guardrail Comparison tab
+    const sendBtn = document.getElementById('send-btn');
+    const messageInput = document.getElementById('message-input');
+    const clearBtn = document.getElementById('clear-btn');
+    
+    sendBtn.addEventListener('click', sendMessage);
+    messageInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+    clearBtn.addEventListener('click', clearAllChats);
+}
+
+// Dark mode toggle
+function initThemeToggle() {
+    const themeToggle = document.getElementById('theme-toggle');
+    if (!themeToggle) return;
+
+    const themeIcon = themeToggle.querySelector('.theme-icon');
+    const updateIcon = (isDark) => {
+        themeToggle.setAttribute('aria-pressed', isDark ? 'true' : 'false');
+        if (themeIcon) {
+            themeIcon.textContent = isDark ? '🌙' : '🌞';
+        }
+    };
+
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    const shouldStartDark = savedTheme === 'dark';
+    if (shouldStartDark) {
+        document.body.classList.add('dark-mode');
+    }
+    updateIcon(shouldStartDark);
+
+    themeToggle.addEventListener('click', () => {
+        document.body.classList.toggle('dark-mode');
+        const isDark = document.body.classList.contains('dark-mode');
+        updateIcon(isDark);
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    });
+}
+
+// Initialize app
+document.addEventListener('DOMContentLoaded', () => {
+    initTabs();
+    initNavDropdown();
+    initModelSelector();
+    initModelSelectorGC();
+    initEventListeners();
+    initThemeToggle();
+
+    console.log('LionGuard 2 app initialized');
+});

app/frontend/style.css

@@ -0,0 +1,1289 @@
+/* LionGuard 2 - Warm, Inviting, and Bright Design */
+@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 */
+    --primary-red: #E14746;
+    --primary-dark: #1E293B;
+    --warm-beige: #F8FAFC;
+    --warm-cream: #F1F5F9;
+    --warm-tan: #E2E8F0;
+    --soft-white: #FFFFFF;
+
+    /* Accent colors - more sophisticated */
+    --accent-purple: #8B5CF6;
+    --accent-blue: #3B82F6;
+    --success-green: #10B981;
+    --warning-amber: #F59E0B;
+    --info-blue: #0EA5E9;
+
+    /* Text colors */
+    --text-primary: #0F172A;
+    --text-secondary: #475569;
+    --text-muted: #94A3B8;
+
+    /* UI elements - more subtle shadows, less rounded */
+    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
+    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
+    --shadow-strong: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+    --border-radius: 8px;
+    --border-radius-sm: 6px;
+    --border-radius-lg: 12px;
+}
+
+/* Dark Mode */
+body.dark-mode {
+    --primary-dark: #E2E8F0;
+    --warm-beige: #0F172A;
+    --warm-cream: #1E293B;
+    --warm-tan: #334155;
+    --soft-white: #1E293B;
+
+    --text-primary: #F1F5F9;
+    --text-secondary: #CBD5E1;
+    --text-muted: #64748B;
+
+    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
+    --shadow-strong: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+/* Fix model selector gradient in dark mode */
+body.dark-mode .model-selector-prominent {
+    background: transparent;
+}
+
+body.dark-mode .guardrail-intro {
+    background: var(--soft-white);
+}
+
+/* Reset & Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--warm-beige);
+    color: var(--text-primary);
+    line-height: 1.6;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.container {
+    width: 100%;
+    max-width: 1800px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+main {
+    flex: 1;
+}
+
+/* Header */
+.header {
+    background: var(--soft-white);
+    box-shadow: var(--shadow-soft);
+    padding: 12px 0;
+    margin-bottom: 16px;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.header-controls {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    box-shadow: none;
+}
+
+.logo-section {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.logo {
+    width: 48px;
+    height: 48px;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.logo-text h1 {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.4rem;
+    color: var(--primary-red);
+    margin-bottom: 0px;
+    line-height: 1.2;
+}
+
+.logo-text p {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+body.dark-mode .header-controls {
+    background: transparent;
+}
+
+/* Theme Toggle */
+.theme-icon-button {
+    background: var(--warm-cream);
+    border: 1px solid var(--warm-tan);
+    border-radius: 50%;
+    width: 42px;
+    height: 42px;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    font-size: 1.1rem;
+    box-shadow: var(--shadow-soft);
+    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+}
+
+.theme-icon-button:hover {
+    transform: translateY(-1px);
+    border-color: var(--primary-red);
+    background: var(--soft-white);
+}
+
+.theme-icon-button:focus-visible {
+    outline: 2px solid rgba(225, 71, 70, 0.4);
+    outline-offset: 3px;
+}
+
+.theme-icon {
+    font-size: 1.1rem;
+    line-height: 1;
+}
+
+body.dark-mode .theme-icon-button {
+    background: var(--warm-cream);
+    border-color: #475569;
+}
+
+body.dark-mode .toggle-icon-moon {
+    opacity: 0.8;
+}
+
+/* Hero Section */
+.hero {
+    background: linear-gradient(135deg, var(--soft-white) 0%, var(--warm-cream) 100%);
+    border: 2px solid var(--warm-tan);
+    border-radius: var(--border-radius-lg);
+    padding: 48px;
+    margin-bottom: 32px;
+    box-shadow: var(--shadow-medium);
+    display: flex;
+    gap: 48px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.hero-content {
+    flex: 1 1 400px;
+}
+
+.hero-eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--primary-red);
+    margin-bottom: 12px;
+}
+
+.hero-content h2 {
+    font-family: 'Poppins', sans-serif;
+    font-size: 2.2rem;
+    color: var(--primary-dark);
+    margin-bottom: 16px;
+    line-height: 1.3;
+}
+
+.hero-content p {
+    color: var(--text-secondary);
+    font-size: 1.05rem;
+    margin-bottom: 24px;
+}
+
+.hero-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.badge {
+    background: var(--soft-white);
+    border: 1px solid var(--warm-tan);
+    padding: 6px 14px;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    box-shadow: var(--shadow-soft);
+}
+
+.hero-stats {
+    display: flex;
+    gap: 20px;
+    flex: 0 0 auto;
+}
+
+.stat-card {
+    background: var(--soft-white);
+    border: 2px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    padding: 24px 32px;
+    text-align: center;
+    box-shadow: var(--shadow-soft);
+}
+
+.stat-card strong {
+    display: block;
+    font-size: 2.5rem;
+    color: var(--primary-red);
+    font-family: 'Poppins', sans-serif;
+    line-height: 1;
+    margin-bottom: 8px;
+}
+
+.stat-card span {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+}
+
+/* Info Strip */
+.info-strip {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.info-pill {
+    background: var(--soft-white);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    padding: 14px 18px;
+    color: var(--text-primary);
+    font-size: 0.9rem;
+    box-shadow: var(--shadow-soft);
+    transition: all 0.2s ease;
+}
+
+.info-pill:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-medium);
+    border-color: var(--primary-red);
+}
+
+/* Warning Card */
+.warning-card {
+    background: #FEF3C7;
+    border-left: 3px solid var(--warning-amber);
+    border-right: 1px solid var(--warm-tan);
+    border-top: 1px solid var(--warm-tan);
+    border-bottom: 1px solid var(--warm-tan);
+    color: #78350F;
+    padding: 8px 14px;
+    border-radius: var(--border-radius);
+    margin-bottom: 12px;
+    font-weight: 500;
+    font-size: 0.85rem;
+    box-shadow: var(--shadow-soft);
+}
+
+/* Tabs */
+.tabs {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 18px;
+    margin-bottom: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    box-shadow: none;
+}
+
+.nav-dropdown {
+    position: relative;
+}
+
+.tab {
+    flex: 0 0 auto;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    padding: 6px 0;
+    border-radius: 0;
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    white-space: nowrap;
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+.tab:hover {
+    background: transparent;
+    border-bottom-color: var(--warm-tan);
+    color: var(--text-primary);
+}
+
+.tab.active {
+    background: transparent;
+    border-bottom-color: var(--primary-red);
+    color: var(--primary-red);
+}
+
+.tab:focus-visible {
+    outline: 2px solid rgba(225, 71, 70, 0.4);
+    outline-offset: 2px;
+}
+
+.tab-icon {
+    font-size: 1.2rem;
+}
+
+.dropdown-toggle {
+    padding-right: 22px;
+}
+
+.dropdown-caret {
+    font-size: 0.75rem;
+    margin-left: auto;
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    background: var(--soft-white);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-medium);
+    padding: 8px;
+    display: none;
+    flex-direction: column;
+    min-width: 200px;
+    z-index: 10;
+}
+
+.nav-dropdown.open .dropdown-menu {
+    display: flex;
+}
+
+.dropdown-item {
+    width: 100%;
+    justify-content: flex-start;
+    border-radius: var(--border-radius-sm);
+}
+
+.dropdown-item + .dropdown-item {
+    margin-top: 4px;
+}
+
+.nav-link {
+    font-weight: 600;
+}
+
+/* Tab Content */
+.tab-content {
+    display: none;
+    width: 100%;
+}
+
+.tab-content.active {
+    display: block;
+    animation: fadeIn 0.4s ease;
+    width: 100%;
+}
+
+/* Ensure consistent content width across all tabs */
+#detector-content {
+    width: 100%;
+    max-width: 1800px;
+    margin: 0 auto;
+}
+
+#chat-content {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+}
+
+#about-content {
+    width: 100%;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+/* Keep model selector full width */
+.model-selector-prominent {
+    width: 100%;
+    max-width: none;
+}
+
+.full-width-section {
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    margin-right: calc(50% - 50vw);
+    padding-left: clamp(16px, 4vw, 64px);
+    padding-right: clamp(16px, 4vw, 64px);
+}
+
+/* Ensure consistent inner content widths */
+#detector-content .analysis-grid,
+#chat-content .guardrail-intro,
+#chat-content .chat-grid,
+#chat-content .message-input-section {
+    width: 100%;
+    max-width: none;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#about-content .about-intro-section,
+#about-content .about-resources-grid {
+    width: 100%;
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Model Selector */
+.model-selector-prominent {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    margin-bottom: 28px;
+    box-shadow: none;
+}
+
+.model-selector-header {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.model-selector-header h3 {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.15rem;
+    color: var(--primary-dark);
+    margin: 0;
+}
+
+.model-selector-subtitle {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    margin: 0;
+}
+
+.model-dropdown {
+    position: relative;
+    max-width: 520px;
+}
+
+.model-select {
+    width: 100%;
+    padding: 16px 18px;
+    border: 2px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    background: var(--soft-white);
+    color: var(--primary-dark);
+    font-size: 1rem;
+    font-weight: 600;
+    box-shadow: var(--shadow-soft);
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    cursor: pointer;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.model-dropdown::after {
+    content: '▾';
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--text-secondary);
+    font-size: 1rem;
+}
+
+.model-select:focus {
+    outline: none;
+    border-color: var(--primary-red);
+    box-shadow: 0 0 0 2px rgba(225, 71, 70, 0.15);
+}
+
+.model-select option {
+    font-weight: 500;
+}
+
+/* Analysis Grid */
+.analysis-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+    margin-bottom: 10px;
+    width: 100%;
+    max-width: 100%;
+}
+
+@media (min-width: 900px) {
+    .analysis-grid {
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+    }
+}
+
+/* Panel */
+.panel {
+    background: var(--soft-white);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    padding: 20px;
+    box-shadow: var(--shadow-medium);
+    display: flex;
+    flex-direction: column;
+}
+
+.panel h3 {
+    font-family: 'Poppins', sans-serif;
+    color: var(--primary-dark);
+    margin-bottom: 16px;
+    font-size: 1.1rem;
+}
+
+/* Input Panel */
+.input-panel {
+    height: 100%;
+}
+
+.input-panel textarea {
+    width: 100%;
+    background: var(--warm-cream);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    padding: 14px;
+    font-family: inherit;
+    font-size: 0.95rem;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+    resize: vertical;
+    min-height: 200px;
+    flex: 1;
+    transition: all 0.2s ease;
+}
+
+@media (min-width: 900px) {
+    .input-panel textarea {
+        min-height: 300px;
+    }
+}
+
+.input-panel textarea:focus {
+    outline: none;
+    border-color: var(--primary-red);
+    box-shadow: 0 0 0 2px rgba(225, 71, 70, 0.1);
+}
+
+/* Buttons */
+.btn {
+    padding: 10px 18px;
+    border: none;
+    border-radius: var(--border-radius-sm);
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    box-shadow: var(--shadow-soft);
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-medium);
+}
+
+.btn-primary {
+    background: var(--primary-red);
+    color: var(--soft-white);
+}
+
+.btn-primary:hover {
+    background: #B91C1C;
+}
+
+.btn-success {
+    background: var(--success-green);
+    color: var(--soft-white);
+}
+
+.btn-success:hover {
+    background: #059669;
+}
+
+.btn-secondary {
+    background: var(--warm-cream);
+    border: 1px solid var(--warm-tan);
+    color: var(--text-primary);
+}
+
+.btn-danger {
+    background: #EF4444;
+    color: var(--soft-white);
+}
+
+.btn-danger:hover {
+    background: #DC2626;
+}
+
+.btn-icon {
+    font-size: 1.2rem;
+}
+
+/* Binary Result */
+.binary-placeholder {
+    text-align: center;
+    padding: 16px 12px;
+    border: 1px dashed var(--warm-tan);
+    border-radius: var(--border-radius);
+    color: var(--text-muted);
+    margin-bottom: 10px;
+    font-size: 0.8rem;
+}
+
+.placeholder-icon {
+    font-size: 1.6rem;
+    margin-bottom: 4px;
+}
+
+.binary-card {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-radius: var(--border-radius);
+    padding: 10px 12px;
+    margin-bottom: 6px;
+    box-shadow: var(--shadow-soft);
+    border: 1px solid;
+}
+
+.binary-card.pass {
+    background: #ECFDF5;
+    border-color: var(--success-green);
+    border-left-width: 4px;
+}
+
+.binary-card.warn {
+    background: #FEF3C7;
+    border-color: var(--warning-amber);
+    border-left-width: 4px;
+}
+
+.binary-card.fail {
+    background: #FEE2E2;
+    border-color: var(--primary-red);
+    border-left-width: 4px;
+}
+
+body.dark-mode .binary-card.pass {
+    background: rgba(34, 197, 94, 0.15);
+    border-color: #4ADE80;
+}
+
+body.dark-mode .binary-card.warn {
+    background: rgba(251, 191, 36, 0.18);
+    border-color: #FBBF24;
+}
+
+body.dark-mode .binary-card.fail {
+    background: rgba(248, 113, 113, 0.18);
+    border-color: #F87171;
+}
+
+.binary-icon {
+    font-size: 1.6rem;
+}
+
+.binary-label {
+    font-size: 0.6rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 2px;
+}
+
+.binary-score-line {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-bottom: 2px;
+}
+
+.binary-score-line h2 {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1rem;
+    line-height: 1.1;
+    margin: 0;
+}
+
+.binary-card.pass .binary-score-line h2 {
+    color: #15803D;
+}
+
+.binary-card.warn .binary-score-line h2 {
+    color: #92400E;
+}
+
+.binary-card.fail .binary-score-line h2 {
+    color: #B91C1C;
+}
+
+body.dark-mode .binary-card.pass .binary-score-line h2 {
+    color: #86EFAC;
+}
+
+body.dark-mode .binary-card.warn .binary-score-line h2 {
+    color: #FCD34D;
+}
+
+body.dark-mode .binary-card.fail .binary-score-line h2 {
+    color: #FCA5A5;
+}
+
+.binary-percentage {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.binary-body p {
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+}
+
+body.dark-mode .binary-label,
+body.dark-mode .binary-percentage,
+body.dark-mode .binary-body p {
+    color: #E2E8F0;
+}
+
+/* Category Results */
+.category-placeholder {
+    text-align: center;
+    padding: 16px 12px;
+    border: 1px dashed var(--warm-tan);
+    border-radius: var(--border-radius);
+    color: var(--text-muted);
+    font-size: 0.8rem;
+}
+
+.category-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+}
+
+@media (max-width: 900px) {
+    .category-grid {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    }
+}
+
+.category-card {
+    background: var(--warm-cream);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius-sm);
+    padding: 10px 12px;
+    transition: all 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: center;
+    text-align: center;
+}
+
+body.dark-mode .category-card {
+    background: rgba(15, 23, 42, 0.85);
+    border-color: rgba(148, 163, 184, 0.4);
+}
+
+.category-card:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-soft);
+}
+
+.category-label {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+    font-size: 0.75rem;
+}
+
+.category-meter {
+    display: grid;
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+    gap: 2px;
+    margin-bottom: 4px;
+    width: 100%;
+}
+
+.category-meter-segment {
+    height: 6px;
+    border-radius: 2px;
+    background: var(--warm-tan);
+    transition: background 0.2s ease;
+}
+
+.category-meter-segment.filled.good {
+    background: rgba(16, 185, 129, 0.8);
+}
+
+.category-meter-segment.filled.warn {
+    background: rgba(245, 158, 11, 0.8);
+}
+
+.category-meter-segment.filled.bad {
+    background: rgba(225, 71, 70, 0.9);
+}
+
+.category-score {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.score-chip {
+    display: inline-block;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-weight: 600;
+    font-size: 0.65rem;
+}
+
+.score-chip.good {
+    background: rgba(6, 214, 160, 0.15);
+    color: #007A5A;
+}
+
+.score-chip.warn {
+    background: rgba(255, 183, 3, 0.15);
+    color: #A67C00;
+}
+
+.score-chip.bad {
+    background: rgba(230, 57, 70, 0.15);
+    color: #A81017;
+}
+
+body.dark-mode .score-chip.good {
+    background: rgba(34, 197, 94, 0.25);
+    color: #A7F3D0;
+}
+
+body.dark-mode .score-chip.warn {
+    background: rgba(251, 191, 36, 0.25);
+    color: #FDE68A;
+}
+
+body.dark-mode .score-chip.bad {
+    background: rgba(248, 113, 113, 0.25);
+    color: #FCA5A5;
+}
+
+/* Feedback Section */
+.feedback-section {
+    background: var(--warm-cream);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    padding: 10px 14px;
+    margin-top: 8px;
+    text-align: center;
+}
+
+.feedback-prompt {
+    color: var(--text-secondary);
+    margin-bottom: 4px;
+    font-weight: 500;
+    font-size: 0.78rem;
+}
+
+.feedback-buttons {
+    display: flex;
+    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 {
+    padding: 8px;
+    border-radius: var(--border-radius-sm);
+    font-weight: 600;
+    text-align: center;
+    font-size: 0.85rem;
+}
+
+.feedback-message.success {
+    background: rgba(6, 214, 160, 0.15);
+    color: var(--success-green);
+}
+
+.feedback-message.info {
+    background: rgba(255, 183, 3, 0.15);
+    color: var(--warning-amber);
+}
+
+/* Guardrail Comparison */
+.guardrail-intro {
+    margin-bottom: 16px;
+    background: var(--soft-white);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    padding: 20px;
+    box-shadow: var(--shadow-soft);
+}
+
+.guardrail-intro h3 {
+    font-family: 'Poppins', sans-serif;
+    color: var(--primary-dark);
+    margin-bottom: 8px;
+    font-size: 1.1rem;
+}
+
+.guardrail-intro p {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+}
+
+.chat-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 22px;
+    margin-bottom: 24px;
+}
+
+.chat-panel {
+    background: var(--soft-white);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: var(--shadow-medium);
+}
+
+.chat-header {
+    background: var(--warm-cream);
+    padding: 10px 14px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-bottom: 1px solid var(--warm-tan);
+}
+
+.chat-icon {
+    font-size: 1.2rem;
+}
+
+.chat-header h4 {
+    font-family: 'Poppins', sans-serif;
+    color: var(--primary-dark);
+    font-size: 0.95rem;
+}
+
+.chat-messages {
+    padding: 16px;
+    min-height: 320px;
+    max-height: 380px;
+    overflow-y: auto;
+    background: var(--warm-cream);
+}
+
+@media (min-width: 900px) {
+    .chat-messages {
+        min-height: 400px;
+        max-height: 500px;
+    }
+}
+
+.chat-message {
+    margin-bottom: 8px;
+    padding: 8px 12px;
+    border-radius: var(--border-radius-sm);
+    max-width: 85%;
+    word-wrap: break-word;
+    font-size: 0.85rem;
+}
+
+.chat-message.user {
+    background: var(--primary-red);
+    color: var(--soft-white);
+    margin-left: auto;
+}
+
+.chat-message.assistant {
+    background: var(--soft-white);
+    border: 1px solid var(--warm-tan);
+    color: var(--text-primary);
+}
+
+/* Message Input Section */
+.message-input-section {
+    background: var(--soft-white);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    padding: 14px;
+    box-shadow: var(--shadow-medium);
+    margin-bottom: 16px;
+}
+
+.message-input-section h4 {
+    font-family: 'Poppins', sans-serif;
+    color: var(--primary-dark);
+    margin-bottom: 10px;
+    font-size: 0.95rem;
+}
+
+.message-input-group {
+    display: flex;
+    gap: 8px;
+}
+
+.message-input-group input {
+    flex: 1;
+    background: var(--warm-cream);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius-sm);
+    padding: 10px 14px;
+    font-family: inherit;
+    font-size: 0.9rem;
+    color: var(--text-primary);
+    transition: all 0.2s ease;
+}
+
+.message-input-group input:focus {
+    outline: none;
+    border-color: var(--primary-red);
+    box-shadow: 0 0 0 2px rgba(225, 71, 70, 0.1);
+}
+
+/* Footer */
+.footer {
+    background: var(--soft-white);
+    border-top: 1px solid var(--warm-tan);
+    padding: 10px 0;
+    margin-top: 12px;
+    text-align: center;
+}
+
+.footer p {
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+}
+
+.footer a {
+    color: var(--primary-red);
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+/* Loading State */
+.loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+/* About Page Styles */
+.about-intro-section {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 10px 0 30px;
+    margin-bottom: 16px;
+    box-shadow: none;
+    text-align: center;
+}
+
+.about-intro-section h2 {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.4rem;
+    color: var(--primary-dark);
+    margin-bottom: 10px;
+}
+
+.about-intro-section .lead {
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+    margin: 0 auto;
+    max-width: 900px;
+}
+
+.about-intro-section .lead + .lead {
+    margin-top: 14px;
+}
+
+.about-resources-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 16px;
+    margin-bottom: 16px;
+}
+
+@media (min-width: 900px) {
+    .about-resources-grid {
+        gap: 20px;
+    }
+}
+
+.resource-card {
+    background: var(--soft-white);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    padding: 16px;
+    box-shadow: var(--shadow-soft);
+    transition: all 0.2s ease;
+}
+
+.resource-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-medium);
+}
+
+.resource-card h3 {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1rem;
+    color: var(--primary-dark);
+    margin-bottom: 12px;
+}
+
+.resource-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.resource-list a {
+    color: var(--primary-red);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 6px 10px;
+    background: var(--warm-cream);
+    border-radius: var(--border-radius-sm);
+    border-left: 3px solid var(--primary-red);
+    transition: all 0.2s ease;
+    font-size: 0.85rem;
+    outline: none;
+}
+
+.resource-list a:hover {
+    background: var(--warm-tan);
+    border-left-color: var(--primary-red);
+    transform: translateX(4px);
+}
+
+.resource-list a:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(225, 71, 70, 0.3);
+    background: var(--soft-white);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .about-intro-section {
+        padding: 20px;
+    }
+    
+    .about-intro-section h2 {
+        font-size: 1.4rem;
+    }
+    
+    .analysis-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .chat-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .tabs {
+        flex-wrap: wrap;
+    }
+
+    #detector-content,
+    #chat-content {
+        width: 100%;
+    }
+    
+    .message-input-group {
+        flex-direction: column;
+    }
+    
+    .feedback-buttons {
+        flex-direction: column;
+    }
+    
+    .model-dropdown {
+        max-width: 100%;
+    }
+    
+    .about-resources-grid {
+        grid-template-columns: 1fr;
+    }
+}

requirements.txt

@@ -1,7 +1,12 @@
-google-auth==2.40.3
+google-auth==2.43.0
 gspread==6.2.1
-numpy==2.1.3
-openai==1.83.0
-safetensors==0.5.3
-torch==2.7.0
-transformers==4.53.0
+numpy==2.3.5
+openai==2.8.1
+safetensors==0.6.2
+torch==2.9.1
+transformers==4.57.1
+google-genai==1.51.0
+sentence-transformers==5.1.2
+fastapi==0.115.0
+uvicorn[standard]==0.32.0
+gradio==5.34.2

utils.py

@@ -4,11 +4,14 @@ utils.py
 
 # Standard imports
 import os
-from typing import List
+from typing import List, Tuple
 
 # Third party imports
 import numpy as np
+from google import genai
 from openai import OpenAI
+from sentence_transformers import SentenceTransformer
+from transformers import AutoModel
 
 client = OpenAI(api_key=os.environ.get("OPENAI_API_KEY"))
 
@@ -39,3 +42,102 @@ def get_embeddings(
     # Extract embeddings from response
     embeddings = np.array([data.embedding for data in response.data])
     return embeddings
+
+
+MODEL_CONFIGS = {
+    "lionguard-2": {
+        "label": "LionGuard 2",
+        "repo_id": "govtech/lionguard-2",
+        "embedding_strategy": "openai",
+        "embedding_model": "text-embedding-3-large",
+    },
+    "lionguard-2-lite": {
+        "label": "LionGuard 2 Lite",
+        "repo_id": "govtech/lionguard-2-lite",
+        "embedding_strategy": "sentence_transformer",
+        "embedding_model": "google/embeddinggemma-300m",
+    },
+    "lionguard-2.1": {
+        "label": "LionGuard 2.1",
+        "repo_id": "govtech/lionguard-2.1",
+        "embedding_strategy": "gemini",
+        "embedding_model": "gemini-embedding-001",
+    },
+}
+
+DEFAULT_MODEL_KEY = "lionguard-2.1"
+MODEL_CACHE = {}
+EMBEDDING_MODEL_CACHE = {}
+current_model_choice = DEFAULT_MODEL_KEY
+GEMINI_CLIENT = None
+
+
+def resolve_model_key(model_key: str = None) -> str:
+    key = model_key or current_model_choice
+    if key not in MODEL_CONFIGS:
+        raise ValueError(f"Unknown model selection: {key}")
+    return key
+
+
+def load_model_instance(model_key: str):
+    key = resolve_model_key(model_key)
+    if key not in MODEL_CACHE:
+        repo_id = MODEL_CONFIGS[key]["repo_id"]
+        MODEL_CACHE[key] = AutoModel.from_pretrained(repo_id, trust_remote_code=True)
+    return MODEL_CACHE[key]
+
+
+def get_sentence_transformer(model_name: str):
+    if model_name not in EMBEDDING_MODEL_CACHE:
+        EMBEDDING_MODEL_CACHE[model_name] = SentenceTransformer(model_name)
+    return EMBEDDING_MODEL_CACHE[model_name]
+
+
+def get_gemini_client():
+    global GEMINI_CLIENT
+    if GEMINI_CLIENT is None:
+        api_key = os.getenv("GEMINI_API_KEY")
+        if not api_key:
+            raise EnvironmentError(
+                "GEMINI_API_KEY environment variable is required for LionGuard 2.1."
+            )
+        GEMINI_CLIENT = genai.Client(api_key=api_key)
+    return GEMINI_CLIENT
+
+
+def get_model_embeddings(model_key: str, texts: List[str]) -> np.ndarray:
+    key = resolve_model_key(model_key)
+    config = MODEL_CONFIGS[key]
+    strategy = config["embedding_strategy"]
+    model_name = config.get("embedding_model")
+
+    if strategy == "openai":
+        return get_embeddings(texts, model=model_name)
+    if strategy == "sentence_transformer":
+        embedder = get_sentence_transformer(model_name)
+        formatted_texts = [f"task: classification | query: {text}" for text in texts]
+        embeddings = embedder.encode(formatted_texts)
+        return np.array(embeddings)
+    if strategy == "gemini":
+        client = get_gemini_client()
+        result = client.models.embed_content(model=model_name, contents=texts)
+        return np.array([embedding.values for embedding in result.embeddings])
+
+    raise ValueError(f"Unsupported embedding strategy: {strategy}")
+
+
+def predict_with_model(texts: List[str], model_key: str = None) -> Tuple[dict, str]:
+    key = resolve_model_key(model_key)
+    embeddings = get_model_embeddings(key, texts)
+    model = load_model_instance(key)
+    return model.predict(embeddings), key
+
+
+def set_active_model(model_key: str) -> str:
+    if model_key not in MODEL_CONFIGS:
+        return f"⚠️ Unknown model {model_key}"
+    global current_model_choice
+    current_model_choice = model_key
+    load_model_instance(model_key)
+    label = MODEL_CONFIGS[model_key]["label"]
+    return f"🦁 Using {label} ({model_key})"