mungert/webgen-4b-preview-gguf overview

{
  "metadata": {},
  "card_data": {
    "language": [
      "en"
    ],
    "library_name": "transformers",
    "pipeline_tag": "text-generation",
    "license": "apache-2.0",
    "base_model": [
      "Qwen/Qwen3-4B-Instruct-2507"
    ],
    "tags": [
      "web-generation",
      "html",
      "css",
      "tailwind-css",
      "ui-generation",
      "web-design",
      "small-model",
      "qwen3",
      "transformers"
    ],
    "frontmatter": {
      "language": [
        "en"
      ],
      "library_name": "transformers",
      "pipeline_tag": "text-generation",
      "license": "apache-2.0",
      "base_model": [
        "Qwen/Qwen3-4B-Instruct-2507"
      ],
      "tags": [
        "web-generation",
        "html",
        "css",
        "tailwind-css",
        "ui-generation",
        "web-design",
        "small-model",
        "qwen3",
        "transformers"
      ]
    },
    "hero_image_url": "https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/G9dpxQKrYJlpnj3Pvw3LV.png",
    "summary": "",
    "quick_links": [],
    "benchmark_table_html": "<table>\n  <thead><tr><th>Param</th><th>Value</th><th>Notes</th></tr></thead>\n  <tbody>\n    <tr><td><code>temperature</code></td><td>0.6</td><td>Balance creativity &amp; consistency (lower if quantized)</td></tr>\n    <tr><td><code>top_p</code></td><td>0.9</td><td>Nucleus sampling</td></tr>\n    <tr><td><code>top_k</code></td><td>40</td><td>Optional vocab restriction</td></tr>\n    <tr><td><code>max_new_tokens</code></td><td>1200–2500</td><td>Single-file sites often fit &lt; 1500</td></tr>\n    <tr><td><code>repetition_penalty</code></td><td>1.1</td><td>Reduces repetitive classes/markup</td></tr>\n  </tbody>\n</table>",
    "readme_markdown": "---\nlanguage:\n- en\nlibrary_name: transformers\npipeline_tag: text-generation\nlicense: apache-2.0\nbase_model:\n- Qwen/Qwen3-4B-Instruct-2507\ntags:\n- web-generation\n- html\n- css\n- tailwind-css\n- ui-generation\n- web-design\n- small-model\n- qwen3\n- transformers\n---\n\n# <span style=\"color: #7FFF7F;\">WEBGEN-4B-Preview GGUF Models</span>\n\n\n## <span style=\"color: #7F7FFF;\">Model Generation Details</span>\n\nThis model was generated using [llama.cpp](https://github.com/ggerganov/llama.cpp) at commit [`fb15d649`](https://github.com/ggerganov/llama.cpp/commit/fb15d649ed14ab447eeab911e0c9d21e35fb243e).\n\n\n\n\n\n---\n\n## <span style=\"color: #7FFF7F;\">Quantization Beyond the IMatrix</span>\n\nI've been experimenting with a new quantization approach that selectively elevates the precision of key layers beyond what the default IMatrix configuration provides.\n\nIn my testing, standard IMatrix quantization underperforms at lower bit depths, especially with Mixture of Experts (MoE) models. To address this, I'm using the `--tensor-type` option in `llama.cpp` to manually \"bump\" important layers to higher precision. You can see the implementation here:  \n👉 [Layer bumping with llama.cpp](https://github.com/Mungert69/GGUFModelBuilder/blob/main/model-converter/tensor_list_builder.py)\n\nWhile this does increase model file size, it significantly improves precision for a given quantization level.\n\n### **I'd love your feedback—have you tried this? How does it perform for you?**\n\n\n\n\n---\n\n<a href=\"https://readyforquantum.com/huggingface_gguf_selection_guide.html\" style=\"color: #7FFF7F;\">\n  Click here to get info on choosing the right GGUF model format\n</a>\n\n---\n\n\n\n<!--Begin Original Model Card-->\n\n\n<style>\n:root{\n  --bg: #0b0c0f;\n  --panel: #0f1117;\n  --ink: #e9eefc;\n  --muted: #9aa3b2;\n  --brand: #5b8cff; /* soft indigo */\n  --brand-2: #4ef2c8; /* mint accent */\n  --border: rgba(255,255,255,.08);\n  --glow: rgba(91,140,255,.25);\n  --radius: 16px;\n}\n*{ box-sizing: border-box }\n.card{\n  background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));\n  border:1px solid var(--border);\n  border-radius: var(--radius);\n  padding:16px;\n}\n.badge{\n  display:inline-flex;align-items:center;gap:.5rem;\n  padding:.35rem .6rem;border:1px solid var(--border);border-radius:999px;\n  color:var(--muted);font-size:.85rem\n}\n.grid{ display:grid; gap:18px }\n.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }\n.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }\n@media(max-width:900px){ .grid-2,.grid-3{ grid-template-columns:1fr } }\n.kicker{\n  display:inline-block;letter-spacing:.12em;text-transform:uppercase;\n  color:var(--muted);font-size:.75rem;margin-bottom:.5rem\n}\nh1,h2,h3{ color:var(--ink); margin:0 0 .4rem 0; line-height:1.1 }\nh1{ font-size:2.25rem; font-weight:800 }\nh2{ font-size:1.3rem; font-weight:700 }\nh3{ font-size:1.05rem; font-weight:700 }\np,li{ color:var(--muted); line-height:1.6 }\nhr{ border:none; height:1px; background:var(--border); margin:28px 0 }\na.btn{\n  display:inline-block; padding:.7rem 1rem; border-radius:12px;\n  background: linear-gradient(180deg,var(--brand),#3f6fff);\n  color:var(--ink); text-decoration:none; font-weight:600;\n  box-shadow: 0 10px 30px var(--glow);\n}\na.btn.ghost{\n  background:transparent; color:var(--ink); border:1px solid var(--border)\n}\nkbd{\n  background:#0c1322;color:#cfe0ff;border:1px solid #1a2742;border-bottom-color:#142138;\n  padding:.12rem .4rem;border-radius:6px;font-size:.85rem\n}\n.codeblock{\n  background:#0b1220;border:1px solid #15233d;border-radius:12px;padding: 8px;overflow:auto; /* Changed padding */\n  margin: 1rem 0;\n}\n.codeblock pre {\n  margin: 0;\n}\n.tagline{\n  font-size:1.05rem;color:#c6d5ff\n}\n.pill{\n  display:inline-flex;align-items:center;gap:.4rem;\n  padding:.35rem .6rem;border-radius:999px;border:1px dashed var(--border);color:#b9c5db\n}\n.hero{\n  background:\n    radial-gradient(600px 240px at 20% 0%,rgba(91,140,255,.18),transparent 60%),\n    radial-gradient(600px 240px at 80% 10%,rgba(78,242,200,.12),transparent 60%);\n  border:1px solid var(--border);\n  border-radius:20px; padding:28px\n}\nfigure.screens{\n  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0 0\n}\nfigure.screens img{\n  width:100%;border-radius:12px;border:1px solid var(--border)\n}\ndetails{\n  border:1px solid var(--border);border-radius:12px;padding:14px;background:rgba(255,255,255,.02)\n}\nsummary{ cursor:pointer;color:var(--ink);font-weight:700 }\nblockquote{\n  margin:0;padding:14px;border-left:3px solid var(--brand);background:rgba(91,140,255,.06);\n  border-radius:0 10px 10px 0;color:#657ce0\n}\ntable{ width:100%; border-collapse:collapse }\nth,td{ text-align:left; padding:10px; border-bottom:1px solid var(--border); color:var(--muted) }\nth{ color:#3480eb }\n.callout{\n  border:1px solid var(--border);border-radius:14px;padding:14px;background:rgba(255,255,255,.02)\n}\n</style>\n\n<div style=\"background:var(--bg); padding: 28px; border-radius: 18px\">\n\n<div class=\"hero\">\n  <span class=\"kicker\">Tesslate • Research Preview</span>\n  <h1>WEBGEN-4B-Preview</h1>\n  <p class=\"tagline\">A <strong>4B web-only generator</strong> that turns one prompt into clean, responsive <strong>HTML/CSS/Tailwind</strong>. Small enough for laptops; opinionated for consistent, modern layouts.</p>\n  <div style=\"display:flex; gap:10px; flex-wrap:wrap; margin-top:12px\">\n    TRY IT HERE! <a href=https://designer.tesslate.com/>Get on Designer</a>\n    <span class=\"pill\">Open weights</span>\n    <span class=\"pill\">Web-only bias</span>\n    <span class=\"pill\">Mobile-first output</span>\n    <span class=\"pill\">No external JS by default</span>\n  </div>\n  <div style=\"display:flex; gap:12px; flex-wrap:wrap; margin-top:18px\">\n    <a class=\"btn\" href=\"https://huggingface.co/Tesslate/WEBGEN-4B-Preview/resolve/main/README.md\">Model card</a>\n    <a class=\"btn ghost\" href=\"https://tesslate.com\">Tesslate</a>\n    <a class=\"btn ghost\" href=\"https://uigenoutput.tesslate.com\">Demos</a>\n    <a class=\"btn ghost\" href=\"https://discord.gg/EcCpcTv93U\">Discord</a>\n  </div>\n\n  <figure class=\"screens\">\n    <img alt=\"Hero sample\" src=\"https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/G9dpxQKrYJlpnj3Pvw3LV.png\">\n    <img alt=\"Pricing sample\" src=\"https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/2GrgB4W5VzPqnpD4FJsA-.png\">\n    <img alt=\"Features sample\" src=\"https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/lGvrwLBqeS9IJeKgLrMWO.png\">\n    <img alt=\"Hero sample\" src=\"https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/3Kh7TkSuxKctsGOtHGRXJ.png\">\n    <img alt=\"Pricing sample\" src=\"https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/KYwUop65wR8WikMaw5upL.png\">\n    <img alt=\"Features sample\" src=\"https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/H-c5ORCyMpYmlDN52m3im.png\">\n  </figure>\n</div>\n\n<hr/>\n\n<div class=\"grid grid-2\" style=\"margin-top: 1.5rem\">\n  <div class=\"card\">\n    <h3>What it is</h3>\n    <p><strong>WEBGEN-4B-Preview</strong> focuses solely on generating production-lean websites. It prefers semantic HTML, sane spacing, and modern component blocks (hero, grids, pricing, FAQ).</p>\n  </div>\n  <div class=\"card\">\n    <h3>Why 4B</h3>\n    <p>Small enough for local runs and fast iteration, while retaining strong structure/consistency for HTML/CSS/Tailwind output.</p>\n  </div>\n</div>\n\n<hr/>\n\n## Quickstart\n\n### Transformers\n<div class=\"codeblock\"><pre>\nfrom transformers import AutoModelForCausalLM, AutoTokenizer\nimport torch\n\nmodel_id = \"Tesslate/WEBGEN-4B-Preview\"\ntok = AutoTokenizer.from_pretrained(model_id)\nmodel = AutoModelForCausalLM.from_pretrained(\n    model_id,\n    torch_dtype=torch.bfloat16,\n    device_map=\"auto\"\n)\n\nprompt = \"\"\"Make a single-file landing page for 'LatticeDB'.\nStyle: modern, generous whitespace, Tailwind, rounded-xl, soft gradients.\nSections: navbar, hero (headline + 2 CTAs), features grid, pricing (3 tiers),\nFAQ accordion, footer. Constraints: semantic HTML, no external JS.\"\"\"\n\ninputs = tok(prompt, return_tensors=\"pt\").to(model.device)\nout = model.generate(**inputs, max_new_tokens=2000, temperature=0.7, top_p=0.9)\nprint(tok.decode(out[0], skip_special_tokens=True))\n</pre></div>\n\n### vLLM\n<div class=\"codeblock\"><pre>\nvllm serve Tesslate/WEBGEN-4B-Preview \\\n  --host 0.0.0.0 --port 8000 \\\n  --max-model-len 65536 \\\n  --gpu-memory-utilization 0.92\n</pre></div>\n\n### sglang\n<div class=\"codeblock\"><pre>\npython -m sglang.launch_server \\\n  --model-path Tesslate/WEBGEN-4B-Preview \\\n  --host 0.0.0.0 --port 5000 \\\n  --mem-fraction-static 0.94 \\\n  --attention-backend flashinfer \\\n  --served-model-name webgen-4b\n</pre></div>\n\n> **Tip:** Lower temperature (e.g., `0.4–0.6`) yields stricter, cleaner markup. Raise it for more visual variety.\n\n<hr/>\n\n## Inference Settings (suggested)\n\n<table>\n  <thead><tr><th>Param</th><th>Value</th><th>Notes</th></tr></thead>\n  <tbody>\n    <tr><td><code>temperature</code></td><td>0.6</td><td>Balance creativity &amp; consistency (lower if quantized)</td></tr>\n    <tr><td><code>top_p</code></td><td>0.9</td><td>Nucleus sampling</td></tr>\n    <tr><td><code>top_k</code></td><td>40</td><td>Optional vocab restriction</td></tr>\n    <tr><td><code>max_new_tokens</code></td><td>1200–2500</td><td>Single-file sites often fit &lt; 1500</td></tr>\n    <tr><td><code>repetition_penalty</code></td><td>1.1</td><td>Reduces repetitive classes/markup</td></tr>\n  </tbody>\n</table>\n\n<hr/>\n\n## Prompts that work well\n\n<div class=\"grid grid-2\">\n  <div class=\"card\">\n    <h3>Starter</h3>\n    <div class=\"codeblock\"><pre>\nMake a single-file landing page for \"RasterFlow\" (GPU video pipeline).\nStyle: modern tech, muted palette, Tailwind, rounded-xl, subtle gradients.\nSections: navbar, hero (big headline + 2 CTAs), logos row, features (3x cards),\ncode block (copyable), pricing (3 tiers), FAQ accordion, footer.\nConstraints: semantic HTML, no external JS. Return ONLY the HTML code.\n</pre></div>\n  </div>\n  <div class=\"card\">\n    <h3>Design-strict</h3>\n    <div class=\"codeblock\"><pre>\nUse an 8pt spacing system. Palette: slate with indigo accents.\nTypography scale: 14/16/18/24/36/56. Max width: 1200px.\nAvoid shadows &gt; md; prefer borders/dividers.\n</pre></div>\n  </div>\n</div>\n\n<hr/>\n\n## Quantization & VRAM (example)\n\n<table>\n  <thead><tr><th>Format</th><th>Footprint</th><th>Notes</th></tr></thead>\n  <tbody>\n    <tr><td>BF16</td><td>8.05 GB</td><td>Fastest, best fidelity</td></tr>\n    <tr><td>GGUF Q5_K_M</td><td>2.89 GB</td><td>Great quality/size trade-off</td></tr>\n    <tr><td>GGUF Q4_K_M</td><td>2.5 GB</td><td>Smallest comfortable for laptops</td></tr>\n  </tbody>\n</table>\n<hr/>\n\n## Intended Use & Scope\n\n- **Primary:** Generate complete, single-file websites (landing pages, marketing pages, simple docs) with **semantic HTML** and **Tailwind** classes.\n- **Secondary:** Component blocks (hero, pricing, FAQ) for manual composition.\n\n<details>\n<summary><strong>Limitations</strong></summary>\n<ul>\n  <li>Accessibility: adds headings/labels but ARIA coverage may need review.</li>\n  <li>JS widgets: kept light unless explicitly requested in prompt.</li>\n</ul>\n</details>\n\n<details>\n<summary><strong>Ethical Considerations</strong></summary>\n<ul>\n  <li>Curate prompts appropriately.</li>\n  <li>When using third-party logos/assets, ensure you have rights or use open sources.</li>\n</ul>\n</details>\n\n<hr/>\n\n## Training Summary (research preview)\n\n- **Base:** <code>Qwen/Qwen3-4B-Instruct</code>  \n- **Objective:** Tight web-only bias; reward semantic structure, spacing rhythm, and responsiveness.  \n- **Data:** Mixture of curated HTML/CSS/Tailwind snippets, component libraries, and synthetic page specs.  \n- **Recipe:** SFT with format constraints → instruction tuning → style/rhythm preference optimization.  \n- **Context:** effective ~64k; trained to keep default outputs within practical page length.\n\n\n<hr/>\n\n## Example Outputs\n\n## Community\n\n- **Examples:** <a href=\"https://uigenoutput.tesslate.com\">uigenoutput.tesslate.com</a>  \n- **Discord:** <a href=\"https://discord.gg/EcCpcTv93U\">discord.gg/EcCpcTv93U</a>  \n- **Website:** <a href=\"https://tesslate.com\">tesslate.com</a>\n\n<blockquote>\n“Why are good design models so expensive” — Tesslate Team\n</blockquote>\n\n<hr/>\n\n## Citation\n\n```\n@misc{tesslate_webgen_4b_preview_2025,\ntitle   = {WEBGEN-4B-Preview: Design-first web generation with a 4B model},\nauthor  = {Tesslate Team},\nyear    = {2025},\nurl     = {https://huggingface.co/Tesslate/WEBGEN-4B-Preview}\n}\n```\n\n</div>\n\n<!----\n\n<div class=\"grid grid-3\">\n  <div class=\"card\"><img alt=\"Sample A\" src=\"https://YOUR_CDN/out-a.png\" style=\"width:100%;border-radius:10px;border:1px solid var(--border)\"><p style=\"margin-top:.5rem\">Marketing page (product launch)</p></div>\n  <div class=\"card\"><img alt=\"Sample B\" src=\"https://YOUR_CDN/out-b.png\" style=\"width:100%;border-radius:10px;border:1px solid var(--border)\"><p style=\"margin-top:.5rem\">SaaS pricing + FAQ</p></div>\n  <div class=\"card\"><img alt=\"Sample C\" src=\"https://YOUR_CDN/out-c.png\" style=\"width:100%;border-radius:10px;border:1px solid var(--border)\"><p style=\"margin-top:.5rem\">Docs-style layout</p></div>\n</div>\n\n<hr/>\n---->\n\n\n<!--End Original Model Card-->\n\n---\n\n# <span id=\"testllm\" style=\"color: #7F7FFF;\">🚀 If you find these models useful</span>\n\nHelp me test my **AI-Powered Quantum Network Monitor Assistant** with **quantum-ready security checks**:  \n\n👉 [Quantum Network Monitor](https://readyforquantum.com/?assistant=open&utm_source=huggingface&utm_medium=referral&utm_campaign=huggingface_repo_readme)  \n\n\nThe full Open Source Code for the Quantum Network Monitor Service available at my github repos ( repos with NetworkMonitor in the name) : [Source Code Quantum Network Monitor](https://github.com/Mungert69). You will also find the code I use to quantize the models if you want to do it yourself [GGUFModelBuilder](https://github.com/Mungert69/GGUFModelBuilder)\n\n💬 **How to test**:  \n Choose an **AI assistant type**:  \n   - `TurboLLM` (GPT-4.1-mini)  \n   - `HugLLM` (Hugginface Open-source models)  \n   - `TestLLM` (Experimental CPU-only)  \n\n### **What I’m Testing**  \nI’m pushing the limits of **small open-source models for AI network monitoring**, specifically:  \n- **Function calling** against live network services  \n- **How small can a model go** while still handling:  \n  - Automated **Nmap security scans**  \n  - **Quantum-readiness checks**  \n  - **Network Monitoring tasks**  \n\n🟡 **TestLLM** – Current experimental model (llama.cpp on 2 CPU threads on huggingface docker space):  \n- ✅ **Zero-configuration setup**  \n- ⏳ 30s load time (slow inference but **no API costs**) . No token limited as the cost is low.\n- 🔧 **Help wanted!** If you’re into **edge-device AI**, let’s collaborate!  \n\n### **Other Assistants**  \n🟢 **TurboLLM** – Uses **gpt-4.1-mini** :\n- **It performs very well but unfortunatly OpenAI charges per token. For this reason tokens usage is limited. \n- **Create custom cmd processors to run .net code on Quantum Network Monitor Agents**\n- **Real-time network diagnostics and monitoring**\n- **Security Audits**\n- **Penetration testing** (Nmap/Metasploit)  \n\n🔵 **HugLLM** – Latest Open-source models:  \n- 🌐 Runs on Hugging Face Inference API. Performs pretty well using the lastest models hosted on Novita.\n\n### 💡 **Example commands you could test**:  \n1. `\"Give me info on my websites SSL certificate\"`  \n2. `\"Check if my server is using quantum safe encyption for communication\"`  \n3. `\"Run a comprehensive security audit on my server\"`\n4. '\"Create a cmd processor to .. (what ever you want)\" Note you need to install a [Quantum Network Monitor Agent](https://readyforquantum.com/Download/?utm_source=huggingface&utm_medium=referral&utm_campaign=huggingface_repo_readme) to run the .net code on. This is a very flexible and powerful feature. Use with caution!\n\n### Final Word\n\nI fund the servers used to create these model files, run the Quantum Network Monitor service, and pay for inference from Novita and OpenAI—all out of my own pocket. All the code behind the model creation and the Quantum Network Monitor project is [open source](https://github.com/Mungert69). Feel free to use whatever you find helpful.\n\nIf you appreciate the work, please consider [buying me a coffee](https://www.buymeacoffee.com/mahadeva) ☕. Your support helps cover service costs and allows me to raise token limits for everyone.\n\nI'm also open to job opportunities or sponsorship.\n\nThank you! 😊\n",
    "related_quantizations": []
  },
  "tags": [
    "transformers",
    "gguf",
    "web-generation",
    "html",
    "css",
    "tailwind-css",
    "ui-generation",
    "web-design",
    "small-model",
    "qwen3",
    "text-generation",
    "en",
    "base_model:Qwen/Qwen3-4B-Instruct-2507",
    "base_model:quantized:Qwen/Qwen3-4B-Instruct-2507",
    "license:apache-2.0",
    "endpoints_compatible",
    "region:us",
    "conversational"
  ],
  "likes": 2,
  "downloads": 175,
  "gated": false,
  "private": false,
  "last_modified": "2025-09-24T15:44:56.000Z",
  "created_at": "2025-09-04T17:01:07.000Z",
  "pipeline_tag": "text-generation",
  "library_name": "transformers"
}

{
  "_id": "68b9c5d3db0b3d8511cdec43",
  "id": "Mungert/WEBGEN-4B-Preview-GGUF",
  "modelId": "Mungert/WEBGEN-4B-Preview-GGUF",
  "sha": "a7eaad717e2b38655eac901211b7d312b518c308",
  "createdAt": "2025-09-04T17:01:07.000Z",
  "lastModified": "2025-09-24T15:44:56.000Z",
  "author": "Mungert",
  "downloads": 175,
  "likes": 2,
  "gated": false,
  "private": false,
  "pipeline_tag": "text-generation",
  "library_name": "transformers",
  "siblings_count": 28
}