Aplicación web de traducción construida con Zustand, TypeScript y APIs nativas del navegador
Traductor inteligente que aprovecha las capacidades experimentales de traducción del navegador, junto con reconocimiento y síntesis de voz, para ofrecer una experiencia de traducción completa sin necesidad de APIs externas.
- 🤖 Traducción automática usando la Translator API experimental de Chromium
- 🔍 Detección automática de idioma con la Language Detector API
- 🎤 Entrada por voz mediante Web Speech API (Speech Recognition)
- 🔊 Reproducción de audio de las traducciones con Speech Synthesis
- 🔄 Intercambio rápido de idiomas origen/destino
- 📋 Copiar al portapapeles con un solo clic
- 🎨 Interfaz moderna con animaciones suaves
- 💾 Estado global persistente con Zustand
- 🌍 Soporte para 9 idiomas: Español, Inglés, Francés, Alemán, Italiano, Portugués, Ruso, Japonés y Chino
- Node.js 18 o superior
- npm o yarn
- Navegador compatible (ver sección de compatibilidad)
# Clonar el repositorio
git clone https://github.com/tu-usuario/ai-translator.git
cd ai-translator
# Instalar dependencias
npm install
# Ejecutar en modo desarrollo
npm run devLa aplicación estará disponible en http://localhost:3000
npm run dev # Inicia el servidor de desarrollo
npm run build # Crea el build de producción
npm run start # Inicia el servidor de producción
npm run lint # Ejecuta el linter
npm run type-check # Verifica los tipos de TypeScriptsrc/
├── app/
│ ├── layout.tsx # Layout principal
│ └── page.tsx # Página principal
├── components/
│ ├── LanguageSelector.tsx # Selector de idiomas
│ ├── TextArea.tsx # Área de texto para entrada/salida
│ ├── VoiceButton.tsx # Botón de reconocimiento de voz
│ └── SpeakButton.tsx # Botón de síntesis de voz
└── store/
├── translatorStore.ts # Store de Zustand
├── translatorTypes.ts # Definiciones de tipos
└── translatorConstants.ts # Constantes (idiomas disponibles)
- Entrada de texto: El usuario escribe o dicta texto mediante reconocimiento de voz
- Detección de idioma: Si el idioma origen es "auto", se detecta automáticamente
- Traducción: Se utiliza la Translator API del navegador para traducir
- Síntesis de voz: Opcionalmente, el resultado puede ser reproducido en voz alta
El estado global de la aplicación se maneja con Zustand e incluye:
interface TranslatorState {
sourceLanguage: string;
targetLanguage: string;
sourceText: string;
translatedText: string;
isLoading: boolean;
error: string | null;
// Acciones
setSourceLanguage: (lang: string) => void;
setTargetLanguage: (lang: string) => void;
setSourceText: (text: string) => void;
swapLanguages: () => void;
translate: () => Promise<void>;
detectLanguage: () => Promise<void>;
}| API | Descripción | Estado | Navegadores |
|---|---|---|---|
| Translator API | Traducción en el navegador | 🟡 Experimental | Edge Dev/Canary |
| Language Detector | Detección de idioma | 🟡 Experimental | Edge Dev/Canary |
| Speech Recognition | Reconocimiento de voz | 🟢 Estable | Chrome, Edge, Safari |
| Speech Synthesis | Síntesis de voz | 🟢 Estable | Todos los modernos |
Para obtener la mejor experiencia, se recomienda:
- ✅ Microsoft Edge (versión Dev o Canary) - Todas las funciones
- ✅ Google Chrome - Reconocimiento y síntesis de voz
⚠️ Firefox - Solo síntesis de voz⚠️ Safari - Funcionalidad limitada
Nota: Las APIs de traducción y detección son experimentales y solo están disponibles en versiones específicas de navegadores basados en Chromium.
Los idiomas están definidos en translatorConstants.ts:
export const LANGUAGES = [
{ code: 'es', name: 'Español' },
{ code: 'en', name: 'English' },
{ code: 'fr', name: 'Français' },
{ code: 'de', name: 'Deutsch' },
// ... más idiomas
];Federico Guzmán
Frontend Developer | Typescript/Javascript | Next.js/React | Zustand/Redux | TailwindCSS/SaSS | i18n | Firebase | Postgres | Express | Sequelize | MCP
Si te gustó este proyecto, dale una ⭐️