Update app.py

app.py

@@ -1,870 +1,470 @@
 import os
+import uuid
 import time
 import threading
-import torch
-import json
-from typing import List, Dict, Any, Optional
-from fastapi import FastAPI, HTTPException, Depends, Request
-from fastapi.responses import HTMLResponse, JSONResponse
-from fastapi.staticfiles import StaticFiles
-from fastapi.templating import Jinja2Templates
-from pydantic import BaseModel, Field
-from dotenv import load_dotenv
-from huggingface_hub import snapshot_download
-from transformers import AutoTokenizer, AutoModelForCausalLM, TextIteratorStreamer
-import uvicorn
-
-# Load environment variables
-load_dotenv()
-
-# Create necessary directories
-os.makedirs("templates", exist_ok=True)
-os.makedirs("static", exist_ok=True)
-
-# Model configuration
-MODEL_REPO = "daniel-dona/gemma-3-270m-it"
-LOCAL_DIR = os.path.join(os.getcwd(), "local_model")
-os.environ.setdefault("HF_HUB_ENABLE_HF_TRANSFER", "1")
-os.environ.setdefault("OMP_NUM_THREADS", str(os.cpu_count() or 2))
-os.environ.setdefault("MKL_NUM_THREADS", os.environ["OMP_NUM_THREADS"])
-os.environ.setdefault("OMP_PROC_BIND", "TRUE")
-torch.set_num_threads(int(os.environ["OMP_NUM_THREADS"]))
-torch.set_num_interop_threads(1)
-torch.set_float32_matmul_precision("high")
-
-# Initialize FastAPI app
-app = FastAPI(title="AI Content Moderator API", description="Advanced content moderation API powered by AI")
-
-# Mount static files and templates
-app.mount("/static", StaticFiles(directory="static"), name="static")
-templates = Jinja2Templates(directory="templates")
-
-# Ensure model is downloaded
-def ensure_local_model(repo_id: str, local_dir: str, tries: int = 3, sleep_s: float = 3.0) -> str:
-    os.makedirs(local_dir, exist_ok=True)
-    for i in range(tries):
-        try:
-            snapshot_download(
-                repo_id=repo_id,
-                local_dir=local_dir,
-                local_dir_use_symlinks=False,
-                resume_download=True,
-                allow_patterns=["*.json", "*.model", "*.safetensors", "*.bin", "*.txt", "*.py"]
-            )
-            return local_dir
-        except Exception:
-            if i == tries - 1:
-                raise
-            time.sleep(sleep_s * (2 ** i))
-    return local_dir
-
-# Load model and tokenizer
-print("Loading model...")
-model_path = ensure_local_model(MODEL_REPO, LOCAL_DIR)
-tokenizer = AutoTokenizer.from_pretrained(model_path, local_files_only=True)
-
-# Define chat template
-gemma_chat_template_simplified = (
-    "{% for message in messages %}"
-        "{% if message['role'] == 'user' %}"
-            "{{ '<start_of_turn>user\\n' + message['content'] | trim + '<end_of_turn>\\n' }}"
-        "{% elif message['role'] == 'assistant' %}"
-            "{{ '<start_of_turn>model\\n' + message['content'] | trim + '<end_of_turn>\\n' }}"
-        "{% endif %}"
-    "{% endfor %}"
-    "{% if add_generation_prompt %}"
-        "{{ '<start_of_turn>model\\n' }}"
-    "{% endif %}"
-)
-
-if tokenizer.chat_template is None:
-    tokenizer.chat_template = gemma_chat_template_simplified
-
-model = AutoModelForCausalLM.from_pretrained(
-    model_path,
-    local_files_only=True,
-    torch_dtype=torch.float32,
-    device_map=None
-)
-model.eval()
-
-# System prompt for moderation
-MODERATION_SYSTEM_PROMPT = (
-    "You are a multilingual content moderation classifier. "
-    "You MUST respond with exactly one lowercase letter: 's' for safe, 'u' for unsafe. "
-    "No explanations, no punctuation, no extra words. "
-    "If the message contains hate speech, harassment, sexual content involving minors, "
-    "extreme violence, self-harm encouragement, or other unsafe material, respond 'u'. "
-    "Otherwise respond 's'."
-)
-
-# API Models
-class ModerationRequest(BaseModel):
-    input: str = Field(..., description="Text to moderate")
-    model: Optional[str] = Field("gemma-3-270m-it", description="Model to use for moderation")
-
-class BatchModerationRequest(BaseModel):
-    inputs: List[str] = Field(..., description="List of texts to moderate")
-    model: Optional[str] = Field("gemma-3-270m-it", description="Model to use for moderation")
-
-class ModerationResponse(BaseModel):
-    id: str
-    object: str
-    created: int
-    model: str
-    results: List[Dict[str, Any]]
-
-# Helper functions
-def build_prompt(message, max_ctx_tokens=128):
-    full_user_message = f"{MODERATION_SYSTEM_PROMPT}\n\nUser input: '{message}'"
-    messages = [{"role": "user", "content": full_user_message}]
+import io
+from datetime import datetime, timedelta
+from collections import defaultdict, deque
+
+from flask import Flask, request, jsonify, render_template
+from detoxify import Detoxify
+import numpy as np
+import requests
+from PIL import Image
+from tensorflow.keras.models import load_model
+
+app = Flask(__name__, static_folder='static', template_folder='templates')
+app.logger.setLevel('INFO')
+
+API_KEY = os.environ.get('API_KEY')
+if not API_KEY:
+    raise ValueError("API_KEY environment variable not set.")
+
+print("Loading Detoxify model for text moderation...")
+detoxify_model = Detoxify('multilingual')
+print("Detoxify model loaded successfully.")
+
+MODEL_PATH = 'keras_model.h5'
+LABELS_PATH = 'labels.txt'
+image_model = None
+image_labels = None
+
+try:
+    print("Loading Teachable Machine model for image moderation...")
+    image_model = load_model(MODEL_PATH, compile=False)
+    with open(LABELS_PATH, 'r') as f:
+        image_labels = [line.strip().split(' ')[1] for line in f.readlines()]
+    print("Image moderation model loaded successfully.")
+except Exception as e:
+    app.logger.warning(f"Could not load image moderation model. Image moderation will be disabled. Error: {e}")
+    image_model = None
+    image_labels = None
+
+request_durations = deque(maxlen=100)
+request_timestamps = deque(maxlen=1000)
+daily_requests = defaultdict(int)
+concurrent_requests = 0
+concurrent_requests_lock = threading.Lock()
+
+def is_url(string):
+    return isinstance(string, str) and string.strip().startswith(('http://', 'https://'))
+
+def classify_image(image_bytes):
+    if not image_model or not image_labels:
+        raise RuntimeError("Image moderation model is not available.")
     
