index.js

if (document.location.search.includes("dark-theme=true")) {
  document.body.classList.add("dark-theme");
}

const textToImage = async (text) => {
  const inferenceResponse = await fetch(`biggan_infer?input=${text}`);
  const inferenceBlob = await inferenceResponse.blob();

  return URL.createObjectURL(inferenceBlob);
};

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

  return inferJson.output;
};

const imageGenSelect = document.getElementById("image-gen-input");
const imageGenImage = document.querySelector(".image-gen-output");
const textGenForm = document.querySelector(".text-gen-form");

imageGenSelect.addEventListener("change", async (event) => {
  const value = event.target.value;

  try {
    imageGenImage.src = await textToImage(value);
  } catch (err) {
    console.error(err);
  }
});

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

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

  try {
    textGenParagraph.textContent = await translateText(textGenInput.value);
  } catch (err) {
    console.error(err);
  }
});

textToImage(imageGenSelect.value)
  .then((image) => (imageGenImage.src = image))
  .catch(console.error);