Creación de artículos deportivos con IA generativa. Componentes y funcionalidades clave

Por último en esta serie, quiero detallar los componentes y funcionalidades clave definidos durante el proceso de desarrollo de la aplicación, con una breve descripción de su función.

Autenticación

• Login.tsx: Página de inicio de sesión que utiliza el componente Auth de Supabase.
• SessionContextProvider.tsx: Contexto de React que gestiona la sesión del usuario de Supabase y la hace accesible en toda la aplicación.
• ProtectedRoute: Componente de ruta que asegura que solo los usuarios autenticados puedan acceder a ciertas páginas.

Administración de Credenciales (/admin)

• Admin.tsx: Página principal de administración con pestañas para cada servicio.
• StravaCredentialsForm.tsx: Permite a los usuarios conectar/desconectar su cuenta de Strava a través de un flujo OAuth 2.0 gestionado por una Edge Function.
• PiwigoCredentialsForm.tsx: Permite a los usuarios introducir y gestionar sus credenciales de Piwigo.
• YouTubeCredentialsForm.tsx: Permite a los usuarios introducir y gestionar su clave de API y ID de canal de YouTube.
• WordPressCredentialsForm.tsx: Permite a los usuarios introducir y gestionar sus credenciales de WordPress (URL, usuario, contraseña de aplicación).
• StravaActivitiesCache.tsx: Muestra el estado de la caché de actividades de Strava y permite refrescarla.
• PiwigoGalleries.tsx: Muestra el estado de la caché de galerías de Piwigo y permite refrescarla.
• YouTubeVideos.tsx: Muestra el estado de la caché de videos de YouTube y permite refrescarla.

Correlación de Actividades y Medios (/)

• ActivityMediaCorrelator.tsx: El componente central en la página de inicio.
  • Muestra una lista de actividades de Strava del año seleccionado.
  • Permite al usuario iniciar el proceso de correlación para una actividad específica.
  • Sugiere fotos de Piwigo y videos de YouTube que coinciden con la fecha y ubicación de la actividad de Strava.
  • Permite al usuario seleccionar los medios deseados y añadir instrucciones personalizadas para la IA (EditAIInstructionsDialog).
  • Guarda las correlaciones en la base de datos.
  • Inicia la generación de artículos de blog.
  • El motor de IA predeterminado para la generación de artículos es Deepseek.

Artículos Generados (/generated-posts)

• GeneratedPosts.tsx: Muestra una lista de todos los artículos de blog generados por la IA.
  • Permite ver el contenido completo de un artículo en un diálogo.
  • Ofrece opciones para editar el título, contenido, medios asociados y estado del artículo (EditGeneratedPostDialog).
  • Permite eliminar artículos.
  • Facilita la publicación de artículos como borradores en WordPress, actualizando el estado y el ID del post en la base de datos.
  • Permite redirigir directamente a la página de edición del post en WordPress si ya está publicado.

Edge Functions Clave

• strava-oauth: Gestiona el flujo OAuth de Strava, intercambia códigos por tokens y los guarda en la base de datos.
• strava-activities: Obtiene las actividades de Strava del usuario, incluyendo la lógica de refresco de tokens.
• strava-activities-status: Proporciona el estado de la caché de actividades de Strava.
• refresh-strava-cache: Refresca la caché de actividades de Strava desde la API.
• piwigo-connect: Guarda las credenciales de Piwigo en la base de datos.
• piwigo-photos: Obtiene fotos de Piwigo, incluyendo metadatos EXIF de geolocalización, y las cachea.
• piwigo-galleries-status: Proporciona el estado de la caché de galerías de Piwigo.
• refresh-piwigo-cache: Refresca la caché de galerías de Piwigo desde la API.
• youtube-connect: Guarda la clave de API y el ID de canal de YouTube.
• youtube-videos: Obtiene videos de YouTube de un canal, los cachea y los correlaciona por fecha.
• youtube-videos-status: Proporciona el estado de la caché de videos de YouTube.
• refresh-youtube-cache: Refresca la caché de videos de YouTube desde la API.
• wordpress-connect: Guarda las credenciales de WordPress.
• wordpress-posts: Obtiene publicaciones existentes de WordPress.
• correlate-media: La función más compleja, que:
  • Recupera detalles de la actividad de Strava.
  • Busca y sugiere fotos de Piwigo y videos de YouTube basándose en la fecha y la proximidad geográfica (usando EXIF y geocodificación inversa).
  • Incluye datos meteorológicos de AEMET para la ubicación de inicio de la actividad.
• save-correlation / delete-correlation: Gestionan el almacenamiento y eliminación de las correlaciones entre actividades y medios, incluyendo las instrucciones de la IA.
• generate-and-publish-post: La función de IA que:
  • Recopila todos los datos relevantes (Strava, Piwigo, YouTube, clima de AEMET, instrucciones del usuario).
  • Construye un prompt detallado para el motor de IA seleccionado (Deepseek por defecto).
  • Llama a la API de Mistral AI o Deepseek (vía OpenRouter) para generar el título y el contenido del artículo en HTML.
  • Guarda el artículo generado como borrador en la tabla generated_posts.
• update-generated-post: Actualiza los detalles de un artículo generado en la base de datos.
• delete-generated-post: Elimina un artículo generado de la base de datos.
• publish-to-wordpress: Toma un artículo generado y lo publica como borrador en WordPress usando la API REST.
• get-wordpress-redirect-url: Obtiene la URL de edición de un post de WordPress para que el frontend pueda navegar directamente a ella.
• disconnect-strava / disconnect-piwigo / disconnect-youtube / disconnect-wordpress: Funciones para eliminar las credenciales de las cuentas externas de la base de datos.
• refresh-aemet-stations-cache: Obtiene y cachea el inventario de estaciones meteorológicas de AEMET, incluyendo la conversión correcta de coordenadas DMS a decimales.

Con esto, doy por cerrada la serie dedicada a la aplicación para generación de artículos de ciclismo de manera automatizada. Poco a poco irán apareciendo en mi bitácora algunos artículos sobre ciclismo creados con esta aplicación.

A este respecto, he tomado la determinación de hacer uso del tag Generado con IA a aquelos artículos que contengan, de manera total o parcial, contenido generado con el apoyo de IA, a fin de distinguirlos de aquellos en los que no he tenido este tipo de apoyo.

Espero que esta serie haya sido interesante, y que los artículos que genere con la aplicación sean de interés.