Instructions to use gabriellarson/WEBGEN-4B-Preview-GGUF with libraries, inference providers, notebooks, and local apps. Follow these links to get started.

Libraries

How to use gabriellarson/WEBGEN-4B-Preview-GGUF with Transformers:

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

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

# Load model directly
from transformers import AutoModel
model = AutoModel.from_pretrained("gabriellarson/WEBGEN-4B-Preview-GGUF", dtype="auto")

llama-cpp-python

How to use gabriellarson/WEBGEN-4B-Preview-GGUF with llama-cpp-python:

# !pip install llama-cpp-python

from llama_cpp import Llama

llm = Llama.from_pretrained(
	repo_id="gabriellarson/WEBGEN-4B-Preview-GGUF",
	filename="WEBGEN-4B-Preview-F16.gguf",
)

llm.create_chat_completion(
	messages = [
		{
			"role": "user",
			"content": "What is the capital of France?"
		}
	]
)

Notebooks
Google Colab
Kaggle
Local Apps

llama.cpp

How to use gabriellarson/WEBGEN-4B-Preview-GGUF with llama.cpp:

Install from brew

brew install llama.cpp
# Start a local OpenAI-compatible server with a web UI:
llama-server -hf gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M
# Run inference directly in the terminal:
llama-cli -hf gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M

Install from WinGet (Windows)

winget install llama.cpp
# Start a local OpenAI-compatible server with a web UI:
llama-server -hf gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M
# Run inference directly in the terminal:
llama-cli -hf gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M

Use pre-built binary

# Download pre-built binary from:
# https://github.com/ggerganov/llama.cpp/releases
# Start a local OpenAI-compatible server with a web UI:
./llama-server -hf gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M
# Run inference directly in the terminal:
./llama-cli -hf gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M

Build from source code

git clone https://github.com/ggerganov/llama.cpp.git
cd llama.cpp
cmake -B build
cmake --build build -j --target llama-server llama-cli
# Start a local OpenAI-compatible server with a web UI:
./build/bin/llama-server -hf gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M
# Run inference directly in the terminal:
./build/bin/llama-cli -hf gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M

Use Docker

docker model run hf.co/gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M

LM Studio
Jan

vLLM

How to use gabriellarson/WEBGEN-4B-Preview-GGUF with vLLM:

Install from pip and serve model

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

Use Docker

docker model run hf.co/gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M

SGLang

How to use gabriellarson/WEBGEN-4B-Preview-GGUF 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 "gabriellarson/WEBGEN-4B-Preview-GGUF" \
    --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": "gabriellarson/WEBGEN-4B-Preview-GGUF",
		"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 "gabriellarson/WEBGEN-4B-Preview-GGUF" \
        --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": "gabriellarson/WEBGEN-4B-Preview-GGUF",
		"messages": [
			{
				"role": "user",
				"content": "What is the capital of France?"
			}
		]
	}'

Ollama
How to use gabriellarson/WEBGEN-4B-Preview-GGUF with Ollama:
```
ollama run hf.co/gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M
```

Unsloth Studio new

How to use gabriellarson/WEBGEN-4B-Preview-GGUF with Unsloth Studio:

Install Unsloth Studio (macOS, Linux, WSL)

curl -fsSL https://unsloth.ai/install.sh | sh
# Run unsloth studio
unsloth studio -H 0.0.0.0 -p 8888
# Then open http://localhost:8888 in your browser
# Search for gabriellarson/WEBGEN-4B-Preview-GGUF to start chatting

Install Unsloth Studio (Windows)

irm https://unsloth.ai/install.ps1 | iex
# Run unsloth studio
unsloth studio -H 0.0.0.0 -p 8888
# Then open http://localhost:8888 in your browser
# Search for gabriellarson/WEBGEN-4B-Preview-GGUF to start chatting

Using HuggingFace Spaces for Unsloth

# No setup required
# Open https://huggingface.co/spaces/unsloth/studio in your browser
# Search for gabriellarson/WEBGEN-4B-Preview-GGUF to start chatting

