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

More Information

• GitHub Repository: (Coming soon)
• Web Demo: (Coming soon)

Model Card Authors

• Author: smirki

Model Card Contact

• Contact: smirki on Hugging Face

---