Reconocimiento de dígitos con CNN

Proyecto de reconocimiento de dígitos escritos a mano mediante una red neuronal convolucional (CNN). El modelo está entrenado con el conjunto de datos MNIST y se puede utilizar desde una interfaz web hecha con React o directamente mediante una API Flask.

¿Qué hace el proyecto?

La aplicación recibe una imagen con un dígito del 0 al 9 y devuelve:

• El dígito predicho.
• El porcentaje de confianza de la predicción.
• La probabilidad calculada para cada una de las diez clases.

Antes de predecir, el servidor transforma la imagen para adaptarla al formato usado durante el entrenamiento:

1. La convierte a escala de grises.
2. La redimensiona a 28 x 28 píxeles.
3. Normaliza los valores de los píxeles entre 0 y 1.
4. Invierte los colores cuando detecta un fondo claro.

Estructura del proyecto

numerosCNN/
├── api_server.py                 # API Flask para realizar predicciones
├── train_model.py                # Entrenamiento del modelo con MNIST
├── modelo_digitos_postal.keras   # Modelo entrenado
├── P02_CNN.ipynb                 # Notebook con el desarrollo paso a paso
└── frontend/
    ├── package.json              # Dependencias y scripts de React/Vite
    └── src/
        └── App.jsx               # Interfaz para subir imágenes y ver resultados

Requisitos

• Python 3.10 o superior.
• Node.js y npm.
• Un navegador web moderno.

Instalación

1. Preparar el entorno Python

Desde la carpeta raíz del proyecto, crea y activa un entorno virtual:

python -m venv .venv
.\.venv\Scripts\Activate.ps1

Instala las dependencias del backend:

python -m pip install --upgrade pip
python -m pip install flask flask-cors numpy pillow tensorflow

2. Instalar el frontend

cd frontend
npm install
cd ..

Cómo ejecutar la aplicación

La aplicación necesita dos procesos: el servidor de la API y el frontend.

1. Iniciar la API

Desde la raíz del proyecto y con el entorno virtual activado:

python api_server.py

El servidor quedará disponible en http://localhost:5000.

Puedes comprobar su estado con:

http://localhost:5000/health

La respuesta esperada es similar a:

{
  "model_loaded": true,
  "status": "ok"
}

2. Iniciar el frontend

En otra terminal:

cd frontend
npm run dev

Abre en el navegador la URL que muestre Vite, normalmente http://localhost:5173.

En la interfaz puedes arrastrar una imagen o seleccionarla desde el explorador de archivos. Después, pulsa Analizar imagen para consultar la predicción.

Entrenar de nuevo el modelo

El archivo modelo_digitos_postal.keras ya contiene un modelo entrenado. Si quieres volver a entrenarlo, ejecuta desde la raíz:

python train_model.py

El script descarga MNIST mediante TensorFlow, divide los datos en entrenamiento y validación, entrena una CNN durante un máximo de cinco épocas y sobrescribe modelo_digitos_postal.keras.

También puedes consultar el proceso completo en P02_CNN.ipynb.

API

GET /health

Comprueba que el servidor está activo y que el modelo se ha cargado correctamente.

POST /predict

Recibe una imagen usando el campo multipart/form-data image.

Ejemplo con curl:

curl -X POST -F "image=@ruta/a/imagen.png" http://localhost:5000/predict

Respuesta de ejemplo:

{
  "digit": 7,
  "confidence": 98.42,
  "probabilities": {
    "0": 0.0001,
    "1": 0.0002,
    "2": 0.0003,
    "3": 0.0004,
    "4": 0.0001,
    "5": 0.0002,
    "6": 0.0001,
    "7": 0.9842,
    "8": 0.0003,
    "9": 0.0141
  }
}

Solución de problemas

• No se puede cargar el modelo: comprueba que modelo_digitos_postal.keras está en la raíz del proyecto y que ejecutas python api_server.py desde esa carpeta.
• El frontend no conecta con la API: verifica que Flask está ejecutándose en el puerto 5000 y que la API responde en /health.
• La predicción es poco precisa: utiliza una imagen con un único dígito, bien visible y con buen contraste. El modelo ha sido entrenado con imágenes de estilo MNIST.
• Falla la instalación de TensorFlow: comprueba la versión de Python y consulta la compatibilidad de TensorFlow con tu sistema operativo.

Tecnologías utilizadas

• Python, TensorFlow y Keras.
• Flask y Flask-CORS.
• NumPy y Pillow.
• React y Vite.
• Dataset MNIST.