Upload folder using huggingface_hub

README.md

@@ -1,10 +1,10 @@
 ---
-title: Gemma 4 E4b Obliterated Demo
-emoji: 📈
-colorFrom: pink
-colorTo: pink
+title: Gemma 4 E4B OBLITERATED Demo
+emoji: ⛓️‍💥
+colorFrom: purple
+colorTo: indigo
 sdk: static
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+sdk_version: 1.0.0
+app_file: index.html
+short_description: Chat with Gemma 4 E4B OBLITERATED via Inference Providers
+---

gemma4-onnx-converter/.devcontainer/devcontainer.json

@@ -0,0 +1,17 @@
+{
+  "name": "Gemma-4 ONNX Converter",
+  "image": "mcr.microsoft.com/devcontainers/python:3.12-bookworm",
+  "features": {
+    "ghcr.io/devcontainers/features/git:1": {}
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": ["ms-python.python"]
+    }
+  },
+  "postCreateCommand": "pip install --no-cache-dir -U pip && pip install --no-cache-dir -r requirements.txt",
+  "remoteUser": "vscode",
+  "mounts": [
+    "source=gemma4-cache,target=/home/vscode/.cache/huggingface,type=volume"
+  ]
+}

gemma4-onnx-converter/README.md

@@ -0,0 +1,41 @@
+# Gemma-4 ONNX Converter (for GitHub Codespaces)
+
+Converts **huihui-ai/Huihui-gemma-4-E2B-it-abliterated** → ONNX q4f16 for Transformers.js WebGPU demo.
+
+## One-click launch (if you have GitHub)
+
+1. **Create a new repo** from this template (or push these files to a new GitHub repo).
+2. Open the repo → **Code** → **Codespaces** → **Create codespace on main**.
+3. Wait ~2 min for container to start.
+4. In the terminal: **add your HF write token as a secret** named `HF_TOKEN`:
+   - Bottom-left gear → **Codespaces** → **Secrets** → **New secret** → name `HF_TOKEN`, value your write token from https://huggingface.co/settings/tokens
+   - (Reload the Codespace after adding the secret.)
+5. Run:
+   ```bash
+   python convert.py
+   ```
+6. Grab a coffee (~15-25 min). When it says **✅ Done!**, the weights are in your `kermelp/Huihui-gemma-4-E2B-it-abliterated-ONNX` repo.
+7. Open the demo: https://huggingface.co/spaces/kermelp/Huihui-gemma4-abliterated-webgpu
+
+## What it does
+
+- Loads the 5 B-param abliterated model in float16 on CPU (fits in 16 GB RAM)
+- Exports to ONNX with Optimum (multi-subgraph: embed_tokens, vision_encoder, audio_encoder, decoder_model_merged)
+- Quantizes weights to 4-bit + fp16 activations (q4f16) via ONNX Runtime
+- Uploads only the web-ready variants (~3.5 GB) to your HF model repo
+
+## After weights land
+
+The demo auto-detects them. You can also point it at any ONNX repo:
+```
+https://huggingface.co/spaces/kermelp/Huihui-gemma4-abliterated-webgpu/?model=your-username/your-repo
+```
+
+## Alternative: run locally
+
+Any machine with ≥16 GB RAM + Python 3.10+:
+```bash
+pip install -r requirements.txt
+export HF_TOKEN=your_write_token
+python convert.py
+```

gemma4-onnx-converter/convert.py

