Update app.py

app.py

@@ -1,153 +1,121 @@
+from flask import Flask, request, jsonify, render_template
 import os
 import uuid
 import time
 import threading
-import io
+import tiktoken
+import requests
+import base64
 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
+import logging
 
-app = Flask(__name__, static_folder='static', template_folder='templates')
-app.logger.setLevel('INFO')
+logging.basicConfig(level=logging.INFO)
 
-API_KEY = os.environ.get('API_KEY')
-if not API_KEY:
-    raise ValueError("API_KEY environment variable not set.")
+app = Flask(__name__, static_folder='static', template_folder='templates')
 
-print("Loading Detoxify model for text moderation...")
+print("Loading Detoxify model... This may take a moment.")
 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)
+API_KEY = os.getenv('API_KEY', 'your-api-key-here')
+
+request_durations = deque(maxlen=100) 
+request_timestamps = deque(maxlen=1000) 
+
 daily_requests = defaultdict(int)
+daily_tokens = defaultdict(int)
 concurrent_requests = 0
 concurrent_requests_lock = threading.Lock()
 
-def is_url(string):
-    return isinstance(string, str) and string.strip().startswith(('http://', 'https://'))
+encoding = tiktoken.get_encoding("cl100k_base")
 
-def classify_image(image_bytes):
-    if not image_model or not image_labels:
-        raise RuntimeError("Image moderation model is not available.")
-    
-    image = Image.open(io.BytesIO(image_bytes)).convert('RGB')
-    image = image.resize((224, 224))
-    
-    image_array = np.asarray(image)
-    normalized_image_array = (image_array.astype(np.float32) / 127.5) - 1
-    
-    data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)
-    data[0] = normalized_image_array
-    
-    prediction = image_model.predict(data)
-    
-    scores = {label.lower(): float(score) for label, score in zip(image_labels, prediction[0])}
-    return scores
+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_text_predictions(prediction_dict):
+def transform_predictions(prediction_dict):
     category_keys = [
-        "toxicity", "severe_toxicity", "obscene", "threat",
+        "toxicity", "severe_toxicity", "obscene", "threat", 
         "insult", "identity_attack", "sexual_explicit"
     ]
-    scores = {key: float(prediction_dict.get(key, 0.0)) for key in category_keys}
+    
+    scores = {}
+    for key in category_keys:
+        scores[key] = float(prediction_dict.get(key, 0.0))
     
     threshold = 0.5
-    categories = {key: (scores[key] > threshold) for key in category_keys}
-    flagged = any(categories.values())
+    bool_categories = {key: (scores[key] > threshold) for key in category_keys}
+    flagged = any(bool_categories.values())
     
-    return flagged, categories, scores
+    return flagged, bool_categories, scores
 
-def transform_image_predictions(prediction_dict):
-    nsfw_score = prediction_dict.get('nsfw', 0.0)
-    
-    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,
-    }
-    
-    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,
-    }
+def track_request_metrics(start_time, tokens_count):
+    end_time = time.time()
+    duration = end_time - start_time
     
-    flagged = any(categories.values())
+    app.logger.info(f"Server-side processing for moderation request took {duration * 1000:.2f} ms.")
     
-    return flagged, categories, category_scores
-    
-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
+    daily_tokens[today] += tokens_count
 
 def get_performance_metrics():
+    global concurrent_requests
     with concurrent_requests_lock:
         current_concurrent = concurrent_requests
     
-    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
-    
+    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)
-    today_requests = daily_requests.get(now.strftime("%Y-%m-%d"), 0)
-
+    
+    today = now.strftime("%Y-%m-%d")
+    today_requests = daily_requests.get(today, 0)
+    today_tokens = daily_tokens.get(today, 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),
+            "tokens": daily_tokens.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,
+        "today_tokens": today_tokens,
         "last_7_days": last_7_days
     }
 
@@ -159,104 +127,654 @@ def home():
 def moderations():
     global concurrent_requests
     
-    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
     
     start_time = time.time()
+    total_tokens = 0
     
+    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
+        
         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
+            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
+        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
 
+        if len(texts) > 10:
+            response = jsonify({"error": "Too many input items. Maximum 10 allowed."}), 400
+            return response
+        
         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}))
+        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,
+            })
         
-        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
+            "model": "text-moderation-detoxify-multilingual",
+            "results": results
         }
         
