// Remove the hidden class
function revealContent() {
  const loader = document.getElementById('loader');
  const textGenContainer = document.getElementById('text-gen-container');
  loader.classList.remove('hidden');
  textGenContainer.classList.remove('hidden');
}

// Call the function once the DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
  // Connect to the endpoint and parse JSON response
  const initConnection = async () => {
    try {
      // Fetch the endpoint
      const connectionResult = await fetch('/infer_t5');

      // Parse the JSON response
      if (!connectionResult.ok) {
        throw Error(await connectionResult.text());
      }

      const json = await connectionResult.json();
      console.log(json);
    } catch (err) {
      // Display the err object and wait for 2 sec before retrying
      console.error(err);
      setTimeout(() => initConnection(), 2000);
      return;
    } finally {
      // Clear timeouts and intervals
      clearTimeout(timeoutId);
      clearInterval(intervalId);
    }

    // Connection established, remove loader animation
    revealContent();
  };

  // Timeout logic for waiting for endpoint availability
  let timeoutId, intervalId;
  timeoutId = setTimeout(() => {
    intervalId = setInterval(() => {
      console.warn('Endpoint timed out, retrying...');
      initConnection();
    }, 2000);
  }, 5000);

  // Attempt to connect to the endpoint
  initConnection();
});
const textGenForm = document.querySelector(".text-gen-form");

const translateText = async (text) => {
  const inferResponse = await fetch(`/infer_t5?input=${encodeURIComponent(text)}`);
  const inferJson = await inferResponse.json();

  return inferJson.output;
};

textGenForm.addEventListener("submit", async (event) => {
  event.preventDefault();

  const textGenInput = document.getElementById("text-gen-input");
  const textGenParagraph = document.querySelector(".text-gen-output");

  textGenParagraph.textContent = await translateText(textGenInput.value);
});