Update app.py

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, request, jsonify, render_template, send_from_directory
+from flask import Flask, request, jsonify, render_template
 import os
 import uuid
 import time
@@ -10,11 +10,18 @@ from detoxify import Detoxify
 
 app = Flask(__name__, static_folder='static', template_folder='templates')
 
+print("Loading Detoxify model... This may take a moment.")
 detoxify_model = Detoxify('multilingual')
+print("Model loaded successfully.")
 
 API_KEY = os.getenv('API_KEY', 'your-api-key-here')
 
-request_times = deque(maxlen=1000)
+# --- Geliştirilmiş Metrik Takip Sistemi ---
+# Son 100 isteğin süresini tutarak daha dinamik bir ortalama elde ederiz
+request_durations = deque(maxlen=100) 
+# Son 10 dakika içindeki isteklerin zaman damgalarını tutarak RPM hesaplarız
+request_timestamps = deque(maxlen=1000) 
+
 daily_requests = defaultdict(int)
 daily_tokens = defaultdict(int)
 concurrent_requests = 0
@@ -33,7 +40,8 @@ def transform_predictions(prediction_dict):
     
     scores = {}
     for key in category_keys:
-        scores[key] = prediction_dict.get(key, 0.0)
+        # Değerleri float'a çevirerek JSON uyumluluğunu garantiliyoruz
+        scores[key] = float(prediction_dict.get(key, 0.0))
     
     threshold = 0.5
     bool_categories = {key: (scores[key] > threshold) for key in category_keys}
@@ -44,7 +52,10 @@ def transform_predictions(prediction_dict):
 
 def track_request_metrics(start_time, tokens_count):
     end_time = time.time()
-    request_times.append(end_time - start_time)
+    duration = end_time - start_time
+    
+    request_durations.append(duration)
+    request_timestamps.append(datetime.now())
     
     today = datetime.now().strftime("%Y-%m-%d")
     daily_requests[today] += 1
@@ -55,19 +66,26 @@ def get_performance_metrics():
     with concurrent_requests_lock:
         current_concurrent = concurrent_requests
     
