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);