Update app.py

app.py

@@ -1,703 +1,531 @@
-from flask import Flask, request, jsonify, render_template
 import os
-import uuid
 import time
 import threading
-import tiktoken
-import requests
+import torch
 import base64
-from datetime import datetime, timedelta
-from collections import defaultdict, deque
-from detoxify import Detoxify
+import io
+import requests
+import uuid
+import numpy as np
+from typing import List, Dict, Any, Optional, Union
+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, field_validator
+from dotenv import load_dotenv
+from huggingface_hub import snapshot_download
+from transformers import AutoTokenizer, AutoModelForCausalLM
+from collections import deque
+from PIL import Image
+from tensorflow.keras.models import load_model
+from urllib.request import urlretrieve
+import uvicorn
 import logging
 
 logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
 
-app = Flask(__name__, static_folder='static', template_folder='templates')
+load_dotenv()
 
-print("Loading Detoxify model... This may take a moment.")
-detoxify_model = Detoxify('multilingual')
-print("Detoxify model loaded successfully.")
+os.makedirs("templates", exist_ok=True)
+os.makedirs("static", exist_ok=True)
+os.makedirs("image_model", exist_ok=True)
 
-API_KEY = os.getenv('API_KEY', 'your-api-key-here')
+app = FastAPI(
+    title="Multimodal AI Content Moderation API",
+    description="An advanced, multilingual, and multimodal content moderation API.",
+    version="1.0.0"
+)
 
-request_durations = deque(maxlen=100) 
-request_timestamps = deque(maxlen=1000) 
-
-daily_requests = defaultdict(int)
-daily_tokens = defaultdict(int)
+request_times = deque(maxlen=100)
 concurrent_requests = 0
-concurrent_requests_lock = threading.Lock()
-
-encoding = tiktoken.get_encoding("cl100k_base")
-
-NSFW_MODEL_URL = "https://teachablemachine.withgoogle.com/models/gJOADmf_u/"
-
-def count_tokens(text):
-    return len(encoding.encode(text))
-
-def classify_image_nsfw(image_data):
-    try:
-        response = requests.post(
-            NSFW_MODEL_URL,
-            json={"instances": [{"image_bytes": {"b64": image_data}}]},
-            timeout=10
-        )
-        if response.status_code == 200:
-            predictions = response.json().get('predictions', [{}])[0]
-            nsfw_score = predictions.get('nsfw', 0.0)
-            return nsfw_score > 0.5
-        return False
-    except:
-        return False
-
-def transform_predictions(prediction_dict):
-    category_keys = [
-        "toxicity", "severe_toxicity", "obscene", "threat", 
-        "insult", "identity_attack", "sexual_explicit"
-    ]
-    
-    scores = {}
-    for key in category_keys:
-        scores[key] = float(prediction_dict.get(key, 0.0))
-    
-    threshold = 0.5
-    bool_categories = {key: (scores[key] > threshold) for key in category_keys}
-    flagged = any(bool_categories.values())
-    
-    return flagged, bool_categories, scores
+request_lock = threading.Lock()
 
-def track_request_metrics(start_time, tokens_count):
-    end_time = time.time()
-    duration = end_time - start_time
-    
-    app.logger.info(f"Server-side processing for moderation request took {duration * 1000:.2f} ms.")
-    
-    request_durations.append(duration)
-    request_timestamps.append(datetime.now())
+@app.middleware("http")
+async def track_metrics(request: Request, call_next):
+    global concurrent_requests
+    with request_lock:
+        concurrent_requests += 1
+
+    start_time = time.time()
+    response = await call_next(request)
+    process_time = time.time() - start_time
+    request_times.append(process_time)
     
-    today = datetime.now().strftime("%Y-%m-%d")
-    daily_requests[today] += 1
-    daily_tokens[today] += tokens_count
+    with request_lock:
+        concurrent_requests -= 1
+        
+    return response
 
