Modelpublic

QuantFactory/WEBGEN-4B-Preview-GGUF

sourceHugging Faceapache-2.0updated 1y agoView on Hugging Face

2likes568downloads

Model Card

language:

—en libraryname: transformers pipelinetag: 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

![QuantFactory Banner](https://hf.co/QuantFactory)

QuantFactory/WEBGEN-4B-Preview-GGUF

This is quantized version of Tesslate/WEBGEN-4B-Preview created using llama.cpp

Original Model Card

<div class="hero"> <span class="kicker">Tesslate • Research Preview</span> <h1>WEBGEN-4B-Preview</h1> <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> <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top:12px"> TRY IT HERE! <a href=https://designer.tesslate.com/>Get on Designer</a> <span class="pill">Open weights</span> <span class="pill">Web-only bias</span> <span class="pill">Mobile-first output</span> <span class="pill">No external JS by default</span> </div> <div style="display:flex; gap:12px; flex-wrap:wrap; margin-top:18px"> <a class="btn" href="https://huggingface.co/Tesslate/WEBGEN-4B-Preview/resolve/main/README.md">Model card</a> <a class="btn ghost" href="https://tesslate.com">Tesslate</a> <a class="btn ghost" href="https://uigenoutput.tesslate.com">Demos</a> <a class="btn ghost" href="https://discord.gg/EcCpcTv93U">Discord</a> </div>

<hr/>

<div class="grid grid-2" style="margin-top: 1.5rem"> <div class="card"> <h3>What it is</h3> <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> </div> <div class="card"> <h3>Why 4B</h3> <p>Small enough for local runs and fast iteration, while retaining strong structure/consistency for HTML/CSS/Tailwind output.</p> </div> </div>

<hr/>

Quickstart

Transformers

<div class="codeblock"><pre> from transformers import AutoModelForCausalLM, AutoTokenizer import torch

modelid = "Tesslate/WEBGEN-4B-Preview" tok = AutoTokenizer.frompretrained(modelid) model = AutoModelForCausalLM.frompretrained( modelid, torchdtype=torch.bfloat16, device_map="auto" )

prompt = """Make a single-file landing page for 'LatticeDB'. Style: modern, generous whitespace, Tailwind, rounded-xl, soft gradients. Sections: navbar, hero (headline + 2 CTAs), features grid, pricing (3 tiers), FAQ accordion, footer. Constraints: semantic HTML, no external JS."""

inputs = tok(prompt, returntensors="pt").to(model.device) out = model.generate(**inputs, maxnewtokens=2000, temperature=0.7, topp=0.9) print(tok.decode(out[0], skipspecialtokens=True)) </pre></div>

vLLM

<div class="codeblock"><pre> vllm serve Tesslate/WEBGEN-4B-Preview \ --host 0.0.0.0 --port 8000 \ --max-model-len 65536 \ --gpu-memory-utilization 0.92 </pre></div>

sglang

<div class="codeblock"><pre> python -m sglang.launch_server \ --model-path Tesslate/WEBGEN-4B-Preview \ --host 0.0.0.0 --port 5000 \ --mem-fraction-static 0.94 \ --attention-backend flashinfer \ --served-model-name webgen-4b </pre></div>

Tip: Lower temperature (e.g., 0.4–0.6) yields stricter, cleaner markup. Raise it for more visual variety.

<hr/>

Inference Settings (suggested)

<table> <thead><tr><th>Param</th><th>Value</th><th>Notes</th></tr></thead> <tbody> <tr><td><code>temperature</code></td><td>0.6</td><td>Balance creativity & consistency (lower if quantized)</td></tr> <tr><td><code>topp</code></td><td>0.9</td><td>Nucleus sampling</td></tr> <tr><td><code>topk</code></td><td>40</td><td>Optional vocab restriction</td></tr> <tr><td><code>maxnewtokens</code></td><td>1200–2500</td><td>Single-file sites often fit < 1500</td></tr> <tr><td><code>repetition_penalty</code></td><td>1.1</td><td>Reduces repetitive classes/markup</td></tr> </tbody> </table>

<hr/>

Prompts that work well

<div class="grid grid-2"> <div class="card"> <h3>Starter</h3> <div class="codeblock"><pre> Make a single-file landing page for "RasterFlow" (GPU video pipeline). Style: modern tech, muted palette, Tailwind, rounded-xl, subtle gradients. Sections: navbar, hero (big headline + 2 CTAs), logos row, features (3x cards), code block (copyable), pricing (3 tiers), FAQ accordion, footer. Constraints: semantic HTML, no external JS. Return ONLY the HTML code. </pre></div> </div> <div class="card"> <h3>Design-strict</h3> <div class="codeblock"><pre> Use an 8pt spacing system. Palette: slate with indigo accents. Typography scale: 14/16/18/24/36/56. Max width: 1200px. Avoid shadows > md; prefer borders/dividers. </pre></div> </div> </div>

<hr/>

Quantization & VRAM (example)

<table> <thead><tr><th>Format</th><th>Footprint</th><th>Notes</th></tr></thead> <tbody> <tr><td>BF16</td><td>8.05 GB</td><td>Fastest, best fidelity</td></tr> <tr><td>GGUF Q5KM</td><td>2.89 GB</td><td>Great quality/size trade-off</td></tr> <tr><td>GGUF Q4KM</td><td>2.5 GB</td><td>Smallest comfortable for laptops</td></tr> </tbody> </table> <hr/>

Intended Use & Scope

—Primary: Generate complete, single-file websites (landing pages, marketing pages, simple docs) with semantic HTML and Tailwind classes.
—Secondary: Component blocks (hero, pricing, FAQ) for manual composition.

<details> <summary><strong>Limitations</strong></summary> <ul> <li>Accessibility: adds headings/labels but ARIA coverage may need review.</li> <li>JS widgets: kept light unless explicitly requested in prompt.</li> </ul> </details>

<details> <summary><strong>Ethical Considerations</strong></summary> <ul> <li>Curate prompts appropriately.</li> <li>When using third-party logos/assets, ensure you have rights or use open sources.</li> </ul> </details>

<hr/>

Training Summary (research preview)

—Base: <code>Qwen/Qwen3-4B-Instruct</code>
—Objective: Tight web-only bias; reward semantic structure, spacing rhythm, and responsiveness.
—Data: Mixture of curated HTML/CSS/Tailwind snippets, component libraries, and synthetic page specs.
—Recipe: SFT with format constraints → instruction tuning → style/rhythm preference optimization.
—Context: effective ~64k; trained to keep default outputs within practical page length.

<hr/>

Example Outputs

Community

—Examples: <a href="https://uigenoutput.tesslate.com">uigenoutput.tesslate.com</a>
—Discord: <a href="https://discord.gg/EcCpcTv93U">discord.gg/EcCpcTv93U</a>
—Website: <a href="https://tesslate.com">tesslate.com</a>

<blockquote> “Why are good design models so expensive” — Tesslate Team </blockquote>

<hr/>

Citation

@misc{tesslate_webgen_4b_preview_2025,
title   = {WEBGEN-4B-Preview: Design-first web generation with a 4B model},
author  = {Tesslate Team},
year    = {2025},
url     = {https://huggingface.co/Tesslate/WEBGEN-4B-Preview}
}

</div>

<!----

<div class="grid grid-3"> <div class="card"><img alt="Sample A" src="https://YOURCDN/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> <div class="card"><img alt="Sample B" src="https://YOURCDN/out-b.png" style="width:100%;border-radius:10px;border:1px solid var(--border)"><p style="margin-top:.5rem">SaaS pricing + FAQ</p></div> <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> </div>