Instructions to use Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT with libraries, inference providers, notebooks, and local apps. Follow these links to get started.

Libraries

How to use Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT with Transformers:

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

pipe = pipeline("image-text-to-text", model="Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT")
messages = [
    {
        "role": "user",
        "content": [
            {"type": "image", "url": "https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/p-blog/candy.JPG"},
            {"type": "text", "text": "What animal is on the candy?"}
        ]
    },
]
pipe(text=messages)

# Load model directly
from transformers import AutoProcessor, AutoModelForMultimodalLM

processor = AutoProcessor.from_pretrained("Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT")
model = AutoModelForMultimodalLM.from_pretrained("Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT", device_map="auto")
messages = [
    {
        "role": "user",
        "content": [
            {"type": "image", "url": "https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/p-blog/candy.JPG"},
            {"type": "text", "text": "What animal is on the candy?"}
        ]
    },
]
inputs = processor.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(processor.decode(outputs[0][inputs["input_ids"].shape[-1]:]))

Notebooks
Google Colab
Kaggle
Local Apps Settings

vLLM

How to use Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT with vLLM:

Install from pip and serve model

# Install vLLM from pip:
pip install vllm
# Start the vLLM server:
vllm serve "Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT"
# Call the server using curl (OpenAI-compatible API):
curl -X POST "http://localhost:8000/v1/chat/completions" \
	-H "Content-Type: application/json" \
	--data '{
		"model": "Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT",
		"messages": [
			{
				"role": "user",
				"content": [
					{
						"type": "text",
						"text": "Describe this image in one sentence."
					},
					{
						"type": "image_url",
						"image_url": {
							"url": "https://cdn.britannica.com/61/93061-050-99147DCE/Statue-of-Liberty-Island-New-York-Bay.jpg"
						}
					}
				]
			}
		]
	}'

Use Docker

docker model run hf.co/Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT

SGLang

How to use Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT 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 "Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT" \
    --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": "Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT",
		"messages": [
			{
				"role": "user",
				"content": [
					{
						"type": "text",
						"text": "Describe this image in one sentence."
					},
					{
						"type": "image_url",
						"image_url": {
							"url": "https://cdn.britannica.com/61/93061-050-99147DCE/Statue-of-Liberty-Island-New-York-Bay.jpg"
						}
					}
				]
			}
		]
	}'

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 "Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT" \
        --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": "Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT",
		"messages": [
			{
				"role": "user",
				"content": [
					{
						"type": "text",
						"text": "Describe this image in one sentence."
					},
					{
						"type": "image_url",
						"image_url": {
							"url": "https://cdn.britannica.com/61/93061-050-99147DCE/Statue-of-Liberty-Island-New-York-Bay.jpg"
						}
					}
				]
			}
		]
	}'

Docker Model Runner
How to use Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT with Docker Model Runner:
```
docker model run hf.co/Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT
```

Widget2Code Qwen3.5-4B Full SFT

Qwen3.5-4B fine-tuned to generate a self-contained React JSX widget from a target screenshot and deterministic dimension, OCR, and palette context.

This is a full-weight BF16 checkpoint, not a PEFT adapter. The vision tower was frozen during SFT; the language policy was trained for one epoch on 1,816 paired image-code examples from Djanghao/Widget2Code-Data.

Intended use

Direct screenshot-to-JSX inference.
Initialization for the Widget2Code DAPO/GRPO experiment.

The model emits code that must be executed in a sandboxed renderer. It can produce invalid or unsafe code and should not be executed in a privileged environment.

Training

Base model: Qwen/Qwen3.5-4B
Method: full-weight SFT with the vision tower frozen
Epochs: 1
Learning rate: 1e-5
Effective train batch size: 16
Seed: 42
Weight dtype: BF16

Existing test result

On the 1,000-image Widget2Code test split with temperature 0.7, repetition penalty 1.1, and a 10,000-token limit:

render success: 862/1,000 (86.2%)
mean SSIM among rendered outputs: 0.7080
mean SSIM with render failures scored as zero: 0.6103

These numbers describe the stored evaluation run and are not a claim of general-purpose frontend correctness.

Downloads last month: 12

Safetensors

Model size

5B params

Tensor type

F32

BF16

Model tree for Djanghao/Widget2Code-Qwen3.5-4B-Full-SFT

Base model

Qwen/Qwen3.5-4B-Base

Finetuned

Qwen/Qwen3.5-4B

Finetuned

(503)

this model