# AI Design & AI Fine-tuning

This repository contains two taks:

1. AI Design Analyzer - Convert wireframes/screenshots to detailed UI requirements and React code
2. BaaS(Backend As A Service) AI Fine-tuning - Fine-tune and generate backend endpoints based on existing schemas

## Project Overview

### AI Design Analyzer

- Takes wireframe/website screenshots as input
- Analyzes and extracts UI requirements including:
  - Typography
  - Color schemes
  - Button & Input styles
  - Icons & Images
  - Layout & Sections
  - Interactive elements
- Generates production-ready React components

### AI BaaS Endpoint Fine-tuner

- Fine-tunes existing backend endpoints
- Generates new endpoints based on schema definitions
- Reuses existing services when applicable
- Creates new services only when necessary

## 🚀 Getting Started

### Prerequisites

- Python 3.10+

## 📋 Model Training

### AI Design Model

The AI Design analyzer uses a model fine-tuned on UI wireframes and designs. The model is trained to detect:

- UI elements and their relationships
- Style properties and patterns
- Layout structures
- Interactive components

  **Note**: Take any samples of data(Wireframe Image) and then do the above. For example: You can take example of UI from there: [https://dribbble.com/tags/ui](https://dribbble.com/tags/ui)

  ### Basically the flow will look like that:

  ![Sample Flow of AI Design](sample_flow_ai_design.png)

### AI BaaS Fine-tuning Model

The BaaS fine-tuning uses a CodeGen-based model trained to:

- Understand existing endpoint patterns
- Recognize schema relationships
- Generate consistent API endpoints
- Maintain service architecture
  **Note**: For fine-tuning use the data in the `/ai_finetunining/dataset` directory

### The flow looks like this:

![Sample flow of AI Finetuning](sample_flow_ai_finetune.png)