releasing the app to the public

.gitattributes

@@ -1,35 +1,28 @@
 *.7z filter=lfs diff=lfs merge=lfs -text
 *.arrow filter=lfs diff=lfs merge=lfs -text
 *.bin filter=lfs diff=lfs merge=lfs -text
+*.bin.* filter=lfs diff=lfs merge=lfs -text
 *.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
 *.ftz filter=lfs diff=lfs merge=lfs -text
 *.gz filter=lfs diff=lfs merge=lfs -text
 *.h5 filter=lfs diff=lfs merge=lfs -text
 *.joblib filter=lfs diff=lfs merge=lfs -text
 *.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
 *.model filter=lfs diff=lfs merge=lfs -text
 *.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
 *.onnx filter=lfs diff=lfs merge=lfs -text
 *.ot filter=lfs diff=lfs merge=lfs -text
 *.parquet filter=lfs diff=lfs merge=lfs -text
 *.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
 *.pt filter=lfs diff=lfs merge=lfs -text
 *.pth filter=lfs diff=lfs merge=lfs -text
 *.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
 saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
 *.tflite filter=lfs diff=lfs merge=lfs -text
 *.tgz filter=lfs diff=lfs merge=lfs -text
 *.wasm filter=lfs diff=lfs merge=lfs -text
 *.xz filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
+*.zstandard filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,7 @@
+__pycache__/
+modules/__pycache__/
+192.168.184.49.txt
+127.0.0.1.txt
+.venv/
+venv/
+env/

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.10
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . . 
+
+CMD ["waitress-serve", "--host", "0.0.0.0", "--port", "7860", "app:app"]

README.md

@@ -1,11 +1,66 @@
 ---
-title: Vocabulary Exam Generator
-emoji: 💻
-colorFrom: pink
-colorTo: green
-sdk: docker
-pinned: false
+title: T2E Vocabulary Exam Generator
+emoji: ✏️
+colorFrom: blue
+colorTo: blue
+sdk: gradio
+sdk_version: 4.40.0
+python_version: 3.10.4
+app_file: app.py
+models:
+- osanseviero/BigGAN-deep-128
+- t5-small
+datasets:
+- emotion
 license: mit
+pinned: true
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces#reference
+
+# T2E Vocabulary Exam Generator
+T2E Vocabulary Exam Generator as the name suggest, is an open souce program that allows user, in this case being teachers, to generate English vocabulary exam right from their browser. We aim to help reduce the pain point of teacher having to spend his/her/their precious time and effort to make the entire vocabulary exam or quiz. To try it out, click the Demo link in the Quick Links section below.
+
+This readme.md file is an explanation of this folder that it's in.
+
+## Quick Links
+- Demo: https://huggingface.co/spaces/nontGcob/T2E_Vocabulary_Exam_Generator
+- Documentation: https://mario-world.medium.com/text-to-exam-generator-nlp-using-machine-learning-71da8dd93a4a
+
+## Important File Explanation
+- Exploratory_Data_Analysis.ipynb
+	- This code runs through the entire dataset that we have and analyse the part of speech of all the lexical vocabulary, the max/min/average vocabulary length, and the number of times a word is presented
+- Test_&_Fine_tune_&_Retest.ipynb
+	- This code tests the accuracy of the pre-trained model which is our baseline. It fine-tunes the model. And then, it tests the fine-tuned model again to check whether the accuracy has increased or not.
+- Error_Analysis.ipynb
+	- This code analyses the prediction by analysing the type number of correct and wrong vocabulary predictions, the types of the part of speech of the correct and wrong vocab predictions, and the average vocabulary length of the correct and wrong vocab predictions.
+
+## Note
+Please keep in mind that in order to run the .ipynb file in this folder, you must also download the "simple_trained_wsd_pipeline" and "semcor_samples_4-samples.json" as well which are not included in the folder due to the file size limitation of the code that can be uploaded to GitHub. For more information and the explanation of the entire process of this machine learning project, visit the Documentation link that is attached above in the Quick Links section.
+
+## Contact me
+- Name: Nutnornont Chamadol
+- Email: nontc49@gmail.com
+- Visit my personal website https://nontgcob.com/ to learn more about me.
+
+## The MIT License (MIT)
+
+Copyright (c) 2023 Nutnornont Chamadol
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app.py

