🎨 Image to SVG Converter

A full-stack web application that converts raster images (JPG/PNG) to SVG format using AI-powered technology. Built with React, FastAPI, and GraphQL.

✨ Features

• 🖼️ Image Upload: Drag-and-drop or click to upload JPG/PNG images
• ⚡ AI Conversion: Convert raster images to scalable SVG format
• 📱 Responsive Design: Beautiful UI that works on all devices
• ⬇️ Download SVG: One-click download of converted SVG files
• 🔄 Real-time Processing: Live conversion status with animated loaders
• ✅ File Validation: Smart validation for file types and sizes
• 🎨 Modern UI: Glassmorphism design with smooth animations

🏗️ Architecture

├── frontend/          # React + TypeScript + Vite
├── backend/           # FastAPI + GraphQL + Strawberry
├── docker-compose.yml # Container orchestration
└── README.md

🚀 Quick Start

Option 1: Using Docker (Recommended)

1. Clone and start the application:

   git clone <repository-url>
   cd image-to-svg-converter
   docker-compose up --build
   

2. Access the application:

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:8000
   • GraphQL Playground: http://localhost:8000/graphql

Option 2: Local Development

Backend Setup

1. Navigate to backend directory:

   cd backend
   

2. Create virtual environment:

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate
   

3. Install dependencies:

   pip install -r requirements.txt
   

4. Run the backend:

   python main.py
   

Frontend Setup

1. Navigate to frontend directory:

   cd frontend
   

2. Install dependencies:

   npm install
   

3. Start development server:

   npm run dev
   

🛠️ Technology Stack

Frontend

• React 18 - Modern React with hooks
• TypeScript - Type safety and better DX
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icons
• GraphQL Request - GraphQL client

Backend

• FastAPI - Modern Python web framework
• Strawberry GraphQL - GraphQL library for Python
• Pillow (PIL) - Image processing
• Uvicorn - ASGI server

DevOps

• Docker - Containerization
• Docker Compose - Multi-container orchestration
• Nginx - Web server for production

📋 API Documentation

GraphQL Schema

type Mutation {
  convertImageToSvg(file: Upload!): ConversionResult!
}

type ConversionResult {
  success: Boolean!
  svgContent: String
  error: String
}

type Query {
  hello: String!
}

REST Endpoints

• GET / - API information
• GET /health - Health check
• POST /upload - File upload endpoint
• GET /graphql - GraphQL playground

🎨 ML Model Integration

The application currently uses a mock conversion function that creates an SVG representation of the uploaded image. To integrate the StarVector model or any other ML model:

1. Replace the mock function in backend/main.py:

   def convert_image_to_svg_mock(image_data: bytes, filename: str) -> str:
       # Replace this with actual ML model integration
       # Example: StarVector model integration
       pass
   

2. Add model dependencies to requirements.txt:

   transformers==4.35.0
   torch==2.1.0
   # Add other ML dependencies
   

🔧 Configuration

Environment Variables

Create .env files in both frontend and backend directories:

Frontend (.env):

VITE_API_URL=http://localhost:8000/graphql

Backend (.env):

ENVIRONMENT=development
CORS_ORIGINS=["http://localhost:3000"]

Docker Configuration

The docker-compose.yml file configures:

• Backend service on port 8000
• Frontend service on port 3000
• Shared network for service communication
• Health checks and volume mounts

🚀 Deployment

Render Deployment

1. Backend Deployment:

   • Create new Web Service on Render
   • Connect your repository
   • Set build command: pip install -r requirements.txt
   • Set start command: uvicorn main:app --host 0.0.0.0 --port $PORT

2. Frontend Deployment:

   • Create new Static Site on Render
   • Set build command: cd frontend && npm install && npm run build
   • Set publish directory: frontend/dist

Netlify Deployment

1. Build the frontend:

   cd frontend && npm run build
   

2. Deploy to Netlify:

   • Drag and drop the dist folder to Netlify
   • Or connect your Git repository for automatic deployments

🧪 Testing

Backend Tests

cd backend
python -m pytest

Frontend Tests

cd frontend
npm test

📝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the 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

• StarVector Model - AI-powered image to SVG conversion
• Pexels - High-quality stock images
• Lucide - Beautiful icon library
• Tailwind CSS - Utility-first CSS framework

---

Built with ❤️ using React, FastAPI, and GraphQL