Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Devseis Chat</title> | |
| <style> | |
| :root{ | |
| --bg:#0b0e14; --panel:#11151d; --border:#232a37; --text:#e8ecf4; --muted:#8b94a7; | |
| --accent:#2f6bff; --accent-text:#ffffff; --bubble-user:#1c2636; --bubble-bot:#161c27; | |
| } | |
| @media (prefers-color-scheme: light){ | |
| :root{ --bg:#f4f6fb; --panel:#ffffff; --border:#e2e6ee; --text:#171a21; --muted:#666f80; | |
| --accent:#2f6bff; --accent-text:#ffffff; --bubble-user:#eaf0ff; --bubble-bot:#f1f2f5; } | |
| } | |
| *{box-sizing:border-box;} | |
| body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;height:100vh;display:flex;flex-direction:column;} | |
| header{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--panel);} | |
| header img{height:32px;width:auto;} | |
| header .title{font-weight:600;font-size:15px;} | |
| header .sub{font-size:12px;color:var(--muted);} | |
| main{flex:1;overflow-y:auto;padding:20px;max-width:820px;width:100%;margin:0 auto;} | |
| .msg{display:flex;margin-bottom:14px;} | |
| .msg.user{justify-content:flex-end;} | |
| .bubble{max-width:75%;padding:10px 14px;border-radius:14px;line-height:1.45;font-size:14.5px;white-space:pre-wrap;} | |
| .msg.user .bubble{background:var(--bubble-user);border-bottom-right-radius:4px;} | |
| .msg.bot .bubble{background:var(--bubble-bot);border-bottom-left-radius:4px;} | |
| .msg.bot.loading .bubble{color:var(--muted);} | |
| form{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--border);background:var(--panel);max-width:820px;width:100%;margin:0 auto;} | |
| textarea{flex:1;resize:none;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:10px;padding:10px 12px;font-size:14.5px;font-family:inherit;max-height:140px;} | |
| button{background:var(--accent);color:var(--accent-text);border:none;border-radius:10px;padding:0 18px;font-size:14px;font-weight:600;cursor:pointer;} | |
| button:disabled{opacity:.5;cursor:not-allowed;} | |
| footer{text-align:center;font-size:11px;color:var(--muted);padding:8px 0 14px;} | |
| a{color:var(--accent);} | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <img src="devseis-logo.png" alt="Devseis" /> | |
| <div> | |
| <div class="title">Devseis Chat</div> | |
| <div class="sub">Free public AI chat · Llama-3.2-3B</div> | |
| </div> | |
| </header> | |
| <main id="thread"></main> | |
| <form id="form"> | |
| <textarea id="input" rows="1" placeholder="Type a message..." autofocus></textarea> | |
| <button type="submit" id="send">Send</button> | |
| </form> | |
| <footer>Powered by an open 3B model · Made by <a href="https://www.devseis.com" target="_blank" rel="noopener">Devseis</a></footer> | |
| <script> | |
| const WORKER_URL = "https://devseis-chat-proxy.umer-wasim.workers.dev"; | |
| const thread = document.getElementById('thread'); | |
| const form = document.getElementById('form'); | |
| const input = document.getElementById('input'); | |
| const sendBtn = document.getElementById('send'); | |
| let history = [ | |
| { role: "system", content: "You are Devseis Chat, a friendly, helpful assistant." } | |
| ]; | |
| function addMessage(role, text, opts={}) { | |
| const row = document.createElement('div'); | |
| row.className = 'msg ' + (role === 'user' ? 'user' : 'bot') + (opts.loading ? ' loading' : ''); | |
| const bubble = document.createElement('div'); | |
| bubble.className = 'bubble'; | |
| bubble.textContent = text; | |
| row.appendChild(bubble); | |
| thread.appendChild(row); | |
| thread.scrollTop = thread.scrollHeight; | |
| return bubble; | |
| } | |
| input.addEventListener('input', () => { | |
| input.style.height = 'auto'; | |
| input.style.height = Math.min(input.scrollHeight, 140) + 'px'; | |
| }); | |
| input.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| form.requestSubmit(); | |
| } | |
| }); | |
| form.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const text = input.value.trim(); | |
| if (!text) return; | |
| input.value = ''; | |
| input.style.height = 'auto'; | |
| sendBtn.disabled = true; | |
| addMessage('user', text); | |
| history.push({ role: 'user', content: text }); | |
| const loadingBubble = addMessage('bot', 'Thinking…', { loading: true }); | |
| try { | |
| const res = await fetch(WORKER_URL, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ messages: history }) | |
| }); | |
| if (!res.ok) throw new Error('Request failed: ' + res.status); | |
| const data = await res.json(); | |
| const reply = data.reply || '(no response)'; | |
| loadingBubble.parentElement.classList.remove('loading'); | |
| loadingBubble.textContent = reply; | |
| history.push({ role: 'assistant', content: reply }); | |
| } catch (err) { | |
| loadingBubble.parentElement.classList.remove('loading'); | |
| loadingBubble.textContent = 'Sorry, something went wrong. Please try again in a moment.'; | |
| console.error(err); | |
| } finally { | |
| sendBtn.disabled = false; | |
| input.focus(); | |
| } | |
| }); | |
| addMessage('bot', "Moien! I'm Devseis Chat. Ask me anything."); | |
| </script> | |
| </body> | |
| </html> | |