Update README.md
Browse files
README.md
CHANGED
|
@@ -34,24 +34,34 @@ The following comparison shows the difference between the **base Qwen2.5-Coder**
|
|
| 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 52 |
</td>
|
| 53 |
<td align="center">
|
| 54 |
-
<img
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 55 |
</td>
|
| 56 |
</tr>
|
| 57 |
</table>
|
|
|
|
| 34 |
|
| 35 |
### Prompt used for both generations
|
| 36 |
|
| 37 |
+
You can reproduce this comparison with the following prompt (sorry for the light theme, was easier to see diferences!):
|
| 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 width="100%">
|
| 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
|
| 52 |
+
src="https://huggingface.co/codavidgarcia/qwen2.5-coder-14b-frontend-ui-architect-lora/resolve/main/qwen2-5-coder.png"
|
| 53 |
+
alt="Base Qwen2.5-Coder UI output"
|
| 54 |
+
width="100%"
|
| 55 |
+
style="width: 100%; max-width: 100%; height: auto;"
|
| 56 |
+
/>
|
| 57 |
</td>
|
| 58 |
<td align="center">
|
| 59 |
+
<img
|
| 60 |
+
src="https://huggingface.co/codavidgarcia/qwen2.5-coder-14b-frontend-ui-architect-lora/resolve/main/qwen2-5-frontend-arquitect.png"
|
| 61 |
+
alt="Finetuned UI-Architect model UI output"
|
| 62 |
+
width="100%"
|
| 63 |
+
style="width: 100%; max-width: 100%; height: auto;"
|
| 64 |
+
/>
|
| 65 |
</td>
|
| 66 |
</tr>
|
| 67 |
</table>
|