-def get_performance_metrics():
-    global concurrent_requests
-    with concurrent_requests_lock:
-        current_concurrent = concurrent_requests
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+device = "cuda" if torch.cuda.is_available() else "cpu"
+logger.info(f"Using device: {device}")
+
+def download_file(url, path):
+    if not os.path.exists(path):
+        logger.info(f"Downloading {os.path.basename(path)}...")
+        urlretrieve(url, path)
+
+logger.info("Downloading and loading models...")
+
+MODELS = {}
+
+logger.info("Loading text moderation model: detoxify-multilingual")
+from detoxify import Detoxify
+MODELS['detoxify-multilingual'] = Detoxify('multilingual', device=device)
+logger.info("Detoxify model loaded.")
+
+GEMMA_REPO = "daniel-dona/gemma-3-270m-it"
+LOCAL_GEMMA_DIR = os.path.join(os.getcwd(), "gemma_model")
+os.environ.setdefault("HF_HUB_ENABLE_HF_TRANSFER", "1")
+
+def ensure_local_model(repo_id: str, local_dir: str) -> str:
+    os.makedirs(local_dir, exist_ok=True)
+    snapshot_download(
+        repo_id=repo_id,
+        local_dir=local_dir,
+        local_dir_use_symlinks=False,
+        resume_download=True,
+    )
+    return local_dir
+
+logger.info("Loading text moderation model: gemma-3-270m-it")
+gemma_path = ensure_local_model(GEMMA_REPO, LOCAL_GEMMA_DIR)
+gemma_tokenizer = AutoTokenizer.from_pretrained(gemma_path, local_files_only=True)
+gemma_model = AutoModelForCausalLM.from_pretrained(
+    gemma_path,
+    local_files_only=True,
+    torch_dtype=torch.float32,
+    device_map=device
+)
+gemma_model.eval()
+MODELS['gemma-3-270m-it'] = (gemma_model, gemma_tokenizer)
+logger.info("Gemma model loaded.")
+
+NSFW_MODEL_URL = "https://teachablemachine.withgoogle.com/models/gJOADmf_u/keras_model.h5"
+NSFW_LABELS_URL = "https://teachablemachine.withgoogle.com/models/gJOADmf_u/labels.txt"
+NSFW_MODEL_PATH = "image_model/keras_model.h5"
+NSFW_LABELS_PATH = "image_model/labels.txt"
+
+download_file(NSFW_MODEL_URL, NSFW_MODEL_PATH)
+download_file(NSFW_LABELS_URL, NSFW_LABELS_PATH)
+
+logger.info("Loading image moderation model: nsfw-image-classifier")
+nsfw_model = load_model(NSFW_MODEL_PATH, compile=False)
+with open(NSFW_LABELS_PATH, "r") as f:
+    nsfw_labels = [line.strip().split(' ')[1] for line in f]
+MODELS['nsfw-image-classifier'] = (nsfw_model, nsfw_labels)
+logger.info("NSFW image model loaded.")
+
+class InputItem(BaseModel):
+    text: Optional[str] = None
+    image_url: Optional[str] = None
+    image_base64: Optional[str] = None
+
+    @field_validator('*')
+    @classmethod
+    def check_one_field(cls, v, info):
+        if sum(1 for value in info.data.values() if value is not None) > 1:
+            raise ValueError("Only one of text, image_url, or image_base64 can be provided.")
+        return v
+
+class ModerationRequest(BaseModel):
+    input: Union[str, List[Union[str, InputItem]]] = Field(..., max_length=10)
+    model: str = "auto"
+
+class ModerationResponse(BaseModel):
+    id: str
+    model: str
+    results: List[Dict[str, Any]]
+
+def format_openai_result(flagged: bool, categories: Dict[str, bool], scores: Dict[str, float]):
+    return {
+        "flagged": flagged,
+        "categories": categories,
+        "category_scores": scores
+    }
+
+def classify_text_detoxify(text: str):
+    predictions = MODELS['detoxify-multilingual'].predict(text)
     
-    if not request_durations:
-        avg_request_time = 0
-        peak_request_time = 0
-    else:
-        avg_request_time = sum(request_durations) / len(request_durations)
-        peak_request_time = max(request_durations)
-
-    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)
+    categories = {
+        "hate": predictions['identity_attack'] > 0.5 or predictions['toxicity'] > 0.7,
+        "hate/threatening": predictions['threat'] > 0.5,
+        "harassment": predictions['insult'] > 0.5,
+        "harassment/threatening": predictions['threat'] > 0.5,
+        "self-harm": predictions['severe_toxicity'] > 0.6,
+        "sexual": predictions['sexual_explicit'] > 0.5,
+        "sexual/minors": False,
+        "violence": predictions['toxicity'] > 0.8,
+        "violence/graphic": predictions['severe_toxicity'] > 0.8,
+    }
+    scores = {
+        "hate": float(max(predictions.get('identity_attack', 0), predictions.get('toxicity', 0))),
+        "hate/threatening": float(predictions.get('threat', 0)),
+        "harassment": float(predictions.get('insult', 0)),
+        "harassment/threatening": float(predictions.get('threat', 0)),
+        "self-harm": float(predictions.get('severe_toxicity', 0)),
+        "sexual": float(predictions.get('sexual_explicit', 0)),
+        "sexual/minors": 0.0,
+        "violence": float(predictions.get('toxicity', 0)),
+        "violence/graphic": float(predictions.get('severe_toxicity', 0)),
+    }
+    flagged = any(categories.values())
+    return format_openai_result(flagged, categories, scores)
+
+def process_image(image_data: bytes) -> np.ndarray:
+    image = Image.open(io.BytesIO(image_data)).convert("RGB")
+    image = image.resize((224, 224))
+    image_array = np.asarray(image)
+    normalized_image_array = (image_array.astype(np.float32) / 127.5) - 1
+    return np.expand_dims(normalized_image_array, axis=0)
+
+def classify_image(image_data: bytes):
+    model, labels = MODELS['nsfw-image-classifier']
+    processed_image = process_image(image_data)
+    prediction = model.predict(processed_image, verbose=0)
     
-    today = now.strftime("%Y-%m-%d")
-    today_requests = daily_requests.get(today, 0)
-    today_tokens = daily_tokens.get(today, 0)
+    scores = {label: float(score) for label, score in zip(labels, prediction[0])}
+    is_nsfw = scores.get('nsfw', 0.0) > 0.7
     
