Spaces:

webml-community
/

Falcon-H1-Tiny-90M-WebGPU

Running

App Files Files Community

Xenova HF Staff commited on 14 days ago

Commit

f5623e6

0 Parent(s):

Super-squash branch 'main' using huggingface_hub

Browse files

Files changed (3) hide show

.gitattributes +35 -0
README.md +12 -0
index.html +446 -0

.gitattributes ADDED Viewed

	@@ -0,0 +1,35 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md ADDED Viewed

	@@ -0,0 +1,12 @@

+---
+title: Falcon-H1-Tiny-90M WebGPU
+emoji: 🦅
+colorFrom: purple
+colorTo: yellow
+sdk: static
+pinned: false
+license: apache-2.0
+short_description: A showcase of the Falcon-H1 architecture (Mamba + Attention)
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html ADDED Viewed

	@@ -0,0 +1,446 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Falcon-H1-Tiny-90M WebGPU</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦅</text></svg>"
+    />
+    <style>
+      :root {
+        --bg: #0a0e27;
+        --text: #ffffffe6;
+        --text-muted: #71717a;
+        --accent: #3b82f6;
+        --border: rgba(255, 255, 255, 0.1);
+        --border-light: rgba(255, 255, 255, 0.2);
+        --surface: rgba(255, 255, 255, 0.05);
+        --surface-active: rgba(255, 255, 255, 0.1);
+        --radius-sm: 0.25rem;
+        --radius-md: 0.75rem;
+        --radius-lg: 1rem;
+        --max-width: 700px;
+        --input-height: 52px;
+      }
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        background: var(--bg);
+        color: var(--text);
+        height: 100vh;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .loader-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(10, 14, 39, 0.95);
+        backdrop-filter: blur(10px);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+        gap: 1rem;
+      }
+      .loader {
+        width: 48px;
+        height: 48px;
+        border: 3px solid var(--accent);
+        border-bottom-color: transparent;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .loader-text {
+        font-size: 0.9rem;
+        color: #a1a1aa;
+      }
+      .header {
+        padding: 1.5rem 1.5rem 1rem;
+        text-align: center;
+        border-bottom: 1px solid var(--border);
+        position: relative;
+      }
+      .header h1 {
+        font-size: 1.75rem;
+        font-weight: 700;
+        background: linear-gradient(135deg, #60a5fa, #a78bfa);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+      .header p {
+        font-size: 0.85rem;
+        color: var(--text-muted);
+        margin: 0.5rem auto 0;
+        max-width: 500px;
+      }
+      .header .powered {
+        font-size: 0.75rem;
+        color: #52525b;
+        margin-top: 0.75rem;
+      }
+      .clear-btn,
+      .send-btn {
+        border-radius: var(--radius-md);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+      }
+      .clear-btn {
+        position: absolute;
+        left: 1.5rem;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 36px;
+        height: 36px;
+        border: 1px solid var(--border-light);
+        border-radius: 0.5rem;
+        background: transparent;
+        color: var(--text);
+      }
+      .clear-btn:hover {
+        background: var(--surface-active);
+        border-color: rgba(255, 255, 255, 0.3);
+      }
+      .chat-container {
+        flex: 1;
+        overflow-y: auto;
+        padding: 1.5rem;
+        min-height: 0;
+      }
+      .chat-wrapper,
+      .input-wrapper {
+        max-width: var(--max-width);
+        margin: 0 auto;
+        display: flex;
+        gap: 0.75rem;
+      }
+      .chat-wrapper {
+        flex-direction: column;
+        gap: 1rem;
+      }
+      .message {
+        display: flex;
+      }
+      .message.user {
+        justify-content: flex-end;
+      }
+      .message-content {
+        max-width: 80%;
+        padding: 0.75rem 1rem;
+        border-radius: var(--radius-lg);
+        line-height: 1.6;
+        white-space: pre-wrap;
+      }
+      .message.user .message-content {
+        background: var(--accent);
+        color: white;
+        border-bottom-right-radius: var(--radius-sm);
+      }
+      .message.assistant .message-content {
+        background: var(--surface-active);
+        border-bottom-left-radius: var(--radius-sm);
+      }
+      .input-container {
+        padding: 1rem 1.5rem 1.5rem;
+        border-top: 1px solid var(--border);
+      }
+      .chat-input {
+        flex: 1;
+        padding: 0.875rem 1rem;
+        border: 1px solid var(--border-light);
+        border-radius: var(--radius-md);
+        background: var(--surface);
+        color: var(--text);
+        font: inherit;
+        font-size: 1rem;
+        resize: none;
+        outline: none;
+        min-height: var(--input-height);
+        max-height: 150px;
+      }
+      .chat-input::placeholder {
+        color: var(--text-muted);
+      }
+      .chat-input:focus {
+        border-color: var(--accent);
+        background: rgba(255, 255, 255, 0.08);
+      }
+      .send-btn {
+        width: var(--input-height);
+        height: var(--input-height);
+        border: none;
+        background: var(--accent);
+        color: white;
+      }
+      .send-btn:hover:not(:disabled) {
+        background: #2563eb;
+      }
+      .send-btn:disabled {
+        background: #1e293b;
+        color: #475569;
+        cursor: not-allowed;
+      }
+      .send-btn .stop-icon,
+      .send-btn.generating .send-icon {
+        display: none;
+      }
+      .send-btn.generating .stop-icon {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="loader" class="loader-overlay">
+      <div class="loader"></div>
+      <div class="loader-text">
+        Loading Falcon-H1-Tiny-90M-Instruct (<span id="progress">0%</span>)
+      </div>
+    </div>
+    <div class="header">
+      <button id="clear" class="clear-btn" title="New conversation">
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M12 5v14M5 12h14" />
+        </svg>
+      </button>
+      <h1>🦅 Falcon-H1-Tiny-90M WebGPU</h1>
+      <p>
+        A showcase of the Falcon-H1 architecture, which combines<br />
+        parallel Mamba and Attention heads in the mixer block.
+      </p>
+      <p class="powered">Powered by Transformers.js v4 (preview)</p>
+    </div>
+    <div class="chat-container">
+      <div class="chat-wrapper" id="chat"></div>
+    </div>
+    <div class="input-container">
+      <div class="input-wrapper">
+        <textarea
+          id="input"
+          class="chat-input"
+          placeholder="Type a message..."
+          rows="1"
+          disabled
+        ></textarea>
+        <button id="send" class="send-btn" disabled>
+          <svg
+            class="send-icon"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
+          </svg>
+          <svg
+            class="stop-icon"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <rect x="4" y="4" width="16" height="16" rx="2" />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <script type="module">
+      import {
+        pipeline,
+        TextStreamer,
+        InterruptableStoppingCriteria,
+      } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@next";
+      const $ = (id) => document.getElementById(id);
+      const chat = $("chat");
+      const input = $("input");
+      const sendBtn = $("send");
+      const loader = $("loader");
+      const progress = $("progress");
+      const chatContainer = document.querySelector(".chat-container");
+      const SYSTEM_MESSAGE = {
+        role: "system",
+        content: "You are a helpful assistant.",
+      };
+      const stoppingCriteria = new InterruptableStoppingCriteria();
+      let generator,
+        isGenerating = false,
+        messages = [SYSTEM_MESSAGE];
+      const fileProgress = new Map();
+      const updateBtn = () =>
+        (sendBtn.disabled = !input.value.trim() && !isGenerating);
+      const scrollToBottom = () => {
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+      };
+      async function init() {
+        try {
+          generator = await pipeline(
+            "text-generation",
+            "onnx-community/Falcon-H1-Tiny-90M-Instruct-ONNX",
+            {
+              dtype: "fp16",
+              device: "webgpu",
+              progress_callback: ({ status, file, loaded, total }) => {
+                if (
+                  status !== "progress" ||
+                  fileProgress.set(file, { loaded, total }).size < 6
+                )
+                  return;
+                const { loaded: l, total: t } = [
+                  ...fileProgress.values(),
+                ].reduce((a, b) => ({
+                  loaded: a.loaded + b.loaded,
+                  total: a.total + b.total,
+                }));
+                progress.textContent = `${((l / t) * 100).toFixed(0)}%`;
+              },
+            },
+          );
+          loader.style.display = "none";
+          input.disabled = false;
+          input.focus();
+        } catch (e) {
+          progress.textContent = `Error: ${e.message}`;
+        }
+      }
+      function addMessage(role, content = "") {
+        chat.insertAdjacentHTML(
+          "beforeend",
+          `<div class="message ${role}"><div class="message-content">${content || " "}</div></div>`,
+        );
+        scrollToBottom();
+        return chat.lastElementChild.querySelector(".message-content");
+      }
+      async function generate() {
+        if (isGenerating) return stoppingCriteria.interrupt();
+        const userMsg = input.value.trim();
+        if (!userMsg) return;
+        input.value = "";
+        input.style.height = "auto";
+        messages.push({ role: "user", content: userMsg });
+        addMessage("user", userMsg);
+        isGenerating = true;
+        sendBtn.classList.add("generating");
+        sendBtn.disabled = false;
+        stoppingCriteria.reset();
+        const contentEl = addMessage("assistant");
+        let response = "";
+        await generator(messages, {
+          max_new_tokens: 512,
+          do_sample: false,
+          stopping_criteria: stoppingCriteria,
+          streamer: new TextStreamer(generator.tokenizer, {
+            skip_prompt: true,
+            skip_special_tokens: true,
+            callback_function: (token) => {
+              response += token;
+              contentEl.textContent = response || " ";
+              scrollToBottom();
+            },
+          }),
+        });
+        messages.push({ role: "assistant", content: response });
+        isGenerating = false;
+        sendBtn.classList.remove("generating");
+        updateBtn();
+        input.focus();
+      }
+      sendBtn.addEventListener("click", generate);
+      $("clear").addEventListener("click", () => {
+        if (isGenerating) return;
+        messages = [SYSTEM_MESSAGE];
+        chat.innerHTML = "";
+        input.focus();
+      });
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          generate();
+        }
+      });
+      input.addEventListener("input", () => {
+        input.style.height = "auto";
+        input.style.height = Math.min(input.scrollHeight, 150) + "px";
+        updateBtn();
+      });
+      init();
+    </script>
+  </body>
+</html>