app.py

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)