Flashcards AI
Herramienta interactiva de estudio activo con giro 3D, soporte de audio fonético y generación mágica con IA.
Aplicación de estudio y memorización activa (Active Recall) diseñada para aprender términos técnicos y vocabulario bilingüe sin distracciones. Ofrece animación tridimensional de tarjetas con CSS 3D, lector de pronunciación por voz con Web Speech API, carga y exportación de mazos en ficheros CSV con PapaParse, y un modo mágico impulsado por la API de Google Gemini para autogenerar definiciones y traducciones con un solo clic.
Objetivos del Sistema
Facilitar el estudio bilingüe y la memorización activa (Active Recall) eliminando la fricción de los métodos estáticos tradicionales.
Permitir la importación y exportación de mazos de estudio mediante ficheros CSV estándar y persistencia local en LocalStorage.
Integrar capacidades generativas de IA (Google Gemini API) para autocompletar traducciones, definiciones y fonética con un solo clic.
Proporcionar una experiencia fluida y accesible con animaciones 3D de giro de tarjetas y pronunciación por voz en múltiples idiomas.
Capacidades Principales
Modo Mágico con Gemini: genera automáticamente definiciones completas y traducciones precisas conectando tu API Key de Gemini.
Giro 3D Realista: efecto tridimensional fluido con CSS transform rotateY para voltear entre anverso y reverso de la tarjeta.
Pronunciación Fonética en Vivo: síntesis de voz en el navegador con Web Speech API para escuchar la pronunciación exacta en idiomas.
Importación y Exportación CSV: procesa listas de estudio tabulares al instante en el navegador utilizando PapaParse.
Privacidad Total en Cliente: los datos y claves API residen exclusivamente en tu navegador (LocalStorage) sin rastreo externo.
Arquitectura y Especificaciones de Diseño
Arquitectura cliente estricta (Client-Only Privacy): toda la lógica de gestión de mazos y progreso de estudio reside en el motor JavaScript del navegador. Cuando se activa el modo IA, la app realiza llamadas HTTPS directas a la API de Gemini mediante la API Key suministrada por el usuario, sin servidores intermediarios.
🔍 Haz clic en el diagrama para ampliar a pantalla completa
Principios Arquitectónicos Invariantes:
- Privacidad y Soberanía de Datos: nada se envía a servidores de terceros salvo las llamadas directas de inferencia a la API de Gemini.
- Fricción Cero: entrada directa manual, masiva por CSV o asistida por IA sin requerir registro de cuenta ni login obligatorio.
- Sensorial y Accesible: feedback visual 3D enriquecido con síntesis fonética por voz para afianzar el aprendizaje bilingüe.
Stack Tecnológico
FRONTEND
LIBRARIES
APIS
AI
HOSTING
Artículos de Referencia & Documentación de Construcción
Esta aplicación está respaldada por una serie técnica publicada paso a paso en el blog:
Programando con IA: Creando mi Propia App mágica de Flashcards para Estudiar
Ayudando a mi hijo a estudiar ciencias en inglés, me di cuenta de que necesitábamos algo más que tapar la hoja con la mano. Así …
Leer artículo completo →Historial Evolutivo & Versiones (SemVer)
Registro formal de entregas, características y revisiones de seguridad:
Lanzamiento oficial de Flashcards con motor IA de Gemini y pronunciación fonética
- Integración del modo de autocompletado inteligente con Google Gemini API para generación de términos y definiciones.
- Implementación de síntesis fonética por voz mediante la Web Speech Synthesis API nativa del navegador.
- Soporte de importación y exportación de archivos CSV con PapaParse y plantillas de ejemplo descargables.
- Animación de tarjeta tridimensional (CSS 3D rotateY) y persistencia de progreso en LocalStorage.
- Estado congelado como herramienta de estudio terminada y autónoma.
Motor de animación 3D y soporte de plantillas CSV
- Implementación del giro de tarjetas tridimensional y procesamiento básico de archivos de texto.
Prototipo inicial de tarjetas manuales y repaso bilingüe
- Interfaz simple con entrada manual de pares término/definición y contador básico de aciertos.