359 lines
13 KiB
Markdown
359 lines
13 KiB
Markdown
---
|
||
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
|
||
model-index:
|
||
- name: UIGEN-FX-4B-Preview
|
||
results: []
|
||
---
|
||
<style>
|
||
/* ===== Adaptive Theme (works on dark blue or white backdrops) ===== */
|
||
:root{
|
||
color-scheme: light dark;
|
||
/* Dark-default (great over navy/charcoal) */
|
||
--bg: transparent;
|
||
--panel: rgba(15,17,23,.55);
|
||
--panel-solid: #0f1117;
|
||
--ink: #eaf0ff;
|
||
--muted: #a9b3c7;
|
||
--brand: #5b8cff; /* indigo */
|
||
--brand-2: #45e7c6; /* mint */
|
||
--border: rgba(255,255,255,.14);
|
||
--glow: rgba(91,140,255,.28);
|
||
--code-bg: #0b1220;
|
||
--code-br: #15233d;
|
||
--pill: rgba(255,255,255,.05);
|
||
--radius: 16px;
|
||
}
|
||
@media (prefers-color-scheme: light){
|
||
:root{
|
||
/* Light-overrides (great over white/light backdrops) */
|
||
--panel: rgba(255,255,255,.66);
|
||
--panel-solid: #ffffff;
|
||
--ink: #0b0c0f;
|
||
--muted: #4a5568;
|
||
--brand: #3b6dff;
|
||
--brand-2: #22c6a3;
|
||
--border: rgba(0,0,0,.12);
|
||
--glow: rgba(59,109,255,.20);
|
||
--code-bg: #f6f8ff;
|
||
--code-br: #e4e8f7;
|
||
--pill: rgba(0,0,0,.04);
|
||
}
|
||
}
|
||
/* Fallback: force light palette if host ignores color-scheme */
|
||
.on-light{
|
||
--panel: rgba(255,255,255,.66) !important;
|
||
--panel-solid: #ffffff !important;
|
||
--ink: #0b0c0f !important;
|
||
--muted: #4a5568 !important;
|
||
--brand: #3b6dff !important;
|
||
--brand-2: #22c6a3 !important;
|
||
--border: rgba(0,0,0,.12) !important;
|
||
--glow: rgba(59,109,255,.20) !important;
|
||
--code-bg: #f6f8ff !important;
|
||
--code-br: #e4e8f7 !important;
|
||
--pill: rgba(0,0,0,.04) !important;
|
||
}
|
||
|
||
/* ===== Layout & Components ===== */
|
||
*{ box-sizing:border-box }
|
||
.wrap{
|
||
background: var(--bg);
|
||
padding: 28px; border-radius: 18px;
|
||
}
|
||
.hero{
|
||
background:
|
||
radial-gradient(600px 240px at 20% 0%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%),
|
||
radial-gradient(600px 240px at 80% 10%, color-mix(in oklab, var(--brand-2) 14%, transparent), transparent 60%);
|
||
border:1px solid var(--border);
|
||
border-radius:20px; padding:28px;
|
||
backdrop-filter: saturate(120%) blur(10px);
|
||
}
|
||
.alert{
|
||
border:1px dashed var(--border); border-radius:14px; padding:12px 14px; margin-bottom:14px;
|
||
background: color-mix(in oklab, var(--brand) 10%, var(--panel));
|
||
color: var(--ink); font-weight:700;
|
||
}
|
||
.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; margin-top:1.25rem }
|
||
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: color-mix(in oklab, var(--ink) 78%, var(--muted)); }
|
||
|
||
a.btn{
|
||
display:inline-block; padding:.7rem 1rem; border-radius:12px;
|
||
background: linear-gradient(180deg,var(--brand), color-mix(in oklab, var(--brand) 65%, #2b50ff));
|
||
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);
|
||
}
|
||
|
||
.pill{
|
||
display:inline-flex; align-items:center; gap:.4rem;
|
||
padding:.35rem .6rem; border-radius:999px; border:1px dashed var(--border);
|
||
background: var(--pill); color: color-mix(in oklab, var(--ink) 70%, var(--muted));
|
||
}
|
||
|
||
.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 } }
|
||
|
||
.card{
|
||
background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 92%, transparent), transparent);
|
||
border:1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding:16px;
|
||
backdrop-filter: blur(6px) saturate(120%);
|
||
}
|
||
|
||
.codeblock{
|
||
background: var(--code-bg); border:1px solid var(--code-br); border-radius:12px; padding:8px; overflow:auto;
|
||
margin: 1rem 0;
|
||
}
|
||
.codeblock pre{ margin:0; font-size:.92rem }
|
||
|
||
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) }
|
||
|
||
table{ width:100%; border-collapse:collapse }
|
||
th,td{ text-align:left; padding:10px; border-bottom:1px solid var(--border); color:var(--muted) }
|
||
th{ color: color-mix(in oklab, var(--brand) 70%, var(--ink)); }
|
||
|
||
/* 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 }
|
||
</style>
|
||
|
||
<!-- Add class="on-light" to .wrap if host forces light background and ignores color-scheme -->
|
||
<div class="wrap">
|
||
|
||
<div class="hero">
|
||
<div class="alert">@@@ ALERT @@@ — Research Preview: some generations may not be ready for production. Use repeat_penalty or frequency_penalty at >= 1.1</div>
|
||
<span class="kicker">Tesslate • UIGEN Series</span>
|
||
<h1>UIGEN-FX-4B-Preview</h1>
|
||
<p class="tagline">
|
||
<strong>FX</strong> = “Frontend Engineer.” This upgrade in the UIGEN line focuses on <strong>better visual polish</strong>,
|
||
<strong>functional structure</strong>, and <strong>web-ready markup</strong> to ship cleaner, more complete websites from a single prompt.
|
||
</p>
|
||
|
||
<div style="display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 2px">
|
||
<span class="pill">Open weights</span>
|
||
<span class="pill">Web-only bias</span>
|
||
<span class="pill">Mobile-first output</span>
|
||
<span class="pill">Minimal JS by default</span>
|
||
</div>
|
||
|
||
<div style="display:flex; gap:12px; flex-wrap:wrap; margin-top:14px">
|
||
<a class="btn" href="https://huggingface.co/Tesslate/UIGEN-FX-4B-Preview">Model Repo</a>
|
||
<a class="btn ghost" href="https://designer.tesslate.com/">Try in Designer</a>
|
||
<a class="btn ghost" href="https://uigenoutput.tesslate.com">Demos</a>
|
||
<a class="btn ghost" href="https://tesslate.com">Website</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/XnvaCsQedG5HgOP1NgiUY.png">
|
||
<img alt="Pricing sample" src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/-Z6cHx_pvQIy69nVVbzFu.png">
|
||
<img alt="Features sample" src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/mTKc_Foro9VfozsH-6pmK.png">
|
||
<img alt="Hero alt" src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/nFaWL_tEU1URlks24qlBA.png">
|
||
<img alt="Pricing alt" src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/6ZUhm4jJld1w8BHeaXGA4.png">
|
||
<img alt="Features alt" src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/_qXbVgYGlKVfY4IONEkhR.png">
|
||
</figure>
|
||
</div>
|
||
|
||
<hr/>
|
||
|
||
<div class="grid grid-2" style="margin-top:1.2rem">
|
||
<div class="card">
|
||
<h3>What is FX?</h3>
|
||
<p>
|
||
<strong>UIGEN-FX-4B-Preview</strong> is a 4B parameter UI generation model tuned to behave like a
|
||
<em>frontend engineer across 22 Frameworks. </em>
|
||
</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Why 4B?</h3>
|
||
<p>
|
||
Small enough for laptops and fast iteration, while keeping strong structure and visual consistency.
|
||
FX emphasizes <em>layout rhythm, spacing, and component composition</em> to reduce cleanup work.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<hr/>
|
||
|
||
<h2>Quickstart</h2>
|
||
|
||
<h3>Transformers</h3>
|
||
<div class="codeblock"><pre>
|
||
from transformers import AutoModelForCausalLM, AutoTokenizer
|
||
import torch
|
||
|
||
model_id = "Tesslate/UIGEN-FX-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=2200, temperature=0.6, top_p=0.9)
|
||
print(tok.decode(out[0], skip_special_tokens=True))
|
||
</pre></div>
|
||
|
||
<h3>vLLM</h3>
|
||
<div class="codeblock"><pre>
|
||
vllm serve Tesslate/UIGEN-FX-4B-Preview \
|
||
--host 0.0.0.0 --port 8000 \
|
||
--max-model-len 65536 \
|
||
--gpu-memory-utilization 0.92
|
||
</pre></div>
|
||
|
||
<h3>sglang</h3>
|
||
<div class="codeblock"><pre>
|
||
python -m sglang.launch_server \
|
||
--model-path Tesslate/UIGEN-FX-4B-Preview \
|
||
--host 0.0.0.0 --port 5000 \
|
||
--mem-fraction-static 0.94 \
|
||
--attention-backend flashinfer \
|
||
--served-model-name UIGEN-FX-4B-Preview
|
||
</pre></div>
|
||
|
||
<blockquote><strong>Tip:</strong> Lower temperature (0.4–0.6) yields stricter, cleaner markup; raise it for more visual variety.</blockquote>
|
||
|
||
<hr/>
|
||
|
||
<h2>Suggested Inference Settings</h2>
|
||
<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>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 < 1800</td></tr>
|
||
<tr><td><code>repetition_penalty</code></td><td>1.08–1.15</td><td>Reduces repetitive classes/markup</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<hr/>
|
||
|
||
<h2>Prompts that work well</h2>
|
||
<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; keep line-length ~68ch.
|
||
</pre></div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr/>
|
||
|
||
<h2>Quantization & VRAM (example)</h2>
|
||
<table>
|
||
<thead><tr><th>Format</th><th>Footprint</th><th>Notes</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>BF16</td><td>~8.1 GB</td><td>Fastest, best fidelity</td></tr>
|
||
<tr><td>GGUF Q5_K_M</td><td>~2.9 GB</td><td>Great quality/size trade-off</td></tr>
|
||
<tr><td>GGUF Q4_K_M</td><td>~2.5 GB</td><td>Laptop-friendly</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<hr/>
|
||
|
||
<h2>Intended Use & Scope</h2>
|
||
<ul>
|
||
<li><strong>Primary:</strong>React, Tailwind, Javascript, Static Site generators, Python Frontend WebUI</li>
|
||
<li><strong>Secondary:</strong> Component blocks (hero, pricing, FAQ) for manual composition</li>
|
||
</ul>
|
||
|
||
<details>
|
||
<summary><strong>Limitations</strong></summary>
|
||
<ul>
|
||
<li>Accessibility: headings/labels are encouraged; ARIA coverage may need review.</li>
|
||
<li>Complex widgets: JS kept minimal unless requested; consider post-edit for heavy interactivity.</li>
|
||
</ul>
|
||
</details>
|
||
|
||
<details>
|
||
<summary><strong>Ethical Considerations</strong></summary>
|
||
<ul>
|
||
<li>Use rights-cleared assets when adding logos/images.</li>
|
||
<li>Curate prompts responsibly; review outputs before production use.</li>
|
||
</ul>
|
||
</details>
|
||
|
||
<hr/>
|
||
|
||
<h2>Training Summary (research preview)</h2>
|
||
<ul>
|
||
<li><strong>Base:</strong> <code>Qwen/Qwen3-4B-Instruct-2507</code></li>
|
||
<li><strong>Objective:</strong> Web-only bias; reward semantic structure, spacing rhythm, responsive blocks; improved visual polish vs earlier UIGEN releases.</li>
|
||
<li><strong>Data:</strong> Curated HTML/CSS/Tailwind snippets, component libraries, synthetic page specs & layout constraints.</li>
|
||
<li><strong>Recipe:</strong> SFT with format constraints → instruction tuning → preference optimization on style/structure.</li>
|
||
<li><strong>Context:</strong> effective ~64k; default generations sized for practical single-file pages.</li>
|
||
</ul>
|
||
|
||
<hr/>
|
||
|
||
<h2>Community</h2>
|
||
<ul>
|
||
<li><strong>Examples:</strong> <a href="https://uigenoutput.tesslate.com">uigenoutput.tesslate.com</a></li>
|
||
<li><strong>Discord:</strong> <a href="https://discord.gg/EcCpcTv93U">discord.gg/EcCpcTv93U</a></li>
|
||
<li><strong>Website:</strong> <a href="https://tesslate.com">tesslate.com</a></li>
|
||
</ul>
|
||
|
||
<blockquote>“FX aims to ship what a frontend engineer would: clean structure first, pretty pixels second.” — Tesslate Team</blockquote>
|
||
|
||
<hr/>
|
||
|
||
<h2>Citation</h2>
|
||
<div class="codeblock"><pre>
|
||
@misc{tesslate_uigen_fx_4b_2025,
|
||
title = {UIGEN-FX-4B-Preview: Frontend Engineer-tuned web generation (Research Preview)},
|
||
author = {Tesslate Team},
|
||
year = {2025},
|
||
url = {https://huggingface.co/Tesslate/UIGEN-FX-4B-Preview}
|
||
}
|
||
</pre></div>
|
||
</div>
|