@@ -0,0 +1,83 @@
+from flask import Flask, render_template, request, send_file
+from urllib.parse import quote as url_quote
+from model import model
+
+app = Flask(__name__)
+
+@app.route('/process', methods=['POST'])
+def process():
+    T2E_exam = str(request.remote_addr) + ".txt"
+    text = request.form['text']
+    cefr_level = request.form['cefr_level']
+
+    # Call your Python function here to process the data
+    output = model(text, cefr_level)
+
+    user_data = {cefr_level: text}
+    with open("user_data_log.txt", "a") as file:
+        file.write(str(user_data) + "\n\n")
+
+    # Save the output to a file
+    count = 0
+    max_choice = 4
+
+    with open(T2E_exam, "w") as file:
+        file.write("__________ T2E Vocabulary Exam Generator __________\n")
+        file.write("|    Welcome to T2E Vocabulary Exam Generator!     |\n")
+        file.write("|  We are glad that our service is useful to you.  |\n")
+        file.write("|                                                  |\n")
+        file.write("|        Copyrights 2023, Nutnornont Chamadol      |\n")
+        file.write("|             Email: nontc49@gmail.com             |\n")
+        file.write("|     Visit https://nontgcob.com to learn more     |\n")
+        file.write("|                                                  |\n")
+        file.write("|            Your exam is generated below.         |\n")
+        file.write("|  - Happy using T2E Vocabulary Exam Generator! -  |\n")
+        file.write("|__________________________________________________|\n")
+        file.write("\n")
+        file.write("If you don't see any text on the Result page, try changing ")
+        file.write("the CEFR difficulty level selected or choose ALL CEFR level ")
+        file.write("to make sure you get all the questions that the AI can generate. ")
+        file.write("Another possible reason why nothing comes out of the program is ")
+        file.write("because there is no word that can be turned into an exam, try ")
+        file.write("putting a longer text passage as an input into the textbox instead.\n")
+        file.write("Visit https://scribehow.com/shared/How_to_use_T2E_Vocabulary_Exam_Generator__vyYu396JT_qZ0jKATVUqeQ#89cd5f52 for more information.\n")
+        file.write("\n")
+        file.write("Note: The first choice of each question is the correct answer, the rest are trick choices!\n")
+        file.write("\n")
+        file.write("\n")
+
+    for key, value in output.items():
+        vvocab, sentence = key.split(" = ")
+        # print(f'What does the word "{vvocab}" means in this sentence "{sentence}"?')
+        with open(T2E_exam, "a") as file:
+            file.write(f'What is the meaning of the word "{vvocab}" in this sentence "{sentence}"?\n')
+
+        for choice in value:
+            # print(f"- {choice}")
+            with open(T2E_exam, "a") as file:
+                file.write(f"- {choice}\n")
+            count += 1
+            # if count > (max_choice + 1):
+            #     break
+        with open(T2E_exam, "a") as file:
+            file.write("\n")
+
+    # print("output:", output)
+    # print(type(output))
+
+    return render_template('result.html', output=output, file_path="T2E_exam.txt")
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/send')
+def get_file():
+    T2E_exam = str(request.remote_addr) + ".txt"
+    return send_file(
+        str(request.remote_addr) + ".txt",
+        # download_name = "T2E_exam.txt"
+    )
+
+if __name__ == "__main__":
+    app.run(host='0.0.0.0', port=7860)

model.py

