Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Content Generator | RTX 3090/3060</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%); | |
| } | |
| .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); | |
| } | |
| .sidebar { | |
| scrollbar-width: thin; | |
| scrollbar-color: #a777e3 transparent; | |
| } | |
| .sidebar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .sidebar::-webkit-scrollbar-thumb { | |
| background-color: #a777e3; | |
| border-radius: 3px; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans antialiased"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 gradient-bg text-white"> | |
| <div class="flex items-center justify-center h-16 px-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-2xl mr-2"></i> | |
| <span class="text-xl font-semibold">AI Studio</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow pt-5 overflow-y-auto sidebar"> | |
| <div class="px-4 space-y-1"> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md bg-black bg-opacity-20 text-white"> | |
| <i class="fas fa-home mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-black hover:bg-opacity-10 text-white"> | |
| <i class="fas fa-comment-alt mr-3"></i> | |
| Text Generation | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-black hover:bg-opacity-10 text-white"> | |
| <i class="fas fa-image mr-3"></i> | |
| Image Generation | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-black hover:bg-opacity-10 text-white"> | |
| <i class="fas fa-video mr-3"></i> | |
| Video Generation | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-black hover:bg-opacity-10 text-white"> | |
| <i class="fas fa-microphone-alt mr-3"></i> | |
| Voice Synthesis | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-black hover:bg-opacity-10 text-white"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| </div> | |
| <div class="mt-auto px-4 py-4"> | |
| <div class="bg-black bg-opacity-20 rounded-lg p-4"> | |
| <h3 class="text-sm font-medium">System Status</h3> | |
| <div class="mt-2 space-y-2"> | |
| <div class="flex justify-between text-xs"> | |
| <span>GPU 1 (RTX 3090)</span> | |
| <span>24/24 GB</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span>GPU 2 (RTX 3060)</span> | |
| <span>8/12 GB</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 67%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top navigation --> | |
| <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <button class="md:hidden text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="ml-4 text-lg font-medium">AI Content Generator</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </div> | |
| <div class="relative"> | |
| <button class="flex items-center space-x-2 focus:outline-none"> | |
| <img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User profile"> | |
| <span class="hidden md:block text-sm font-medium">Admin</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content area --> | |
| <div class="flex-1 overflow-auto p-4 bg-gray-50"> | |
| <!-- System Info --> | |
| <div class="mb-6 bg-white rounded-lg shadow p-4"> | |
| <h2 class="text-lg font-semibold mb-4">Your Powerful AI Workstation</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-microchip"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Processor</p> | |
| <p class="font-medium">Intel i7-7700K @ 4.2GHz</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-3"> | |
| <i class="fas fa-memory"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Memory</p> | |
| <p class="font-medium">32GB DDR4 2666MHz</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-3"> | |
| <i class="fas fa-hdd"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Storage</p> | |
| <p class="font-medium">2TB SSD (M.2 + SATA)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600 mr-3"> | |
| <i class="fas fa-gamepad"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Graphics</p> | |
| <p class="font-medium">RTX 3090 + RTX 3060</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Extensions --> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-4">Compatible AI Extensions</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Video Generation --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden transition-all duration-300 card-hover"> | |
| <div class="gradient-bg p-4 text-white"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-video text-2xl mr-3"></i> | |
| <h3 class="text-lg font-semibold">Video Generation</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Stable Video Diffusion - Local version optimized for RTX 30 series</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Runway ML - Local inference with CUDA 11.7 support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>AnimateDiff - For text-to-video generation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Video-P2P - For video style transfer</span> | |
| </li> | |
| </ul> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">VRAM Usage</span> | |
| <span class="text-xs font-medium">~18GB on RTX 3090</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-blue-500 h-1.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image Generation --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden transition-all duration-300 card-hover"> | |
| <div class="gradient-bg p-4 text-white"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-image text-2xl mr-3"></i> | |
| <h3 class="text-lg font-semibold">Image Generation</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Stable Diffusion XL 1.0 - Full precision with CUDA 11.7</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Kandinsky 2.2 - For advanced image synthesis</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>DeepFloyd IF - Multi-stage text-to-image</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>ControlNet - For pose/edge guided generation</span> | |
| </li> | |
| </ul> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">VRAM Usage</span> | |
| <span class="text-xs font-medium">~12GB on RTX 3060</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-purple-500 h-1.5 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Voice Synthesis --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden transition-all duration-300 card-hover"> | |
| <div class="gradient-bg p-4 text-white"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-microphone-alt text-2xl mr-3"></i> | |
| <h3 class="text-lg font-semibold">Voice Synthesis</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>VITS - Variational Inference with CUDA acceleration</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Bark - Text-to-speech with emotion control</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Tortoise TTS - High-quality voice cloning</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>VALL-E - Zero-shot TTS with your voice</span> | |
| </li> | |
| </ul> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs text-gray-500">VRAM Usage</span> | |
| <span class="text-xs font-medium">~8GB on either GPU</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-pink-500 h-1.5 rounded-full" style="width: 33%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Download Links --> | |
| <div class="mb-6 bg-white rounded-lg shadow p-4"> | |
| <h2 class="text-lg font-semibold mb-4">Extension Downloads & Dependencies</h2> | |
| <div class="space-y-6"> | |
| <!-- Video Generation --> | |
| <div> | |
| <h3 class="font-medium text-blue-600 mb-2">Video Generation</h3> | |
| <ul class="text-sm space-y-1"> | |
| <li> | |
| <span class="font-medium">Stable Video Diffusion:</span> | |
| <a href="https://github.com/Stability-AI/generative-models" class="text-blue-500 hover:underline">github.com/Stability-AI/generative-models</a> | |
| <div class="text-xs text-gray-500 ml-5">Integrated via Python API - loads into RTX 3090 VRAM</div> | |
| </li> | |
| <li> | |
| <span class="font-medium">Runway ML Local:</span> | |
| <a href="https://github.com/runwayml/local" class="text-blue-500 hover:underline">github.com/runwayml/local</a> | |
| <div class="text-xs text-gray-500 ml-5">Runs as Docker container with GPU passthrough</div> | |
| </li> | |
| <li> | |
| <span class="font-medium">AnimateDiff:</span> | |
| <a href="https://github.com/guoyww/AnimateDiff" class="text-blue-500 hover:underline">github.com/guoyww/AnimateDiff</a> | |
| <div class="text-xs text-gray-500 ml-5">Loaded as ComfyUI custom node</div> | |
| </li> | |
| <li class="text-xs text-gray-500 mt-1">Dependencies: FFmpeg, CUDA 11.7, PyTorch 1.13.1 (auto-installed)</li> | |
| </ul> | |
| </div> | |
| <!-- Image Generation --> | |
| <div> | |
| <h3 class="font-medium text-purple-600 mb-2">Image Generation</h3> | |
| <ul class="text-sm space-y-1"> | |
| <li> | |
| <span class="font-medium">Stable Diffusion XL:</span> | |
| <a href="https://github.com/Stability-AI/stablediffusion" class="text-blue-500 hover:underline">github.com/Stability-AI/stablediffusion</a> | |
| <div class="text-xs text-gray-500 ml-5">Runs in Automatic1111 web UI with --xformers flag</div> | |
| </li> | |
| <li> | |
| <span class="font-medium">Kandinsky 2.2:</span> | |
| <a href="https://github.com/ai-forever/Kandinsky-2" class="text-blue-500 hover:underline">github.com/ai-forever/Kandinsky-2</a> | |
| <div class="text-xs text-gray-500 ml-5">Integrated via diffusers pipeline</div> | |
| </li> | |
| <li> | |
| <span class="font-medium">ControlNet:</span> | |
| <a href="https://github.com/lllyasviel/ControlNet" class="text-blue-500 hover:underline">github.com/lllyasviel/ControlNet</a> | |
| <div class="text-xs text-gray-500 ml-5">Loaded as extension in web UI</div> | |
| </li> | |
| <li class="text-xs text-gray-500 mt-1">Dependencies: OpenCV, xFormers, TorchVision 0.14.1 (pre-configured)</li> | |
| </ul> | |
| </div> | |
| <!-- Voice Synthesis --> | |
| <div> | |
| <h3 class="font-medium text-pink-600 mb-2">Voice Synthesis</h3> | |
| <ul class="text-sm space-y-1"> | |
| <li> | |
| <span class="font-medium">VITS:</span> | |
| <a href="https://github.com/jaywalnut310/vits" class="text-blue-500 hover:underline">github.com/jaywalnut310/vits</a> | |
| <div class="text-xs text-gray-500 ml-5">Runs in separate FastAPI endpoint</div> | |
| </li> | |
| <li> | |
| <span class="font-medium">Bark:</span> | |
| <a href="https://github.com/suno-ai/bark" class="text-blue-500 hover:underline">github.com/suno-ai/bark</a> | |
| <div class="text-xs text-gray-500 ml-5">Loaded on-demand with small VRAM footprint</div> | |
| </li> | |
| <li> | |
| <span class="font-medium">Tortoise TTS:</span> | |
| <a href="https://github.com/neonbjb/tortoise-tts" class="text-blue-500 hover:underline">github.com/neonbjb/tortoise-tts</a> | |
| <div class="text-xs text-gray-500 ml-5">Uses dedicated RTX 3060 GPU</div> | |
| </li> | |
| <li class="text-xs text-gray-500 mt-1">Dependencies: Librosa, PyTorch Audio, SoundFile (auto-configured)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-4">Quick Actions</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <button class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow hover:shadow-md transition-all"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mb-2"> | |
| <i class="fas fa-font"></i> | |
| </div> | |
| <span class="text-sm font-medium">Text Gen</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow hover:shadow-md transition-all"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mb-2"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <span class="text-sm font-medium">Image Gen</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow hover:shadow-md transition-all"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center mb-2"> | |
| <i class="fas fa-video"></i> | |
| </div> | |
| <span class="text-sm font-medium">Video Gen</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow hover:shadow-md transition-all"> | |
| <div class="w-10 h-10 rounded-full bg-red-100 text-red-600 flex items-center justify-center mb-2"> | |
| <i class="fas fa-microphone-alt"></i> | |
| </div> | |
| <span class="text-sm font-medium">Voice Gen</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Current Tasks --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Active AI Tasks</h2> | |
| <button class="text-sm text-blue-600 hover:text-blue-800">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg"> | |
| <div class="relative mr-4"> | |
| <svg class="w-12 h-12" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#eee" | |
| stroke-width="3" | |
| /> | |
| <path | |
| class="progress-ring__circle" | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#4f46e5" | |
| stroke-width="3" | |
| stroke-dasharray="75, 100" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-700">75%</div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="text-sm font-medium">Stable Diffusion XL</h3> | |
| <span class="text-xs text-gray-500">RTX 3090</span> | |
| </div> | |
| <p class="text-xs text-gray-500">Generating 4K landscape images (batch of 8)</p> | |
| </div> | |
| <button class="ml-2 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg"> | |
| <div class="relative mr-4"> | |
| <svg class="w-12 h-12" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#eee" | |
| stroke-width="3" | |
| /> | |
| <path | |
| class="progress-ring__circle" | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#10b981" | |
| stroke-width="3" | |
| stroke-dasharray="30, 100" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-700">30%</div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="text-sm font-medium">Tortoise TTS</h3> | |
| <span class="text-xs text-gray-500">RTX 3060</span> | |
| </div> | |
| <p class="text-xs text-gray-500">Voice cloning from 30s sample</p> | |
| </div> | |
| <button class="ml-2 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile bottom navigation --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200"> | |
| <div class="flex justify-around"> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-blue-600"> | |
| <i class="fas fa-home mb-1"></i> | |
| <span class="text-xs">Home</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> | |
| <i class="fas fa-comment-alt mb-1"></i> | |
| <span class="text-xs">Text</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> | |
| <i class="fas fa-image mb-1"></i> | |
| <span class="text-xs">Image</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> | |
| <i class="fas fa-video mb-1"></i> | |
| <span class="text-xs">Video</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> | |
| <i class="fas fa-cog mb-1"></i> | |
| <span class="text-xs">Settings</span> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple script to toggle mobile menu (not implemented fully in this demo) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // This would be for a mobile menu toggle if implemented | |
| const mobileMenuButton = document.querySelector('.md\\:hidden button'); | |
| if (mobileMenuButton) { | |
| mobileMenuButton.addEventListener('click', function() { | |
| console.log('Mobile menu would toggle here'); | |
| }); | |
| } | |
| // Simulate progress animation for demo purposes | |
| const progressCircles = document.querySelectorAll('.progress-ring__circle'); | |
| progressCircles.forEach(circle => { | |
| const radius = circle.r.baseVal.value; | |
| const circumference = radius * 2 * Math.PI; | |
| circle.style.strokeDasharray = `${circumference} ${circumference}`; | |
| circle.style.strokeDashoffset = circumference; | |
| }); | |
| }); | |
| </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=j4myjohn/chat-bot-extensions" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |