Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>DeepSite NIM</title> | |
| <link rel="icon" href="data:;base64,iVBORw0KGgo=" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@huggingface/inference@2.6.4"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eef2ff', | |
| 100: '#e0e7ff', | |
| 200: '#c7d2fe', | |
| 300: '#a5b4fc', | |
| 400: '#818cf8', | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| 700: '#4338ca', | |
| 800: '#3730a3', | |
| 900: '#312e81' | |
| }, | |
| secondary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e' | |
| }, | |
| neon: { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| 700: '#15803d', | |
| 800: '#166534', | |
| 900: '#14532d' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script> | |
| // Keep icons available globally | |
| window.feather = undefined; // Placeholder to avoid global leaks | |
| </script> | |
| </head> | |
| <body class="bg-white text-gray-900"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <aside class="hidden md:flex md:flex-col w-72 border-r border-gray-200 bg-gray-50"> | |
| <div class="h-16 flex items-center px-4 border-b border-gray-200"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-8 h-8 rounded bg-primary-500 text-white flex items-center justify-center font-bold">DS</div> | |
| <div class="font-semibold">DeepSite NIM</div> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-3 space-y-2"> | |
| <button id="new-chat" class="w-full flex items-center gap-2 px-3 py-2 rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm hover:bg-white/80 hover:border-primary-300 transition-all duration-200 font-medium"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-secondary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M12 5v14M5 12h14"/></svg> | |
| New Chat | |
| </button> | |
| <div class="pt-2"> | |
| <div class="text-xs uppercase tracking-wider text-gray-500 px-2 mb-1">Recent</div> | |
| <ul id="chat-list" class="space-y-1"></ul> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-200"> | |
| <div class="space-y-2"> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-600 mb-1">Hugging Face Token (Optional)</label> | |
| <input id="hf-token" type="password" placeholder="hf_..." class="w-full rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all duration-200" /> | |
| <p class="text-[11px] text-gray-500 mt-1">For private models. Not required for public models.</p> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-600 mb-1">Local Model</label> | |
| <div class="space-y-2"> | |
| <select id="model-select" class="w-full rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all duration-200"> | |
| <option value="microsoft/DialoGPT-medium">microsoft/DialoGPT-medium (2.5GB)</option> | |
| <option value="microsoft/DialoGPT-large">microsoft/DialoGPT-large (3.5GB)</option> | |
| <option value="mistralai/Mistral-7B-Instruct-v0.1">mistralai/Mistral-7B-Instruct-v0.1 (7GB)</option> | |
| <option value="TheBloke/CodeLlama-7B-Instruct-GGUF">TheBloke/CodeLlama-7B-Instruct-GGUF (4GB)</option> | |
| <option value="local-upload">📁 Upload from Computer</option> | |
| </select> | |
| <div id="local-model-upload" class="hidden"> | |
| <input type="file" id="model-file-input" accept=".bin,.safetensors,.gguf,.ggml,.pt,.pth" class="hidden" /> | |
| <button id="upload-model-btn" class="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-xl border-2 border-dashed border-gray-300 hover:border-primary-400 hover:bg-primary-50/50 transition-all duration-200 text-sm font-medium"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"> | |
| <path stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/> | |
| </svg> | |
| Choose Model File | |
| </button> | |
| <p id="selected-model-name" class="text-[11px] text-gray-600 mt-1 truncate"></p> | |
| </div> | |
| </div> | |
| <p class="text-[11px] text-gray-500 mt-1">Downloads on first use or upload your own model files.</p> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-600 mb-1">Template</label> | |
| <select id="template-select" class="w-full rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all duration-200"> | |
| <option value="vibecode">🚀 VibeCode - Web Apps</option> | |
| <option value="website">🌐 Clean Website</option> | |
| <option value="landing">🎯 Landing Page</option> | |
| <option value="portfolio">💼 Portfolio</option> | |
| <option value="saas">📊 SaaS Dashboard</option> | |
| <option value="ecommerce">🛒 E-commerce</option> | |
| <option value="blog">📝 Blog/CMS</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main --> | |
| <main class="flex-1 flex flex-col"> | |
| <!-- Top bar --> | |
| <header class="h-16 border-b border-gray-200 flex items-center justify-between px-4 bg-white"> | |
| <div class="flex items-center gap-3"> | |
| <button id="mobile-menu-btn" class="md:hidden inline-flex items-center justify-center w-9 h-9 rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm hover:bg-white/80 hover:border-primary-300 transition-all duration-200" title="Toggle sidebar"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M3 6h18M3 12h18M3 18h18"/></svg> | |
| </button> | |
| <div class="font-semibold text-lg">DeepSite NIM</div> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button id="export-chat" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl border border-gray-200/50 bg-white/50 backdrop-blur-sm hover:bg-white/80 hover:border-primary-300 transition-all duration-200 text-sm font-medium"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-secondary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16"/></svg> | |
| Export | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Messages --> | |
| <div id="messages" class="flex-1 overflow-y-auto p-4 space-y-4"> | |
| <div id="welcome" class="max-w-3xl mx-auto text-center mt-10"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-primary-50 to-secondary-50 text-primary-700 text-sm border border-primary-200/50 backdrop-blur-sm"> | |
| ✨ Powered by Local AI | |
| </div> | |
| <h1 class="text-4xl font-bold mb-3 bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">What can we build today?</h1> | |
| <p class="text-gray-600 text-lg">Describe your web app, website, or idea. We'll generate code and show you a live preview.</p> | |
| <div class="mt-8 grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <button onclick="quickTemplate('vibecode')" class="group p-4 rounded-2xl border border-gray-200/50 bg-white/30 backdrop-blur-sm hover:bg-white/60 hover:border-primary-300 hover:shadow-lg transition-all duration-300 text-left relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary-500/10 to-secondary-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="relative"> | |
| <div class="font-semibold text-sm mb-1">🚀 VibeCode App</div> | |
| <div class="text-xs text-gray-500">Modern web app with vibecoding</div> | |
| </div> | |
| </button> | |
| <button onclick="quickTemplate('website')" class="group p-4 rounded-2xl border border-gray-200/50 bg-white/30 backdrop-blur-sm hover:bg-white/60 hover:border-primary-300 hover:shadow-lg transition-all duration-300 text-left relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="relative"> | |
| <div class="font-semibold text-sm mb-1">🌐 Clean Website</div> | |
| <div class="text-xs text-gray-500">Professional business site</div> | |
| </div> | |
| </button> | |
| <button onclick="quickTemplate('saas')" class="group p-4 rounded-2xl border border-gray-200/50 bg-white/30 backdrop-blur-sm hover:bg-white/60 hover:border-primary-300 hover:shadow-lg transition-all duration-300 text-left relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-teal-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="relative"> | |
| <div class="font-semibold text-sm mb-1">📊 SaaS Dashboard</div> | |
| <div class="text-xs text-gray-500">Analytics & admin panel</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Panel (Initially Hidden) --> | |
| <div id="preview-panel" class="hidden border-t border-gray-200 bg-gray-900"> | |
| <div class="h-80 flex flex-col"> | |
| <div class="flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| <span class="text-gray-300 text-sm ml-3">Live Preview</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button id="refresh-preview" class="text-xs text-gray-400 hover:text-white">Refresh</button> | |
| <button id="open-preview" class="text-xs text-gray-400 hover:text-white">Open</button> | |
| <button id="close-preview" class="text-xs text-gray-400 hover:text-white">Close</button> | |
| </div> | |
| </div> | |
| <iframe id="preview-frame" class="flex-1 w-full bg-white rounded-b-xl" sandbox="allow-scripts allow-same-origin"></iframe> | |
| </div> | |
| </div> | |
| <!-- Composer --> | |
| <div class="border-t border-gray-200 bg-gray-50 p-4"> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="rounded-xl border border-gray-200 bg-white shadow-sm"> | |
| <textarea id="prompt" rows="1" placeholder="Describe what you want to build..." class="w-full resize-none rounded-t-xl px-4 py-3 outline-none placeholder:text-gray-400"></textarea> | |
| <div class="flex items-center justify-between px-3 py-2"> | |
| <div class="flex items-center gap-2 text-xs text-gray-500"> | |
| <span id="status-text">Ready</span> | |
| <span id="model-status"></span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button id="stop-btn" class="hidden inline-flex items-center gap-2 px-3 py-1.5 rounded-md border border-gray-200 hover:bg-gray-100 text-sm"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M6 6h12v12H6z"/></svg> | |
| Stop | |
| </button> | |
| <button id="send-btn" class="inline-flex items-center gap-2 px-4 py-1.5 rounded-md bg-primary-600 text-white hover:bg-primary-700 text-sm"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" d="M22 2L11 13"/><path stroke-width="2" d="M22 2l-7 20-4-9-9-4 20-7z"/></svg> | |
| Generate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-[11px] text-gray-500 mt-2">AI runs locally in your browser. No data leaves your device.</p> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |