Initial Commit

index.js

@@ -1,7 +1,11 @@
-if (document.location.search.includes("dark-theme=true")) {
-  document.body.classList.add("dark-theme");
+if (document.location.search.includes('dark-theme=true')) {
+  document.body.classList.add('dark-theme');
 }
 
+let cursor = 0;
+const RANGE = 5;
+const LIMIT = 16_000;
+
 const textToImage = async (text) => {
   const inferenceResponse = await fetch(`infer_biggan?input=${text}`);
   const inferenceBlob = await inferenceResponse.blob();
@@ -23,17 +27,17 @@ const queryDataset = async (start, end) => {
   return queryJson.output;
 };
 
-const updateTable = async (cursor, range = 5) => {
-  const table = document.querySelector(".dataset-output");
+const updateTable = async (cursor, range = RANGE) => {
+  const table = document.querySelector('.dataset-output');
 
   const fragment = new DocumentFragment();
 
   const observations = await queryDataset(cursor, cursor + range);
 
   for (const observation of observations) {
-    let row = document.createElement("tr");
-    let text = document.createElement("td");
-    let emotion = document.createElement("td");
+    let row = document.createElement('tr');
+    let text = document.createElement('td');
+    let emotion = document.createElement('td');
 
     text.textContent = observation.text;
     emotion.textContent = observation.emotion;
@@ -43,12 +47,12 @@ const updateTable = async (cursor, range = 5) => {
     fragment.appendChild(row);
   }
 
-  table.innerHTML = "";
+  table.innerHTML = '';
 
   table.appendChild(fragment);
 
   table.insertAdjacentHTML(
-    "afterbegin",
+    'afterbegin',
     `<thead>
       <tr>
         <td>text</td>
@@ -58,32 +62,28 @@ const updateTable = async (cursor, range = 5) => {
   );
 };
 
-const imageGenSelect = document.getElementById("image-gen-input");
-const imageGenImage = document.querySelector(".image-gen-output");
-const textGenForm = document.querySelector(".text-gen-form");
-const tableButtonPrev = document.querySelector(".table-previous");
-const tableButtonNext = document.querySelector(".table-next");
+const imageGenSelect = document.getElementById('image-gen-input');
+const imageGenImage = document.querySelector('.image-gen-output');
+const textGenForm = document.querySelector('.text-gen-form');
+const tableButtonPrev = document.querySelector('.table-previous');
+const tableButtonNext = document.querySelector('.table-next');
 
-let cursor = 0;
-const RANGE = 5;
-const LIMIT = 16_000;
-
-imageGenSelect.addEventListener("change", async (event) => {
+imageGenSelect.addEventListener('change', async (event) => {
   const value = event.target.value;
 
   try {
     imageGenImage.src = await textToImage(value);
-    imageGenImage.alt = value + " generated from BigGAN AI model";
+    imageGenImage.alt = value + ' generated from BigGAN AI model';
   } catch (err) {
     console.error(err);
   }
 });
 
-textGenForm.addEventListener("submit", async (event) => {
+textGenForm.addEventListener('submit', async (event) => {
   event.preventDefault();
 
-  const textGenInput = document.getElementById("text-gen-input");
-  const textGenParagraph = document.querySelector(".text-gen-output");
+  const textGenInput = document.getElementById('text-gen-input');
+  const textGenParagraph = document.querySelector('.text-gen-output');
 
   try {
     textGenParagraph.textContent = await translateText(textGenInput.value);
@@ -92,27 +92,27 @@ textGenForm.addEventListener("submit", async (event) => {
   }
 });
 
-tableButtonPrev.addEventListener("click", () => {
+tableButtonPrev.addEventListener('click', () => {
   cursor = cursor > RANGE ? cursor - RANGE : 0;
 
   if (cursor < RANGE) {
-    tableButtonPrev.classList.add("hidden");
+    tableButtonPrev.classList.add('hidden');
   }
   if (cursor < LIMIT - RANGE) {
-    tableButtonNext.classList.remove("hidden");
+    tableButtonNext.classList.remove('hidden');
   }
 
   updateTable(cursor);
 });
 
-tableButtonNext.addEventListener("click", () => {
+tableButtonNext.addEventListener('click', () => {
   cursor = cursor < LIMIT - RANGE ? cursor + RANGE : cursor;
 
   if (cursor >= RANGE) {
-    tableButtonPrev.classList.remove("hidden");
+    tableButtonPrev.classList.remove('hidden');
   }
   if (cursor >= LIMIT - RANGE) {
-    tableButtonNext.classList.add("hidden");
+    tableButtonNext.classList.add('hidden');
   }
 
   updateTable(cursor);
@@ -123,5 +123,4 @@ textToImage(imageGenSelect.value)
   .catch(console.error);
 
 updateTable(cursor)
-  .then((image) => (imageGenImage.src = image))
   .catch(console.error);