Pi new

How to use gabriellarson/WEBGEN-4B-Preview-GGUF with Pi:

Start the llama.cpp server

# Install llama.cpp:
brew install llama.cpp
# Start a local OpenAI-compatible server:
llama-server -hf gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M

Configure the model in Pi

# Install Pi:
npm install -g @mariozechner/pi-coding-agent
# Add to ~/.pi/agent/models.json:
{
  "providers": {
    "llama-cpp": {
      "baseUrl": "http://localhost:8080/v1",
      "api": "openai-completions",
      "apiKey": "none",
      "models": [
        {
          "id": "gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M"
        }
      ]
    }
  }
}

Run Pi

# Start Pi in your project directory:
pi

Hermes Agent new

How to use gabriellarson/WEBGEN-4B-Preview-GGUF with Hermes Agent:

Start the llama.cpp server

# Install llama.cpp:
brew install llama.cpp
# Start a local OpenAI-compatible server:
llama-server -hf gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M

Configure Hermes

# Install Hermes:
curl -fsSL https://hermes-agent.nousresearch.com/install.sh | bash
hermes setup
# Point Hermes at the local server:
hermes config set model.provider custom
hermes config set model.base_url http://127.0.0.1:8080/v1
hermes config set model.default gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M

Run Hermes

hermes

Docker Model Runner
How to use gabriellarson/WEBGEN-4B-Preview-GGUF with Docker Model Runner:
```
docker model run hf.co/gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M
```

Lemonade

How to use gabriellarson/WEBGEN-4B-Preview-GGUF with Lemonade:

Pull the model

# Download Lemonade from https://lemonade-server.ai/
lemonade pull gabriellarson/WEBGEN-4B-Preview-GGUF:Q4_K_M

Run and chat with the model

lemonade run user.WEBGEN-4B-Preview-GGUF-Q4_K_M

List all available models

lemonade list

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.

## Quickstart ### Transformers

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))

### vLLM

vllm serve Tesslate/WEBGEN-4B-Preview \
  --host 0.0.0.0 --port 8000 \
  --max-model-len 65536 \
  --gpu-memory-utilization 0.92

### sglang

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

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

Inference Settings (suggested)

Param	Value	Notes
`temperature`	0.6	Balance creativity & consistency (lower if quantized)
`top_p`	0.9	Nucleus sampling
`top_k`	40	Optional vocab restriction
`max_new_tokens`	1200–2500	Single-file sites often fit < 1500
`repetition_penalty`	1.1	Reduces repetitive classes/markup

Prompts that work well

Starter

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.

Design-strict

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.

Quantization & VRAM (example)

Format	Footprint	Notes
BF16	~8–12 GB	Fastest, best fidelity
GGUF Q5_K_M	~6–8 GB	Great quality/size trade-off
GGUF Q4_K_M	~5–7 GB	Smallest comfortable for laptops

## 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.

Limitations

Accessibility: adds headings/labels but ARIA coverage may need review.
JS widgets: kept light unless explicitly requested in prompt.

Ethical Considerations

Curate prompts appropriately.
When using third-party logos/assets, ensure you have rights or use open sources.

Training Summary (research preview)

Base: Qwen/Qwen3-4B-Instruct
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.

Example Outputs

Community

Examples: uigenoutput.tesslate.com
Discord: discord.gg/EcCpcTv93U
Website: tesslate.com

“Why are good design models so expensive” — Tesslate Team

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}
}

Downloads last month: 388

GGUF

Model size

4B params

Architecture

qwen3

Hardware compatibility

2-bit

3-bit

4-bit

5-bit

6-bit

8-bit

16-bit

Model tree for gabriellarson/WEBGEN-4B-Preview-GGUF

Base model

Qwen/Qwen3-4B-Instruct-2507

Finetuned

Tesslate/WEBGEN-4B-Preview

Quantized

(10)

this model