-        return jsonify(response_data)
-
+        response = jsonify(response_data)
+        return response
+    
     except Exception as e:
         app.logger.error(f"An error occurred: {e}", exc_info=True)
-        return jsonify({"error": "An internal server error occurred."}), 500
+        response = jsonify({"error": "An internal server error occurred."}), 500
+        return response
     finally:
-        track_request_metrics(start_time)
+        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 ") or auth_header.split(" ")[1] != API_KEY:
+    if not auth_header or not auth_header.startswith("Bearer "):
+        return jsonify({"error": "Unauthorized"}), 401
+    
+    provided_api_key = auth_header.split(" ")[1]
+    if provided_api_key != API_KEY:
         return jsonify({"error": "Unauthorized"}), 401
     
     return jsonify(get_performance_metrics())
 
-def create_app_structure():
+# Create the HTML template with Tailwind CSS
+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>AI Content Moderator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <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%);
+        }
+    </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">Smart Moderator</h1>
+            <p class="text-xl text-gray-200 max-w-2xl mx-auto">
+                Advanced, multilingual and multimodal content moderation API
+            </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="text-moderation-detoxify-multilingual" selected>Detoxify Multilingual</option>
+                            </select>
+                        </div>
+                        <div class="mt-6">
+                            <h3 class="text-lg font-semibold mb-2">API Usage</h3>
+                            <div class="bg-black/20 p-4 rounded-lg text-sm font-mono">
+                                <div class="mb-2">POST /v1/moderations</div>
+                                <div class="mb-2">Site: https://nixaut-codelabs-smart-moderator.hf.space</div>
+                                <div class="text-xs text-gray-300">curl -X POST -H "Authorization: Bearer YOUR_API_KEY" -H "Content-Type: application/json" -d '{"input":"text to moderate"}' /v1/moderations</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="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>
+                </div>
+            </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>
+
+            <!-- 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>
+                    <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>
+                </div>
+            </div>
+        </main>
+
+        <footer class="mt-12 text-center text-gray-300">
+            <p>© 2025 Smart 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>
+        </div>
+    </div>
+
+    <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 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');
+        });
+
+        // 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);
+
+            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 data = await response.json();
+                displayResults([data.results[0]]);
+            } catch (error) {
+                showNotification(`Error: ${error.message}`, 'error');
+            } finally {
+                showLoading(false);
+            }
+        });
+
+        // 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;
+            }
+
+            const apiKey = apiKeyInput.value.trim();
+            if (!apiKey) {
+                showNotification('Please enter your API key', 'error');
+                return;
+            }
+
+            showLoading(true);
+
+            try {
+                const response = await fetch('/v1/moderations', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${apiKey}`
+                    },
+                    body: JSON.stringify({
+                        input: texts,
+                        model: document.getElementById('modelSelect').value
+                    })
+                });
+
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.detail || 'An error occurred');
+                }
+
+                const data = await response.json();
+                displayResults(data.results);
+            } catch (error) {
+                showNotification(`Error: ${error.message}`, 'error');
+            } finally {
+                showLoading(false);
+            }
+        });
+
+        // Display results
+        function displayResults(results) {
+            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');
+            }
+        }
+
+        // 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);
+        }
+    </script>
+</body>
+</html>
+""")
+
+def create_directories_and_files():
     os.makedirs('templates', exist_ok=True)
     os.makedirs('static', exist_ok=True)
     
-    index_html_content = r'''
-<!DOCTYPE html>
+    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>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Smart Moderator API</title>
+    <title>Smart 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' }
+        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);
+            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>
@@ -266,12 +784,15 @@ def create_app_structure():
         <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>
+                    <i class="fas fa-shield-alt text-primary-600 text-xl"></i>
                 </div>
                 <h1 class="text-2xl font-bold">Smart Moderator</h1>
             </div>
-            <div>
-                <button id="darkModeToggle" class="bg-white/20 p-2 rounded-lg hover:bg-white/30 transition">
+            <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>
@@ -281,190 +802,395 @@ def create_app_structure():
 
     <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>
+            <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"><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 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>
+                        </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>
+                        <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>
+                    </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 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>
+            <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-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>
+                    <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>
+                        </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>
+                    </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-indigo-500"></i>Analysis Results</h2>
-            <div id="resultsContainer" class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"></div>
+            <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-open mr-3 text-indigo-500"></i>API Documentation</h2>
+            <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-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>
-                        <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>
+                <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 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 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>
+
     <script>
         const darkModeToggle = document.getElementById('darkModeToggle');
+        const html = document.documentElement;
+        
         if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark');
+            html.classList.add('dark');
         }
+        
         darkModeToggle.addEventListener('click', () => {
-            document.documentElement.classList.toggle('dark');
-            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+            html.classList.toggle('dark');
+            localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
         });
 
         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';
+            const apiKey = document.getElementById('apiKey').value || 'temp-key-for-metrics';
             try {
-                const response = await fetch('/v1/metrics', { headers: { 'Authorization': 'Bearer ' + apiKey } });
-                if (!response.ok) return;
-                const data = await response.json();
-                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();
+                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;
                 }
-            } catch (e) { console.error("Could not fetch metrics", e); }
+                const data = await response.json();
+                updateMetricsDisplay(data);
+            } catch (error) {
+                console.error('Error fetching metrics:', error);
+            }
         }
 
-        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 } } }
-            });
+        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();
+            }
         }
         
+        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();
+            }
+        });
+
+        function updateRemoveButtons() {
+            const groups = document.querySelectorAll('.text-input-group');
+            groups.forEach(group => {
+                group.querySelector('.remove-input').classList.toggle('hidden', groups.length <= 1);
+            });
+        }
+
+        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');
+        });
+
         document.getElementById('apiTestForm').addEventListener('submit', async (e) => {
             e.preventDefault();
+            
             const apiKey = document.getElementById('apiKey').value;
-            if (!apiKey) { alert('Please enter an API key.'); return; }
+            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 rawInput = document.getElementById('apiInput').value.trim();
-            if (!rawInput) { alert('Please enter text or a URL to analyze.'); return; }
-
-            const inputs = rawInput.split('\\n').map(item => item.trim()).filter(Boolean);
-            const body = { input: inputs.length === 1 ? inputs[0] : inputs };
-
             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;
-            analyzeBtn.innerHTML = '<div class="loading-spinner inline-block w-4 h-4 border-2 border-white rounded-full mr-2"></div>Analyzing...';
-
+            
+            const startTime = Date.now();
+            
             try {
                 const response = await fetch('/v1/moderations', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + apiKey },
-                    body: JSON.stringify(body)
+                    body: JSON.stringify({ input: texts.length === 1 ? texts[0] : texts })
                 });
+                
+                const responseTime = Date.now() - startTime;
+                
                 const data = await response.json();
-                displayResults(data);
+                if (!response.ok) throw new Error(data.error || 'Failed to analyze text');
+                
+                displayResults(data, responseTime, texts);
                 fetchMetrics();
+                
             } catch (error) {
-                alert('An error occurred: ' + error.message);
+                alert('Error: ' + error.message);
             } finally {
+                analyzeBtn.innerHTML = originalBtnContent;
                 analyzeBtn.disabled = false;
-                analyzeBtn.innerHTML = '<i class="fas fa-search mr-2"></i>Analyze';
             }
         });
 
-        function displayResults(data) {
+        function displayResults(data, responseTime, texts) {
+            const resultsSection = document.getElementById('resultsSection');
             const resultsContainer = document.getElementById('resultsContainer');
+            
+            document.getElementById('responseTime').textContent = responseTime + 'ms';
             resultsContainer.innerHTML = '';
             
-            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');
+            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('');
+                
+                resultCard.innerHTML = `
+                    <div class="flex justify-between items-start mb-3">
+                        <h4 class="text-lg font-semibold">Input ${index + 1}</h4>
+                        ${flaggedBadge}
+                    </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>
+                `;
+                resultsContainer.appendChild(resultCard);
+            });
+            
+            resultsSection.classList.remove('hidden');
+            resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
 
         document.addEventListener('DOMContentLoaded', () => {
-            initChart();
+            initActivityChart();
+            document.getElementById('refreshMetrics').addEventListener('click', fetchMetrics);
             fetchMetrics();
-            setInterval(fetchMetrics, 20000);
+            setInterval(fetchMetrics, 15000);
         });
     </script>
 </body>
 </html>
-'''
-    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)
+    create_directories_and_files()
+    port = int(os.getenv('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=True, use_reloader=False)