Ron Au commited on
Commit
e756a65
1 Parent(s): 7924343

Initial Commit

Browse files
Files changed (1) hide show
  1. index.js +29 -30
index.js CHANGED
@@ -1,7 +1,11 @@
1
- if (document.location.search.includes("dark-theme=true")) {
2
- document.body.classList.add("dark-theme");
3
  }
4
 
 
 
 
 
5
  const textToImage = async (text) => {
6
  const inferenceResponse = await fetch(`infer_biggan?input=${text}`);
7
  const inferenceBlob = await inferenceResponse.blob();
@@ -23,17 +27,17 @@ const queryDataset = async (start, end) => {
23
  return queryJson.output;
24
  };
25
 
26
- const updateTable = async (cursor, range = 5) => {
27
- const table = document.querySelector(".dataset-output");
28
 
29
  const fragment = new DocumentFragment();
30
 
31
  const observations = await queryDataset(cursor, cursor + range);
32
 
33
  for (const observation of observations) {
34
- let row = document.createElement("tr");
35
- let text = document.createElement("td");
36
- let emotion = document.createElement("td");
37
 
38
  text.textContent = observation.text;
39
  emotion.textContent = observation.emotion;
@@ -43,12 +47,12 @@ const updateTable = async (cursor, range = 5) => {
43
  fragment.appendChild(row);
44
  }
45
 
46
- table.innerHTML = "";
47
 
48
  table.appendChild(fragment);
49
 
50
  table.insertAdjacentHTML(
51
- "afterbegin",
52
  `<thead>
53
  <tr>
54
  <td>text</td>
@@ -58,32 +62,28 @@ const updateTable = async (cursor, range = 5) => {
58
  );
59
  };
60
 
61
- const imageGenSelect = document.getElementById("image-gen-input");
62
- const imageGenImage = document.querySelector(".image-gen-output");
63
- const textGenForm = document.querySelector(".text-gen-form");
64
- const tableButtonPrev = document.querySelector(".table-previous");
65
- const tableButtonNext = document.querySelector(".table-next");
66
 
67
- let cursor = 0;
68
- const RANGE = 5;
69
- const LIMIT = 16_000;
70
-
71
- imageGenSelect.addEventListener("change", async (event) => {
72
  const value = event.target.value;
73
 
74
  try {
75
  imageGenImage.src = await textToImage(value);
76
- imageGenImage.alt = value + " generated from BigGAN AI model";
77
  } catch (err) {
78
  console.error(err);
79
  }
80
  });
81
 
82
- textGenForm.addEventListener("submit", async (event) => {
83
  event.preventDefault();
84
 
85
- const textGenInput = document.getElementById("text-gen-input");
86
- const textGenParagraph = document.querySelector(".text-gen-output");
87
 
88
  try {
89
  textGenParagraph.textContent = await translateText(textGenInput.value);
@@ -92,27 +92,27 @@ textGenForm.addEventListener("submit", async (event) => {
92
  }
93
  });
94
 
95
- tableButtonPrev.addEventListener("click", () => {
96
  cursor = cursor > RANGE ? cursor - RANGE : 0;
97
 
98
  if (cursor < RANGE) {
99
- tableButtonPrev.classList.add("hidden");
100
  }
101
  if (cursor < LIMIT - RANGE) {
102
- tableButtonNext.classList.remove("hidden");
103
  }
104
 
105
  updateTable(cursor);
106
  });
107
 
108
- tableButtonNext.addEventListener("click", () => {
109
  cursor = cursor < LIMIT - RANGE ? cursor + RANGE : cursor;
110
 
111
  if (cursor >= RANGE) {
112
- tableButtonPrev.classList.remove("hidden");
113
  }
114
  if (cursor >= LIMIT - RANGE) {
115
- tableButtonNext.classList.add("hidden");
116
  }
117
 
118
  updateTable(cursor);
@@ -123,5 +123,4 @@ textToImage(imageGenSelect.value)
123
  .catch(console.error);
124
 
125
  updateTable(cursor)
126
- .then((image) => (imageGenImage.src = image))
127
  .catch(console.error);
 
1
+ if (document.location.search.includes('dark-theme=true')) {
2
+ document.body.classList.add('dark-theme');
3
  }
4
 
5
+ let cursor = 0;
6
+ const RANGE = 5;
7
+ const LIMIT = 16_000;
8
+
9
  const textToImage = async (text) => {
10
  const inferenceResponse = await fetch(`infer_biggan?input=${text}`);
11
  const inferenceBlob = await inferenceResponse.blob();
 
27
  return queryJson.output;
28
  };
29
 
30
+ const updateTable = async (cursor, range = RANGE) => {
31
+ const table = document.querySelector('.dataset-output');
32
 
33
  const fragment = new DocumentFragment();
34
 
35
  const observations = await queryDataset(cursor, cursor + range);
36
 
37
  for (const observation of observations) {
38
+ let row = document.createElement('tr');
39
+ let text = document.createElement('td');
40
+ let emotion = document.createElement('td');
41
 
42
  text.textContent = observation.text;
43
  emotion.textContent = observation.emotion;
 
47
  fragment.appendChild(row);
48
  }
49
 
50
+ table.innerHTML = '';
51
 
52
  table.appendChild(fragment);
53
 
54
  table.insertAdjacentHTML(
55
+ 'afterbegin',
56
  `<thead>
57
  <tr>
58
  <td>text</td>
 
62
  );
63
  };
64
 
65
+ const imageGenSelect = document.getElementById('image-gen-input');
66
+ const imageGenImage = document.querySelector('.image-gen-output');
67
+ const textGenForm = document.querySelector('.text-gen-form');
68
+ const tableButtonPrev = document.querySelector('.table-previous');
69
+ const tableButtonNext = document.querySelector('.table-next');
70
 
71
+ imageGenSelect.addEventListener('change', async (event) => {
 
 
 
 
72
  const value = event.target.value;
73
 
74
  try {
75
  imageGenImage.src = await textToImage(value);
76
+ imageGenImage.alt = value + ' generated from BigGAN AI model';
77
  } catch (err) {
78
  console.error(err);
79
  }
80
  });
81
 
82
+ textGenForm.addEventListener('submit', async (event) => {
83
  event.preventDefault();
84
 
85
+ const textGenInput = document.getElementById('text-gen-input');
86
+ const textGenParagraph = document.querySelector('.text-gen-output');
87
 
88
  try {
89
  textGenParagraph.textContent = await translateText(textGenInput.value);
 
92
  }
93
  });
94
 
95
+ tableButtonPrev.addEventListener('click', () => {
96
  cursor = cursor > RANGE ? cursor - RANGE : 0;
97
 
98
  if (cursor < RANGE) {
99
+ tableButtonPrev.classList.add('hidden');
100
  }
101
  if (cursor < LIMIT - RANGE) {
102
+ tableButtonNext.classList.remove('hidden');
103
  }
104
 
105
  updateTable(cursor);
106
  });
107
 
108
+ tableButtonNext.addEventListener('click', () => {
109
  cursor = cursor < LIMIT - RANGE ? cursor + RANGE : cursor;
110
 
111
  if (cursor >= RANGE) {
112
+ tableButtonPrev.classList.remove('hidden');
113
  }
114
  if (cursor >= LIMIT - RANGE) {
115
+ tableButtonNext.classList.add('hidden');
116
  }
117
 
118
  updateTable(cursor);
 
123
  .catch(console.error);
124
 
125
  updateTable(cursor)
 
126
  .catch(console.error);