@@ -0,0 +1,196 @@
+# Importing libraries
+from nltk.corpus import wordnet
+import nltk
+import transformers
+import pandas as pd
+import json
+import random
+import torch
+
+device='cpu'
+
+# Declare the (trained) model that will be used
+classifier = transformers.pipeline("zero-shot-classification", model="simple_trained_wsd_pipeline", device=device)
+
+import spacy
+# Part Of Speech tagging (POS tagging)
+nlp = spacy.load("en_core_web_sm")
+
+print('successfully download model')
+
+
+def model(passage, level):
+  # pip install spacy
+  # pip install transformers
+  # pip install torch
+  # pip install en_core_web_sm
+  # python -m spacy download en_core_web_sm
+  # pip install spacy-download
+  # pip install nltk
+
+  nltk.download('wordnet')
+  nltk.download('omw-1.4')
+
+  # Passing file directories into variables
+  # text_input = "./text_input.txt"
+  cefr_vocab = "cefr-vocab.csv"
+
+  # Create and open the text file
+  # with open(text_input, "a") as file:
+  #   file.write(".") # Add a full stop at the end to make sure there is a full stop at the end of the text for the model to understand where to stop the sentence
+
+
+  # Ask the user for the CEFR level
+  # while True:
+    # cefr_level = input("Which CEFR level you want to test?: ").upper()
+    # if "A1" in cefr_level or "A2" in cefr_level or "B1" in cefr_level or "B2" in cefr_level or "C1" in cefr_level or "C2" in cefr_level:
+    #   break
+    # else:
+    #   continue
+  cefr_level = level
+
+  # Read from the input file
+  # with open(text_input, "r") as file:
+  #   txt = str(file.readlines()).replace("[", "").replace("'", "").replace("]", "")
+  txt = passage + "."
+
+  if "." in txt:
+    txt = (txt.split("."))
+  else:
+    txt = txt
+
+  text_dict = {}
+  for n in txt:
+    n = n.strip()
+    ex1 = nlp(n)
+
+    for word in ex1:
+      sentence_question_tag = n.replace(word.text, f"[{word.text}]")
+      text_dict[f"{word.lemma_} = {sentence_question_tag}"] = word.pos_
+
+  # Collect the tagging results (filter in just NOUN, PROPN, VERB, ADJ, or ADV only)
+  collector = {}
+  for key, value in text_dict.items():
+    if "NOUN" in value or "VERB" in value or "ADJ" in value or "ADV" in value:
+      collector[key] = value
+
+  # Collect the CEFR level of the words collected before
+  reference = pd.read_csv(cefr_vocab)
+
+  matching = {}
+  for row_idx in range(reference.shape[0]):
+    row = reference.iloc[row_idx]
+    key = f"{row.headword}, {row.pos}"
+    matching[key] = row.CEFR
+
+  # Convert pos of the word into all lowercase to match another data set with CEFR level
+  for key1, value1 in collector.items():
+    if value1 == "NOUN":
+      collector[key1] = "noun"
+    if value1 == "VERB":
+      collector[key1] = "verb"
+    if value1 == "ADJ":
+      collector[key1] = "adjective"
+    if value1 == "ADV":
+      collector[key1] = "adverb"
+
+  # Matching 2 datasets together by the word and the pos
+  ready2filter = {}
+  for key, value in matching.items():
+    first_key, second_key = key.split(", ")
+    for key2, value2 in collector.items():
+      key2 = key2.split(" = ")
+      if first_key == key2[0].lower():
+        if second_key == value2:
+          ready2filter[f"{key} = {key2[1]}"] = value
+
+  # Filter in just the vocab that has the selected CEFR level that the user provided at the beginning
+  filtered0 = {}
+  for key, value in ready2filter.items():
+      if cefr_level == "ALL":
+          filtered0[key] = value
+      else:
+          if value == cefr_level:
+              filtered0[key] = value
+
+  # Rearrange the Python dictionary structure
+  filtered = {}
+  for key, value in filtered0.items():
+      key_parts = key.split(', ')
+      new_key = key_parts[0]
+      new_value = key_parts[1]
+      filtered[new_key] = new_value
+
+  # Grab the definition of each vocab from the NLTK wordnet English dictionary
+  def_filtered = {}
+  for key3, value3 in filtered.items():
+    syns = wordnet.synsets(key3)
+    partofspeech, context = value3.split(" = ")
+    def_filtered[f"{key3} = {context}"] = []
+
+    # pos conversion
+    if partofspeech == "noun":
+      partofspeech = "n"
+    if partofspeech == "verb":
+      partofspeech = "v"
+    if partofspeech == "adjective":
+      partofspeech = "s"
+    if partofspeech == "adverb":
+      partofspeech = "r"
+
+    # print("def_filtered 0:", def_filtered)
+
+    # Adding the definitions into the Python dictionary, def_filtered (syns variable does the job of finding the relevant word aka synonyms)
+    for s in syns:
+        # print('s:', s)
+        # print("syns:", syns)
+        def_filtered[f"{key3} = {context}"].append(s.definition())
+        # print("def_filtered 1:", def_filtered)
+
+  # Use Nvidia CUDA core if available
+  # if torch.cuda.is_available():
+  #     device=0
+  # else:
+
+
+  # Process Python dictionary, def_filtereddic
+  correct_def = {}
+  for key4, value4 in def_filtered.items():
+    vocab, context = key4.split(" = ")
+    sequence_to_classify = context
+    candidate_labels = value4
+    # correct_def[key4] = []
+    correct_def_list = []
+    temp_def = []
+    hypothesis_template = 'The meaning of [' + vocab + '] is {}.'
+
+    output = classifier(sequence_to_classify, candidate_labels, hypothesis_template=hypothesis_template)
+
+    # Process the score of each definition and add it to the Python dictionary, correct_def
+    for label, score in zip(output['labels'], output['scores']):
+        temp_def.append(label)
+        # print(temp_def)
+        for first in range(len(temp_def)):
+          if first == 0:
+            val = f">> {temp_def[first]}"
+          else:
+            val = f"{temp_def[first]}"
+
+        correct_def_list.append(val)
+
+    print(type(key4), type(correct_def_list))
+    correct_def[key4] = correct_def_list
+        
+        # correct_def[key4].append(f"{label}")
+
+  return correct_def
+
+  # with open(T2E_exam, "r") as file:
+  #    exam = file.readlines()
+  # print(exam)
+  # return(exam)
+
+
+# passage = "Computer is good"
+# level = "A1"
+# print(model(passage, level))

