Apppublic

Kazi-Afroz-Alam/AI-UI-to-Code-Generator

sourceHugging Faceupdated 6mo agoView on Hugging Face

0likes

App README

VisionCode AI - UI to Code Generator

Transform UI screenshots into production-ready code with AI-powered analysis. Upload a screenshot and receive HTML/CSS/JS frontend, Python backend, and database schema.

Features

—Drag & Drop Upload - Upload PNG, JPG, or WEBP images easily
—AI-Powered Analysis - OpenCV for layout detection, color extraction, component identification
—Multi-Framework Output - Generate HTML/CSS/JS or React components
—Full-Stack Generation - Python FastAPI backend + SQLite/PostgreSQL database schema
—Code Export - Copy individual files or download all at once
—Generation History - View and manage past generations
—Production Ready - Docker deployment, rate limiting, structured logging

Tech Stack

Layer	Technology
Frontend	React 18 + Vite + TailwindCSS
Backend	Python 3.10+ FastAPI
AI/ML	Hugging Face API + OpenCV
Database	SQLite / PostgreSQL via SQLAlchemy
Container	Docker + Docker Compose

Quick Start

Prerequisites

—Python 3.10+
—Node.js 18+
—Docker & Docker Compose (for containerized deployment)
—Hugging Face API Key (optional for enhanced AI analysis)

Option 1: Docker Deployment (Recommended)

bash

# Clone the repository
git clone https://huggingface.co/spaces/yourusername/ui-to-code-generator
cd ui-to-code-generator

# Start all services
docker-compose up -d

# View logs
docker-compose logs -f

Access the application at http://localhost:3000

Option 2: Manual Setup

Backend

bash

cd backend

# Create virtual environment
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Configure environment
cp .env.example .env
# Edit .env and add your HUGGINGFACE_API_KEY

# Run database migrations
alembic upgrade head

# Start the server
python run.py

Frontend

bash

cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

Configuration

Environment Variables

Variable	Description	Default
`APP_NAME`	Application name	UI-to-Code Generator
`ENVIRONMENT`	deployment environment	development
`DATABASE_URL`	Database connection string	sqlite:///./data/generations.db
`HUGGINGFACE_API_KEY`	Hugging Face API key for AI features	-
`SECRET_KEY`	Secret key for JWT tokens	-
`CORS_ORIGINS`	Allowed CORS origins	http://localhost:5173
`RATE_LIMIT_PER_MINUTE`	API rate limit	10
`LOG_LEVEL`	Logging level	INFO

Using PostgreSQL in Production

env

DATABASE_URL=postgresql://user:password@db:5432/uicodegen

API Reference

Base URL: http://localhost:8000/api/v1

Generate Code

http

POST /generate
Content-Type: application/json

{
  "image": "base64_encoded_image_data",
  "output_type": "html",
  "project_name": "my-project"
}

Response:

json

{
  "success": true,
  "generation_id": "uuid-string",
  "files": {
    "frontend": {
      "html": "<!DOCTYPE html>...",
      "css": "body { ... }",
      "javascript": "document.addEventListener..."
    },
    "backend": {
      "python": "from flask import Flask..."
    },
    "database": {
      "db_schema": "CREATE TABLE users..."
    }
  },
  "metadata": {
    "analyzed_components": ["header", "navigation", "button"],
    "color_palette": ["#1a1a2e", "#16213e", "#e94560"],
    "layout_type": "grid"
  }
}

Health Check

http

GET /health

Generation History

http

GET /history              # List all generations
GET /history/{id}         # Get specific generation
DELETE /history/{id}      # Delete a generation

Project Structure

ui-to-code-generator/
├── frontend/
│   ├── src/
│   │   ├── components/        # React components
│   │   │   ├── UploadZone.jsx
│   │   │   ├── CodeTabs.jsx
│   │   │   └── StatusIndicator.jsx
│   │   ├── hooks/             # Custom React hooks
│   │   │   └── useGeneration.js
│   │   ├── api/               # API client
│   │   │   └── index.js
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── Dockerfile
│   ├── nginx.conf
│   └── package.json
├── backend/
│   ├── app/
│   │   ├── api/v1/           # API routes
│   │   │   ├── generation.py
│   │   │   ├── health.py
│   │   │   └── history.py
│   │   ├── core/             # Core utilities
│   │   │   ├── database.py
│   │   │   ├── logging.py
│   │   │   └── security.py
│   │   ├── models/           # SQLAlchemy models
│   │   ├── schemas/          # Pydantic schemas
│   │   ├── services/         # Business logic
│   │   │   ├── image_processor.py
│   │   │   ├── ai_client.py
│   │   │   └── code_generator.py
│   │   ├── main.py           # FastAPI application
│   │   └── config.py         # Configuration
│   ├── alembic/              # Database migrations
│   ├── Dockerfile
│   ├── requirements.txt
│   └── run.py
├── nginx/
│   ├── nginx.conf
│   └── ssl/                  # SSL certificates
├── docker-compose.yml
├── SPEC.md                   # Detailed specification
└── README.md

Database Migrations

bash

cd backend

# Create a new migration
alembic revision --autogenerate -m "add new column"

# Apply migrations
alembic upgrade head

# Rollback
alembic downgrade -1

Docker Deployment

Production Build

bash

# Build images
docker-compose build

# Start services
docker-compose up -d

# View logs
docker-compose logs -f backend

# Stop services
docker-compose down

Environment-Specific Deployment

Development:

env

ENVIRONMENT=development
DATABASE_URL=sqlite:///./data/generations.db

Production:

env

ENVIRONMENT=production
DATABASE_URL=postgresql://user:password@db:5432/uicodegen

SSL/HTTPS Setup

1.Place certificates in nginx/ssl/:
2.cert.pem - SSL certificate
3.key.pem - Private key

1.Generate self-signed for testing:

bash

openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
  -keyout nginx/ssl/key.pem -out nginx/ssl/cert.pem \
  -subj "/C=US/ST=State/L=City/O=Organization/CN=localhost"

Generated Output

HTML/CSS/JS Output

—index.html - Semantic HTML5 structure
—styles.css - Responsive CSS with Flexbox/Grid
—app.js - Vanilla JavaScript interactions

React Output

—App.jsx - React functional components with hooks
—App.css - Component-scoped styles

Python Backend (Both)

—FastAPI application with RESTful endpoints
—CRUD operations
—Form handling endpoints

Database Schema (Both)

—SQLAlchemy models
—Migration files
—Tables: users, items, categories, contacts

Development

Running Tests

bash

# Backend tests
cd backend
pytest tests/ -v

# Frontend tests
cd frontend
npm test

Code Quality

bash

# Backend linting
cd backend
ruff check .

# Frontend linting
cd frontend
npm run lint

Contributing

1.Fork the repository
2.Create a feature branch (git checkout -b feature/amazing-feature)
3.Commit changes (git commit -m 'Add amazing feature')
4.Push to branch (git push origin feature/amazing-feature)
5.Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

—Hugging Face for AI models
—OpenCV for computer vision
—FastAPI for the Python backend
—React for the frontend framework