Model Card for UIGEN-T1

Model Summary

UIGEN-T1 is a 7-billion parameter transformer model fine-tuned on Qwen2.5-Coder-7B-Instruct. It is designed for reasoning-based UI generation, leveraging a complex chain-of-thought approach to produce robust HTML and CSS-based UI components. Currently, it is limited to basic applications such as dashboards, landing pages, and sign-up forms.

Model Details

Model Description

UIGEN-T1 generates HTML and CSS-based UI layouts by reasoning through design principles. While it has a strong chain-of-thought reasoning process, it is currently limited to text-based UI elements and simpler frontend applications. The model excels at dashboards, landing pages, and sign-up forms, but lacks advanced interactivity (e.g., JavaScript-heavy functionalities).

Developed by: smirki
Shared by: smirki
Model type: Transformer-based
Language(s) (NLP): English
License: Apache 2.0
Finetuned from model: Qwen2.5-Coder-7B-Instruct

Model Sources

Repository: (Will be uploaded to GitHub soon)
Hosted on: Hugging Face
Demo: Coming soon

Uses

Direct Use

Generates HTML and CSS code for basic UI elements
Best suited for dashboards, landing pages, and sign-up forms
Requires manual post-processing to refine UI outputs
May require using the word "answer" at the end of the input prompt to get better inference

Downstream Use (optional)

Can be fine-tuned further for specific frontend frameworks (React, Vue, etc.)
May be integrated into no-code/low-code UI generation tools

Out-of-Scope Use

Not suitable for complex frontend applications involving JavaScript-heavy interactions
May not generate fully production-ready UI code
Limited design variety – biased towards basic frontend layouts

Bias, Risks, and Limitations

Biases

Strong bias towards basic frontend design patterns (may not generate creative or advanced UI layouts)
May produce repetitive designs due to limited training scope

Limitations

Artifacting issues: Some outputs may contain formatting artifacts
Limited generalization: Performs best in HTML + CSS UI generation, but not robust for complex app logic
May require prompt engineering (e.g., adding "answer" to input for better results)

How to Get Started with the Model

Example Model Template

<|im_start|>user
{question}<|im_end|>
<|im_start|>assistant
<|im_start|>think
{reasoning}<|im_end|>
<|im_start|>answer

Basic Inference Code

from transformers import AutoModelForCausalLM, AutoTokenizer

model_name = "smirki/UIGEN-T1"
tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForCausalLM.from_pretrained(model_name).to("cuda")

prompt = """<|im_start|>user
Make a dark-themed dashboard for an oil rig.<|im_end|>
<|im_start|>assistant
<|im_start|>think
"""

inputs = tokenizer(prompt, return_tensors="pt").to("cuda")
outputs = model.generate(**inputs, max_new_tokens=12012, do_sample=True, temperature=0.7) #max tokens has to be greater than 12k

print(tokenizer.decode(outputs[0], skip_special_tokens=True))

Training Details

Training Data

Based on: Qwen2.5-Coder-7B-Instruct
Fine-tuned on: UI-related datasets with reasoning-based HTML/CSS examples

Training Procedure

Preprocessing: Standard text-tokenization using Hugging Face transformers
Training Precision: bf16 mixed precision quantized to q8

Evaluation

Testing Data, Factors & Metrics

Testing Data: Internal UI design-related datasets
Evaluation Factors: Bias towards basic UI components, robustness in reasoning, output quality
Metrics: Subjective evaluation based on UI structure, correctness, and usability

Results

Strengths:
- Good at reasoning-based UI layouts
- Generates structured and valid HTML/CSS
Weaknesses:
- Limited design diversity
- Artifacting in outputs

Technical Specifications

Model Architecture and Objective

Architecture: Transformer-based LLM fine-tuned for UI reasoning
Objective: Generate robust frontend UI layouts with chain-of-thought reasoning

Compute Infrastructure

Hardware Requirements: 12GB VRAM reccomended
Software Requirements:
- Transformers library (Hugging Face)
- PyTorch

Citation

If using this model, please cite:

BibTeX:

@misc{smirki_UIGEN-T1,
  title={UIGEN-T1: Chain-of-Thought UI Generation Model},
  author={smirki},
  year={2025},
  publisher={Hugging Face},
  url={https://huggingface.co/smirki/UIGEN-T1}
}