detoxify

Running

App Files Files Community

Utiric commited on 24 days ago

Commit

557fe34

verified ·

1 Parent(s): 038cbb8

Create index.html

Browse files

Files changed (1) hide show

index.html +648 -0

index.html ADDED Viewed

	@@ -0,0 +1,648 @@

+<!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">
+                        ${data.input ? data.input[index] : 'Text content not available'}
+                    </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>