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

Libraries

How to use Djanghao/Widget2Code-Qwen3.5-9B-LoRA-SFT-Merged 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-9B-LoRA-SFT-Merged")
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-9B-LoRA-SFT-Merged")
model = AutoModelForMultimodalLM.from_pretrained("Djanghao/Widget2Code-Qwen3.5-9B-LoRA-SFT-Merged", 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-9B-LoRA-SFT-Merged 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-9B-LoRA-SFT-Merged"
# 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-9B-LoRA-SFT-Merged",
		"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-9B-LoRA-SFT-Merged

SGLang

How to use Djanghao/Widget2Code-Qwen3.5-9B-LoRA-SFT-Merged 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-9B-LoRA-SFT-Merged" \
    --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-9B-LoRA-SFT-Merged",
		"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-9B-LoRA-SFT-Merged" \
        --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-9B-LoRA-SFT-Merged",
		"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-9B-LoRA-SFT-Merged with Docker Model Runner:
```
docker model run hf.co/Djanghao/Widget2Code-Qwen3.5-9B-LoRA-SFT-Merged
```

Widget2Code Qwen3.5-9B SFT-LoRA Merged BF16

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

The selected rank-32 SFT LoRA has been merged into Qwen/Qwen3.5-9B and saved as a standalone BF16 checkpoint. No PEFT adapter is required at load time. This is the recommended 9B initialization for the Widget2Code DAPO/GRPO experiment, which adds a fresh policy LoRA on top of these merged SFT weights.

The SFT data contains 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 and merge

Base model: Qwen/Qwen3.5-9B
SFT method: LoRA, rank 32, alpha 64, dropout 0.05
SFT epochs: 4
Merge dtype: BF16
Saved parameters: 9,409,813,744, all BF16
PEFT modules remaining after merge: none

Sanitized merge details and source adapter hashes are recorded in merge_provenance.json.

Existing test result

The stored 1,000-image Widget2Code evaluation produced 954 renderable outputs (95.4%). Their mean SSIM was 0.7280.

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

Downloads last month: -

Safetensors

Model size

9B params

Tensor type

BF16

Model tree for Djanghao/Widget2Code-Qwen3.5-9B-LoRA-SFT-Merged

Base model

Qwen/Qwen3.5-9B-Base

Finetuned

Qwen/Qwen3.5-9B

Finetuned

(629)

this model