🎨 MorphUI

MorphUI is a fine-tuned large language model that transforms standard React components into Stripe-inspired React interfaces while preserving their original structure and functionality.

The current model has been trained specifically on Stripe-style UI transformations using a custom dataset of React component pairs. The project is designed to support additional design systems in future versions through separate fine-tuned adapters.

Demo

1. Transform a React Component in Google Colab

2. Preview the Original Component

3. Preview the Transformed Component

Current Model

The current release focuses exclusively on Stripe-inspired UI transformations. The architecture is designed so additional styles (Apple, Linear, Vercel, etc.) can be added later as separate fine-tuned adapters.

✨ Features

• 🤖 Fine-tuned Qwen2.5-Coder-7B-Instruct using LoRA
• 🎨 Transforms React + Tailwind components into Stripe-inspired interfaces
• ⚛️ Preserves component hierarchy, content, and functionality
• 📒 Google Colab notebooks for inference and fine-tuning
• 💻 Companion React preview application for rendering transformed components

📁 Repository Structure

MorphUI/
├── notebooks/
│   ├── MorphUI.ipynb
│   └── finetune.ipynb
├── preview/
├── assets/
├── examples/
├── README.md
└── LICENSE

🚀 Getting Started

Transform Components

Open notebooks/MorphUI.ipynb, run the setup cells, paste your React component, and execute the transform cell.

Preview the Result

Open the hosted preview application:

https://morph-ui-tau.vercel.app/

Paste the transformed component into the editor to render it live.

Fine-Tune (Optional)

Open notebooks/finetune.ipynb to retrain the model using your own dataset.

🧠 Model

Component Value

---

Base Model Qwen2.5-Coder-7B-Instruct Fine-Tuning LoRA Framework Unsloth + Hugging Face Transformers Task React Component Style Transfer

🛠️ Tech Stack

Machine Learning

• Python
• Google Colab
• Unsloth
• Hugging Face Transformers
• PEFT (LoRA)

Frontend

• React
• Vite
• Tailwind CSS

🔄 Workflow

React Component
      ↓
MorphUI Notebook
      ↓
Transformed React Component
      ↓
MorphUI Preview App
      ↓
Rendered UI

👨‍💻 Author

Sereyvidya Vireak

Computer Science graduate passionate about building practical software solutions that solve real-world problems.

GitHub: https://github.com/Sereyvidya

🪪 License

MIT License — free to use, modify, and build upon!