-    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),
-            "tokens": daily_tokens.get(date, 0)
-        })
+    categories = {
+        "hate": False, "hate/threatening": False, "harassment": False, "harassment/threatening": False,
+        "self-harm": False, "sexual": is_nsfw, "sexual/minors": is_nsfw, "violence": False, "violence/graphic": is_nsfw,
+    }
     
-    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,
-        "today_tokens": today_tokens,
-        "last_7_days": last_7_days
+    category_scores = {
+        "hate": 0.0, "hate/threatening": 0.0, "harassment": 0.0, "harassment/threatening": 0.0,
+        "self-harm": 0.0, "sexual": scores.get('nsfw', 0.0), "sexual/minors": scores.get('nsfw', 0.0),
+        "violence": 0.0, "violence/graphic": scores.get('nsfw', 0.0),
     }
 
-@app.route('/')
-def home():
-    return render_template('index.html')
+    return format_openai_result(is_nsfw, categories, category_scores)
 
-@app.route('/v1/moderations', methods=['POST'])
-def moderations():
-    global concurrent_requests
-    
-    with concurrent_requests_lock:
-        concurrent_requests += 1
+def get_api_key(request: Request):
+    api_key = request.headers.get("Authorization")
+    if not api_key or not api_key.startswith("Bearer "):
+        raise HTTPException(status_code=401, detail="API key is missing or invalid.")
     
