Update README.md
Browse files
README.md
CHANGED
|
@@ -28,6 +28,43 @@ The goal of this model is **not** to be a frontier / SOTA LLM, but to be a **pra
|
|
| 28 |
|
| 29 |
---
|
| 30 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 31 |
## Why This Model
|
| 32 |
|
| 33 |
Instead of chasing leaderboard scores, this finetune is designed around a few pragmatic goals:
|
|
|
|
| 28 |
|
| 29 |
---
|
| 30 |
|
| 31 |
+
## Before vs After Finetuning
|
| 32 |
+
|
| 33 |
+
The following comparison shows the difference between the **base Qwen2.5-Coder** and the **finetuned Qwen2.5-Coder-14B-Frontend-UI-Architect** on the **exact same prompt**.
|
| 34 |
+
|
| 35 |
+
### Prompt used for both generations
|
| 36 |
+
|
| 37 |
+
You can reproduce this comparison with the following prompt:
|
| 38 |
+
|
| 39 |
+
You are a senior UI/UX and frontend engineer; design a complete, modern, visually polished web app dashboard for a productivity SaaS called “NovaBoard” that helps teams organize projects and tasks, and return the full implementation as a single App.tsx file using React, TypeScript, and Tailwind CSS (no external UI libraries or icons). The layout must include a left sidebar with app branding and navigation, a top bar with search and user profile, and a main content area with clearly structured sections for “Today”, “Projects”, and “Activity”, using a clean light theme, strong visual hierarchy (typography, spacing, alignment, and consistent color usage), responsive behavior for mobile and desktop, sensible empty states, and subtle microinteractions (hover states, focus states, pressed states) that make the interface feel refined and production-ready.
|
| 40 |
+
|
| 41 |
+
### Visual comparison
|
| 42 |
+
|
| 43 |
+
<p align="center">
|
| 44 |
+
<table>
|
| 45 |
+
<tr>
|
| 46 |
+
<th>Base Qwen2.5-Coder (no finetune)</th>
|
| 47 |
+
<th>Qwen2.5-Coder-14B-Frontend-UI-Architect (finetuned)</th>
|
| 48 |
+
</tr>
|
| 49 |
+
<tr>
|
| 50 |
+
<td align="center">
|
| 51 |
+
<img src="https://huggingface.co/codavidgarcia/qwen2.5-coder-14b-frontend-ui-architect-lora/resolve/main/qwen2-5-coder.png" alt="Base Qwen2.5-Coder UI output" width="430" />
|
| 52 |
+
</td>
|
| 53 |
+
<td align="center">
|
| 54 |
+
<img src="https://huggingface.co/codavidgarcia/qwen2.5-coder-14b-frontend-ui-architect-lora/resolve/main/qwen2-5-frontend-arquitect.png" alt="Finetuned UI-Architect model UI output" width="430" />
|
| 55 |
+
</td>
|
| 56 |
+
</tr>
|
| 57 |
+
</table>
|
| 58 |
+
</p>
|
| 59 |
+
|
| 60 |
+
The finetuned model tends to produce:
|
| 61 |
+
|
| 62 |
+
- **Stronger visual hierarchy** (typography, spacing, alignment).
|
| 63 |
+
- **More coherent light-theme dashboard layouts**.
|
| 64 |
+
- **More realistic, production-like React + TypeScript + Tailwind structure**.
|
| 65 |
+
- **Cleaner component organization** for “Today”, “Projects”, and “Activity” sections.
|
| 66 |
+
|
| 67 |
+
|
| 68 |
## Why This Model
|
| 69 |
|
| 70 |
Instead of chasing leaderboard scores, this finetune is designed around a few pragmatic goals:
|