Sistema inteligente de reconocimiento de emociones faciales en tiempo real con integración a Spotify.
EmotiPlay es una aplicación web que utiliza inteligencia artificial para detectar emociones faciales en tiempo real y adaptar automáticamente la reproducción de música en Spotify según el estado emocional del usuario. El sistema combina visión por computadora con MediaPipe, procesamiento de características faciales, y una interfaz web moderna construida con Next.js.
- Detección de Emociones en Tiempo Real: Identifica 6 emociones diferentes (feliz, triste, neutral, enojado, sorprendido, amor)
- Integración con Spotify: Cambia automáticamente la música según la emoción detectada
- Visualización de Datos: Gráficos interactivos del historial emocional
- Interfaz Moderna: Diseño responsivo con animaciones fluidas
- Procesamiento Local: Análisis de video en el navegador para mayor privacidad
- Historial de Emociones: Registro temporal de las emociones detectadas
EmotiPlay/
├── backend/ # Sistema de procesamiento de emociones (Python)
│ ├── emotion_processor/ # Módulos de procesamiento
│ │ ├── face_mesh/ # Detección de malla facial
│ │ ├── data_processing/ # Procesamiento de características
│ │ ├── emotions_recognition/ # Reconocimiento de emociones
│ │ └── emotions_visualizations/ # Visualización de resultados
│ ├── examples/ # Ejemplos de uso
│ └── docs/ # Documentación del backend
│
└── frontend/ # Aplicación web (Next.js + React)
├── app/ # Páginas de la aplicación
├── components/ # Componentes React
│ ├── emotion-recognition.tsx
│ ├── emotion-chart.tsx
│ ├── emotion-history.tsx
│ └── spotify-player.tsx
└── hooks/ # Custom hooks
- Python 3.10+
- MediaPipe 0.10.14: Detección de puntos faciales
- OpenCV 4.10.0: Procesamiento de imágenes y video
- NumPy 2.0.0: Operaciones numéricas y álgebra lineal
- Matplotlib: Visualización de datos
- Next.js 15.2.4: Framework React con SSR
- React 19: Biblioteca de UI
- TypeScript 5: Tipado estático
- Tailwind CSS 4.1.9: Estilos
- Recharts: Gráficos interactivos
- Radix UI: Componentes accesibles
- Lucide React: Iconos
- Python 3.10 o superior
- pip (gestor de paquetes de Python)
- Cámara web
- Node.js 18+ y npm/pnpm
- Navegador moderno con soporte para WebRTC
git clone https://github.com/tu-usuario/EmotiPlay.git
cd EmotiPlaycd backend
# Crear entorno virtual (recomendado)
python -m venv venv
source venv/bin/activate # En Windows: venv\Scripts\activate
# Instalar dependencias
pip install -r requirements.txtcd frontend
# Instalar dependencias
npm install
# o con pnpm
pnpm installcd backend
# Ejemplo con cámara en tiempo real
python examples/camera.py
# Ejemplo con video pregrabado
python examples/video_stream.pycd frontend
# Modo desarrollo
npm run dev
# o
pnpm dev
# La aplicación estará disponible en http://localhost:3000cd frontend
# Generar build de producción
npm run build
# Ejecutar build
npm startEl backend procesa las imágenes de la cámara siguiendo estos pasos:
- Detección de Rostro: MediaPipe identifica 468 puntos de referencia faciales
- Extracción de Características: Se analizan características específicas de:
- Ojos (apertura, posición)
- Cejas (elevación, ángulo)
- Boca (apertura, forma)
- Nariz (posición relativa)
- Clasificación de Emociones: Sistema basado en pesos que determina la emoción
- Visualización: Resultados superpuestos en el video en tiempo real
| Emoción | Características Clave |
|---|---|
| Feliz | Boca sonriente, ojos ligeramente cerrados |
| Triste | Comisuras de boca hacia abajo, cejas internas levantadas |
| Enojado | Cejas fruncidas, boca tensa |
| Sorprendido | Ojos y boca bien abiertos, cejas elevadas |
| Neutral | Rostro relajado sin expresión marcada |
| Amor | Sonrisa suave, mirada cálida |
El componente SpotifyPlayer adapta la música según la emoción:
- Feliz: Música energética y optimista
- Triste: Música melancólica y calmada
- Enojado: Música intensa o relajante
- Sorprendido: Música dinámica y variada
- Neutral: Mix balanceado
- Amor: Música romántica
EmotionRecognition (Componente principal)
├── Video Feed (Captura de cámara)
├── EmotionChart (Gráfico de emociones)
├── EmotionHistory (Historial temporal)
├── SpotifyPlayer (Reproductor de música)
└── Emotion Display (Emoción actual)
Crear archivo .env.local en el directorio frontend:
NEXT_PUBLIC_API_URL=http://localhost:8000
NEXT_PUBLIC_SPOTIFY_CLIENT_ID=tu_client_id
NEXT_PUBLIC_SPOTIFY_REDIRECT_URI=http://localhost:3000/callbackError: No se detecta la cámara
# Verificar permisos de cámara en el sistema operativo
# En Linux, puede requerir añadir usuario al grupo video
sudo usermod -a -G video $USERError: MediaPipe no se instala correctamente
# Actualizar pip y reinstalar
pip install --upgrade pip
pip install --force-reinstall mediapipe==0.10.14Error: Cannot access camera
- Verificar que el navegador tenga permisos de cámara
- Asegurarse de usar HTTPS o localhost
- Comprobar que no haya otra aplicación usando la cámara
Error de compilación TypeScript
# Limpiar cache y reinstalar
rm -rf node_modules .next
npm install- Backend: Procesamiento optimizado ~30 FPS en hardware moderno
- Frontend: Detección cada 2 segundos para balance entre precisión y rendimiento
- Memoria: ~200MB para backend, ~150MB para frontend
Las contribuciones son bienvenidas. Por favor:
- Fork el proyecto
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
- API REST para comunicación backend-frontend
- Autenticación real con Spotify API
- Almacenamiento persistente de historial
- Soporte para múltiples rostros
- Modelo de ML personalizado
- Aplicación móvil
Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
El sistema de reconocimiento de emociones del backend (directorio /backend) fue desarrollado por Santiago Sánchez del canal de YouTube Aprende e Ingenia.
Recursos originales:
- Canal de YouTube: Aprende e Ingenia
- Video explicativo: Sistema de reconocimiento de emociones con MediaPipe
- Repositorio original: face-emotion-recognition
- Instagram: @santiagsanchezr
- Twitter: @SantiagSanchezR
El código del backend incluye:
- Sistema de detección facial con MediaPipe
- Procesadores de características faciales (ojos, cejas, boca, nariz)
- Algoritmos de clasificación de emociones
- Sistema de visualización de resultados
Agradecimiento especial a Santiago Sánchez por crear y compartir este excelente sistema de reconocimiento de emociones que sirve como base para el procesamiento en EmotiPlay.
- MediaPipe: Google - Framework de ML para detección facial
- shadcn/ui: Componentes de UI accesibles para React
- Recharts: Biblioteca de gráficos para visualización de datos
- Next.js: Equipo de Vercel por el excelente framework
- Radix UI: Primitivas de UI accesibles
Para preguntas o sugerencias, por favor abre un issue en el repositorio.
- Santiago Sánchez (Aprende e Ingenia) por el sistema de reconocimiento emocional
- Comunidad de MediaPipe por la documentación y ejemplos
- Equipo de Next.js por el excelente framework
- Todos los contribuidores del proyecto
Desarrollado para entender y responder a las emociones humanas