Add branded Devseis chat frontend

README.md

@@ -1,10 +1,11 @@
 ---
 title: Devseis Chat
-emoji: 😻
-colorFrom: red
-colorTo: pink
+emoji: 💬
+colorFrom: blue
+colorTo: indigo
 sdk: static
 pinned: false
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Free public chat powered by Qwen2.5-3B-Instruct, served through a Cloudflare Worker proxy.

index.html

@@ -1,19 +1,126 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<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 &middot; Qwen2.5-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 &middot; Made by <a href="https://www.devseis.com" target="_blank" rel="noopener">Devseis</a></footer>
+
+<script>
+const WORKER_URL = "WORKER_URL_PLACEHOLDER"; // set to your deployed Cloudflare Worker URL
+
+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>