Initial Commit

app.py

@@ -4,11 +4,13 @@ import requests
 from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
 from urllib.parse import parse_qs, urlparse
 
-from inference import t5_infer
+from inference import infer_t5
+from dataset import query_emotion
 
 # https://huggingface.co/settings/tokens
 # https://huggingface.co/spaces/{username}/{space}/settings
-API_TOKEN = os.getenv('BIG_GAN_TOKEN')
+API_TOKEN = os.getenv("BIG_GAN_TOKEN")
+
 
 class RequestHandler(SimpleHTTPRequestHandler):
     def do_GET(self):
@@ -17,14 +19,16 @@ class RequestHandler(SimpleHTTPRequestHandler):
 
             return SimpleHTTPRequestHandler.do_GET(self)
 
-        if self.path.startswith("/biggan_infer"):
-            input = parse_qs(urlparse(self.path).query).get("input", None)[0]
+        if self.path.startswith("/infer_biggan"):
+            url = urlparse(self.path)
+            query = parse_qs(url.query)
+            input = query.get("input", None)[0]
 
             output = requests.request(
                 "POST",
                 "https://api-inference.huggingface.co/models/osanseviero/BigGAN-deep-128",
                 headers={"Authorization": f"Bearer {API_TOKEN}"},
-                data=json.dumps(input)
+                data=json.dumps(input),
             )
 
             self.send_response(200)
@@ -35,10 +39,28 @@ class RequestHandler(SimpleHTTPRequestHandler):
 
             return SimpleHTTPRequestHandler
 
-        elif self.path.startswith("/t5_infer"):
-            input = parse_qs(urlparse(self.path).query).get("input", None)
+        elif self.path.startswith("/infer_t5"):
+            url = urlparse(self.path)
+            query = parse_qs(url.query)
+            input = query.get("input", None)[0]
+
+            output = infer_t5(input)
+
+            self.send_response(200)
+            self.send_header("Content-Type", "application/json")
+            self.end_headers()
+
+            self.wfile.write(json.dumps({"output": output}).encode("utf-8"))
+
+            return SimpleHTTPRequestHandler
+
+        elif self.path.startswith("/query_emotion"):
+            url = urlparse(self.path)
+            query = parse_qs(url.query)
+            start = int(query.get("start", None)[0])
+            end = int(query.get("end", None)[0])
 
-            output = t5_infer(input)
+            output = query_emotion(start, end)
 
             self.send_response(200)
             self.send_header("Content-Type", "application/json")

dataset.py

@@ -0,0 +1,19 @@
+from datasets import load_dataset
+
+dataset = load_dataset("emotion", split="train")
+
+emotions = dataset.info.features["label"].names
+
+def query_emotion(start, end):
+    rows = dataset[start:end]
+    texts, labels = [rows[k] for k in rows.keys()]
+
+    observations = []
+
+    for i, text in enumerate(texts):
+        observations.append({
+            "text": text,
+            "emotion": emotions[labels[i]],
+        })
+
+    return observations

index.js

@@ -1,26 +1,74 @@
-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');
 }
 
 const textToImage = async (text) => {
-  const inferenceResponse = await fetch(`biggan_infer?input=${text}`);
+  const inferenceResponse = await fetch(`/infer_biggan?input=${text}`);
   const inferenceBlob = await inferenceResponse.blob();
 
   return URL.createObjectURL(inferenceBlob);
 };
 
 const translateText = async (text) => {
-  const inferResponse = await fetch(`t5_infer?input=${text}`);
+  const inferResponse = await fetch(`/infer_t5?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");
+const queryDataset = async (start, end) => {
+  const queryResponse = await fetch(`/query_emotion?start=${start}&end=${end}`);
+  const queryJson = await queryResponse.json();
 
-imageGenSelect.addEventListener("change", async (event) => {
+  return queryJson.output;
+};
+
+const updateTable = async (cursor, range = 5) => {
+  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');
+
+    text.textContent = observation.text;
+    emotion.textContent = observation.emotion;
+
+    row.appendChild(text);
+    row.appendChild(emotion);
+    fragment.appendChild(row);
+  }
+
+  table.innerHTML = '';
+
+  table.appendChild(fragment);
+
+  table.insertAdjacentHTML(
+    'afterbegin',
+    `<thead>
+      <tr>
+        <td>text</td>
+        <td>emotion</td>
+      </tr>
+    </thead>`
+  );
+};
+
+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) => {
   const value = event.target.value;
 
   try {
@@ -30,11 +78,11 @@ imageGenSelect.addEventListener("change", async (event) => {
   }
 });
 
-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);
@@ -43,6 +91,36 @@ textGenForm.addEventListener("submit", async (event) => {
   }
 });
 
+tableButtonPrev.addEventListener('click', () => {
+  cursor = cursor > RANGE ? cursor - RANGE : 0;
+
+  if (cursor < RANGE) {
+    tableButtonPrev.classList.add('hidden');
+  }
+  if (cursor < LIMIT - RANGE) {
+    tableButtonNext.classList.remove('hidden');
+  }
+
+  updateTable(cursor);
+});
+
+tableButtonNext.addEventListener('click', () => {
+  cursor = cursor < LIMIT - RANGE ? cursor + RANGE : cursor;
+
+  if (cursor >= RANGE) {
+    tableButtonPrev.classList.remove('hidden');
+  }
+  if (cursor >= LIMIT - RANGE) {
+    tableButtonNext.classList.add('hidden');
+  }
+
+  updateTable(cursor);
+});
+
 textToImage(imageGenSelect.value)
   .then((image) => (imageGenImage.src = image))
   .catch(console.error);
+
+updateTable(cursor)
+  .then((image) => (imageGenImage.src = image))
+  .catch(console.error);

inference.py

@@ -3,8 +3,9 @@ from transformers import T5Tokenizer, T5ForConditionalGeneration
 tokenizer = T5Tokenizer.from_pretrained("t5-small")
 model = T5ForConditionalGeneration.from_pretrained("t5-small")
 
-def t5_infer(input):
-  input_ids = tokenizer(input, return_tensors="pt").input_ids
-  outputs = model.generate(input_ids)
 
-  return tokenizer.decode(outputs[0], skip_special_tokens=True)
+def infer_t5(input):
+    input_ids = tokenizer(input, return_tensors="pt").input_ids
+    outputs = model.generate(input_ids)
+
+    return tokenizer.decode(outputs[0], skip_special_tokens=True)

style.css

@@ -12,11 +12,14 @@ body.dark-theme {
 }
 
 main {
+  max-width: 80rem;
+  text-align: center;
+}
+
+section {
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: 80rem;
-  text-align: center;
 }
 
 a {
@@ -40,9 +43,40 @@ input {
   width: 70%;
 }
 
+button {
+  cursor: pointer;
+}
+
 .text-gen-output {
-  min-height: 1rem;
-  margin: 0;
+  min-height: 1.2rem;
+  margin: 1rem;
   align-self: start;
-  border: 2px solid var(--text);
+  border: 0.5px solid grey;
+}
+
+#dataset button {
+  width: 6rem;
+  margin: 0.5rem;
+}
+
+#dataset button.hidden {
+  visibility: hidden;
+}
+
+table {
+  max-width: 40rem;
+  text-align: left;
+  border-collapse: collapse;
+}
+
+thead {
+  font-weight: bold;
+}
+
+td {
+  padding: 0.5rem;
+}
+
+td:not(thead td) {
+  border: 0.5px solid grey;
 }