初始化项目，由ModelHub XC社区提供模型

Model: gabriellarson/WEBGEN-4B-Preview-GGUF Source: Original Platform
2026-07-17 01:29:09 +08:00
commit 9967b16e82
26 changed files with 510 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,379 @@
+---
+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
+---
+<style>
+/* 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);
+}
+</style>
+<div style="background:var(--bg); padding: 28px; border-radius: 18px">
+<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">
+    <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">Weights</a>
+    <a class="btn ghost" href="https://uigenoutput.tesslate.com">Demos</a>
+    <a class="btn ghost" href="https://discord.gg/EcCpcTv93U">Discord</a>
+  </div>
+  <figure class="screens">
+    <img alt="Hero sample" src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/G9dpxQKrYJlpnj3Pvw3LV.png">
+    <img alt="Pricing sample" src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/2GrgB4W5VzPqnpD4FJsA-.png">
+    <img alt="Features sample" src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/lGvrwLBqeS9IJeKgLrMWO.png">
+    <img alt="Hero sample" src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/3Kh7TkSuxKctsGOtHGRXJ.png">
+    <img alt="Pricing sample" src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/KYwUop65wR8WikMaw5upL.png">
+    <img alt="Features sample" src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/H-c5ORCyMpYmlDN52m3im.png">
+  </figure>
+</div>
+<hr/>
+<div class="grid grid-3">
+  <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
+model_id = "Tesslate/WEBGEN-4B-Preview"
+tok = AutoTokenizer.from_pretrained(model_id)
+model = AutoModelForCausalLM.from_pretrained(
+    model_id,
+    torch_dtype=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, return_tensors="pt").to(model.device)
+out = model.generate(**inputs, max_new_tokens=2000, temperature=0.7, top_p=0.9)
+print(tok.decode(out[0], skip_special_tokens=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 &amp; consistency (lower if quantized)</td></tr>
+    <tr><td><code>top_p</code></td><td>0.9</td><td>Nucleus sampling</td></tr>
+    <tr><td><code>top_k</code></td><td>40</td><td>Optional vocab restriction</td></tr>
+    <tr><td><code>max_new_tokens</code></td><td>1200–2500</td><td>Single-file sites often fit &lt; 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 &gt; 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–12 GB</td><td>Fastest, best fidelity</td></tr>
+    <tr><td>GGUF Q5_K_M</td><td>~6–8 GB</td><td>Great quality/size trade-off</td></tr>
+    <tr><td>GGUF Q4_K_M</td><td>~5–7 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://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>
+  <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>
+  <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>
+
+<hr/>
+---->