Delete index.html

index.html

@@ -1,867 +0,0 @@
-from flask import Flask, request, jsonify, render_template, send_from_directory
-import os
-import uuid
-import time
-import threading
-import tiktoken
-from datetime import datetime, timedelta
-from collections import defaultdict, deque
-from detoxify import Detoxify
-
-app = Flask(__name__, static_folder='static', template_folder='templates')
-
-# Load the detoxify model
-detoxify_model = Detoxify('multilingual')
-
-# API key from environment variable
-API_KEY = os.getenv('API_KEY', 'your-api-key-here')
-
-# Performance metrics tracking
-request_times = deque(maxlen=1000)  # Store last 1000 request times
-daily_requests = defaultdict(int)
-daily_tokens = defaultdict(int)
-concurrent_requests = 0
-concurrent_requests_lock = threading.Lock()
-
-# Token encoding for counting tokens
-encoding = tiktoken.get_encoding("cl100k_base")
-
-def count_tokens(text):
-    """Count tokens in the given text using tiktoken."""
-    return len(encoding.encode(text))
-
-def transform_predictions(prediction_dict):
-    """
-    Transform predictions to OpenAI-style format.
-    Returns: flagged, categories, category_scores, category_applied_input_types
-    """
-    # Define the categories we want to track
-    category_keys = [
-        "toxicity", "severe_toxicity", "obscene", "threat", 
-        "insult", "identity_attack", "sexual_explicit"
-    ]
-    
-    # Map detoxify output to our categories
-    scores = {}
-    for key in category_keys:
-        scores[key] = prediction_dict.get(key, 0.0)
-    
-    # Set threshold for flagging content
-    threshold = 0.5
-    bool_categories = {key: (scores[key] > threshold) for key in category_keys}
-    cat_applied_input_types = {key: (["text"] if scores[key] > 0 else []) for key in category_keys}
-    flagged = any(bool_categories.values())
-    
-    return flagged, bool_categories, scores, cat_applied_input_types
-
-def track_request_metrics(start_time, tokens_count):
-    """Track performance metrics for requests."""
-    end_time = time.time()
-    request_time = end_time - start_time
-    request_times.append(request_time)
-    
-    today = datetime.now().strftime("%Y-%m-%d")
-    daily_requests[today] += 1
-    daily_tokens[today] += tokens_count
-
-def get_performance_metrics():
-    """Get current performance metrics."""
-    global concurrent_requests
-    with concurrent_requests_lock:
-        current_concurrent = concurrent_requests
-    
-    # Calculate average request time
-    avg_request_time = sum(request_times) / len(request_times) if request_times else 0
-    
-    # Get today's date
-    today = datetime.now().strftime("%Y-%m-%d")
-    
-    # Calculate requests per second (based on last 100 requests)
-    recent_requests = list(request_times)[-100:] if len(request_times) >= 100 else list(request_times)
-    requests_per_second = len(recent_requests) / sum(recent_requests) if recent_requests and sum(recent_requests) > 0 else 0
-    
-    # Get daily stats
-    today_requests = daily_requests.get(today, 0)
-    today_tokens = daily_tokens.get(today, 0)
-    
-    # Get last 7 days stats
-    last_7_days = []
-    for i in range(7):
-        date = (datetime.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": avg_request_time,
-        "requests_per_second": requests_per_second,
-        "concurrent_requests": current_concurrent,
-        "today_requests": today_requests,
-        "today_tokens": today_tokens,
-        "last_7_days": last_7_days
-    }
-
-@app.route('/')
-def home():
-    return render_template('index.html')
-
-@app.route('/v1/moderations', methods=['POST'])
-def moderations():
-    global concurrent_requests
-    
-    # Track concurrent requests
-    with concurrent_requests_lock:
-        concurrent_requests += 1
-    
-    start_time = time.time()
-    total_tokens = 0
-    
-    try:
-        # Check authorization
-        auth_header = request.headers.get('Authorization')
-        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
-        
-        # Get input data
-        data = request.get_json()
-        raw_input = data.get('input') or data.get('texts')
-        
-        if raw_input is None:
-            return jsonify({"error": "Invalid input, expected 'input' or 'texts' field"}), 400
-        
-        # Handle both string and list inputs
-        if isinstance(raw_input, str):
-            texts = [raw_input]
-        elif isinstance(raw_input, list):
-            texts = raw_input
-        else:
-            return jsonify({"error": "Invalid input format, expected string or list of strings"}), 400
-        
-        # Validate input size
-        if len(texts) > 10:
-            return jsonify({"error": "Too many input items. Maximum 10 allowed."}), 400
-        
-        for text in texts:
-            if not isinstance(text, str) or len(text) > 100000:
-                return jsonify({"error": "Each input item must be a string with a maximum of 100k characters."}), 400
-            total_tokens += count_tokens(text)
-        
-        # Process each text
-        results = []
-        for text in texts:
-            pred = detoxify_model.predict([text])
-            prediction = {k: v[0] for k, v in pred.items()}
-            flagged, bool_categories, scores, cat_applied_input_types = transform_predictions(prediction)
-            
-            results.append({
-                "flagged": flagged,
-                "categories": bool_categories,
-                "category_scores": scores,
-                "category_applied_input_types": cat_applied_input_types
-            })
-        
-        # Track metrics
-        track_request_metrics(start_time, total_tokens)
-        
-        # Prepare response
-        response_data = {
-            "id": "modr-" + uuid.uuid4().hex[:24],
-            "model": "unitaryai/detoxify-multilingual",
-            "results": results,
-            "object": "moderation",
-            "usage": {
-                "total_tokens": total_tokens
-            }
-        }
-        
-        return jsonify(response_data)
-    
-    finally:
-        # Decrement concurrent requests counter
-        with concurrent_requests_lock:
-            concurrent_requests -= 1
-
-@app.route('/v1/metrics', methods=['GET'])
-def metrics():
-    """Endpoint to get performance metrics."""
-    auth_header = request.headers.get('Authorization')
-    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())
-
-# Create a simple file-based approach for the HTML template
-def create_directories_and_files():
-    """Create necessary directories and files if they don't exist."""
-    os.makedirs('templates', exist_ok=True)
-    os.makedirs('static', exist_ok=True)
-    
-    # Create index.html if it doesn't exist
-    index_path = os.path.join('templates', 'index.html')
-    if not os.path.exists(index_path):
-        with open(index_path, '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>Text Moderation API</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            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>
-</head>
-<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
-    <!-- Header -->
-    <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">Text Moderation API</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">
-        <!-- Performance Metrics Section -->
-        <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 Time</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/Second</p>
-                            <p class="text-2xl font-bold" id="requestsPerSecond">0</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-tachometer-alt 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">Concurrent Requests</p>
-                            <p class="text-2xl font-bold" id="concurrentRequests">0</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-network-wired 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">Today's Tokens</p>
-                            <p class="text-2xl font-bold" id="todayTokens">0</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-key text-primary-600 dark:text-primary-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>
-        </section>
-
-        <!-- API Testing 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="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-                        <div>
-                            <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>
-                            <label class="block text-sm font-medium mb-2" for="model">Model</label>
-                            <select id="model" 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">
-                                <option value="unitaryai/detoxify-multilingual" selected>Detoxify Multilingual</option>
-                            </select>
-                        </div>
-                    </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>
-
-        <!-- Results 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-clock mr-1"></i> Response time: <span id="responseTime">0ms</span> | 
-                        <i class="fas fa-key ml-2 mr-1"></i> Tokens: <span id="tokenCount">0</span>
-                    </div>
-                </div>
-                
-                <div id="resultsContainer" class="space-y-6">
-                    <!-- Results will be dynamically inserted here -->
-                </div>
-            </div>
-        </section>
-
-        <!-- API Documentation 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">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>{
-  "model": "unitaryai/detoxify-multilingual",
-  "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": "unitaryai/detoxify-multilingual",
-  "results": [
-    {
-      "flagged": true,
-      "categories": {
-        "toxicity": true,
-        "severe_toxicity": false,
-        "obscene": true,
-        "threat": false,
-        "insult": true,
-        "identity_attack": false,
-        "sexual_explicit": false
-      },
-      "category_scores": {
-        "toxicity": 0.95,
-        "severe_toxicity": 0.1,
-        "obscene": 0.8,
-        "threat": 0.05,
-        "insult": 0.7,
-        "identity_attack": 0.2,
-        "sexual_explicit": 0.01
-      },
-      "category_applied_input_types": {
-        "toxicity": ["text"],
-        "severe_toxicity": [],
-        "obscene": ["text"],
-        "threat": [],
-        "insult": ["text"],
-        "identity_attack": [],
-        "sexual_explicit": []
-      }
-    }
-  ],
-  "object": "moderation",
-  "usage": {
-    "total_tokens": 5
-  }
-}</code></pre>
-                </div>
-            </div>
-        </section>
-    </main>
-
-    <!-- Footer -->
-    <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">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="mb-4 md:mb-0">
-                    <p class="text-gray-600 dark:text-gray-400">© 2025 Text Moderation API. All rights reserved.</p>
-                </div>
-                <div class="flex space-x-4">
-                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
-                        <i class="fab fa-github"></i>
-                    </a>
-                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
-                        <i class="fab fa-twitter"></i>
-                    </a>
-                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
-                        <i class="fas fa-envelope"></i>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </footer>
-
-    <script>
-        // Dark mode toggle
-        const darkModeToggle = document.getElementById('darkModeToggle');
-        const html = document.documentElement;
-        
-        // Check for saved dark mode preference or default to light mode
-        const currentTheme = localStorage.getItem('theme') || 'light';
-        if (currentTheme === 'dark') {
-            html.classList.add('dark');
-        }
-        
-        darkModeToggle.addEventListener('click', () => {
-            html.classList.toggle('dark');
-            const theme = html.classList.contains('dark') ? 'dark' : 'light';
-            localStorage.setItem('theme', theme);
-        });
-
-        // Chart for activity
-        let activityChart;
-        
-        function initActivityChart() {
-            const ctx = document.getElementById('activityChart').getContext('2d');
-            activityChart = new Chart(ctx, {
-                type: 'bar',
-                data: {
-                    labels: [],
-                    datasets: [
-                        {
-                            label: 'Requests',
-                            data: [],
-                            backgroundColor: 'rgba(59, 130, 246, 0.5)',
-                            borderColor: 'rgba(59, 130, 246, 1)',
-                            borderWidth: 1
-                        },
-                        {
-                            label: 'Tokens',
-                            data: [],
-                            backgroundColor: 'rgba(16, 185, 129, 0.5)',
-                            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'
-                            }
-                        },
-                        y1: {
-                            beginAtZero: true,
-                            position: 'right',
-                            title: {
-                                display: true,
-                                text: 'Tokens'
-                            },
-                            grid: {
-                                drawOnChartArea: false
-                            }
-                        }
-                    }
-                }
-            });
-        }
-
-        // Fetch performance metrics
-        async function fetchMetrics() {
-            const apiKey = document.getElementById('apiKey').value;
-            if (!apiKey) {
-                console.error('API key is required');
-                return;
-            }
-
-            try {
-                const response = await fetch('/v1/metrics', {
-                    method: 'GET',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': 'Bearer ' + apiKey
-                    }
-                });
-
-                if (!response.ok) {
-                    throw new Error('Failed to fetch metrics');
-                }
-
-                const data = await response.json();
-                updateMetricsDisplay(data);
-            } catch (error) {
-                console.error('Error fetching metrics:', error);
-            }
-        }
-
-        // Update metrics display
-        function updateMetricsDisplay(data) {
-            document.getElementById('avgResponseTime').textContent = (data.avg_request_time * 1000).toFixed(2) + 'ms';
-            document.getElementById('requestsPerSecond').textContent = data.requests_per_second.toFixed(2);
-            document.getElementById('concurrentRequests').textContent = data.concurrent_requests;
-            document.getElementById('todayTokens').textContent = data.today_tokens.toLocaleString();
-
-            // Update activity chart
-            if (activityChart) {
-                const labels = data.last_7_days.map(day => {
-                    const date = new Date(day.date);
-                    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-                }).reverse();
-                
-                const requests = data.last_7_days.map(day => day.requests).reverse();
-                const tokens = data.last_7_days.map(day => day.tokens).reverse();
-                
-                activityChart.data.labels = labels;
-                activityChart.data.datasets[0].data = requests;
-                activityChart.data.datasets[1].data = tokens;
-                activityChart.update();
-            }
-        }
-
-        // Add text input
-        document.getElementById('addTextInput').addEventListener('click', () => {
-            const container = document.getElementById('textInputsContainer');
-            const inputGroups = container.querySelectorAll('.text-input-group');
-            
-            if (inputGroups.length >= 10) {
-                alert('Maximum 10 text inputs allowed');
-                return;
-            }
-            
-            const newInputGroup = document.createElement('div');
-            newInputGroup.className = 'text-input-group mb-4';
-            newInputGroup.innerHTML = `
-                <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">
-                    <i class="fas fa-trash-alt mr-1"></i> Remove
-                </button>
-            `;
-            
-            container.appendChild(newInputGroup);
-            
-            // Add event listener to remove button
-            newInputGroup.querySelector('.remove-input').addEventListener('click', function() {
-                newInputGroup.remove();
-                updateRemoveButtons();
-            });
-            
-            updateRemoveButtons();
-        });
-
-        // Update remove buttons visibility
-        function updateRemoveButtons() {
-            const inputGroups = document.querySelectorAll('.text-input-group');
-            inputGroups.forEach((group, index) => {
-                const removeBtn = group.querySelector('.remove-input');
-                if (inputGroups.length > 1) {
-                    removeBtn.classList.remove('hidden');
-                } else {
-                    removeBtn.classList.add('hidden');
-                }
-            });
-        }
-
-        // Remove text input
-        document.addEventListener('click', function(e) {
-            if (e.target.closest('.remove-input')) {
-                e.target.closest('.text-input-group').remove();
-                updateRemoveButtons();
-            }
-        });
-
-        // Clear form
-        document.getElementById('clearBtn').addEventListener('click', () => {
-            document.getElementById('apiTestForm').reset();
-            const container = document.getElementById('textInputsContainer');
-            container.innerHTML = `
-                <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>
-            `;
-            document.getElementById('resultsSection').classList.add('hidden');
-        });
-
-        // Analyze text
-        document.getElementById('apiTestForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            
-            const apiKey = document.getElementById('apiKey').value;
-            const model = document.getElementById('model').value;
-            const textInputs = document.querySelectorAll('#textInputsContainer textarea');
-            
-            if (!apiKey) {
-                alert('Please enter your API key');
-                return;
-            }
-            
-            const texts = [];
-            textInputs.forEach(input => {
-                if (input.value.trim()) {
-                    texts.push(input.value.trim());
-                }
-            });
-            
-            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();
-            
-            try {
-                const response = await fetch('/v1/moderations', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': 'Bearer ' + apiKey
-                    },
-                    body: JSON.stringify({
-                        model: model,
-                        input: texts
-                    })
-                });
-                
-                const endTime = Date.now();
-                const responseTime = endTime - startTime;
-                
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error || 'Failed to analyze text');
-                }
-                
-                const data = await response.json();
-                displayResults(data, responseTime);
-                
-            } catch (error) {
-                console.error('Error analyzing text:', error);
-                alert('Error: ' + error.message);
-            } finally {
-                analyzeBtn.innerHTML = originalBtnContent;
-                analyzeBtn.disabled = false;
-            }
-        });
-
-        // Display results
-        function displayResults(data, responseTime) {
-            const resultsSection = document.getElementById('resultsSection');
-            const resultsContainer = document.getElementById('resultsContainer');
-            
-            document.getElementById('responseTime').textContent = responseTime + 'ms';
-            document.getElementById('tokenCount').textContent = data.usage.total_tokens.toLocaleString();
-            
-            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 = '';
-                for (const [category, isFlagged] of Object.entries(result.categories)) {
-                    const score = result.category_scores[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';
-                    
-                    categoriesHtml += `
-                        <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
-                            <span class="font-medium capitalize">${category.replace('_', ' ')}</span>
-                            <div class="flex items-center">
-                                <span class="${categoryClass} mr-2">${isFlagged ? 'Flagged' : 'Safe'}</span>
-                                <span class="text-sm ${scoreClass} font-mono">${score.toFixed(4)}</span>
-                            </div>
-                        </div>
-                    `;
-                }
-                
-                resultCard.innerHTML = `
-                    <div class="flex justify-between items-start mb-3">
-                        <h4 class="text-lg font-semibold">Text ${index + 1}</h4>
-                        ${flaggedBadge}
-                    </div>
-                    <div class="mb-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg text-sm">
-                        ${texts[index]}
-                    </div>
-                    <div class="category-card">
-                        <h5 class="font-medium mb-2">Categories</h5>
-                        <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden">
-                            ${categoriesHtml}
-                        </div>
-                    </div>
-                `;
-                
-                resultsContainer.appendChild(resultCard);
-            });
-            
-            resultsSection.classList.remove('hidden');
-            resultsSection.scrollIntoView({ behavior: 'smooth' });
-        }
-
-        // Initialize chart on page load
-        document.addEventListener('DOMContentLoaded', () => {
-            initActivityChart();
-            
-            // Set up refresh metrics button
-            document.getElementById('refreshMetrics').addEventListener('click', fetchMetrics);
-            
-            // Initial metrics fetch
-            fetchMetrics();
-            
-            // Auto-refresh metrics every 30 seconds
-            setInterval(fetchMetrics, 30000);
-        });
-    </script>
-</body>
-</html>''')
-
-if __name__ == '__main__':
-    # Create directories and files
-    create_directories_and_files()
-    
-    port = int(os.getenv('PORT', 7860))
-    app.run(host='0.0.0.0', port=port, debug=True)