03/Éditeur web de traduction de manga · non déployé
Lettrink
Détecter, traduire, effacer et relettrer une page de manga dans un éditeur façon Photoshop.
- Rôle
- Conception et développement front et back, en solo
- Période
- avr. – sept. 2026
- Statut
- Démo vidéo sur demande
Code privé — démo sur demande. Le dépôt est privé. Je fais volontiers une démo de l’application en visio ou en entretien.
Demander une démo- outils raster
- 27
- raccourcis clavier
- 46
- lignes côté front
- ~90 k
- commits
- 993
Contexte
Traduire un chapitre de manga, c’est quatre métiers : nettoyer la page, lire le japonais, traduire, relettrer. Les outils habituels sont des logiciels de bureau généralistes.
Le problème
Garder un éditeur fluide avec des pages haute résolution, des dizaines de bulles, des calques et un historique d’annulation cohérent entre trois modèles d’état (bulles, canvas, zones), pendant que le serveur analyse la page en arrière-plan.
Ce que j’ai fait
- Éditeur canvas, panneau des bulles, palette de commandes.
- API FastAPI et chaîne IA (OCR, traduction, inpainting).
- Authentification (OAuth, TOTP), paiement Stripe, i18n FR/EN.
Architecture & choix techniques
- 01
Un éditeur canvas complet
Calques, 27 outils raster, 46 raccourcis et une palette de commandes avec recherche floue. L’annulation est synchronisée entre bulles, canvas et zones grâce à un hook dédié.
- 02
Du temps réel en SSE
La progression de l’analyse est streamée par FastAPI en Server-Sent Events et lue côté client avec fetch et un ReadableStream.
- 03
Un aperçu au pixel près
Le client réimplémente l’algorithme Python de best-fit du texte (recherche binaire) pour que l’aperçu dans l’éditeur corresponde exactement au rendu final.
- 04
Une chaîne IA côté serveur
ONNX Runtime pour la détection, manga-ocr pour la lecture, LaMa pour l’inpainting, et DeepL, Google ou Claude pour la traduction, au choix.
Points clés
- Workflow par bulle : brouillon, traduite, lettrée, approuvée.
- Statistiques et heatmap annuelle en SVG fait main.
- Internationalisation FR/EN en 12 fichiers, avec un test de cohérence des clés.
Stack
- React 19
- Vite
- JavaScript (JSX)
- Canvas 2D
- IndexedDB
- motion
- react-window
- Vitest
- Python 3.11
- FastAPI
- SQLite
- ONNX Runtime
- manga-ocr
- LaMa / Real-ESRGAN
- DeepL · Google · Claude
- Stripe
- Sentry
Galerie (3)
Sélectionnez une image pour l’agrandir.