Manga Translator Pro - Web App

A full-stack web application for manga translation with AI-powered features including OCR, balloon detection, and inpainting.

Features

• 🖼️ Image Upload - Drag & drop or click to upload manga images
• 🔍 Balloon Detection - AI-powered detection of speech balloons and text regions
• 📝 OCR - Extract text from manga images (supports Japanese, English, Korean, Chinese)
• 🎨 Inpainting - Clean/remove text from images using AI
• 🖌️ Canvas Editor - Zoom, pan, and select regions
• 🔄 Real-time Updates - WebSocket connection for progress updates
• 📱 Responsive UI - Modern interface with Tailwind CSS

Tech Stack

Frontend

• React 18 + TypeScript
• Vite (build tool)
• Tailwind CSS (styling)

Backend

• FastAPI (Python)
• WebSocket support
• PIL/Pillow (image processing)
• CORS enabled

Project Structure

web_app/
├── backend/                 # FastAPI backend
│   ├── api/                # API endpoints
│   │   ├── upload.py       # Image upload endpoint
│   │   ├── ocr.py          # OCR endpoint
│   │   ├── inpaint.py      # Inpainting endpoint
│   │   └── detect.py       # Detection endpoint
│   ├── core/               # Core utilities
│   │   ├── config.py       # Configuration settings
│   │   ├── websocket_manager.py  # WebSocket manager
│   │   └── utils.py        # Utility functions
│   ├── services/           # AI service implementations
│   │   ├── ocr_service.py
│   │   ├── inpaint_service.py
│   │   └── detection_service.py
│   ├── uploads/            # Uploaded images (created at runtime)
│   ├── results/            # Processing results (created at runtime)
│   ├── temp/               # Temporary files (created at runtime)
│   ├── main.py             # FastAPI entry point
│   └── requirements.txt    # Python dependencies
├── src/                     # Frontend source
│   ├── components/         # React components
│   ├── hooks/              # Custom React hooks
│   ├── services/           # API client
│   └── types/              # TypeScript types
├── start-dev.bat           # Windows startup script
├── start-dev.sh            # Linux/Mac startup script
└── package.json            # Node.js dependencies

Quick Start

Prerequisites

• Python 3.8+
• Node.js 18+
• npm or yarn

Installation

1. Clone the repository (or navigate to the project folder)

2. Copy environment file

   cp .env.example .env

3. Run the startup script

   On Windows:

   start-dev.bat

   On Linux/Mac:

   chmod +x start-dev.sh
   ./start-dev.sh

   This will:

   • Create a Python virtual environment
   • Install backend dependencies
   • Install frontend dependencies
   • Start both servers

4. Access the application

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:8000
   • API Docs: http://localhost:8000/docs

Manual Setup (Alternative)

If you prefer to run servers manually:

Terminal 1 - Backend:

cd backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt
python -m uvicorn main:app --reload --host 0.0.0.0 --port 8000

Terminal 2 - Frontend:

npm install
npm run dev

API Endpoints

Upload

• POST /api/upload - Upload an image file
• GET /api/uploads/{file_id} - Get uploaded image
• DELETE /api/upload/{file_id} - Delete uploaded image

OCR

• POST /api/ocr - Run OCR (async)
• POST /api/ocr/sync - Run OCR (sync)
• GET /api/ocr/status/{task_id} - Get OCR task status
• GET /api/ocr/languages - Get supported languages

Detection

• POST /api/detect - Run detection (async)
• POST /api/detect/sync - Run detection (sync)
• GET /api/detect/status/{task_id} - Get detection status
• GET /api/detect/models - Get available models
• GET /api/detect/types - Get detection types

Inpainting

• POST /api/inpaint - Run inpainting (async)
• POST /api/inpaint/sync - Run inpainting (sync)
• GET /api/inpaint/status/{task_id} - Get inpainting status
• GET /api/inpaint/methods - Get available methods

WebSocket

• WS /ws - Real-time updates and progress notifications

Development

Frontend Development

npm run dev          # Start dev server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint

Backend Development

cd backend
source venv/bin/activate

# Run with auto-reload
python -m uvicorn main:app --reload

# Run tests
pytest

Environment Variables

Variable	Description	Default
VITE_API_URL	Backend API URL	http://localhost:8000
VITE_WS_URL	WebSocket URL	ws://localhost:8000/ws
HOST	Backend host	0.0.0.0
PORT	Backend port	8000
DEBUG	Debug mode	true

Usage Guide

1. Upload an Image

   • Click "Open..." or drag & drop a manga image
   • Supported formats: JPG, PNG, WebP, BMP, TIFF

2. Detect Balloons

   • Click "Detect Balloons" to find speech balloons
   • Detections will appear as overlays on the image

3. Run OCR

   • Select a region with the rectangle tool, or run on entire image
   • Click "Run OCR" to extract text
   • Results will show extracted text with confidence scores

4. Clean/Inpaint

   • Select a region containing text
   • Click "Clean/Inpaint" to remove the text
   • The result will replace the original image

5. Canvas Tools

   • Pan: Move around the image
   • Rectangle Select: Select regions for processing
   • Zoom: Zoom in/out

Production Deployment

Backend

cd backend
pip install -r requirements.txt
# Use a production ASGI server like gunicorn
pip install gunicorn
gunicorn main:app -w 4 -k uvicorn.workers.UvicornWorker --bind 0.0.0.0:8000

Frontend

npm run build
# Serve the dist/ folder with your web server (nginx, Apache, etc.)

Notes

• The current implementation uses mock AI services for demonstration
• To use real AI models, implement the actual model loading in:
  • backend/services/ocr_service.py
  • backend/services/inpaint_service.py
  • backend/services/detection_service.py

License

MIT License