MangaLens Translator

Short Description

In this project, I developed an AI-powered translation tool that detects and translates text in manga and comic book pages, then allows for on-page editing.

Problem

The manga translation workflow typically disperses tasks like text detection, managing page order, image storage, and output editing across different tools. This project focuses on solving the need to consolidate this process into a single web application.

Solution

I built the application using Next.js and TypeScript. It utilizes Google Gemini for text bubble detection and to initiate the translation flow. On the editor side, I provide tools such as zoom, pan, comparison, a bulk translation queue, and drag-and-drop uploads. For data management, I used PostgreSQL and Drizzle ORM, implemented authentication with NextAuth, and stored images on S3-compatible MinIO, including backup and restore functionality.

Outcome

The result is a more comprehensive scanlation tool that not only handles translation but also encompasses editing and content management. The project clearly demonstrates AI integration, file storage, authentication, and a modern full-stack React architecture within a single framework.

Technologies

Next.js, TypeScript, Tailwind CSS 4, PostgreSQL, Drizzle ORM, NextAuth.js, Zustand, TanStack Query, Google Gemini, AWS SDK, MinIO, Docker

Setup