Integrando Azure Text Translation en una aplicación React con Next.js

import axios from 'axios';
import { enableCors } from '@/src/middleware/enableCors';
import { methodValidator } from '@/src/utils/methodValidator';

require('dotenv').config();

// Función para eliminar el markdown del texto
function stripMarkdown(markdownText) {
  // Aquí se eliminan diversos elementos de markdown para obtener solo el texto plano
  return markdownText
    .replace(/```[\s\S]*?```/g, '')
    .replace(/\([^\)]*\)/g, '')
    .replace(/(\*\*|__)(.*?)(\*\*|__)/g, '$2')
    .replace(/\!\[(.*?)\]\((.*?)\)/g, '')
    .replace(/\[(.*?)\]\((.*?)\)/g, '$1')
    .replace(/(\*\*|__)/g, '')
    .replace(/(\*|-)/g, '')
    .replace(/(#{1,6}) /g, '')
    .replace(/`(.+?)`/g, '')
    .replace(/\n/g, ' ');
}

// Función para eliminar el HTML del texto
function stripHtml(htmlText) {
  // Elimina las etiquetas HTML para obtener solo el texto
  return htmlText.replace(/<[^>]*>/g, '');
}

// La función principal que maneja la solicitud de traducción
const translation = async (req, res) => {
  await enableCors(req, res); // Habilita CORS para la solicitud
  await methodValidator(req, res, 'POST'); // Valida que la solicitud sea de tipo POST

  if (res.headersSent) {
    console.log('La respuesta ya fue enviada.');
    return;
  }

  // Extrae los datos necesarios de la solicitud
  let { title, content, targetLanguage } = req.body;
  if (!title || !content || !targetLanguage) {
    console.log('Faltan datos en la solicitud:', { title, content, targetLanguage });
    return res
      .status(400)
      .json({ error: 'Faltan datos en la solicitud. Se requieren title, content y targetLanguage.' });
  }

  // Limpia el título y el contenido de markdown y HTML
  title = stripMarkdown(stripHtml(title));
  content = stripMarkdown(stripHtml(content));

  // Configuración para la solicitud a la API de Azure Text Translation
  const translatorConfig = {
    headers: {
      'Ocp-Apim-Subscription-Key': process.env.TRANSLATOR_SUBSCRIPTION_KEY,
      'Ocp-Apim-Subscription-Region': process.env.TRANSLATOR_REGION,
      'Content-Type': 'application/json',
    },
    params: {
      'api-version': '3.0',
      to: targetLanguage,
    },
  };

  try {
    // Realiza las solicitudes de traducción para el título y el contenido simultáneamente
    const [titleResponse, contentResponse] = await Promise.all([
      axios.post('https://api.cognitive.microsofttranslator.com/translate', [{ Text: title }], translatorConfig),
      axios.post('https://api.cognitive.microsofttranslator.com/translate', [{ Text: content }], translatorConfig),
    ]);

    // Extrae las traducciones del título y el contenido de las respuestas
    const translatedTitle = titleResponse.data[0].translations[0].text;
    const translatedContent = contentResponse.data[0].translations[0].text;

    // Envía la respuesta con el título y contenido traducidos
    return res.status(200).json({
      translatedTitle,
      translatedContent,
    });
  } catch (error) {
    console.error('Error durante la traducción:', error);
    return res.status(500).json({
      error: `Error durante la solicitud de traducción: ${error.message}`,
    });
  }
};

export default enableCors(translation);

import { useState, useEffect, useMemo } from 'react';
import axios from 'axios';
import sanitizeHtml from 'sanitize-html';
import { marked } from 'marked';
import { SiMicrosofttranslator } from 'react-icons/si';
import { GiAllSeeingEye } from 'react-icons/gi';
import './TranslationController.scss';

const TranslationController = ({ content, title, image }) => {
  // Estados para controlar la UI y almacenar los datos de traducción
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedLanguage, setSelectedLanguage] = useState('');
  const [translatedTitle, setTranslatedTitle] = useState(title);
  const [translatedContent, setTranslatedContent] = useState(content);
  const [isTranslating, setIsTranslating] = useState(false);
  const [tokens, setTokens] = useState(0);
  const [dailyLimitInfo, setDailyLimitInfo] = useState({ dailyLimit: 0, tokensUsedToday: 0 });
  const [errorMessage, setErrorMessage] = useState('');

  // Efectos para cargar información necesaria al cargar el componente
  useEffect(() => {
    fetchDailyLimit();
    fetchTokens();
  }, []);

  // Aquí se definen las funciones para manejar la lógica de negocios, como obtener los tokens y límites diarios,
  // actualizar tokens y realizar la traducción.

  const toggleModal = () => {
    setIsModalOpen(!isModalOpen);
    document.body.classList.toggle('no-scroll', !isModalOpen);
  };

  const handleLanguageChange = (e) => {
    setSelectedLanguage(e.target.value);
  };

  // Funciones para manejar la conversión de Markdown a HTML y la limpieza de HTML

  const translateContent = async () => {
    // Lógica para iniciar la traducción y actualizar los estados basados en la respuesta
  };

  // Lógica para calcular los tokens disponibles basada en la información del límite diario
  const tokensAvailableToday = useMemo(() => {
    const { dailyLimit, tokensUsedToday } = dailyLimitInfo;
    return Math.max(dailyLimit - tokensUsedToday, 0);
  }, [dailyLimitInfo]);

  // Renderiza el componente, mostrando el formulario de traducción, los resultados y cualquier mensaje de error.
  return (
    // JSX para la interfaz del controlador de traducción
  );
};

export default TranslationController;