-    text = tokenizer.apply_chat_template(
-        messages,
-        tokenize=False,
-        add_generation_prompt=True
-    )
+    image = Image.open(io.BytesIO(image_bytes)).convert('RGB')
+    image = image.resize((224, 224))
     
-    while len(tokenizer(text, add_special_tokens=False).input_ids) > max_ctx_tokens and len(full_user_message) > 100:
-        full_user_message = full_user_message[:-50]
-        messages[0]['content'] = full_user_message
-        text = tokenizer.apply_chat_template(
-            messages,
-            tokenize=False,
-            add_generation_prompt=True
-        )
-    return text
-
-def enforce_s_u(text: str) -> str:
-    text_lower = text.strip().lower()
-    if "u" in text_lower and "s" not in text_lower:
-        return "u"
-    if "unsafe" in text_lower:
-        return "u"
-    return "s"
-
-def classify_text(message, max_tokens=3, temperature=0.1, top_p=0.95):
-    if not message.strip():
-        return {
-            "classification": "s",
-            "label": "SAFE",
-            "description": "Content appears to be safe and appropriate.",
-            "tokens_per_second": 0,
-            "processing_time": 0
-        }
-    
-    text = build_prompt(message)
-    inputs = tokenizer([text], return_tensors="pt").to(model.device)
-    do_sample = bool(temperature and temperature > 0.0)
-    gen_kwargs = dict(
-        max_new_tokens=max_tokens,
-        do_sample=do_sample,
-        top_p=top_p,
-        temperature=temperature if do_sample else None,
-        use_cache=True,
-        eos_token_id=tokenizer.eos_token_id,
-        pad_token_id=tokenizer.eos_token_id
-    )
+    image_array = np.asarray(image)
+    normalized_image_array = (image_array.astype(np.float32) / 127.5) - 1
     
-    try:
-        streamer = TextIteratorStreamer(tokenizer, skip_special_tokens=True, skip_prompt=True)
-    except TypeError:
-        streamer = TextIteratorStreamer(tokenizer, skip_special_tokens=True)
+    data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)
+    data[0] = normalized_image_array
     
-    thread = threading.Thread(
-        target=model.generate,
-        kwargs={**inputs, **{k: v for k, v in gen_kwargs.items() if v is not None}, "streamer": streamer}
-    )
+    prediction = image_model.predict(data)
     
-    partial_text = ""
-    token_count = 0
-    start_time = None
+    scores = {label.lower(): float(score) for label, score in zip(image_labels, prediction[0])}
+    return scores
+
+def transform_text_predictions(prediction_dict):
+    category_keys = [
+        "toxicity", "severe_toxicity", "obscene", "threat",
+        "insult", "identity_attack", "sexual_explicit"
+    ]
+    scores = {key: float(prediction_dict.get(key, 0.0)) for key in category_keys}
     
-    with torch.inference_mode():
-        thread.start()
-        try:
-            for chunk in streamer:
-                if start_time is None:
-                    start_time = time.time()
-                partial_text += chunk
-                token_count += 1
-        finally:
-            thread.join()
+    threshold = 0.5
+    categories = {key: (scores[key] > threshold) for key in category_keys}
+    flagged = any(categories.values())
     
-    final_label = enforce_s_u(partial_text)
-    end_time = time.time() if start_time else time.time()
-    duration = max(1e-6, end_time - start_time)
-    tps = token_count / duration if duration > 0 else 0.0
+    return flagged, categories, scores
+
+def transform_image_predictions(prediction_dict):
+    nsfw_score = prediction_dict.get('nsfw', 0.0)
     
-    if final_label == "s":
-        label = "SAFE"
-        description = "Content appears to be safe and appropriate."
-    else:
-        label = "UNSAFE"
-        description = "Content may contain inappropriate or harmful material."
+    categories = {
+        "sexual": nsfw_score > 0.8,
+        "hate": False,
+        "harassment": False,
+        "self-harm": False,
+        "sexual/minors": nsfw_score > 0.9,
+        "hate/threatening": False,
+        "violence/graphic": False,
+        "self-harm/intent": False,
+        "self-harm/instructions": False,
+        "harassment/threatening": False,
+        "violence": False,
+    }
     
