MangaTranslator-Browser

โปรแกรมแปลมังงะอัตโนมัติแบบ Web-based ที่ใช้ AI สำหรับ Detection, OCR และ Inpainting

✨ Features

• 🎨 Modern Web UI - Next.js + TailwindCSS + React Konva
• 🔍 Real Detection - Text & Balloon detection ด้วย ONNX (YOLO)
• 📝 Real OCR - รองรับหลายภาษา ผ่าน External API
• 🖼️ Multi-Page Support - อัพโหลดและจัดการหลายหน้าพร้อมกัน
• 📏 Long Image Support - Webtoon mode (Fit Width/Height/Free)
• 🎯 Balloon Detection - แยกสี Text (แดง) / Balloon (น้ำเงิน)
• 💾 Project Management - จัดกลุ่มงานแปล
• ⚙️ Settings Panel - ปรับแต่งค่าต่างๆ ได้

🚀 Quick Start

Prerequisites

• Node.js 18+
• Python 3.9+
• (Optional) OCR Service running on port 2322

Installation

# Clone repository
git clone https://github.com/yourusername/MangaTranslator-Browser.git
cd MangaTranslator-Browser

# Backend Setup
cd backend
python -m venv venv
.\venv\Scripts\activate  # Windows
# source venv/bin/activate  # Linux/Mac
pip install -r requirements.txt
python main.py

# Frontend Setup (new terminal)
cd frontend
npm install
npm run dev

เปิดเบราว์เซอร์ที่ http://localhost:3000

📁 Project Structure

MangaTranslator-Browser/
├── backend/                # FastAPI Backend
│   ├── api/               # API endpoints
│   ├── services/          # Detection, OCR services
│   ├── models/            # ONNX models
│   └── main.py
├── frontend/              # Next.js Frontend
│   ├── src/
│   │   ├── app/          # Pages
│   │   ├── components/   # UI Components
│   │   └── store/        # Zustand state
│   └── package.json
└── README.md

🎯 Usage

1. Upload Image - ลาก & วางรูปมังงะ
2. Run Detection - ตรวจจับกรอบข้อความ
3. Run OCR - แปลงข้อความเป็น text
4. View Results - ดูผลลัพธ์ทางขวา

Multi-Page

• เลือกหลายไฟล์พร้อมกัน
• ใช้ Previous/Next หรือ thumbnail navigation
• กด Arrow keys เพื่อสลับหน้า

View Modes

• Fit Width - เหมาะสำหรับภาพยาว (Webtoon)
• Fit Height - เหมาะสำหรับหน้ามังงะทั่วไป
• Free - ควบคุม Zoom/Pan เอง

🔧 Configuration

OCR Settings

# Run external OCR service (PratchayaOCR)
# Default: http://localhost:2322

เปลี่ยนได้ใน Settings Panel → OCR → API URL

Detection Model

Model: ogkalu/comic-text-and-bubble-detector (ONNX) Path: backend/models/detector.onnx

📚 API Documentation

Detection

POST /api/detect
{
  "file_id": "abc123",
  "model": "default",
  "conf_threshold": 0.25
}

OCR

POST /api/ocr
{
  "file_id": "abc123",
  "language": "jpn",
  "detections": [...]
}

🛠️ Development

# Frontend dev mode with hot reload
cd frontend && npm run dev

# Backend dev mode
cd backend && python main.py

# Type checking
cd frontend && npm run type-check

# Linting
cd frontend && npm run lint

🤝 Contributing

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

📝 License

MIT License - ดู LICENSE สำหรับรายละเอียด

🙏 Acknowledgments

• ogkalu/comic-text-and-bubble-detector - Detection Model
• Next.js - React Framework
• FastAPI - Backend Framework
• Konva.js - Canvas Library

📧 Contact

Your Name - @yourtwitter

Project Link: https://github.com/yourusername/MangaTranslator-Browser

---

Made with ❤️ for manga translation