Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Model Control 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 0%, #a777e3 100%); | |
| } | |
| .model-card { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| } | |
| .model-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .pipeline-connector { | |
| position: relative; | |
| height: e.g. 40px; | |
| } | |
| .pipeline-connector:after { | |
| content: ""; | |
| position: absolute; | |
| left: 50%; | |
| top: 0; | |
| width: 2px; | |
| height: 100%; | |
| background: linear-gradient(to bottom, #a777e3, #6e8efb); | |
| } | |
| .cost-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .memory-indicator { | |
| transition: width 0.5s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white rounded-xl p-6 mb-8 shadow-lg"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold">AI Model Control Center</h1> | |
| <p class="opacity-90 mt-2">Gemini 2.5 Flash with Multi-Model Pipeline Integration</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-white/20 rounded-full p-3"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Model Selection Panel --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Gemini 2.5 Flash Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden model-card border-l-blue-500"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-bolt text-yellow-500 mr-2"></i> | |
| Gemini 2.5 Flash | |
| </h2> | |
| <p class="text-gray-600 mt-1">Cost-effective performance model with thinking budget control</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Primary</span> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-gray-700">Input Cost</h3> | |
| <p class="text-2xl font-bold text-blue-600">$0.15<span class="text-sm font-normal text-gray-500"> /M tokens</span></p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-gray-700">Output Cost</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm">Thinking Disabled:</span> | |
| <span class="font-semibold">$0.60/M</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm">Thinking Enabled:</span> | |
| <span class="font-semibold">$3.50/M</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Thinking Budget</label> | |
| <div class="flex items-center space-x-4"> | |
| <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <span class="text-sm font-medium text-gray-600">Balanced</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pipeline Configuration --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-project-diagram text-purple-500 mr-2"></i> | |
| Model Pipeline Configuration | |
| </h2> | |
| <!-- Search Models --> | |
| <div class="mt-6"> | |
| <h3 class="font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-search text-blue-400 mr-2"></i> | |
| Web Search Models (2) | |
| </h3> | |
| <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3"> | |
| <div class="flex items-center bg-gray-50 p-3 rounded-lg"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-globe text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">SearXNG</p> | |
| <p class="text-xs text-gray-500">Open-source search</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center bg-gray-50 p-3 rounded-lg"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fab fa-google text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Google/DuckDuckGo</p> | |
| <p class="text-xs text-gray-500">Hybrid search</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pipeline-connector"> | |
| <div class="absolute left-1/2 -ml-3 top-1/2 -mt-3 bg-white p-1 rounded-full border-2 border-purple-300"> | |
| <i class="fas fa-arrow-down text-purple-500"></i> | |
| </div> | |
| </div> | |
| <!-- Analysis Models --> | |
| <div class="mt-2"> | |
| <h3 class="font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-chart-line text-green-400 mr-2"></i> | |
| Analysis Models (2) | |
| </h3> | |
| <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3"> | |
| <div class="flex items-center bg-gray-50 p-3 rounded-lg"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-cube text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Mistral-7B</p> | |
| <p class="text-xs text-gray-500">General analysis</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center bg-gray-50 p-3 rounded-lg"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-cubes text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">LLaMA-2-13B</p> | |
| <p class="text-xs text-gray-500">High precision</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pipeline-connector"> | |
| <div class="absolute left-1/2 -ml-3 top-1/2 -mt-3 bg-white p-1 rounded-full border-2 border-purple-300"> | |
| <i class="fas fa-arrow-down text-purple-500"></i> | |
| </div> | |
| </div> | |
| <!-- Thinking Models --> | |
| <div class="mt-2"> | |
| <h3 class="font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-brain text-yellow-400 mr-2"></i> | |
| Thinking Models (2) | |
| </h3> | |
| <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3"> | |
| <div class="flex items-center bg-gray-50 p-3 rounded-lg"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-atom text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Falcon-180B-Chat</p> | |
| <p class="text-xs text-gray-500">Deep philosophical</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center bg-gray-50 p-3 rounded-lg"> | |
| <div class="bg-red-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-calculator text-red-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">WizardMath-70B</p> | |
| <p class="text-xs text-gray-500">Logical reasoning</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pipeline-connector"> | |
| <div class="absolute left-1/2 -ml-3 top-1/2 -mt-3 bg-white p-1 rounded-full border-2 border-purple-300"> | |
| <i class="fas fa-arrow-down text-purple-500"></i> | |
| </div> | |
| </div> | |
| <!-- Output Model --> | |
| <div class="mt-2"> | |
| <h3 class="font-medium text-gray-700 flex items-center"> | |
| <i class="fas fa-file-export text-purple-400 mr-2"></i> | |
| Output Model | |
| </h3> | |
| <div class="mt-3"> | |
| <div class="flex items-center bg-gray-50 p-3 rounded-lg"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-laptop-code text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">GPT4All</p> | |
| <p class="text-xs text-gray-500">Local lightweight</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="space-y-6"> | |
| <!-- Cost Estimation --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-calculator text-green-500 mr-2"></i> | |
| Cost Estimation | |
| </h2> | |
| <div class="mt-6 space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Monthly Token Usage</label> | |
| <div class="flex items-center"> | |
| <input type="number" value="2" min="0" class="w-20 border border-gray-300 rounded-lg px-3 py-2 text-sm"> | |
| <span class="ml-2 text-sm text-gray-600">million tokens</span> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg cost-badge"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Estimated Monthly Cost:</span> | |
| <span class="font-bold text-blue-700">$1.50</span> | |
| </div> | |
| <div class="mt-2 text-xs text-blue-600"> | |
| <i class="fas fa-info-circle mr-1"></i> | |
| With thinking disabled for 2M tokens | |
| </div> | |
| </div> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-dollar-sign mr-2"></i> | |
| Optimize Costs | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Memory Management --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-memory text-purple-500 mr-2"></i> | |
| Context Memory System | |
| </h2> | |
| <div class="mt-6 space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Active Memory</span> | |
| <span>65% used</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full memory-indicator" style="width: 65%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Real-time conversation tracking</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Long-term Storage</span> | |
| <span>30% used</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-600 h-2.5 rounded-full memory-indicator" style="width: 30%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">All conversation archives</p> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="font-medium text-sm mb-2">Memory Assistants</h4> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div class="bg-gray-50 p-2 rounded-lg text-center"> | |
| <div class="bg-blue-100 p-2 rounded-full inline-block mb-1"> | |
| <i class="fas fa-history text-blue-600"></i> | |
| </div> | |
| <p class="text-xs font-medium">Real-time Recall</p> | |
| </div> | |
| <div class="bg-gray-50 p-2 rounded-lg text-center"> | |
| <div class="bg-purple-100 p-2 rounded-full inline-block mb-1"> | |
| <i class="fas fa-database text-purple-600"></i> | |
| </div> | |
| <p class="text-xs font-medium">Archive Manager</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-bolt text-yellow-500 mr-2"></i> | |
| Quick Actions | |
| </h2> | |
| <div class="mt-6 grid grid-cols-2 gap-3"> | |
| <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-3 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-sync-alt mb-1"></i> | |
| <span class="text-xs">Restart Pipeline</span> | |
| </button> | |
| <button class="bg-green-100 hover:bg-green-200 text-green-800 py-2 px-3 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-save mb-1"></i> | |
| <span class="text-xs">Save Config</span> | |
| </button> | |
| <button class="bg-purple-100 hover:bg-purple-200 text-purple-800 py-2 px-3 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-sliders-h mb-1"></i> | |
| <span class="text-xs">Advanced</span> | |
| </button> | |
| <button class="bg-red-100 hover:bg-red-200 text-red-800 py-2 px-3 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-power-off mb-1"></i> | |
| <span class="text-xs">Shutdown</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Bar --> | |
| <div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4 flex flex-wrap items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <div class="h-3 w-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm">System Active</span> | |
| </div> | |
| <div class="hidden md:flex items-center"> | |
| <i class="fas fa-microchip text-gray-500 mr-2"></i> | |
| <span class="text-sm">UI-TARS v2.1</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-circle-notch fa-spin text-blue-500 mr-2"></i> | |
| <span class="text-sm">Processing</span> | |
| </div> | |
| <div class="hidden md:flex items-center"> | |
| <i class="fas fa-shield-alt text-green-500 mr-2"></i> | |
| <span class="text-sm">Secure</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simulate memory usage changes | |
| setInterval(() => { | |
| const activeMemory = document.querySelector('.memory-indicator'); | |
| const currentWidth = parseInt(activeMemory.style.width); | |
| const newWidth = currentWidth + (Math.random() * 10 - 5); | |
| if(newWidth > 100) activeMemory.style.width = '100%'; | |
| else if(newWidth < 0) activeMemory.style.width = '0%'; | |
| else activeMemory.style.width = `${newWidth}%`; | |
| }, 3000); | |
| // Cost estimation calculator | |
| document.querySelector('input[type="number"]').addEventListener('input', function() { | |
| const tokens = this.value; | |
| const cost = (tokens * 0.15) + (tokens * 0.60); | |
| document.querySelector('.cost-badge span:last-child').textContent = `$${cost.toFixed(2)}`; | |
| }); | |
| </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=amrashour3333/habd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |