Reconocimiento interactivo de dígitos manuscritos (CNN)
Reconocimiento de dígitos
Este proyecto comenzó como un experimento divertido y educativo.
Quería entender mejor cómo funcionan los Convolutional Neural Networks (CNN) en la práctica y llevar la idea un paso más allá, convirtiendo un modelo entrenado en una demo web interactiva.
En lugar de quedarme solo en un notebook de Jupyter, el objetivo era completar todo el proceso, desde el entrenamiento del modelo hasta su uso real en el navegador.
¿Por qué este proyecto?
Elegí el reconocimiento de dígitos manuscritos porque:
- Es un problema clásico de machine learning
- Es lo suficientemente simple como para iterar rápido
- Es visual, intuitivo y divertido de usar
Dibujar un dígito y ver inmediatamente lo que “piensa” la red neuronal es una muy buena forma de hacer que el machine learning se sienta concreto y no abstracto.
Al dibujar los dígitos yo mismo, pude observar qué tan bien el modelo generalizaba a distintos estilos de escritura. Al dibujar lentamente, también era interesante ver cómo la predicción cambiaba en tiempo real, a medida que el modelo pasaba de un número a otro.
Este proyecto es intencionalmente simple. El objetivo no era alcanzar resultados de última generación, sino comprender todo el flujo de trabajo de machine learning y el proceso de despliegue.
Arquitectura del modelo
La red es un CNN (Convolutional Neural Network) bastante estándar, compuesta por:
- Capas convolucionales para extraer características espaciales
- Capas completamente conectadas para la clasificación
Para mejorar la generalización, añadí capas de dropout como regularización, reduciendo el riesgo de overfitting. Sin esto, el modelo podría funcionar muy bien con los datos de entrenamiento pero fallar con entradas nuevas, lo que afectaría directamente a la experiencia de la demo web.
También incluí capas de batch normalization para estabilizar y acelerar el entrenamiento.
Entrenamiento del modelo
El modelo fue entrenado utilizando Python, TensorFlow y Keras dentro de un notebook de Jupyter.
Utilicé el dataset MNIST, que contiene miles de imágenes de dígitos manuscritos etiquetados del 0 al 9. Las imágenes son pequeñas, en escala de grises, y están muy bien adaptadas a redes convolucionales.
Si te interesa, puedes consultar el notebook completo a continuación para ver todos los detalles.
Notebook de Jupyter: entrenamiento del modelo CNN
Notebook completo que muestra el entrenamiento de una red neuronal convolucional sobre el dataset MNIST usando TensorFlow y Keras.
Con esta configuración, el modelo alcanzó 99,55 % de precisión en el conjunto de validación / test, lo que confirma que aprendió a reconocer dígitos manuscritos de forma efectiva.
La precisión en el conjunto de entrenamiento se estabilizó alrededor de 99,24 %, muy cercana al rendimiento en validación. Esta pequeña diferencia indica una buena capacidad de generalización y ausencia de overfitting significativo.
Los valores bajos y consistentes de la loss en entrenamiento y validación sugieren que la red aprendió características relevantes en lugar de memorizar el dataset, lo que la hace adecuada para predicciones en tiempo real dentro de la demo interactiva.
Del notebook al navegador
Una vez entrenado el modelo, el siguiente reto fue el despliegue.
En lugar de usar una API backend, quise que las predicciones se ejecutaran completamente en el navegador. Para ello, convertí el modelo entrenado a TensorFlow.js.
Este enfoque tiene varias ventajas:
- No requiere servidor
- Respuesta inmediata
- Ejecución completamente del lado del cliente
El modelo final se carga directamente en el navegador y se utiliza para inferencia cada vez que el usuario dibuja en el canvas. Esto es posible porque el modelo es relativamente pequeño y eficiente, lo que lo hace adecuado para aplicaciones en tiempo real.
Interfaz web interactiva
El frontend está construido con HTML, CSS y JavaScript, utilizando un <canvas> de HTML5 para dibujar los dígitos.
Funcionalidades principales:
- Dibujo con el ratón
- Limpieza del canvas
- Actualización de predicciones en tiempo real
- Puntuaciones de confianza para cada dígito
El objetivo fue mantener la interfaz lo más simple posible y centrar la atención en la interacción con el modelo.
Demo en vivo
Puedes probar la demo directamente abajo.
Dibuja un dígito entre 0 y 9 y observa cómo reacciona el modelo.
Demo en vivo: reconocimiento de dígitos
Dibuja un dígito y observa las predicciones en tiempo real del modelo CNN ejecutándose directamente en tu navegador.
Lo que aprendí
Este proyecto me permitió:
- Comprender mejor los CNN más allá de la teoría
- Aprender a entrenar modelos con TensorFlow y Keras
- Aprender a desplegar modelos usando TensorFlow.js
- Valorar los compromisos entre simplicidad y rendimiento
También reforzó la idea de que incluso proyectos pequeños pueden ser muy valiosos cuando están bien terminados y son interactivos.
Posibles mejoras
Hay muchas extensiones posibles:
- Visualizar activaciones intermedias
- Probar otras arquitecturas o datasets
- Añadir funciones básicas de explicabilidad del modelo
Por ahora, el proyecto cumple exactamente con lo que se propuso, y eso es suficiente.