Hackeruna ahora disponible en inglés: traducción automática con IA

🌐 Hackeruna ahora está disponible en inglés. Implementé un sistema de traducción automática impulsado por IA (GPT-4o-mini) que traduce los posts bajo demanda y los cachea para futuras visitas. En este artículo te explico cómo funciona el sistema, por qué elegí este enfoque y cómo puedes implementar algo similar en tu proyecto.

🎯 El Problema: Internacionalización de Contenido

Hackeruna es un blog técnico escrito principalmente en español. Sin embargo, gran parte de la audiencia potencial habla inglés. Las opciones tradicionales eran:

Enfoque	Pros	Contras
Escribir cada post en 2 idiomas	Control total	Doble trabajo, difícil mantener
Plugin de traducción (WPML, Polylang)	Interfaz en WordPress	Costosos, pesados, requiere traducción manual
Google Translate widget	Gratis, fácil	Traducciones pobres, UX mala
Traducción con IA bajo demanda	Calidad alta, automático, cacheado	Costo por API (mínimo)

Elegí la traducción con IA porque ofrece la mejor relación calidad/esfuerzo: traducciones de alta calidad, completamente automáticas, y con un costo casi insignificante.

⚙️ Arquitectura del Sistema

El sistema consta de tres partes principales:

1. Plugin de WordPress: hackeruna-translate

Desarrollé un plugin personalizado que:

• Expone endpoints REST para obtener traducciones
• Llama a la API de OpenAI (GPT-4o-mini) para traducir
• Cachea las traducciones en base de datos
• Preserva el formato HTML del contenido original

// Endpoint para obtener traducción por slug
GET /wp-json/hackeruna/v1/post/slug/{slug}/translate/{lang}
// Ejemplo
GET /wp-json/hackeruna/v1/post/slug/mi-post/translate/en

2. Servicio de Traducción con OpenAI

El plugin usa GPT-4o-mini con un prompt especializado para contenido técnico:

You are a professional translator specializing in technical content. Translate the following blog post content to English.
IMPORTANT RULES:
1. Preserve ALL HTML formatting exactly as-is
2. Keep code blocks unchanged - do NOT translate code
3. Keep technical terms, library names, and API references unchanged
4. Maintain the same tone and style
5. Preserve any emojis

¿Por qué GPT-4o-mini?

• Costo: $0.15 por millón de tokens (muy económico)
• Calidad: Excelente para traducción técnica
• Velocidad: Respuestas en segundos

3. Frontend Angular con Selector de Idioma

El frontend de Hackeruna (Angular 21) incluye:

• Selector de idioma en el header (🇪🇸/🇺🇸)
• URLs con prefijo de idioma: /es/post/... y /en/post/...
• Fallback elegante: si la traducción falla, muestra el original
• Meta tags dinámicas: SEO optimizado para cada idioma

🔄 Flujo de Traducción

Usuario visita /en/post/mi-articulo
        ↓
Angular detecta idioma = "en"
        ↓
Llama a API: /hackeruna/v1/post/slug/mi-articulo/translate/en
        ↓
¿Existe en cache?
    ├─ SÍ → Devuelve traducción cacheada (instantáneo)
    └─ NO → Llama a OpenAI → Traduce → Guarda en cache → Devuelve
        ↓
Angular renderiza el post traducido

Primera visita: 2-5 segundos (traducción en tiempo real)
Visitas posteriores: Instantáneo (desde cache)

💰 Costos Reales

Después de traducir varios posts, estos son los números:

Métrica	Valor
Posts traducidos	5
Tokens totales usados	~35,000
Costo total	$0.012 USD
Costo promedio por post	~$0.002 USD

Traducir 100 posts costaría aproximadamente $0.20 USD. Es prácticamente gratis.

📊 Panel de Administración

El plugin incluye un panel en WordPress para:

• Ver estadísticas (posts traducidos, tokens usados, costos)
• Ver posts pendientes de traducción
• Eliminar traducciones para regenerarlas
• Configurar API key y modelo de OpenAI

🚀 ¡Pruébalo Ahora!

Puedes ver las traducciones en acción visitando cualquier post en inglés:
👉 hackeruna.com/en
O usa el selector de idioma (🇺🇸) en el header para cambiar entre español e inglés.

Este articulo lo puedes leer en ingles aqui: https://hackeruna.com/en/post/hackeruna-ahora-disponible-en-ingles-traduccion-automatica-con-ia

🔧 Implementación Técnica

Si quieres implementar algo similar, el código del plugin está disponible en el repositorio:
👉 Ver código del plugin en GitHub

Componentes principales:

• hackeruna-translate.php – Plugin principal y admin
• class-openai-client.php – Cliente de OpenAI API
• class-translator.php – Lógica de traducción
• class-database.php – Cache en base de datos
• class-rest-api.php – Endpoints REST

🎯 Conclusión

La combinación de WordPress + OpenAI + Angular permite crear un sistema de traducción:

• ✅ Automático – Sin intervención manual
• ✅ De alta calidad – GPT entiende contexto técnico
• ✅ Económico – Centavos por cientos de posts
• ✅ Rápido – Cache para visitas posteriores
• ✅ SEO-friendly – URLs únicas, meta tags por idioma

¿Tienes preguntas sobre la implementación? Déjame un comentario abajo o contáctame directamente.