modules/dataset.py

@@ -0,0 +1,19 @@
+from datasets import load_dataset
+
+dataset = load_dataset("go_emotions", split="train")
+
+emotions = dataset.info.features['labels'].feature.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,13 @@
+datasets==2.*
+flask==2.2.3
+requests==2.27.*
+sentencepiece==0.1.*
+torch==2.*
+transformers==4.*
+gunicorn==20.1.*
+waitress==2.0.*
+nltk==3.8.1
+spacy==3.5.3
+numpy<2.0
+Werkzeug==2.2.2
+https://github.com/explosion/spacy-models/releases/download/en_core_web_sm-3.5.0/en_core_web_sm-3.5.0-py3-none-any.whl

simple_trained_wsd_pipeline/config.json

@@ -0,0 +1,52 @@
+{
+  "_name_or_path": "facebook/bart-large-mnli",
+  "_num_labels": 3,
+  "activation_dropout": 0.0,
+  "activation_function": "gelu",
+  "add_final_layer_norm": false,
+  "architectures": [
+    "BartForSequenceClassification"
+  ],
+  "attention_dropout": 0.0,
+  "bos_token_id": 0,
+  "classif_dropout": 0.0,
+  "classifier_dropout": 0.0,
+  "d_model": 1024,
+  "decoder_attention_heads": 16,
+  "decoder_ffn_dim": 4096,
+  "decoder_layerdrop": 0.0,
+  "decoder_layers": 12,
+  "decoder_start_token_id": 2,
+  "dropout": 0.1,
+  "encoder_attention_heads": 16,
+  "encoder_ffn_dim": 4096,
+  "encoder_layerdrop": 0.0,
+  "encoder_layers": 12,
+  "eos_token_id": 2,
+  "forced_eos_token_id": 2,
+  "gradient_checkpointing": false,
+  "id2label": {
+    "0": "contradiction",
+    "1": "neutral",
+    "2": "entailment"
+  },
+  "init_std": 0.02,
+  "is_encoder_decoder": true,
+  "label2id": {
+    "contradiction": 0,
+    "entailment": 2,
+    "neutral": 1
+  },
+  "max_position_embeddings": 1024,
+  "model_type": "bart",
+  "normalize_before": false,
+  "num_hidden_layers": 12,
+  "output_past": false,
+  "pad_token_id": 1,
+  "problem_type": "single_label_classification",
+  "scale_embedding": false,
+  "torch_dtype": "float32",
+  "transformers_version": "4.29.1",
+  "use_cache": true,
+  "vocab_size": 50265
+}

