Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Dev Hub Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar { | |
| scrollbar-width: thin; | |
| scrollbar-color: #a777e3 transparent; | |
| } | |
| .sidebar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .sidebar::-webkit-scrollbar-thumb { | |
| background-color: #a777e3; | |
| border-radius: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-gray-900 text-white overflow-y-auto transition-all duration-300"> | |
| <div class="p-4 flex items-center space-x-2 border-b border-gray-700"> | |
| <div class="gradient-bg p-2 rounded-lg"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-xl font-bold">AI Dev Hub</h1> | |
| </div> | |
| <nav class="p-4 space-y-2"> | |
| <div class="group"> | |
| <div class="flex items-center p-2 rounded-lg group-hover:bg-gray-800 cursor-pointer transition-all"> | |
| <i class="fas fa-desktop mr-3 text-purple-400"></i> | |
| <span>Web Dashboard</span> | |
| </div> | |
| <div class="ml-8 mt-1 space-y-1 hidden group-hover:block"> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fas fa-lightbulb mr-2 text-yellow-400 text-xs"></i> | |
| <span class="text-sm">Idea Input</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fas fa-sliders-h mr-2 text-blue-400 text-xs"></i> | |
| <span class="text-sm">AI Model Selector</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fas fa-stream mr-2 text-green-400 text-xs"></i> | |
| <span class="text-sm">Real-time Output</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="group"> | |
| <div class="flex items-center p-2 rounded-lg group-hover:bg-gray-800 cursor-pointer transition-all"> | |
| <i class="fas fa-server mr-3 text-blue-400"></i> | |
| <span>AI Backend</span> | |
| </div> | |
| <div class="ml-8 mt-1 space-y-1 hidden group-hover:block"> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fas fa-cube mr-2 text-blue-300 text-xs"></i> | |
| <span class="text-sm">Ollama API</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fas fa-search mr-2 text-indigo-300 text-xs"></i> | |
| <span class="text-sm">DeepSeek API</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fas fa-cog mr-2 text-purple-300 text-xs"></i> | |
| <span class="text-sm">Custom Models</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="group"> | |
| <div class="flex items-center p-2 rounded-lg group-hover:bg-gray-800 cursor-pointer transition-all"> | |
| <i class="fas fa-code mr-3 text-green-400"></i> | |
| <span>Code Executor</span> | |
| </div> | |
| <div class="ml-8 mt-1 space-y-1 hidden group-hover:block"> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fas fa-shield-alt mr-2 text-green-300 text-xs"></i> | |
| <span class="text-sm">Sandboxed Env</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fas fa-vial mr-2 text-yellow-300 text-xs"></i> | |
| <span class="text-sm">Auto-testing</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fas fa-code-branch mr-2 text-blue-300 text-xs"></i> | |
| <span class="text-sm">Version Control</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="group"> | |
| <div class="flex items-center p-2 rounded-lg group-hover:bg-gray-800 cursor-pointer transition-all"> | |
| <i class="fas fa-cloud mr-3 text-indigo-400"></i> | |
| <span>Deployment Pipeline</span> | |
| </div> | |
| <div class="ml-8 mt-1 space-y-1 hidden group-hover:block"> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fas fa-server mr-2 text-gray-300 text-xs"></i> | |
| <span class="text-sm">Proxmox VMs</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fab fa-docker mr-2 text-blue-300 text-xs"></i> | |
| <span class="text-sm">Docker Swarm</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-800 cursor-pointer flex items-center"> | |
| <i class="fas fa-bolt mr-2 text-yellow-300 text-xs"></i> | |
| <span class="text-sm">Cloud Functions</span> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t border-gray-700 absolute bottom-0 w-64"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="h-10 w-10 rounded-full gradient-bg flex items-center justify-center"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Admin User</p> | |
| <p class="text-xs text-gray-400">[email protected]</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm p-4 flex justify-between items-center dark:bg-gray-800"> | |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Dashboard Overview</h2> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400 dark:text-gray-300"></i> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"> | |
| <i class="fas fa-bell text-gray-600 dark:text-gray-300"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| <button id="darkModeToggle" class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"> | |
| <i class="fas fa-moon text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <button class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition-all"> | |
| <i class="fas fa-plus mr-2"></i> New Project | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Quick Actions --> | |
| <div class="bg-gray-50 dark:bg-gray-700 px-6 py-3 flex space-x-4 overflow-x-auto"> | |
| <button class="flex-shrink-0 px-3 py-1 bg-white dark:bg-gray-600 rounded-lg text-sm shadow-sm flex items-center space-x-2"> | |
| <i class="fas fa-bolt text-yellow-500"></i> | |
| <span>Quick Start</span> | |
| </button> | |
| <button class="flex-shrink-0 px-3 py-1 bg-white dark:bg-gray-600 rounded-lg text-sm shadow-sm flex items-center space-x-2"> | |
| <i class="fas fa-book text-blue-500"></i> | |
| <span>Documentation</span> | |
| </button> | |
| <button class="flex-shrink-0 px-3 py-1 bg-white dark:bg-gray-600 rounded-lg text-sm shadow-sm flex items-center space-x-2"> | |
| <i class="fas fa-question-circle text-purple-500"></i> | |
| <span>Help Center</span> | |
| </button> | |
| <button class="flex-shrink-0 px-3 py-1 bg-white dark:bg-gray-600 rounded-lg text-sm shadow-sm flex items-center space-x-2"> | |
| <i class="fas fa-terminal text-green-500"></i> | |
| <span>API Console</span> | |
| </button> | |
| <button class="flex-shrink-0 px-3 py-1 bg-white dark:bg-gray-600 rounded-lg text-sm shadow-sm flex items-center space-x-2"> | |
| <i class="fas fa-history text-gray-500"></i> | |
| <span>Recent Projects</span> | |
| </button> | |
| </div> | |
| <!-- Dashboard Content --> | |
| <main class="p-6"> | |
| <!-- System Status Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Web Dashboard</p> | |
| <h3 class="text-2xl font-bold mt-1">Port 3000</h3> | |
| </div> | |
| <div class="p-3 rounded-lg bg-green-100 text-green-600"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Running</span> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Node.js</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">AI Backend</p> | |
| <h3 class="text-2xl font-bold mt-1">3 Models</h3> | |
| </div> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Active</span> | |
| <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Ollama</span> | |
| <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">DeepSeek</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Code Executor</p> | |
| <h3 class="text-2xl font-bold mt-1">12 Jobs</h3> | |
| </div> | |
| <div class="p-3 rounded-lg bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Sandboxed</span> | |
| <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Testing</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Deployment</p> | |
| <h3 class="text-2xl font-bold mt-1">5 Targets</h3> | |
| </div> | |
| <div class="p-3 rounded-lg bg-purple-100 text-purple-600"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full">Proxmox</span> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Docker</span> | |
| <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Cloud</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Dashboard Sections --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Project Templates Section --> | |
| <div class="lg:col-span-3 bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 card-hover transition-all"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold dark:text-white">Project Templates</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm dark:text-white">View All</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:border-purple-500 cursor-pointer"> | |
| <div class="h-12 w-12 gradient-bg rounded-lg flex items-center justify-center mb-2"> | |
| <i class="fas fa-image text-white"></i> | |
| </div> | |
| <h4 class="font-medium dark:text-white">Image Recognition</h4> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Computer Vision</p> | |
| </div> | |
| <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:border-purple-500 cursor-pointer"> | |
| <div class="h-12 w-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-2"> | |
| <i class="fas fa-comments text-blue-600 dark:text-blue-300"></i> | |
| </div> | |
| <h4 class="font-medium dark:text-white">Chat Assistant</h4> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">NLP</p> | |
| </div> | |
| <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:border-purple-500 cursor-pointer"> | |
| <div class="h-12 w-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-2"> | |
| <i class="fas fa-chart-line text-green-600 dark:text-green-300"></i> | |
| </div> | |
| <h4 class="font-medium dark:text-white">Data Analysis</h4> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Predictive</p> | |
| </div> | |
| <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:border-purple-500 cursor-pointer"> | |
| <div class="h-12 w-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-2"> | |
| <i class="fas fa-robot text-purple-600 dark:text-purple-300"></i> | |
| </div> | |
| <h4 class="font-medium dark:text-white">Custom AI</h4> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">From Scratch</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Idea Input Section --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6 card-hover transition-all"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">Idea Input & Processing</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 rounded-lg text-sm">Clear</button> | |
| <button class="px-3 py-1 gradient-bg text-white rounded-lg text-sm">Submit</button> | |
| </div> | |
| </div> | |
| <textarea class="w-full h-40 p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Enter your AI project idea here..."></textarea> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200"> | |
| <i class="fas fa-file-alt text-gray-600"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200"> | |
| <i class="fas fa-image text-gray-600"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200"> | |
| <i class="fas fa-link text-gray-600"></i> | |
| </button> | |
| </div> | |
| <div class="text-sm text-gray-500"> | |
| <span id="charCount">0</span>/500 characters | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Model Selector Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all"> | |
| <h3 class="text-lg font-semibold mb-4">AI Model Selector</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-purple-500 cursor-pointer"> | |
| <div class="h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-cube text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Ollama API</p> | |
| <p class="text-xs text-gray-500">Local LLM Runner</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="h-3 w-3 bg-green-500 rounded-full"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-purple-500 cursor-pointer"> | |
| <div class="h-10 w-10 bg-indigo-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-search text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">DeepSeek API</p> | |
| <p class="text-xs text-gray-500">Advanced AI Models</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="h-3 w-3 bg-green-500 rounded-full"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-purple-500 cursor-pointer"> | |
| <div class="h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-cog text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Custom Models</p> | |
| <p class="text-xs text-gray-500">Your trained models</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="h-3 w-3 bg-yellow-500 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 gradient-bg text-white py-2 rounded-lg hover:opacity-90 transition-all"> | |
| <i class="fas fa-sliders-h mr-2"></i> Configure Models | |
| </button> | |
| </div> | |
| <!-- Real-time Output Section --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6 card-hover transition-all"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">Real-time Output</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 rounded-lg text-sm">Clear</button> | |
| <button class="px-3 py-1 bg-gray-100 rounded-lg text-sm"> | |
| <i class="fas fa-download mr-1"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg h-64 overflow-y-auto"> | |
| <div class="flex mb-3"> | |
| <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-3/4"> | |
| <p>Initializing AI Dev Hub system. All components are operational.</p> | |
| <p class="text-xs text-gray-500 mt-1">2 seconds ago</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-3"> | |
| <div class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-purple-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-3/4"> | |
| <p>I want to create an image recognition system for medical diagnostics.</p> | |
| <p class="text-xs text-gray-500 mt-1">Just now</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-green-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-3/4"> | |
| <p>Analyzing requirements... Would you like me to suggest the best AI model for medical image analysis?</p> | |
| <p class="text-xs text-gray-500 mt-1">Generating...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Overview --> | |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all"> | |
| <h3 class="text-lg font-semibold mb-4">System Overview</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">CPU Usage</span> | |
| <span class="text-sm">42%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Memory</span> | |
| <span class="text-sm">5.2/16GB</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 32%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">GPU Utilization</span> | |
| <span class="text-sm">18%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 18%"></div> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <h4 class="text-sm font-medium mb-2">Active Services</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Web UI</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">API</span> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Database</span> | |
| <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Executor</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 rounded-lg transition-all"> | |
| <i class="fas fa-cog mr-2"></i> System Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Dark mode toggle | |
| const darkModeToggle = document.getElementById('darkModeToggle'); | |
| const html = document.documentElement; | |
| // Check for saved user preference or system preference | |
| if (localStorage.getItem('darkMode') === 'true' || | |
| (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } | |
| darkModeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('darkMode', html.classList.contains('dark')); | |
| darkModeToggle.querySelector('i').classList.toggle('fa-moon'); | |
| darkModeToggle.querySelector('i').classList.toggle('fa-sun'); | |
| }); | |
| // Initialize notification system | |
| function showNotification(title, message, type = 'info') { | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg max-w-xs z-50 ${ | |
| type === 'info' ? 'bg-blue-100 text-blue-800' : | |
| type === 'success' ? 'bg-green-100 text-green-800' : | |
| type === 'warning' ? 'bg-yellow-100 text-yellow-800' : | |
| 'bg-red-100 text-red-800' | |
| }`; | |
| notification.innerHTML = ` | |
| <div class="flex justify-between items-start"> | |
| <h4 class="font-bold">${title}</h4> | |
| <button class="ml-2 text-gray-500 hover:text-gray-700" onclick="this.parentElement.parentElement.remove()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p class="mt-1 text-sm">${message}</p> | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => notification.remove(), 5000); | |
| } | |
| // Example system notification | |
| setTimeout(() => { | |
| showNotification('System Update', 'New AI models available for testing', 'success'); | |
| }, 3000); | |
| // Character counter for idea input | |
| const textarea = document.querySelector('textarea'); | |
| const charCount = document.getElementById('charCount'); | |
| textarea.addEventListener('input', function() { | |
| charCount.textContent = this.value.length; | |
| }); | |
| // Toggle sidebar submenus | |
| document.querySelectorAll('.group').forEach(group => { | |
| group.addEventListener('click', function(e) { | |
| // Don't toggle if clicking on a submenu item | |
| if (e.target.closest('.group-hover\\:block')) return; | |
| const submenu = this.querySelector('.group-hover\\:block'); | |
| if (submenu) { | |
| const isHidden = submenu.classList.contains('hidden'); | |
| document.querySelectorAll('.group-hover\\:block').forEach(sm => { | |
| sm.classList.add('hidden'); | |
| }); | |
| if (isHidden) { | |
| submenu.classList.remove('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Simulate real-time output updates | |
| setInterval(() => { | |
| const outputDiv = document.querySelector('.bg-gray-50'); | |
| const newMessage = document.createElement('div'); | |
| newMessage.className = 'flex mb-3'; | |
| newMessage.innerHTML = ` | |
| <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-green-600"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-sm max-w-3/4"> | |
| <p>Suggested model: DeepSeek-Vision for medical image analysis with 92% accuracy on similar tasks.</p> | |
| <p class="text-xs text-gray-500 mt-1">Just now</p> | |
| </div> | |
| `; | |
| outputDiv.appendChild(newMessage); | |
| outputDiv.scrollTop = outputDiv.scrollHeight; | |
| }, 5000); | |
| </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=fsalmansour/ai-dev" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |