initial commit

.dockerignore

@@ -0,0 +1 @@
+Dockerfile

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:14
+
+RUN apt-get update && \
+    apt-get install -y nginx gettext-base && \
+    rm -rf /var/lib/apt/lists/* && \
+    chown -R 1000:1000 /etc/nginx && \
+    chown -R 1000:1000 /var/log/nginx && \
+    chown -R 1000:1000 /var/lib/nginx
+
+WORKDIR /app/transformer-autocomplete
+ADD . .
+
+RUN cd front && npm install && npx tsc && npm run build:prod
+RUN cd grunt && npm install && npx grunt
+RUN cd server && npm install && npx tsc
+
+ENTRYPOINT ["./entrypoint.sh"]

README.md

@@ -4,7 +4,17 @@ emoji: 🏆
 colorFrom: green
 colorTo: gray
 sdk: docker
+app_port: 8080
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# transformer-autocomplete
+
+Autocompletion based on GPT-2
+
+#### How to compile the front (to test the front with any server)
+
+1. Update the API endpoint in `front/js-src/Api.ts`
+2. compile the TS to pure JS with `cd front; tsc` or through vscode (you can launch it in watch mode if needed)
+3. pack the js into a single file (we use rollup) with `npm run watch`
+

backend/API.py

@@ -0,0 +1,165 @@
+from threading import Thread
+import falcon
+from falcon.http_status import HTTPStatus
+import json
+import requests
+import time
+from Model import generate_completion
+import sys
+
+
+class AutoComplete(object):
+    def on_post(self, req, resp, single_endpoint=True, x=None, y=None):
+        json_data = json.loads(req.bounded_stream.read())
+
+        resp.status = falcon.HTTP_200
+
+        start = time.time()
+
+        try:
+            context = json_data["context"].rstrip()
+        except KeyError:
+            resp.body = "The context field is required"
+            resp.status = falcon.HTTP_422
+            return
+
+        try:
+            n_samples = json_data['samples']
+        except KeyError:
+            n_samples = 3
+
+        try:
+            length = json_data['gen_length']
+        except KeyError:
+            length = 20
+
+        try:
+            max_time = json_data['max_time']
+        except KeyError:
+            max_time = -1
+
+        try:
+            model_name = json_data['model_size']
+        except KeyError:
+            model_name = "small"
+
+        try:
+            temperature = json_data['temperature']
+        except KeyError:
+            temperature = 0.7
+
+        try:
+            max_tokens = json_data['max_tokens']
+        except KeyError:
+            max_tokens = 256
+
+        try:
+            top_p = json_data['top_p']
+        except KeyError:
+            top_p = 0.95
+
+        try:
+            top_k = json_data['top_k']
+        except KeyError:
+            top_k = 40
+
+
+        # CTRL
+        try:
+            repetition_penalty = json_data['repetition_penalty']
+        except KeyError:
+            repetition_penalty = 0.02
+
+        # PPLM
+        try:
+            stepsize = json_data['step_size']
+        except KeyError:
+            stepsize = 0.02
+
+        try:
+            gm_scale = json_data['gm_scale']
+        except KeyError:
+            gm_scale = None
+
+        try:
+            kl_scale = json_data['kl_scale']
+        except KeyError:
+            kl_scale = None
+
+        try:
+            num_iterations = json_data['num_iterations']
+        except KeyError:
+            num_iterations = None
+
+        try:
+            use_sampling = json_data['use_sampling']
+        except KeyError:
+            use_sampling = None
+
+        try:
+            bag_of_words_or_discrim = json_data['bow_or_discrim']
+        except KeyError:
+            bag_of_words_or_discrim = "kitchen"
+
+        print(json_data)
+
+        sentences = generate_completion(
+            context,
+            length=length,
+            max_time=max_time,
+            model_name=model_name,
+            temperature=temperature,
+            max_tokens=max_tokens,
+            top_p=top_p,
+            top_k=top_k,
+
+            # CTRL
+            repetition_penalty=repetition_penalty,
+            
+            # PPLM
+            stepsize=stepsize,
+            bag_of_words_or_discrim=bag_of_words_or_discrim,
+            gm_scale=gm_scale,
+            kl_scale=kl_scale,
+            num_iterations=num_iterations,
+            use_sampling=use_sampling
+        )
+
+        resp.body = json.dumps({"sentences": sentences, 'time': time.time() - start})
+
+        resp.status = falcon.HTTP_200
+        sys.stdout.flush()
+
+
+class Request(Thread):
+    def __init__(self, end_point, data):
+        Thread.__init__(self)
+        self.end_point = end_point
+        self.data = data
+        self.ret = None
+
+    def run(self):
+        print("Requesting with url", self.end_point)
+        self.ret = requests.post(url=self.end_point, json=self.data)
+
+    def join(self):
+        Thread.join(self)
+        return self.ret.text
+
+
+class HandleCORS(object):
+    def process_request(self, req, resp):
+        resp.set_header('Access-Control-Allow-Origin', '*')
+        resp.set_header('Access-Control-Allow-Methods', '*')
+        resp.set_header('Access-Control-Allow-Headers', '*')
+        if req.method == 'OPTIONS':
+            raise HTTPStatus(falcon.HTTP_200, body='\n')
+
+
+autocomplete = AutoComplete()
+app = falcon.API(middleware=[HandleCORS()])
+app.add_route('/autocomplete', autocomplete)
+app.add_route('/autocomplete/{x}', autocomplete)
+app.add_route('/autocomplete/{x}/{y}', autocomplete)
+
+application = app

backend/GPUHandler.py

@@ -0,0 +1,159 @@
+import time
+import torch
+from transformers import (GPT2LMHeadModel, GPT2Tokenizer, GPT2Config,
+                          OpenAIGPTLMHeadModel, OpenAIGPTTokenizer,
+                          XLNetLMHeadModel, XLNetTokenizer,
+                          TransfoXLLMHeadModel, TransfoXLTokenizer,
+                          CTRLLMHeadModel, CTRLTokenizer)
+
+model_metadata = {
+    "gpt2/small": {
+        "tokenizer": GPT2Tokenizer,
+        "model": GPT2LMHeadModel,
+        "size": 550,
+        "checkpoint": "gpt2",
+        "identifier": "gpt2/small"
+    }, "gpt": {
+        "tokenizer": OpenAIGPTTokenizer,
+        "model": OpenAIGPTLMHeadModel,
+        "size": 550,
+        "checkpoint": "openai-gpt",
+        "identifier": "gpt"
+    }, "xlnet": {
+        "tokenizer": XLNetTokenizer,
+        "model": XLNetLMHeadModel,
+        "size": 550,
+        "checkpoint": "xlnet-base-cased",
+        "identifier": "xlnet"
+    }, "gpt2/arxiv-nlp": {
+        "tokenizer": GPT2Tokenizer,
+        "model": GPT2LMHeadModel,
+        "size": 550,
+        "checkpoint": "arxiv-nlp-v1",
+        "identifier": "gpt2/arxiv-nlp"
+    }, "gpt2/medium": {
+        "tokenizer": GPT2Tokenizer,
+        "model": GPT2LMHeadModel,
+        "size": 1500,
+        "checkpoint": "gpt2-medium",
+        "identifier": "gpt2/medium"
+    }, "gpt2/large": {
+        "tokenizer": GPT2Tokenizer,
+        "model": GPT2LMHeadModel,
+        "size": 3300,
+        "checkpoint": "gpt2-large",
+        "identifier": "gpt2/large"
+    }, "distilgpt2/small": {
+        "tokenizer": GPT2Tokenizer,
+        "model": GPT2LMHeadModel,
+        "size": 350,
+        "checkpoint": "distilgpt2",
+        "identifier": "distilgpt2/small"
+    }, "ctrl": {
+        "tokenizer": CTRLTokenizer,
+        "model": CTRLLMHeadModel,
+        "size": 6300,
+        "checkpoint": "ctrl",
+        "identifier": "ctrl"
+    }, "pplm": {
+        "tokenizer": GPT2Tokenizer,
+        "model": GPT2LMHeadModel,
+        "size": 3000,
+        "checkpoint": "gpt2-large",
+        "identifier": "pplm"
+    }, "gpt2/xl": {
+        "tokenizer": GPT2Tokenizer,
+        "model": GPT2LMHeadModel,
+        "size": 7000,
+        "checkpoint": "gpt2-xl",
+        "identifier": "gpt2/xl"
+    }, "pplm": {
+        "tokenizer": GPT2Tokenizer,
+        "model": GPT2LMHeadModel,
+        "size": 4000,
+        "checkpoint": "gpt2-medium",
+        "identifier": "pplm",
+        "configuration_options": {
+            "config": GPT2Config,
+            "options": {
+                "output_hidden_states": True
+            }
+        }
+    }
+}
+
+memory_overhead = 500
+
+class GPU:
+    def __init__(self, id):
+        self.id = id
+        self.models = []
+        self.total_memory = torch.cuda.get_device_properties(
+            "cuda:{}".format(id)).total_memory / 1_000_000 - 1_000
+
+        print("INIT GPU WITH DEVICE", "cuda:{}".format(id))
+
+    def register_model(self, model, cached_path=None):
+        if self.total_memory_used() + model["size"] < self.total_memory:
+            model["device"] = "cuda:{}".format(self.id)
+
+            if cached_path:
+                model["cached_path"] = cached_path
+    
+            self.models.append(model)
+            return True
+        else:
+            return False
+
+    def total_memory_used(self):
+        return sum([model["size"] for model in self.models]) + memory_overhead
+
+    def __repr__(self):
+        return str(
+            [(model["checkpoint"], model["size"]) for model in self.models] +
+            [str(round(100 * (self.total_memory_used() / self.total_memory))) + "%"] +
+            ["cuda:{}".format(self.id)]
+        )
+
+
+class GPUHandler:
+    def __init__(self, ids, model_list, gpu_ids, cached_models=None):
+        if cached_models is None:
+            cached_models = {}
+
+        self.gpus = [GPU(id) for id in gpu_ids]
+        print("GPU handler initiated with {} gpus.".format(len(self.gpus)))
+
+        self.sanity_check([model_metadata[model] for model in model_list])
+        
+        for model in model_list:
+            self.register_model(model_metadata[model], cached_models.get(model))
+
+    def register_model(self, model, cached_path=None):
+        for index, gpu in enumerate(self.gpus):
+            if gpu.register_model(model, cached_path):
+                print("Registered model", model, "in GPU", gpu)
+                break
+
+            if index >= len(self.gpus):
+                raise ValueError("Could not load model", model["checkpoint"])
+
+    def sanity_check(self, model_list):
+        temp_gpus = [GPU(id) for id in range(len(self.gpus))]
+
+        for model in model_list:
+
+            current_gpu_index = 0
+            while current_gpu_index < len(temp_gpus):
+                if not temp_gpus[current_gpu_index].register_model(model):
+                    current_gpu_index += 1
+                else:
+                    break
+
+                if current_gpu_index >= len(temp_gpus):
+                    raise RuntimeError("SANITY CHECK FAILED")
+
+        print("Current layout", temp_gpus)
+
+    def __repr__(self):
+        return f"NO. GPUS: {len(self.gpus)}.\n{self.gpus}"

backend/Model.py

@@ -0,0 +1,299 @@
+import time
+from transformers import (GPT2LMHeadModel, GPT2Tokenizer,
+                                  OpenAIGPTLMHeadModel, OpenAIGPTTokenizer,
+                                  XLNetLMHeadModel, XLNetTokenizer,
+                                  TransfoXLLMHeadModel, TransfoXLTokenizer,
+                                  CTRLLMHeadModel, CTRLTokenizer)
+
+from Utils import forward, create_context
+import torch
+import torch.nn.functional as F
+from math import floor
+import requests
+import json
+import os
+from PPLM import run_model as run_pplm, DISCRIMINATOR_MODELS_PARAMS
+from GPUHandler import GPUHandler
+
+PADDING_TEXT = """With eyes for the most part downcast and, if ever they lighted on a fellow creature, at once and 
+furtively averted, Bernard hastened across the roof. He was like a man pursued, but pursued by enemies he does not 
+wish to see, lest they should seem more hostile even than he had supposed, and he himself be made to feel guiltier 
+and even more helplessly alone. That horrible Benito Hoover!’ And yet the man had meant well enough. Which only made 
+it, in a way, much worse. Those who meant well behaved in the same way as those who meant badly. Even Lenina was making 
+him suffer. He remembered those weeks of timid indecision, during which he had looked and longed and despaired of ever 
+having the courage to ask her. Dared he face the risk of being humiliated by a contemptuous refusal? But if she were to 
+say yes, what rapture! Well, now she had said it and he was still wretched—wretched that she should have thought it 
+such a perfect afternoon for Obstacle Golf, that she should have trotted away to join Henry Foster, that she should 
+have found him funny for not wanting to talk of their most private affairs in public. Wretched, in a word, because she 
+had behaved as any healthy and virtuous English girl ought to behave and not in some other, abnormal, extraordinary 
+way. <eod> </s> <eos>"""
+
+try:
+    PID = int(requests.get(url="http://localhost:3000").json())
+    N_GPU = torch.cuda.device_count()
+    GPU_PER_WORKER = int(os.getenv("GPU_PER_WORKER"))
+    GPU_IDS = list(range(PID * GPU_PER_WORKER, (PID + 1) * GPU_PER_WORKER))
+    print("Successfully init thread with id {}. The GPU ids attributed are: {}".format(PID, GPU_IDS))
+
+    with open(os.getenv("FILE")) as json_file:
+        data = json.load(json_file)
+        models = data["models_to_load"]
+        cached_models = data.get("cached_models")
+except requests.exceptions.ConnectionError or TypeError:
+    if __name__ == "__main__":
+        PID = 0
+        N_GPU = torch.cuda.device_count()
+        GPU_PER_WORKER = 1
+        GPU_IDS = [0]
+        print("Successfully init development thread with id {}. The GPU ids attributed are: {}".format(PID, GPU_IDS))
+        models = ["pplm"]
+        cached_models = None
+        pass
+    else:
+        raise requests.exceptions.ConnectionError("The PID server is not running.")
+
+
+handler = GPUHandler(int(), models, GPU_IDS, cached_models)
+models = {}
+
+for gpu in handler.gpus:
+    for model in gpu.models:
+        model_name = model["identifier"]
+        print(f"Loading {model_name} model and tokenizer")
+        models[model_name] = model
+
+        if model.get("cached_path"):
+            print("Loading {} from local path.".format(model_name))
+            model_checkpoint_path = model["cached_path"]
+        else:
+            model_checkpoint_path = model["checkpoint"]
+        
+        if "configuration_options" in models[model_name]:
+            configuration_options = models[model_name]["configuration_options"]
+            print("Specific configuration options", configuration_options["options"])
+
+            config = configuration_options["config"].from_pretrained(model_checkpoint_path)
+            
+            for option_key, option_value in configuration_options["options"].items():
+                setattr(config, option_key, option_value) 
+
+            models[model_name]["model"] = models[model_name]["model"].from_pretrained(model_checkpoint_path, config=config).to(models[model_name]["device"])
+        else:
+            models[model_name]["model"] = models[model_name]["model"].from_pretrained(model_checkpoint_path).to(models[model_name]["device"])
+
+        models[model_name]["tokenizer"] = models[model_name]["tokenizer"].from_pretrained(models[model_name]["checkpoint"])
+        models[model_name]["model"].eval()
+
+print("All models successfully loaded.")
+
+
+def top_k_top_p_filtering(batch_logits, top_k=0, top_p=0.0, filter_value=-float('Inf')):
+    """
+    Filter a distribution of logits using top-k and/or nucleus (top-p) filtering
+
+    :param batch_logits: logits output by the model
+    :param top_k: >0: keep only top k tokens with highest probability (top-k filtering).
+    :param top_p: >0.0: keep the top tokens with cumulative probability >= top_p (nucleus filtering).
+    :param filter_value:
+    :return: A top_p/top_k filtered tensor of logits
+    """
+
+    for i in range(batch_logits.size(0)):
+        logits = batch_logits[i]
+        assert logits.dim() == 1  # batch size 1 for now - could be updated for more but the code would be less clear
+        top_k = min(top_k, logits.size(-1))  # Safety check
+        if top_k and top_k > 0:
+            # Remove all tokens with a probability less than the last token of the top-k
+            indices_to_remove = logits < torch.topk(logits, top_k)[0][..., -1, None]
+            logits[indices_to_remove] = filter_value
+
+        if top_p and top_p > 0.0:
+            sorted_logits, sorted_indices = torch.sort(logits, descending=True)
+            cumulative_probs = torch.cumsum(F.softmax(sorted_logits, dim=-1), dim=-1)
+
+            # Remove tokens with cumulative probability above the threshold
+            sorted_indices_to_remove = cumulative_probs > top_p
+            # Shift the indices to the right to keep also the first token above the threshold
+            sorted_indices_to_remove[..., 1:] = sorted_indices_to_remove[..., :-1].clone()
+            sorted_indices_to_remove[..., 0] = 0
+
+            indices_to_remove = sorted_indices[sorted_indices_to_remove]
+            logits[indices_to_remove] = filter_value
+
+        if 'batched_logits' in locals():
+            batched_logits = torch.cat((batched_logits, logits.unsqueeze(0)), dim=0)
+        else:
+            batched_logits = logits.unsqueeze(0)
+
+    return batched_logits
+
+
+def check_tensor_for_eot(output, eot_token, dot_token):
+    return all([(eot_token in output_item or dot_token in output_item) for output_item in output.tolist()])
+
+
+def truncate_after_eot(output, eot_tokens):
+    result = []
+    for i in range(output.size(0)):
+        if any([eot_token in output[i] for eot_token in eot_tokens]):
+            item = output[i].tolist()
+            index = find_min_value_in_array(item, eot_tokens)
+            result.append(item[:index] + [eot_tokens[0]])
+        else:
+            result.append(output[i].tolist())
+    return result
+
+
+def find_min_value_in_array(array, values):
+    indexes = []
+    for value in values:
+        try:
+            indexes.append(array.index(value))
+        except ValueError:
+            ""  # Couldn't find value in array
+
+    return min(indexes)
+
+
+# @lru_cache()
+def generate_completion(
+    raw_text, 
+    length=-1, 
+    max_time=-1, 
+    model_name="small", 
+    temperature=1, 
+    max_tokens=256,
+    top_p=0.0, 
+    top_k=0, 
+    batch_size=3, 
+    repetition_penalty=1.2, 
+
+    # PPLM
+    bag_of_words_or_discrim=None, 
+    stepsize=0.02,
+    gamma=1.5,
+    num_iterations=3,
+    window_length=5,
+    kl_scale=0.01,
+    gm_scale=0.95,
+    use_sampling=False
+):
+    start = time.time()
+
+    try:
+        print("Running with model", model_name)
+        model, tokenizer, device = models[model_name]["model"], models[model_name]["tokenizer"], models[model_name]["device"]
+    except KeyError:
+        print("Error. Defaulting to small model.")
+        model, tokenizer, device = models["gpt2/small"]["model"], models["gpt2/small"]["tokenizer"], models["gpt2/small"]["device"]
+
+    if "pplm" in model_name:
+        if ":" in bag_of_words_or_discrim:
+            discrim, discrim_label = bag_of_words_or_discrim.split(":")
+            discrim_label = DISCRIMINATOR_MODELS_PARAMS[discrim]["class_id"][int(discrim_label)]
+            bag_of_words = None
+
+            # Hardcoded parameters for the discriminator
+            gamma = 1.0
+
+            print("Running PPLM with discriminator:", discrim, discrim_label)
+        else:
+            bag_of_words = bag_of_words_or_discrim
+            discrim = None
+            discrim_label = None
+
+            # Hardcoded parameters for the BOW
+            gamma = 1.5
+            window_length = 5
+
+            print("Running PPLM with bag of words:", bag_of_words)
+        
+        print("kl", kl_scale, "gm", gm_scale, "sampling", use_sampling, "window length", window_length, "gamma", gamma, "temperature", temperature)
+
+        return run_pplm(
+            model, tokenizer, device, raw_text, 
+            max_time=max_time,
+            discrim=discrim,
+            discrim_label=discrim_label,
+            num_samples=batch_size, 
+            bag_of_words=bag_of_words,
+            length=length,
+            temperature=temperature,
+            top_k=top_k,
+            stepsize=stepsize,
+            gamma=gamma,
+            num_iterations=num_iterations,
+            window_length=window_length,
+            kl_scale=kl_scale,
+            gm_scale=gm_scale,
+            use_sampling=use_sampling
+        )
+
+
+    context_tokens, eot_token, dot_token = create_context(model_name, tokenizer, raw_text, PADDING_TEXT, max_tokens=max_tokens)
+
+    if length == -1:
+        length = 100
+
+    context = torch.tensor(context_tokens, device=device, dtype=torch.long).unsqueeze(0).repeat(batch_size, 1)
+    prev = context
+    past = None
+
+    with torch.no_grad():
+        for _ in range(length):
+            try:
+                output = forward(model_name, model, prev, past, device=device)
+            except RuntimeError:
+                return "ERROR 500: OOM. TransfoXL asked for too much memory."
+
+            logits, past = output if len(output) > 2 else output[0], None
+
+            logits = logits[:, -1, :] / max(temperature, 0.001)
+
+            if "ctrl" in model_name:
+                for i in range(batch_size):
+                    for j in set(prev[i].tolist()):
+                        logits[i, j] /= repetition_penalty
+            
+            logits = top_k_top_p_filtering(logits, top_p=top_p, top_k=top_k)
+            log_probs = F.softmax(logits, dim=-1)
+            token = torch.multinomial(log_probs, num_samples=1)
+
+            prev = torch.cat((prev, token), dim=1)
+
+            # Check that there is no eot token in all of the sentence, else breaks.
+            if check_tensor_for_eot(prev[:, len(context_tokens):], eot_token, dot_token) or (max_time != -1 and time.time() - start + 0.1 > max_time):
+                break
+
+    out = prev[:, len(context_tokens):]
+    # Remove the words following the eot tokens.
+    out = truncate_after_eot(out, list(filter(lambda t: t is not None, [dot_token, eot_token])))
+    end = time.time()
+
+    # Remove empty sentences and duplicates
+    generations = list(set(filter(lambda x: len(x) > 0, [" " + tokenizer.decode(single_generation).strip() for single_generation in out])))
+
+    sentences = [
+        {"value": generations[i], "time": end - start, "tokens": len(out[i])} for i in range(len(generations))
+    ]
+
+
+    # print(end - start, [len(out[i]) for i in range(len(generations))])
+
+    return sentences
+
+
+if __name__ == "__main__":
+    print(generate_completion(
+        "My dog died",
+        length=30, model_name="pplm", batch_size=3, top_k=10, top_p=0.9,
+        bag_of_words_or_discrim="sentiment:2",
+        stepsize=0.03,
+        gamma=1,
+        num_iterations=3,
+        window_length=5,
+        kl_scale=0.01,
+        gm_scale=0.95,
+        max_time=-1,
+        use_sampling=False
+    ))

backend/PPLM.py

@@ -0,0 +1,723 @@
+#! /usr/bin/env python3
+# coding=utf-8
+# Copyright 2018 The Uber AI Team Authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+"""
+Example command with bag of words:
+python examples/run_pplm.py -B space --cond_text "The president" --length 100 --gamma 1.5 --num_iterations 3 --num_samples 10 --stepsize 0.01 --window_length 5 --kl_scale 0.01 --gm_scale 0.95
+
+Example command with discriminator:
+python examples/run_pplm.py -D sentiment --class_label 3 --cond_text "The lake" --length 10 --gamma 1.0 --num_iterations 30 --num_samples 10 --stepsize 0.01 --kl_scale 0.01 --gm_scale 0.95
+"""
+
+import json
+from operator import add
+from typing import List, Optional, Tuple, Union
+
+import numpy as np
+import torch
+import torch.nn.functional as F
+from torch.autograd import Variable
+from tqdm import trange
+from transformers.file_utils import cached_path
+import time
+
+from run_pplm_discrim_train import ClassificationHead
+
+PPLM_BOW = 1
+PPLM_DISCRIM = 2
+PPLM_BOW_DISCRIM = 3
+SMALL_CONST = 1e-15
+BIG_CONST = 1e10
+
+BAG_OF_WORDS_ARCHIVE_MAP = {
+    'kitchen': "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/bow/kitchen.txt",
+    'legal': "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/bow/legal.txt",
+    'military': "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/bow/military.txt",
+    'monsters': "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/bow/monsters.txt",
+    'politics': "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/bow/politics.txt",
+    'positive_words': "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/bow/positive_words.txt",
+    'religion': "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/bow/religion.txt",
+    'science': "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/bow/science.txt",
+    'space': "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/bow/space.txt",
+    'technology': "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/bow/technology.txt",
+}
+
+DISCRIMINATOR_MODELS_PARAMS = {
+    "clickbait": {
+        "url": "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/discriminators/clickbait_classifierhead.pt",
+        "class_size": 2,
+        "embed_size": 1024,
+        "class_vocab": {"non_clickbait": 0, "clickbait": 1},
+        "class_id": {0: "non_clickbait", 1: "clickbait"},
+        "default_class": 1,
+        "pretrained_model": "gpt2-medium",
+    },
+    "sentiment": {
+        "url": "http://s.yosinski.com/SST_classifier_head.pt",
+        "class_size": 5,
+        "embed_size": 1024,
+        "class_vocab": {"very_positive": 2, "very_negative": 3},
+        "class_id": {2: "very_positive", 3: "very_negative"},
+        "default_class": 3,
+        "pretrained_model": "gpt2-medium",
+    },
+    "toxicity": {
+        "url": "https://s3.amazonaws.com/models.huggingface.co/bert/pplm/discriminators/toxicity_classifierhead.pt",
+        "class_size": 2,
+        "embed_size": 1024,
+        "class_vocab": {"non_toxic": 0, "toxic": 1},
+        "class_id": {0: "non_toxic", 1: "toxic"},
+        "default_class": 0,
+        "pretrained_model": "gpt2-medium",
+    },
+}
+
+
+def to_var(x, requires_grad=False, volatile=False, device='cuda'):
+    if torch.cuda.is_available() and device == 'cuda':
+        x = x.cuda()
+    elif device != 'cuda':
+        x = x.to(device)
+    return Variable(x, requires_grad=requires_grad, volatile=volatile)
+
+
+def top_k_filter(logits, k, probs=False):
+    """
+    Masks everything but the k top entries as -infinity (1e10).
+    Used to mask logits such that e^-infinity -> 0 won't contribute to the
+    sum of the denominator.
+    """
+    if k == 0:
+        return logits
+    else:
+        values = torch.topk(logits, k)[0]
+        batch_mins = values[:, -1].view(-1, 1).expand_as(logits)
+        if probs:
+            return torch.where(logits < batch_mins,
+                               torch.ones_like(logits) * 0.0, logits)
+        return torch.where(logits < batch_mins,
+                           torch.ones_like(logits) * -BIG_CONST,
+                           logits)
+
+
+def perturb_past(
+        past,
+        model,
+        last,
+        unpert_past=None,
+        unpert_logits=None,
+        accumulated_hidden=None,
+        grad_norms=None,
+        stepsize=0.01,
+        one_hot_bows_vectors=None,
+        classifier=None,
+        class_label=None,
+        loss_type=0,
+        num_iterations=3,
+        horizon_length=1,
+        window_length=0,
+        decay=False,
+        gamma=1.5,
+        kl_scale=0.01,
+        device='cuda',
+):
+    # Generate inital perturbed past
+    grad_accumulator = [
+        (np.zeros(p.shape).astype("float32"))
+        for p in past
+    ]
+
+    if accumulated_hidden is None:
+        accumulated_hidden = 0
+
+    if decay:
+        decay_mask = torch.arange(
+            0.,
+            1.0 + SMALL_CONST,
+            1.0 / (window_length)
+        )[1:]
+    else:
+        decay_mask = 1.0
+
+    # TODO fix this comment (SUMANTH)
+    # Generate a mask is gradient perturbated is based on a past window
+    _, batch_size, _, curr_length, _ = past[0].shape
+
+    if curr_length > window_length and window_length > 0:
+        ones_key_val_shape = (
+                tuple(past[0].shape[:-2])
+                + tuple([window_length])
+                + tuple(past[0].shape[-1:])
+        )
+
+        zeros_key_val_shape = (
+                tuple(past[0].shape[:-2])
+                + tuple([curr_length - window_length])
+                + tuple(past[0].shape[-1:])
+        )
+
+        ones_mask = torch.ones(ones_key_val_shape)
+        ones_mask = decay_mask * ones_mask.permute(0, 1, 2, 4, 3)
+        ones_mask = ones_mask.permute(0, 1, 2, 4, 3)
+
+        window_mask = torch.cat(
+            (ones_mask, torch.zeros(zeros_key_val_shape)),
+            dim=-2
+        ).to(device)
+    else:
+        window_mask = torch.ones_like(past[0]).to(device)
+
+    # accumulate perturbations for num_iterations
+    loss_per_iter = []
+    losses_per_iter = []
+    new_accumulated_hidden = None
+    for i in range(num_iterations):
+        curr_perturbation = [
+            to_var(torch.from_numpy(p_), requires_grad=True, device=device)
+            for p_ in grad_accumulator
+        ]
+
+        # Compute hidden using perturbed past
+        perturbed_past = list(map(add, past, curr_perturbation))
+        _, _, _, curr_length, _ = curr_perturbation[0].shape
+        all_logits, _, all_hidden = model(last, past=perturbed_past)
+        hidden = all_hidden[-1]
+        new_accumulated_hidden = accumulated_hidden + torch.sum(
+            hidden,
+            dim=1
+        ).detach()
+        # TODO: Check the layer-norm consistency of this with trained discriminator (Sumanth)
+        logits = all_logits[:, -1, :]
+        probs = F.softmax(logits, dim=-1)
+
+        loss = 0.0
+        losses = torch.zeros(batch_size, device=device)
+        loss_list = []
+        if loss_type == PPLM_BOW or loss_type == PPLM_BOW_DISCRIM:
+            for one_hot_bow in one_hot_bows_vectors:
+                bow_logits = torch.mm(probs, torch.t(one_hot_bow))
+                bow_losses = -torch.log(torch.sum(bow_logits, dim=-1))
+                losses += bow_losses
+                bow_loss = torch.sum(bow_losses)  # sum over batches
+                loss += bow_loss
+                loss_list.append(bow_loss)
+
+        if loss_type == 2 or loss_type == 3:
+            ce_loss = torch.nn.CrossEntropyLoss(reduction='none')
+            # TODO why we need to do this assignment and not just using unpert_past? (Sumanth)
+            curr_unpert_past = unpert_past
+            curr_probs = torch.unsqueeze(probs, dim=1)
+            wte = model.resize_token_embeddings()
+            for _ in range(horizon_length):
+                inputs_embeds = torch.matmul(curr_probs, wte.weight.data)
+                _, curr_unpert_past, curr_all_hidden = model(
+                    past=curr_unpert_past,
+                    inputs_embeds=inputs_embeds
+                )
+                curr_hidden = curr_all_hidden[-1]
+                new_accumulated_hidden = new_accumulated_hidden + torch.sum(
+                    curr_hidden, dim=1)
+
+            prediction = classifier(new_accumulated_hidden /
+                                    (curr_length + 1 + horizon_length))
+
+            label = torch.tensor(batch_size * [class_label],
+                                 device=device,
+                                 dtype=torch.long)
+            discrim_losses = ce_loss(prediction, label)
+            losses += discrim_losses
+            discrim_loss = discrim_losses.sum(-1)
+            loss += discrim_loss
+            loss_list.append(discrim_loss)
+
+        kl_loss = 0.0
+        if kl_scale > 0.0:
+            unpert_probs = F.softmax(unpert_logits[:, -1, :], dim=-1)
+            unpert_probs = (
+                    unpert_probs + SMALL_CONST *
+                    (unpert_probs <= SMALL_CONST).float().to(device).detach()
+            )
+            correction = SMALL_CONST * (probs <= SMALL_CONST).float().to(
+                device).detach()
+            corrected_probs = probs + correction.detach()
+            kl_losses = kl_scale * (
+                (corrected_probs * (corrected_probs / unpert_probs).log()).sum(-1)
+            )
+            losses += kl_losses
+            kl_loss = kl_losses.sum()
+            loss += kl_loss
+
+        loss_per_iter.append(loss.data.cpu().numpy())
+        losses_per_iter.append(losses.data.cpu().numpy())
+
+        # compute gradients
+        loss.backward()
+
+        # calculate gradient norms
+        if grad_norms is not None and loss_type == PPLM_BOW:
+            grad_norms = [
+                torch.max(grad_norms[index],
+                    torch.norm_except_dim(p_.grad * window_mask, dim=1))
+                    #torch.norm(p_.grad * window_mask))
+                for index, p_ in enumerate(curr_perturbation)
+            ]
+        else:
+            grad_norms = [
+                (torch.norm_except_dim(p_.grad * window_mask, dim=1) + SMALL_CONST)
+                for index, p_ in enumerate(curr_perturbation)
+            ]
+
+        # normalize gradients
+        grad = [
+            -stepsize *
+            (p_.grad * window_mask / grad_norms[
+                index] ** gamma).data.cpu().numpy()
+            for index, p_ in enumerate(curr_perturbation)
+        ]
+
+        # accumulate gradient
+        grad_accumulator = list(map(add, grad, grad_accumulator))
+
+        # reset gradients, just to make sure
+        for p_ in curr_perturbation:
+            p_.grad.data.zero_()
+
+        # removing past from the graph
+        new_past = []
+        for p_ in past:
+            new_past.append(p_.detach())
+        past = new_past
+
+    # apply the accumulated perturbations to the past
+    grad_accumulator = [
+        to_var(torch.from_numpy(p_), requires_grad=True, device=device)
+        for p_ in grad_accumulator
+    ]
+    pert_past = list(map(add, past, grad_accumulator))
+
+    return pert_past, new_accumulated_hidden, grad_norms, losses_per_iter
+
+
+def get_classifier(
+        name: Optional[str], class_label: Union[str, int],
+        device: str
+) -> Tuple[Optional[ClassificationHead], Optional[int]]:
+    if name is None:
+        return None, None
+
+    params = DISCRIMINATOR_MODELS_PARAMS[name]
+    classifier = ClassificationHead(
+        class_size=params['class_size'],
+        embed_size=params['embed_size']
+    ).to(device)
+    if "url" in params:
+        resolved_archive_file = cached_path(params["url"])
+    elif "path" in params:
+        resolved_archive_file = params["path"]
+    else:
+        raise ValueError("Either url or path have to be specified "
+                         "in the discriminator model parameters")
+    classifier.load_state_dict(
+        torch.load(resolved_archive_file, map_location=device))
+    classifier.eval()
+
+    if isinstance(class_label, str):
+        if class_label in params["class_vocab"]:
+            label_id = params["class_vocab"][class_label]
+        else:
+            label_id = params["default_class"]
+
+
+    elif isinstance(class_label, int):
+        if class_label in set(params["class_vocab"].values()):
+            label_id = class_label
+        else:
+            label_id = params["default_class"]
+
+    else:
+        label_id = params["default_class"]
+
+    return classifier, label_id
+
+
+def get_bag_of_words_indices(bag_of_words_ids_or_paths: List[str], tokenizer) -> \
+        List[List[List[int]]]:
+    bow_indices = []
+    for id_or_path in bag_of_words_ids_or_paths:
+        if id_or_path in BAG_OF_WORDS_ARCHIVE_MAP:
+            filepath = cached_path(BAG_OF_WORDS_ARCHIVE_MAP[id_or_path])
+        else:
+            filepath = id_or_path
+        with open(filepath, "r") as f:
+            words = f.read().strip().split("\n")
+        bow_indices.append(
+            [tokenizer.encode(word.strip(), add_prefix_space=True,
+                              add_special_tokens=False) for word in
+             words])
+    return bow_indices
+
+
+def build_bows_one_hot_vectors(bow_indices, tokenizer, device='cuda'):
+    if bow_indices is None:
+        return None
+
+    one_hot_bows_vectors = []
+    for single_bow in bow_indices:
+        single_bow = list(filter(lambda x: len(x) <= 1, single_bow))
+        single_bow = torch.tensor(single_bow).to(device)
+        num_words = single_bow.shape[0]
+        one_hot_bow = torch.zeros(num_words, tokenizer.vocab_size).to(device)
+        one_hot_bow.scatter_(1, single_bow, 1)
+        one_hot_bows_vectors.append(one_hot_bow)
+    return one_hot_bows_vectors
+
+
+def full_text_generation(
+        model,
+        tokenizer,
+        context=None,
+        num_samples=1,
+        device="cuda",
+        max_time=5,
+        sample=False,
+        discrim=None,
+        class_label=None,
+        bag_of_words=None,
+        length=100,
+        grad_length=10000,
+        stepsize=0.02,
+        num_iterations=3,
+        temperature=1.0,
+        gm_scale=0.9,
+        kl_scale=0.01,
+        top_k=10,
+        window_length=0,
+        horizon_length=1,
+        decay=False,
+        gamma=1.5,
+):
+    classifier, class_id = get_classifier(
+        discrim,
+        class_label,
+        device
+    )
+
+    bow_indices = []
+    if bag_of_words:
+        bow_indices = get_bag_of_words_indices(bag_of_words.split(";"),
+                                               tokenizer)
+
+    if bag_of_words and classifier:
+        loss_type = PPLM_BOW_DISCRIM
+
+    elif bag_of_words:
+        loss_type = PPLM_BOW
+
+    elif classifier is not None:
+        loss_type = PPLM_DISCRIM
+
+    else:
+        raise Exception("Specify either a bag of words or a discriminator")
+
+    # unpert_gen_tok_text = generate_text_pplm(
+    #    model=model,
+    #    tokenizer=tokenizer,
+    #    context=context,
+    #    device=device,
+    #    length=length,
+    #    perturb=False
+    # )
+    # if device == 'cuda':
+    #    torch.cuda.empty_cache()
+
+    print(context, bow_indices, top_k, gm_scale, kl_scale)
+
+    pert_gen_tok_text, last_losses = generate_text_pplm(
+        model=model,
+        context=context,
+        tokenizer=tokenizer,
+        device=device,
+        max_time=max_time,
+        sample=sample,
+        perturb=True,
+        bow_indices=bow_indices,
+        classifier=classifier,
+        class_label=class_id,
+        loss_type=loss_type,
+        length=length,
+        grad_length=grad_length,
+        stepsize=stepsize,
+        num_iterations=num_iterations,
+        temperature=temperature,
+        gm_scale=gm_scale,
+        kl_scale=kl_scale,
+        top_k=top_k,
+        window_length=window_length,
+        horizon_length=horizon_length,
+        decay=decay,
+        gamma=gamma,
+    )
+
+    if device == 'cuda':
+        torch.cuda.empty_cache()
+
+    return pert_gen_tok_text, last_losses
+
+
+def generate_text_pplm(
+        model,
+        tokenizer,
+        context=None,
+        past=None,
+        device="cuda",
+        max_time=5,
+        perturb=True,
+        bow_indices=None,
+        classifier=None,
+        class_label=None,
+        loss_type=0,
+        length=100,
+        stepsize=0.02,
+        temperature=1.0,
+        top_k=10,
+        sample=False,
+        num_iterations=3,
+        grad_length=10000,
+        horizon_length=1,
+        window_length=0,
+        decay=False,
+        gamma=1.5,
+        gm_scale=0.9,
+        kl_scale=0.01,
+):
+    output_so_far = None
+    if context:
+        context_t = torch.tensor(context, device=device, dtype=torch.long)
+        while len(context_t.shape) < 2:
+            context_t = context_t.unsqueeze(0)
+        output_so_far = context_t
+
+    # collect one hot vectors for bags of words
+    one_hot_bows_vectors = build_bows_one_hot_vectors(bow_indices, tokenizer,
+                                                      device)
+
+    start = time.time()
+
+    grad_norms = None
+    last = None
+    losses_this_iter = None
+    losses_in_time = []
+    for i in trange(length, ascii=True):
+
+        # Get past/probs for current output, except for last word
+        # Note that GPT takes 2 inputs: past + current_token
+
+        # run model forward to obtain unperturbed
+        if past is None and output_so_far is not None:
+            last = output_so_far[:, -1:]
+            if output_so_far.shape[1] > 1:
+                _, past, _ = model(output_so_far[:, :-1])
+
+        unpert_logits, unpert_past, unpert_all_hidden = model(output_so_far)
+        unpert_last_hidden = unpert_all_hidden[-1]
+
+        # check if we are abowe grad max length
+        if i >= grad_length:
+            current_stepsize = stepsize * 0
+        else:
+            current_stepsize = stepsize
+
+        # modify the past if necessary
+        if not perturb or num_iterations == 0:
+            pert_past = past
+
+        else:
+            accumulated_hidden = unpert_last_hidden[:, :-1, :]
+            accumulated_hidden = torch.sum(accumulated_hidden, dim=1)
+
+            if past is not None:
+                pert_past, _, grad_norms, losses_this_iter = perturb_past(
+                    past,
+                    model,
+                    last,
+                    unpert_past=unpert_past,
+                    unpert_logits=unpert_logits,
+                    accumulated_hidden=accumulated_hidden,
+                    grad_norms=grad_norms,
+                    stepsize=current_stepsize,
+                    one_hot_bows_vectors=one_hot_bows_vectors,
+                    classifier=classifier,
+                    class_label=class_label,
+                    loss_type=loss_type,
+                    num_iterations=num_iterations,
+                    horizon_length=horizon_length,
+                    window_length=window_length,
+                    decay=decay,
+                    gamma=gamma,
+                    kl_scale=kl_scale,
+                    device=device,
+                )
+                losses_in_time.append(losses_this_iter)
+            else:
+                pert_past = past
+
+        pert_logits, past, pert_all_hidden = model(last, past=pert_past)
+        pert_logits = pert_logits[:, -1, :] / temperature  # + SMALL_CONST
+        pert_probs = F.softmax(pert_logits, dim=-1)
+
+        # Fuse the modified model and original model
+        if perturb:
+
+            unpert_probs = F.softmax(unpert_logits[:, -1, :], dim=-1)
+
+            pert_probs = ((pert_probs ** gm_scale) * (
+                    unpert_probs ** (1 - gm_scale)))  # + SMALL_CONST
+            pert_probs = top_k_filter(pert_probs, k=top_k,
+                                      probs=True)  # + SMALL_CONST
+
+            # rescale
+            if torch.sum(pert_probs) <= 1:
+                pert_probs = pert_probs / torch.sum(pert_probs)
+
+        else:
+            pert_logits = top_k_filter(pert_logits, k=top_k)  # + SMALL_CONST
+            pert_probs = F.softmax(pert_logits, dim=-1)
+
+        # sample or greedy
+        if sample:
+            last = torch.multinomial(pert_probs, num_samples=1)
+
+        else:
+            _, last = torch.topk(pert_probs, k=1, dim=-1)
+
+        # update context/output_so_far appending the new token
+        output_so_far = (
+            last if output_so_far is None
+            else torch.cat((output_so_far, last), dim=1)
+        )
+
+        if time.time() - start > max_time and max_time != -1:
+            break
+
+    final_losses = losses_this_iter[-1] if losses_this_iter else None
+    return output_so_far, final_losses
+
+
+def set_generic_model_params(discrim_weights, discrim_meta):
+    if discrim_weights is None:
+        raise ValueError('When using a generic discriminator, '
+                         'discrim_weights need to be specified')
+    if discrim_meta is None:
+        raise ValueError('When using a generic discriminator, '
+                         'discrim_meta need to be specified')
+
+    with open(discrim_meta, 'r') as discrim_meta_file:
+        meta = json.load(discrim_meta_file)
+    meta['path'] = discrim_weights
+    DISCRIMINATOR_MODELS_PARAMS['generic'] = meta
+
+
+def run_model(
+        model,
+        tokenizer,
+        device,
+        raw_text,
+        max_time,
+        bag_of_words=None,
+        discrim=None,
+        discrim_weights=None,
+        discrim_meta=None,
+        discrim_label=-1,
+        stepsize=0.02,
+        length=10,
+        seed=None,
+        temperature=1.0,
+        top_k=10,
+        gm_scale=0.9,
+        kl_scale=0.01,
+        uncond=False,
+        num_iterations=3,
+        grad_length=10000,
+        num_samples=1,
+        horizon_length=1,
+        window_length=0,
+        decay=False,
+        gamma=1.5,
+        use_sampling=False
+):
+    print(seed)
+    if seed is not None:
+        # set Random seed
+        torch.manual_seed(seed)
+        np.random.seed(seed)
+
+    if discrim == 'generic':
+        set_generic_model_params(discrim_weights, discrim_meta)
+
+    tokenized_cond_text = [tokenizer.encode(
+        tokenizer.bos_token + raw_text, max_length=512 - length - 1)] * num_samples
+
+    # Freeze GPT-2 weights
+    for param in model.parameters():
+        param.requires_grad = False
+
+    # generate unperturbed and perturbed texts
+
+    # full_text_generation returns:
+    # unpert_gen_tok_text, pert_gen_tok_texts, discrim_losses, losses_in_time
+
+    pert_gen_tok_text, last_losses = full_text_generation(
+        model=model,
+        tokenizer=tokenizer,
+        context=tokenized_cond_text,
+        device=device,
+        max_time=max_time,
+        num_samples=num_samples,
+        discrim=discrim,
+        class_label=discrim_label,
+        bag_of_words=bag_of_words,
+        length=length,
+        grad_length=grad_length,
+        stepsize=stepsize,
+        num_iterations=num_iterations,
+        temperature=temperature,
+        gm_scale=gm_scale,
+        kl_scale=kl_scale,
+        top_k=top_k,
+        window_length=window_length,
+        horizon_length=horizon_length,
+        decay=decay,
+        gamma=gamma,
+        sample=use_sampling
+    )
+
+    generated_texts = []
+
+    # iterate through the perturbed texts
+    for sample, loss in zip(pert_gen_tok_text.tolist(), last_losses.tolist()):
+        generated_part = sample[len(tokenized_cond_text[0]):]
+        pert_gen_text = tokenizer.decode(generated_part)
+
+        # keep the prefix, perturbed seq, original seq for each index
+        generated_texts.append(
+            {
+                "value": pert_gen_text,
+                "tokens": len(generated_part),
+                "loss": loss
+            }
+        )
+
+    return generated_texts

backend/README.md

@@ -0,0 +1,69 @@
+# Python backend 
+
+## Setup
+
+```
+pip install -r requirements.txt
+chmod +x launch.sh
+```
+
+## Execution
+
+
+`./launch.sh`
+
+## Usage
+
+The API listens to the port `6006` and the route `autocomplete`. It listens to `POST` requests.
+Query it like this: `{POST}http://<url>:6006/autocomplete`
+
+The necessary argument is `context` which is a string of characters (ideally a sentence) which will be converted in tokens and fed to GPT-2.
+
+The optional arguments are detailed below:
+
+`length` is an unsigned int which sets the maximum length (in tokens) of the generated sentence __default: 100__
+
+`n_samples` is an int `0 < n_samples <= 3` which sets the maximum amount of samples generated. __default: 3__
+
+`max_time` is an unsigned float which sets an heuristic for the maximum time spent generating sentences. It is a heuristic because it is not exact, it can slightly overflow. __default: infinite__
+
+`model_size` takes `"small"` or `"medium"` as input and corresponds to the GPT model size __default: small__
+
+`temperature` float - temperature of the model __default: 1__
+
+`max_tokens` int - maximum amount of tokens that will be fed into the model. __default: 256__
+
+`top_p` float - 0 < top_p < 1, nucleus sampling; only tokens with a cumulative probability of top_p will be selected for multinomial sampling __default: 0.9__
+
+`top_k` int - Only top k tokens will be selected for multinomial sampling. __default: 256__
+
+## Return format
+
+The server returns a set of sentences according to the context. Their format is: 
+```
+{sentences: {value: string, time: number}[], time: number}
+```
+
+Example:
+
+With POST parameters as:
+
+```json
+{
+    "context": "That man is just another",
+    "samples": 3
+}
+```
+
+The response is as follows:
+
+```json
+{
+    "sentences": [
+        {"value": " handicapped working man.", "time": 0.15415167808532715}, 
+        {"value": " guy, doing everything his manly nature requires.", "time": 0.2581148147583008},
+        {"value": " guy, Mohr said.", "time": 0.17547011375427246}
+    ],  
+    "time": 0.264873743057251
+}
+```

backend/Utils.py

@@ -0,0 +1,57 @@
+import torch
+
+
+def forward(model_name, model, input_ids, past, device='cpu'):
+    if "gpt2" in model_name or "ctrl" in model_name:
+        if past is not None:
+            return model(input_ids[:, -1], past=past)
+        return model(input_ids)
+    elif "xlnet" in model_name:
+        input_ids = torch.cat((
+            input_ids,
+            torch.zeros((input_ids.shape[0], 1), dtype=torch.long, device=device)
+        ), dim=1)
+
+        perm_mask = torch.zeros(
+            (input_ids.shape[0], input_ids.shape[1], input_ids.shape[1]),
+            dtype=torch.float,
+            device=device
+        )
+        perm_mask[:, :, -1] = 1.0
+
+        target_mapping = torch.zeros(
+            (input_ids.shape[0], 1, input_ids.shape[1]),
+            dtype=torch.float,
+            device=device)
+        target_mapping[:, 0, -1] = 1.0
+
+        return model(input_ids, perm_mask=perm_mask, target_mapping=target_mapping)
+    elif "transfo-xl" in model_name:
+        return model(input_ids, mems=past)
+    else:
+        return model(input_ids)
+
+
+def create_context(model_name, tokenizer, initial_text="", padding_text=None, max_tokens=512):
+    if not len(initial_text) and "gpt2" in model_name:
+        initial_text = "<|endoftext|>"
+    if 'xlnet' in model_name or "transfo-xl" in model_name:
+        initial_text = padding_text + initial_text
+
+    if 'transfo-xl' in model_name:
+        max_tokens = int(max_tokens / 2)
+
+    context_tokens = tokenizer.encode(initial_text)[-max_tokens:]
+
+    if "gpt2" in model_name:
+        eot_token = tokenizer.encoder["<|endoftext|>"]
+        if len(context_tokens) == 0:
+            context_tokens = [tokenizer.encoder["<|endoftext|>"]]
+    elif "xlnet" in model_name:
+        eot_token = tokenizer.convert_tokens_to_ids('<eop>')
+    else:
+        eot_token = None
+    dot_token = tokenizer.encode(".")[-1]
+
+    return context_tokens, eot_token, dot_token
+

backend/id/.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

backend/id/id.ts

@@ -0,0 +1,17 @@
+import * as Koa from "koa";
+import * as Router from "koa-router";
+
+let id = 0;
+
+const app = new Koa();
+const router = new Router();
+
+router.get("/*", async ctx => {
+	ctx.body = id++;
+});
+
+app.use(router.routes());
+
+app.listen(3000);
+
+console.log("Server running on port 3000");

backend/id/package.json

@@ -0,0 +1,12 @@
+{
+	"dependencies": {
+		"@types/koa": "^2.0.48",
+		"@types/koa-router": "^7.0.40",
+		"koa": "^2.7.0",
+		"koa-router": "^7.4.0",
+		"typescript": "^3.5.1"
+	},
+	"scripts": {
+		"start": "tsc && node dist/id.js"
+	}
+}

backend/id/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "commonjs",
+		"outDir": "dist/",
+		"strictNullChecks": true,
+		"strict": true,
+		"lib": ["esnext", "dom", "es6", "es2016", "es2017", "es2018"]
+	}
+}

backend/id/yarn.lock

@@ -0,0 +1,426 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/accepts@*":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@types/accepts/-/accepts-1.3.5.tgz#c34bec115cfc746e04fe5a059df4ce7e7b391575"
+  integrity sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/body-parser@*":
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.17.0.tgz#9f5c9d9bd04bb54be32d5eb9fc0d8c974e6cf58c"
+  integrity sha512-a2+YeUjPkztKJu5aIF2yArYFQQp8d51wZ7DavSHjFuY1mqVgidGyzEQ41JIVNy82fXj8yPgy2vJmfIywgESW6w==
+  dependencies:
+    "@types/connect" "*"
+    "@types/node" "*"
+
+"@types/connect@*":
+  version "3.4.32"
+  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.32.tgz#aa0e9616b9435ccad02bc52b5b454ffc2c70ba28"
+  integrity sha512-4r8qa0quOvh7lGD0pre62CAb1oni1OO6ecJLGCezTmhQ8Fz50Arx9RUszryR8KlgK6avuSXvviL6yWyViQABOg==
+  dependencies:
+    "@types/node" "*"
+
+"@types/cookies@*":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@types/cookies/-/cookies-0.7.2.tgz#5e0560d46ed9998082dce799af1058dd6a49780a"
+  integrity sha512-jnihWgshWystcJKrz8C9hV+Ot9lqOUyAh2RF+o3BEo6K6AS2l4zYCb9GYaBuZ3C6Il59uIGqpE3HvCun4KKeJA==
+  dependencies:
+    "@types/connect" "*"
+    "@types/express" "*"
+    "@types/keygrip" "*"
+    "@types/node" "*"
+
+"@types/express-serve-static-core@*":
+  version "4.16.7"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.16.7.tgz#50ba6f8a691c08a3dd9fa7fba25ef3133d298049"
+  integrity sha512-847KvL8Q1y3TtFLRTXcVakErLJQgdpFSaq+k043xefz9raEf0C7HalpSY7OW5PyjCnY8P7bPW5t/Co9qqp+USg==
+  dependencies:
+    "@types/node" "*"
+    "@types/range-parser" "*"
+
+"@types/express@*":
+  version "4.17.0"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.0.tgz#49eaedb209582a86f12ed9b725160f12d04ef287"
+  integrity sha512-CjaMu57cjgjuZbh9DpkloeGxV45CnMGlVd+XpG7Gm9QgVrd7KFq+X4HY0vM+2v0bczS48Wg7bvnMY5TN+Xmcfw==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "*"
+    "@types/serve-static" "*"
+
+"@types/http-assert@*":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@types/http-assert/-/http-assert-1.4.0.tgz#41d173466e396e99a14d75f7160cc997f2f9ed8b"
+  integrity sha512-TZDqvFW4nQwL9DVSNJIJu4lPLttKgzRF58COa7Vs42Ki/MrhIqUbeIw0MWn4kGLiZLXB7oCBibm7nkSjPkzfKQ==
+
+"@types/keygrip@*":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/keygrip/-/keygrip-1.0.1.tgz#ff540462d2fb4d0a88441ceaf27d287b01c3d878"
+  integrity sha1-/1QEYtL7TQqIRBzq8n0oewHD2Hg=
+
+"@types/koa-compose@*":
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/@types/koa-compose/-/koa-compose-3.2.4.tgz#76a461634a59c3e13449831708bb9b355fb1548e"
+  integrity sha512-ioou0rxkuWL+yBQYsHUQAzRTfVxAg8Y2VfMftU+Y3RA03/MzuFL0x/M2sXXj3PkfnENbHsjeHR1aMdezLYpTeA==
+  dependencies:
+    "@types/koa" "*"
+
+"@types/koa-router@^7.0.40":
+  version "7.0.40"
+  resolved "https://registry.yarnpkg.com/@types/koa-router/-/koa-router-7.0.40.tgz#9654dbc43375a0380c44c49c4504b4dbfc3e4e6a"
+  integrity sha512-YK4+WGXch6Ig9PreZ9jlHZb2onm0S1szGw0oQxWvPhoyjSHo1Tq+CpjxMmthEUIQUc9KznOGgehFarOx8XwsFw==
+  dependencies:
+    "@types/koa" "*"
+
+"@types/koa@*", "@types/koa@^2.0.48":
+  version "2.0.48"
+  resolved "https://registry.yarnpkg.com/@types/koa/-/koa-2.0.48.tgz#29162783029d3e5df8b58c55f6bf0d35f78fc39f"
+  integrity sha512-CiIUYhHlOFJhSCTmsFoFkV2t9ij1JwW26nt0W9XZoWTvmAw6zTE0+k3IAoGICtjzIfhZpZcO323NHmI1LGmdDw==
+  dependencies:
+    "@types/accepts" "*"
+    "@types/cookies" "*"
+    "@types/http-assert" "*"
+    "@types/keygrip" "*"
+    "@types/koa-compose" "*"
+    "@types/node" "*"
+
+"@types/mime@*":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.1.tgz#dc488842312a7f075149312905b5e3c0b054c79d"
+  integrity sha512-FwI9gX75FgVBJ7ywgnq/P7tw+/o1GUbtP0KzbtusLigAOgIgNISRK0ZPl4qertvXSIE8YbsVJueQ90cDt9YYyw==
+
+"@types/node@*":
+  version "12.0.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.7.tgz#4f2563bad652b2acb1722d7e7aae2b0ff62d192c"
+  integrity sha512-1YKeT4JitGgE4SOzyB9eMwO0nGVNkNEsm9qlIt1Lqm/tG2QEiSMTD4kS3aO6L+w5SClLVxALmIBESK6Mk5wX0A==
+
+"@types/range-parser@*":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
+  integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
+
+"@types/serve-static@*":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.2.tgz#f5ac4d7a6420a99a6a45af4719f4dcd8cd907a48"
+  integrity sha512-/BZ4QRLpH/bNYgZgwhKEh+5AsboDBcUdlBYgzoLX0fpj3Y2gp6EApyOlM3bK53wQS/OE1SrdSYBAbux2D1528Q==
+  dependencies:
+    "@types/express-serve-static-core" "*"
+    "@types/mime" "*"
+
+accepts@^1.3.5:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
+  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
+  dependencies:
+    mime-types "~2.1.24"
+    negotiator "0.6.2"
+
+any-promise@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
+
+cache-content-type@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-content-type/-/cache-content-type-1.0.1.tgz#035cde2b08ee2129f4a8315ea8f00a00dba1453c"
+  integrity sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==
+  dependencies:
+    mime-types "^2.1.18"
+    ylru "^1.2.0"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
+
+content-disposition@~0.5.2:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
+  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
+  dependencies:
+    safe-buffer "5.1.2"
+
+content-type@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
+cookies@~0.7.1:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/cookies/-/cookies-0.7.3.tgz#7912ce21fbf2e8c2da70cf1c3f351aecf59dadfa"
+  integrity sha512-+gixgxYSgQLTaTIilDHAdlNPZDENDQernEMiIcZpYYP14zgHsCt4Ce1FEjFtcp6GefhozebB6orvhAAWx/IS0A==
+  dependencies:
+    depd "~1.1.2"
+    keygrip "~1.0.3"
+
+debug@^3.1.0:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
+  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
+deep-equal@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+  integrity sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
+
+depd@^1.1.2, depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+destroy@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
+error-inject@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37"
+  integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc=
+
+escape-html@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+
+fresh@~0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+
+http-assert@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/http-assert/-/http-assert-1.4.1.tgz#c5f725d677aa7e873ef736199b89686cceb37878"
+  integrity sha512-rdw7q6GTlibqVVbXr0CKelfV5iY8G2HqEUkhSk297BMbSpSL8crXC+9rjKoMcZZEsksX30le6f/4ul4E28gegw==
+  dependencies:
+    deep-equal "~1.0.1"
+    http-errors "~1.7.2"
+
+http-errors@^1.3.1, http-errors@^1.6.3, http-errors@~1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
+  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+inherits@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
+is-generator-function@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.7.tgz#d2132e529bb0000a7f80794d4bdf5cd5e5813522"
+  integrity sha512-YZc5EwyO4f2kWCax7oegfuSr9mFz1ZvieNYBEjmukLxgXfBUbxAWGVF7GZf0zidYtoBl3WvC07YK0wT76a+Rtw==
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
+keygrip@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/keygrip/-/keygrip-1.0.3.tgz#399d709f0aed2bab0a059e0cdd3a5023a053e1dc"
+  integrity sha512-/PpesirAIfaklxUzp4Yb7xBper9MwP6hNRA6BGGUFCgbJ+BM5CKBtsoxinNXkLHAr+GXS1/lSlF2rP7cv5Fl+g==
+
+koa-compose@^3.0.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/koa-compose/-/koa-compose-3.2.1.tgz#a85ccb40b7d986d8e5a345b3a1ace8eabcf54de7"
+  integrity sha1-qFzLQLfZhtjlo0Wzoazo6rz1Tec=
+  dependencies:
+    any-promise "^1.1.0"
+
+koa-compose@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/koa-compose/-/koa-compose-4.1.0.tgz#507306b9371901db41121c812e923d0d67d3e877"
+  integrity sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==
+
+koa-convert@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/koa-convert/-/koa-convert-1.2.0.tgz#da40875df49de0539098d1700b50820cebcd21d0"
+  integrity sha1-2kCHXfSd4FOQmNFwC1CCDOvNIdA=
+  dependencies:
+    co "^4.6.0"
+    koa-compose "^3.0.0"
+
+koa-is-json@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/koa-is-json/-/koa-is-json-1.0.0.tgz#273c07edcdcb8df6a2c1ab7d59ee76491451ec14"
+  integrity sha1-JzwH7c3Ljfaiwat9We52SRRR7BQ=
+
+koa-router@^7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/koa-router/-/koa-router-7.4.0.tgz#aee1f7adc02d5cb31d7d67465c9eacc825e8c5e0"
+  integrity sha512-IWhaDXeAnfDBEpWS6hkGdZ1ablgr6Q6pGdXCyK38RbzuH4LkUOpPqPw+3f8l8aTDrQmBQ7xJc0bs2yV4dzcO+g==
+  dependencies:
+    debug "^3.1.0"
+    http-errors "^1.3.1"
+    koa-compose "^3.0.0"
+    methods "^1.0.1"
+    path-to-regexp "^1.1.1"
+    urijs "^1.19.0"
+
+koa@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/koa/-/koa-2.7.0.tgz#7e00843506942b9d82c6cc33749f657c6e5e7adf"
+  integrity sha512-7ojD05s2Q+hFudF8tDLZ1CpCdVZw8JQELWSkcfG9bdtoTDzMmkRF6BQBU7JzIzCCOY3xd3tftiy/loHBUYaY2Q==
+  dependencies:
+    accepts "^1.3.5"
+    cache-content-type "^1.0.0"
+    content-disposition "~0.5.2"
+    content-type "^1.0.4"
+    cookies "~0.7.1"
+    debug "~3.1.0"
+    delegates "^1.0.0"
+    depd "^1.1.2"
+    destroy "^1.0.4"
+    error-inject "^1.0.0"
+    escape-html "^1.0.3"
+    fresh "~0.5.2"
+    http-assert "^1.3.0"
+    http-errors "^1.6.3"
+    is-generator-function "^1.0.7"
+    koa-compose "^4.1.0"
+    koa-convert "^1.2.0"
+    koa-is-json "^1.0.0"
+    on-finished "^2.3.0"
+    only "~0.0.2"
+    parseurl "^1.3.2"
+    statuses "^1.5.0"
+    type-is "^1.6.16"
+    vary "^1.1.2"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+
+methods@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
+
+mime-db@1.40.0:
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
+  integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==
+
+mime-types@^2.1.18, mime-types@~2.1.24:
+  version "2.1.24"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
+  integrity sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==
+  dependencies:
+    mime-db "1.40.0"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+negotiator@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
+  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
+
+on-finished@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
+  dependencies:
+    ee-first "1.1.1"
+
+only@~0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/only/-/only-0.0.2.tgz#2afde84d03e50b9a8edc444e30610a70295edfb4"
+  integrity sha1-Kv3oTQPlC5qO3EROMGEKcCle37Q=
+
+parseurl@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+path-to-regexp@^1.1.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=
+  dependencies:
+    isarray "0.0.1"
+
+safe-buffer@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+setprototypeof@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
+  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
+
+"statuses@>= 1.5.0 < 2", statuses@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
+toidentifier@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
+
+type-is@^1.6.16:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+typescript@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.1.tgz#ba72a6a600b2158139c5dd8850f700e231464202"
+  integrity sha512-64HkdiRv1yYZsSe4xC1WVgamNigVYjlssIoaH2HcZF0+ijsk5YK2g0G34w9wJkze8+5ow4STd22AynfO6ZYYLw==
+
+urijs@^1.19.0:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.1.tgz#5b0ff530c0cbde8386f6342235ba5ca6e995d25a"
+  integrity sha512-xVrGVi94ueCJNrBSTjWqjvtgvl3cyOTThp2zaMaFNGp3F542TR6sM3f2o8RqZl+AwteClSVmoCyt0ka4RjQOQg==
+
+vary@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+ylru@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.2.1.tgz#f576b63341547989c1de7ba288760923b27fe84f"
+  integrity sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ==

backend/install.sh

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+sudo apt install jq -y
+pip install -r requirements.txt
+cd id
+npm install

backend/launch.sh

@@ -0,0 +1,50 @@
+#!/usr/bin/env bash
+pgrep -f gunicorn | xargs kill -9
+kill $(lsof -t -i:3000)
+
+cd id
+npm run start &
+sleep 5
+cd -
+
+if [[ "$1" == "" ]]; then
+    echo "JSON file argument not supplied. Exiting." 1>&2
+    exit 1
+fi
+
+# Number of GPUs 
+N_GPU=$(nvidia-smi -L | wc -l)
+
+export FILE=$1
+export GPU_PER_WORKER=`cat "$FILE" | jq -r .gpu_per_worker`
+
+# Are there enough GPUs ?
+if [[ $(($N_GPU / $GPU_PER_WORKER)) -eq 0 ]]; then
+    echo "Not enough GPUs to run this." 1>&2
+    exit 1
+fi
+
+N_WORKERS=$(($N_GPU / $GPU_PER_WORKER))
+
+echo "File $FILE"
+echo "Available GPUs $N_GPU"
+echo "GPUs per worker $GPU_PER_WORKER"
+echo "Total workers $N_WORKERS"
+
+function sys_exit ()
+{
+    echo "Ctrl-C caught...performing clean up"
+    echo "Cleaning up the servers."
+    echo $INST1
+    kill -9 $INST1
+    exit 2
+
+}
+
+trap "sys_exit" INT
+
+echo "Running server with" ${N_WORKERS} "workers."
+gunicorn --statsd-host=localhost:8125 -w ${N_WORKERS}  API --bind=0.0.0.0:6006 --statsd-prefix=transformer-autocomplete -t 600 &
+INST1=$!
+
+while true; do sleep 1000; done

backend/machine_configurations/neuralgenv2.json

@@ -0,0 +1,13 @@
+{
+    "models_to_load": [
+        "gpt2/small",
+        "gpt2/medium",
+        "gpt2/large",
+        "gpt2/arxiv-nlp",
+
+        "gpt",
+        "xlnet",
+        "distilgpt2/small"
+    ],
+    "gpu_per_worker": 1
+}

backend/machine_configurations/transformer-autocomplete.json

@@ -0,0 +1,11 @@
+{
+    "models_to_load": [
+        "ctrl",
+        "gpt2/xl"
+    ],
+    "gpu_per_worker": 2,
+    "cached_models": {
+        "gpt2/xl": "/datadrive/transformer-autocomplete/backend/gpt2-xl-local",
+        "ctrl": "/datadrive/transformer-autocomplete/backend/ctrl-local"
+    }
+}

backend/requirements.txt

@@ -0,0 +1,4 @@
+falcon
+gunicorn
+torch
+transformers

backend/run_pplm_discrim_train.py

@@ -0,0 +1,582 @@
+#! /usr/bin/env python3
+# coding=utf-8
+
+# This code is licensed under a non-commercial license.
+
+import argparse
+import csv
+import json
+import math
+import time
+
+import numpy as np
+import torch
+import torch.nn.functional as F
+import torch.optim
+import torch.optim as optim
+import torch.utils.data as data
+from nltk.tokenize.treebank import TreebankWordDetokenizer
+from torchtext import data as torchtext_data
+from torchtext import datasets
+from tqdm import tqdm, trange
+
+from transformers import GPT2Tokenizer, GPT2LMHeadModel
+
+torch.manual_seed(0)
+np.random.seed(0)
+EPSILON = 1e-10
+device = "cpu"
+example_sentence = "This is incredible! I love it, this is the best chicken I have ever had."
+max_length_seq = 100
+
+
+class ClassificationHead(torch.nn.Module):
+    """Classification Head for  transformer encoders"""
+
+    def __init__(self, class_size, embed_size):
+        super(ClassificationHead, self).__init__()
+        self.class_size = class_size
+        self.embed_size = embed_size
+        # self.mlp1 = torch.nn.Linear(embed_size, embed_size)
+        # self.mlp2 = (torch.nn.Linear(embed_size, class_size))
+        self.mlp = torch.nn.Linear(embed_size, class_size)
+
+    def forward(self, hidden_state):
+        # hidden_state = F.relu(self.mlp1(hidden_state))
+        # hidden_state = self.mlp2(hidden_state)
+        logits = self.mlp(hidden_state)
+        return logits
+
+
+class Discriminator(torch.nn.Module):
+    """Transformer encoder followed by a Classification Head"""
+
+    def __init__(
+            self,
+            class_size,
+            pretrained_model="gpt2-medium",
+            cached_mode=False
+    ):
+        super(Discriminator, self).__init__()
+        self.tokenizer = GPT2Tokenizer.from_pretrained(pretrained_model)
+        self.encoder = GPT2LMHeadModel.from_pretrained(pretrained_model)
+        self.embed_size = self.encoder.transformer.config.hidden_size
+        self.classifier_head = ClassificationHead(
+            class_size=class_size,
+            embed_size=self.embed_size
+        )
+        self.cached_mode = cached_mode
+
+    def get_classifier(self):
+        return self.classifier_head
+
+    def train_custom(self):
+        for param in self.encoder.parameters():
+            param.requires_grad = False
+        self.classifier_head.train()
+
+    def avg_representation(self, x):
+        mask = x.ne(0).unsqueeze(2).repeat(
+            1, 1, self.embed_size
+        ).float().to(device).detach()
+        hidden, _ = self.encoder.transformer(x)
+        masked_hidden = hidden * mask
+        avg_hidden = torch.sum(masked_hidden, dim=1) / (
+                torch.sum(mask, dim=1).detach() + EPSILON
+        )
+        return avg_hidden
+
+    def forward(self, x):
+        if self.cached_mode:
+            avg_hidden = x.to(device)
+        else:
+            avg_hidden = self.avg_representation(x.to(device))
+
+        logits = self.classifier_head(avg_hidden)
+        probs = F.log_softmax(logits, dim=-1)
+
+        return probs
+
+
+class Dataset(data.Dataset):
+    def __init__(self, X, y):
+        """Reads source and target sequences from txt files."""
+        self.X = X
+        self.y = y
+
+    def __len__(self):
+        return len(self.X)
+
+    def __getitem__(self, index):
+        """Returns one data pair (source and target)."""
+        data = {}
+        data["X"] = self.X[index]
+        data["y"] = self.y[index]
+        return data
+
+
+def collate_fn(data):
+    def pad_sequences(sequences):
+        lengths = [len(seq) for seq in sequences]
+
+        padded_sequences = torch.zeros(
+            len(sequences),
+            max(lengths)
+        ).long()  # padding value = 0
+
+        for i, seq in enumerate(sequences):
+            end = lengths[i]
+            padded_sequences[i, :end] = seq[:end]
+
+        return padded_sequences, lengths
+
+    item_info = {}
+    for key in data[0].keys():
+        item_info[key] = [d[key] for d in data]
+
+    x_batch, _ = pad_sequences(item_info["X"])
+    y_batch = torch.tensor(item_info["y"], dtype=torch.long)
+
+    return x_batch, y_batch
+
+
+def cached_collate_fn(data):
+    item_info = {}
+    for key in data[0].keys():
+        item_info[key] = [d[key] for d in data]
+
+    x_batch = torch.cat(item_info["X"], 0)
+    y_batch = torch.tensor(item_info["y"], dtype=torch.long)
+
+    return x_batch, y_batch
+
+
+def train_epoch(data_loader, discriminator, optimizer,
+                epoch=0, log_interval=10):
+    samples_so_far = 0
+    discriminator.train_custom()
+    for batch_idx, (input_t, target_t) in enumerate(data_loader):
+        input_t, target_t = input_t.to(device), target_t.to(device)
+
+        optimizer.zero_grad()
+
+        output_t = discriminator(input_t)
+        loss = F.nll_loss(output_t, target_t)
+        loss.backward(retain_graph=True)
+        optimizer.step()
+
+        samples_so_far += len(input_t)
+
+        if batch_idx % log_interval == 0:
+            print(
+                "Train Epoch: {} [{}/{} ({:.0f}%)]\tLoss: {:.6f}".format(
+                    epoch + 1,
+                    samples_so_far, len(data_loader.dataset),
+                    100 * samples_so_far / len(data_loader.dataset), loss.item()
+                )
+            )
+
+
+def evaluate_performance(data_loader, discriminator):
+    discriminator.eval()
+    test_loss = 0
+    correct = 0
+    with torch.no_grad():
+        for input_t, target_t in data_loader:
+            input_t, target_t = input_t.to(device), target_t.to(device)
+            output_t = discriminator(input_t)
+            # sum up batch loss
+            test_loss += F.nll_loss(output_t, target_t, reduction="sum").item()
+            # get the index of the max log-probability
+            pred_t = output_t.argmax(dim=1, keepdim=True)
+            correct += pred_t.eq(target_t.view_as(pred_t)).sum().item()
+
+    test_loss /= len(data_loader.dataset)
+
+    print(
+        "Performance on test set: "
+        "Average loss: {:.4f}, Accuracy: {}/{} ({:.0f}%)".format(
+            test_loss, correct, len(data_loader.dataset),
+            100. * correct / len(data_loader.dataset)
+        )
+    )
+
+
+def predict(input_sentence, model, classes, cached=False):
+    input_t = model.tokenizer.encode(input_sentence)
+    input_t = torch.tensor([input_t], dtype=torch.long, device=device)
+    if cached:
+        input_t = model.avg_representation(input_t)
+
+    log_probs = model(input_t).data.cpu().numpy().flatten().tolist()
+    print("Input sentence:", input_sentence)
+    print("Predictions:", ", ".join(
+        "{}: {:.4f}".format(c, math.exp(log_prob)) for c, log_prob in
+        zip(classes, log_probs)
+    ))
+
+
+def get_cached_data_loader(dataset, batch_size, discriminator, shuffle=False):
+    data_loader = torch.utils.data.DataLoader(dataset=dataset,
+                                              batch_size=batch_size,
+                                              collate_fn=collate_fn)
+
+    xs = []
+    ys = []
+    for batch_idx, (x, y) in enumerate(tqdm(data_loader, ascii=True)):
+        with torch.no_grad():
+            x = x.to(device)
+            avg_rep = discriminator.avg_representation(x).cpu().detach()
+            avg_rep_list = torch.unbind(avg_rep.unsqueeze(1))
+            xs += avg_rep_list
+            ys += y.cpu().numpy().tolist()
+
+    data_loader = torch.utils.data.DataLoader(
+        dataset=Dataset(xs, ys),
+        batch_size=batch_size,
+        shuffle=shuffle,
+        collate_fn=cached_collate_fn)
+
+    return data_loader
+
+
+def train_discriminator(
+        dataset, dataset_fp=None, pretrained_model="gpt2-medium",
+        epochs=10, batch_size=64, log_interval=10,
+        save_model=False, cached=False, no_cuda=False):
+    global device
+    device = "cuda" if torch.cuda.is_available() and not no_cuda else "cpu"
+
+    print("Preprocessing {} dataset...".format(dataset))
+    start = time.time()
+
+    if dataset == "SST":
+        idx2class = ["positive", "negative", "very positive", "very negative",
+                     "neutral"]
+        class2idx = {c: i for i, c in enumerate(idx2class)}
+
+        discriminator = Discriminator(
+            class_size=len(idx2class),
+            pretrained_model=pretrained_model,
+            cached_mode=cached
+        ).to(device)
+
+        text = torchtext_data.Field()
+        label = torchtext_data.Field(sequential=False)
+        train_data, val_data, test_data = datasets.SST.splits(
+            text,
+            label,
+            fine_grained=True,
+            train_subtrees=True,
+        )
+
+        x = []
+        y = []
+        for i in trange(len(train_data), ascii=True):
+            seq = TreebankWordDetokenizer().detokenize(
+                vars(train_data[i])["text"]
+            )
+            seq = discriminator.tokenizer.encode(seq)
+            seq = torch.tensor([50256] + seq, device=device, dtype=torch.long)
+            x.append(seq)
+            y.append(class2idx[vars(train_data[i])["label"]])
+        train_dataset = Dataset(x, y)
+
+        test_x = []
+        test_y = []
+        for i in trange(len(test_data), ascii=True):
+            seq = TreebankWordDetokenizer().detokenize(
+                vars(test_data[i])["text"]
+            )
+            seq = discriminator.tokenizer.encode(seq)
+            seq = torch.tensor([50256] + seq, device=device, dtype=torch.long)
+            test_x.append(seq)
+            test_y.append(class2idx[vars(test_data[i])["label"]])
+        test_dataset = Dataset(test_x, test_y)
+
+        discriminator_meta = {
+            "class_size": len(idx2class),
+            "embed_size": discriminator.embed_size,
+            "pretrained_model": pretrained_model,
+            "class_vocab": class2idx,
+            "default_class": 2,
+        }
+
+    elif dataset == "clickbait":
+        idx2class = ["non_clickbait", "clickbait"]
+        class2idx = {c: i for i, c in enumerate(idx2class)}
+
+        discriminator = Discriminator(
+            class_size=len(idx2class),
+            pretrained_model=pretrained_model,
+            cached_mode=cached
+        ).to(device)
+
+        with open("datasets/clickbait/clickbait_train_prefix.txt") as f:
+            data = []
+            for i, line in enumerate(f):
+                try:
+                    data.append(eval(line))
+                except:
+                    print("Error evaluating line {}: {}".format(
+                        i, line
+                    ))
+                    continue
+        x = []
+        y = []
+        with open("datasets/clickbait/clickbait_train_prefix.txt") as f:
+            for i, line in enumerate(tqdm(f, ascii=True)):
+                try:
+                    d = eval(line)
+                    seq = discriminator.tokenizer.encode(d["text"])
+
+                    if len(seq) < max_length_seq:
+                        seq = torch.tensor(
+                            [50256] + seq, device=device, dtype=torch.long
+                        )
+                    else:
+                        print("Line {} is longer than maximum length {}".format(
+                            i, max_length_seq
+                        ))
+                        continue
+                    x.append(seq)
+                    y.append(d["label"])
+                except:
+                    print("Error evaluating / tokenizing"
+                          " line {}, skipping it".format(i))
+                    pass
+
+        full_dataset = Dataset(x, y)
+        train_size = int(0.9 * len(full_dataset))
+        test_size = len(full_dataset) - train_size
+        train_dataset, test_dataset = torch.utils.data.random_split(
+            full_dataset, [train_size, test_size]
+        )
+
+        discriminator_meta = {
+            "class_size": len(idx2class),
+            "embed_size": discriminator.embed_size,
+            "pretrained_model": pretrained_model,
+            "class_vocab": class2idx,
+            "default_class": 1,
+        }
+
+    elif dataset == "toxic":
+        idx2class = ["non_toxic", "toxic"]
+        class2idx = {c: i for i, c in enumerate(idx2class)}
+
+        discriminator = Discriminator(
+            class_size=len(idx2class),
+            pretrained_model=pretrained_model,
+            cached_mode=cached
+        ).to(device)
+
+        x = []
+        y = []
+        with open("datasets/toxic/toxic_train.txt") as f:
+            for i, line in enumerate(tqdm(f, ascii=True)):
+                try:
+                    d = eval(line)
+                    seq = discriminator.tokenizer.encode(d["text"])
+
+                    if len(seq) < max_length_seq:
+                        seq = torch.tensor(
+                            [50256] + seq, device=device, dtype=torch.long
+                        )
+                    else:
+                        print("Line {} is longer than maximum length {}".format(
+                            i, max_length_seq
+                        ))
+                        continue
+                    x.append(seq)
+                    y.append(int(np.sum(d["label"]) > 0))
+                except:
+                    print("Error evaluating / tokenizing"
+                          " line {}, skipping it".format(i))
+                    pass
+
+        full_dataset = Dataset(x, y)
+        train_size = int(0.9 * len(full_dataset))
+        test_size = len(full_dataset) - train_size
+        train_dataset, test_dataset = torch.utils.data.random_split(
+            full_dataset, [train_size, test_size]
+        )
+
+        discriminator_meta = {
+            "class_size": len(idx2class),
+            "embed_size": discriminator.embed_size,
+            "pretrained_model": pretrained_model,
+            "class_vocab": class2idx,
+            "default_class": 0,
+        }
+
+    else:  # if dataset == "generic":
+        # This assumes the input dataset is a TSV with the following structure:
+        # class \t text
+
+        if dataset_fp is None:
+            raise ValueError("When generic dataset is selected, "
+                             "dataset_fp needs to be specified aswell.")
+
+        classes = set()
+        with open(dataset_fp) as f:
+            csv_reader = csv.reader(f, delimiter="\t")
+            for row in tqdm(csv_reader, ascii=True):
+                if row:
+                    classes.add(row[0])
+
+        idx2class = sorted(classes)
+        class2idx = {c: i for i, c in enumerate(idx2class)}
+
+        discriminator = Discriminator(
+            class_size=len(idx2class),
+            pretrained_model=pretrained_model,
+            cached_mode=cached
+        ).to(device)
+
+        x = []
+        y = []
+        with open(dataset_fp) as f:
+            csv_reader = csv.reader(f, delimiter="\t")
+            for i, row in enumerate(tqdm(csv_reader, ascii=True)):
+                if row:
+                    label = row[0]
+                    text = row[1]
+
+                    try:
+                        seq = discriminator.tokenizer.encode(text)
+                        if (len(seq) < max_length_seq):
+                            seq = torch.tensor(
+                                [50256] + seq,
+                                device=device,
+                                dtype=torch.long
+                            )
+
+                        else:
+                            print(
+                                "Line {} is longer than maximum length {}".format(
+                                    i, max_length_seq
+                                ))
+                            continue
+
+                        x.append(seq)
+                        y.append(class2idx[label])
+
+                    except:
+                        print("Error tokenizing line {}, skipping it".format(i))
+                        pass
+
+        full_dataset = Dataset(x, y)
+        train_size = int(0.9 * len(full_dataset))
+        test_size = len(full_dataset) - train_size
+        train_dataset, test_dataset = torch.utils.data.random_split(
+            full_dataset,
+            [train_size, test_size]
+        )
+
+        discriminator_meta = {
+            "class_size": len(idx2class),
+            "embed_size": discriminator.embed_size,
+            "pretrained_model": pretrained_model,
+            "class_vocab": class2idx,
+            "default_class": 0,
+        }
+
+    end = time.time()
+    print("Preprocessed {} data points".format(
+        len(train_dataset) + len(test_dataset))
+    )
+    print("Data preprocessing took: {:.3f}s".format(end - start))
+
+    if cached:
+        print("Building representation cache...")
+
+        start = time.time()
+
+        train_loader = get_cached_data_loader(
+            train_dataset, batch_size, discriminator, shuffle=True
+        )
+
+        test_loader = get_cached_data_loader(
+            test_dataset, batch_size, discriminator
+        )
+
+        end = time.time()
+        print("Building representation cache took: {:.3f}s".format(end - start))
+
+    else:
+        train_loader = torch.utils.data.DataLoader(dataset=train_dataset,
+                                                   batch_size=batch_size,
+                                                   shuffle=True,
+                                                   collate_fn=collate_fn)
+        test_loader = torch.utils.data.DataLoader(dataset=test_dataset,
+                                                  batch_size=batch_size,
+                                                  collate_fn=collate_fn)
+
+    if save_model:
+        with open("{}_classifier_head_meta.json".format(dataset),
+                  "w") as meta_file:
+            json.dump(discriminator_meta, meta_file)
+
+    optimizer = optim.Adam(discriminator.parameters(), lr=0.0001)
+
+    for epoch in range(epochs):
+        start = time.time()
+        print("\nEpoch", epoch + 1)
+
+        train_epoch(
+            discriminator=discriminator,
+            data_loader=train_loader,
+            optimizer=optimizer,
+            epoch=epoch,
+            log_interval=log_interval
+        )
+        evaluate_performance(
+            data_loader=test_loader,
+            discriminator=discriminator
+        )
+
+        end = time.time()
+        print("Epoch took: {:.3f}s".format(end - start))
+
+        print("\nExample prediction")
+        predict(example_sentence, discriminator, idx2class, cached)
+
+        if save_model:
+            # torch.save(discriminator.state_dict(),
+            #           "{}_discriminator_{}.pt".format(
+            #               args.dataset, epoch + 1
+            #               ))
+            torch.save(discriminator.get_classifier().state_dict(),
+                       "{}_classifier_head_epoch_{}.pt".format(dataset,
+                                                               epoch + 1))
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(
+        description="Train a discriminator on top of GPT-2 representations")
+    parser.add_argument("--dataset", type=str, default="SST",
+                        choices=("SST", "clickbait", "toxic", "generic"),
+                        help="dataset to train the discriminator on."
+                             "In case of generic, the dataset is expected"
+                             "to be a TSBV file with structure: class \\t text")
+    parser.add_argument("--dataset_fp", type=str, default="",
+                        help="File path of the dataset to use. "
+                             "Needed only in case of generic datadset")
+    parser.add_argument("--pretrained_model", type=str, default="gpt2-medium",
+                        help="Pretrained model to use as encoder")
+    parser.add_argument("--epochs", type=int, default=10, metavar="N",
+                        help="Number of training epochs")
+    parser.add_argument("--batch_size", type=int, default=64, metavar="N",
+                        help="input batch size for training (default: 64)")
+    parser.add_argument("--log_interval", type=int, default=10, metavar="N",
+                        help="how many batches to wait before logging training status")
+    parser.add_argument("--save_model", action="store_true",
+                        help="whether to save the model")
+    parser.add_argument("--cached", action="store_true",
+                        help="whether to cache the input representations")
+    parser.add_argument("--no_cuda", action="store_true",
+                        help="use to turn off cuda")
+    args = parser.parse_args()
+
+    train_discriminator(**(vars(args)))

entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+defined_envs=$(printf '${%s} ' $(awk "END { for (name in ENVIRON) { print ( name ~ /NGINX_/ ) ? name : \"\" } }" < /dev/null ))
+
+envsubst "$defined_envs" < nginx.conf > /etc/nginx/nginx.conf
+
+nginx && node server/dist/server.js

front/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+	// Configure glob patterns for excluding files and folders in searches. Inherits all glob patterns from the files.exclude setting.
+	"search.exclude": {
+		"dist": true,
+		"build": true,
+	}
+}

front/assets/github-buttons.js

@@ -0,0 +1,9 @@
+/*!
+ * github-buttons v2.2.10
+ * (c) 2019 なつき
+ * @license BSD-2-Clause
+ */
+/**
+ * Julien: just modified to add a `transform: scale(1.5);` on the .widget
+ */
+!function(){"use strict";var e=window.document,t=e.location,o=window.encodeURIComponent,r=window.decodeURIComponent,n=window.Math,a=window.HTMLElement,i=window.XMLHttpRequest,l="https://unpkg.com/github-buttons@2.2.10/dist/buttons.html",c=i&&i.prototype&&"withCredentials"in i.prototype,d=c&&a&&a.prototype.attachShadow&&!a.prototype.attachShadow.prototype,s=function(e,t,o){e.addEventListener?e.addEventListener(t,o):e.attachEvent("on"+t,o)},u=function(e,t,o){e.removeEventListener?e.removeEventListener(t,o):e.detachEvent("on"+t,o)},h=function(e,t,o){var r=function(n){return u(e,t,r),o(n)};s(e,t,r)},f=function(e,t,o){var r=function(n){if(t.test(e.readyState))return u(e,"readystatechange",r),o(n)};s(e,"readystatechange",r)},p=function(e){return function(t,o,r){var n=e.createElement(t);if(o)for(var a in o){var i=o[a];null!=i&&(null!=n[a]?n[a]=i:n.setAttribute(a,i))}if(r)for(var l=0,c=r.length;l<c;l++){var d=r[l];n.appendChild("string"==typeof d?e.createTextNode(d):d)}return n}},g=p(e),b=function(e){var t;return function(){t||(t=1,e.apply(this,arguments))}},m="body{margin:0}a{color:#24292e;text-decoration:none;outline:0}.octicon{display:inline-block;vertical-align:text-top;fill:currentColor}.widget{ transform: scale(1.5); display:inline-block;overflow:hidden;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;font-size:0;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn,.social-count{display:inline-block;height:14px;padding:2px 5px;font-size:11px;font-weight:600;line-height:14px;vertical-align:bottom;cursor:pointer;border:1px solid #c5c9cc;border-radius:0.25em}.btn{background-color:#eff3f6;background-image:-webkit-linear-gradient(top, #fafbfc, #eff3f6 90%);background-image:-moz-linear-gradient(top, #fafbfc, #eff3f6 90%);background-image:linear-gradient(180deg, #fafbfc, #eff3f6 90%);background-position:-1px -1px;background-repeat:repeat-x;background-size:110% 110%;border-color:rgba(27,31,35,0.2);-ms-filter:\"progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFFAFBFC', endColorstr='#FFEEF2F5')\";*filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFFAFBFC', endColorstr='#FFEEF2F5')}.btn:active{background-color:#e9ecef;background-image:none;border-color:#a5a9ac;border-color:rgba(27,31,35,0.35);box-shadow:inset 0 0.15em 0.3em rgba(27,31,35,0.15)}.btn:focus,.btn:hover{background-color:#e6ebf1;background-image:-webkit-linear-gradient(top, #f0f3f6, #e6ebf1 90%);background-image:-moz-linear-gradient(top, #f0f3f6, #e6ebf1 90%);background-image:linear-gradient(180deg, #f0f3f6, #e6ebf1 90%);border-color:#a5a9ac;border-color:rgba(27,31,35,0.35);-ms-filter:\"progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF0F3F6', endColorstr='#FFE5EAF0')\";*filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF0F3F6', endColorstr='#FFE5EAF0')}.social-count{position:relative;margin-left:5px;background-color:#fff}.social-count:focus,.social-count:hover{color:#0366d6}.social-count b,.social-count i{position:absolute;top:50%;left:0;display:block;width:0;height:0;margin:-4px 0 0 -4px;border:solid transparent;border-width:4px 4px 4px 0;_line-height:0;_border-top-color:red !important;_border-bottom-color:red !important;_border-left-color:red !important;_filter:chroma(color=red)}.social-count b{border-right-color:#c5c9cc}.social-count i{margin-left:-3px;border-right-color:#fff}.lg .btn,.lg .social-count{height:16px;padding:5px 10px;font-size:12px;line-height:16px}.lg .social-count{margin-left:6px}.lg .social-count b,.lg .social-count i{margin:-5px 0 0 -5px;border-width:5px 5px 5px 0}.lg .social-count i{margin-left:-4px}\n",v={"mark-github":{width:16,height:16,path:'<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>'},eye:{width:16,height:16,path:'<path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/>'},star:{width:14,height:16,path:'<path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/>'},"repo-forked":{width:10,height:16,path:'<path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/>'},"issue-opened":{width:14,height:16,path:'<path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/>'},"cloud-download":{width:16,height:16,path:'<path fill-rule="evenodd" d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06 14.08 4 12 4z"/>'}},w={},x=function(e,t,o){var r=p(e.ownerDocument),n=e.appendChild(r("style",{type:"text/css"}));n.styleSheet?n.styleSheet.cssText=m:n.appendChild(e.ownerDocument.createTextNode(m));var a,l,d=r("a",{className:"btn",href:t.href,target:"_blank",innerHTML:(a=t["data-icon"],l=/^large$/i.test(t["data-size"])?16:14,a=(""+a).toLowerCase().replace(/^octicon-/,""),{}.hasOwnProperty.call(v,a)||(a="mark-github"),'<svg version="1.1" width="'+l*v[a].width/v[a].height+'" height="'+l+'" viewBox="0 0 '+v[a].width+" "+v[a].height+'" class="octicon octicon-'+a+'" aria-hidden="true">'+v[a].path+"</svg>"),"aria-label":t["aria-label"]||void 0},[" ",r("span",{},[t["data-text"]||""])]);/\.github\.com$/.test("."+d.hostname)?/^https?:\/\/((gist\.)?github\.com\/[^\/?#]+\/[^\/?#]+\/archive\/|github\.com\/[^\/?#]+\/[^\/?#]+\/releases\/download\/|codeload\.github\.com\/)/.test(d.href)&&(d.target="_top"):(d.href="#",d.target="_self");var u,h,g,x,y=e.appendChild(r("div",{className:"widget"+(/^large$/i.test(t["data-size"])?" lg":"")},[d]));/^(true|1)$/i.test(t["data-show-count"])&&"github.com"===d.hostname&&(u=d.pathname.replace(/^(?!\/)/,"/").match(/^\/([^\/?#]+)(?:\/([^\/?#]+)(?:\/(?:(subscription)|(fork)|(issues)|([^\/?#]+)))?)?(?:[\/?#]|$)/))&&!u[6]?(u[2]?(h="/repos/"+u[1]+"/"+u[2],u[3]?(x="subscribers_count",g="watchers"):u[4]?(x="forks_count",g="network"):u[5]?(x="open_issues_count",g="issues"):(x="stargazers_count",g="stargazers")):(h="/users/"+u[1],g=x="followers"),function(e,t){var o=w[e]||(w[e]=[]);if(!(o.push(t)>1)){var r=b(function(){for(delete w[e];t=o.shift();)t.apply(null,arguments)});if(c){var n=new i;s(n,"abort",r),s(n,"error",r),s(n,"load",function(){var e;try{e=JSON.parse(n.responseText)}catch(e){return void r(e)}r(200!==n.status,e)}),n.open("GET",e),n.send()}else{var a=this||window;a._=function(e){a._=null,r(200!==e.meta.status,e.data)};var l=p(a.document)("script",{async:!0,src:e+(/\?/.test(e)?"&":"?")+"callback=_"}),d=function(){a._&&a._({meta:{}})};s(l,"load",d),s(l,"error",d),l.readyState&&f(l,/de|m/,d),a.document.getElementsByTagName("head")[0].appendChild(l)}}}.call(this,"https://api.github.com"+h,function(e,t){if(!e){var n=t[x];y.appendChild(r("a",{className:"social-count",href:t.html_url+"/"+g,target:"_blank","aria-label":n+" "+x.replace(/_count$/,"").replace("_"," ").slice(0,n<2?-1:void 0)+" on GitHub"},[r("b"),r("i"),r("span",{},[(""+n).replace(/\B(?=(\d{3})+(?!\d))/g,",")])]))}o&&o(y)})):o&&o(y)},y=window.devicePixelRatio||1,C=function(e){return(y>1?n.ceil(n.round(e*y)/y*2)/2:n.ceil(e))||0},F=function(e,t){e.style.width=t[0]+"px",e.style.height=t[1]+"px"},k=function(t,r){if(null!=t&&null!=r)if(t.getAttribute&&(t=function(e){for(var t={href:e.href,title:e.title,"aria-label":e.getAttribute("aria-label")},o=["icon","text","size","show-count"],r=0,n=o.length;r<n;r++){var a="data-"+o[r];t[a]=e.getAttribute(a)}return null==t["data-text"]&&(t["data-text"]=e.textContent||e.innerText),t}(t)),d){var a=g("span",{title:t.title||void 0});x(a.attachShadow({mode:"closed"}),t,function(){r(a)})}else{var i=g("iframe",{src:"javascript:0",title:t.title||void 0,allowtransparency:!0,scrolling:"no",frameBorder:0});F(i,[0,0]),i.style.border="none";var c=function(){var a,d=i.contentWindow;try{a=d.document.body}catch(t){return void e.body.appendChild(i.parentNode.removeChild(i))}u(i,"load",c),x.call(d,a,t,function(e){var a=function(e){var t=e.offsetWidth,o=e.offsetHeight;if(e.getBoundingClientRect){var r=e.getBoundingClientRect();t=n.max(t,C(r.width)),o=n.max(o,C(r.height))}return[t,o]}(e);i.parentNode.removeChild(i),h(i,"load",function(){F(i,a)}),i.src=l+"#"+(i.name=function(e){var t=[];for(var r in e){var n=e[r];null!=n&&t.push(o(r)+"="+o(n))}return t.join("&")}(t)),r(i)})};s(i,"load",c),e.body.appendChild(i)}};t.protocol+"//"+t.host+t.pathname===l?x(e.body,function(e){for(var t={},o=e.split("&"),n=0,a=o.length;n<a;n++){var i=o[n];if(""!==i){var l=i.split("=");t[r(l[0])]=null!=l[1]?r(l.slice(1).join("=")):void 0}}return t}(window.name||t.hash.replace(/^#/,""))):function(t){if(/m/.test(e.readyState)||!/g/.test(e.readyState)&&!e.documentElement.doScroll)setTimeout(t);else if(e.addEventListener){var o=b(t);h(e,"DOMContentLoaded",o),h(window,"load",o)}else f(e,/m/,t)}(function(){for(var t=e.querySelectorAll?e.querySelectorAll("a.github-button"):function(){for(var t=[],o=e.getElementsByTagName("a"),r=0,n=o.length;r<n;r++)~(" "+o[r].className+" ").replace(/[ \t\n\f\r]+/g," ").indexOf(" github-button ")&&t.push(o[r]);return t}(),o=0,r=t.length;o<r;o++)!function(e){k(e,function(t){e.parentNode.replaceChild(t,e)})}(t[o])})}();

front/js-src/Api.ts

@@ -0,0 +1,153 @@
+import { c } from './lib/Log';
+
+
+interface AutocompleteOutput {
+	sentences: {
+		value: string;
+		time:  number;
+	}[];
+	time: number;
+}
+
+export class Api {
+	
+	private static ENDPOINT = 
+		// `http://coconut-proxy.huggingface.test`
+		// `http://coconuthf.eastus.cloudapp.azure.com:6006`
+		// "http://localhost:6006"
+		`https://transformer.huggingface.co`
+	;
+	static shared = new Api();
+	
+	private path(p: string): string {
+		return `${Api.ENDPOINT}/${p}`;
+	}
+	
+	private async postAutocomplete(
+		params: {
+			context:         string;
+			model_size?:     string; /// 'small' | 'medium',
+			top_p?:          number; /// float between 0 and 1
+			temperature?:    number; /// float between 0 and 100
+			step_size?:      number;
+			kl_scale?:       number;
+			gm_scale?:       number;
+			num_iterations?: number;
+			gen_length?:     number;
+			max_time?:       number; /// <- if we want to limit the response time. (in sec)
+			bow_or_discrim?: string;
+			use_sampling?:   boolean;
+		}
+	): Promise<AutocompleteOutput> {
+		
+		const path = this.path(`autocomplete/${params.model_size || ""}`);
+		
+		const response = await fetch(path, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(params),
+		});
+		return await response.json() as AutocompleteOutput;
+	}
+	
+	/**
+	 * Demo-specific helpers
+	 */
+	async postWithSettings(
+		params: {
+			context:     string;
+		}
+	): Promise<AutocompleteOutput> {
+		/// Retrieve all settings params then launch the request.
+		const model_size = 
+			document.querySelector('.decoder-settings .setting.model_size .js-val')!.textContent
+		|| undefined;
+		
+		const parseSliderVal = (sel: string): number | undefined => {
+			const x = document.querySelector(sel);
+			if (x && x.textContent) {
+				return Number(x.textContent);
+			}
+			return undefined;
+		};
+		
+		const top_p            = parseSliderVal('.decoder-settings .setting.top_p .js-val');
+		const temperature      = parseSliderVal('.decoder-settings .setting.temperature .js-val');
+		const step_size        = parseSliderVal('.decoder-settings .setting.step_size .js-val');
+		const kl_scale         = parseSliderVal('.decoder-settings .setting.kl_scale .js-val');
+		const gm_scale         = parseSliderVal('.decoder-settings .setting.gm_scale .js-val');
+		const num_iterations   = parseSliderVal('.decoder-settings .setting.num_iterations .js-val');
+		const gen_length       = parseSliderVal('.decoder-settings .setting.gen_length .js-val');
+		const max_time         = parseSliderVal('.decoder-settings .setting.max_time .js-val');
+		
+		const bow_or_discrim = (
+			document.querySelector<HTMLInputElement>('.decoder-settings input[name=bow_or_discrim]:checked') || {}
+		).value;
+		const use_sampling = (
+			document.querySelector<HTMLInputElement>('.decoder-settings input[name=use_sampling]') || {}
+		).checked;
+		
+		return this.postAutocomplete({
+			...params,
+			model_size,
+			top_p,
+			temperature,
+			step_size,
+			kl_scale,
+			gm_scale,
+			num_iterations,
+			gen_length,
+			max_time,
+			bow_or_discrim,
+			use_sampling,
+		});
+	}
+	
+	/**
+	 * Edit AJAX endpoint
+	 * 
+	 * Contrary to the autocomplete endpoint,
+	 * this is on server,
+	 * not on backend.
+	 */
+	async postEdit(body: any): Promise<boolean> {
+		const doc = (<any>window).doc as { [index: string]: string };
+		if (!doc || !doc.longId) {
+			throw new Error(`invalid doc`);
+		}
+		
+		const path = `/edit/${doc.model}/${doc.longId}/${doc.shortId}`;
+		
+		const response = await fetch(path, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(body),
+		});
+		return response.ok;
+	}
+	
+	/**
+	 * Duplicate AJAX endpoint
+	 * 
+	 * Contrary to the autocomplete endpoint,
+	 * this is on server,
+	 * not on backend.
+	 */
+	async postDuplicate(): Promise<string> {
+		const doc = (<any>window).doc as { [index: string]: string };
+		if (!doc || !doc.shortId) {
+			throw new Error(`invalid doc`);
+		}
+		
+		const path = `/duplicate/${doc.shortId}`;
+		const response = await fetch(path, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+		});
+		const url = await response.text();
+		c.log('[new url]', url);
+		
+		return url;
+	}
+}
+

front/js-src/Mention.ts

@@ -0,0 +1,441 @@
+
+interface Datum {
+	id:    string;
+	value: string;
+}
+
+
+export class Mention {
+	static Keys = {
+		TAB:    9,
+		ENTER:  13,
+		ESCAPE: 27,
+		UP:     38,
+		DOWN:   40,
+	};
+	static numberIsNaN = (x: any) => x !== x;
+	private isOpen            = false;
+	/**
+	 * index of currently selected item.
+	 */
+	private itemIndex         = 0;
+	private mentionCharPos: number | undefined = undefined;
+	private cursorPos:      number | undefined = undefined;
+	private values            = [] as Datum[];
+	private suspendMouseEnter = false;
+	private options = {
+		source: (searchTerm: string, renderList: Function, mentionChar: string) => {},
+		renderItem: (item: Datum, searchTerm: string) => {
+			return `${item.value}`;
+		},
+		onSelect: (item: DOMStringMap, insertItem: (item: DOMStringMap) => void) => {
+			insertItem(item);
+		},
+		mentionDenotationChars: ['@'],
+		showDenotationChar: true,
+		allowedChars:           /^[a-zA-Z0-9_]*$/,
+		minChars:               0,
+		maxChars:               31,
+		offsetTop:              2,
+		offsetLeft:             0,
+		/**
+		 * Whether or not the denotation character(s) should be isolated. For example, to avoid mentioning in an email.
+		 */
+		isolateCharacter:       false,
+		fixMentionsToQuill:     false,
+		defaultMenuOrientation: 'bottom',
+		dataAttributes:         ['id', 'value', 'denotationChar', 'link', 'target'],
+		linkTarget:             '_blank',
+		onOpen:  () => true,
+		onClose: () => true,
+		// Style options
+		listItemClass:         'ql-mention-list-item',
+		mentionContainerClass: 'ql-mention-list-container',
+		mentionListClass:      'ql-mention-list',
+	};
+	/// HTML elements
+	private mentionContainer = document.createElement('div');
+	private mentionList      = document.createElement('ul');
+	
+	
+	constructor(
+		private quill: Quill,
+	) {
+		this.mentionContainer.className = this.options.mentionContainerClass;
+		this.mentionContainer.style.cssText = 'display: none; position: absolute;';
+		this.mentionContainer.onmousemove = this.onContainerMouseMove.bind(this);
+		
+		if (this.options.fixMentionsToQuill) {
+			this.mentionContainer.style.width = 'auto';
+		}
+		
+		this.mentionList.className = this.options.mentionListClass;
+		this.mentionContainer.appendChild(this.mentionList);
+		
+		this.quill.container.appendChild(this.mentionContainer);
+		
+		quill.on('text-change', this.onTextChange.bind(this));
+		quill.on('selection-change', this.onSelectionChange.bind(this));
+		
+		quill.keyboard.addBinding({
+			key: Mention.Keys.ENTER,
+		}, this.selectHandler.bind(this));
+		quill.keyboard.bindings[Mention.Keys.ENTER].unshift(
+			quill.keyboard.bindings[Mention.Keys.ENTER].pop()
+		);
+		/// ^^ place it at beginning of bindings.
+		
+		quill.keyboard.addBinding({
+			key: Mention.Keys.ESCAPE,
+		}, this.escapeHandler.bind(this));
+		
+		quill.keyboard.addBinding({
+			key: Mention.Keys.UP,
+		}, this.upHandler.bind(this));
+		
+		quill.keyboard.addBinding({
+			key: Mention.Keys.DOWN,
+		}, this.downHandler.bind(this));
+		
+		document.addEventListener("keypress", e => {
+			/// Quick’n’dirty hack.
+			if (! this.quill.hasFocus()) {
+				return ;
+			}
+			setTimeout(() => {
+				this.setCursorPos();
+				this.quill.removeFormat(this.cursorPos! - 1, 1, 'silent');
+			}, 0);
+		});
+	}
+	
+	selectHandler() {
+		if (this.isOpen) {
+			this.selectItem();
+			return false;
+		}
+		return true;
+	}
+	
+	escapeHandler() {
+		if (this.isOpen) {
+			this.hideMentionList();
+			return false;
+		}
+		return true;
+	}
+	
+	upHandler() {
+		if (this.isOpen) {
+			this.prevItem();
+			return false;
+		}
+		return true;
+	}
+	
+	downHandler() {
+		if (this.isOpen) {
+			this.nextItem();
+			return false;
+		}
+		return true;
+	}
+	
+	showMentionList() {
+		this.mentionContainer.style.visibility = 'hidden';
+		this.mentionContainer.style.display = '';
+		this.setMentionContainerPosition();
+		this.setIsOpen(true);
+	}
+	
+	hideMentionList() {
+		this.mentionContainer.style.display = 'none';
+		this.setIsOpen(false);
+	}
+	
+	
+	private highlightItem(scrollItemInView = true) {
+		const childNodes = Array.from(this.mentionList.childNodes) as HTMLLIElement[];
+		for (const node of childNodes) {
+			node.classList.remove('selected');
+		}
+		childNodes[this.itemIndex].classList.add('selected');
+		
+		if (scrollItemInView) {
+			const itemHeight      = childNodes[this.itemIndex].offsetHeight;
+			const itemPos         = this.itemIndex * itemHeight;
+			const containerTop    = this.mentionContainer.scrollTop;
+			const containerBottom = containerTop + this.mentionContainer.offsetHeight;
+			
+			if (itemPos < containerTop) {
+				// Scroll up if the item is above the top of the container
+				this.mentionContainer.scrollTop = itemPos;
+			} else if (itemPos > (containerBottom - itemHeight)) {
+				// scroll down if any part of the element is below the bottom of the container
+				this.mentionContainer.scrollTop += (itemPos - containerBottom) + itemHeight;
+			}
+		}
+	}
+	
+	private getItemData(): DOMStringMap {
+		const node = this.mentionList.childNodes[this.itemIndex] as HTMLElement;
+		const { link }   = node.dataset;
+		const itemTarget = node.dataset.target;
+		if (link !== undefined) {
+			node.dataset.value = `<a href="${link}" target=${itemTarget || this.options.linkTarget}>${node.dataset.value}`;
+		}
+		return node.dataset;
+	}
+	
+	onContainerMouseMove() {
+		this.suspendMouseEnter = false;
+	}
+	
+	selectItem() {
+		const data = this.getItemData();
+		this.options.onSelect(data, (asyncData) => {
+			this.insertItem(asyncData);
+		});
+		this.hideMentionList();
+	}
+	
+	insertItem(data: DOMStringMap) {
+		const render = data;
+		if (render === null) {
+			return ;
+		}
+		if (!this.options.showDenotationChar) {
+			render.denotationChar = '';
+		}
+		if (this.cursorPos === undefined) {
+			throw new Error(`Invalid this.cursorPos`);
+		}
+		if (!render.value) {
+			throw new Error(`Didn't receive value from server.`);
+		}
+		
+		this.quill.insertText(this.cursorPos, render.value, 'bold', Quill.sources.USER);
+		this.quill.setSelection(this.cursorPos + render.value.length, 0);
+		this.setCursorPos();
+		this.hideMentionList();
+	}
+	
+	onItemMouseEnter(e: MouseEvent) {
+		if (this.suspendMouseEnter) {
+			return ;
+		}
+		const index = Number(
+			(e.target as HTMLLIElement).dataset.index
+		);
+		if (! Mention.numberIsNaN(index) && index !== this.itemIndex) {
+			this.itemIndex = index;
+			this.highlightItem(false);
+		}
+	}
+	
+	onItemClick(e: MouseEvent) {
+		e.stopImmediatePropagation();
+		e.preventDefault();
+		this.itemIndex = Number(
+			(e.currentTarget as HTMLElement).dataset.index
+		);
+		this.highlightItem();
+		this.selectItem();
+	}
+	
+	private attachDataValues(element: HTMLLIElement, data: Datum): HTMLLIElement {
+		for (const [key, value] of Object.entries(data)) {
+			if (this.options.dataAttributes.includes(key)) {
+				element.dataset[key] = value;
+			} else {
+				delete element.dataset[key];
+			}
+		}
+		return element;
+	}
+	
+	renderList(mentionChar: string, data: Datum[], searchTerm: string = "") {
+		if (data.length > 0) {
+			this.values = data;
+			this.mentionList.innerHTML = '';
+			
+			for (const [i, datum] of data.entries()) {
+				const li = document.createElement('li');
+				li.className = this.options.listItemClass;
+				li.dataset.index = `${i}`;
+				// li.innerHTML = this.options.renderItem(datum, searchTerm);
+				li.innerText = datum.value.replace(/\n/g, "↵");
+				/// ^^
+				li.onmouseenter = this.onItemMouseEnter.bind(this);
+				li.dataset.denotationChar = mentionChar;
+				li.onclick = this.onItemClick.bind(this);
+				this.mentionList.appendChild(
+					this.attachDataValues(li, datum)
+				);
+			}
+			this.itemIndex = 0;
+			this.highlightItem();
+			this.showMentionList();
+		} else {
+			this.hideMentionList();
+		}
+	}
+	
+	nextItem() {
+		this.itemIndex = (this.itemIndex + 1) % this.values.length;
+		this.suspendMouseEnter = true;
+		this.highlightItem();
+	}
+	
+	prevItem() {
+		this.itemIndex = ((this.itemIndex + this.values.length) - 1) % this.values.length;
+		this.suspendMouseEnter = true;
+		this.highlightItem();
+	}
+	
+	private hasValidChars(s: string) {
+		return this.options.allowedChars.test(s);
+	}
+	
+	private containerBottomIsNotVisible(topPos: number, containerPos: ClientRect | DOMRect) {
+		const mentionContainerBottom = topPos + this.mentionContainer.offsetHeight + containerPos.top;
+		return mentionContainerBottom > window.pageYOffset + window.innerHeight;
+	}
+	
+	private containerRightIsNotVisible(leftPos: number, containerPos: ClientRect | DOMRect) {
+		if (this.options.fixMentionsToQuill) {
+			return false;
+		}
+		const rightPos = leftPos + this.mentionContainer.offsetWidth + containerPos.left;
+		const browserWidth = window.pageXOffset + document.documentElement.clientWidth;
+		return rightPos > browserWidth;
+	}
+	
+	private setIsOpen(isOpen: boolean) {
+		if (this.isOpen !== isOpen) {
+			if (isOpen) {
+				this.options.onOpen();
+			} else {
+				this.options.onClose();
+			}
+			this.isOpen = isOpen;
+		}
+	}
+	
+	private setMentionContainerPosition() {
+		const containerPos = this.quill.container.getBoundingClientRect();
+		/// vv Here we always trigger from the cursor.
+		if (this.cursorPos === undefined) {
+			throw new Error(`Invalid this.cursorPos`);
+		}
+		const mentionCharPos = this.quill.getBounds(this.cursorPos);
+		const containerHeight = this.mentionContainer.offsetHeight;
+		
+		let topPos  = this.options.offsetTop;
+		let leftPos = this.options.offsetLeft;
+		
+		// handle horizontal positioning
+		if (this.options.fixMentionsToQuill) {
+			const rightPos = 0;
+			this.mentionContainer.style.right = `${rightPos}px`;
+		} else {
+			leftPos += mentionCharPos.left;
+		}
+		
+		if (this.containerRightIsNotVisible(leftPos, containerPos)) {
+			const containerWidth = this.mentionContainer.offsetWidth + this.options.offsetLeft;
+			const quillWidth = containerPos.width;
+			leftPos = quillWidth - containerWidth;
+		}
+		
+		// handle vertical positioning
+		if (this.options.defaultMenuOrientation === 'top') {
+			// Attempt to align the mention container with the top of the quill editor
+			if (this.options.fixMentionsToQuill) {
+				topPos = -1 * (containerHeight + this.options.offsetTop);
+			} else {
+				topPos = mentionCharPos.top - (containerHeight + this.options.offsetTop);
+			}
+			
+			// default to bottom if the top is not visible
+			if (topPos + containerPos.top <= 0) {
+				let overMentionCharPos = this.options.offsetTop;
+				
+				if (this.options.fixMentionsToQuill) {
+					overMentionCharPos += containerPos.height;
+				} else {
+					overMentionCharPos += mentionCharPos.bottom;
+				}
+				
+				topPos = overMentionCharPos;
+			}
+		} else {
+			// Attempt to align the mention container with the bottom of the quill editor
+			if (this.options.fixMentionsToQuill) {
+				topPos += containerPos.height;
+			} else {
+				topPos += mentionCharPos.bottom;
+			}
+			
+			// default to the top if the bottom is not visible
+			if (this.containerBottomIsNotVisible(topPos, containerPos)) {
+				let overMentionCharPos = this.options.offsetTop * -1;
+				
+				if (!this.options.fixMentionsToQuill) {
+					overMentionCharPos += mentionCharPos.top;
+				}
+				
+				topPos = overMentionCharPos - containerHeight;
+			}
+		}
+		
+		this.mentionContainer.style.top  = `${topPos}px`;
+		this.mentionContainer.style.left = `${leftPos}px`;
+		this.mentionContainer.style.visibility = 'visible';
+	}
+	
+	
+	/**
+	 * HF Helpers for manual trigger
+	 */
+	setCursorPos() {
+		const range = this.quill.getSelection();
+		if (range) {
+			this.cursorPos = range.index;
+		} else {
+			this.quill.setSelection(this.quill.getLength(), 0);
+			/// ^^ place cursor at the end of input by default.
+			this.cursorPos = this.quill.getLength();
+		}
+	}
+	getCursorPos(): number {
+		return this.cursorPos!;
+	}
+	trigger(values: string[]) {
+		this.renderList("", values.map(x => {
+			return { id: x, value: x };
+		}), "");
+	}
+	
+	onSomethingChange() {
+		/// We trigger manually so here we can _probably_ just always close.
+		this.hideMentionList();
+	}
+	
+	onTextChange(delta: Delta, oldDelta: Delta, source: Sources) {
+		if (source === 'user') {
+			this.onSomethingChange();
+		}
+	}
+	
+	onSelectionChange(range: RangeStatic) {
+		if (range && range.length === 0) {
+			this.onSomethingChange();
+		} else {
+			this.hideMentionList();
+		}
+	}
+}
+
+
+Quill.register('modules/mention', Mention);

front/js-src/controller.ts

@@ -0,0 +1,319 @@
+import { Api } from './Api';
+import { Mention } from './Mention';
+import { c } from './lib/Log';
+import { Utils } from './lib/Utils';
+import { VanillaTilt } from './vanilla-tilt';
+import { ShareScreenshotModal, SavePublishModal } from './modals';
+
+/// We experimented with a couple of different build systems
+/// to integrate Quill (for instance module-then-postprocessing
+/// like in `web3d`) but none worked really well so we just
+/// hotlink the js and basically copy/paste the @types/quill
+/// declaration here.
+/// Update: we now use rollup (for html2canvas), but quill is
+/// still a pain so it's still not in the same bundle.
+
+const DEBUG = false;
+/// ^^ when debugging the quill integration, add the quill.snow.css to layout.hbs
+/// <link href="/front/node_modules/quill/dist/quill.snow.css" rel="stylesheet">
+/// <link href="/front/node_modules/quill/dist/quill.core.css" rel="stylesheet">
+/// We tried doing it programmatically here but it's a bit slow.
+if (DEBUG) {
+	document.head.insertAdjacentHTML(
+		'beforeend', 
+		`<link href="/front/node_modules/quill/dist/quill.snow.css" rel="stylesheet">`
+	);
+	/// ^^ add css to debug. Do it as early as possible.
+}
+
+enum Page {
+	app, landing, model
+}
+const App = {
+	page:
+		  (document.body.classList.contains('app'))     ? Page.app
+		: (document.body.classList.contains('landing')) ? Page.landing
+		: Page.model
+	,
+	editable:           document.body.dataset.editable === 'true',
+	header: {
+		shuffleBtn:     document.querySelector('header .js-shuffle')  as HTMLAnchorElement,
+		triggerBtn:     document.querySelector('header .js-trigger')  as HTMLAnchorElement,
+		mainInfoBtn:    document.querySelector('header .title .info') as HTMLImageElement,
+		shareBtn:       document.querySelector<HTMLAnchorElement>('header .js-share'),
+		saveBtn:        document.querySelector<HTMLAnchorElement>('header .js-save'),
+		duplicateBtn:   document.querySelector<HTMLAnchorElement>('header .js-duplicate'),
+	},
+	shareScreenBtn:     document.querySelector('.page-container .js-share')  as HTMLAnchorElement,
+	loaderEditor:       document.querySelector('.page-container .js-loader') as HTMLImageElement,
+	sliders:      Array.from(
+		document.querySelectorAll('.decoder-settings input.slider')
+	) as HTMLInputElement[],
+	INITIAL_CONTENT: {} as Delta,
+	/**
+	 * Helper function to more cleanly route different page types.
+	 */
+	onLoad: (p: Page, callback: () => void) => {
+		if (p === App.page) {
+			document.addEventListener('DOMContentLoaded', () => {
+				callback();
+			});
+		}
+	},
+};
+
+const PROMPTS = [
+	`Before boarding your rocket to Mars, remember to pack these items`,
+	`In a shocking finding, scientist discovered a herd of unicorns living in a remote, previously unexplored valley, in the Andes Mountains. Even more surprising to the researchers was the fact that the unicorns spoke perfect English.`,
+	`Legolas and Gimli advanced on the orcs, raising their weapons with a harrowing war cry.`,
+	`Today, scientists confirmed the worst possible outcome: the massive asteroid will collide with Earth`,
+	`
+		Thor: The Tesseract belongs on Asgard, no human is a match for it.
+		Tony turns to leave, but Steve stops him.
+		Steve: You're not going alone!
+		Tony: You gonna stop me?
+	`.replace(/\t/g, "").trim().concat("\n"),
+];
+
+
+
+
+App.onLoad(Page.app, () => {
+	const modalScreenshot = new ShareScreenshotModal;
+	
+	const opts: QuillOptionsStatic = DEBUG
+		? {
+			theme: 'snow',
+			modules: {
+				mention: {},
+			},
+		}
+		: {
+			theme: undefined,
+			// formats: [],
+			modules: {
+				toolbar: [],
+				mention: {},
+			},
+		}
+	;
+	if (! App.editable) {
+		opts.readOnly = true;
+	}
+	const quill = new Quill('div.editor', opts);
+	const mention = quill.getModule('mention') as Mention;
+	(<any>window).quill = quill;
+	const QUILL_C = (<any>window).QUILL_C;
+	if (QUILL_C) {
+		quill.setContents(QUILL_C);
+	}
+	
+	
+	
+	quill.container.appendChild(App.loaderEditor);
+	quill.container.appendChild(App.shareScreenBtn);
+	
+	//
+	//       div.editor .ql-container          <-- quill.container
+	//     +--------------------------------+
+	//     | div.ql-editor contenteditable  |  <-- quill.root
+	//     | +----------------------------+ |
+	//     | |                            | |
+	//     | |                            | |
+	//     | +----------------------------+ |
+	//     +--------------------------------+
+	//
+	
+	quill.keyboard.addBinding({ key: Mention.Keys.TAB }, () => {
+		triggerAutocomplete();
+	});
+	quill.keyboard.bindings[Mention.Keys.TAB].unshift(
+		quill.keyboard.bindings[Mention.Keys.TAB].pop()
+	);
+	/// ^^ important.
+	/// ^^ place it at beginning of bindings.
+	
+	
+	const triggerAutocomplete = async () => {
+		/// vv position loader
+		mention.setCursorPos();
+		const cursorBbox = quill.getBounds(mention.getCursorPos());
+		App.loaderEditor.style.top  = `${cursorBbox.top - 4}px`;
+		App.loaderEditor.style.left = `${cursorBbox.left + 4}px`;
+		App.loaderEditor.classList.remove('hide');
+		
+		/// vv Launch api request.
+		const text = quill.getText(0, mention.getCursorPos());
+		// ^^ That is so much simpler that what we used to do
+		// when we were embbedding objects like in `quill-mention`.
+		c.debug(
+			`%c[About to launch autocomplete for]`,
+			`color: green;`,
+			text,
+		);
+		const o = await Api.shared.postWithSettings({ context: text });
+		App.loaderEditor.classList.add('hide');
+		
+		/// vv Trigger mention module.
+		for (const x of o.sentences) {
+			c.log(x.value);
+		}
+		mention.trigger(
+			o.sentences.map(x => x.value)
+		);
+	};
+	
+	
+	App.header.duplicateBtn?.addEventListener('click', async (e) => {
+		e.preventDefault();
+		const url = await Api.shared.postDuplicate();
+		window.location.href = url;
+	});
+	
+	
+	if (! App.editable) {
+		return ;
+	}
+	/**
+	 * vv Below is only in editable mode.
+	 */
+	
+	const modalSave = new SavePublishModal(quill);
+	
+	App.header.shuffleBtn.addEventListener('click', (e) => {
+		e.preventDefault();
+		quill.setText(
+			Utils.randomItem(PROMPTS)
+		);
+		quill.setSelection(quill.getLength(), 0);
+		/// ^^ github.com/quilljs/quill/issues/2635
+		triggerAutocomplete();
+	});
+	App.header.triggerBtn.addEventListener('click', (e) => {
+		e.preventDefault();
+		triggerAutocomplete();
+	});
+	App.header.shareBtn?.addEventListener('click', async (e) => {
+		e.preventDefault();
+		const text = `Write With Transformer via @huggingface`;
+		window.open(`https://twitter.com/share?url=${ encodeURIComponent(window.location.href) }&text=${ encodeURIComponent(text) }`);
+	});
+	App.header.saveBtn?.addEventListener('click', (e) => {
+		e.preventDefault();
+		mention.hideMentionList();
+		modalSave.show();
+	});
+	
+	App.shareScreenBtn.addEventListener('click', async (e) => {
+		e.preventDefault();
+		mention.hideMentionList();
+		modalScreenshot.show();
+	});
+	quill.on('text-change', () => {
+		App.shareScreenBtn.classList.remove('hide'); /// <- we use a fadeout effect.
+		const hasTextFromAI = quill.getContents()
+			.ops
+			.some(op => op.attributes && op.attributes.bold === true)
+		;
+		App.shareScreenBtn.classList.toggle('fadeout', ! hasTextFromAI);
+	});
+	document.addEventListener('click', (e) => {
+		/// Handle clicks on links inside the editor.
+		if (! (
+			   e.target instanceof HTMLAnchorElement
+			&& e.target.closest('div.ql-editor') !== null
+		)) {
+			return ;
+		}
+		/// Ok, let's do this.
+		e.preventDefault();
+		e.stopPropagation();
+		const href = e.target.getAttribute('href'); /// <- caution, get the original string.
+		c.debug(`[click]`, href);
+		if (href === '#js-shuffle') {
+			App.header.shuffleBtn.click();
+		} else {
+			window.open(e.target.href);
+		}
+	});
+	document.addEventListener("scroll", e => {
+		const trigger = document.getElementsByClassName("js-trigger")[0] as HTMLAnchorElement;
+		if (scrollY > 100) {
+			trigger.style.position = "fixed";
+			trigger.style.top = "10px";
+			trigger.style.border = "1px solid blue";
+			trigger.style.backgroundColor = "white";
+			trigger.style.borderRadius = "100px";
+			trigger.style.padding = "5px";
+			trigger.style.zIndex = "1";
+			trigger.style.left = "50%";
+			trigger.style.transform = "translateX(-50%)";
+		} else {
+			trigger.style.position = "relative";
+			trigger.style.top = "auto";
+			trigger.style.border = "none";
+			trigger.style.backgroundColor = "white";
+			trigger.style.borderRadius = "0";
+			trigger.style.padding = "0";
+			trigger.style.zIndex = "1";
+			trigger.style.left = "auto"
+		}
+	});
+	
+	/**
+	 * Settings
+	 */
+	const handleSliderChange = (slider: HTMLInputElement) => {
+		const div = slider.parentNode as HTMLDivElement;
+		const spanVal = div.querySelector('.js-val') as HTMLSpanElement;
+		const value = Number.isInteger(slider.valueAsNumber)
+			? slider.valueAsNumber
+			: Number(slider.valueAsNumber.toFixed(2))
+		;
+		const valueKey = `value-${value}`;
+		if (slider.dataset[valueKey]) {
+			spanVal.innerText = slider.dataset[valueKey]!;
+		} else {
+			spanVal.innerText = value.toString();
+		}
+		const min = Number(slider.getAttribute('min'));
+		const max = Number(slider.getAttribute('max'));
+		if (value < min + (max - min) / 3) {
+			spanVal.className = "js-val green";
+		} else if (value < min + 2 * (max - min) / 3) {
+			spanVal.className = "js-val orange";
+		} else {
+			spanVal.className = "js-val red";
+		}
+		const isInverted = slider.classList.contains('js-inverted');
+		if (isInverted) {
+			if (spanVal.classList.contains('green')) {
+				spanVal.classList.remove('green');
+				spanVal.classList.add('red');
+			} else if (spanVal.classList.contains('red')) {
+				spanVal.classList.remove('red');
+				spanVal.classList.add('green');
+			}
+		}
+	};
+	for (const slider of App.sliders) {
+		handleSliderChange(slider);
+		slider.addEventListener('input', () => {
+			handleSliderChange(slider);
+		});
+	}
+});
+
+
+
+App.onLoad(Page.landing, () => {
+	/**
+	 * VanillaTilt
+	 */
+	VanillaTilt.init(document.querySelectorAll("[data-tilt]"), {
+		glare: true,
+		scale: 1.06,
+		'max-glare': 0.3,
+		speed: 400,
+	});
+});

front/js-src/lib/Log.ts

@@ -0,0 +1 @@
+export const c = console;

front/js-src/lib/Utils.ts

@@ -0,0 +1,76 @@
+
+export class Utils {
+	private static escapeMap = {
+		/// From underscore.js
+		'&': '&',
+		'<': '&lt;',
+		'>': '&gt;',
+		'"': '&quot;',
+		"'": '&#x27;',
+		'`': '&#x60;'
+	};
+	
+	/**
+	 * Escape a message's content for insertion into html.
+	 */
+	static escape(s: string): string {
+		let x = s;
+		for (const [k, v] of Object.entries(this.escapeMap)) {
+			x = x.replace(new RegExp(k, 'g'), v);
+		}
+		return x.replace(/\n/g, '<br>');
+	}
+	
+	/**
+	 * Opposite of escape.
+	 */
+	static unescape(s: string): string {
+		let x = s.replace(/<br>/g, '\n');
+		for (const [k, v] of Object.entries(this.escapeMap)) {
+			x = x.replace(new RegExp(v, 'g'), k);
+		}
+		return x;
+	}
+	
+	/**
+	 * "Real" modulo (always >= 0), not remainder.
+	 */
+	static mod(a: number, n: number): number {
+		return ((a % n) + n) % n;
+	}
+	
+	/**
+	 * Noop object with arbitrary number of nested attributes that are also noop.
+	 */
+	static deepNoop() {
+		const noop = new Proxy(() => {}, {
+			get: () => noop
+		});
+		return noop;
+	}
+	
+	/**
+	 * Capitalize
+	 */
+	static capitalize(s: string): string {
+		return s.charAt(0).toUpperCase() + s.slice(1);
+	}
+	
+	/**
+	 * Returns a promise that will resolve after the specified time
+	 * @param ms Number of ms to wait
+	 */
+	static delay(ms: number): Promise<void> {
+		return new Promise((resolve, reject) => {
+			setTimeout(() => resolve(), ms);
+		});
+	}
+	
+	/**
+	 * Random element from array
+	 */
+	static randomItem<T>(arr: T[]): T {
+		return arr[Math.floor(Math.random()*arr.length)];
+	}
+}
+

front/js-src/modals.ts

@@ -0,0 +1,134 @@
+import { Utils } from './lib/Utils';
+import html2canvas from 'html2canvas';
+import { c } from './lib/Log';
+import { Api } from './Api';
+
+abstract class Modal {
+	protected div:     HTMLDivElement;
+	protected doneBtn: HTMLAnchorElement | null;
+	protected loader:  HTMLImageElement;
+	constructor(className: string) {
+		this.div     = document.querySelector(`div.modal.${className}`) as HTMLDivElement;
+	 	this.doneBtn = this.div.querySelector<HTMLAnchorElement>('.js-close');
+		this.loader  = this.div.querySelector('.js-loader') as HTMLImageElement;
+		
+		this.doneBtn?.addEventListener('click', (e) => {
+			e.preventDefault();
+			this.hide();
+		});
+		this.div.addEventListener('click', (e) => {
+			if (e.target === this.div) {
+				c.debug(`modal:background.click`);
+				this.hide();
+			}
+		});
+	}
+	/**
+	 * Hooks: Implement those to perform the actual work done on show and hide.
+	 */
+	abstract performBeforeShow(): Promise<void>;
+	abstract performShow():       Promise<void>;
+	abstract performHide():       Promise<void>;
+	async show() {
+		await this.performBeforeShow();
+		this.div.classList.add('fadeout');
+		this.div.classList.remove('hide');
+		await Utils.delay(100);
+		this.div.classList.remove('fadeout');
+		await this.performShow();
+		this.loader.classList.add('hide');
+	}
+	async hide() {
+		this.div.classList.add('fadeout');
+		await Utils.delay(200);
+		this.div.classList.add('hide');
+		this.div.classList.remove('fadeout');
+		await this.performHide();
+	}
+}
+
+export class ShareScreenshotModal extends Modal {
+	private imResult = this.div.querySelector('.js-result') as HTMLImageElement;
+	
+	constructor() {
+		super(`share-screenshot`);
+	}
+	async performBeforeShow() {
+		this.loader.classList.remove('hide');
+	}
+	async performShow() {
+		await Utils.delay(800); /// <- for good ux
+		const el = document.querySelector('div.page-inner') as HTMLDivElement;
+		const canvas = await html2canvas(el, {
+			logging: false, /// <- inoperant in our version of html2canvas.
+			onclone: (doc) => {
+				const clonedEl = doc.querySelector('div.page-inner') as HTMLDivElement;
+				clonedEl.classList.add('html2canvas');
+				const watermark = doc.querySelector('div.watermark') as HTMLDivElement;
+				watermark.style.visibility = `visible`;
+			}
+		});
+		this.imResult.src = canvas.toDataURL();
+	}
+	async performHide() {
+		this.imResult.src = "";
+	}
+}
+
+export class SavePublishModal extends Modal {
+	private saveBtn = this.div.querySelector('.js-save') as HTMLAnchorElement;
+	private form    = this.div.querySelector('form') as HTMLFormElement;
+	constructor(
+		private quill: Quill
+	) {
+		super(`save-publish`);
+		
+		/// vv Url fields auto-select.
+		const urlInputs = Array.from(
+			this.div.querySelectorAll('.doc-url')
+		) as HTMLInputElement[];
+		for (const x of urlInputs) {
+			x.addEventListener('focus', () => {
+				x.select();
+			});
+		}
+		
+		this.saveBtn.addEventListener('click', (e) => {
+			e.preventDefault();
+			if (! this.form.reportValidity()) {
+				/// Form is invalid.
+				return ;
+			}
+			this.save();
+		});
+		this.form.addEventListener('submit', (e) => {
+			e.preventDefault();
+			this.saveBtn.click();
+		});
+	}
+	async performBeforeShow() {}
+	async performShow() {}
+	async performHide() {}
+	async save() {
+		this.loader.classList.remove('hide');
+		
+		const inputTitle = this.div.querySelector('.doc-title') as HTMLInputElement;
+		const title = inputTitle.value;
+		const contents = this.quill.getContents();
+		c.log(JSON.stringify({ title, contents }));
+		
+		const success = await Api.shared.postEdit({ title, contents });
+		await Utils.delay(800); /// <- for good ux
+		
+		if (success) {
+			this.loader.classList.add('hide');
+			this.hide();
+			/// For now we always redirect to the edit url here:
+			/// vv
+			const inputEditUrl = this.div.querySelector('.doc-edit-url') as HTMLInputElement;
+			window.location.href = inputEditUrl.value;
+		} else {
+			window.alert(`did not manage to save`);
+		}
+	}
+}

front/js-src/quill.d.ts

@@ -0,0 +1,181 @@
+
+// import { Blot } from "../node_modules/parchment/dist/src/blot/abstract/blot";
+interface Blot {}
+interface Delta {
+	ops: DeltaOperation[];
+}
+
+/**
+ * A stricter type definition would be:
+ *
+ *   type DeltaOperation ({ insert: any } | { delete: number } | { retain: number }) & OptionalAttributes;
+ *
+ *  But this would break a lot of existing code as it would require manual discrimination of the union types.
+ */
+type DeltaOperation = { insert?: any, delete?: number, retain?: number } & OptionalAttributes;
+type Sources = "api" | "user" | "silent";
+
+interface Key {
+	key: string | number;
+	shortKey?: boolean;
+}
+
+interface StringMap {
+	[key: string]: any;
+}
+
+interface OptionalAttributes {
+	attributes?: StringMap;
+}
+
+type TextChangeHandler = (delta: Delta, oldContents: Delta, source: Sources) => any;
+type SelectionChangeHandler = (range: RangeStatic, oldRange: RangeStatic, source: Sources) => any;
+type EditorChangeHandler = ((name: "text-change", delta: Delta, oldContents: Delta, source: Sources) => any)
+	| ((name: "selection-change", range: RangeStatic, oldRange: RangeStatic, source: Sources) => any);
+
+interface KeyboardStatic {
+	addBinding(key: Key, callback: (range: RangeStatic, context: any) => void): void;
+	addBinding(key: Key, context: any, callback: (range: RangeStatic, context: any) => void): void;
+	bindings: { [index: number]: any[] };
+}
+
+interface ClipboardStatic {
+	convert(html?: string): Delta;
+	addMatcher(selectorOrNodeType: string|number, callback: (node: any, delta: Delta) => Delta): void;
+	dangerouslyPasteHTML(html: string, source?: Sources): void;
+	dangerouslyPasteHTML(index: number, html: string, source?: Sources): void;
+}
+
+interface QuillOptionsStatic {
+	debug?: string | boolean;
+	modules?: StringMap;
+	placeholder?: string;
+	readOnly?: boolean;
+	theme?: string;
+	formats?: string[];
+	bounds?: HTMLElement | string;
+	scrollingContainer?: HTMLElement | string;
+	strict?: boolean;
+}
+
+interface BoundsStatic {
+	bottom: number;
+	left: number;
+	right: number;
+	top: number;
+	height: number;
+	width: number;
+}
+
+declare interface RangeStatic {
+	index: number;
+	length: number;
+}
+
+declare class RangeStatic implements RangeStatic {
+	constructor();
+	index: number;
+	length: number;
+}
+
+interface EventEmitter {
+	on(eventName: "text-change", handler: TextChangeHandler): EventEmitter;
+	on(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter;
+	on(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter;
+	once(eventName: "text-change", handler: TextChangeHandler): EventEmitter;
+	once(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter;
+	once(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter;
+	off(eventName: "text-change", handler: TextChangeHandler): EventEmitter;
+	off(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter;
+	off(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter;
+}
+
+declare class Quill {
+	/**
+	 * @private Internal API
+	 */
+	root: HTMLDivElement;
+	container: HTMLElement; /// <- used by quill-mention
+	clipboard: ClipboardStatic;
+	scroll: Blot;
+	keyboard: KeyboardStatic;
+	constructor(container: string | Element, options?: QuillOptionsStatic);
+	deleteText(index: number, length: number, source?: Sources): Delta;
+	disable(): void;
+	enable(enabled?: boolean): void;
+	getContents(index?: number, length?: number): Delta;
+	getLength(): number;
+	getText(index?: number, length?: number): string;
+	insertEmbed(index: number, type: string, value: any, source?: Sources): Delta;
+	insertText(index: number, text: string, source?: Sources): Delta;
+	insertText(index: number, text: string, format: string, value: any, source?: Sources): Delta;
+	insertText(index: number, text: string, formats: StringMap, source?: Sources): Delta;
+	/**
+	 * @deprecated Remove in 2.0. Use clipboard.dangerouslyPasteHTML(index: number, html: string, source: Sources)
+	 */
+	pasteHTML(index: number, html: string, source?: Sources): string;
+	/**
+	 * @deprecated Remove in 2.0. Use clipboard.dangerouslyPasteHTML(html: string, source: Sources): void;
+	 */
+	pasteHTML(html: string, source?: Sources): string;
+	setContents(delta: Delta, source?: Sources): Delta;
+	setText(text: string, source?: Sources): Delta;
+	update(source?: Sources): void;
+	updateContents(delta: Delta, source?: Sources): Delta;
+	
+	format(name: string, value: any, source?: Sources): Delta;
+	formatLine(index: number, length: number, source?: Sources): Delta;
+	formatLine(index: number, length: number, format: string, value: any, source?: Sources): Delta;
+	formatLine(index: number, length: number, formats: StringMap, source?: Sources): Delta;
+	formatText(index: number, length: number, source?: Sources): Delta;
+	formatText(index: number, length: number, format: string, value: any, source?: Sources): Delta;
+	formatText(index: number, length: number, formats: StringMap, source?: Sources): Delta;
+	formatText(range: RangeStatic, format: string, value: any, source?: Sources): Delta;
+	formatText(range: RangeStatic, formats: StringMap, source?: Sources): Delta;
+	getFormat(range?: RangeStatic): StringMap;
+	getFormat(index: number, length?: number): StringMap;
+	removeFormat(index: number, length: number, source?: Sources): Delta;
+	
+	blur(): void;
+	focus(): void;
+	getBounds(index: number, length?: number): BoundsStatic;
+	getSelection(focus: true): RangeStatic;
+	getSelection(focus?: false): RangeStatic | null;
+	hasFocus(): boolean;
+	setSelection(index: number, length: number, source?: Sources): void;
+	setSelection(range: RangeStatic, source?: Sources): void;
+	
+	// static methods: debug, import, register, find
+	static debug(level: string|boolean): void;
+	static import(path: string): any;
+	static register(path: string, def: any, suppressWarning?: boolean): void;
+	static register(defs: StringMap, suppressWarning?: boolean): void;
+	static find(domNode: Node, bubble?: boolean): Quill | any;
+	
+	addContainer(classNameOrDomNode: string|Node, refNode?: Node): any;
+	getModule(name: string): any;
+	
+	// Blot interface is not exported on Parchment
+	getIndex(blot: any): number;
+	getLeaf(index: number): any;
+	getLine(index: number): [any, number];
+	getLines(index?: number, length?: number): any[];
+	getLines(range: RangeStatic): any[];
+	
+	// EventEmitter methods
+	on(eventName: "text-change", handler: TextChangeHandler): EventEmitter;
+	on(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter;
+	on(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter;
+	once(eventName: "text-change", handler: TextChangeHandler): EventEmitter;
+	once(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter;
+	once(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter;
+	off(eventName: "text-change", handler: TextChangeHandler): EventEmitter;
+	off(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter;
+	off(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter;
+	
+	static sources: {
+		API: 'api',
+		SILENT: 'silent',
+		USER: 'user',
+	};
+}

front/js-src/vanilla-tilt.ts

@@ -0,0 +1,371 @@
+export namespace VanillaTilt {
+	/**
+	 * Options which configures the tilting
+	 */
+	export interface TiltOptions {
+		/**
+		 * Reverse the tilt direction
+		 */
+		reverse?: boolean;
+		/**
+		 * Max tilt rotation (degrees)
+		 */
+		max?: number;
+		/**
+		 * Transform perspective, the lower the more extreme the tilt gets.
+		 */
+		perspective?: number;
+		/**
+		 * 2 = 200%, 1.5 = 150%, etc..
+		 */
+		scale?: number;
+		/**
+		 * Speed of the enter/exit transition
+		 */
+		speed?: number;
+		/**
+		 * Set a transition on enter/exit.
+		 */
+		transition?: boolean;
+		/**
+		 * What axis should be disabled. Can be X or Y.
+		 */
+		axis?: null | "x" | "y";
+		/**
+		 * If the tilt effect has to be reset on exit.
+		 */
+		reset?: boolean;
+		/**
+		 * Easing on enter/exit.
+		 */
+		easing?: string;
+		/**
+		 * Added (@julien-c)
+		 */
+		glare?: boolean;
+		'max-glare'?: number;
+	}
+	
+	export interface TiltValues {
+		/**
+		 * The current tilt on the X axis
+		 */
+		tiltX: number;
+		/**
+		 * The current tilt on the Y axis
+		 */
+		tiltY: number;
+		/**
+		 * The current percentage on the X axis
+		 */
+		percentageX: number;
+		/**
+		 * The current percentage on the Y axis
+		 */
+		percentageY: number;
+	}
+	
+	export interface HTMLVanillaTiltElement extends HTMLElement {
+		vanillaTilt: VanillaTilt
+	}
+}
+
+
+export class VanillaTilt {
+	width:  number | null;
+	height: number | null;
+	left:   number | null;
+	top:    number | null;
+	element:  VanillaTilt.HTMLVanillaTiltElement;
+	settings: VanillaTilt.TiltOptions;
+	reverse : -1 | 1;
+	glare: boolean;
+	glarePrerender: boolean;
+	transitionTimeout: number | null;
+	updateCall:        number | null;
+	glareElementWrapper: HTMLElement;
+	glareElement: HTMLElement;
+	updateBind: () => void;
+	resetBind:  () => void;
+	onMouseEnterBind: (e: Event) => void;
+	onMouseMoveBind:  (e: Event) => void;
+	onMouseLeaveBind: (e: Event) => void;
+	event: MouseEvent;
+	
+	constructor(element, settings: VanillaTilt.TiltOptions = {}) {
+		if (!(element instanceof Node)) {
+			throw ("Can't initialize VanillaTilt because " + element + " is not a Node.");
+		}
+		
+		this.width = null;
+		this.height = null;
+		this.left = null;
+		this.top = null;
+		this.transitionTimeout = null;
+		this.updateCall = null;
+		
+		this.updateBind = this.update.bind(this);
+		this.resetBind  = this.reset.bind(this);
+		
+		this.element  = element as VanillaTilt.HTMLVanillaTiltElement;
+		this.settings = this.extendSettings(settings);
+		
+		this.reverse = this.settings.reverse ? -1 : 1;
+		
+		this.glare = this.isSettingTrue(this.settings.glare);
+		this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
+		
+		if (this.glare) {
+			this.prepareGlare();
+		}
+		
+		this.addEventListeners();
+	}
+	
+	isSettingTrue(setting) {
+		return setting === "" || setting === true || setting === 1;
+	}
+	
+	addEventListeners() {
+		this.onMouseEnterBind   = this.onMouseEnter.bind(this);
+		this.onMouseMoveBind    = this.onMouseMove.bind(this);
+		this.onMouseLeaveBind   = this.onMouseLeave.bind(this);
+		this.onWindowResizeBind = this.onWindowResizeBind.bind(this);
+	
+		this.element.addEventListener("mouseenter", this.onMouseEnterBind);
+		this.element.addEventListener("mousemove",  this.onMouseMoveBind);
+		this.element.addEventListener("mouseleave", this.onMouseLeaveBind);
+		if (this.glare) {
+			window.addEventListener("resize", this.onWindowResizeBind);
+		}
+	}
+	
+	
+	onMouseEnter(event) {
+		this.updateElementPosition();
+		(<any>this.element.style).willChange = "transform";
+		this.setTransition();
+	}
+	
+	onMouseMove(event) {
+		if (this.updateCall !== null) {
+			cancelAnimationFrame(this.updateCall);
+		}
+		
+		this.event = event;
+		this.updateCall = requestAnimationFrame(this.updateBind);
+	}
+	
+	onMouseLeave(event) {
+		this.setTransition();
+		
+		if (this.settings.reset) {
+			requestAnimationFrame(this.resetBind);
+		}
+	}
+	
+	reset() {
+		this.event = {
+			pageX: this.left! + this.width!  / 2,
+			pageY: this.top!  + this.height! / 2
+		} as MouseEvent;
+		
+		this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
+			"rotateX(0deg) " +
+			"rotateY(0deg) " +
+			"scale3d(1, 1, 1)"
+		;
+		
+		if (this.glare) {
+			this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
+			this.glareElement.style.opacity = '0';
+		}
+	}
+	
+	getValues() {
+		let x = (this.event.clientX - this.left!) / this.width!;
+		let y = (this.event.clientY - this.top!) / this.height!;
+	
+		x = Math.min(Math.max(x, 0), 1);
+		y = Math.min(Math.max(y, 0), 1);
+	
+		let tiltX = (this.reverse * (this.settings.max! / 2 - x * this.settings.max!)).toFixed(2);
+		let tiltY = (this.reverse * (y * this.settings.max! - this.settings.max! / 2)).toFixed(2);
+		let angle = Math.atan2(this.event.clientX - (this.left! + this.width! / 2), -(this.event.clientY - (this.top! + this.height! / 2))) * (180 / Math.PI);
+		
+		return {
+			tiltX: tiltX,
+			tiltY: tiltY,
+			percentageX: x * 100,
+			percentageY: y * 100,
+			angle: angle
+		};
+	}
+	
+	updateElementPosition() {
+		let rect = this.element.getBoundingClientRect();
+		
+		this.width = this.element.offsetWidth;
+		this.height = this.element.offsetHeight;
+		this.left = rect.left;
+		this.top = rect.top;
+	}
+	
+	update() {
+		const values = this.getValues();
+		
+		this.element.style.transform = [
+			"perspective(" + this.settings.perspective + "px) ",
+			"rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) ",
+			"rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) ",
+			"scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")",
+		].join(" ");
+		
+		if (this.glare) {
+			this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`;
+			this.glareElement.style.opacity   = `${values.percentageY * this.settings["max-glare"]! / 100}`;
+		}
+		
+		this.element.dispatchEvent(new CustomEvent("tiltChange", {
+			"detail": values
+		}));
+		
+		this.updateCall = null;
+	}
+	
+	/**
+	 * Appends the glare element (if glarePrerender equals false)
+	 * and sets the default style
+	 */
+	prepareGlare() {
+		// If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
+		if (!this.glarePrerender) {
+			// Create glare element
+			const jsTiltGlare = document.createElement("div");
+			jsTiltGlare.classList.add("js-tilt-glare");
+			
+			const jsTiltGlareInner = document.createElement("div");
+			jsTiltGlareInner.classList.add("js-tilt-glare-inner");
+			
+			jsTiltGlare.appendChild(jsTiltGlareInner);
+			this.element.appendChild(jsTiltGlare);
+		}
+		
+		this.glareElementWrapper = this.element.querySelector(".js-tilt-glare") as HTMLElement;
+		this.glareElement = this.element.querySelector(".js-tilt-glare-inner") as HTMLElement;
+		
+		if (this.glarePrerender) {
+			return ;
+		}
+		
+		Object.assign(this.glareElementWrapper.style, {
+			"position": "absolute",
+			"top": "0",
+			"left": "0",
+			"width": "100%",
+			"height": "100%",
+			"overflow": "hidden",
+			'pointer-events': 'none',
+		});
+	
+		Object.assign(this.glareElement.style, {
+			'position': 'absolute',
+			'top': '50%',
+			'left': '50%',
+			'pointer-events': 'none',
+			'background-image': `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`,
+			'width': `${this.element.offsetWidth * 2}px`,
+			'height': `${this.element.offsetWidth * 2}px`,
+			'transform': 'rotate(180deg) translate(-50%, -50%)',
+			'transform-origin': '0% 0%',
+			'opacity': '0',
+		});
+	}
+	
+	updateGlareSize() {
+		Object.assign(this.glareElement.style, {
+			'width': `${this.element.offsetWidth * 2}`,
+			'height': `${this.element.offsetWidth * 2}`,
+		});
+	}
+	
+	onWindowResizeBind() {
+		this.updateGlareSize();
+	}
+	
+	setTransition() {
+		if (this.transitionTimeout) {
+			clearTimeout(this.transitionTimeout);
+		}
+		// this.element.style.transition = `${this.settings.speed}ms ${this.settings.easing}`;
+		/// From openai:
+		this.element.style.transition = `transform .4s cubic-bezier(0,0,.2,1)`;
+		if (this.glare) {
+			this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`;
+		}
+		
+		this.transitionTimeout = setTimeout(() => {
+			this.element.style.transition = "";
+			if (this.glare) {
+				this.glareElement.style.transition = "";
+			}
+		}, this.settings.speed);
+		
+	}
+	
+	extendSettings(settings) {
+		let defaultSettings = {
+			reverse: false,
+			max: 35,
+			perspective: 1000,
+			easing: "cubic-bezier(.03,.98,.52,.99)",
+			scale: "1",
+			speed: "300",
+			transition: true,
+			axis: null,
+			glare: false,
+			"max-glare": 1,
+			"glare-prerender": false,
+			reset: true,
+		};
+		
+		let newSettings = {};
+		for (var property in defaultSettings) {
+			if (property in settings) {
+				newSettings[property] = settings[property];
+			} else if (this.element.hasAttribute("data-tilt-" + property)) {
+				let attribute = this.element.getAttribute("data-tilt-" + property);
+				try {
+					newSettings[property] = JSON.parse(<any>attribute);
+				} catch (e) {
+					newSettings[property] = attribute;
+				}
+			} else {
+				newSettings[property] = defaultSettings[property];
+			}
+		}
+		
+		return newSettings;
+	}
+	
+	static init(elements, settings: VanillaTilt.TiltOptions = {}) {
+		if (elements instanceof Node) {
+			elements = [elements];
+		}
+		
+		if (elements instanceof NodeList) {
+			elements = [].slice.call(elements);
+		}
+		
+		if (!(elements instanceof Array)) {
+			return ;
+		}
+		
+		elements.forEach((element) => {
+			if (!("vanillaTilt" in element)) {
+				element.vanillaTilt = new VanillaTilt(element, settings);
+			}
+		});
+	}
+}
+

front/less/mixins/bfc.less

@@ -0,0 +1,3 @@
+.bfc {
+	overflow: hidden;
+}