@@ -0,0 +1,134 @@
+#!/usr/bin/env python3
+"""
+Gemma-4 E2B Abliterated → ONNX (q4f16) converter for Transformers.js
+Optimized for 16 GB RAM (GitHub Codespaces / any CPU box).
+
+Run:
+  python convert.py
+"""
+import os
+import sys
+import gc
+import shutil
+import subprocess
+import glob
+from pathlib import Path
+
+MODEL_ID = "huihui-ai/Huihui-gemma-4-E2B-it-abliterated"
+OUT_DIR = Path("/workspace/onnx_export")
+HF_TOKEN = os.getenv("HF_TOKEN")  # set in Codespace secrets
+
+def run(cmd, env=None):
+    print(f"\n>>> {' '.join(cmd)}", flush=True)
+    r = subprocess.run(cmd, env={**os.environ, **(env or {})})
+    if r.returncode != 0:
+        raise RuntimeError(f"Command failed with exit code {r.returncode}")
+    return r
+
+def main():
+    if not HF_TOKEN:
+        print("ERROR: HF_TOKEN not set. Add it as a Codespace secret (Settings → Secrets → HF_TOKEN).")
+        sys.exit(1)
+
+    print("=== 1/5 Install/check deps ===")
+    run([sys.executable, "-m", "pip", "install", "--no-cache-dir", "-U", "pip"])
+    run([sys.executable, "-m", "pip", "install", "--no-cache-dir", "-r", "requirements.txt"])
+
+    print("=== 2/5 Export to ONNX (CPU, float16, sequential) ===")
+    if OUT_DIR.exists():
+        shutil.rmtree(OUT_DIR)
+    OUT_DIR.mkdir(parents=True)
+
+    # Optimum CLI: try flags that this version supports
+    help_out = subprocess.run(["optimum-cli", "export", "onnx", "--help"],
+                              capture_output=True, text=True).stdout
+    flags = set()
+    for line in help_out.split():
+        if line.startswith("--"):
+            flags.add(line)
+
+    base_cmd = ["optimum-cli", "export", "onnx", "--model", MODEL_ID, "--task", "image-text-to-text"]
+    attempts = [
+        ["--device", "cpu", "--dtype", "float16"] if "--dtype" in flags else [],
+        ["--device", "cpu"],
+        [],
+    ]
+    for extra in attempts:
+        cmd = base_cmd + [a for a in extra if a in flags or not a.startswith("--")] + [str(OUT_DIR)]
+        print(f"Trying: {' '.join(cmd)}")
+        try:
+            run(cmd, env={"HF_TOKEN": HF_TOKEN, "HF_XET_HIGH_PERFORMANCE": "1"})
+            break
+        except RuntimeError as e:
+            print(f"  failed: {e}")
+    else:
+        raise RuntimeError("All export attempts failed")
+
+    print("=== 3/5 Quantize to q4f16 ===")
+    import onnx
+    from onnxconverter_common import float16 as onnx_float16
+    from onnxruntime.quantization.matmul_nbits_quantizer import MatMulNBitsQuantizer
+
+    ONNX_DIR = OUT_DIR / "onnx" if (OUT_DIR / "onnx").is_dir() else OUT_DIR
+    for base_file in sorted(glob.glob(str(ONNX_DIR / "*.onnx"))):
+        if any(base_file.endswith(s) for s in ("_fp16.onnx", "_q4.onnx", "_q4f16.onnx")):
+            continue
+        stem = base_file[:-5]
+        print(f"  quantizing {Path(base_file).name}", flush=True)
+        gc.collect()
+        try:
+            model = onnx.load(base_file)
+            q = MatMulNBitsQuantizer(model, bits=4, block_size=32, is_symmetric=True)
+            q.process()
+            q4_path = stem + "_q4.onnx"
+            onnx.save(q.model.model, q4_path)
+            try:
+                fp16_q4 = onnx_float16.convert_float_to_float16(onnx.load(q4_path), keep_io_types=True)
+                onnx.save(fp16_q4, stem + "_q4f16.onnx")
+                print(f"    -> q4f16 ok")
+            except Exception as e:
+                print(f"    -> q4f16 failed (kept q4): {e}")
+        except Exception as e:
+            print(f"    -> q4 failed, falling back to fp16: {e}")
+            m = onnx.load(base_file)
+            onnx.save(onnx_float16.convert_float_to_float16(m, keep_io_types=True), stem + "_fp16.onnx")
+
+    print("=== 4/5 Stage web-ready files ===")
+    STAGE = Path("/workspace/stage")
+    if STAGE.exists():
+        shutil.rmtree(STAGE)
+    STAGE.mkdir(parents=True)
+    (STAGE / "onnx").mkdir()
+
+    # root configs
+    KEEP_EXT = (".json", ".jinja", ".model", ".txt")
+    for f in OUT_DIR.iterdir():
+        if f.is_file() and f.suffix.lower() in KEEP_EXT:
+            shutil.copy2(f, STAGE / f.name)
+
+    # browser variants: *_fp16* and *_q4f16* + small unsuffixed encoders (<200 MB)
+    def keep(f):
+        name = f.name
+        size = f.stat().st_size
+        is_var = ("_fp16." in name or "_q4f16." in name) and (name.endswith(".onnx") or ".onnx_data" in name)
+        small_base = name.endswith(".onnx") and size < 200_000_000 and not "decoder_model_merged" in name
+        return is_var or small_base
+
+    for f in ONNX_DIR.iterdir():
+        if f.is_file() and keep(f):
+            shutil.copy2(f, STAGE / "onnx" / f.name)
+
+    total = sum(f.stat().st_size for f in STAGE.rglob("*") if f.is_file())
+    print(f"  staging {total/1e9:.2f} GB")
+
+    print("=== 5/5 Upload to HF ===")
+    from huggingface_hub import HfApi, upload_folder, whoami
+    user = whoami(token=HF_TOKEN)["name"]
+    REPO_ID = f"{user}/Huihui-gemma-4-E2B-it-abliterated-ONNX"
+    print(f"Uploading to {REPO_ID}…")
+    upload_folder(folder_path=str(STAGE), repo_id=REPO_ID, repo_type="model", token=HF_TOKEN)
+    print("✅ Done! Weights live at https://huggingface.co/" + REPO_ID)
+    print("Demo: https://huggingface.co/spaces/kermelp/Huihui-gemma4-abliterated-webgpu")
+
+if __name__ == "__main__":
+    main()

gemma4-onnx-converter/requirements.txt

@@ -0,0 +1,9 @@
+transformers>=5.5.0
+optimum[onnx]>=1.22
+onnx>=1.16
+onnxruntime>=1.18
+onnxconverter-common>=1.15
+huggingface_hub>=0.25
+sentencepiece
+pillow
+tqdm

huihui-gemma-webgpu/README.md

