Instructions to use Tesslate/UIGEN-T3-4B-Preview with libraries, inference providers, notebooks, and local apps. Follow these links to get started.

Libraries

How to use Tesslate/UIGEN-T3-4B-Preview with Transformers:

# Use a pipeline as a high-level helper
from transformers import pipeline

pipe = pipeline("text-generation", model="Tesslate/UIGEN-T3-4B-Preview")
messages = [
    {"role": "user", "content": "Who are you?"},
]
pipe(messages)

# Load model directly
from transformers import AutoTokenizer, AutoModelForCausalLM

tokenizer = AutoTokenizer.from_pretrained("Tesslate/UIGEN-T3-4B-Preview")
model = AutoModelForCausalLM.from_pretrained("Tesslate/UIGEN-T3-4B-Preview", device_map="auto")
messages = [
    {"role": "user", "content": "Who are you?"},
]
inputs = tokenizer.apply_chat_template(
	messages,
	add_generation_prompt=True,
	tokenize=True,
	return_dict=True,
	return_tensors="pt",
).to(model.device)

outputs = model.generate(**inputs, max_new_tokens=40)
print(tokenizer.decode(outputs[0][inputs["input_ids"].shape[-1]:]))

Notebooks
Google Colab
Kaggle
Local Apps Settings

vLLM

How to use Tesslate/UIGEN-T3-4B-Preview with vLLM:

Install from pip and serve model

# Install vLLM from pip:
pip install vllm
# Start the vLLM server:
vllm serve "Tesslate/UIGEN-T3-4B-Preview"
# Call the server using curl (OpenAI-compatible API):
curl -X POST "http://localhost:8000/v1/chat/completions" \
	-H "Content-Type: application/json" \
	--data '{
		"model": "Tesslate/UIGEN-T3-4B-Preview",
		"messages": [
			{
				"role": "user",
				"content": "What is the capital of France?"
			}
		]
	}'

Use Docker

docker model run hf.co/Tesslate/UIGEN-T3-4B-Preview

SGLang

How to use Tesslate/UIGEN-T3-4B-Preview with SGLang:

Install from pip and serve model

# Install SGLang from pip:
pip install sglang
# Start the SGLang server:
python3 -m sglang.launch_server \
    --model-path "Tesslate/UIGEN-T3-4B-Preview" \
    --host 0.0.0.0 \
    --port 30000
# Call the server using curl (OpenAI-compatible API):
curl -X POST "http://localhost:30000/v1/chat/completions" \
	-H "Content-Type: application/json" \
	--data '{
		"model": "Tesslate/UIGEN-T3-4B-Preview",
		"messages": [
			{
				"role": "user",
				"content": "What is the capital of France?"
			}
		]
	}'

Use Docker images

docker run --gpus all \
    --shm-size 32g \
    -p 30000:30000 \
    -v ~/.cache/huggingface:/root/.cache/huggingface \
    --env "HF_TOKEN=<secret>" \
    --ipc=host \
    lmsysorg/sglang:latest \
    python3 -m sglang.launch_server \
        --model-path "Tesslate/UIGEN-T3-4B-Preview" \
        --host 0.0.0.0 \
        --port 30000
# Call the server using curl (OpenAI-compatible API):
curl -X POST "http://localhost:30000/v1/chat/completions" \
	-H "Content-Type: application/json" \
	--data '{
		"model": "Tesslate/UIGEN-T3-4B-Preview",
		"messages": [
			{
				"role": "user",
				"content": "What is the capital of France?"
			}
		]
	}'

Docker Model Runner
How to use Tesslate/UIGEN-T3-4B-Preview with Docker Model Runner:
```
docker model run hf.co/Tesslate/UIGEN-T3-4B-Preview
```

UIGEN-T3-4B-Preview / README.md

qingy2024

Update README.md

7bc482b verified over 1 year ago

preview code

Raw

History Blame