-    avg_request_time = sum(request_times) / len(request_times) if request_times else 0
-    
-    today = datetime.now().strftime("%Y-%m-%d")
-    
-    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
+    # Ortalama ve Zirve Yanıt Süresi (Son 100 istek üzerinden)
+    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)
+
+    # RPM (Requests Per Minute) - Dakikadaki İstek Sayısı
+    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 = 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 = (datetime.now() - timedelta(days=i)).strftime("%Y-%m-%d")
+        date = (now - timedelta(days=i)).strftime("%Y-%m-%d")
         last_7_days.append({
             "date": date,
             "requests": daily_requests.get(date, 0),
@@ -75,8 +93,9 @@ def get_performance_metrics():
         })
     
     return {
-        "avg_request_time": avg_request_time,
-        "requests_per_second": requests_per_second,
+        "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,
@@ -107,10 +126,10 @@ def moderations():
             return jsonify({"error": "Unauthorized"}), 401
         
         data = request.get_json()
-        raw_input = data.get('input') or data.get('texts')
+        raw_input = data.get('input')
         
         if raw_input is None:
-            return jsonify({"error": "Invalid input, expected 'input' or 'texts' field"}), 400
+            return jsonify({"error": "Invalid input, 'input' field is required"}), 400
         
         if isinstance(raw_input, str):
             texts = [raw_input]
@@ -119,41 +138,44 @@ def moderations():
         else:
             return jsonify({"error": "Invalid input format, expected string or list of strings"}), 400
         
+        if not texts:
+            return jsonify({"error": "Input list cannot be empty"}), 400
+
         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
+            if not isinstance(text, str) or len(text.encode('utf-8')) > 300000:
+                return jsonify({"error": "Each input item must be a string with a maximum of 300k bytes."}), 400
             total_tokens += count_tokens(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)
+        # Detoxify'a tüm listeyi tek seferde vermek performansı artırır
+        predictions = detoxify_model.predict(texts)
+        # Predictions'ı her metin için ayrı bir sözlüğe dönüştür
+        for i in range(len(texts)):
+            single_prediction = {key: value[i] for key, value in predictions.items()}
+            flagged, bool_categories, scores, cat_applied_input_types = transform_predictions(single_prediction)
             
             results.append({
                 "flagged": flagged,
                 "categories": bool_categories,
                 "category_scores": scores,
-                "category_applied_input_types": cat_applied_input_types
             })
         
         track_request_metrics(start_time, total_tokens)
         
         response_data = {
             "id": "modr-" + uuid.uuid4().hex[:24],
-            "model": "unitaryai/detoxify-multilingual",
-            "results": results,
-            "object": "moderation",
-            "usage": {
-                "total_tokens": total_tokens
-            }
+            "model": "text-moderation-detoxify-multilingual",
+            "results": results
         }
         
         return jsonify(response_data)
     
+    except Exception as e:
+        print(f"An error occurred: {e}")
+        return jsonify({"error": "An internal server error occurred."}), 500
     finally:
         with concurrent_requests_lock:
             concurrent_requests -= 1
@@ -176,7 +198,7 @@ def create_directories_and_files():
     
     index_path = os.path.join('templates', 'index.html')
     if not os.path.exists(index_path):
-        with open(index_path, 'w') as f:
+        with open(index_path, 'w', encoding='utf-8') as f:
             f.write('''<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -193,16 +215,8 @@ def create_directories_and_files():
                 extend: {
                     colors: {
                         primary: {
-                            50: '#eff6ff',
-                            100: '#dbeafe',
-                            200: '#bfdbfe',
-                            300: '#93c5fd',
-                            400: '#60a5fa',
-                            500: '#3b82f6',
-                            600: '#2563eb',
-                            700: '#1d4ed8',
-                            800: '#1e40af',
-                            900: '#1e3a8a',
+                            50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa',
+                            500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a',
                         }
                     }
                 }
@@ -210,38 +224,20 @@ def create_directories_and_files():
         }
     </script>
     <style>
-        .gradient-bg {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
-        .dark .gradient-bg {
-            background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%);
-        }
+        .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+        .dark .gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%); }
         .glass-effect {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
+            background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);
             border: 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); }
-        }
+        .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">
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen font-sans">
     <header class="gradient-bg text-white shadow-lg">
         <div class="container mx-auto px-4 py-6 flex justify-between items-center">
             <div class="flex items-center space-x-3">
@@ -270,10 +266,11 @@ def create_directories_and_files():
             </h2>
             
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <!-- METRIC CARD 1: AVG RESPONSE TIME -->
                 <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-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">
@@ -282,38 +279,41 @@ def create_directories_and_files():
                     </div>
                 </div>
                 
+                <!-- METRIC CARD 2: REQUESTS PER MINUTE -->
                 <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>
+                            <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-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 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>
                 
+                <!-- METRIC CARD 3: PEAK RESPONSE TIME -->
                 <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>
+                            <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-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 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>
                 
+                <!-- METRIC CARD 4: TODAY'S REQUESTS -->
                 <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>
+                            <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-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 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>
@@ -327,6 +327,7 @@ def create_directories_and_files():
             </div>
         </section>
 
+        <!-- API Tester 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>
@@ -335,18 +336,9 @@ def create_directories_and_files():
             
             <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 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">
@@ -381,6 +373,7 @@ def create_directories_and_files():
             </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>
@@ -391,8 +384,7 @@ def create_directories_and_files():
                 <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>
+                        <i class="fas fa-clock mr-1"></i> Response time: <span id="responseTime">0ms</span>
                     </div>
                 </div>
                 
@@ -401,67 +393,41 @@ def create_directories_and_files():
             </div>
         </section>
 
+        <!-- API Documentation -->
         <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>
-                
+                <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",
+  "model": "text-moderation-detoxify-multilingual",
   "results": [
     {
       "flagged": true,
       "categories": {
         "toxicity": true,
         "severe_toxicity": false,
-        "obscene": true,
-        "threat": false,
-        "insult": true,
-        "identity_attack": false,
-        "sexual_explicit": false
+        /* ... other categories */
       },
       "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": []
+        /* ... other scores */
       }
     }
-  ],
-  "object": "moderation",
-  "usage": {
-    "total_tokens": 5
-  }
+  ]
 }</code></pre>
                 </div>
             </div>
@@ -469,23 +435,8 @@ def create_directories_and_files():
     </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">
-            <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 class="container mx-auto px-4 py-6 text-center text-gray-600 dark:text-gray-400">
+            © 2025 Text Moderation API. All rights reserved.
         </div>
     </footer>
 
@@ -493,91 +444,55 @@ def create_directories_and_files():
         const darkModeToggle = document.getElementById('darkModeToggle');
         const html = document.documentElement;
         
-        const currentTheme = localStorage.getItem('theme') || 'light';
-        if (currentTheme === 'dark') {
+        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
             html.classList.add('dark');
         }
         
         darkModeToggle.addEventListener('click', () => {
             html.classList.toggle('dark');
-            const theme = html.classList.contains('dark') ? 'dark' : 'light';
-            localStorage.setItem('theme', theme);
+            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.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'
-                        }
-                    ]
-                },
+                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,
+                    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
-                            }
-                        }
-                    }
+                        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;
-            if (!apiKey) {
-                console.error('API key is required');
-                return;
-            }
-
+            const apiKey = document.getElementById('apiKey').value || 'temp-key-for-metrics';
             try {
                 const response = await fetch('/v1/metrics', {
-                    method: 'GET',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': 'Bearer ' + apiKey
-                    }
+                    headers: { 'Authorization': 'Bearer ' + apiKey }
                 });
-
                 if (!response.ok) {
-                    throw new Error('Failed to fetch metrics');
+                    const error = await response.json();
+                    console.error('Failed to fetch metrics:', error.error);
+                    if(response.status === 401) {
+                        // Maybe show a small warning that API key is needed for metrics
+                    }
+                    return;
                 }
-
                 const data = await response.json();
                 updateMetricsDisplay(data);
             } catch (error) {
@@ -586,19 +501,15 @@ def create_directories_and_files():
         }
 
         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();
+            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(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();
+                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;
@@ -606,65 +517,40 @@ def create_directories_and_files():
                 activityChart.update();
             }
         }
-
+        
         document.getElementById('addTextInput').addEventListener('click', () => {
             const container = document.getElementById('textInputsContainer');
-            const inputGroups = container.querySelectorAll('.text-input-group');
-            
-            if (inputGroups.length >= 10) {
+            if (container.children.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);
-            
-            newInputGroup.querySelector('.remove-input').addEventListener('click', function() {
-                newInputGroup.remove();
-                updateRemoveButtons();
-            });
-            
+            const newGroup = container.firstElementChild.cloneNode(true);
+            newGroup.querySelector('textarea').value = '';
+            newGroup.querySelector('.remove-input').classList.remove('hidden');
+            container.appendChild(newGroup);
             updateRemoveButtons();
         });
 
-        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');
-                }
-            });
-        }
-
-        document.addEventListener('click', function(e) {
+        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 = `
-                <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>
-            `;
+            container.innerHTML = container.firstElementChild.outerHTML;
+            container.querySelector('textarea').value = '';
+            updateRemoveButtons();
             document.getElementById('resultsSection').classList.add('hidden');
         });
 
@@ -672,25 +558,11 @@ def create_directories_and_files():
             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; }
             
-            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 texts = Array.from(document.querySelectorAll('#textInputsContainer textarea'))
+                                .map(t => t.value.trim()).filter(Boolean);
+            if (texts.length === 0) { alert('Please enter at least one text to analyze'); return; }
             
             const analyzeBtn = document.getElementById('analyzeBtn');
             const originalBtnContent = analyzeBtn.innerHTML;
@@ -702,29 +574,19 @@ def create_directories_and_files():
             try {
                 const response = await fetch('/v1/moderations', {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': 'Bearer ' + apiKey
-                    },
-                    body: JSON.stringify({
-                        model: model,
-                        input: texts
-                    })
+                    headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + apiKey },
+                    body: JSON.stringify({ input: texts.length === 1 ? texts[0] : 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 responseTime = Date.now() - startTime;
                 
                 const data = await response.json();
+                if (!response.ok) throw new Error(data.error || 'Failed to analyze text');
+                
                 displayResults(data, responseTime, texts);
+                fetchMetrics(); // Update metrics immediately after a successful request
                 
             } catch (error) {
-                console.error('Error analyzing text:', error);
                 alert('Error: ' + error.message);
             } finally {
                 analyzeBtn.innerHTML = originalBtnContent;
@@ -737,8 +599,6 @@ def create_directories_and_files():
             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) => {
@@ -749,54 +609,45 @@ def create_directories_and_files():
                     ? '<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];
+                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';
-                    
-                    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>
+                    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="${categoryClass} mr-2">${isFlagged ? 'Flagged' : 'Safe'}</span>
                                 <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">Text ${index + 1}</h4>
+                        <h4 class="text-lg font-semibold">Input ${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>
+                    <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">Categories</h5>
-                        <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden">
+                        <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' });
+            resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
 
         document.addEventListener('DOMContentLoaded', () => {
             initActivityChart();
-            
             document.getElementById('refreshMetrics').addEventListener('click', fetchMetrics);
-            
             fetchMetrics();
-            
-            setInterval(fetchMetrics, 30000);
+            setInterval(fetchMetrics, 15000); // Refresh metrics every 15 seconds
         });
     </script>
 </body>
@@ -804,6 +655,8 @@ def create_directories_and_files():
 
 if __name__ == '__main__':
     create_directories_and_files()
-    
     port = int(os.getenv('PORT', 7860))
-    app.run(host='0.0.0.0', port=port, debug=True)
+    # debug=True'yu production ortamında False yapın.
+    # Modelin yüklenmesi uzun sürdüğü için `use_reloader=False` eklemek,
+    # geliştirme sırasında her dosya değişikliğinde modeli tekrar yüklemesini engeller.
+    app.run(host='0.0.0.0', port=port, debug=True, use_reloader=False)