Upload 9 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+tokenizer.json filter=lfs diff=lfs merge=lfs -text

README.md

@@ -0,0 +1,180 @@
+---
+base_model: Qwen/Qwen2.5-Coder-7B-Instruct
+tags:
+- text-generation-inference
+- transformers
+- qwen2
+- ui-generation
+- peft
+- lora
+- tailwind-css
+- html
+license: apache-2.0
+language:
+- en
+---
+
+# Model Card for UIGEN-T2-7B
+
+<!-- Provide a quick summary of what the model is/does. -->
+
+
+![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/3zP7VsfnqhPS7HgJjDvjl.png)
+
+[OUR Training Article](https://cypress-dichondra-4b5.notion.site/UIGEN-T2-Training-1e393ce17c258024abfcff24dae7bedd)
+
+[Testing Github for Artifacts](https://github.com/TesslateAI/UIGEN-T2-Artifacts)
+
+## **Model Overview**
+
+We're excited to introduce **UIGEN-T2**, the next evolution in our UI generation model series. Fine-tuned from the highly capable **Qwen2.5-Coder-7B-Instruct** base model using PEFT/LoRA, UIGEN-T2 is specifically designed to generate **HTML and Tailwind CSS** code for web interfaces. What sets UIGEN-T2 apart is its training on a massive **50,000 sample dataset** (up from 400) and its unique **UI-based reasoning capability**, allowing it to generate not just code, but code informed by thoughtful design principles.
+
+---
+
+## **Model Highlights**
+
+-   **High-Quality UI Code Generation**: Produces functional and semantic HTML combined with utility-first Tailwind CSS.
+-   **Massive Training Dataset**: Trained on 50,000 diverse UI examples, enabling broader component understanding and stylistic range.
+-   **Innovative UI-Based Reasoning**: Incorporates detailed reasoning traces generated by a specialized "teacher" model, ensuring outputs consider usability, layout, and aesthetics. (*See example reasoning in description below*)
+-   **PEFT/LoRA Trained (Rank 128)**: Efficiently fine-tuned for UI generation. We've published LoRA checkpoints at each training step for transparency and community use!
+-   **Improved Chat Interaction**: Streamlined prompt flow – no more need for the awkward double `think` prompt! Interaction feels more natural.
+
+---
+
+## **Example Reasoning (Internal Guide for Generation)**
+
+Here's a glimpse into the kind of reasoning that guides UIGEN-T2 internally, generated by our specialized teacher model:
+
+```plaintext
+<|begin_of_thought|>
+When approaching the challenge of crafting an elegant stopwatch UI, my first instinct is to dissect what truly makes such an interface delightful yet functional—hence, I consider both aesthetic appeal and usability grounded in established heuristics like Nielsen’s “aesthetic and minimalist design” alongside Gestalt principles... placing the large digital clock prominently aligns with Fitts’ Law... The glassmorphism effect here enhances visual separation... typography choices—the use of a monospace font family ("Fira Code" via Google Fonts) supports readability... iconography paired with labels inside buttons provides dual coding... Tailwind CSS v4 enables utility-driven consistency... critical reflection concerns responsiveness: flexbox layouts combined with relative sizing guarantee graceful adaptation...
+<|end_of_thought|>
+```
+
+---
+
+## **Example Outputs**
+![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/ALTiUnT5-uUuDEtf4FfbQ.png)
+
+![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/veGwINF56SYIO_rVNSGuM.png)
+
+![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/j8QiAlHnLL2rRFQUwSlDe.png)
+
+![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/oK1y4ZyMh2OKXOmy1pCzc.png)
+
+![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d1129297ca59bcf7458d07/ycRiJgS-c5bIrgT0EZkGw.png)
+
+---
+
+## **Use Cases**
+
+### **Recommended Uses**
+-   **Rapid UI Prototyping**: Quickly generate HTML/Tailwind code snippets from descriptions or wireframes.
+-   **Component Generation**: Create standard and custom UI components (buttons, cards, forms, layouts).
+-   **Frontend Development Assistance**: Accelerate development by generating baseline component structures.
+-   **Design-to-Code Exploration**: Bridge the gap between design concepts and initial code implementation.
+
+### **Limitations**
+-   **Current Framework Focus**: Primarily generates HTML and Tailwind CSS. (Bootstrap support is planned!).
+-   **Complex JavaScript Logic**: Focuses on structure and styling; dynamic behavior and complex state management typically require manual implementation.
+-   **Highly Specific Design Systems**: May need further fine-tuning for strict adherence to unique, complex corporate design systems.
+
+---
+
+## **How to Use**
+
+You have to use this system prompt:
+```
+You are Tesslate, a helpful assistant specialized in UI generation.
+```
+These are the reccomended parameters: 0.7 Temp, Top P 0.9. 
+
+### **Inference Example**
+```python
+from transformers import AutoModelForCausalLM, AutoTokenizer
+import torch
+
+# Make sure you have PEFT installed: pip install peft
+from peft import PeftModel
+
+# Use your specific model name/path once uploaded
+model_name_or_path = "tesslate/UIGEN-T2" # Placeholder - replace with actual HF repo name
+base_model_name = "Qwen/Qwen2.5-Coder-7B-Instruct"
+
+# Load the base model
+base_model = AutoModelForCausalLM.from_pretrained(
+    base_model_name,
+    torch_dtype=torch.bfloat16, # or float16 if bf16 not supported
+    device_map="auto"
+)
+
+# Load the PEFT model (LoRA weights)
+model = PeftModel.from_pretrained(base_model, model_name_or_path)
+tokenizer = AutoTokenizer.from_pretrained(base_model_name) # Use base tokenizer
+
+# Note the simplified prompt structure (no double 'think')
+prompt = """<|im_start|>user
+Create a simple card component using Tailwind CSS with an image, title, and description.<|im_end|>
+<|im_start|>assistant
+""" # Model will generate reasoning and code following this
+
+inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
+
+# Adjust generation parameters as needed
+outputs = model.generate(**inputs, max_new_tokens=1024, do_sample=True, temperature=0.6, top_p=0.9)
+
+print(tokenizer.decode(outputs[0], skip_special_tokens=True))
+```
+---
+
+## **Performance and Evaluation**
+
+-   **Strengths**:
+    -   Generates semantically correct and well-structured HTML/Tailwind CSS.
+    -   Leverages a large dataset (50k samples) for improved robustness and diversity.
+    -   Incorporates design reasoning for more thoughtful UI outputs.
+    -   Improved usability via streamlined chat template.
+    -   Openly published LoRA checkpoints for community use.
+-   **Weaknesses**:
+    -   Currently limited to HTML/Tailwind CSS (Bootstrap planned).
+    -   Complex JavaScript interactivity requires manual implementation.
+    -   Reinforcement Learning refinement (for stricter adherence to principles/rewards) is a future step.
+
+---
+
+## **Technical Specifications**
+
+-   **Architecture**: Transformer-based LLM adapted with PEFT/LoRA
+-   **Base Model**: Qwen/Qwen2.5-Coder-7B-Instruct
+-   **Adapter Rank (LoRA)**: 128
+-   **Training Data Size**: 50,000 samples
+-   **Precision**: Trained using bf16/fp16. Base model requires appropriate precision handling.
+-   **Hardware Requirements**: Recommend GPU with >= 16GB VRAM for efficient inference (depends on quantization/precision).
+-   **Software Dependencies**:
+    -   Hugging Face Transformers (`transformers`)
+    -   PyTorch (`torch`)
+    -   Parameter-Efficient Fine-Tuning (`peft`)
+
+---
+
+## **Citation**
+
+If you use UIGEN-T2 or the LoRA checkpoints in your work, please cite us:
+
+```bibtex
+@misc{tesslate_UIGEN-T2,
+  title={UIGEN-T2: Scaling UI Generation with Reasoning on Qwen2.5-Coder-7B},
+  author={tesslate},
+  year={2024}, # Adjust year if needed
+  publisher={Hugging Face},
+  url={https://huggingface.co/tesslate/UIGEN-T2} # Placeholder URL
+}
+```
+
+---
+
+## **Contact & Community**
+-   **Creator:** [tesslate](https://huggingface.co/tesslate)
+-   **LoRA Checkpoints**: [tesslate](https://huggingface.co/tesslate)
+-   **Repository & Demo**: [smirki](https://huggingface.co/smirki)
+```

added_tokens.json

@@ -0,0 +1,24 @@
+{
+  "</tool_call>": 151658,
+  "<tool_call>": 151657,
+  "<|box_end|>": 151649,
+  "<|box_start|>": 151648,
+  "<|endoftext|>": 151643,
+  "<|file_sep|>": 151664,
+  "<|fim_middle|>": 151660,
+  "<|fim_pad|>": 151662,
+  "<|fim_prefix|>": 151659,
+  "<|fim_suffix|>": 151661,
+  "<|im_end|>": 151645,
+  "<|im_start|>": 151644,
+  "<|image_pad|>": 151655,
+  "<|object_ref_end|>": 151647,
+  "<|object_ref_start|>": 151646,
+  "<|quad_end|>": 151651,
+  "<|quad_start|>": 151650,
+  "<|repo_name|>": 151663,
+  "<|video_pad|>": 151656,
+  "<|vision_end|>": 151653,
+  "<|vision_pad|>": 151654,
+  "<|vision_start|>": 151652
+}

config.json

@@ -0,0 +1,39 @@
+{
+    "architectures": [
+        "Qwen2ForCausalLM"
+    ],
+    "attention_dropout": 0.0,
+    "bos_token_id": 151643,
+    "eos_token_id": 151645,
+    "hidden_act": "silu",
+    "hidden_size": 3584,
+    "initializer_range": 0.02,
+    "intermediate_size": 18944,
+    "max_position_embeddings": 32768,
+    "max_window_layers": 28,
+    "model_type": "qwen2",
+    "num_attention_heads": 28,
+    "num_hidden_layers": 28,
+    "num_key_value_heads": 4,
+    "rms_norm_eps": 1e-06,
+    "rope_scaling": null,
+    "rope_theta": 1000000.0,
+    "sliding_window": 131072,
+    "tie_word_embeddings": false,
+    "torch_dtype": "bfloat16",
+    "transformers_version": "4.50.0.dev0",
+    "use_cache": true,
+    "use_sliding_window": false,
+    "vocab_size": 152064,
+    "quantization_config": {
+        "quant_method": "exl2",
+        "version": "0.2.9",
+        "bits": 4.0,
+        "head_bits": 6,
+        "calibration": {
+            "rows": 115,
+            "length": 2048,
+            "dataset": "(default)"
+        }
+    }
+}

generation_config.json

@@ -0,0 +1,14 @@
+{
+  "bos_token_id": 151643,
+  "do_sample": true,
+  "eos_token_id": [
+    151645,
+    151643
+  ],
+  "pad_token_id": 151643,
+  "repetition_penalty": 1.1,
+  "temperature": 0.7,
+  "top_k": 20,
+  "top_p": 0.8,
+  "transformers_version": "4.50.0.dev0"
+}

special_tokens_map.json

@@ -0,0 +1,31 @@
+{
+  "additional_special_tokens": [
+    "<|im_start|>",
+    "<|im_end|>",
+    "<|object_ref_start|>",
+    "<|object_ref_end|>",
+    "<|box_start|>",
+    "<|box_end|>",
+    "<|quad_start|>",
+    "<|quad_end|>",
+    "<|vision_start|>",
+    "<|vision_end|>",
+    "<|vision_pad|>",
+    "<|image_pad|>",
+    "<|video_pad|>"
+  ],
+  "eos_token": {
+    "content": "<|im_end|>",
+    "lstrip": false,
+    "normalized": false,
+    "rstrip": false,
+    "single_word": false
+  },
+  "pad_token": {
+    "content": "<|endoftext|>",
+    "lstrip": false,
+    "normalized": false,
+    "rstrip": false,
+    "single_word": false
+  }
+}

tokenizer.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9c5ae00e602b8860cbd784ba82a8aa14e8feecec692e7076590d014d7b7fdafa
+size 11421896

tokenizer_config.json

@@ -0,0 +1,208 @@
+{
+  "add_bos_token": false,
+  "add_prefix_space": false,
+  "added_tokens_decoder": {
+    "151643": {
+      "content": "<|endoftext|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151644": {
+      "content": "<|im_start|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151645": {
+      "content": "<|im_end|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151646": {
+      "content": "<|object_ref_start|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151647": {
+      "content": "<|object_ref_end|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151648": {
+      "content": "<|box_start|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151649": {
+      "content": "<|box_end|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151650": {
+      "content": "<|quad_start|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151651": {
+      "content": "<|quad_end|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151652": {
+      "content": "<|vision_start|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151653": {
+      "content": "<|vision_end|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151654": {
+      "content": "<|vision_pad|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151655": {
+      "content": "<|image_pad|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151656": {
+      "content": "<|video_pad|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": true
+    },
+    "151657": {
+      "content": "<tool_call>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": false
+    },
+    "151658": {
+      "content": "</tool_call>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": false
+    },
+    "151659": {
+      "content": "<|fim_prefix|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": false
+    },
+    "151660": {
+      "content": "<|fim_middle|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": false
+    },
+    "151661": {
+      "content": "<|fim_suffix|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": false
+    },
+    "151662": {
+      "content": "<|fim_pad|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": false
+    },
+    "151663": {
+      "content": "<|repo_name|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": false
+    },
+    "151664": {
+      "content": "<|file_sep|>",
+      "lstrip": false,
+      "normalized": false,
+      "rstrip": false,
+      "single_word": false,
+      "special": false
+    }
+  },
+  "additional_special_tokens": [
+    "<|im_start|>",
+    "<|im_end|>",
+    "<|object_ref_start|>",
+    "<|object_ref_end|>",
+    "<|box_start|>",
+    "<|box_end|>",
+    "<|quad_start|>",
+    "<|quad_end|>",
+    "<|vision_start|>",
+    "<|vision_end|>",
+    "<|vision_pad|>",
+    "<|image_pad|>",
+    "<|video_pad|>"
+  ],
+  "bos_token": null,
+  "chat_template": "{%- if tools %}\n    {{- '<|im_start|>system\\n' }}\n    {%- if messages[0]['role'] == 'system' %}\n        {{- messages[0]['content'] }}\n    {%- else %}\n        {{- 'You are Qwen, created by Alibaba Cloud. You are a helpful assistant.' }}\n    {%- endif %}\n    {{- \"\\n\\n# Tools\\n\\nYou may call one or more functions to assist with the user query.\\n\\nYou are provided with function signatures within <tools></tools> XML tags:\\n<tools>\" }}\n    {%- for tool in tools %}\n        {{- \"\\n\" }}\n        {{- tool | tojson }}\n    {%- endfor %}\n    {{- \"\\n</tools>\\n\\nFor each function call, return a json object with function name and arguments within <tool_call></tool_call> XML tags:\\n<tool_call>\\n{\\\"name\\\": <function-name>, \\\"arguments\\\": <args-json-object>}\\n</tool_call><|im_end|>\\n\" }}\n{%- else %}\n    {%- if messages[0]['role'] == 'system' %}\n        {{- '<|im_start|>system\\n' + messages[0]['content'] + '<|im_end|>\\n' }}\n    {%- else %}\n        {{- '<|im_start|>system\\nYou are Qwen, created by Alibaba Cloud. You are a helpful assistant.<|im_end|>\\n' }}\n    {%- endif %}\n{%- endif %}\n{%- for message in messages %}\n    {%- if (message.role == \"user\") or (message.role == \"system\" and not loop.first) or (message.role == \"assistant\" and not message.tool_calls) %}\n        {{- '<|im_start|>' + message.role + '\\n' + message.content + '<|im_end|>' + '\\n' }}\n    {%- elif message.role == \"assistant\" %}\n        {{- '<|im_start|>' + message.role }}\n        {%- if message.content %}\n            {{- '\\n' + message.content }}\n        {%- endif %}\n        {%- for tool_call in message.tool_calls %}\n            {%- if tool_call.function is defined %}\n                {%- set tool_call = tool_call.function %}\n            {%- endif %}\n            {{- '\\n<tool_call>\\n{\"name\": \"' }}\n            {{- tool_call.name }}\n            {{- '\", \"arguments\": ' }}\n            {{- tool_call.arguments | tojson }}\n            {{- '}\\n</tool_call>' }}\n        {%- endfor %}\n        {{- '<|im_end|>\\n' }}\n    {%- elif message.role == \"tool\" %}\n        {%- if (loop.index0 == 0) or (messages[loop.index0 - 1].role != \"tool\") %}\n            {{- '<|im_start|>user' }}\n        {%- endif %}\n        {{- '\\n<tool_response>\\n' }}\n        {{- message.content }}\n        {{- '\\n</tool_response>' }}\n        {%- if loop.last or (messages[loop.index0 + 1].role != \"tool\") %}\n            {{- '<|im_end|>\\n' }}\n        {%- endif %}\n    {%- endif %}\n{%- endfor %}\n{%- if add_generation_prompt %}\n    {{- '<|im_start|>assistant\\n' }}\n{%- endif %}\n",
+  "clean_up_tokenization_spaces": false,
+  "eos_token": "<|im_end|>",
+  "errors": "replace",
+  "extra_special_tokens": {},
+  "model_max_length": 32768,
+  "pad_token": "<|endoftext|>",
+  "split_special_tokens": false,
+  "tokenizer_class": "Qwen2Tokenizer",
+  "unk_token": null
+}