Skip to content

Latest commit

 

History

History
196 lines (159 loc) · 4.46 KB

README.md

File metadata and controls

196 lines (159 loc) · 4.46 KB

WebP Image Editor

A modern web application and API for converting and editing images to WebP format using FastAPI and vanilla JavaScript.

License: MIT Python 3.8+ FastAPI

Features

  • 🖼️ Convert various image formats to WebP
  • 🎨 Multiple resize modes:
    • Exact size
    • Percentage scaling
    • Preset dimensions
    • Fit within dimensions
    • Fill and crop
  • 📱 Common platform presets:
    • HD (1280x720)
    • Full HD (1920x1080)
    • QHD (2560x1440)
    • Instagram (1080x1080)
    • Twitter (1200x675)
    • Facebook (1200x630)
    • Thumbnail (150x150)
  • 🎯 High-quality WebP conversion with adjustable quality
  • 📚 Interactive API documentation (Swagger UI)
  • 🖱️ Modern drag-and-drop interface
  • 👁️ Live image preview
  • 📦 Uses official libwebp tools

Prerequisites

  • Python 3.8+
  • libwebp 1.5.0 or higher
  • pip (Python package manager)
  • Nginx (for production deployment)

Quick Start

  1. Clone the repository:
git clone https://github.com/yourusername/webp-editor.git
cd webp-editor
  1. Create and activate a virtual environment:
python -m venv venv
source venv/bin/activate  # On Windows, use: venv\Scripts\activate
  1. Install dependencies:
pip install -r app/requirements.txt
  1. Run the development server:
python app/main.py
  1. Open your browser and navigate to:
    • Web Interface: http://localhost:8000
    • API Documentation: http://localhost:8000/docs
    • Alternative API Docs: http://localhost:8000/redoc

API Documentation

Endpoints

GET /

  • Renders the main application interface
  • Returns: HTML page

POST /edit

  • Edit image with various resize options
  • Parameters:
    • file: Image file (multipart/form-data)
    • resize_mode: One of ["exact", "percentage", "preset", "fit", "fill"]
    • width: Target width in pixels (for exact, fit, fill modes)
    • height: Target height in pixels (for exact, fit, fill modes)
    • percentage: Scale percentage 1-200 (for percentage mode)
    • preset: Predefined dimensions (for preset mode)
  • Returns: JSON 
    {
  "success": true,
  "message": "Image edited successfully",
  "image_path": "/static/uploads/image.jpg",
  "width": 1920,
  "height": 1080
}

POST /convert

  • Convert image to WebP format
  • Parameters:
    • file: Image file (multipart/form-data)
    • quality: WebP quality 0-100 (default: 75)
  • Returns: JSON 
    {
  "success": true,
  "message": "Image converted successfully",
  "webp_path": "/static/uploads/image.webp",
  "width": 1920,
  "height": 1080
}

Production Deployment

Docker Deployment

  1. Make sure Docker and Docker Compose are installed on your system.

  2. Build and start the containers:

docker-compose up -d --build
  1. Check the status of the containers:
docker-compose ps
  1. View logs:
docker-compose logs -f
  1. Stop the services:
docker-compose down

Development

Project Structure

webp-editor/
├── app/
│   ├── static/
│   │   ├── uploads/    # Processed images
│   ├── templates/
│   │   └── index.html  # Frontend interface
│   ├── main.py         # FastAPI application
│   └── requirements.txt
├── deployment/
│   ├── nginx.conf
│   ├── webp-editor.service
│   └── deploy.sh
└── README.md

Running Tests

# TODO: Add test commands

Code Style

This project follows:

  • PEP 8 for Python code
  • Conventional Commits for git commits
  • OpenAPI standards for API documentation

Contributing

  1. Fork the repository
  2. Create your feature branch:
git checkout -b feature/amazing-feature
  1. Commit your changes:
git commit -m "feat: Add some amazing feature"
  1. Push to the branch:
git push origin feature/amazing-feature
  1. Open a Pull Request

License

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

Acknowledgments

  • libwebp - WebP compression library
  • FastAPI - Modern web framework for building APIs
  • Bootstrap - Frontend framework