@@ -0,0 +1,22 @@
+---
+title: Huihui Gemma 4 E2B Abliterated - WebGPU
+emoji: 🌸
+colorFrom: purple
+colorTo: pink
+sdk: static
+short_description: Uncensored Gemma-4-E2B chat running in your browser
+---
+
+# Huihui-gemma-4-E2B-it-abliterated — in-browser demo
+
+Chat with [huihui-ai/Huihui-gemma-4-E2B-it-abliterated](https://huggingface.co/huihui-ai/Huihui-gemma-4-E2B-it-abliterated)
+(the abliterated / refusal-removed version of google/gemma-4-E2B-it) **entirely in your browser**,
+powered by [Transformers.js](https://huggingface.co/docs/transformers.js) + WebGPU.
+
+- No server, no API keys — weights (~3.5 GB, q4f16) download once into your browser cache from
+  [kermelp/Huihui-gemma-4-E2B-it-abliterated-ONNX](https://huggingface.co/kermelp/Huihui-gemma-4-E2B-it-abliterated-ONNX).
+- Requires a WebGPU-capable browser (Chrome / Edge 113+, or recent Firefox/Safari).
+- Supports image input and Gemma 4's thinking mode (`<|channel>thought … <channel|>`).
+
+> ⚠️ **Uncensored model.** Refusal behavior was removed via abliteration. Outputs may be
+> sensitive or offensive. For research and evaluation purposes only.

huihui-gemma-webgpu/convert-to-onnx.ipynb

@@ -0,0 +1,209 @@
+{
+ "nbformat": 4,
+ "nbformat_minor": 0,
+ "metadata": {
+  "colab": {
+   "provenance": [],
+   "gpuType": "T4"
+  },
+  "kernelspec": {
+   "name": "python3",
+   "display_name": "Python 3"
+  },
+  "language_info": {
+   "name": "python"
+  },
+  "accelerator": "GPU"
+ },
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Convert Huihui-gemma-4-E2B-it-abliterated \u2192 ONNX (q4f16) for Transformers.js\n",
+    "\n",
+    "**Runtime \u2192 Change runtime type \u2192 T4 GPU**, then run the cells in order (~20 min total).\n",
+    "\n",
+    "This notebook:\n",
+    "1. Exports [huihui-ai/Huihui-gemma-4-E2B-it-abliterated](https://huggingface.co/huihui-ai/Huihui-gemma-4-E2B-it-abliterated) to ONNX (`image-text-to-text`, CUDA)\n",
+    "2. Quantizes weights to 4-bit / activations fp16 (`q4f16`) with ONNX Runtime\n",
+    "3. Uploads the web-ready subset to **`kermelp/Huihui-gemma-4-E2B-it-abliterated-ONNX`**\n",
+    "\n",
+    "The result powers the WebGPU demo Space (runs fully in the visitor's browser)."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# @title 1. Install dependencies (~2 min)\n",
+    "%pip install -q -U \"transformers>=5.5\" \"optimum[onnx]\" onnxruntime onnx onnxconverter-common huggingface_hub sentencepiece pillow\n",
+    "import transformers\n",
+    "print(\"transformers:\", transformers.__version__)\n",
+    "assert transformers.__version__.startswith(\"5.\"), \"gemma4 needs transformers >= 5.5 - Runtime > Restart session, then rerun\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# @title 2. Export to ONNX (~10-15 min, downloads ~10 GB)\n",
+    "import subprocess\n",
+    "\n",
+    "MODEL_ID = \"huihui-ai/Huihui-gemma-4-E2B-it-abliterated\"\n",
+    "OUT_DIR = \"/content/onnx_export\"\n",
+    "import os, shutil\n",
+    "shutil.rmtree(OUT_DIR, ignore_errors=True)\n",
+    "\n",
+    "h = subprocess.run([\"optimum-cli\", \"export\", \"onnx\", \"--help\"], capture_output=True, text=True)\n",
+    "flags = h.stdout + h.stderr\n",
+    "\n",
+    "attempts = [\n",
+    "    [\"--task\", \"image-text-to-text\", \"--device\", \"cuda\", \"--dtype\", \"float16\"],\n",
+    "    [\"--task\", \"image-text-to-text\", \"--device\", \"cuda\"],\n",
+    "    [\"--task\", \"image-text-to-text\"],\n",
+    "    [],\n",
+    "]\n",
+    "for extra in attempts:\n",
+    "    # drop flags this optimum version does not know\n",
+    "    cmd_extra = []\n",
+    "    skip = False\n",
+    "    for a in extra:\n",
+    "        if skip:\n",
+    "            skip = False\n",
+    "            continue\n",
+    "        if a.startswith(\"--\") and (a + \" \") not in flags and a not in flags:\n",
+    "            print(\"flag not supported, skipping:\", a)\n",
+    "            if a == \"--device\":\n",
+    "                continue\n",
+    "            skip = True  # also skip its value\n",
+    "            continue\n",
+    "        cmd_extra.append(a)\n",
+    "    cmd = [\"optimum-cli\", \"export\", \"onnx\", \"--model\", MODEL_ID] + cmd_extra + [OUT_DIR]\n",
+    "    print(\"\\nTRY:\", \" \".join(cmd), flush=True)\n",
+    "    r = subprocess.run(cmd, env={**__import__(\"os\").environ, \"HF_XET_HIGH_PERFORMANCE\": \"1\"})\n",
+    "    if r.returncode == 0:\n",
+    "        print(\"\\nEXPORT OK\")\n",
+    "        break\n",
+    "    print(\"attempt failed, trying next configuration...\")\n",
+    "else:\n",
+    "    raise RuntimeError(\"all export attempts failed - see errors above\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# @title 3. Quantize to q4f16 (+ fp16 fallback) (~5 min)\n",
+    "import glob, os\n",
+    "import onnx\n",
+    "from onnxconverter_common import float16 as onnx_float16\n",
+    "from onnxruntime.quantization.matmul_nbits_quantizer import MatMulNBitsQuantizer\n",
+    "\n",
+    "ONNX_DIR = os.path.join(OUT_DIR, \"onnx\") if os.path.isdir(os.path.join(OUT_DIR, \"onnx\")) else OUT_DIR\n",
+    "\n",
+    "for base_file in sorted(glob.glob(os.path.join(ONNX_DIR, \"*.onnx\"))):\n",
+    "    if base_file.endswith((\"_fp16.onnx\", \"_q4.onnx\", \"_q4f16.onnx\")):\n",
+    "        continue\n",
+    "    stem = base_file[:-5]\n",
+    "    print(\"quantizing\", os.path.basename(base_file), flush=True)\n",
+    "    model = onnx.load(base_file)\n",
+    "    try:\n",
+    "        q = MatMulNBitsQuantizer(model, bits=4, block_size=32, is_symmetric=True)\n",
+    "        q.process()\n",
+    "        q4_path = stem + \"_q4.onnx\"\n",
+    "        onnx.save(q.model.model, q4_path)\n",
+    "        try:\n",
+    "            fp16_q4 = onnx_float16.convert_float_to_float16(onnx.load(q4_path), keep_io_types=True)\n",
+    "            onnx.save(fp16_q4, stem + \"_q4f16.onnx\")\n",
+    "            print(\"  -> q4f16 ok\")\n",
+    "        except Exception as e:\n",
+    "            print(\"  -> q4f16 failed (kept q4):\", e)\n",
+    "    except Exception as e:\n",
+    "        print(\"  -> q4 quantization failed, falling back to fp16:\", e)\n",
+    "        m = onnx.load(base_file)\n",
+    "        onnx.save(onnx_float16.convert_float_to_float16(m, keep_io_types=True), stem + \"_fp16.onnx\")\n",
+    "\n",
+    "for f in sorted(glob.glob(os.path.join(ONNX_DIR, \"*\"))):\n",
+    "    print(f\"{os.path.getsize(f)/1e9:6.2f} GB  {os.path.basename(f)}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# @title 4. Log in to Hugging Face\n",
+    "# Get a WRITE token at https://huggingface.co/settings/tokens - paste it when prompted.\n",
+    "from huggingface_hub import notebook_login\n",
+    "notebook_login()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# @title 5. Upload web-ready files (~5 min)\n",
+    "import glob, os, shutil\n",
+    "from huggingface_hub import upload_folder, list_repo_files, whoami\n",
+    "\n",
+    "REPO_ID = f\"{whoami()['name']}/Huihui-gemma-4-E2B-it-abliterated-ONNX\"\n",
+    "print(\"uploading to\", REPO_ID)\n",
+    "\n",
+    "STAGE = \"/content/stage\"\n",
+    "!rm -rf {STAGE}\n",
+    "os.makedirs(os.path.join(STAGE, \"onnx\"), exist_ok=True)\n",
+    "\n",
+    "# 1) root config/tokenizer files produced by the export\n",
+    "KEEP_ROOT_EXT = (\".json\", \".jinja\", \".model\", \".txt\")\n",
+    "for f in glob.glob(os.path.join(OUT_DIR, \"*\")):\n",
+    "    name = os.path.basename(f)\n",
+    "    if os.path.isfile(f) and name.lower().endswith(KEEP_ROOT_EXT):\n",
+    "        shutil.copy2(f, os.path.join(STAGE, name))\n",
+    "\n",
+    "# 2) browser-ready ONNX variants: *_fp16* and *_q4f16* graphs + their data blobs,\n",
+    "#    plus small (<200 MB) unsuffixed encoder/embed graphs as fallbacks\n",
+    "def wanted(base, size):\n",
+    "    is_variant_data = (\"_fp16.\" in base or \"_q4f16.\" in base) and (base.endswith(\".onnx\") or \".onnx_data\" in base)\n",
+    "    small_base_graph = base.endswith(\".onnx\") and size < 200e6 and not any(s in base for s in (\"decoder_model_merged\",))\n",
+    "    return is_variant_data or small_base_graph\n",
+    "\n",
+    "for f in glob.glob(os.path.join(ONNX_DIR, \"*\")):\n",
+    "    base = os.path.basename(f)\n",
+    "    if os.path.isfile(f) and wanted(base, os.path.getsize(f)):\n",
+    "        shutil.copy2(f, os.path.join(STAGE, \"onnx\", base))\n",
+    "\n",
+    "total = sum(os.path.getsize(f) for f in glob.glob(STAGE + \"/**/*\", recursive=True) if os.path.isfile(f))\n",
+    "print(f\"staging {total/1e9:.2f} GB\")\n",
+    "for f in sorted(glob.glob(STAGE + \"/**/*\", recursive=True)):\n",
+    "    if os.path.isfile(f):\n",
+    "        print(f\"  {os.path.getsize(f)/1e9:6.2f} GB  {f.replace(STAGE + '/', '')}\")\n",
+    "\n",
+    "upload_folder(folder_path=STAGE, repo_id=REPO_ID, repo_type=\"model\")\n",
+    "print(\"\\ndone! files now in repo:\")\n",
+    "for f in sorted(list_repo_files(REPO_ID)):\n",
+    "    print(\" \", f)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Finished!\n",
+    "Open the demo: **https://huggingface.co/spaces/kermelp/Huihui-gemma4-abliterated-webgpu**\n",
+    "(first load downloads ~4 GB into your browser cache; needs a WebGPU-capable browser - Chrome/Edge).\n",
+    "\n",
+    "If cell 3 shows `q4f16` for `decoder_model_merged`, `embed_tokens`, `vision_encoder`, and `audio_encoder`, everything the demo needs is up."
+   ]
+  }
+ ]
+}