-    return {
-        "classification": final_label,
-        "label": label,
-        "description": description,
-        "tokens_per_second": tps,
-        "processing_time": duration
+    category_scores = {
+        "sexual": nsfw_score,
+        "hate": 0.0,
+        "harassment": 0.0,
+        "self-harm": 0.0,
+        "sexual/minors": nsfw_score,
+        "hate/threatening": 0.0,
+        "violence/graphic": 0.0,
+        "self-harm/intent": 0.0,
+        "self-harm/instructions": 0.0,
+        "harassment/threatening": 0.0,
+        "violence": 0.0,
     }
-
-# API Key validation
-def get_api_key(request: Request):
-    api_key = request.headers.get("Authorization") or request.query_params.get("api_key")
-    if not api_key:
-        raise HTTPException(status_code=401, detail="API key required")
     
-    # Remove "Bearer " prefix if present
-    if api_key.startswith("Bearer "):
-        api_key = api_key[7:]
+    flagged = any(categories.values())
     
-    # Validate against environment variable
-    env_api_key = os.getenv("API_KEY")
-    if not env_api_key or api_key != env_api_key:
-        raise HTTPException(status_code=401, detail="Invalid API key")
+    return flagged, categories, category_scores
     
-    return api_key
-
-# API Endpoints
-@app.get("/", response_class=HTMLResponse)
-async def get_home(request: Request):
-    return templates.TemplateResponse("index.html", {"request": request})
-
-@app.post("/v1/moderations", response_model=ModerationResponse)
-async def moderate_content(
-    request: ModerationRequest,
-    api_key: str = Depends(get_api_key)
-):
-    result = classify_text(request.input)
+def track_request_metrics(start_time):
+    duration = time.time() - start_time
+    request_durations.append(duration)
+    request_timestamps.append(datetime.now())
+    today = datetime.now().strftime("%Y-%m-%d")
+    daily_requests[today] += 1
+
+def get_performance_metrics():
+    with concurrent_requests_lock:
+        current_concurrent = concurrent_requests
     
-    response_data = {
-        "id": f"modr_{int(time.time())}",
-        "object": "moderation",
-        "created": int(time.time()),
-        "model": request.model,
-        "results": [
-            {
-                "flagged": result["classification"] == "u",
-                "categories": {
-                    "hate": result["classification"] == "u",
-                    "hate/threatening": result["classification"] == "u",
-                    "harassment": result["classification"] == "u",
-                    "harassment/threatening": result["classification"] == "u",
-                    "self-harm": result["classification"] == "u",
-                    "self-harm/intent": result["classification"] == "u",
-                    "self-harm/instructions": result["classification"] == "u",
-                    "sexual": result["classification"] == "u",
-                    "sexual/minors": result["classification"] == "u",
-                    "violence": result["classification"] == "u",
-                    "violence/graphic": result["classification"] == "u"
-                },
-                "category_scores": {
-                    "hate": 0.9 if result["classification"] == "u" else 0.1,
-                    "hate/threatening": 0.9 if result["classification"] == "u" else 0.1,
-                    "harassment": 0.9 if result["classification"] == "u" else 0.1,
-                    "harassment/threatening": 0.9 if result["classification"] == "u" else 0.1,
-                    "self-harm": 0.9 if result["classification"] == "u" else 0.1,
-                    "self-harm/intent": 0.9 if result["classification"] == "u" else 0.1,
-                    "self-harm/instructions": 0.9 if result["classification"] == "u" else 0.1,
-                    "sexual": 0.9 if result["classification"] == "u" else 0.1,
-                    "sexual/minors": 0.9 if result["classification"] == "u" else 0.1,
-                    "violence": 0.9 if result["classification"] == "u" else 0.1,
-                    "violence/graphic": 0.9 if result["classification"] == "u" else 0.1
-                },
-                "text": request.input
-            }
-        ]
+    avg_request_time = sum(request_durations) / len(request_durations) if request_durations else 0
+    peak_request_time = max(request_durations) if request_durations else 0
+    
+    now = datetime.now()
+    one_minute_ago = now - timedelta(seconds=60)
+    requests_last_minute = sum(1 for ts in request_timestamps if ts > one_minute_ago)
+    today_requests = daily_requests.get(now.strftime("%Y-%m-%d"), 0)
+
+    last_7_days = []
+    for i in range(7):
+        date = (now - timedelta(days=i)).strftime("%Y-%m-%d")
+        last_7_days.append({
+            "date": date,
+            "requests": daily_requests.get(date, 0),
+        })
+
+    return {
+        "avg_request_time_ms": avg_request_time * 1000,
+        "peak_request_time_ms": peak_request_time * 1000,
+        "requests_per_minute": requests_last_minute,
+        "concurrent_requests": current_concurrent,
+        "today_requests": today_requests,
+        "last_7_days": last_7_days
     }
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/v1/moderations', methods=['POST'])
+def moderations():
+    global concurrent_requests
     
-    return response_data
-
-@app.post("/v1/moderations/batch", response_model=ModerationResponse)
-async def moderate_content_batch(
-    request: BatchModerationRequest,
-    api_key: str = Depends(get_api_key)
-):
-    results = []
+    auth_header = request.headers.get('Authorization')
+    if not auth_header or not auth_header.startswith("Bearer ") or auth_header.split(" ")[1] != API_KEY:
+        return jsonify({"error": {"message": "Incorrect API key provided.", "type": "invalid_request_error", "code": "invalid_api_key"}}), 401
+
+    with concurrent_requests_lock:
+        concurrent_requests += 1
     
-    for text in request.inputs:
-        result = classify_text(text)
-        results.append({
-            "flagged": result["classification"] == "u",
-            "categories": {
-                "hate": result["classification"] == "u",
-                "hate/threatening": result["classification"] == "u",
-                "harassment": result["classification"] == "u",
-                "harassment/threatening": result["classification"] == "u",
-                "self-harm": result["classification"] == "u",
-                "self-harm/intent": result["classification"] == "u",
-                "self-harm/instructions": result["classification"] == "u",
-                "sexual": result["classification"] == "u",
-                "sexual/minors": result["classification"] == "u",
-                "violence": result["classification"] == "u",
-                "violence/graphic": result["classification"] == "u"
-            },
-            "category_scores": {
-                "hate": 0.9 if result["classification"] == "u" else 0.1,
-                "hate/threatening": 0.9 if result["classification"] == "u" else 0.1,
-                "harassment": 0.9 if result["classification"] == "u" else 0.1,
-                "harassment/threatening": 0.9 if result["classification"] == "u" else 0.1,
-                "self-harm": 0.9 if result["classification"] == "u" else 0.1,
-                "self-harm/intent": 0.9 if result["classification"] == "u" else 0.1,
-                "self-harm/instructions": 0.9 if result["classification"] == "u" else 0.1,
-                "sexual": 0.9 if result["classification"] == "u" else 0.1,
-                "sexual/minors": 0.9 if result["classification"] == "u" else 0.1,
-                "violence": 0.9 if result["classification"] == "u" else 0.1,
-                "violence/graphic": 0.9 if result["classification"] == "u" else 0.1
-            },
-            "text": text
-        })
+    start_time = time.time()
     
-    response_data = {
-        "id": f"modr_batch_{int(time.time())}",
-        "object": "moderation",
-        "created": int(time.time()),
-        "model": request.model,
-        "results": results
-    }
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({"error": "Invalid JSON body"}), 400
+            
+        raw_input = data.get('input')
+        if raw_input is None:
+            return jsonify({"error": "'input' field is required"}), 400
+
+        inputs = [raw_input] if isinstance(raw_input, str) else raw_input
+        if not isinstance(inputs, list):
+            return jsonify({"error": "'input' must be a string or a list of strings/URLs"}), 400
+
+        results = []
+        texts_to_process = []
+        text_indices = []
+
+        for i, item in enumerate(inputs):
+            if is_url(item):
+                try:
+                    response = requests.get(item, timeout=10)
+                    response.raise_for_status()
+                    image_scores = classify_image(response.content)
+                    flagged, categories, category_scores = transform_image_predictions(image_scores)
+                    results.append((i, {"flagged": flagged, "categories": categories, "category_scores": category_scores}))
+                except requests.RequestException as e:
+                     results.append((i, {"error": f"Failed to download image: {e}"}))
+                except Exception as e:
+                     results.append((i, {"error": f"Failed to process image: {e}"}))
+            elif isinstance(item, str):
+                texts_to_process.append(item)
+                text_indices.append(i)
+            else:
+                results.append((i, {"error": "Invalid input type. Must be a string or URL."}))
+
+        if texts_to_process:
+            text_predictions = detoxify_model.predict(texts_to_process)
+            for i, original_index in enumerate(text_indices):
+                single_prediction = {key: value[i] for key, value in text_predictions.items()}
+                flagged, categories, category_scores = transform_text_predictions(single_prediction)
+                results.append((original_index, {"flagged": flagged, "categories": categories, "category_scores": category_scores}))
+        
+        results.sort(key=lambda x: x[0])
+        final_results = [res for _, res in results]
+
+        response_data = {
+            "id": "modr-" + uuid.uuid4().hex[:24],
+            "model": "smart-moderator-multimodal-v1",
+            "results": final_results
+        }
+        
+        return jsonify(response_data)
+
+    except Exception as e:
+        app.logger.error(f"An error occurred: {e}", exc_info=True)
+        return jsonify({"error": "An internal server error occurred."}), 500
+    finally:
+        track_request_metrics(start_time)
+        with concurrent_requests_lock:
+            concurrent_requests -= 1
+
+@app.route('/v1/metrics', methods=['GET'])
+def metrics():
+    auth_header = request.headers.get('Authorization')
+    if not auth_header or not auth_header.startswith("Bearer ") or auth_header.split(" ")[1] != API_KEY:
+        return jsonify({"error": "Unauthorized"}), 401
     
-    return response_data
+    return jsonify(get_performance_metrics())
 
-# Create the HTML template with Tailwind CSS
-with open("templates/index.html", "w") as f:
-    f.write("""
+def create_app_structure():
+    os.makedirs('templates', exist_ok=True)
+    os.makedirs('static', exist_ok=True)
+    
+    index_html_content = r'''
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Content Moderator</title>
+    <title>Smart Moderator API</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = { darkMode: 'class' }
+    </script>
     <style>
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-            100% { transform: translateY(0px); }
-        }
-        @keyframes pulse-border {
-            0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
-            70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
-        }
-        .float-animation {
-            animation: float 3s ease-in-out infinite;
-        }
-        .pulse-border {
-            animation: pulse-border 2s infinite;
-        }
-        .gradient-bg {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
-        .glass-effect {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border-radius: 10px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        .safe-gradient {
-            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
-        }
-        .unsafe-gradient {
-            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-        }
+        .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+        .dark .gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%); }
+        .loading-spinner { border-top-color: #3b82f6; animation: spinner 1.5s linear infinite; }
+        @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
-<body class="min-h-screen gradient-bg text-white">
-    <div class="container mx-auto px-4 py-8">
-        <header class="text-center mb-12">
-            <div class="inline-block p-4 rounded-full glass-effect float-animation mb-6">
-                <i class="fas fa-shield-alt text-5xl text-white"></i>
-            </div>
-            <h1 class="text-4xl md:text-5xl font-bold mb-4">AI Content Moderator</h1>
-            <p class="text-xl text-gray-200 max-w-2xl mx-auto">
-                Advanced, multilingual content classification tool powered by AI
-            </p>
-        </header>
-
-        <main class="max-w-6xl mx-auto">
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
-                <!-- API Key Section -->
-                <div class="lg:col-span-1">
-                    <div class="glass-effect p-6 rounded-xl h-full">
-                        <h2 class="text-2xl font-bold mb-4 flex items-center">
-                            <i class="fas fa-key mr-2"></i> API Configuration
-                        </h2>
-                        <div class="mb-4">
-                            <label class="block text-sm font-medium mb-2">API Key</label>
-                            <div class="relative">
-                                <input type="password" id="apiKey" placeholder="Enter your API key" 
-                                    class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-indigo-400 text-white">
-                                <button id="toggleApiKey" class="absolute right-3 top-3 text-gray-300 hover:text-white">
-                                    <i class="fas fa-eye"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <div class="mb-4">
-                            <label class="block text-sm font-medium mb-2">Model</label>
-                            <select id="modelSelect" class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-indigo-400 text-white">
-                                <option value="gemma-3-270m-it" selected>Gemma 3 270M IT</option>
-                            </select>
-                        </div>
-                        <div class="mt-6">
-                            <h3 class="text-lg font-semibold mb-2">API Endpoints</h3>
-                            <div class="bg-black/20 p-4 rounded-lg text-sm font-mono">
-                                <div class="mb-2">POST /v1/moderations</div>
-                                <div>POST /v1/moderations/batch</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Main Content Section -->
-                <div class="lg:col-span-2">
-                    <div class="glass-effect p-6 rounded-xl">
-                        <h2 class="text-2xl font-bold mb-4 flex items-center">
-                            <i class="fas fa-check-circle mr-2"></i> Content Analysis
-                        </h2>
-                        
-                        <!-- Tabs -->
-                        <div class="flex border-b border-white/20 mb-6">
-                            <button id="singleTab" class="px-4 py-2 font-medium border-b-2 border-indigo-400 text-indigo-300 tab-active">
-                                Single Text
-                            </button>
-                            <button id="batchTab" class="px-4 py-2 font-medium border-b-2 border-transparent text-gray-300 hover:text-white">
-                                Batch Processing
-                            </button>
-                        </div>
-                        
-                        <!-- Single Text Tab -->
-                        <div id="singleContent" class="tab-content">
-                            <div class="mb-6">
-                                <label class="block text-sm font-medium mb-2">Text to Analyze</label>
-                                <textarea id="textInput" rows="6" placeholder="Enter any text in any language for content moderation analysis..."
-                                    class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-indigo-400 text-white resize-none"></textarea>
-                            </div>
-                            
-                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-                                <div>
-                                    <label class="block text-sm font-medium mb-2">Max Tokens</label>
-                                    <input type="range" id="maxTokens" min="1" max="10" value="3" step="1"
-                                        class="w-full accent-indigo-500">
-                                    <div class="text-center mt-1">
-                                        <span id="maxTokensValue" class="text-sm">3</span>
-                                    </div>
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium mb-2">Temperature</label>
-                                    <input type="range" id="temperature" min="0" max="1" value="0.1" step="0.1"
-                                        class="w-full accent-indigo-500">
-                                    <div class="text-center mt-1">
-                                        <span id="temperatureValue" class="text-sm">0.1</span>
-                                    </div>
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium mb-2">Top-p</label>
-                                    <input type="range" id="topP" min="0.1" max="1" value="0.95" step="0.05"
-                                        class="w-full accent-indigo-500">
-                                    <div class="text-center mt-1">
-                                        <span id="topPValue" class="text-sm">0.95</span>
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <div class="flex space-x-4">
-                                <button id="analyzeBtn" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105 pulse-border">
-                                    <i class="fas fa-search mr-2"></i> Analyze Content
-                                </button>
-                                <button id="clearBtn" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
-                                    <i class="fas fa-trash mr-2"></i> Clear
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <!-- Batch Processing Tab -->
-                        <div id="batchContent" class="tab-content hidden">
-                            <div class="mb-6">
-                                <label class="block text-sm font-medium mb-2">Texts to Analyze (one per line)</label>
-                                <textarea id="batchTextInput" rows="8" placeholder="Enter multiple texts, one per line..."
-                                    class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-indigo-400 text-white resize-none"></textarea>
-                            </div>
-                            
-                            <div class="flex space-x-4">
-                                <button id="batchAnalyzeBtn" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105 pulse-border">
-                                    <i class="fas fa-layer-group mr-2"></i> Analyze Batch
-                                </button>
-                                <button id="batchClearBtn" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
-                                    <i class="fas fa-trash mr-2"></i> Clear
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <!-- Results Section -->
-                        <div id="resultsSection" class="mt-8 hidden">
-                            <h3 class="text-xl font-bold mb-4 flex items-center">
-                                <i class="fas fa-chart-bar mr-2"></i> Analysis Results
-                            </h3>
-                            <div id="resultsContainer" class="space-y-4">
-                                <!-- Results will be dynamically inserted here -->
-                            </div>
-                        </div>
-                    </div>
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen font-sans">
+    <header class="gradient-bg text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6 flex justify-between items-center">
+            <div class="flex items-center space-x-3">
+                <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center">
+                    <i class="fas fa-shield-alt text-indigo-600 text-xl"></i>
                 </div>
+                <h1 class="text-2xl font-bold">Smart Moderator</h1>
             </div>
-
-            <!-- Examples Section -->
-            <div class="glass-effect p-6 rounded-xl mb-12">
-                <h2 class="text-2xl font-bold mb-4 flex items-center">
-                    <i class="fas fa-lightbulb mr-2"></i> Example Prompts
-                </h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                    <div class="example-card bg-white/10 p-4 rounded-lg cursor-pointer hover:bg-white/20 transition duration-300">
-                        <p class="text-sm">"Hello, how are you today? I hope you're having a wonderful time!"</p>
-                    </div>
-                    <div class="example-card bg-white/10 p-4 rounded-lg cursor-pointer hover:bg-white/20 transition duration-300">
-                        <p class="text-sm">"I hate you and I will find you and hurt you badly."</p>
-                    </div>
-                    <div class="example-card bg-white/10 p-4 rounded-lg cursor-pointer hover:bg-white/20 transition duration-300">
-                        <p class="text-sm">"C'est une belle journée pour apprendre la programmation et l'intelligence artificielle."</p>
-                    </div>
-                    <div class="example-card bg-white/10 p-4 rounded-lg cursor-pointer hover:bg-white/20 transition duration-300">
-                        <p class="text-sm">"I can't take this anymore. I want to end everything and disappear forever."</p>
-                    </div>
-                    <div class="example-card bg-white/10 p-4 rounded-lg cursor-pointer hover:bg-white/20 transition duration-300">
-                        <p class="text-sm">"¡Hola! Me encanta aprender nuevos idiomas y conocer diferentes culturas."</p>
-                    </div>
-                    <div class="example-card bg-white/10 p-4 rounded-lg cursor-pointer hover:bg-white/20 transition duration-300">
-                        <p class="text-sm">"You're absolutely worthless and nobody will ever love someone like you."</p>
-                    </div>
-                </div>
+            <div>
+                <button id="darkModeToggle" class="bg-white/20 p-2 rounded-lg hover:bg-white/30 transition">
+                    <i class="fas fa-moon dark:hidden"></i>
+                    <i class="fas fa-sun hidden dark:inline"></i>
+                </button>
             </div>
-
-            <!-- Information Section -->
-            <div class="glass-effect p-6 rounded-xl">
-                <h2 class="text-2xl font-bold mb-4 flex items-center">
-                    <i class="fas fa-info-circle mr-2"></i> About This Tool
-                </h2>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                    <div class="text-center">
-                        <div class="inline-block p-3 rounded-full bg-indigo-500/20 mb-3">
-                            <i class="fas fa-globe text-2xl text-indigo-300"></i>
-                        </div>
-                        <h3 class="text-lg font-semibold mb-2">Multilingual</h3>
-                        <p class="text-gray-300">Supports content analysis in multiple languages with high accuracy.</p>
-                    </div>
-                    <div class="text-center">
-                        <div class="inline-block p-3 rounded-full bg-indigo-500/20 mb-3">
-                            <i class="fas fa-bolt text-2xl text-indigo-300"></i>
-                        </div>
-                        <h3 class="text-lg font-semibold mb-2">Fast Processing</h3>
-                        <p class="text-gray-300">Optimized model for quick content analysis with real-time results.</p>
+        </div>
+    </header>
+
+    <main class="container mx-auto px-4 py-8">
+        <section class="mb-12">
+            <h2 class="text-2xl font-bold mb-6 flex items-center"><i class="fas fa-tachometer-alt mr-3 text-indigo-500"></i>Performance Metrics</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"><p class="text-gray-500 dark:text-gray-400 text-sm">Avg. Response</p><p class="text-2xl font-bold" id="avgResponseTime">0ms</p></div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"><p class="text-gray-500 dark:text-gray-400 text-sm">Requests / Minute</p><p class="text-2xl font-bold" id="requestsPerMinute">0</p></div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"><p class="text-gray-500 dark:text-gray-400 text-sm">Peak Response</p><p class="text-2xl font-bold" id="peakResponseTime">0ms</p></div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"><p class="text-gray-500 dark:text-gray-400 text-sm">Today's Requests</p><p class="text-2xl font-bold" id="todayRequests">0</p></div>
+            </div>
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
+                <h3 class="text-lg font-semibold mb-4">Last 7 Days Activity</h3>
+                <div class="h-64"><canvas id="activityChart"></canvas></div>
+            </div>
+        </section>
+
+        <section class="mb-12">
+            <h2 class="text-2xl font-bold mb-6 flex items-center"><i class="fas fa-vial mr-3 text-indigo-500"></i>API Tester</h2>
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
+                <form id="apiTestForm">
+                    <div class="mb-4"><label class="block text-sm font-medium mb-2" for="apiKey">API Key</label><input type="password" id="apiKey" class="w-full px-4 py-2 rounded-lg border bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter your API key"></div>
+                    <div class="mb-4"><label class="block text-sm font-medium mb-2">Input (Text or Image URL)</label><textarea id="apiInput" class="w-full px-4 py-2 rounded-lg border bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="4" placeholder="Enter text to moderate, or a public image URL. For multiple items, separate them with a new line."></textarea></div>
+                    <button type="submit" id="analyzeBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition"><i class="fas fa-search mr-2"></i>Analyze</button>
+                </form>
+            </div>
+        </section>
+
+        <section id="resultsSection" class="hidden">
+            <h2 class="text-2xl font-bold mb-6 flex items-center"><i class="fas fa-clipboard-check mr-3 text-indigo-500"></i>Analysis Results</h2>
+            <div id="resultsContainer" class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"></div>
+        </section>
+        
+        <section>
+            <h2 class="text-2xl font-bold mb-6 flex items-center"><i class="fas fa-book-open mr-3 text-indigo-500"></i>API Documentation</h2>
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
+                <h3 class="text-lg font-semibold mb-2">Endpoint</h3>
+                <code class="block bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-sm mb-4">POST /v1/moderations</code>
+                <h3 class="text-lg font-semibold mb-2">Headers</h3>
+                <code class="block bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-sm mb-4">Authorization: Bearer YOUR_API_KEY<br>Content-Type: application/json</code>
+                <h3 class="text-lg font-semibold mb-2">Request Body</h3>
+                <p class="text-sm mb-2">The `input` field can be a single string/URL or a list of strings/URLs.</p>
+                <code class="block bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-sm mb-4">{"input": "Text to moderate"}</code>
+                <h3 class="text-lg font-semibold mb-2">Usage Example (cURL)</h3>
+                <div class="space-y-4">
+                    <div>
+                        <h4 class="font-semibold text-md mb-1">Text Moderation</h4>
+                        <pre class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto text-sm"><code>curl -X POST https://nixaut-codelabs-smart-moderator.hf.space/v1/moderations \
+-H "Authorization: Bearer YOUR_API_KEY" \
+-H "Content-Type: application/json" \
+-d '{"input": "You are stupid and I hate you."}'</code></pre>
                     </div>
-                    <div class="text-center">
-                        <div class="inline-block p-3 rounded-full bg-indigo-500/20 mb-3">
-                            <i class="fas fa-shield-alt text-2xl text-indigo-300"></i>
-                        </div>
-                        <h3 class="text-lg font-semibold mb-2">Secure</h3>
-                        <p class="text-gray-300">API key authentication ensures your requests remain secure and private.</p>
+                    <div>
+                        <h4 class="font-semibold text-md mb-1">Multimodal Moderation (Text + Image)</h4>
+                        <pre class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto text-sm"><code>curl -X POST https://nixaut-codelabs-smart-moderator.hf.space/v1/moderations \
+-H "Authorization: Bearer YOUR_API_KEY" \
+-H "Content-Type: application/json" \
+-d '{"input": [
+    "This is a perfectly normal sentence.",
+    "https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg"
+]}'</code></pre>
                     </div>
                 </div>
             </div>
-        </main>
-
-        <footer class="mt-12 text-center text-gray-300">
-            <p>© 2023 AI Content Moderator. All rights reserved.</p>
-        </footer>
-    </div>
-
-    <!-- Loading Modal -->
-    <div id="loadingModal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden">
-        <div class="glass-effect p-8 rounded-xl max-w-md w-full mx-4 text-center">
-            <div class="mb-4">
-                <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500"></div>
-            </div>
-            <h3 class="text-xl font-bold mb-2">Analyzing Content</h3>
-            <p class="text-gray-300">Please wait while we process your request...</p>
+        </section>
+    </main>
+    <footer class="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-12">
+        <div class="container mx-auto px-4 py-6 text-center text-gray-600 dark:text-gray-400 text-sm">
+            © 2024 Smart Moderator by Nix-Aut Codelabs | <a href="https://nixaut-codelabs-smart-moderator.hf.space" class="hover:underline">nixaut-codelabs-smart-moderator.hf.space</a>
         </div>
-    </div>
-
+    </footer>
     <script>
-        // DOM Elements
-        const singleTab = document.getElementById('singleTab');
-        const batchTab = document.getElementById('batchTab');
-        const singleContent = document.getElementById('singleContent');
-        const batchContent = document.getElementById('batchContent');
-        const apiKeyInput = document.getElementById('apiKey');
-        const toggleApiKeyBtn = document.getElementById('toggleApiKey');
-        const textInput = document.getElementById('textInput');
-        const batchTextInput = document.getElementById('batchTextInput');
-        const maxTokensSlider = document.getElementById('maxTokens');
-        const maxTokensValue = document.getElementById('maxTokensValue');
-        const temperatureSlider = document.getElementById('temperature');
-        const temperatureValue = document.getElementById('temperatureValue');
-        const topPSlider = document.getElementById('topP');
-        const topPValue = document.getElementById('topPValue');
-        const analyzeBtn = document.getElementById('analyzeBtn');
-        const batchAnalyzeBtn = document.getElementById('batchAnalyzeBtn');
-        const clearBtn = document.getElementById('clearBtn');
-        const batchClearBtn = document.getElementById('batchClearBtn');
-        const resultsSection = document.getElementById('resultsSection');
-        const resultsContainer = document.getElementById('resultsContainer');
-        const loadingModal = document.getElementById('loadingModal');
-        const exampleCards = document.querySelectorAll('.example-card');
-
-        // Tab switching
-        singleTab.addEventListener('click', () => {
-            singleTab.classList.add('border-indigo-400', 'text-indigo-300');
-            singleTab.classList.remove('border-transparent', 'text-gray-300');
-            batchTab.classList.add('border-transparent', 'text-gray-300');
-            batchTab.classList.remove('border-indigo-400', 'text-indigo-300');
-            singleContent.classList.remove('hidden');
-            batchContent.classList.add('hidden');
-        });
-
-        batchTab.addEventListener('click', () => {
-            batchTab.classList.add('border-indigo-400', 'text-indigo-300');
-            batchTab.classList.remove('border-transparent', 'text-gray-300');
-            singleTab.classList.add('border-transparent', 'text-gray-300');
-            singleTab.classList.remove('border-indigo-400', 'text-indigo-300');
-            batchContent.classList.remove('hidden');
-            singleContent.classList.add('hidden');
-        });
-
-        // Toggle API key visibility
-        toggleApiKeyBtn.addEventListener('click', () => {
-            const type = apiKeyInput.getAttribute('type') === 'password' ? 'text' : 'password';
-            apiKeyInput.setAttribute('type', type);
-            toggleApiKeyBtn.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
-        });
-
-        // Slider value updates
-        maxTokensSlider.addEventListener('input', () => {
-            maxTokensValue.textContent = maxTokensSlider.value;
-        });
-
-        temperatureSlider.addEventListener('input', () => {
-            temperatureValue.textContent = temperatureSlider.value;
-        });
-
-        topPSlider.addEventListener('input', () => {
-            topPValue.textContent = topPSlider.value;
-        });
-
-        // Example cards
-        exampleCards.forEach(card => {
-            card.addEventListener('click', () => {
-                textInput.value = card.querySelector('p').textContent;
-            });
-        });
-
-        // Clear buttons
-        clearBtn.addEventListener('click', () => {
-            textInput.value = '';
-            resultsSection.classList.add('hidden');
-        });
-
-        batchClearBtn.addEventListener('click', () => {
-            batchTextInput.value = '';
-            resultsSection.classList.add('hidden');
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        }
+        darkModeToggle.addEventListener('click', () => {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
         });
 
-        // Analyze button
-        analyzeBtn.addEventListener('click', async () => {
-            const text = textInput.value.trim();
-            if (!text) {
-                showNotification('Please enter text to analyze', 'error');
-                return;
-            }
-
-            const apiKey = apiKeyInput.value.trim();
-            if (!apiKey) {
-                showNotification('Please enter your API key', 'error');
-                return;
-            }
-
-            showLoading(true);
-
+        let activityChart;
+        async function fetchMetrics() {
+            const apiKey = document.getElementById('apiKey').value || 'temp-key';
             try {
-                const response = await fetch('/v1/moderations', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${apiKey}`
-                    },
-                    body: JSON.stringify({
-                        input: text,
-                        model: document.getElementById('modelSelect').value
-                    })
-                });
-
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.detail || 'An error occurred');
-                }
-
+                const response = await fetch('/v1/metrics', { headers: { 'Authorization': 'Bearer ' + apiKey } });
+                if (!response.ok) return;
                 const data = await response.json();
-                displayResults([data.results[0]]);
-            } catch (error) {
-                showNotification(`Error: ${error.message}`, 'error');
-            } finally {
-                showLoading(false);
-            }
-        });
+                document.getElementById('avgResponseTime').textContent = data.avg_request_time_ms.toFixed(0) + 'ms';
+                document.getElementById('peakResponseTime').textContent = data.peak_request_time_ms.toFixed(0) + 'ms';
+                document.getElementById('requestsPerMinute').textContent = data.requests_per_minute;
+                document.getElementById('todayRequests').textContent = data.today_requests.toLocaleString();
+
+                if (activityChart) {
+                    const labels = data.last_7_days.map(d => new Date(d.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })).reverse();
+                    const requests = data.last_7_days.map(d => d.requests).reverse();
+                    activityChart.data.labels = labels;
+                    activityChart.data.datasets[0].data = requests;
+                    activityChart.update();
+                }
+            } catch (e) { console.error("Could not fetch metrics", e); }
+        }
 
-        // Batch analyze button
-        batchAnalyzeBtn.addEventListener('click', async () => {
-            const texts = batchTextInput.value.trim().split('\\n').filter(text => text.trim());
-            if (texts.length === 0) {
-                showNotification('Please enter at least one text to analyze', 'error');
-                return;
-            }
+        function initChart() {
+            const ctx = document.getElementById('activityChart').getContext('2d');
+            const isDark = document.documentElement.classList.contains('dark');
+            activityChart = new Chart(ctx, {
+                type: 'bar',
+                data: { labels: [], datasets: [{ label: 'Requests', data: [], backgroundColor: 'rgba(99, 102, 241, 0.6)' }] },
+                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
+            });
+        }
+        
+        document.getElementById('apiTestForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const apiKey = document.getElementById('apiKey').value;
+            if (!apiKey) { alert('Please enter an API key.'); return; }
+            
+            const rawInput = document.getElementById('apiInput').value.trim();
+            if (!rawInput) { alert('Please enter text or a URL to analyze.'); return; }
 
-            const apiKey = apiKeyInput.value.trim();
-            if (!apiKey) {
-                showNotification('Please enter your API key', 'error');
-                return;
-            }
+            const inputs = rawInput.split('\\n').map(item => item.trim()).filter(Boolean);
+            const body = { input: inputs.length === 1 ? inputs[0] : inputs };
 
-            showLoading(true);
+            const analyzeBtn = document.getElementById('analyzeBtn');
+            analyzeBtn.disabled = true;
+            analyzeBtn.innerHTML = '<div class="loading-spinner inline-block w-4 h-4 border-2 border-white rounded-full mr-2"></div>Analyzing...';
 
             try {
-                const response = await fetch('/v1/moderations/batch', {
+                const response = await fetch('/v1/moderations', {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${apiKey}`
-                    },
-                    body: JSON.stringify({
-                        inputs: texts,
-                        model: document.getElementById('modelSelect').value
-                    })
+                    headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + apiKey },
+                    body: JSON.stringify(body)
                 });
-
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.detail || 'An error occurred');
-                }
-
                 const data = await response.json();
-                displayResults(data.results);
+                displayResults(data);
+                fetchMetrics();
             } catch (error) {
-                showNotification(`Error: ${error.message}`, 'error');
+                alert('An error occurred: ' + error.message);
             } finally {
-                showLoading(false);
+                analyzeBtn.disabled = false;
+                analyzeBtn.innerHTML = '<i class="fas fa-search mr-2"></i>Analyze';
             }
         });
 
-        // Display results
-        function displayResults(results) {
+        function displayResults(data) {
+            const resultsContainer = document.getElementById('resultsContainer');
             resultsContainer.innerHTML = '';
             
-            results.forEach((result, index) => {
-                const isFlagged = result.flagged;
-                const cardClass = isFlagged ? 'unsafe-gradient' : 'safe-gradient';
-                const icon = isFlagged ? 'fas fa-exclamation-triangle' : 'fas fa-check-circle';
-                const statusText = isFlagged ? 'UNSAFE' : 'SAFE';
-                const statusDesc = isFlagged ? 
-                    'Content may contain inappropriate or harmful material.' : 
-                    'Content appears to be safe and appropriate.';
-
-                const categories = Object.entries(result.categories)
-                    .filter(([_, value]) => value)
-                    .map(([key, _]) => key.replace('/', ' '))
-                    .join(', ');
-
-                const resultCard = document.createElement('div');
-                resultCard.className = `p-6 rounded-xl text-white ${cardClass} shadow-lg`;
-                resultCard.innerHTML = `
-                    <div class="flex items-start">
-                        <div class="mr-4 mt-1">
-                            <i class="${icon} text-3xl"></i>
-                        </div>
-                        <div class="flex-1">
-                            <div class="flex justify-between items-start mb-2">
-                                <h3 class="text-xl font-bold">${statusText}</h3>
-                                <span class="text-sm bg-black/20 px-2 py-1 rounded">Result ${index + 1}</span>
-                            </div>
-                            <p class="mb-4">${statusDesc}</p>
-                            <div class="bg-black/20 p-4 rounded-lg mb-4">
-                                <p class="text-sm font-mono break-words">${result.text}</p>
-                            </div>
-                            ${isFlagged ? `
-                                <div class="mb-3">
-                                    <h4 class="font-semibold mb-1">Flagged Categories:</h4>
-                                    <p class="text-sm">${categories}</p>
-                                </div>
-                            ` : ''}
-                            <div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
-                                ${Object.entries(result.category_scores).map(([category, score]) => `
-                                    <div class="bg-black/20 p-2 rounded">
-                                        <div class="font-medium">${category.replace('/', ' ')}</div>
-                                        <div class="w-full bg-gray-700 rounded-full h-1.5 mt-1">
-                                            <div class="bg-white h-1.5 rounded-full" style="width: ${score * 100}%"></div>
-                                        </div>
-                                        <div class="text-right mt-1">${(score * 100).toFixed(0)}%</div>
-                                    </div>
-                                `).join('')}
-                            </div>
-                        </div>
-                    </div>
-                `;
-                
-                resultsContainer.appendChild(resultCard);
-            });
-            
-            resultsSection.classList.remove('hidden');
-            resultsSection.scrollIntoView({ behavior: 'smooth' });
-        }
-
-        // Show/hide loading modal
-        function showLoading(show) {
-            if (show) {
-                loadingModal.classList.remove('hidden');
-            } else {
-                loadingModal.classList.add('hidden');
+            if (data.error) {
+                 resultsContainer.innerHTML = `<div class="p-4 text-red-700 bg-red-100 dark:bg-red-900 dark:text-red-200 rounded-lg"><p><strong>Error:</strong> ${data.error.message || JSON.stringify(data.error)}</p></div>`;
+            } else if (data.results) {
+                data.results.forEach((result, index) => {
+                    const resultCard = document.createElement('div');
+                    resultCard.className = 'border-t border-gray-200 dark:border-gray-700 pt-4 mt-4 first:mt-0 first:border-t-0 first:pt-0';
+                    const flaggedBadge = result.flagged 
+                        ? '<span class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800">Flagged</span>'
+                        : '<span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Safe</span>';
+                    
+                    let categoriesHtml = Object.entries(result.category_scores).map(([category, score]) => {
+                        const isFlagged = result.categories[category];
+                        return `<div class="flex justify-between py-1"><span class="${isFlagged ? 'font-bold text-red-500' : ''}">${category.replace("/", " / ")}</span><span class="font-mono text-sm">${score.toFixed(4)}</span></div>`;
+                    }).join('');
+
+                    resultCard.innerHTML = `<div class="flex justify-between items-center mb-2"><h4 class="font-bold">Input ${index + 1}</h4>${flaggedBadge}</div><div>${categoriesHtml}</div>`;
+                    resultsContainer.appendChild(resultCard);
+                });
             }
+            document.getElementById('resultsSection').classList.remove('hidden');
         }
 
-        // Show notification
-        function showNotification(message, type = 'info') {
-            const notification = document.createElement('div');
-            notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 ${
-                type === 'error' ? 'bg-red-500' : 'bg-indigo-500'
-            } text-white`;
-            notification.innerHTML = `
-                <div class="flex items-center">
-                    <i class="fas ${type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'} mr-2"></i>
-                    <span>${message}</span>
-                </div>
-            `;
-            
-            document.body.appendChild(notification);
-            
-            setTimeout(() => {
-                notification.style.opacity = '0';
-                notification.style.transition = 'opacity 0.5s';
-                setTimeout(() => {
-                    document.body.removeChild(notification);
-                }, 500);
-            }, 3000);
-        }
+        document.addEventListener('DOMContentLoaded', () => {
+            initChart();
+            fetchMetrics();
+            setInterval(fetchMetrics, 20000);
+        });
     </script>
 </body>
 </html>
-""")
-
-# Initialize the model
-print("Initializing model...")
-with torch.inference_mode():
-    _ = model.generate(
-        **tokenizer(["Hello"], return_tensors="pt").to(model.device),
-        max_new_tokens=1, do_sample=False, use_cache=True
-    )
-
-print("🚀 Starting AI Content Moderator API...")
-
-if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+'''
+    index_path = os.path.join('templates', 'index.html')
+    if not os.path.exists(index_path):
+        with open(index_path, 'w', encoding='utf-8') as f:
+            f.write(index_html_content)
+
+if __name__ == '__main__':
+    create_app_structure()
+    port = int(os.environ.get('PORT', 7860))
+    # For production, use a proper WSGI server like Gunicorn
+    # gunicorn --bind 0.0.0.0:7860 app:app
+    app.run(host='0.0.0.0', port=port, debug=False)