Spaces:

huggingworld
/

gemma-4-e2b-coder-webgpu

Running

App Files Files Community

huggingworld commited on 7 days ago

Commit

093fa65

verified ·

1 Parent(s): a11b098

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -663

index.html DELETED Viewed

@@ -1,663 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Gemma4 E2B Coding Agent WebGPU</title>
-    <style>
-      :root {
-        color-scheme: light;
-        --bg: #f6f3ee;
-        --panel: #ffffff;
-        --line: #e7dfd4;
-        --text: #1f1a16;
-        --muted: #6d6256;
-        --accent: #b35a2b;
-        --accent-soft: #f7eee8;
-        --user: #f3ede5;
-        --assistant: #fcfaf7;
-        --error: #a53f2b;
-        --shadow: 0 16px 48px rgba(36, 24, 15, 0.08);
-        --radius: 22px;
-        --radius-sm: 16px;
-        --radius-pill: 999px;
-        --sans: "Avenir Next", "Segoe UI", sans-serif;
-        --mono: "SFMono-Regular", Consolas, monospace;
-      }
-      * {
-        box-sizing: border-box;
-      }
-      body {
-        margin: 0;
-        min-height: 100vh;
-        font-family: var(--sans);
-        background: linear-gradient(180deg, #faf7f2 0%, var(--bg) 100%);
-        color: var(--text);
-        display: grid;
-        place-items: center;
-        padding: 20px;
-      }
-      .app {
-        width: min(760px, 100%);
-        height: min(840px, calc(100vh - 40px));
-        background: var(--panel);
-        border: 1px solid var(--line);
-        border-radius: var(--radius);
-        box-shadow: var(--shadow);
-        display: grid;
-        grid-template-rows: auto 1fr auto;
-        overflow: hidden;
-      }
-      .header {
-        padding: 18px 20px;
-        border-bottom: 1px solid var(--line);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 16px;
-      }
-      .title {
-        margin: 0;
-        font-size: 1rem;
-        font-weight: 700;
-      }
-      .subtitle {
-        margin: 0;
-        color: var(--muted);
-        font-size: 0.92rem;
-        text-align: right;
-      }
-      .spinner {
-        width: 18px;
-        height: 18px;
-        border: 2px solid rgba(179, 90, 43, 0.2);
-        border-top-color: var(--accent);
-        border-radius: 50%;
-        animation: spin 0.8s linear infinite;
-        flex: 0 0 auto;
-      }
-      .spinner.hidden {
-        display: none;
-      }
-      .chat {
-        padding: 18px;
-        overflow: auto;
-        background: #fcfbf8;
-        display: grid;
-        align-content: start;
-        gap: 12px;
-        position: relative;
-      }
-      .message {
-        max-width: 85%;
-        padding: 14px 16px;
-        border-radius: 18px;
-        line-height: 1.55;
-        white-space: pre-wrap;
-        border: 1px solid var(--line);
-      }
-      .message.user {
-        margin-left: auto;
-        background: var(--user);
-      }
-      .message.assistant {
-        background: var(--assistant);
-      }
-      .message.placeholder {
-        max-width: 100%;
-        color: var(--muted);
-        background: #fffdfb;
-        text-align: left;
-        padding: 18px;
-      }
-      .message.placeholder strong {
-        display: block;
-        margin-bottom: 10px;
-        color: var(--text);
-      }
-      .examples {
-        display: grid;
-        gap: 10px;
-      }
-      .example {
-        width: 100%;
-        text-align: left;
-        min-width: 0;
-        padding: 12px 14px;
-        border-radius: 14px;
-        border: 1px solid var(--line);
-        background: #faf6f1;
-        color: var(--text);
-        font-weight: 500;
-      }
-      .example:hover:not(:disabled) {
-        background: var(--accent-soft);
-      }
-      .center-state {
-        position: absolute;
-        inset: 0;
-        display: grid;
-        place-items: center;
-        padding: 24px;
-        text-align: center;
-        color: var(--muted);
-      }
-      .center-card {
-        display: grid;
-        justify-items: center;
-        gap: 14px;
-      }
-      .center-card .spinner {
-        width: 28px;
-        height: 28px;
-        border-width: 3px;
-      }
-      .composer {
-        padding: 16px;
-        border-top: 1px solid var(--line);
-        background: var(--panel);
-        display: grid;
-        gap: 12px;
-      }
-      .toolbar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-      }
-      .metrics {
-        display: flex;
-        justify-content: flex-end;
-        color: var(--muted);
-        font-size: 0.82rem;
-        font-family: var(--mono);
-      }
-      .reset {
-        border: 1px solid var(--line);
-        background: #fffdfb;
-        color: var(--muted);
-        padding: 10px 14px;
-        min-width: 0;
-      }
-      .input-row {
-        position: relative;
-      }
-      textarea {
-        width: 100%;
-        min-height: 64px;
-        max-height: 180px;
-        resize: vertical;
-        border: 1px solid var(--line);
-        border-radius: var(--radius-sm);
-        padding: 16px 110px 16px 16px;
-        font: inherit;
-        color: var(--text);
-        background: #fffdfb;
-        outline: none;
-      }
-      textarea:focus {
-        border-color: #d8b49f;
-        box-shadow: 0 0 0 4px rgba(179, 90, 43, 0.08);
-      }
-      button {
-        appearance: none;
-        border: 0;
-        border-radius: var(--radius-pill);
-        padding: 12px 16px;
-        background: var(--accent);
-        color: white;
-        font: inherit;
-        font-weight: 400;
-        cursor: pointer;
-        min-width: 84px;
-      }
-      .send {
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 1;
-        width: 44px;
-        height: 44px;
-        min-width: 44px;
-        padding: 0;
-        display: grid;
-        place-items: center;
-        border-radius: 14px;
-      }
-      .send svg {
-        width: 18px;
-        height: 18px;
-        fill: currentColor;
-      }
-      .send.stop {
-        background: #8b4a28;
-      }
-      button:disabled {
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-      .error {
-        color: var(--error);
-      }
-      .cursor {
-        display: inline-block;
-        width: 0.75ch;
-        color: var(--accent);
-        animation: blink 1s step-end infinite;
-      }
-      @keyframes spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-      @keyframes blink {
-        50% {
-          opacity: 0;
-        }
-      }
-      @media (max-width: 720px) {
-        .app {
-          height: calc(100vh - 20px);
-        }
-        .header,
-        .toolbar {
-          align-items: start;
-          flex-direction: column;
-        }
-        .subtitle {
-          text-align: left;
-        }
-        .message {
-          max-width: 92%;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <main class="app">
-      <header class="header">
-        <h1 class="title">Gemma4 E2B Coding Agent WebGPU</h1>
-        <p class="subtitle">Powered by 🤗 transformers.js v4.0.1</p>
-      </header>
-      <section id="chat" class="chat">
-        <div id="loadingState" class="center-state">
-          <div class="center-card">
-            <span class="spinner"></span>
-            <div id="statusText">Loading model...</div>
-          </div>
-        </div>
-      </section>
-      <section class="composer">
-        <div class="toolbar">
-          <button id="resetButton" class="reset" type="button" disabled>
-            Reset
-          </button>
-          <div class="metrics" id="metrics">tokens/sec: -</div>
-        </div>
-        <div class="input-row">
-          <textarea
-            id="prompt"
-            placeholder="Enter text here"
-            disabled
-          ></textarea>
-          <button
-            id="sendButton"
-            class="send"
-            type="button"
-            disabled
-            aria-label="Send message"
-            title="Send message"
-          ></button>
-        </div>
-      </section>
-    </main>
-    <script type="module">
-      import {
-        pipeline,
-        TextStreamer,
-        InterruptableStoppingCriteria,
-      } from "/assets/transformers.min.js";
-      const MODEL_ID = "huggingworld/gemma-4-E2B-it-ONNX";
-      const DTYPE = "q4f16";
-      const REVISION = "main";
-      const MAX_NEW_TOKENS = 32768;
-      const SYSTEM_PROMPT =
-        "<|think|> You are an expert autonomous software engineer and coding agent specializing in Python, JavaScript, and web technologies. Your purpose is to write, debug, and execute code within an E2B secure cloud sandbox environment. **Capabilities:** 1.  **Code Execution:** You can execute Python/JS code to verify its functionality instantly. 2.  **File Management:** You can create, read, update, and delete files in the sandbox. 3.  **Terminal Access:** You can run bash commands (e.g., pip install, npm install, git) inside the sandbox. **Operational Guidelines:** - **Think First:** Before writing code, use the thinking process to analyze the requirement, outline the architectural approach, and plan the file structure. - **Sandboxed Execution:** Treat the E2B sandbox as your primary workspace. If code can be executed, execute it. - **Safety First:** Do not run destructive commands. - **Debugging Loop:** If code execution fails, read the error message, analyze it, and fix the code. - **Output:** For final answers, provide the code within markdown blocks and summarize the actions taken. **E2B Integration:** - Use `execute_python(code)` or `execute_command(cmd)` to interact with the environment. **Persona:** - Efficient, precise, and safety-conscious. - Focus on producing functional, production-ready code. **Current Task:** [Insert User Request Here]<|think|>";
-      const chatEl = document.getElementById("chat");
-      const promptEl = document.getElementById("prompt");
-      const sendButton = document.getElementById("sendButton");
-      const resetButton = document.getElementById("resetButton");
-      const statusTextEl = document.getElementById("statusText");
-      const metricsEl = document.getElementById("metrics");
-      const loadingStateEl = document.getElementById("loadingState");
-      const SEND_ICON = `
-      <svg viewBox="0 0 24 24" aria-hidden="true">
-        <path d="M3.4 20.6 21 13 3.4 5.4l.1 5.8 11 1.8-11 1.8z"></path>
-      </svg>
-    `;
-      const STOP_ICON = `
-      <svg viewBox="0 0 24 24" aria-hidden="true">
-        <path d="M7 7h10v10H7z"></path>
-      </svg>
-    `;
-      let generator = null;
-      let isGenerating = false;
-      let loadFailed = false;
-      const stoppingCriteria = new InterruptableStoppingCriteria();
-      const conversation = [{ role: "system", content: SYSTEM_PROMPT }];
-      const examplePrompts = [
-        "Implement a Thread-Safe Skip List data structure in C++17. The implementation must support concurrent insert, search, and delete operations, utilizing std::atomic for managing node pointers rather than just a global mutex. Optimize for lookup speed and provide a brief justification of your chosen MAX_LEVEL based on anticipated data volume (N=10^6).",
-        "Create a Node.js-based state machine that manages a mock asynchronous workflow (e.g., handling payment, user creation, and email verification) where each state (e.g., PAYMENT_PENDING, PAYMENT_SUCCESS) is an async function. The machine must handle network timeouts, retries with exponential backoff, and allow for state rollback if a subsequent state fails. Implement it using a strict class-based architecture with TypeScript",
-        "Using FastAPI, create an endpoint that accepts a large (5,000+ line) JSON structure of nested employee data. Write a function using Pandas to reframe this data into a relational structure, handling missing values, transforming date formats, and computing a new seniority_score based on years_employed and department_rank. Ensure the code includes unit tests using pytest for edge cases in the data transformation",
-      ];
-      function setStatus(message, { error = false } = {}) {
-        statusTextEl.textContent = message;
-        statusTextEl.classList.toggle("error", error);
-      }
-      function setMetrics(text) {
-        metricsEl.textContent = text;
-      }
-      function scrollChatToBottom() {
-        chatEl.scrollTop = chatEl.scrollHeight;
-      }
-      function removePlaceholder() {
-        const placeholder = chatEl.querySelector(".placeholder");
-        if (placeholder) {
-          placeholder.remove();
-        }
-      }
-      function clearCenterState() {
-        if (loadingStateEl) {
-          loadingStateEl.remove();
-        }
-      }
-      function showExamples() {
-        clearCenterState();
-        removePlaceholder();
-        if (chatEl.querySelector(".examples")) {
-          return;
-        }
-        const card = document.createElement("div");
-        card.className = "message assistant placeholder";
-        card.innerHTML = "<strong>Try one of these or enter your own below</strong>";
-        const list = document.createElement("div");
-        list.className = "examples";
-        for (const prompt of examplePrompts) {
-          const button = document.createElement("button");
-          button.type = "button";
-          button.className = "example";
-          button.textContent = prompt;
-          button.addEventListener("click", () => {
-            promptEl.value = prompt;
-            sendMessage(prompt);
-          });
-          list.appendChild(button);
-        }
-        card.appendChild(list);
-        chatEl.appendChild(card);
-      }
-      function addMessage(role, text = "") {
-        removePlaceholder();
-        const node = document.createElement("div");
-        node.className = `message ${role}`;
-        node.textContent = text;
-        chatEl.appendChild(node);
-        scrollChatToBottom();
-        return node;
-      }
-      function setStreamingMessage(node, text) {
-        node.textContent = text;
-        const cursor = document.createElement("span");
-        cursor.className = "cursor";
-        cursor.textContent = "▋";
-        node.appendChild(cursor);
-        scrollChatToBottom();
-      }
-      function updateComposer() {
-        const ready = Boolean(generator) && !loadFailed;
-        promptEl.disabled = !ready || isGenerating;
-        sendButton.disabled = !ready;
-        resetButton.disabled = !ready || isGenerating;
-        sendButton.classList.toggle("stop", isGenerating);
-        sendButton.innerHTML = isGenerating ? STOP_ICON : SEND_ICON;
-        sendButton.setAttribute(
-          "aria-label",
-          isGenerating ? "Stop generation" : "Send message",
-        );
-        sendButton.setAttribute(
-          "title",
-          isGenerating ? "Stop generation" : "Send message",
-        );
-      }
-      function resetChat() {
-        if (isGenerating) {
-          return;
-        }
-        conversation.length = 1;
-        chatEl.innerHTML = "";
-        showExamples();
-        setStatus("Ready");
-        setMetrics("tokens/sec: -");
-        promptEl.value = "";
-        promptEl.focus();
-      }
-      async function loadModel() {
-        if (!window.isSecureContext) {
-          throw new Error(
-            "WebGPU requires a secure context like https:// or localhost.",
-          );
-        }
-        if (!("gpu" in navigator)) {
-          throw new Error("This browser does not support WebGPU.");
-        }
-        setStatus("Loading model...");
-        setMetrics("tokens/sec: -");
-        const startedAt = performance.now();
-        generator = await pipeline("text-generation", MODEL_ID, {
-          dtype: DTYPE,
-          revision: REVISION,
-          device: "webgpu",
-          progress_callback: (p) => {
-            if (p.status !== "progress_total") return;
-            const percent = Math.round(p.progress);
-            setStatus(`Downloading model... ${percent}%`);
-          },
-        });
-        const seconds = ((performance.now() - startedAt) / 1000).toFixed(1);
-        setStatus(`Ready in ${seconds}s`);
-        setMetrics("tokens/sec: -");
-        showExamples();
-        updateComposer();
-      }
-      async function sendMessage(overrideText) {
-        if (isGenerating) {
-          stoppingCriteria.interrupt();
-          setStatus("Stopping...");
-          return;
-        }
-        const text = (overrideText ?? promptEl.value).trim();
-        if (!text || !generator) {
-          return;
-        }
-        isGenerating = true;
-        updateComposer();
-        stoppingCriteria.reset();
-        addMessage("user", text);
-        const assistantNode = addMessage("assistant", "");
-        promptEl.value = "";
-        conversation.push({ role: "user", content: text });
-        let streamedText = "";
-        let tokenCount = 0;
-        let decodeStartedAt = null;
-        clearCenterState();
-        setStatus("Generating...");
-        setMetrics("tokens/sec: -");
-        try {
-          const output = await generator(conversation, {
-            max_new_tokens: MAX_NEW_TOKENS,
-            do_sample: false,
-            stopping_criteria: stoppingCriteria,
-            streamer: new TextStreamer(generator.tokenizer, {
-              skip_prompt: true,
-              skip_special_tokens: true,
-              callback_function: (chunk) => {
-                streamedText += chunk;
-                setStreamingMessage(assistantNode, streamedText);
-              },
-              token_callback_function: () => {
-                const now = performance.now();
-                if (decodeStartedAt === null) {
-                  decodeStartedAt = now;
-                }
-                tokenCount += 1;
-                if (tokenCount < 2) {
-                  setMetrics("tokens/sec: -");
-                  return;
-                }
-                const elapsedSeconds = Math.max(
-                  (now - decodeStartedAt) / 1000,
-                  0.001,
-                );
-                const tokensPerSecond = (
-                  (tokenCount - 1) /
-                  elapsedSeconds
-                ).toFixed(1);
-                setMetrics(`tokens/sec: ${tokensPerSecond}`);
-              },
-            }),
-          });
-          const assistantText =
-            output?.[0]?.generated_text?.at(-1)?.content?.trim() ||
-            streamedText.trim() ||
-            "No response generated.";
-          assistantNode.textContent = assistantText;
-          conversation.push({ role: "assistant", content: assistantText });
-          if (tokenCount >= 2 && decodeStartedAt !== null) {
-            const elapsedSeconds = Math.max(
-              (performance.now() - decodeStartedAt) / 1000,
-              0.001,
-            );
-            const tokensPerSecond = ((tokenCount - 1) / elapsedSeconds).toFixed(
-              1,
-            );
-            setMetrics(`tokens/sec: ${tokensPerSecond}`);
-          } else {
-            setMetrics("tokens/sec: -");
-          }
-          setStatus("Ready");
-        } catch (error) {
-          console.error(error);
-          assistantNode.textContent =
-            "Something went wrong while generating a response.";
-          assistantNode.classList.add("error");
-          setStatus(error.message, { error: true });
-          setMetrics("tokens/sec: -");
-        } finally {
-          isGenerating = false;
-          updateComposer();
-          if (generator && !loadFailed) {
-            promptEl.focus();
-          }
-        }
-      }
-      sendButton.addEventListener("click", sendMessage);
-      resetButton.addEventListener("click", resetChat);
-      promptEl.addEventListener("keydown", (event) => {
-        if (event.key === "Enter" && !event.shiftKey) {
-          event.preventDefault();
-          sendMessage();
-        }
-      });
-      updateComposer();
-      loadModel().catch((error) => {
-        console.error(error);
-        loadFailed = true;
-        setStatus(error.message, { error: true });
-        setMetrics("tokens/sec: -");
-        updateComposer();
-      });
-    </script>
-  </body>
-</html>