Spaces:
Sleeping
Sleeping
File size: 9,526 Bytes
486838c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
<!doctype html>
<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">you@example.com</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> |