Spaces:

dispatchAI
/

browser-chat

Running

App Files Files Community

3morixd commited on 6 days ago

Commit

ac53e27

verified ·

1 Parent(s): 7ffa44e

Upload folder using huggingface_hub

Browse files

Files changed (2) hide show

README.md +20 -5
index.html +364 -18

README.md CHANGED Viewed

@@ -1,10 +1,25 @@
 ---
-title: Browser Chat
-emoji: 🐨
 colorFrom: blue
-colorTo: red
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: dispatchAI Browser Chat
+emoji: ⚡
 colorFrom: blue
+colorTo: indigo
 sdk: static
+app_file: index.html
+pinned: true
+tags:
+- webgpu
+- on-device
+- mobile-ai
+- transformers-js
 ---
+# dispatchAI Browser Chat — WebGPU On-Device Inference
+A **100% browser-based** AI chat running SmolLM2-360M entirely on the user's GPU via WebGPU.
+- **Zero backend** — static HTML/JS, infinitely scalable, costs nothing ever
+- **Zero data leaves the device** — pure client-side inference
+- **WebGPU accelerated** — falls back to WASM on unsupported browsers
+- **~200MB model** — downloads once, cached by the browser
+This is the purest expression of dispatchAI's mission: AI that runs on your device, no cloud required.

index.html CHANGED Viewed

