document.getElementById('request-form').addEventListener('submit', async (event) => {
    event.preventDefault(); // Evita que el formulario recargue la página

    const input = document.getElementById('input-text').value;
    const outputElement = document.getElementById('response-output');

    // Limpiar la respuesta anterior y mostrar mensaje de carga
    outputElement.textContent = "Procesando tu solicitud, por favor espera...";

    try {
        // Realizar la solicitud asíncrona a la API
        const response = await fetch('https://jairodanielmt-api-reqgen.hf.space/api/IA/ask', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ input })
        });

        // Manejar errores de la respuesta HTTP
        if (!response.ok) {
            throw new Error(`Error en la solicitud: ${response.status} ${response.statusText}`);
        }

        // Procesar el cuerpo de la respuesta
        const data = await response.json();

        // Mostrar la respuesta en el elemento de salida
        if (data.respuesta) {
            outputElement.textContent = data.respuesta;
        } else if (data.error) {
            outputElement.textContent = `Error en el servidor: ${data.error}`;
        } else {
            outputElement.textContent = "No se recibió una respuesta válida del servidor.";
        }
    } catch (error) {
        // Manejar errores de la solicitud o red
        outputElement.textContent = `Ocurrió un error: ${error.message}`;
    }
});