gabriellarson/webgen-4b-preview-gguf overview

{
  "metadata": {},
  "card_data": {
    "language": [
      "en"
    ],
    "library_name": "transformers",
    "pipeline_tag": "text-generation",
    "license": "apache-2.0",
    "base_model": [
      "Tesslate/WEBGEN-4B-Preview"
    ],
    "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": [
        "Tesslate/WEBGEN-4B-Preview"
      ],
      "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": "/* Theme-aware design tokens (light by default) */ :root{ color-scheme: light dark; /* LIGHT */ --bg: #ffffff; --panel: #f6f8fc; --ink: #0b0c0f; --muted: #556070; --tagline: #2a3b6b;             /* nicer on light bg */ --brand: #3f6fff;               /* indigo */ --brand-2: #22e3bb;             /* mint accent */ --border: rgba(2, 6, 23, .08); --glow: rgba(63, 111, 255, .22); --radius: 16px; /* component-specific light defaults */ --kbd-bg: #eef2ff; --kbd-ink: #233876; --kbd-b1: #c8d4ff; --kbd-b2: #b6c6ff; --code-bg: #f4f6fb; --code-bd: #e3e9f3; --bq-bg: rgba(63,111,255,.07); --bq-ink: #1b264f; } /* DARK overrides via OS preference */ @media (prefers-color-scheme: dark) { :root{ --bg: #0b0c0f; --panel: #0f1117; --ink: #e9eefc; --muted: #9aa3b2; --tagline: #c6d5ff; --brand: #5b8cff; --brand-2: #4ef2c8; --border: rgba(255,255,255,.08); --glow: rgba(91,140,255,.25); --kbd-bg: #0c1322; --kbd-ink: #cfe0ff; --kbd-b1: #1a2742; --kbd-b2: #142138; --code-bg: #0b1220; --code-bd: #15233d; --bq-bg: rgba(91,140,255,.06); --bq-ink: #cfe0ff; } } /* DARK overrides via site toggle (HF uses html[data-theme]) */ html[data-theme=\"dark\"], body[data-theme=\"dark\"]{ --bg: #0b0c0f; --panel: #0f1117; --ink: #e9eefc; --muted: #9aa3b2; --tagline: #c6d5ff; --brand: #5b8cff; --brand-2: #4ef2c8; --border: rgba(255,255,255,.08); --glow: rgba(91,140,255,.25); --kbd-bg: #0c1322; --kbd-ink: #cfe0ff; --kbd-b1: #1a2742; --kbd-b2: #142138; --code-bg: #0b1220; --code-bd: #15233d; --bq-bg: rgba(91,140,255,.06); --bq-ink: #cfe0ff; } *{ box-sizing: border-box } /* Cards & layout */ .card{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border:1px solid var(--border); border-radius: var(--radius); padding:24px; } .grid{ display:grid; gap:18px } .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } @media(max-width:900px){ .grid-2,.grid-3{ grid-template-columns:1fr } } /* Text */ .kicker{ display:inline-block; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-size:.75rem; margin-bottom:.5rem; } h1,h2,h3{ color:var(--ink); margin:0 0 .4rem 0; line-height:1.1 } h1{ font-size:2.25rem; font-weight:800 } h2{ font-size:1.3rem; font-weight:700 } h3{ font-size:1.05rem; font-weight:700 } p,li{ color:var(--muted); line-height:1.6 } hr{ border:none; height:1px; background:var(--border); margin:28px 0 } .tagline{ font-size:1.05rem; color:var(--tagline) } /* Buttons */ a.btn{ display:inline-block; padding:.7rem 1rem; border-radius:12px; background: linear-gradient(180deg, var(--brand), #3f6fff); color:#fff; text-decoration:none; font-weight:600; box-shadow: 0 10px 30px var(--glow); } a.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--border); } /* KBD */ kbd{ background:var(--kbd-bg); color:var(--kbd-ink); border:1px solid var(--kbd-b1); border-bottom-color:var(--kbd-b2); padding:.12rem .4rem; border-radius:6px; font-size:.85rem; } /* Code blocks */ .codeblock{ background:#103d78; border:1px solid #103d78; border-radius:12px; padding:5px; overflow:auto; color:var(--ink); } .codeblock pre { margin: 0; } /* Pills / badges */ .badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:.85rem; } .pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:999px; border:1px dashed var(--border); color:var(--muted); } /* Hero */ .hero{ background: radial-gradient(600px 240px at 20% 0%, rgba(91,140,255,.14), transparent 60%), radial-gradient(600px 240px at 80% 10%, rgba(78,242,200,.10), transparent 60%); border:1px solid var(--border); border-radius:20px; padding:28px; } /* Media */ figure.screens{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0 0 0; } figure.screens img{ width:100%; border-radius:12px; border:1px solid var(--border); } /* Details / blockquote / tables */ details{ border:1px solid var(--border); border-radius:12px; padding:14px; background:rgba(255,255,255,.02); } summary{ cursor:pointer; color:var(--ink); font-weight:700 } blockquote{ margin:0; padding:14px; border-left:3px solid var(--brand); background:var(--bq-bg); border-radius:0 10px 10px 0; color:var(--bq-ink); } table{ width:100%; border-collapse:collapse } th,td{ text-align:left; padding:10px; border-bottom:1px solid var(--border); color:var(--muted) } th{ color:var(--ink) } /* Callouts */ .callout{ border:1px solid var(--border); border-radius:14px; padding:14px; background:rgba(255,255,255,.02); }    Tesslate • Research Preview WEBGEN-4B-Preview A 4B web-only generator that turns one prompt into clean, responsive HTML/CSS/Tailwind. Small enough for laptops; opinionated for consistent, modern layouts.  Open weights Web-only bias Mobile-first output No external JS by default   Model card Weights Demos Discord              What it is WEBGEN-4B-Preview focuses solely on generating production-lean websites. It prefers semantic HTML, sane spacing, and modern component blocks (hero, grids, pricing, FAQ).   Why 4B Small enough for local runs and fast iteration, while retaining strong structure/consistency for HTML/CSS/Tailwind output.",
    "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- Tesslate/WEBGEN-4B-Preview\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<style>\n/* Theme-aware design tokens (light by default) */\n:root{\n  color-scheme: light dark;\n  /* LIGHT */\n  --bg: #ffffff;\n  --panel: #f6f8fc;\n  --ink: #0b0c0f;\n  --muted: #556070;\n  --tagline: #2a3b6b;             /* nicer on light bg */\n  --brand: #3f6fff;               /* indigo */\n  --brand-2: #22e3bb;             /* mint accent */\n  --border: rgba(2, 6, 23, .08);\n  --glow: rgba(63, 111, 255, .22);\n  --radius: 16px;\n  /* component-specific light defaults */\n  --kbd-bg: #eef2ff;\n  --kbd-ink: #233876;\n  --kbd-b1: #c8d4ff;\n  --kbd-b2: #b6c6ff;\n  --code-bg: #f4f6fb;\n  --code-bd: #e3e9f3;\n  --bq-bg: rgba(63,111,255,.07);\n  --bq-ink: #1b264f;\n}\n/* DARK overrides via OS preference */\n@media (prefers-color-scheme: dark) {\n  :root{\n    --bg: #0b0c0f;\n    --panel: #0f1117;\n    --ink: #e9eefc;\n    --muted: #9aa3b2;\n    --tagline: #c6d5ff;\n    --brand: #5b8cff;\n    --brand-2: #4ef2c8;\n    --border: rgba(255,255,255,.08);\n    --glow: rgba(91,140,255,.25);\n    --kbd-bg: #0c1322;\n    --kbd-ink: #cfe0ff;\n    --kbd-b1: #1a2742;\n    --kbd-b2: #142138;\n    --code-bg: #0b1220;\n    --code-bd: #15233d;\n    --bq-bg: rgba(91,140,255,.06);\n    --bq-ink: #cfe0ff;\n  }\n}\n/* DARK overrides via site toggle (HF uses html[data-theme]) */\nhtml[data-theme=\"dark\"], body[data-theme=\"dark\"]{\n  --bg: #0b0c0f;\n  --panel: #0f1117;\n  --ink: #e9eefc;\n  --muted: #9aa3b2;\n  --tagline: #c6d5ff;\n  --brand: #5b8cff;\n  --brand-2: #4ef2c8;\n  --border: rgba(255,255,255,.08);\n  --glow: rgba(91,140,255,.25);\n  --kbd-bg: #0c1322;\n  --kbd-ink: #cfe0ff;\n  --kbd-b1: #1a2742;\n  --kbd-b2: #142138;\n  --code-bg: #0b1220;\n  --code-bd: #15233d;\n  --bq-bg: rgba(91,140,255,.06);\n  --bq-ink: #cfe0ff;\n}\n*{ box-sizing: border-box }\n\n/* Cards & layout */\n.card{\n  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));\n  border:1px solid var(--border);\n  border-radius: var(--radius);\n  padding:24px;\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/* Text */\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 }\n.tagline{ font-size:1.05rem; color:var(--tagline) }\n/* Buttons */\na.btn{\n  display:inline-block; padding:.7rem 1rem; border-radius:12px;\n  background: linear-gradient(180deg, var(--brand), #3f6fff);\n  color:#fff; 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}\n/* KBD */\nkbd{\n  background:var(--kbd-bg); color:var(--kbd-ink);\n  border:1px solid var(--kbd-b1); border-bottom-color:var(--kbd-b2);\n  padding:.12rem .4rem; border-radius:6px; font-size:.85rem;\n}\n/* Code blocks */\n.codeblock{\n  background:#103d78; border:1px solid #103d78;\n  border-radius:12px; padding:5px; overflow:auto; color:var(--ink);\n}\n.codeblock pre {\n  margin: 0;\n}\n/* Pills / badges */\n.badge{\n  display:inline-flex; align-items:center; gap:.5rem;\n  padding:.35rem .6rem; border:1px solid var(--border);\n  border-radius:999px; color:var(--muted); font-size:.85rem;\n}\n.pill{\n  display:inline-flex; align-items:center; gap:.4rem;\n  padding:.35rem .6rem; border-radius:999px;\n  border:1px dashed var(--border); color:var(--muted);\n}\n/* Hero */\n.hero{\n  background:\n    radial-gradient(600px 240px at 20% 0%, rgba(91,140,255,.14), transparent 60%),\n    radial-gradient(600px 240px at 80% 10%, rgba(78,242,200,.10), transparent 60%);\n  border:1px solid var(--border);\n  border-radius:20px; padding:28px;\n}\n/* Media */\nfigure.screens{\n  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:10px; margin:16px 0 0 0;\n}\nfigure.screens img{\n  width:100%; border-radius:12px; border:1px solid var(--border);\n}\n/* Details / blockquote / tables */\ndetails{\n  border:1px solid var(--border); border-radius:12px;\n  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);\n  background:var(--bq-bg); border-radius:0 10px 10px 0; color:var(--bq-ink);\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:var(--ink) }\n/* Callouts */\n.callout{\n  border:1px solid var(--border); border-radius:14px;\n  padding:14px; background:rgba(255,255,255,.02);\n}\n</style>\n<div style=\"background:var(--bg); padding: 28px; border-radius: 18px\">\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    <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\">Weights</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  <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<hr/>\n<div class=\"grid grid-3\">\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<hr/>\n## Quickstart\n### Transformers\n<div class=\"codeblock\"><pre>\nfrom transformers import AutoModelForCausalLM, AutoTokenizer\nimport torch\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)\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.\"\"\"\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### 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### 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> **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<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<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–12 GB</td><td>Fastest, best fidelity</td></tr>\n    <tr><td>GGUF Q5_K_M</td><td>~6–8 GB</td><td>Great quality/size trade-off</td></tr>\n    <tr><td>GGUF Q4_K_M</td><td>~5–7 GB</td><td>Smallest comfortable for laptops</td></tr>\n  </tbody>\n</table>\n<hr/>\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---->",
    "related_quantizations": []
  },
  "tags": [
    "transformers",
    "gguf",
    "web-generation",
    "html",
    "css",
    "tailwind-css",
    "ui-generation",
    "web-design",
    "small-model",
    "qwen3",
    "text-generation",
    "en",
    "base_model:Tesslate/WEBGEN-4B-Preview",
    "base_model:quantized:Tesslate/WEBGEN-4B-Preview",
    "license:apache-2.0",
    "endpoints_compatible",
    "region:us",
    "conversational"
  ],
  "likes": 19,
  "downloads": 135,
  "gated": false,
  "private": false,
  "last_modified": "2025-09-02T20:56:46.000Z",
  "created_at": "2025-09-02T20:06:50.000Z",
  "pipeline_tag": "text-generation",
  "library_name": "transformers"
}

{
  "_id": "68b74e5a4064683821c7577d",
  "id": "gabriellarson/WEBGEN-4B-Preview-GGUF",
  "modelId": "gabriellarson/WEBGEN-4B-Preview-GGUF",
  "sha": "76c44d80850c96bc1e2de564ea3a4b771365fb26",
  "createdAt": "2025-09-02T20:06:50.000Z",
  "lastModified": "2025-09-02T20:56:46.000Z",
  "author": "gabriellarson",
  "downloads": 135,
  "likes": 19,
  "gated": false,
  "private": false,
  "pipeline_tag": "text-generation",
  "library_name": "transformers",
  "siblings_count": 26
}