Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Diffusion LLM – Chat</title> | |
| <!-- Tailwind CDN --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Inter Font --> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| html,body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial} | |
| /* custome slider */ | |
| input[type=range] { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| height: 6px; | |
| border-radius: 5px; | |
| background: #e0e0e0; | |
| outline: none; | |
| } | |
| input[type=range]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #6b21a8; | |
| cursor: pointer; | |
| box-shadow: 0 0 2px rgba(0,0,0,0.2); | |
| transition: background 0.3s ease; | |
| } | |
| input[type=range]::-webkit-slider-thumb:hover { | |
| background: #7c2dbe; | |
| } | |
| input[type=range]::-moz-range-thumb { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #6b21a8; | |
| cursor: pointer; | |
| box-shadow: 0 0 2px rgba(0,0,0,0.2); | |
| transition: background 0.3s ease; | |
| } | |
| input[type=range]::-moz-range-thumb:hover { | |
| background: #7c2dbe; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="h-screen w-screen flex items-start gap-6 p-8 bg-gradient-to-br from-purple-50 to-purple-100"> | |
| <!-- Sidebar --> | |
| <aside id="sidebar" class="w-64 h-full bg-white/90 flex flex-col items-center justify-between backdrop-blur-sm rounded-xl p-5 shadow-sm border border-gray-100"> | |
| <div> | |
| <div class="flex items-center gap-3 mb-4"> | |
| <div class="w-9 h-9 rounded-md bg-gradient-to-br from-purple-200 to-purple-300"></div> | |
| <div> | |
| <div class="text-sm font-semibold text-slate-900">Cortex</div> | |
| <div class="text-xs text-slate-500">Diffusion LLM</div> | |
| </div> | |
| </div> | |
| <button id="new-chat" class="w-full inline-flex items-center justify-center gap-2 bg-black text-white py-2 rounded-full text-sm font-medium shadow-sm mb-4">+ New chat</button> | |
| <nav class="w-full min-w-48 flex-1 flex flex-col gap-2 text-sm" id="chat-list" aria-label="Saved chats"> | |
| <!-- Chat items are dynamically injected here by JavaScript --> | |
| </nav> | |
| </div> | |
| <div class="mt-6 text-xs text-slate-500 ">Signed in as <strong class="text-slate-700">[email protected]</strong></div> | |
| </aside> | |
| <!-- Main content --> | |
| <main class="flex-1 flex items-center justify-center w-full h-full"> | |
| <div class="w-full bg-white rounded-2xl p-7 shadow-lg border border-gray-100 flex flex-col h-full"> | |
| <header class="flex items-center justify-between mb-3 border-b border-gray-200 pb-3"> | |
| <div class="flex items-center gap-3"> | |
| <button id="btn-toggle-sidebar" aria-label="Toggle sidebar" class="inline-flex items-center justify-center p-2 rounded-md bg-white shadow sm:hidden">☰</button> | |
| <h1 id="app-title" class="text-lg font-semibold">Diffusion LLM Chat</h1> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <button id="btn-load" class="bg-black text-white px-3 py-2 rounded-md text-sm font-medium">Load Model</button> | |
| <span id="load-status" class="text-sm text-slate-500">Not loaded</span> | |
| </div> | |
| </header> | |
| <section class="flex-1 flex flex-col overflow-hidden"> | |
| <div id="welcome" class="text-center py-6"> | |
| <div class="mx-auto w-24 h-24"> | |
| <video src="/static/ai.mp4" alt="Assistant Avatar" autoplay loop muted class="w-full h-full scale-[2] object-cover mix-blend-multiply" style="filter: hue-rotate(45deg)" /> | |
| </div> | |
| <p class="mt-4 text-purple-600 font-medium">Hello, Jagrat Patel</p> | |
| <h2 class="mt-2 text-2xl font-semibold text-slate-900">How can I assist you today?</h2> | |
| <div class="mt-6 flex items-center justify-center gap-4 flex-wrap"> | |
| <button class="bg-white px-5 py-3 rounded-lg shadow-sm border text-sm hover:scale-105 hover:bg-purple-50 hover:border-purple-300 transition-all">Deeper Research <span class="block text-xs text-slate-500 mt-1">Ask for long-form, research-backed answers.</span></button> | |
| <button class="bg-white px-5 py-3 rounded-lg shadow-sm border text-sm hover:scale-105 hover:bg-purple-50 hover:border-purple-300 transition-all">Saved prompts <span class="block text-xs text-slate-500 mt-1">Quickly reuse your favorite prompts.</span></button> | |
| <button class="bg-white px-5 py-3 rounded-lg shadow-sm border text-sm hover:scale-105 hover:bg-purple-50 hover:border-purple-300 transition-all">Check Facts <span class="block text-xs text-slate-500 mt-1">Compare GDPR vs CCPA differences.</span></button> | |
| </div> | |
| </div> | |
| <div id="chat" class="hidden flex-1 overflow-auto px-2 py-3" role="log" aria-live="polite"> | |
| <!-- messages injected here --> | |
| </div> | |
| </section> | |
| <form id="prompt-form" class="mt-4 bg-white p-4 rounded-xl shadow-inner border border-gray-100" aria-label="Chat prompt"> | |
| <div class="mb-4 flex flex-row gap-4 flex-wrap items-center justify-between"> | |
| <div class="flex items-center gap-4 w-[24%]"> | |
| <label for="steps" class="text-sm font-medium text-slate-700">Steps:</label> | |
| <input type="range" id="steps" min="1" max="100" value="64" class="flex-1"> | |
| <span id="steps-value" class="text-sm text-slate-500 w-8">64</span> | |
| </div> | |
| <div class="flex items-center gap-4 w-[24%]"> | |
| <label for="block_size" class="text-sm font-medium text-slate-700">Block Size:</label> | |
| <input type="range" id="block_size" min="8" max="256" value="128" step="8" class="flex-1"> | |
| <span id="block_size-value" class="text-sm text-slate-500 w-8">128</span> | |
| </div> | |
| <div class="flex items-center gap-4 w-[24%]"> | |
| <label for="max_new_tokens" class="text-sm font-medium text-slate-700">Max New Tokens:</label> | |
| <input type="range" id="max_new_tokens" min="32" max="1024" value="128" step="32" class="flex-1"> | |
| <span id="max_new_tokens-value" class="text-sm text-slate-500 w-8">128</span> | |
| </div> | |
| <div class="flex items-center gap-4 w-[24%]"> | |
| <label for="parallel_blocks" class="text-sm font-medium text-slate-700">Parallel Blocks:</label> | |
| <input type="range" id="parallel_blocks" min="1" max="4" value="1" step="1" class="flex-1"> | |
| <span id="parallel_blocks-value" class="text-sm text-slate-500 w-8">1</span> | |
| </div> | |
| </div> | |
| <div class="flex gap-3"> | |
| <textarea id="prompt" class="flex-1 resize-y rounded-lg border border-gray-200 p-3 text-sm focus:outline-none focus:ring-[1px] focus:ring-purple-500 focus:border-purple-500" placeholder="Ask me anything..." rows="2" aria-label="Message input"></textarea> | |
| <div class="flex flex-col justify-between"> | |
| <button type="submit" id="btn-send" class="bg-black text-white px-4 py-2 rounded-md">Send</button> | |
| </div> | |
| </div> | |
| </form> | |
| <div class="mt-4 text-center text-xs text-slate-500">Model served by Flask. See README for run instructions.</div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="/static/main.js"></script> | |
| </body> | |
| </html> |