simple_trained_wsd_pipeline/pytorch_model.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ebe92cb602c9187d2ac775c5f0d98827ab9291293307c1a5090efae8ed94f251
+size 1629551961

simple_trained_wsd_pipeline/special_tokens_map.json

@@ -0,0 +1,15 @@
+{
+  "bos_token": "<s>",
+  "cls_token": "<s>",
+  "eos_token": "</s>",
+  "mask_token": {
+    "content": "<mask>",
+    "lstrip": true,
+    "normalized": false,
+    "rstrip": false,
+    "single_word": false
+  },
+  "pad_token": "<pad>",
+  "sep_token": "</s>",
+  "unk_token": "<unk>"
+}

simple_trained_wsd_pipeline/tokenizer_config.json

@@ -0,0 +1,15 @@
+{
+  "add_prefix_space": false,
+  "bos_token": "<s>",
+  "clean_up_tokenization_spaces": true,
+  "cls_token": "<s>",
+  "eos_token": "</s>",
+  "errors": "replace",
+  "mask_token": "<mask>",
+  "model_max_length": 1024,
+  "pad_token": "<pad>",
+  "sep_token": "</s>",
+  "tokenizer_class": "BartTokenizer",
+  "trim_offsets": true,
+  "unk_token": "<unk>"
+}

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;
+}

templates/index.html

