Ventana al Futuro - Generador de Imágenes de Graduación

Aplicación web Flask que permite a los estudiantes capturar una foto usando su webcam y generar una imagen de su futura graduación utilizando la API de OpenAI. La aplicación crea una imagen donde el estudiante aparece vestido formalmente, sosteniendo su diploma de graduación con el logo de la institución.

Características

• Captura de fotos: Interfaz web con acceso a la cámara web del usuario
• Formulario interactivo: Recolección de datos del estudiante (nombre, carrera, género)
• Generación con IA: Utiliza la API de OpenAI (GPT-4 Vision) para editar imágenes
• Personalización por género: Prompts específicos para generar vestimenta apropiada
• Código QR: Genera un código QR para compartir fácilmente la imagen
• Interfaz amigable: Páginas de espera y resultados con diseño responsivo

Estructura del Proyecto

AplicacionWebGEN_IMG/
├── app.py                    # Aplicación Flask principal
├── requirements.txt          # Dependencias de Python
├── .env                      # Variables de entorno (API key)
├── README.md                # Este archivo
├── static/
│   ├── images/
│   │   └── logo.png         # Logo de la institución
│   ├── uploads/             # Fotos capturadas temporalmente
│   └── generated/           # Imágenes generadas y códigos QR
└── templates/
    ├── index.html           # Página principal
    ├── webcam.html          # Captura de fotos
    ├── form.html            # Formulario de datos
    ├── waiting.html         # Página de espera
    ├── result.html          # Mostrar resultado
    └── error.html           # Página de errores

Requisitos del Sistema

• Python 3.8 o superior
• Webcam funcional
• Navegador web moderno con soporte para getUserMedia
• Conexión a internet para la API de OpenAI

Instalación

1. Clona o descarga el proyecto:

git clone [URL_DEL_REPOSITORIO]
cd AplicacionWebGEN_IMG

2. Crea un entorno virtual (recomendado):

python -m venv venv
# En Windows:
venv\Scripts\activate
# En macOS/Linux:
source venv/bin/activate

3. Instala las dependencias:

pip install -r requirements.txt

4. Configura la API key de OpenAI:
   • Crea un archivo .env en la raíz del proyecto
   • Agrega tu clave API:

OPENAI_API_KEY=tu_clave_api_de_openai_aqui

5. Prepara el logo de la institución:
   • Coloca el logo de la institución en static/images/logo.png
   • Asegúrate de que sea una imagen PNG con fondo transparente si es posible

Uso de la Aplicación

1. Inicia el servidor Flask:

python app.py

2. Accede a la aplicación:

   • Abre tu navegador web
   • Ve a http://localhost:5000

3. Proceso paso a paso:

   • Página principal: Haz clic en "Comenzar"
   • Captura de foto: Permite el acceso a la cámara y toma una foto
   • Formulario: Completa tus datos (nombre, carrera, género)
   • Procesamiento: Espera mientras se genera tu imagen (puede tomar 1-2 minutos)
   • Resultado: Ve tu imagen de graduación generada y descarga el código QR

Características Técnicas

Flujo de la Aplicación

1. Captura: La webcam toma una foto del usuario
2. Datos: El usuario ingresa nombre, carrera y género
3. Generación: OpenAI edita la imagen original usando el logo institucional
4. QR: Se genera un código QR para compartir la imagen
5. Resultado: Se muestra la imagen final con opción de descarga

Tecnologías Utilizadas

• Flask: Framework web de Python
• OpenAI API: Para la edición de imágenes con IA
• OpenCV: Procesamiento de imágenes
• PIL/Pillow: Manipulación de imágenes
• QRCode: Generación de códigos QR
• HTML5: Acceso a la webcam del usuario

Configuración Avanzada

Variables de Entorno

OPENAI_API_KEY=tu_clave_aqui
FLASK_ENV=development  # opcional, para desarrollo
FLASK_DEBUG=True       # opcional, para debugging

Personalización de Prompts

Los prompts para la generación de imágenes se pueden personalizar en la función process_image() del archivo app.py. Hay prompts separados para estudiantes masculinos y femeninos.

Solución de Problemas

Errores Comunes

1. Error de API Key:

   • Verifica que el archivo .env existe y contiene la clave correcta
   • Asegúrate de que tu cuenta de OpenAI tiene créditos disponibles

2. Problemas con la webcam:

   • Verifica que el navegador tiene permisos para acceder a la cámara
   • Usa HTTPS en producción (requerido por los navegadores modernos)

3. Imágenes no se generan:

   • Verifica que el archivo logo.png existe en static/images/
   • Comprueba que las carpetas static/uploads y static/generated tienen permisos de escritura

4. Errores de dependencias:

   • Asegúrate de estar usando Python 3.8 o superior
   • Reinstala las dependencias: pip install -r requirements.txt --force-reinstall

Logs y Debugging

El servidor Flask imprime información útil en la consola. En caso de errores, revisa los mensajes para más detalles.

Consideraciones de Producción

• HTTPS: Necesario para el acceso a la webcam en navegadores modernos
• Límites de API: Considera los límites de uso de la API de OpenAI
• Almacenamiento: Las imágenes se acumulan en static/generated/, considera limpiarlas periódicamente
• Seguridad: Cambia la secret_key en producción por una clave más segura

Contribuciones

Si encuentras errores o tienes sugerencias de mejora, no dudes en crear un issue o pull request.