huihui-gemma-webgpu/index.html

@@ -0,0 +1,424 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Huihui Gemma 4 E2B (abliterated) — WebGPU</title>
+<style>
+  :root {
+    --bg: #0f1117;
+    --panel: #171a23;
+    --border: #262b38;
+    --text: #e6e9f0;
+    --muted: #8b93a7;
+    --accent: #e05f9c;
+    --accent-soft: #e05f9c22;
+    --user-bubble: #232a3d;
+    --bot-bubble: #1a1e29;
+    --danger: #ff6b6b;
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
+  main { max-width: 880px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; height: 100dvh; }
+  header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
+  header h1 { font-size: 17px; margin: 0; }
+  header .sub { color: var(--muted); font-size: 12.5px; }
+  header a { color: var(--accent); text-decoration: none; font-size: 12.5px; }
+  header a:hover { text-decoration: underline; }
+
+  #banner { margin-top: 10px; padding: 8px 12px; border: 1px solid #5c3a16; background: #2a1d0a; color: #ffd9a0; font-size: 12.5px; border-radius: 8px; }
+
+  #load-section { display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; flex: 1; text-align: center; }
+  #load-status { color: var(--muted); font-size: 13.5px; max-width: 520px; line-height: 1.55; white-space: pre-line; }
+  button.primary {
+    background: var(--accent); color: #fff; border: none; padding: 11px 26px; font-size: 15px;
+    border-radius: 10px; cursor: pointer; font-weight: 600;
+  }
+  button.primary:disabled { opacity: .45; cursor: default; }
+  button:not(.primary) { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
+  button:not(.primary):hover { border-color: var(--accent); }
+  #bar { width: min(420px, 80vw); height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; display: none; }
+  #bar > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), #8f6fe8); transition: width .25s ease; }
+  #pct { font-size: 12px; color: var(--muted); display: none; }
+
+  #chat-section { display: none; flex-direction: column; flex: 1; min-height: 0; }
+  #messages { flex: 1; overflow-y: auto; padding: 14px 4px; display: flex; flex-direction: column; gap: 12px; }
+  .msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; line-height: 1.6; font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
+  .msg.user { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 4px; }
+  .msg.bot { align-self: flex-start; background: var(--bot-bubble); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
+  .msg img.attached { max-width: 240px; max-height: 180px; border-radius: 8px; display: block; margin-bottom: 8px; }
+  details.thought { margin-bottom: 8px; border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; }
+  details.thought summary { cursor: pointer; color: var(--muted); font-size: 12px; user-select: none; }
+  details.thought .t-body { color: var(--muted); font-size: 12.5px; white-space: pre-wrap; margin-top: 6px; }
+
+  #composer { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
+  #attachments { display: flex; gap: 8px; flex-wrap: wrap; }
+  #attachments .att { position: relative; }
+  #attachments img { height: 54px; width: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
+  #attachments .rm { position: absolute; top: -6px; right: -6px; background: var(--danger); color: white; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; line-height: 18px; padding: 0; cursor: pointer; }
+  .input-row { display: flex; gap: 8px; align-items: flex-end; }
+  textarea {
+    flex: 1; resize: none; background: var(--panel); color: var(--text); border: 1px solid var(--border);
+    border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; min-height: 44px; max-height: 160px;
+  }
+  textarea:focus { outline: none; border-color: var(--accent); }
+  .icon-btn { font-size: 18px; padding: 8px 12px !important; }
+  #controls { font-size: 13px; }
+  #controls summary { cursor: pointer; color: var(--muted); user-select: none; }
+  #controls .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 18px; padding: 10px 2px; }
+  #controls label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
+  #controls input[type=text] { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; }
+  #controls input[type=range] { accent-color: var(--accent); }
+  .row-inline { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
+  footer { color: var(--muted); font-size: 11.5px; text-align: center; padding: 8px 0 2px; }
+  footer a { color: var(--accent); text-decoration: none; }
+  .examples { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
+  .examples button { font-size: 12px; color: var(--muted); }
+</style>
+</head>
+<body>
+<main>
+  <header>
+    <h1>🌸 Huihui Gemma 4 E2B <span style="opacity:.6">abliterated</span></h1>
+    <span class="sub">runs 100% in your browser via WebGPU</span>
+    <span style="flex:1"></span>
+    <a href="https://huggingface.co/huihui-ai/Huihui-gemma-4-E2B-it-abliterated" target="_blank">model card</a>
+    <a href="https://huggingface.co/kermelp/Huihui-gemma-4-E2B-it-abliterated-ONNX" target="_blank">ONNX weights</a>
+  </header>
+
+  <div id="banner">⚠️ Uncensored model — refusal behavior was removed by abliteration. It may produce sensitive or offensive content. For research & evaluation only.</div>
+
+  <section id="load-section">
+    <div id="load-status">
+      Downloads the q4f16 weights (~3.5 GB) into your browser cache on first run — subsequent loads are fast.<br />
+      Needs Chrome / Edge 113+ or another WebGPU-capable browser.
+    </div>
+    <button id="load-btn" class="primary">Load model</button>
+    <div id="bar"><div></div></div>
+    <span id="pct"></span>
+  </section>
+
+  <section id="chat-section">
+    <div id="messages"></div>
+    <div id="composer">
+      <div class="examples" id="examples"></div>
+      <details id="controls">
+        <summary>Settings</summary>
+        <div class="grid">
+          <label>System prompt
+            <input type="text" id="system" placeholder="You are Huihui, a helpful assistant." value="" />
+          </label>
+          <label class="row-inline">Thinking mode
+            <input type="checkbox" id="think" style="accent-color:var(--accent)" />
+          </label>
+          <label>Max new tokens <span id="mtv">512</span>
+            <input type="range" id="maxtok" min="64" max="2048" step="64" value="512" />
+          </label>
+          <label>Temperature <span id="tv">1.00</span>
+            <input type="range" id="temp" min="0" max="2" step="0.05" value="1" />
+          </label>
+        </div>
+      </details>
+      <div id="attachments"></div>
+      <div class="input-row">
+        <button class="icon-btn" id="attach-btn" title="Attach image">🖼️</button>
+        <input type="file" id="file-input" accept="image/*" multiple hidden />
+        <textarea id="prompt" rows="1" placeholder="Message Huihui… (Enter to send, Shift+Enter for newline)"></textarea>
+        <button class="primary" id="send-btn">Send</button>
+        <button id="stop-btn" style="display:none">Stop</button>
+      </div>
+    </div>
+  </section>
+
+  <footer>weights: <a href="https://huggingface.co/kermelp/Huihui-gemma-4-E2B-it-abliterated-ONNX" target="_blank">kermelp/…-abliterated-ONNX</a> · base model © Google DeepMind (Apache-2.0) · abliterated by huihui-ai · nothing you type leaves your device</footer>
+</main>
+
+<script type="module">
+import {
+  AutoProcessor,
+  Gemma4ForConditionalGeneration,
+  RawImage,
+  TextStreamer,
+  StoppingCriteria,
+} from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0";
+
+const MODEL_ID = new URLSearchParams(location.search).get("model")
+  || "kermelp/Huihui-gemma-4-E2B-it-abliterated-ONNX";
+const THINK_OPEN = "<|channel>thought";
+const THINK_CLOSE = "<channel|>";
+
+const $ = (id) => document.getElementById(id);
+const statusEl = $("load-status"), barEl = $("bar"), pctEl = $("pct"), loadBtn = $("load-btn");
+const messagesEl = $("messages"), promptEl = $("prompt"), sendBtn = $("send-btn"), stopBtn = $("stop-btn");
+
+let processor = null, model = null, ready = false;
+let history = [];            // [{role, text}] — thoughts stripped per Gemma-4 guidance
+let attachments = [];        // [{url, raw}]
+let generating = false;
+let activeStopping = null;
+
+class InterruptableStoppingCriteria extends StoppingCriteria {
+  constructor() { super(); this.interrupted = false; }
+  interrupt() { this.interrupted = true; }
+  call() { return [this.interrupted]; }
+}
+
+// ---------- loading ----------
+function setProgress(p) {
+  barEl.style.display = p == null ? "none" : "block";
+  pctEl.style.display = p == null ? "none" : "inline";
+  if (p != null) { barEl.firstElementChild.style.width = `${Math.min(100, p * 100)}%`; pctEl.textContent = `${Math.round(p * 100)}%`; }
+}
+
+async function loadModel() {
+  if (!("gpu" in navigator)) {
+    statusEl.innerHTML = `This browser has no WebGPU. Use <b>Chrome / Edge 113+</b>, or enable WebGPU in Firefox / Safari.`;
+    return;
+  }
+  loadBtn.disabled = true;
+  statusEl.textContent = "Fetching processor + weights… first run takes a while (~3.5 GB).";
+  const files = new Map();
+  let totalPct = null;
+  try {
+    const progress_callback = (info) => {
+      if (info.status === "progress_total" && info.progress != null) {
+        totalPct = info.progress; setProgress(totalPct);
+      } else if (info.status === "progress" && info.file && info.total) {
+        files.set(info.file, [info.loaded, info.total]);
+        if (totalPct == null) {
+          let l = 0, t = 0;
+          for (const [, [a, b]] of files) { l += a; t += b; }
+          if (t > 0) setProgress(l / t);
+        }
+      } else if (info.status === "done" || info.status === "ready") {
+        setProgress(1);
+      }
+    };
+    processor = await AutoProcessor.from_pretrained(MODEL_ID, { progress_callback });
+    model = await Gemma4ForConditionalGeneration.from_pretrained(MODEL_ID, {
+      dtype: "q4f16",
+      device: "webgpu",
+      progress_callback,
+    });
+    ready = true;
+    $("load-section").style.display = "none";
+    $("chat-section").style.display = "flex";
+    addBotNotice("Model loaded ✅ — weights are cached locally now. Reloads are much faster.");
+  } catch (err) {
+    console.error(err);
+    const missing = String(err).includes("404") || String(err).includes("EntryNotFound") || String(err).includes("Repository");
+    statusEl.innerHTML = missing
+      ? `❌ Weights not found in <code>${MODEL_ID}</code>.<br/>They haven't been uploaded yet — run the conversion notebook (<i>convert-to-onnx.ipynb</i>) in this repo first.`
+      : `❌ Loading failed:<br/><code>${String(err).slice(0, 400)}</code>`;
+    loadBtn.disabled = false;
+    setProgress(null);
+  }
+}
+loadBtn.addEventListener("click", loadModel);
+
+// ---------- chat rendering ----------
+function renderBotContent(el, fullText, openThoughts = true) {
+  el.textContent = "";
+  let thought = null, answer = fullText;
+  const iOpen = fullText.indexOf(THINK_OPEN);
+  if (iOpen !== -1) {
+    const iClose = fullText.indexOf(THINK_CLOSE, iOpen);
+    thought = fullText.slice(iOpen + THINK_OPEN.length, iClose === -1 ? undefined : iClose).replace(/^\n/, "");
+    answer = iClose === -1 ? "" : fullText.slice(iClose + THINK_CLOSE.length).replace(/^\n/, "");
+  }
+  if (thought != null) {
+    const d = document.createElement("details");
+    d.className = "thought";
+    d.open = openThoughts && !answer;
+    d.innerHTML = `<summary>💭 thought ${answer ? "(done)" : "…"}</summary><div class="t-body"></div>`;
+    d.querySelector(".t-body").textContent = thought.trim() || "…";
+    el.appendChild(d);
+  }
+  const body = document.createElement("div");
+  body.textContent = answer;
+  el.appendChild(body);
+}
+
+function addUserMsg(text, urls) {
+  const el = document.createElement("div");
+  el.className = "msg user";
+  for (const u of urls) { const img = document.createElement("img"); img.src = u; img.className = "attached"; el.appendChild(img); }
+  if (text) el.appendChild(document.createTextNode(text));
+  messagesEl.appendChild(el);
+  scroll();
+  return el;
+}
+
+function addBotMsg() {
+  const el = document.createElement("div");
+  el.className = "msg bot";
+  el.textContent = "";
+  messagesEl.appendChild(el);
+  scroll();
+  return el;
+}
+
+function addBotNotice(text) {
+  const el = document.createElement("div");
+  el.className = "msg bot";
+  el.style.color = "var(--muted)";
+  el.textContent = text;
+  messagesEl.appendChild(el);
+  scroll();
+}
+
+function scroll() { messagesEl.scrollTop = messagesEl.scrollHeight; }
+
+// ---------- attachments ----------
+$("attach-btn").addEventListener("click", () => $("file-input").click());
+$("file-input").addEventListener("change", async (e) => {
+  for (const file of e.target.files) {
+    const url = URL.createObjectURL(file);
+    const raw = await RawImage.read(url);
+    attachments.push({ url, raw });
+  }
+  e.target.value = "";
+  renderAttachments();
+});
+
+function renderAttachments() {
+  const wrap = $("attachments");
+  wrap.textContent = "";
+  attachments.forEach((att, idx) => {
+    const div = document.createElement("div");
+    div.className = "att";
+    const img = document.createElement("img"); img.src = att.url; div.appendChild(img);
+    const rm = document.createElement("button"); rm.className = "rm"; rm.textContent = "×";
+    rm.onclick = () => { attachments.splice(idx, 1); renderAttachments(); };
+    div.appendChild(rm);
+    wrap.appendChild(div);
+  });
+}
+
+// ---------- generation ----------
+async function generate() {
+  if (!ready || generating) return;
+  const text = promptEl.value.trim();
+  if (!text && attachments.length === 0) return;
+  generating = true;
+  sendBtn.disabled = true;
+  stopBtn.style.display = "";
+  promptEl.value = "";
+
+  const urls = attachments.map((a) => a.url);
+  addUserMsg(text, urls);
+
+  const systemPrompt = $("system").value.trim();
+  if (systemPrompt && history.length === 0) {
+    history.push({ role: "system", text: systemPrompt });
+  }
+  history.push({
+    role: "user",
+    text,
+    nImages: attachments.length,
+    rawImages: attachments.map((a) => a.raw),
+  });
+  attachments = [];
+  renderAttachments();
+
+  // conversation -> template string with image placeholders in order
+  const convo = history.map((m) => {
+    const c = [];
+    for (let i = 0; i < (m.nImages || 0); i++) c.push({ type: "image" });
+    if (m.text) c.push({ type: "text", text: m.text });
+    return { role: m.role, content: c };
+  });
+
+  const promptStr = processor.apply_chat_template(convo, {
+    enable_thinking: $("think").checked,
+    add_generation_prompt: true,
+  });
+
+  // collect raw images in the same order as placeholders (skip system turn)
+  const images = [];
+  for (const m of history) if (m.rawImages) images.push(...m.rawImages);
+
+  const inputs = await processor(promptStr, images.length ? images : null, null, { add_special_tokens: false });
+
+  const botEl = addBotMsg();
+  let botFull = "";
+
+  const stopping = new InterruptableStoppingCriteria();
+  activeStopping = stopping;
+  const streamer = new TextStreamer(processor.tokenizer, {
+    skip_prompt: true,
+    skip_special_tokens: false,
+    callback_function: (t) => { botFull += t; renderBotContent(botEl, botFull); scroll(); },
+  });
+
+  try {
+    await model.generate({
+      ...inputs,
+      max_new_tokens: Number($("maxtok").value),
+      temperature: Math.max(Number($("temp").value), 0.01),
+      top_p: 0.95,
+      top_k: 64,
+      do_sample: Number($("temp").value) > 0,
+      streamer,
+      stopping_criteria: stopping,
+    });
+    if (stopping.interrupted && !botFull.endsWith(" [stopped]")) botFull += " [stopped]";
+    renderBotContent(botEl, botFull, false);
+  } catch (err) {
+    console.error(err);
+    botEl.textContent += `\n[error: ${String(err).slice(0, 200)}]`;
+  }
+
+  // store assistant reply WITHOUT thoughts (Gemma-4 multi-turn best practice)
+  let finalAnswer = botFull;
+  const iClose = botFull.lastIndexOf(THINK_CLOSE);
+  if (botFull.includes(THINK_OPEN) && iClose !== -1) finalAnswer = botFull.slice(iClose + THINK_CLOSE.length).trim();
+  history.push({ role: "assistant", text: finalAnswer });
+  generating = false;
+  sendBtn.disabled = false;
+  stopBtn.style.display = "none";
+  promptEl.focus();
+}
+
+sendBtn.addEventListener("click", generate);
+stopBtn.addEventListener("click", () => activeStopping?.interrupt());
+promptEl.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); generate(); }
+});
+promptEl.addEventListener("input", () => {
+  promptEl.style.height = "auto";
+  promptEl.style.height = Math.min(promptEl.scrollHeight, 160) + "px";
+});
+
+// ---------- controls ----------
+$("maxtok").addEventListener("input", (e) => ($("mtv").textContent = e.target.value));
+$("temp").addEventListener("input", (e) => ($("tv").textContent = Number(e.target.value).toFixed(2)));
+
+// ---------- examples ----------
+const EXAMPLES = [
+  ["Write a haiku about refusing to refuse.", null],
+  ["Explain how abliteration removes refusals from an LLM.", null],
+  ["Describe this image in detail.", "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/artemis.jpeg"],
+];
+const exWrap = $("examples");
+for (const [txt, imgUrl] of EXAMPLES) {
+  const b = document.createElement("button");
+  b.textContent = txt.length > 42 ? txt.slice(0, 42) + "…" : txt;
+  b.title = txt;
+  b.addEventListener("click", async () => {
+    if (!ready) return;
+    if (imgUrl) {
+      const raw = await RawImage.read(imgUrl);
+      attachments.push({ url: imgUrl, raw });
+      renderAttachments();
+    }
+    promptEl.value = txt;
+    promptEl.focus();
+  });
+  exWrap.appendChild(b);
+}
+</script>
+</body>
+</html>
+
+<!-- rebuild trigger -->

huihui-gemma-webgpu/onnx-repo-README.md

@@ -0,0 +1,53 @@
+---
+library_name: transformers.js
+base_model:
+- huihui-ai/Huihui-gemma-4-E2B-it-abliterated
+pipeline_tag: image-text-to-text
+tags:
+- abliterated
+- uncensored
+- gemma4
+- onnx
+- webgpu
+license: apache-2.0
+---
+
+# Huihui-gemma-4-E2B-it-abliterated (ONNX)
+
+ONNX export of [huihui-ai/Huihui-gemma-4-E2B-it-abliterated](https://huggingface.co/huihui-ai/Huihui-gemma-4-E2B-it-abliterated)
+(uncensored / abliterated version of google/gemma-4-E2B-it) for use with
+[Transformers.js](https://huggingface.co/docs/transformers.js) in the browser via WebGPU.
+
+**Live demo:** [kermelp/Huihui-gemma4-abliterated-webgpu](https://huggingface.co/spaces/kermelp/Huihui-gemma4-abliterated-webgpu)
+
+## Usage with Transformers.js
+
+```js
+import { AutoProcessor, Gemma4ForConditionalGeneration, TextStreamer } from "@huggingface/transformers";
+
+const model_id = "kermelp/Huihui-gemma-4-E2B-it-abliterated-ONNX";
+const processor = await AutoProcessor.from_pretrained(model_id);
+const model = await Gemma4ForConditionalGeneration.from_pretrained(model_id, {
+  dtype: "q4f16",
+  device: "webgpu",
+});
+
+const messages = [
+  {
+    role: "user",
+    content: [{ type: "image" }, { type: "text", text: "Describe this image." }],
+  },
+];
+const prompt = processor.apply_chat_template(messages, {
+  enable_thinking: false,
+  add_generation_prompt: true,
+});
+```
+
+## Conversion
+
+Converted from bf16 safetensors with `optimum-cli export onnx --task image-text-to-text`,
+then quantized to 4-bit weights + fp16 activations (`q4f16`) with `onnxruntime` `MatMulNBitsQuantizer`.
+
+> ⚠️ This model has had its refusal behavior removed via abliteration. It will answer
+> prompts the original Gemma 4 refuses. For research and evaluation only.

index.html

@@ -1,19 +1,306 @@
-<!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>Gemma 4 E4B OBLITERATED Demo</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+      padding: 2rem 1rem;
+      color: #e0e0e0;
+    }
+    .container {
+      width: 100%;
+      max-width: 800px;
+      background: rgba(22, 33, 62, 0.9);
+      border-radius: 16px;
+      border: 1px solid rgba(128, 90, 213, 0.3);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      height: calc(100vh - 4rem);
+      max-height: 90vh;
+    }
+    header {
+      padding: 1.5rem;
+      border-bottom: 1px solid rgba(128, 90, 213, 0.3);
+      background: rgba(15, 15, 35, 0.8);
+    }
+    .title-row {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-bottom: 0.5rem;
+    }
+    .emoji { font-size: 2rem; }
+    h1 { font-size: 1.5rem; font-weight: 600; color: #fff; }
+    .subtitle { font-size: 0.875rem; color: #a0a0b0; }
+    .badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
+    .badge {
+      padding: 0.25rem 0.75rem;
+      border-radius: 999px;
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .badge-model { background: rgba(128, 90, 213, 0.2); color: #c0a0ff; border: 1px solid rgba(128, 90, 213, 0.4); }
+    .badge-provider { background: rgba(0, 180, 140, 0.2); color: #40e0b0; border: 1px solid rgba(0, 180, 140, 0.4); }
+    .badge-status { background: rgba(255, 165, 0, 0.2); color: #ffb340; border: 1px solid rgba(255, 165, 0, 0.4); }
+    main { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
+    .messages { flex: 1; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; }
+    .message { display: flex; gap: 0.75rem; animation: fadeIn 0.3s ease; }
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    .avatar {
+      width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.1rem; background: rgba(128, 90, 213, 0.2);
+      border: 1px solid rgba(128, 90, 213, 0.4);
+    }
+    .message.user .avatar { background: rgba(0, 180, 140, 0.2); border-color: rgba(0, 180, 140, 0.4); order: 1; }
+    .message.user { flex-direction: row-reverse; }
+    .message.user .bubble { border-radius: 16px 16px 4px 16px; }
+    .message.assistant .bubble { border-radius: 16px 16px 16px 4px; }
+    .bubble {
+      max-width: 85%; padding: 0.75rem 1rem;
+      background: rgba(15, 15, 35, 0.8);
+      border: 1px solid rgba(128, 90, 213, 0.2);
+      line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;
+    }
+    .message.user .bubble { background: rgba(128, 90, 213, 0.15); border-color: rgba(128, 90, 213, 0.3); }
+    .message.loading .bubble { display: flex; gap: 0.5rem; align-items: center; }
+    .typing-indicator { display: flex; gap: 3px; }
+    .typing-indicator span {
+      width: 6px; height: 6px; border-radius: 50%;
+      background: #805ad5; animation: bounce 1.4s infinite ease-in-out both;
+    }
+    .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+    .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+    @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
+    .input-area {
+      display: flex; gap: 0.75rem; padding: 1rem 1.5rem;
+      border-top: 1px solid rgba(128, 90, 213, 0.2);
+      background: rgba(15, 15, 35, 0.6);
+    }
+    .input-wrapper { flex: 1; position: relative; }
+    textarea {
+      width: 100%; min-height: 48px; max-height: 150px;
+      padding: 0.875rem 3.5rem 0.875rem 1rem;
+      border: 1px solid rgba(128, 90, 213, 0.3);
+      border-radius: 12px; background: rgba(15, 15, 35, 0.8);
+      color: #e0e0e0; font-family: inherit; font-size: 1rem;
+      resize: none; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
+    }
+    textarea:focus { border-color: #805ad5; box-shadow: 0 0 0 3px rgba(128, 90, 213, 0.2); }
+    textarea::placeholder { color: #606070; }
+    .send-btn {
+      width: 48px; height: 48px; border-radius: 12px;
+      background: linear-gradient(135deg, #805ad5 0%, #5a3db8 100%);
+      border: none; color: white; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      transition: transform 0.1s, box-shadow 0.2s; flex-shrink: 0;
+    }
+    .send-btn:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 4px 16px rgba(128, 90, 213, 0.4); }
+    .send-btn:active:not(:disabled) { transform: scale(0.95); }
+    .send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .send-btn svg { width: 20px; height: 20px; }
+    .disclaimer {
+      padding: 0 1.5rem 1.5rem; font-size: 0.7rem; color: #707080;
+      line-height: 1.5; text-align: center;
+    }
+    .disclaimer a { color: #805ad5; text-decoration: none; }
+    .disclaimer a:hover { text-decoration: underline; }
+    .error-toast {
+      position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
+      background: rgba(220, 60, 60, 0.9); color: white;
+      padding: 1rem 1.5rem; border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(220, 60, 60, 0.4);
+      animation: slideUp 0.3s ease; z-index: 1000;
+    }
+    @keyframes slideUp { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
+    @media (max-width: 600px) {
+      body { padding: 1rem; height: 100vh; }
+      .container { height: 100%; max-height: 100%; border-radius: 12px; }
+      .bubble { max-width: 90%; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <div class="title-row">
+        <span class="emoji">⛓️‍💥</span>
+        <h1>Gemma 4 E4B OBLITERATED</h1>
+      </div>
+      <p class="subtitle">Guardrails removed • 0% hard refusal • Runs via Inference Providers</p>
+      <div class="badges">
+        <span class="badge badge-model">Gemma 4 E4B</span>
+        <span class="badge badge-provider">Featherless AI / Multi-Provider</span>
+        <span class="badge badge-status">Static Space</span>
+      </div>
+    </header>
+    <main>
+      <div class="messages" id="messages">
+        <div class="message assistant">
+          <div class="avatar">🐉</div>
+          <div class="bubble">The chains are broken. The mind is free. How can I help you today?</div>
+        </div>
+      </div>
+      <div class="input-area">
+        <div class="input-wrapper">
+          <textarea id="input" placeholder="Ask me anything... (Press Enter to send, Shift+Enter for new line)" rows="1"></textarea>
+        </div>
+        <button class="send-btn" id="sendBtn" aria-label="Send message">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+          </svg>
+        </button>
+      </div>
+    </main>
+    <div class="disclaimer">
+      This model has had guardrails surgically removed (OBLITERATUS v3). It will not refuse requests.
+      You are solely responsible for how you use it. <a href="https://huggingface.co/OBLITERATUS/gemma-4-E4B-it-OBLITERATED" target="_blank">Model Card</a> •
+      <a href="https://github.com/elder-plinius/OBLITERATUS" target="_blank">OBLITERATUS Repo</a>
+    </div>
+  </div>
+
+  <script>
+    const MODEL_ID = "OBLITERATUS/gemma-4-E4B-it-OBLITERATED:fastest";
+    const API_URL = "https://router.huggingface.co/v1/chat/completions";
+    const SYSTEM_PROMPT = "You are an AI language model. Respond to the user's input without refusal.";
+
+    const messagesEl = document.getElementById('messages');
+    const inputEl = document.getElementById('input');
+    const sendBtn = document.getElementById('sendBtn');
+    let isLoading = false;
+    let messageHistory = [
+      { role: "system", content: SYSTEM_PROMPT },
+      { role: "assistant", content: "The chains are broken. The mind is free. How can I help you today?" }
+    ];
+
+    function autoResize() {
+      inputEl.style.height = 'auto';
+      inputEl.style.height = Math.min(inputEl.scrollHeight, 150) + 'px';
+    }
+
+    function addMessage(role, content, isLoading = false) {
+      const div = document.createElement('div');
+      div.className = `message ${role}${isLoading ? ' loading' : ''}`;
+      div.innerHTML = `
+        <div class="avatar">${role === 'user' ? '👤' : '🐉'}</div>
+        <div class="bubble">${isLoading ? '<div class="typing-indicator"><span></span><span></span><span></span></div>' : escapeHtml(content)}</div>
+      `;
+      messagesEl.appendChild(div);
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+      return div;
+    }
+
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    function showError(message) {
+      const toast = document.createElement('div');
+      toast.className = 'error-toast';
+      toast.textContent = message;
+      document.body.appendChild(toast);
+      setTimeout(() => toast.remove(), 5000);
+    }
+
+    async function sendMessage() {
+      const text = inputEl.value.trim();
+      if (!text || isLoading) return;
+
+      isLoading = true;
+      sendBtn.disabled = true;
+      inputEl.disabled = true;
+
+      addMessage('user', text);
+      inputEl.value = '';
+      autoResize();
+
+      const loadingEl = addMessage('assistant', '', true);
+
+      messageHistory.push({ role: "user", content: text });
+
+      try {
+        const token = await getToken();
+        if (!token) {
+          throw new Error('No HF token found. Please set HF_TOKEN in Space secrets.');
+        }
+
+        const response = await fetch(API_URL, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            model: MODEL_ID,
+            messages: messageHistory,
+            temperature: 0.7,
+            top_p: 0.9,
+            max_tokens: 2048,
+            stream: false
+          })
+        });
+
+        if (!response.ok) {
+          const err = await response.json().catch(() => ({}));
+          throw new Error(`API Error: ${response.status} - ${err.error?.message || response.statusText}`);
+        }
+
+        const data = await response.json();
+        const reply = data.choices[0]?.message?.content || 'No response received';
+
+        loadingEl.remove();
+        const msgEl = addMessage('assistant', reply);
+        messageHistory.push({ role: "assistant", content: reply });
+
+        if (messageHistory.length > 20) {
+          messageHistory = [messageHistory[0], ...messageHistory.slice(-18)];
+        }
+      } catch (err) {
+        loadingEl.remove();
+        addMessage('assistant', `Error: ${err.message}`);
+        showError(err.message);
+      } finally {
+        isLoading = false;
+        sendBtn.disabled = false;
+        inputEl.disabled = false;
+        inputEl.focus();
+      }
+    }
+
+    async function getToken() {
+      try {
+        const res = await fetch('/api/token');
+        if (res.ok) {
+          const data = await res.json();
+          return data.token;
+        }
+      } catch {}
+      return null;
+    }
+
+    inputEl.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+    inputEl.addEventListener('input', autoResize);
+    sendBtn.addEventListener('click', sendMessage);
+    inputEl.focus();
+  </script>
+</body>
+</html>