---
license: apache-2.0
datasets:
- smirki/UI_Reasoning_Dataset
language:
- en
pipeline_tag: text-generation
tags:
- code
base_model:
- Qwen/Qwen2.5-Coder-7B-Instruct
new_version: smirki/UIGEN-T1.1-Qwen-14B
---

![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/VSplF7AM1PJPzeR9FlDhE.png)

# **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](https://huggingface.co/smirki)  
- **Shared by:** [smirki](https://huggingface.co/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](https://huggingface.co/smirki)  
- **Demo:** Coming soon

![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/617YL3OlJHflvR63qbA27.png)


## **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**  
```plaintext
<|im_start|>user
{question}<|im_end|>
<|im_start|>assistant
<|im_start|>think
{reasoning}<|im_end|>
<|im_start|>answer
```

### **Basic Inference Code**  
```python
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:**  
```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](https://huggingface.co/smirki)


![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/VLs2LyOPXV4GZ2feXpD7F.png)


![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/boAgm__7mbD_B37OZzzyw.png)


![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/aBn-uzBsmK7vj-CxXRyBi.png)


![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/HaPat6448BpqneaBU47bz.png)


![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/8VuOPWMSJlu3kxmUQJb6R.png)


![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/RgFpQigIYes7wvzulZnkg.png)


![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/alBaCYJSLKyomF55XjOv-.png)


![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/k3uu2IPU_wIWco45RwdOV.png)

---