@@ -1,19 +1,365 @@
-<!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>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>dispatchAI — Mobile AI in Your Browser</title>
+    <style>
+        :root {
+            --ink: #0A0F1A;
+            --off-white: #F5F7FA;
+            --electric-blue: #2E6BFF;
+            --cyan: #1FE0E6;
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+            background: var(--ink);
+            color: var(--off-white);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .logo {
+            font-size: 2.5em;
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--electric-blue), var(--cyan));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -1px;
+        }
+        .tagline {
+            color: #8892a6;
+            font-size: 0.9em;
+            margin-top: 5px;
+        }
+        .badge {
+            display: inline-block;
+            background: rgba(46, 107, 255, 0.15);
+            border: 1px solid var(--electric-blue);
+            color: var(--electric-blue);
+            padding: 3px 10px;
+            border-radius: 12px;
+            font-size: 0.75em;
+            margin-top: 8px;
+        }
+        .chat-container {
+            width: 100%;
+            max-width: 700px;
+            background: #111827;
+            border: 1px solid #1a2332;
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        .chat-header {
+            background: linear-gradient(135deg, rgba(46, 107, 255, 0.1), rgba(31, 224, 230, 0.1));
+            padding: 15px 20px;
+            border-bottom: 1px solid #1a2332;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .model-name {
+            font-size: 0.85em;
+            color: var(--cyan);
+        }
+        .status {
+            font-size: 0.75em;
+            padding: 4px 10px;
+            border-radius: 8px;
+            background: #1a2332;
+            color: #8892a6;
+        }
+        .status.loaded { background: rgba(31, 224, 230, 0.15); color: var(--cyan); }
+        .status.loading { background: rgba(46, 107, 255, 0.15); color: var(--electric-blue); }
+        .status.error { background: rgba(255, 80, 80, 0.15); color: #ff5050; }
+        .messages {
+            height: 400px;
+            overflow-y: auto;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        .messages::-webkit-scrollbar { width: 6px; }
+        .messages::-webkit-scrollbar-thumb { background: #1a2332; border-radius: 3px; }
+        .msg {
+            max-width: 85%;
+            padding: 10px 14px;
+            border-radius: 12px;
+            font-size: 0.9em;
+            line-height: 1.5;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        .msg.user {
+            background: var(--electric-blue);
+            color: white;
+            align-self: flex-end;
+        }
+        .msg.ai {
+            background: #1a2332;
+            color: var(--off-white);
+            align-self: flex-start;
+            border: 1px solid #233;
+        }
+        .msg.system {
+            background: transparent;
+            color: #555;
+            font-size: 0.8em;
+            align-self: center;
+            font-style: italic;
+        }
+        .input-area {
+            padding: 15px 20px;
+            border-top: 1px solid #1a2332;
+            display: flex;
+            gap: 10px;
+        }
+        .input-area input {
+            flex: 1;
+            background: #0d1421;
+            border: 1px solid #1a2332;
+            color: var(--off-white);
+            padding: 12px 16px;
+            border-radius: 10px;
+            font-family: inherit;
+            font-size: 0.9em;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+        .input-area input:focus { border-color: var(--electric-blue); }
+        .input-area input:disabled { opacity: 0.5; }
+        .input-area button {
+            background: linear-gradient(135deg, var(--electric-blue), var(--cyan));
+            color: var(--ink);
+            border: none;
+            padding: 12px 24px;
+            border-radius: 10px;
+            font-family: inherit;
+            font-weight: 700;
+            font-size: 0.9em;
+            cursor: pointer;
+            transition: opacity 0.2s;
+        }
+        .input-area button:disabled { opacity: 0.5; cursor: not-allowed; }
+        .stats {
+            width: 100%;
+            max-width: 700px;
+            margin-top: 15px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        .stat {
+            background: #111827;
+            border: 1px solid #1a2332;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-size: 0.75em;
+            color: #8892a6;
+        }
+        .stat span { color: var(--cyan); font-weight: 700; }
+        .footer {
+            margin-top: 30px;
+            text-align: center;
+            color: #555;
+            font-size: 0.75em;
+        }
+        .footer a { color: var(--electric-blue); text-decoration: none; }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="logo">dispatchAI</div>
+        <div class="tagline">Mobile AI running entirely in your browser. No server. No cloud. Zero cost.</div>
+        <div class="badge">100% on-device | WebGPU powered</div>
+    </div>
+    <div class="chat-container">
+        <div class="chat-header">
+            <span class="model-name" id="modelName">SmolLM2-360M-Instruct</span>
+            <span class="status" id="status">Click Initialize</span>
+        </div>
+        <div class="messages" id="messages">
+            <div class="msg system">This model runs entirely in your browser using WebGPU. No data leaves your device.</div>
+        </div>
+        <div class="input-area">
+            <input type="text" id="input" placeholder="Ask anything..." disabled autocomplete="off">
+            <button id="sendBtn" disabled>Send</button>
+        </div>
+    </div>
+    <div class="stats">
+        <div class="stat">Model: <span id="statModel">SmolLM2-360M</span></div>
+        <div class="stat">Size: <span>~200MB</span></div>
+        <div class="stat">Backend: <span id="statBackend">WebGPU</span></div>
+        <div class="stat">Tokens/s: <span id="statTps">—</span></div>
+        <div class="stat">Load time: <span id="statLoad">—</span></div>
+    </div>
+    <div class="footer">
+        Powered by <a href="https://huggingface.co/dispatchAI" target="_blank">dispatchAI</a> |
+        Model: <a href="https://huggingface.co/dispatchAI/SmolLM2-360M-Instruct-mobile" target="_blank">SmolLM2-360M-Instruct-mobile</a> |
+        Built with <a href="https://github.com/xenova/transformers.js" target="_blank">transformers.js</a>
+    </div>
+    <script type="module">
+        import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.0';
+        // Configure for browser inference
+        env.allowLocalModels = false;
+        env.useBrowserCache = true;
+        let generator = null;
+        let isGenerating = false;
+        const statusEl = document.getElementById('status');
+        const modelNameEl = document.getElementById('modelName');
+        const messagesEl = document.getElementById('messages');
+        const inputEl = document.getElementById('input');
+        const sendBtn = document.getElementById('sendBtn');
+        const statTps = document.getElementById('statTps');
+        const statLoad = document.getElementById('statLoad');
+        const statBackend = document.getElementById('statBackend');
+        const MODEL_ID = 'onnx-community/SmolLM2-360M-Instruct-ONNX';
+        // Check WebGPU support
+        async function checkWebGPU() {
+            if (!navigator.gpu) {
+                statBackend.textContent = 'WASM (no WebGPU)';
+                return 'wasm';
+            }
+            try {
+                const adapter = await navigator.gpu.requestAdapter();
+                if (adapter) {
+                    statBackend.textContent = 'WebGPU';
+                    return 'webgpu';
+                }
+            } catch (e) {}
+            statBackend.textContent = 'WASM fallback';
+            return 'wasm';
+        }
+        function addMessage(text, role) {
+            const div = document.createElement('div');
+            div.className = `msg ${role}`;
+            div.textContent = text;
+            messagesEl.appendChild(div);
+            messagesEl.scrollTop = messagesEl.scrollHeight;
+            return div;
+        }
+        async function initModel() {
+            statusEl.textContent = 'Initializing...';
+            statusEl.className = 'status loading';
+            const backend = await checkWebGPU();
+            const device = backend === 'webgpu' ? 'webgpu' : 'wasm';
+            try {
+                const t0 = performance.now();
+                statusEl.textContent = 'Downloading model...';
+                generator = await pipeline('text-generation', MODEL_ID, {
+                    device: device,
+                    dtype: backend === 'webgpu' ? 'q4f16' : 'q8',
+                });
+                const loadTime = ((performance.now() - t0) / 1000).toFixed(1);
+                statLoad.textContent = `${loadTime}s`;
+                statusEl.textContent = 'Ready';
+                statusEl.className = 'status loaded';
+                inputEl.disabled = false;
+                sendBtn.disabled = false;
+                inputEl.focus();
+                addMessage(`Model loaded in ${loadTime}s on ${backend.toUpperCase()}. Ask me anything!`, 'system');
+            } catch (e) {
+                statusEl.textContent = 'Failed to load';
+                statusEl.className = 'status error';
+                addMessage(`Error: ${e.message}. Try refreshing the page.`, 'system');
+                console.error(e);
+            }
+        }
+        async function generate() {
+            if (isGenerating || !generator) return;
+            const text = inputEl.value.trim();
+            if (!text) return;
+            inputEl.value = '';
+            inputEl.disabled = true;
+            sendBtn.disabled = true;
+            sendBtn.textContent = '...';
+            isGenerating = true;
+            addMessage(text, 'user');
+            const aiMsg = addMessage('', 'ai');
+            const messages = [
+                { role: 'system', content: 'You are a helpful assistant. Keep responses concise.' },
+                { role: 'user', content: text },
+            ];
+            try {
+                const t0 = performance.now();
+                let tokenCount = 0;
+                // Streaming generation
+                const stream = await generator(messages, {
+                    max_new_tokens: 128,
+                    do_sample: true,
+                    temperature: 0.7,
+                    streaming: true,
+                    callback_function: (data) => {
+                        tokenCount++;
+                    },
+                });
+                const elapsed = (performance.now() - t0) / 1000;
+                const output = stream[0].generated_text[2].content;
+                // Type out the response
+                let i = 0;
+                const typeInterval = setInterval(() => {
+                    if (i < output.length) {
+                        aiMsg.textContent = output.slice(0, i + 1);
+                        messagesEl.scrollTop = messagesEl.scrollHeight;
+                        i++;
+                    } else {
+                        clearInterval(typeInterval);
+                        const tps = (tokenCount / elapsed).toFixed(1);
+                        statTps.textContent = `${tps}`;
+                    }
+                }, 10);
+            } catch (e) {
+                aiMsg.textContent = `Error: ${e.message}`;
+                console.error(e);
+            } finally {
+                inputEl.disabled = false;
+                sendBtn.disabled = false;
+                sendBtn.textContent = 'Send';
+                isGenerating = false;
+                inputEl.focus();
+            }
+        }
+        sendBtn.addEventListener('click', generate);
+        inputEl.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') generate();
+        });
+        // Auto-init on page load
+        initModel();
+    </script>
+</body>
 </html>