MANGAJILector de manga

Del archivo a la escena

Mangaji no usa ningún servidor: cuando abrís un tomo, todo el trabajo lo hace tu navegador, página por página. Primero encuentra las viñetas y los globos de diálogo con inteligencia artificial; después decide en qué orden se leen y prepara cómo mostrar cada una. Estos son los ocho pasos por los que pasa cada página.

Etapa 1: Abrir el archivo

Un archivo .cbz es una carpeta comprimida en formato ZIP con las páginas adentro; un .cbr es lo mismo, pero en formato RAR. Mangaji los descomprime en tu navegador y ordena las páginas por nombre, respetando capítulos y numeración.

El RAR es un formato cerrado, así que para abrirlo se usa libarchive, una biblioteca compilada a WebAssembly para que corra dentro del navegador. El trabajo pesado va en segundo plano: por eso podés empezar a leer mientras el resto del tomo se sigue procesando.

.cbz · .cbr12345páginas 1 → 5

Etapa 2: Preparar la imagen

La inteligencia artificial siempre recibe una imagen del mismo tamaño: un cuadrado de 1280 × 1280 píxeles. La página se achica sin deformarse hasta entrar en ese cuadrado, y el espacio que sobra se rellena de gris. Después la imagen se convierte en números: una tabla por color —rojo, verde y azul—, casi cinco millones de valores en total.

Este paso tiene que hacerse igual que cuando se entrenó el modelo. El navegador achica las imágenes a su manera, y con esa diferencia mínima una viñeta de Kingdom bajaba de 58 % a 9 % de confianza y dejaba de detectarse. Por eso el achique se calcula a mano, píxel por píxel, con el mismo método del entrenamiento.

1280 × 1280RGB

Etapa 3: Buscar viñetas y globos

Dos redes neuronales —modelos de inteligencia artificial entrenados con miles de páginas de manga— analizan la imagen. La primera encuentra viñetas, globos y texto, y marca la forma de cada uno. La segunda está especializada en texto y encuentra diálogos que a la primera se le escapan.

Cada red propone hasta 300 candidatos con un porcentaje de confianza, y se quedan los que superan un mínimo. Si una zona grande de la página queda sin ninguna viñeta, se acepta una candidata con menos confianza: pasa con las viñetas que llegan al borde de la hoja sin marco. Las redes corren en la placa de video si el dispositivo lo permite, o en el procesador.

viñeta0.98globo0.97texto0.66

Etapa 4: Dibujar el contorno

La red no entrega el contorno de cada viñeta ya dibujado: entrega una mancha borrosa que indica dónde está. Esa mancha se convierte en un polígono de pocos lados. Se decide qué píxeles forman parte de la viñeta, se limpian los bordes y se traza el contorno.

La mancha sale de mezclar 32 imágenes base que la red usa para todas sus detecciones; cada viñeta tiene su propia mezcla. Los píxeles que superan el 50 % pasan a ser parte de la viñeta. Como los cuadros de manga tienen lados rectos, el contorno se endereza y se simplifica: de unos 200 puntos quedan unos 20.

× 0.8× −0.3× 1.2× 0.532 × 160 × 160

Etapa 5: Decidir el orden

El manga se lee de derecha a izquierda y de arriba abajo, pero las viñetas rara vez forman una grilla prolija, así que el orden no siempre es obvio. Mangaji corta la página en filas, después corta cada fila en columnas, y repite hasta que cada viñeta queda sola. En cada paso elige el corte que menos viñetas atraviesa.

Un corte puede pasar por encima de una viñeta si le toca menos del 15 % de su superficie. Esa tolerancia es la que permite separar páginas con bordes en diagonal, muy comunes en las escenas de acción. El método viene del proyecto de investigación Manga109.

12345

Etapa 6: Separar el texto

Para que cada globo aparezca en su momento, el texto se separa del dibujo. Las letras se recortan y se guardan aparte, como una capa transparente. Después se borran de la página: dentro de un globo se pintan del color del papel, y fuera de un globo se rellenan con lo que las rodea.

Antes de recortar se comprueba que sea texto de verdad: el fondo tiene que ser papel y la tinta tiene que estar repartida en letras, no concentrada en una sola mancha, que sería un dibujo. Si un globo tiene varios bloques de texto se unen, y cada globo se asigna a la viñeta con la que más se superpone.

capa de diálogo

Etapa 7: Dirigir cada viñeta

Cada viñeta recibe su propia puesta en escena: cómo entra la cámara, si hay algún efecto y cuánto tiempo se muestra. Todo sale de medir la viñeta: cuánta tinta tiene y qué forma. Por ejemplo, una viñeta muy ancha se recorre de derecha a izquierda, y una muy alta, de arriba abajo.

Mucha tinta suele ser acción: con más del 42 % la cámara entra de golpe y la pantalla tiembla; con más del 52 %, hay un destello. Una viñeta que ocupa más de media página arranca de cerca y se abre. Los globos aparecen de a uno, y cada uno queda solo entre 0,25 y 1,6 segundos antes del siguiente, según cuánto texto tiene.

tinta52 %42 %lecturalecturapausacámaraglobo

Etapa 8: Guardar el resultado

Todo lo procesado se puede guardar en un archivo .cbza. Adentro van las páginas sin texto, cada globo como imagen aparte y un archivo que describe las viñetas, el orden y la puesta en escena. La próxima vez carga al instante, sin volver a pasar por la inteligencia artificial.

Ese archivo descriptivo —el manifiesto, en formato JSON— sigue un esquema fijo y se puede corregir a mano. Sirve para arreglar lo que la detección no acertó: ningún detector acierta siempre.

.cbzamanifest.jsonpages/p001.webppages/p002.webpsprites/p001.b0.pngsprites/p001.b1.png

PROBALO CON TU TOMO

Todo esto pasa en tu dispositivo, en segundos por página.

Abrir el lector