6.19 kB

	---
	base_model:
	- Qwen/Qwen3-4B
	tags:
	- text-generation-inference
	- transformers
	- qwen3
	- ui-generation
	- tailwind-css
	- html
	language:
	- en
	---

	# UIGEN-T3 — Advanced UI Generation with Hybrid Reasoning

	> Tesslate’s next-gen UI model, built for thoughtful design.

	---

	<img src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/fqZE717ubrgSpAOHeMEeQ.png" alt="UIGEN-T3 UI Screenshot 1" width="500">
	<img src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/N5gfKRD-j9JAeMoGy7O3K.png" alt="UIGEN-T3 UI Screenshot 2" width="500">
	<img src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/PDGXycDkVsxFRxqHc6TKD.png" alt="UIGEN-T3 UI Screenshot 2" width="500">
	<img src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/Q4CHYYcDAN60NFjIPVQnH.png" alt="UIGEN-T3 UI Screenshot 3" width="500">
	<img src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/ePZoCA8lS4Y1KdkchrTlQ.png" alt="UIGEN-T3 UI Screenshot 4" width="500">
	<img src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/BU-Pk2moNsTOGuYF1XuRx.png" alt="UIGEN-T3 UI Screenshot 5" width="500">
	<img src="https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/gz5ub0lDpS-hhw1MB7e07.png" alt="UIGEN-T3 UI Screenshot 6" width="500">

	## Demos

	Explore 39+ UI generations:
	📂 [https://uigenoutput.pages.dev/response_39](https://uigenoutput.pages.dev/response_39)
	(Just change the end number from 1–39 to see more examples!)

	---

	Join our Discord: [https://discord.gg/GNbWAeJ4](https://discord.gg/GNbWAeJ4)
	Our Website: [https://tesslate.com](https://tesslate.com)

	## Quick Information

	* UI generation model built on Qwen3 architecture
	* Supports both components and full web pages
	* Hybrid reasoning system: Use `/think` or `/no_think` modes
	* Powered by UIGenEval, a first-of-its-kind benchmark for UI generation
	* Released for research, non-commercial use. If you want to use it commercially, please contact us for a pilot program.

	---

	## Model Details

	* Base Model: Qwen/Qwen3-14B
	* Reasoning Style: Hybrid (`/think` and `/no_think`)
	* Tokenizer: Qwen default, with design token headers
	* Output: Components + Full pages (with `<html>`, `<head>`)
	* Images: User-supplied or placehold.co – no images in the dataset due to licensing concerns.
	* License: Research only (non-commercial). Contact us for enterprise use cases.

	---

	## Reasoning System

	UIGEN-T3 was trained using a pre/post reasoning model architecture.

	You can explicitly control the reasoning mode:

	* `/think` → Enables guided reasoning with layout analysis and heuristics.
	* `/no_think` → Faster, raw code generation.

	Outputs also include design tokens at the top of each generation for easier site-wide customization.

	---

	## Inference Parameters

	Please use 20k context length to get the best results if using reasoning.

	\| Parameter \| Value \|
	\| :---------- \| :---- \|
	\| Temperature \| 0.6 \|
	\| Top P \| 0.95 \|
	\| Top K \| 20 \|
	\| Max Tokens \| 40k+ \|

	---

	## Evaluation: UIGenEval Framework

	UIGenEval is our internal evaluation suite, designed to bridge the gap between creative output and quality assurance.
	(Learn more in our upcoming paper: "UIGenEval: Bridging the Evaluation Gap in AI-Driven UI Generation" - August, 2025)

	UIGenEval evaluates models across four pillars:

	1. Technical Quality — Clean HTML, CSS structure, semantic accuracy.
	2. Prompt Adherence — Feature completeness and fidelity to instructions.
	3. Interaction Behavior — Dynamic logic hooks and functional interactivity.
	4. Responsive Design — Multi-viewport performance via Lighthouse, Axe-core, and custom scripts.

	This comprehensive framework directly informs our GRPO reward functions for the next release.

	---

	## Example Prompts to Try

	* `make a google drive clone`
	* `build a figma-style canvas with toolbar`
	* `create a modern pricing page with three plans`
	* `generate a mobile-first recipe sharing app layout`

	---

	## Use Cases

	\| Use Case \| Description \|
	\| :---------------------- \| :-------------------------------------------------------------------------- \|
	\| Startup MVPs \| Quickly scaffold UIs from scratch with clean code. \|
	\| Design-to-Code Transfer \| Figma (coming soon) → Code generation. \|
	\| Component Libraries \| Build buttons, cards, navbars, and export at scale. \|
	\| Internal Tool Builders \| Create admin panels, dashboards, and layout templates. \|
	\| Rapid Client Prototypes \| Save time on mockups with production-ready HTML+Tailwind outputs. \|

	---

	## Limitations

	* No Bootstrap support (planned).
	* Not suited for production use — research-only license.
	* Responsive tuning varies across output complexity.

	---

	## Roadmap

	\| Milestone \| Status \|
	\| :-------------------------- \| :----- \|
	\| Launch Tesslate Designer \| 2 days \|
	\| Figma convert \| \|
	\| Bootstrap & JS logic \| \|
	\| GRPO fine-tuning \| \|
	\| 4B draft model release \| Now \|

	---

	## Technical Requirements

	* GPU: ≥4GB VRAM for 4B inference on GGUF.
	* Libraries: `transformers`, `torch`, `peft`.
	* Compatible with Hugging Face inference APIs and local generation pipelines.

	---

	## Community & Contribution

	* Join our Discord: [https://discord.gg/GNbWAeJ4](https://discord.gg/GNbWAeJ4)
	* Chat about AI, design, or model training.
	* Want to contribute UIs or feedback? Let’s talk!

	---

	## Citation

	```bibtex
	@misc{tesslate_UIGEN-T3,
	title={UIGEN-T3: Hybrid Reasoning for Robust UI Generation on Qwen3},
	author={Tesslate Team},
	year={2025},
	publisher={Tesslate},
	note={Non-commercial Research License},
	url={https://huggingface.co/tesslate/UIGEN-T3}
	}