SafeTalk AI

En México y Latinoamérica, el acceso a salud mental es limitado y estigmatizado. Muchas personas no tienen con quién hablar cuando se sienten abrumadas. Nos preguntamos: ¿qué pasaría si existiera un espacio digital seguro donde pudieras desahogarte sin juicio y recibir una guía inicial empática? Así nació SafeTalk AI — no como reemplazo de un terapeuta, sino como un primer paso para ordenar lo que sientes.

What it does

SafeTalk AI permite al usuario expresarse mediante texto, audio (transcripción por voz) o cámara opcional (face mesh con señales faciales aproximadas). La app envía el contexto a Gemini API y devuelve:

• Un resumen empático de lo que entendió
• El estado emocional probable (con nivel de confianza e intensidad)
• Una respuesta empática personalizada
• Una pregunta reflexiva para ordenar ideas
• Un ejercicio breve de calma (respiración, grounding, etc.)
• En caso de crisis: líneas de ayuda y recomendación de buscar apoyo humano

How we built it

• Frontend: Next.js 15 (App Router) + TypeScript + Tailwind CSS con diseño glassmorphism en light mode
• IA: Gemini API (gemini-3-flash-preview) mediante el SDK @google/generative-ai, con un system prompt diseñado con guardrails éticos estrictos
• Visión: MediaPipe Face Landmarker (@mediapipe/tasks-vision) para extraer señales faciales aproximadas en tiempo real (tensión, sonrisa, mirada, postura)
• Audio: Web Speech API nativa del navegador para transcripción de voz en español
• Arquitectura: API route serverless (POST /api/analyze), sin base de datos, sin login, sin almacenamiento de datos personales

Challenges we ran into

• Hydration errors en Next.js: La Web Speech API solo existe en el navegador, lo que causaba diferencias entre el render del servidor y del cliente. Lo resolvimos moviendo la detección de soporte a un useEffect.
• TensorFlow Lite red overlay: MediaPipe imprime un mensaje INFO interno que Next.js Turbopack interpretaba como error y mostraba una pantalla roja. Implementamos un filtro quirúrgico de console.error para ese mensaje específico.
• Rate limits de Gemini: En la capa gratuita, algunos modelos (gemini-2.0-flash) tenían cuota 0. Tuvimos que probar múltiples modelos hasta encontrar uno funcional y agregar un sistema de cooldown de 30 segundos en la UI.
• Colores y UX: Iterar entre dark mode y light mode requirió reescribir toda la paleta de colores y asegurarnos de que el contraste fuera legible y cómodo.

Accomplishments that we're proud of

• Logramos un flujo de demo completo end-to-end: el usuario habla, escribe o activa la cámara, y en segundos recibe acompañamiento emocional real generado por IA.
• El modo crisis funciona correctamente: detecta mensajes delicados y prioriza líneas de ayuda y apoyo humano.
• La app es completamente funcional sin cámara ni micrófono — el texto es suficiente.
• Diseño premium en light mode que transmite calma y confianza.
• Zero data storage: no guardamos nada del usuario.

What we learned

• Aprendimos a diseñar prompts con guardrails éticos para IA en salud mental: qué decir, qué nunca decir, y cómo manejar crisis.
• Descubrimos las complejidades de integrar MediaPipe con Next.js SSR y cómo manejar las diferencias entre servidor y cliente.
• Entendimos la importancia de la degradación elegante: si un componente falla (cámara, audio, API), la app sigue funcionando.
• Experimentamos con múltiples modelos de Gemini y sus diferencias de cuota y disponibilidad.

What's next for Equipo-Papasitos

• Integrar historial de sesiones con almacenamiento seguro (Supabase/Firebase) para que el usuario pueda ver su progreso emocional.
• Agregar soporte multilingüe (inglés, portugués).
• Implementar ejercicios guiados interactivos (audio guiado de respiración, meditación).
• Explorar fine-tuning del prompt para diferentes contextos culturales.
• Validación con profesionales de salud mental para mejorar las respuestas.

Built With

• gemini