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;