Initial Commit

README.md

@@ -1,13 +1,16 @@
 ---
-title: Flask
-emoji: 🌖
-colorFrom: purple
-colorTo: pink
+title: Flask + dev server
+emoji: ⚗️
+colorFrom: gray
+colorTo: gray
 sdk: gradio
 sdk_version: 2.9.1
+python_version: 3.10.4
 app_file: app.py
-pinned: false
+models: [osanseviero/BigGAN-deep-128, t5-small]
+datasets: [emotion]
 license: mit
+pinned: false
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces#reference

app.py

@@ -0,0 +1,60 @@
+import os
+import requests
+import json
+from io import BytesIO
+
+from flask import Flask, jsonify, render_template, request, send_file
+
+from modules.inference import infer_t5
+from modules.dataset import query_emotion
+
+# https://huggingface.co/settings/tokens
+# https://huggingface.co/spaces/{username}/{space}/settings
+API_TOKEN = os.getenv("BIG_GAN_TOKEN")
+
+app = Flask(__name__)
+
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/infer_biggan")
+def biggan():
+    input = request.args.get("input")
+
+    output = requests.request(
+        "POST",
+        "https://api-inference.huggingface.co/models/osanseviero/BigGAN-deep-128",
+        headers={"Authorization": f"Bearer {API_TOKEN}"},
+        data=json.dumps(input),
+    )
+
+    return send_file(BytesIO(output.content), mimetype="image/png")
+
+
+@app.route("/infer_t5")
+def t5():
+    input = request.args.get("input")
+
+    output = infer_t5(input)
+
+    return jsonify({"output": output})
+
+
+@app.route("/query_emotion")
+def emotion():
+    start = request.args.get("start")
+    end = request.args.get("end")
+
+    print(start)
+    print(end)
+
+    output = query_emotion(int(start), int(end))
+
+    return jsonify({"output": output})
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860)

modules/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

modules/inference.py

@@ -0,0 +1,11 @@
+from transformers import T5Tokenizer, T5ForConditionalGeneration
+
+tokenizer = T5Tokenizer.from_pretrained("t5-small")
+model = T5ForConditionalGeneration.from_pretrained("t5-small")
+
+
+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)

requirements.txt

@@ -0,0 +1,6 @@
+datasets==2.*
+flask==2.1.*
+requests==2.27.*
+sentencepiece==0.1.*
+torch==1.11.*
+transformers==4.*

static/index.js

@@ -0,0 +1,126 @@
+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();
+
+  return URL.createObjectURL(inferenceBlob);
+};
+
+const translateText = async (text) => {
+  const inferResponse = await fetch(`infer_t5?input=${text}`);
+  const inferJson = await inferResponse.json();
+
+  return inferJson.output;
+};
+
+const queryDataset = async (start, end) => {
+  const queryResponse = await fetch(`query_emotion?start=${start}&end=${end}`);
+  const queryJson = await queryResponse.json();
+
+  return queryJson.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');
+
+    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');
+
+imageGenSelect.addEventListener('change', async (event) => {
+  const value = event.target.value;
+
+  try {
+    imageGenImage.src = await textToImage(value);
+    imageGenImage.alt = value + ' generated from BigGAN AI model';
+  } 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);
+  }
+});
+
+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)
+  .catch(console.error);

static/style.css

@@ -0,0 +1,79 @@
+body {
+  --text: hsl(0 0% 15%);
+  padding: 2.5rem;
+  font-family: sans-serif;
+  color: var(--text);
+}
+body.dark-theme {
+  --text: hsl(0 0% 90%);
+  background-color: hsl(223 39% 7%);
+}
+
+main {
+  max-width: 80rem;
+  text-align: center;
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+a {
+  color: var(--text);
+}
+
+select, input, button, .text-gen-output {
+  padding: 0.5rem 1rem;
+}
+
+select, img, input {
+  margin: 0.5rem auto 1rem;
+}
+
+form {
+  width: 25rem;
+  margin: 0 auto;
+}
+
+input {
+  width: 70%;
+}
+
+button {
+  cursor: pointer;
+}
+
+.text-gen-output {
+  min-height: 1.2rem;
+  margin: 1rem;
+  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;
+}