@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Input Form | Text to Exam (Vocabulary Exam Generator)</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                font-family: 'Rubik', sans-serif;
+                background-color: #1B1B1B;
+                color: #FFF7D0;
+                font-size: 62.5%;
+                box-sizing: border-box;
+            }
+
+            .container {
+                padding: 3rem 3.4rem;
+                background-color: #212529;
+                border-radius: 24px;
+                height: 50rem;
+                width: 38rem;
+                margin: 0 auto;
+                margin-top: 4%;
+            }
+
+            h1 {
+                font-size: 3.2rem;
+                text-align: center;
+                background-color: transparent;
+                margin-bottom: .6rem;
+                color: #FFE66C;
+            }
+
+            /* Custom Scrollbar */
+            /* width */
+            ::-webkit-scrollbar {
+            width: .8rem;
+            }
+            /* Track */
+            ::-webkit-scrollbar-track {
+            border-radius: 10px;
+            /* background: #2f3439; */
+            }
+            /* Scroller */
+            ::-webkit-scrollbar-thumb {
+            background: #FFF7D0;
+            border-radius: 10px;
+            }
+
+            .subtitle {
+                background-color: transparent;
+                font-size: 1.6rem;
+                text-align: center;
+                margin-bottom: 1.5rem;
+            }
+
+            .docs-tutorial {
+                padding: .6rem 32%;
+                font-size: 1.6rem;
+                text-decoration: none;
+                border-radius: 10px;
+                color: #FFE66C;
+                background-color: #33363A;
+                transition: .3s ease-out;
+            }
+
+            .docs-tutorial:hover {
+                background-color: #FFE66C;
+                color: #212529;
+            }
+
+            .form {
+                margin-top: .8rem;
+                background-color: transparent;
+                width: 100%;
+            }
+
+            .textbox {
+                border: 2px solid #FFF7D0;
+                width: 100%;
+                height: 20rem;
+                background-color: transparent;
+                padding: 1.1rem;
+                font-size: 1.6rem;
+                border-radius: 13px;
+                margin: 1rem 0;
+            }
+
+            .level {
+                font-size: 1.6rem;
+                margin-right: .6rem;
+                background-color: transparent;
+            }
+
+            .cefr {
+                font-size: 1.6rem;
+                border: 2px solid #FFF7D0;
+                border-radius: 8px;
+                padding: .7rem;
+                width: 53.6%;
+                background-color: transparent;
+            }
+
+            .generate {
+                padding: .5rem;
+                font-size: 2rem;
+                border-radius: 20px;
+                background-color: #FFF7D0;
+                color: #212529;
+                font-weight: 600;
+                width: 100%;
+                margin-top: 1rem;
+                transition: .2s ease-out;
+            }
+
+            .generate:hover {
+                background-color: #FFE66C;
+            }
+
+            .dev {
+                background-color: transparent;
+                padding: 1rem 3rem;
+                width: 38rem;
+                margin: 0 auto;
+                margin-top: 10px;
+                margin-bottom: 1.2%;
+                border-radius: 40px;
+                border: 1px solid #33363A;
+                display: flex;
+                flex-direction: row;
+                font-size: 2.6rem;
+                display: flex;
+                justify-content: center;
+                background-color: #212529;
+                text-decoration: none;
+                transition: .2s;
+            }
+
+            .dev:hover {
+                /* background-color: #33363A; */
+                border: 1px solid #FFF7D0;
+            }
+
+            .credit {
+                width: fit-content;
+                margin-right: 3px;
+                background-color: transparent;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <h1>T2E Vocabulary Exam Generator</h1>
+            <p class="subtitle">Generate Vocabulary Exam from context.</p>
+            <a class="docs-tutorial" target="_blank" href="https://scribehow.com/shared/How_to_use_T2E_Vocabulary_Exam_Generator__vyYu396JT_qZ0jKATVUqeQ">Docs & Tutorial</a>
+            <form action="/process" method="POST" class="form">
+                <textarea name="text" id="text" cols="90" rows="30" class="textbox" placeholder="Enter text here (i.e. Computer is good.)"></textarea>
+                <br>
+                <label for="cefr_level" class="level">Select CEFR level :</label>
+                <select name="cefr_level" id="cefr_level" class="cefr">
+                    <option value="ALL">ALL</option>
+                    <option value="A1">A1</option>
+                    <option value="A2">A2</option>
+                    <option value="B1">B1</option>
+                    <option value="B2">B2</option>
+                    <option value="C1">C1</option>
+                    <option value="C2">C2</option>
+                </select>
+                <br>
+                <button id="changeText" class="generate">Generate</button>
+            </form>
+        </div>
+        <a href="https://nontgcob.com/" target="_blank" class="dev">
+            <p class="credit">Developed by Nutnornont Chamadol</p>
+        </a>
+
+        <script>
+            const btn = document.getElementById('changeText');
+      
+            // Change button text on click
+            btn.addEventListener('click', function() {
+              btn.textContent = 'Generating exam...';
+            });
+          </script>
+    </body>
+</html>

templates/result.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Result | Text to Exam (Vocabulary Exam Generator)</title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                font-family: 'Rubik', sans-serif;
+                background-color: #1B1B1B;
+                color: #FFF7D0;
+                font-size: 62.5%;
+                box-sizing: border-box;
+            }
+
+            .container {
+                padding: 3rem 3.4rem;
+                background-color: #212529;
+                border-radius: 24px;
+                height: fit-content;
+                max-height: 53rem;
+                width: 80%;
+                margin: 0 auto;
+                margin-top: 5%;
+            }
+
+            .topbar {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                background-color: transparent;
+            }
+
+            h1 {
+                font-size: 3.5rem;
+                text-align: center;
+                background-color: transparent;
+                color: #FFE66C;
+            }
+
+            .exam {
+                background-color: transparent;
+                height: fit-content;
+                max-height: 34rem;
+                overflow-y: scroll;
+                margin-top: 2rem;
+            }
+
+            .generate_another {
+                background-color: #ffffff27;
+                width: fit-content;
+                height: fit-content;
+                padding: 1rem;
+                font-size: 1.8rem;
+                border-radius: 10px;
+                position: absolute;
+                right: 0;
+                margin-top: -7rem;
+                margin-right: 12%;
+                text-decoration: none;
+                border: 2px solid #FFE76C8D;
+                transition: .3s ease-out;
+                color: #FFE66C;
+            }
+            
+            .generate_another:hover {
+                border: 2px solid #FFE66C;
+                background-color: #ffe76c22;
+            }
+
+            /* Custom Scrollbar */
+            /* width */
+            ::-webkit-scrollbar {
+            width: .8rem;
+            }
+            /* Track */
+            ::-webkit-scrollbar-track {
+            border-radius: 10px;
+            /* background: #2f3439; */
+            }
+            /* Scroller */
+            ::-webkit-scrollbar-thumb {
+            background: #FFF7D0;
+            border-radius: 10px;
+            }
+
+            .note {
+                background-color: transparent;
+                margin: 1.5rem 0;
+                border: 1px solid #FF0000;
+                border-radius: 10px;
+                padding: 1rem;
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+                background-color: #ff000010;
+            }
+            
+            i {
+                margin-right: 1rem;
+            }
+
+            .alert {
+                font-size: 1.6rem;
+                color: #FF0000;
+                background-color: transparent;
+            }
+
+            .question {
+                font-size: 1.8rem;
+                font-weight: 400;
+                background-color: transparent;
+            }
+
+            ul {
+                background-color: transparent;
+            }
+
+            .choice {
+                font-size: 1.8rem;
+                margin-left: 2rem;
+                background-color: transparent;
+            }
+
+            .question_divider {
+                height: 2rem;
+                background-color: transparent;
+            }
+
+            .download {
+                font-size: 2rem;
+                border: 2px solid #FFF7D0;
+                border-radius: 8px;
+                background-color: #FFF7D0;
+                color: #212529;
+                font-weight: 500;
+                padding: .5rem 1.2rem;
+                width: fit-content;
+                height: fit-content;
+                text-decoration: none;
+            }
+
+            .dev {
+                background-color: transparent;
+                padding: 1rem 3rem;
+                width: 38rem;
+                margin: 0 auto;
+                margin-top: 10px;
+                margin-bottom: 1.2%;
+                border-radius: 40px;
+                border: 1px solid #33363A;
+                display: flex;
+                flex-direction: row;
+                font-size: 2.6rem;
+                display: flex;
+                justify-content: center;
+                background-color: #212529;
+                text-decoration: none;
+                transition: .2s;
+            }
+
+            .dev:hover {
+                /* background-color: #33363A; */
+                border: 1px solid #FFF7D0;
+            }
+
+            .credit {
+                width: fit-content;
+                margin-right: 3px;
+                background-color: transparent;
+            }
+        </style>
+    </head>
+    <body>        
+        <div class="container">
+            <div class="topbar">
+                <h1>Results</h1>
+                <a href="/send" class="download" download>Download</a>
+            </div>
+            
+            <div class="exam">
+                {% if not output %}
+                <div class="note">
+                    <i class="alert fa-solid fa-triangle-exclamation"></i>
+                    <p class="alert">Oops! Something went wrong. Try changing the CEFR difficulty level or choose ALL CEFR level. You might as well try putting a longer text passage next time.
+                        <a class="alert" target="_blank" href="https://scribehow.com/shared/How_to_use_T2E_Vocabulary_Exam_Generator__vyYu396JT_qZ0jKATVUqeQ#89cd5f52">Read more</a>
+                    </p>
+                </div>            
+            {% endif %}
+            {% for key, values in output.items() %}
+                <h2 class="question">What is the meaning of the word "{{ key.split(' = ')[0] }}" in this sentence "{{ key.split(' = ')[1] }}"?</h2>
+                <ul>
+                    {% for value in values %}
+                    <li class="choice">{{ value }}</li>
+                    {% endfor %}
+                </ul>
+                <div class="question_divider"></div>
+            {% endfor %}
+            </div>
+        </div>
+        <a class="generate_another" href="/">Generate another exam</a>
+        <a href="https://nontgcob.com/" target="_blank" class="dev">
+            <p class="credit">Developed by Nutnornont Chamadol</p>
+        </a>
+    </body>
+</html>