Back to Home
Live Product · Case Study

MangaX AI

Advanced AI Manga Translation Platform by redev.rx studio

พัฒนาโดย redev.rx studio ด้วย Kotlin Multiplatform (KMP) เพื่อประสิทธิภาพสูงสุดบน iOS & Android พร้อมระบบ automated OCR + AI translation pipeline (แอพแปลมังงะ AI) ที่แปล manga ได้ในไม่กี่วินาที โดยรักษาคุณภาพ artwork ของต้นฉบับไว้อย่างสมบูรณ์แบบ

99.9%

Uptime

98%

AI Accuracy

4.8★

App Rating

<1.5s

Translation Time

Architecture

System design ที่รองรับ scale ตั้งแต่วันแรก

📦

KMP Core

Shared logic between iOS & Android

🔍

Native OCR

ML Kit & Apple Vision on-device

🤖

AI Orchestrator

Gemini & Claude context processing

🎨

JS Injection

Real-time DOM overlay rendering

🛡️

Cloudflare

Rate limiting & DDoS protection

Technical Workflow

In-depth 12-step technical pipeline from start to finish

Step 1

Auth & JWT

ตรวจสอบสิทธิ์ก่อนเข้าถึง API เพื่อป้องกันการใช้งานที่ไม่ได้รับอนุญาต

Step 2

Built-in Browser

WebView อิสระ สามารถอ่านมังงะจากเว็บใดก็ได้ทั่วโลก

Step 3

DOM Extraction

Inject JS เพื่อดึงรูปภาพมังงะทั้งหมดใน viewport ปัจจุบัน

Step 4

Native Byte Pull

ดึง Image Bytes ผ่าน Native Layer เพื่อ Bypass CORS Policy

Step 5

On-device OCR

ประมวลผล Text ด้วย Google ML Kit (Android) และ Apple Vision (iOS)

Step 6

Secure Payload

ส่งเฉพาะ Text และ IDs ไปยัง Server ไม่ส่งรูปภาพต้นฉบับเพื่อความเป็นส่วนตัว

Step 7

AI Orchestration

เลือกใช้ Gemini 2.5 Flash หรือ Claude Haiku ตามความซับซ้อนของเนื้อหา

Step 8

Contextual AI

AI แปลทั้งหน้าในครั้งเดียวเพื่อให้เข้าใจบริบท (Context) ที่ถูกต้องที่สุด

Step 9

Smart Mapping

จับคู่คำแปลกลับไปยังตำแหน่งเดิมด้วย Stable IDs แม้ AI จะเรียงลำดับมาสลับกัน

Step 10

Hashing & Cache

ประหยัด Cost ด้วยการทำ Image Hash Caching ถ้าหน้าเดิมเคยแปลแล้วจะดึงจาก Cache ทันที

Step 11

JS Inject Overlay

Inject Overlay Div เข้าไปใน DOM ของรูปภาพเพื่อให้คำแปลเลื่อนตามการ Scroll

Step 12

Screenshot Mode

กรณีเว็บติด CSP Block แอพจะสลับไปโหมด Capture Bitmap แทนโดยอัตโนมัติ

Challenges & Solutions

Technical hurdles and implemented solutions

Challenge

การ Bypass CORS เมื่อต้องดึงรูปจากเว็บมังงะภายนอก

Solution

ใช้ Native Layer (Android/iOS) ดึง Image Bytes โดยตรงแทน Browser Request

Challenge

Translation ต้องเข้าใจบริบทของทั้งหน้า ไม่ใช่แค่ทีละ bubble

Solution

ส่ง Text ทั้งหน้าไปให้ AI ใน 1 Request เดียวเพื่อให้เข้าใจ context พร้อมกัน

Challenge

Coordinate เพี้ยนเมื่อ scroll หรือ zoom หน้าเว็บ

Solution

Inject Overlay เข้าไปใน DOM เดียวกับรูปภาพเพื่อให้เลื่อนตามรูปตลอดเวลา

Challenge

Security & Cost Management จากการใช้ AI API

Solution

ใช้ JWT Auth + Cloudflare Rate limit + Image Hash Caching

Features

Full KMP (Kotlin Multiplatform) architecture

Real-time DOM injection overlay

On-device OCR (ML Kit & Apple Vision)

AI Contextual Translation Pipeline

Bypass CORS using Native Image Layer

Secure JWT-based API protection

Tech Stack

Kotlin Multiplatform (KMP)Google ML KitApple Vision FrameworkCloudflare WAFGemini 2.5 FlashClaude Haiku 4.5JWT AuthRedis CacheJS Injection

อยากสร้าง Product แบบนี้บ้าง?

เราพร้อมช่วยออกแบบ architecture และสร้าง product ที่ scale ได้ตั้งแต่วันแรก