Spaces:

basheer1414
/

test

Running

File size: 24,364 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ANA AI - Multi-Model Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@300;400;500;600;700&display=swap');

        :root {
            --primary: #0f172a;
            --secondary: #1e293b;
            --accent: #4f46e5;
            --success: #10b981;
            --warning: #f59e0b;
            --error: #ef4444;
        }

        * { font-family: 'Inter', sans-serif; }

        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
            background-attachment: fixed;
        }

        h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }

        .glass-morphism {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .glow-card {
            background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: transform 0.4s, box-shadow 0.4s;
        }
        .glow-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 0 20px var(--accent), 0 0 40px var(--primary);
        }

        .metric-card {
            position: relative;
            overflow: hidden;
            border-radius: 1rem;
            background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .metric-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: rotate 4s linear infinite;
            z-index: 0;
        }
        .metric-card > * { position: relative; z-index: 1; }

        @keyframes rotate {
            100% { transform: rotate(360deg); }
        }

        .model-card {
            transition: all 0.3s ease;
            background: linear-gradient(145deg, #f8fafc, #e2e8f0);
            box-shadow: 20px 20px 60px #d1d5db, -20px -20px 60px #ffffff;
        }

        .model-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .status-indicator {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .sidebar {
            transition: all 0.3s ease;
        }

        .sidebar-collapsed {
            transform: translateX(-100%);
        }

        .chat-bubble {
            max-width: 70%;
            word-wrap: break-word;
        }

        .typing-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #6b7280;
            animation: typing 1.4s infinite ease-in-out;
        }

        .typing-indicator:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-indicator:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-10px); }
        }

        .metric-card {
            position: relative;
            overflow: hidden;
        }

        .metric-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.5s;
        }

        .metric-card:hover::before {
            left: 100%;
        }

        .glow-effect {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
        }

        .circular-progress {
            transform: rotate(-90deg);
        }

        .circular-progress circle {
            stroke-dasharray: 283;
            stroke-dashoffset: 283;
            transition: stroke-dashoffset 0.5s ease-in-out;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-white shadow-lg border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <button id="sidebar-toggle" class="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100">
                        <i data-feather="menu" class="h-6 w-6"></i>
                    </button>
                    <h1 class="ml-4 text-2xl font-bold text-gray-900">ANA AI Dashboard</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <button class="relative p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full">
                        <i data-feather="bell" class="h-5 w-5"></i>
                        <span class="absolute top-0 right-0 h-2 w-2 bg-red-500 rounded-full"></span>
                    </button>
                    <div class="flex items-center space-x-2">
                        <img class="h-8 w-8 rounded-full" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%233b82f6'/%3E%3Ctext x='50' y='50' text-anchor='middle' dy='0.35em' fill='white' font-size='40' font-family='Arial'%3EA%3C/text%3E%3C/svg%3E" alt="User">
                        <span class="text-sm font-medium">Admin</span>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <div class="flex h-screen bg-gray-50">
        <!-- Sidebar -->
        <aside id="sidebar" class="sidebar w-64 bg-white shadow-lg flex-shrink-0">
            <nav class="mt-5 px-2">
                <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-white bg-blue-600">
                    <i data-feather="home" class="mr-3 h-5 w-5"></i>
                    Dashboard
                </a>
                <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50">
                    <i data-feather="cpu" class="mr-3 h-5 w-5"></i>
                    Models
                </a>
                <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50">
                    <i data-feather="bar-chart-2" class="mr-3 h-5 w-5"></i>
                    Analytics
                </a>
                <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50">
                    <i data-feather="settings" class="mr-3 h-5 w-5"></i>
                    Settings
                </a>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 overflow-y-auto">
            <div class="py-6">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <!-- Header -->
                    <div class="mb-8">
                        <h2 class="text-3xl font-bold text-gray-900">Welcome back to ANA AI</h2>
                        <p class="mt-2 text-gray-600">Manage your multi-model AI assistant</p>
                    </div>

                    <!-- Stats Overview -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                        <div class="metric-card p-6 text-white">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium opacity-80">Total Models</p>
                                    <p class="text-3xl font-bold">8</p>
                                </div>
                                <div class="p-3 bg-white/20 rounded-full">
                                    <i data-feather="cpu" class="h-6 w-6"></i>
                                </div>
                            </div>
                        </div>
                        <div class="metric-card p-6 text-white">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium opacity-80">Active Sessions</p>
                                    <p class="text-3xl font-bold">24</p>
                                </div>
                                <div class="p-3 bg-white/20 rounded-full">
                                    <i data-feather="activity" class="h-6 w-6"></i>
                                </div>
                            </div>
                        </div>
                        <div class="metric-card p-6 text-white">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium opacity-80">API Calls</p>
                                    <p class="text-3xl font-bold">12.4k</p>
                                </div>
                                <div class="p-3 bg-white/20 rounded-full">
                                    <i data-feather="trending-up" class="h-6 w-6"></i>
                                </div>
                            </div>
                        </div>
                        <div class="metric-card p-6 text-white">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium opacity-80">Uptime</p>
                                    <p class="text-3xl font-bold">99.9%</p>
                                </div>
                                <div class="p-3 bg-white/20 rounded-full">
                                    <i data-feather="clock" class="h-6 w-6"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Models Grid -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                        <!-- Model Performance (removed) -->
                        <!-- Model Distribution (removed) -->
                    </div>

                    <!-- Active Models -->
                    <div class="bg-white p-6 rounded-lg shadow-md mb-8">
                        <h3 class="text-lg font-semibold mb-4">Active Models</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <!-- Model Cards -->
                            <div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('gpt')">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-semibold">GPT-4 Turbo</h4>
                                    <span class="status-indicator w-2 h-2 bg-green-500 rounded-full"></span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">Latest OpenAI model</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-gray-500">2.3ms avg</span>
                                    <div class="flex space-x-1">
                                        <div class="w-1 h-4 bg-blue-600 rounded"></div>
                                        <div class="w-1 h-6 bg-blue-600 rounded"></div>
                                        <div class="w-1 h-3 bg-blue-600 rounded"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('claude')">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-semibold">Claude 3</h4>
                                    <span class="status-indicator w-2 h-2 bg-green-500 rounded-full"></span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">Anthropic's best</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-gray-500">1.8ms avg</span>
                                    <div class="flex space-x-1">
                                        <div class="w-1 h-5 bg-purple-600 rounded"></div>
                                        <div class="w-1 h-7 bg-purple-600 rounded"></div>
                                        <div class="w-1 h-4 bg-purple-600 rounded"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('gemini')">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-semibold">Gemini Pro</h4>
                                    <span class="status-indicator w-2 h-2 bg-green-500 rounded-full"></span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">Google's AI</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-gray-500">2.1ms avg</span>
                                    <div class="flex space-x-1">
                                        <div class="w-1 h-4 bg-green-600 rounded"></div>
                                        <div class="w-1 h-5 bg-green-600 rounded"></div>
                                        <div class="w-1 h-3 bg-green-600 rounded"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('llama')">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-semibold">Llama 3</h4>
                                    <span class="status-indicator w-2 h-2 bg-yellow-500 rounded-full"></span>
                                </div>
                                <p class="text-sm text-gray-600 mb-2">Meta's open-source</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-gray-500">3.5ms avg</span>
                                    <div class="flex space-x-1">
                                        <div class="w-1 h-3 bg-orange-600 rounded"></div>
                                        <div class="w-1 h-4 bg-orange-600 rounded"></div>
                                        <div class="w-1 h-2 bg-orange-600 rounded"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Chat Interface -->
                    <div class="bg-white p-6 rounded-lg shadow-md">
                        <h3 class="text-lg font-semibold mb-4">Test Model</h3>
                        <div id="chat-container" class="h-64 border rounded-lg mb-4 overflow-y-auto p-4">
                            <div id="chat-messages"></div>
                        </div>
                        <div class="flex space-x-2">
                            <input type="text" id="message-input" placeholder="Type your message..." 
                                   class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <button onclick="sendMessage()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                                <i data-feather="send" class="h-4 w-4"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Model Modal -->
    <div id="modelModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
        <div class="bg-white p-8 rounded-lg max-w-md w-full">
            <h3 id="modalTitle" class="text-xl font-bold mb-4">Model Details</h3>
            <div id="modalContent" class="space-y-4">
                <!-- Content will be dynamically inserted -->
            </div>
            <button onclick="closeModal()" class="mt-4 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
                Close
            </button>
        </div>
    </div>

    <script>
        // Initialize Feather Icons
        feather.replace();

        // Sidebar toggle
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('sidebar-collapsed');
        });

        // Modal functions
        function selectModel(model) {
            const modal = document.getElementById('modelModal');
            const title = document.getElementById('modalTitle');
            const content = document.getElementById('modalContent');
            
            const models = {
                gpt: {
                    title: 'GPT-4 Turbo',
                    content: `
                        <p><strong>Type:</strong> OpenAI GPT-4</p>
                        <p><strong>Status:</strong> <span class="text-green-600">Active</span></p>
                        <p><strong>Response Time:</strong> 2.3ms average</p>
                        <p><strong>Accuracy:</strong> 94%</p>
                        <p><strong>Last Updated:</strong> 2 hours ago</p>
                    `
                },
                claude: {
                    title: 'Claude 3',
                    content: `
                        <p><strong>Type:</strong> Anthropic Claude 3</p>
                        <p><strong>Status:</strong> <span class="text-green-600">Active</span></p>
                        <p><strong>Response Time:</strong> 1.8ms average</p>
                        <p><strong>Accuracy:</strong> 96%</p>
                        <p><strong>Last Updated:</strong> 1 hour ago</p>
                    `
                },
                gemini: {
                    title: 'Gemini Pro',
                    content: `
                        <p><strong>Type:</strong> Google Gemini Pro</p>
                        <p><strong>Status:</strong> <span class="text-green-600">Active</span></p>
                        <p><strong>Response Time:</strong> 2.1ms average</p>
                        <p><strong>Accuracy:</strong> 93%</p>
                        <p><strong>Last Updated:</strong> 30 minutes ago</p>
                    `
                },
                llama: {
                    title: 'Llama 3',
                    content: `
                        <p><strong>Type:</strong> Meta Llama 3</p>
                        <p><strong>Status:</strong> <span class="text-yellow-600">Moderate</span></p>
                        <p><strong>Response Time:</strong> 3.5ms average</p>
                        <p><strong>Accuracy:</strong> 89%</p>
                        <p><strong>Last Updated:</strong> 4 hours ago</p>
                    `
                }
            };
            
            title.textContent = models[model].title;
            content.innerHTML = models[model].content;
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        function closeModal() {
            const modal = document.getElementById('modelModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

        // Chat functionality
        function sendMessage() {
            const input = document.getElementById('message-input');
            const message = input.value.trim();
            if (!message) return;

            addMessage('user', message);
            input.value = '';
            
            // Simulate AI response
            setTimeout(() => {
                const responses = [
                    "I understand your query. Let me process that information...",
                    "Based on my analysis, here's what I found...",
                    "That's an interesting question. Here's my response...",
                    "Let me break this down for you..."
                ];
                const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                
                // Show typing indicator
                showTypingIndicator();
                
                setTimeout(() => {
                    hideTypingIndicator();
                    addMessage('ai', randomResponse);
                }, 1500);
            }, 500);
        }

        function addMessage(type, content) {
            const container = document.getElementById('chat-messages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `flex ${type === 'user' ? 'justify-end' : 'justify-start'} mb-4`;
            messageDiv.innerHTML = `
                <div class="chat-bubble ${type === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-800'} px-4 py-2 rounded-lg">
                    ${content}
                </div>
            `;
            container.appendChild(messageDiv);
            container.scrollTop = container.scrollHeight;
        }

        function showTypingIndicator() {
            const container = document.getElementById('chat-messages');
            const typingDiv = document.createElement('div');
            typingDiv.id = 'typing-indicator';
            typingDiv.className = 'flex justify-start mb-4';
            typingDiv.innerHTML = `
                <div class="chat-bubble bg-gray-200 px-4 py-2 rounded-lg">
                    <div class="typing-indicator"></div>
                    <div class="typing-indicator"></div>
                    <div class="typing-indicator"></div>
                </div>
            `;
            container.appendChild(typingDiv);
            container.scrollTop = container.scrollHeight;
        }

        function hideTypingIndicator() {
            const indicator = document.getElementById('typing-indicator');
            if (indicator) indicator.remove();
        }

        // Enter key to send message
        document.getElementById('message-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=basheer1414/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>