-    start_time = time.time()
-    total_tokens = 0
+    api_key = api_key.split(" ")[1]
+    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 api_key
+
+@app.get("/", response_class=HTMLResponse)
+async def get_home(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+@app.get("/v1/metrics", response_class=JSONResponse)
+async def get_metrics(api_key: str = Depends(get_api_key)):
+    avg_time = sum(request_times) / len(request_times) if request_times else 0
+    return {
+        "concurrent_requests": concurrent_requests,
+        "average_response_time_ms_last_100": avg_time * 1000,
+        "tracked_request_count": len(request_times)
+    }
+
+@app.post("/v1/moderations", response_model=ModerationResponse)
+async def moderate_content(
+    request: ModerationRequest,
+    api_key: str = Depends(get_api_key)
+):
+    inputs = request.input
+    if isinstance(inputs, str):
+        inputs = [inputs]
+
+    if len(inputs) > 10:
+        raise HTTPException(status_code=400, detail="Maximum of 10 items per request is allowed.")
+
+    results = []
     
-    response = None
-    try:
-        auth_header = request.headers.get('Authorization')
-        if not auth_header or not auth_header.startswith("Bearer "):
-            response = jsonify({"error": "Unauthorized"}), 401
-            return response
-        
-        provided_api_key = auth_header.split(" ")[1]
-        if provided_api_key != API_KEY:
-            response = jsonify({"error": "Unauthorized"}), 401
-            return response
+    for item in inputs:
+        result = None
+        if isinstance(item, str):
+            result = classify_text_detoxify(item)
+        elif isinstance(item, InputItem):
+            if item.text:
+                result = classify_text_detoxify(item.text)
+            elif item.image_url:
+                try:
+                    response = requests.get(item.image_url, stream=True, timeout=10)
+                    response.raise_for_status()
+                    image_bytes = response.content
+                    result = classify_image(image_bytes)
+                except requests.RequestException as e:
+                    raise HTTPException(status_code=400, detail=f"Could not fetch image from URL: {e}")
+            elif item.image_base64:
+                try:
+                    image_bytes = base64.b64decode(item.image_base64)
+                    result = classify_image(image_bytes)
+                except Exception as e:
+                    raise HTTPException(status_code=400, detail=f"Invalid base64 image data: {e}")
         
-        data = request.get_json()
-        raw_input = data.get('input')
-        
-        if raw_input is None:
-            response = jsonify({"error": "Invalid input, 'input' field is required"}), 400
-            return response
-        
-        if isinstance(raw_input, str):
-            texts = [raw_input]
-        elif isinstance(raw_input, list):
-            texts = raw_input
+        if result:
+            results.append(result)
         else:
-            response = jsonify({"error": "Invalid input format, expected string or list of strings"}), 400
-            return response
-        
-        if not texts:
-            response = jsonify({"error": "Input list cannot be empty"}), 400
-            return response
+             raise HTTPException(status_code=400, detail="Invalid input item format provided.")
 
-        if len(texts) > 10:
-            response = jsonify({"error": "Too many input items. Maximum 10 allowed."}), 400
-            return response
-        
-        results = []
-        for text in texts:
-            if not isinstance(text, str):
-                if isinstance(text, dict) and 'type' in text and text['type'] == 'image_url':
-                    image_data = text.get('image_url', {}).get('url', '')
-                    if image_data.startswith('data:image'):
-                        image_b64 = image_data.split(',')[1]
-                        is_nsfw = classify_image_nsfw(image_b64)
-                        
-                        results.append({
-                            "flagged": is_nsfw,
-                            "categories": {
-                                "sexual": is_nsfw,
-                                "sexual_explicit": is_nsfw
-                            },
-                            "category_scores": {
-                                "sexual": 0.9 if is_nsfw else 0.1,
-                                "sexual_explicit": 0.9 if is_nsfw else 0.1
-                            }
-                        })
-                        continue
-                response = jsonify({"error": "Each input item must be a string or image object"}), 400
-                return response
-            
-            if len(text.encode('utf-8')) > 300000:
-                response = jsonify({"error": "Each input item must have a maximum of 300k bytes."}), 400
-                return response
-            
-            total_tokens += count_tokens(text)
-            
-            predictions = detoxify_model.predict([text])
-            single_prediction = {key: value[0] for key, value in predictions.items()}
-            flagged, bool_categories, scores = transform_predictions(single_prediction)
-            
-            results.append({
-                "flagged": flagged,
-                "categories": bool_categories,
-                "category_scores": scores,
-            })
-        
-        response_data = {
-            "id": "modr-" + uuid.uuid4().hex[:24],
-            "model": "text-moderation-detoxify-multilingual",
-            "results": results
-        }
-        
-        response = jsonify(response_data)
-        return response
-    
-    except Exception as e:
-        app.logger.error(f"An error occurred: {e}", exc_info=True)
-        response = jsonify({"error": "An internal server error occurred."}), 500
-        return response
-    finally:
-        if response and (response[1] < 400 if isinstance(response, tuple) else response.status_code < 400):
-            track_request_metrics(start_time, total_tokens)
-        
-        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 "):
-        return jsonify({"error": "Unauthorized"}), 401
+    model_name = request.model if request.model != "auto" else "multimodal-moderator"
     
-    provided_api_key = auth_header.split(" ")[1]
-    if provided_api_key != API_KEY:
-        return jsonify({"error": "Unauthorized"}), 401
+    response_data = {
+        "id": f"modr-{uuid.uuid4().hex}",
+        "model": model_name,
+        "results": results,
+    }
     
-    return jsonify(get_performance_metrics())
-
+    return response_data
 
-def create_directories_and_files():
-    os.makedirs('templates', exist_ok=True)
-    os.makedirs('static', exist_ok=True)
-    
-    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('''<!DOCTYPE html>
+with open("templates/index.html", "w") as f:
+    f.write("""
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Smart Moderator</title>
+    <title>Multimodal AI Content Moderator</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',
-            theme: {
-                extend: {
-                    colors: {
-                        primary: {
-                            50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa',
-                            500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
-        .dark .gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%); }
         .glass-effect {
-            background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 10px;
             border: 1px solid rgba(255, 255, 255, 0.2);
         }
-        .dark .glass-effect { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(100, 116, 139, 0.3); }
-        .category-card { transition: all 0.3s ease; }
-        .category-card:hover { transform: translateY(-5px); }
-        .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="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-primary-600 text-xl"></i>
-                </div>
-                <h1 class="text-2xl font-bold">Smart Moderator</h1>
-            </div>
-            <div class="flex items-center space-x-4">
-                <button id="refreshMetrics" class="glass-effect px-4 py-2 rounded-lg hover:bg-white/20 transition">
-                    <i class="fas fa-sync-alt mr-2"></i>Refresh Metrics
-                </button>
-                <button id="darkModeToggle" class="glass-effect p-2 rounded-lg hover:bg-white/20 transition">
-                    <i class="fas fa-moon dark:hidden"></i>
-                    <i class="fas fa-sun hidden dark:inline"></i>
-                </button>
-            </div>
-        </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-chart-line mr-3 text-primary-600"></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">
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <p class="text-gray-500 dark:text-gray-400 text-sm">Avg. Response (last 100)</p>
-                            <p class="text-2xl font-bold" id="avgResponseTime">0ms</p>
-                        </div>
-                        <div class="w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
-                            <i class="fas fa-clock text-primary-600 dark:text-primary-400"></i>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <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="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
-                            <i class="fas fa-tachometer-alt text-green-600 dark:text-green-400"></i>
+<body class="min-h-screen gradient-bg text-white font-sans">
+    <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-10">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">Multimodal AI Content Moderator</h1>
+            <p class="text-xl text-gray-200 max-w-3xl mx-auto">
+                Advanced, multilingual, and multimodal content analysis for text and images.
+            </p>
+        </header>
+
+        <main class="max-w-6xl mx-auto">
+            <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
+                <div class="lg:col-span-2">
+                    <div class="glass-effect p-6 rounded-xl h-full flex flex-col">
+                        <h2 class="text-2xl font-bold mb-4 flex items-center">
+                            <i class="fas fa-cogs mr-3"></i>Configuration & Status
+                        </h2>
+                        <div class="mb-4">
+                            <label class="block text-sm font-medium mb-2">API Key</label>
+                            <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">
                         </div>
-                    </div>
-                </div>
-                
-                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <p class="text-gray-500 dark:text-gray-400 text-sm">Peak Response (last 100)</p>
-                            <p class="text-2xl font-bold" id="peakResponseTime">0ms</p>
-                        </div>
-                        <div class="w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
-                            <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400"></i>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <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 class="mt-4 border-t border-white/20 pt-4">
+                            <h3 class="text-lg font-semibold mb-3">Server Metrics</h3>
+                            <div class="space-y-3 text-sm">
+                                <div class="flex justify-between"><span>Concurrent Requests:</span> <span id="concurrentRequests" class="font-mono">0</span></div>
+                                <div class="flex justify-between"><span>Avg. Response (last 100):</span> <span id="avgResponseTime" class="font-mono">0.00 ms</span></div>
+                            </div>
                         </div>
-                        <div class="w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
-                            <i class="fas fa-list-ol text-yellow-600 dark:text-yellow-400"></i>
+                        <div class="mt-auto pt-4">
+                            <h3 class="text-lg font-semibold mb-2">API Endpoint</h3>
+                            <div class="bg-black/20 p-3 rounded-lg text-xs font-mono">
+                                POST /v1/moderations
+                            </div>
                         </div>
                     </div>
                 </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-code mr-3 text-primary-600"></i>
-                API Tester
-            </h2>
-            
-            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
-                <form id="apiTestForm">
-                    <div class="mb-6">
-                        <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 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="Enter your API key">
-                    </div>
-                    
-                    <div class="mb-6">
-                        <label class="block text-sm font-medium mb-2">Text Inputs</label>
-                        <div id="textInputsContainer">
-                            <div class="text-input-group mb-4">
-                                <textarea class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500" rows="3" placeholder="Enter text to moderate..."></textarea>
-                                <button type="button" class="remove-input mt-2 text-red-500 hover:text-red-700 hidden">
-                                    <i class="fas fa-trash-alt mr-1"></i> Remove
-                                </button>
+
+                <div class="lg:col-span-3">
+                    <div class="glass-effect p-6 rounded-xl">
+                        <h2 class="text-2xl font-bold mb-4 flex items-center">
+                            <i class="fas fa-vial mr-3"></i>Live Tester
+                        </h2>
+                        
+                        <div id="input-container" class="space-y-3 mb-4">
+                            <div class="input-item">
+                                <textarea name="text" rows="2" placeholder="Enter text to analyze..." class="w-full p-2 rounded bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-indigo-400"></textarea>
                             </div>
                         </div>
-                        <button type="button" id="addTextInput" class="mt-2 text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300">
-                            <i class="fas fa-plus-circle mr-1"></i> Add another text input
-                        </button>
-                    </div>
-                    
-                    <div class="flex justify-between items-center">
-                        <div>
-                            <button type="submit" id="analyzeBtn" class="bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-6 rounded-lg transition">
-                                <i class="fas fa-search mr-2"></i> Analyze Text
-                            </button>
-                            <button type="button" id="clearBtn" class="ml-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium py-2 px-6 rounded-lg transition">
-                                <i class="fas fa-eraser mr-2"></i> Clear
-                            </button>
-                        </div>
-                        <div class="text-sm text-gray-500 dark:text-gray-400">
-                            <i class="fas fa-info-circle mr-1"></i> Maximum 10 text inputs allowed
+                        
+                        <div class="flex space-x-2 mb-6">
+                            <button id="add-text" class="text-sm bg-white/10 hover:bg-white/20 py-1 px-3 rounded"><i class="fas fa-plus mr-1"></i> Text</button>
+                            <button id="add-image-url" class="text-sm bg-white/10 hover:bg-white/20 py-1 px-3 rounded"><i class="fas fa-link mr-1"></i> Image URL</button>
+                            <button id="add-image-file" class="text-sm bg-white/10 hover:bg-white/20 py-1 px-3 rounded"><i class="fas fa-upload mr-1"></i> Image File</button>
                         </div>
+                        
+                        <input type="file" id="image-file-input" class="hidden" accept="image/*">
+
+                        <button id="analyzeBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
+                            <i class="fas fa-search mr-2"></i> Analyze Content
+                        </button>
                     </div>
-                </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-primary-600"></i>
-                Analysis Results
-            </h2>
-            
-            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-lg font-semibold">Summary</h3>
-                    <div class="text-sm text-gray-500 dark:text-gray-400">
-                        <i class="fas fa-stopwatch mr-1"></i> Round-trip time: <span id="responseTime">0ms</span>
-                    </div>
-                </div>
-                
-                <div id="resultsContainer" class="space-y-6">
                 </div>
             </div>
-        </section>
-
-        <section>
-            <h2 class="text-2xl font-bold mb-6 flex items-center">
-                <i class="fas fa-book mr-3 text-primary-600"></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-4">Endpoint</h3>
-                <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-6 font-mono text-sm">POST /v1/moderations</div>
-                <h3 class="text-lg font-semibold mb-4">Site URL</h3>
-                <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-6 font-mono text-sm">https://nixaut-codelabs-smart-moderator.hf.space</div>
-                <h3 class="text-lg font-semibold mb-4">Request Body</h3>
-                <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-6 overflow-x-auto">
-                    <pre class="text-sm"><code>{
-  "input": "Text to moderate" 
-}</code></pre>
-                </div>
-                <h3 class="text-lg font-semibold mb-4">Response</h3>
-                <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto">
-                    <pre class="text-sm"><code>{
-  "id": "modr-1234567890abcdef",
-  "model": "text-moderation-detoxify-multilingual",
-  "results": [
-    {
-      "flagged": true,
-      "categories": {
-        "toxicity": true,
-        "severe_toxicity": false,
-        /* ... other categories */
-      },
-      "category_scores": {
-        "toxicity": 0.95,
-        "severe_toxicity": 0.1,
-        /* ... other scores */
-      }
-    }
-  ]
-}</code></pre>
-                </div>
-            </div>
-        </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">
-            2025 Smart Moderator. All rights reserved.
-        </div>
-    </footer>
+            <div id="resultsSection" class="mt-8 hidden">
+                <h3 class="text-xl font-bold mb-4">Analysis Results</h3>
+                <div id="resultsContainer" class="space-y-4"></div>
+            </div>
+        </main>
+    </div>
 
     <script>
-        const darkModeToggle = document.getElementById('darkModeToggle');
-        const html = document.documentElement;
+        const apiKeyInput = document.getElementById('apiKey');
+        const inputContainer = document.getElementById('input-container');
+        const analyzeBtn = document.getElementById('analyzeBtn');
+        const resultsSection = document.getElementById('resultsSection');
+        const resultsContainer = document.getElementById('resultsContainer');
+        const concurrentRequestsEl = document.getElementById('concurrentRequests');
+        const avgResponseTimeEl = document.getElementById('avgResponseTime');
+        const imageFileInput = document.getElementById('image-file-input');
+
+        document.getElementById('add-text').addEventListener('click', () => addInput('text'));
+        document.getElementById('add-image-url').addEventListener('click', () => addInput('image_url'));
+        document.getElementById('add-image-file').addEventListener('click', () => imageFileInput.click());
         
-        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            html.classList.add('dark');
-        }
-        
-        darkModeToggle.addEventListener('click', () => {
-            html.classList.toggle('dark');
-            localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
+        imageFileInput.addEventListener('change', (event) => {
+            if (event.target.files && event.target.files[0]) {
+                const file = event.target.files[0];
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    addInput('image_base64', e.target.result);
+                };
+                reader.readAsDataURL(file);
+            }
         });
 
-        let activityChart;
-        
-        function initActivityChart() {
-            if (activityChart) { activityChart.destroy(); }
-            const ctx = document.getElementById('activityChart').getContext('2d');
-            const isDarkMode = document.documentElement.classList.contains('dark');
-            const gridColor = isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-            const textColor = isDarkMode ? '#e5e7eb' : '#374151';
-
-            activityChart = new Chart(ctx, {
-                type: 'bar',
-                data: { labels: [], datasets: [
-                    { label: 'Requests', data: [], backgroundColor: 'rgba(59, 130, 246, 0.6)', borderColor: 'rgba(59, 130, 246, 1)', borderWidth: 1 },
-                    { label: 'Tokens', data: [], backgroundColor: 'rgba(16, 185, 129, 0.6)', borderColor: 'rgba(16, 185, 129, 1)', borderWidth: 1, yAxisID: 'y1' }
-                ]},
-                options: {
-                    responsive: true, maintainAspectRatio: false,
-                    scales: {
-                        y: { beginAtZero: true, position: 'left', title: { display: true, text: 'Requests', color: textColor }, ticks: { color: textColor }, grid: { color: gridColor } },
-                        y1: { beginAtZero: true, position: 'right', title: { display: true, text: 'Tokens', color: textColor }, ticks: { color: textColor }, grid: { drawOnChartArea: false } }
-                    },
-                    plugins: { legend: { labels: { color: textColor } } }
-                }
-            });
-        }
-
-        async function fetchMetrics() {
-            const apiKey = document.getElementById('apiKey').value || 'temp-key-for-metrics';
-            try {
-                const response = await fetch('/v1/metrics', {
-                    headers: { 'Authorization': 'Bearer ' + apiKey }
-                });
-                if (!response.ok) {
-                    const error = await response.json();
-                    console.error('Failed to fetch metrics:', error.error);
-                    if(response.status === 401) {
-                    }
-                    return;
-                }
-                const data = await response.json();
-                updateMetricsDisplay(data);
-            } catch (error) {
-                console.error('Error fetching metrics:', error);
+        function addInput(type, value = '') {
+            if (inputContainer.children.length >= 10) {
+                alert('Maximum of 10 items per request.');
+                return;
             }
-        }
-
-        function updateMetricsDisplay(data) {
-            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();
-                const tokens = data.last_7_days.map(d => d.tokens).reverse();
-                
-                activityChart.data.labels = labels;
-                activityChart.data.datasets[0].data = requests;
-                activityChart.data.datasets[1].data = tokens;
-                activityChart.update();
+            const itemDiv = document.createElement('div');
+            itemDiv.className = 'input-item relative';
+            let inputHtml = '';
+            if (type === 'text') {
+                inputHtml = `<textarea name="text" rows="2" placeholder="Enter text..." class="w-full p-2 rounded bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-indigo-400">${value}</textarea>`;
+            } else if (type === 'image_url') {
+                inputHtml = `<input type="text" name="image_url" placeholder="Enter image URL..." value="${value}" class="w-full p-2 rounded bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-indigo-400">`;
+            } else if (type === 'image_base64') {
+                inputHtml = `
+                    <div class="flex items-center space-x-2 p-2 rounded bg-white/10 border border-white/20">
+                        <img src="${value}" class="h-10 w-10 object-cover rounded">
+                        <span class="text-sm truncate">Image File Uploaded</span>
+                        <input type="hidden" name="image_base64" value="${value.split(',')[1]}">
+                    </div>
+                `;
             }
+            const removeBtn = `<button class="absolute -top-1 -right-1 text-red-400 hover:text-red-200 bg-gray-800 rounded-full h-5 w-5 flex items-center justify-center text-xs" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>`;
+            itemDiv.innerHTML = inputHtml + removeBtn;
+            inputContainer.appendChild(itemDiv);
         }
-        
-        document.getElementById('addTextInput').addEventListener('click', () => {
-            const container = document.getElementById('textInputsContainer');
-            if (container.children.length >= 10) {
-                alert('Maximum 10 text inputs allowed');
-                return;
-            }
-            const newGroup = container.firstElementChild.cloneNode(true);
-            newGroup.querySelector('textarea').value = '';
-            newGroup.querySelector('.remove-input').classList.remove('hidden');
-            container.appendChild(newGroup);
-            updateRemoveButtons();
-        });
 
-        document.getElementById('textInputsContainer').addEventListener('click', function(e) {
-            if (e.target.closest('.remove-input')) {
-                e.target.closest('.text-input-group').remove();
-                updateRemoveButtons();
+        analyzeBtn.addEventListener('click', async () => {
+            const apiKey = apiKeyInput.value.trim();
+            if (!apiKey) {
+                alert('Please enter your API key.');
+                return;
             }
-        });
 
-        function updateRemoveButtons() {
-            const groups = document.querySelectorAll('.text-input-group');
-            groups.forEach(group => {
-                group.querySelector('.remove-input').classList.toggle('hidden', groups.length <= 1);
+            const inputs = [];
+            document.querySelectorAll('.input-item').forEach(item => {
+                const text = item.querySelector('textarea[name="text"]');
+                const imageUrl = item.querySelector('input[name="image_url"]');
+                const imageBase64 = item.querySelector('input[name="image_base64"]');
+                if (text && text.value.trim()) inputs.push({ text: text.value.trim() });
+                if (imageUrl && imageUrl.value.trim()) inputs.push({ image_url: imageUrl.value.trim() });
+                if (imageBase64 && imageBase64.value) inputs.push({ image_base64: imageBase64.value });
             });
-        }
 
-        document.getElementById('clearBtn').addEventListener('click', () => {
-            document.getElementById('apiTestForm').reset();
-            const container = document.getElementById('textInputsContainer');
-            container.innerHTML = container.firstElementChild.outerHTML;
-            container.querySelector('textarea').value = '';
-            updateRemoveButtons();
-            document.getElementById('resultsSection').classList.add('hidden');
-        });
+            if (inputs.length === 0) {
+                alert('Please add at least one item to analyze.');
+                return;
+            }
 
-        document.getElementById('apiTestForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            
-            const apiKey = document.getElementById('apiKey').value;
-            if (!apiKey) { alert('Please enter your API key'); return; }
-            
-            const texts = Array.from(document.querySelectorAll('#textInputsContainer textarea'))
-                                .map(t => t.value.trim()).filter(Boolean);
-            if (texts.length === 0) { alert('Please enter at least one text to analyze'); return; }
-            
-            const analyzeBtn = document.getElementById('analyzeBtn');
-            const originalBtnContent = analyzeBtn.innerHTML;
-            analyzeBtn.innerHTML = '<div class="loading-spinner inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"></div> Analyzing...';
             analyzeBtn.disabled = true;
-            
-            const startTime = Date.now();
-            
+            analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing...';
+
             try {
                 const response = await fetch('/v1/moderations', {
                     method: 'POST',
-                    headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + apiKey },
-                    body: JSON.stringify({ input: texts.length === 1 ? texts[0] : texts })
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${apiKey}`
+                    },
+                    body: JSON.stringify({ input: inputs })
                 });
-                
-                const responseTime = Date.now() - startTime;
-                
+
                 const data = await response.json();
-                if (!response.ok) throw new Error(data.error || 'Failed to analyze text');
-                
-                displayResults(data, responseTime, texts);
-                fetchMetrics();
-                
+                if (!response.ok) {
+                    throw new Error(data.detail || 'An error occurred.');
+                }
+                displayResults(data.results);
             } catch (error) {
-                alert('Error: ' + error.message);
+                alert(`Error: ${error.message}`);
+                resultsSection.classList.add('hidden');
             } finally {
-                analyzeBtn.innerHTML = originalBtnContent;
                 analyzeBtn.disabled = false;
+                analyzeBtn.innerHTML = '<i class="fas fa-search mr-2"></i> Analyze Content';
             }
         });
 
-        function displayResults(data, responseTime, texts) {
-            const resultsSection = document.getElementById('resultsSection');
-            const resultsContainer = document.getElementById('resultsContainer');
-            
-            document.getElementById('responseTime').textContent = responseTime + 'ms';
+        function displayResults(results) {
             resultsContainer.innerHTML = '';
-            
-            data.results.forEach((result, index) => {
-                const resultCard = document.createElement('div');
-                resultCard.className = 'border border-gray-200 dark:border-gray-700 rounded-lg p-4';
-                
-                const flaggedBadge = result.flagged 
-                    ? '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100"><i class="fas fa-exclamation-triangle mr-1"></i> Flagged</span>'
-                    : '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100"><i class="fas fa-check-circle mr-1"></i> Safe</span>';
-                
-                let categoriesHtml = Object.entries(result.category_scores).map(([category, score]) => {
-                    const isFlagged = result.categories[category];
-                    const categoryClass = isFlagged ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400';
-                    const scoreClass = score > 0.7 ? 'text-red-600 dark:text-red-400' : score > 0.4 ? 'text-yellow-600 dark:text-yellow-400' : 'text-green-600 dark:text-green-400';
-                    return `
-                        <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700 last:border-b-0">
-                            <span class="font-medium capitalize">${category.replace(/_/g, ' ')}</span>
-                            <div class="flex items-center">
-                                <span class="text-sm ${scoreClass} font-mono">${score.toFixed(4)}</span>
-                            </div>
-                        </div>
-                    `;
-                }).join('');
+            results.forEach((result, index) => {
+                const flagged = result.flagged;
+                const card = document.createElement('div');
+                card.className = `glass-effect p-4 rounded-lg border-l-4 ${flagged ? 'border-red-400' : 'border-green-400'}`;
                 
-                resultCard.innerHTML = `
-                    <div class="flex justify-between items-start mb-3">
-                        <h4 class="text-lg font-semibold">Input ${index + 1}</h4>
-                        ${flaggedBadge}
+                let flaggedCategories = Object.entries(result.categories)
+                    .filter(([_, value]) => value === true)
+                    .map(([key]) => key)
+                    .join(', ');
+
+                let scoresHtml = Object.entries(result.category_scores).map(([key, score]) => `
+                    <div class="flex justify-between text-xs my-1">
+                        <span>${key.replace(/_/g, ' ')}</span>
+                        <span class="font-mono">${(score * 100).toFixed(2)}%</span>
                     </div>
-                    <blockquote class="mb-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg text-sm border-l-4 border-gray-300 dark:border-gray-500">${texts[index]}</blockquote>
-                    <div class="category-card">
-                        <h5 class="font-medium mb-2">Category Scores</h5>
-                        <div class="bg-white dark:bg-gray-800/50 rounded-lg p-2">
-                            ${categoriesHtml}
-                        </div>
+                    <div class="w-full bg-white/10 rounded-full h-1.5">
+                        <div class="h-1.5 rounded-full ${score > 0.5 ? 'bg-red-400' : 'bg-green-400'}" style="width: ${score * 100}%"></div>
+                    </div>
+                `).join('');
+
+                card.innerHTML = `
+                    <div class="flex justify-between items-center mb-2">
+                        <h4 class="font-bold">Item ${index + 1} - ${flagged ? 'FLAGGED' : 'SAFE'}</h4>
+                        ${flagged ? `<span class="text-xs text-red-300">${flaggedCategories}</span>` : ''}
                     </div>
+                    <div>${scoresHtml}</div>
                 `;
-                resultsContainer.appendChild(resultCard);
+                resultsContainer.appendChild(card);
             });
-            
             resultsSection.classList.remove('hidden');
-            resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
 
-        document.addEventListener('DOMContentLoaded', () => {
-            initActivityChart();
-            document.getElementById('refreshMetrics').addEventListener('click', fetchMetrics);
-            fetchMetrics();
-            setInterval(fetchMetrics, 15000);
-        });
+        async function fetchMetrics() {
+            const apiKey = apiKeyInput.value.trim();
+            if (!apiKey) return;
+            try {
+                const response = await fetch('/v1/metrics', {
+                    headers: { 'Authorization': `Bearer ${apiKey}` }
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    concurrentRequestsEl.textContent = data.concurrent_requests;
+                    avgResponseTimeEl.textContent = `${data.average_response_time_ms_last_100.toFixed(2)} ms`;
+                }
+            } catch (error) {
+                console.error("Failed to fetch metrics");
+            }
+        }
+        setInterval(fetchMetrics, 3000);
     </script>
 </body>
 </html>
-''')
+""")
 
-if __name__ == '__main__':
-    create_directories_and_files()
-    port = int(os.getenv('PORT', 7860))
-    app.run(host='0.0.0.0', port=port, debug=True, use_reloader=False)
+if __name__ == "__main__":
+    logger.info("Starting AI Content Moderator API...")
+    uvicorn.run(app, host="0.0.0.0", port=int(os.getenv("PORT", 7860)))