Duplicate from indonesian-nlp/gpt2-app

Co-authored-by: Julien Chaumond <[email protected]>

.gitattributes

@@ -0,0 +1,27 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bin.* filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zstandard filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.github/workflows/check-filesize.yml

@@ -0,0 +1,17 @@
+name: Check file size
+
+on:               # or directly `on: [push]` to run the action on every push on any branch
+  pull_request:
+    branches: [main]
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check large files
+        uses: ActionsDesk/[email protected]
+        with:
+          filesizelimit: 10485760 # = 10MB, so we can sync to HF spaces

.github/workflows/hf-spaces.yml

@@ -0,0 +1,21 @@
+name: Sync to Hugging Face hub
+
+on:
+  push:
+    branches: [main]
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          git push https://indonesian-nlp:[email protected]/spaces/indonesian-nlp/gpt2-app main

Dockerfile

@@ -0,0 +1,7 @@
+FROM python:3.8-slim-buster
+COPY . /app
+WORKDIR /app
+RUN pip install -r requirements.txt
+EXPOSE 8501
+ENTRYPOINT ["streamlit","run"]
+CMD ["app/app.py"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 indonesian-nlp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,51 @@
+---
+title: Indonesian GPT-2
+emoji: 🦀
+colorFrom: pink
+colorTo: yellow
+sdk: streamlit
+app_file: app/app.py
+pinned: false
+duplicated_from: indonesian-nlp/gpt2-app
+---
+
+# Indonesian GPT-2 Applications
+This is a collection of Applications that generates sentences using Indonesian GPT-2 models!
+
+
+## How did we create it
+
+## Development
+
+### Dependencies Installation
+
+### Inference Pipeline
+
+## Authors
+
+Following are the authors of this work (listed alphabetically):
+- [Akmal](https://github.com/Wikidepia)
+- [Alvin Watner](https://github.com/alvinwatner)
+- [Cahya Wirawan](https://github.com/cahya-wirawan)
+- [Galuh Sahid](https://github.com/galuhsahid)
+- [Muhammad Agung Hambali](https://github.com/magungh1)
+- [Samsul Rahmadani](https://github.com/acul3)
+
+## Acknowledgements
+
+- 🤗 Hugging Face for organizing [the FLAX/JAX community week](https://github.com/huggingface/transformers/tree/master/examples/research_projects/jax-projects)
+- Google [TPU Research Cloud (TRC) program](https://sites.research.google/trc/) for providing computing resources
+- [Weights & Biases](https://wandb.com/) for providing the infrastructure for experiment tracking and model management
+
+## Citing Indonesian GPT-2 Applications
+
+If you find this is useful in your research or wish to refer, please use the following BibTeX entry.
+
+```
+@misc{Indonesian_GPT2_App_2021,
+author = {Akmal, Alvin Watner, Cahya Wirawan, Galuh Sahid, Muhammad Agung Hambali, Samsul Rahmadani},
+title = {Indonesian GPT-2 Applications},
+url = {https://github.com/indonesian-nlp/gpt2-app},
+year = {2021}
+}
+```

app/SessionState.py

@@ -0,0 +1,95 @@
+"""Hack to add per-session state to Streamlit.
+Usage
+-----
+>>> import SessionState
+>>>
+>>> session_state = SessionState.get(user_name='', favorite_color='black')
+>>> session_state.user_name
+''
+>>> session_state.user_name = 'Mary'
+>>> session_state.favorite_color
+'black'
+Since you set user_name above, next time your script runs this will be the
+result:
+>>> session_state = get(user_name='', favorite_color='black')
+>>> session_state.user_name
+'Mary'
+"""
+from streamlit.scriptrunner import get_script_run_ctx
+from streamlit.server.server import Server
+
+
+class SessionState(object):
+    def __init__(self, **kwargs):
+        """A new SessionState object.
+        Parameters
+        ----------
+        **kwargs : any
+            Default values for the session state.
+        Example
+        -------
+        >>> session_state = SessionState(user_name='', favorite_color='black')
+        >>> session_state.user_name = 'Mary'
+        ''
+        >>> session_state.favorite_color
+        'black'
+        """
+        for key, val in kwargs.items():
+            setattr(self, key, val)
+
+
+def get(**kwargs):
+    """Gets a SessionState object for the current session.
+    Creates a new object if necessary.
+    Parameters
+    ----------
+    **kwargs : any
+        Default values you want to add to the session state, if we're creating a
+        new one.
+    Example
+    -------
+    >>> session_state = get(user_name='', favorite_color='black')
+    >>> session_state.user_name
+    ''
+    >>> session_state.user_name = 'Mary'
+    >>> session_state.favorite_color
+    'black'
+    Since you set user_name above, next time your script runs this will be the
+    result:
+    >>> session_state = get(user_name='', favorite_color='black')
+    >>> session_state.user_name
+    'Mary'
+    """
+    # Hack to get the session object from Streamlit.
+
+    ctx = get_script_run_ctx()
+
+    this_session = None
+
+    current_server = Server.get_current()
+    if hasattr(current_server, '_session_infos'):
+        # Streamlit < 0.56
+        session_infos = Server.get_current()._session_infos.values()
+    else:
+        session_infos = Server.get_current()._session_info_by_id.values()
+
+    for session_info in session_infos:
+        s = session_info.session
+        if (
+            (not hasattr(s, '_main_dg') and s._uploaded_file_mgr == ctx.uploaded_file_mgr)
+        ):
+            this_session = s
+
+    if this_session is None:
+        raise RuntimeError(
+            "Oh noes. Couldn't get your Streamlit Session object. "
+            'Are you doing something fancy with threads?')
+
+    # Got the session object! Now let's attach some state into it.
+
+    if not hasattr(this_session, '_custom_session_state'):
+        this_session._custom_session_state = SessionState(**kwargs)
+
+    return this_session._custom_session_state
+
+__all__ = ['get']

app/app.py

@@ -0,0 +1,255 @@
+import streamlit as st
+print("Streamlit Version: ", st.__version__)
+import SessionState
+from mtranslate import translate
+from prompts import PROMPT_LIST
+import random
+import time
+from transformers import pipeline, set_seed
+import psutil
+import codecs
+import streamlit.components.v1 as stc
+import pathlib
+import os
+
+# st.set_page_config(page_title="Indonesian GPT-2")
+
+mirror_url = "https://gpt2-app.ai-research.id/"
+if "MIRROR_URL" in os.environ:
+    mirror_url = os.environ["MIRROR_URL"]
+
+MODELS = {
+    "Indonesian GPT-2 Small": {
+        "group": "Indonesian GPT-2",
+        "name": "indonesian-nlp/gpt2",
+        "description": "The original Indonesian GPT-2 small model.",
+        "text_generator": None
+    },
+    "Indonesian GPT-2 Medium": {
+        "group": "Indonesian GPT-2",
+        "name": "indonesian-nlp/gpt2-medium-indonesian",
+        "description": "The original Indonesian GPT-2 medium model.",
+        "text_generator": None
+    },
+    "Indonesian Literature - GPT-2 Small": {
+        "group": "Indonesian Literature",
+        "name": "cahya/gpt2-small-indonesian-story",
+        "description": "The Indonesian Literature Generator using fine-tuned GPT-2 small model.",
+        "text_generator": None
+    },
+    "Indonesian Literature - GPT-2 Medium": {
+        "group": "Indonesian Literature",
+        "name": "cahya/gpt2-medium-indonesian-story",
+        "description": "The Indonesian Literature Generator using fine-tuned GPT-2 medium model.",
+        "text_generator": None
+    },
+    "Indonesian Academic Journal - GPT-2 Small": {
+        "group": "Indonesian Journal",
+        "name": "Galuh/id-journal-gpt2",
+        "description": "The Indonesian Journal Generator using fine-tuned GPT-2 small model.",
+        "text_generator": None
+    },
+    "Indonesian Persona Chatbot - GPT-2 Small": {
+        "group": "Indonesian Persona Chatbot",
+        "name": "cahya/gpt2-small-indonesian-personachat",
+        "description": "The Indonesian Persona Chatbot using fine-tuned GPT-2 small model.",
+        "text_generator": None
+    },
+    "Multilingual mGPT": {
+        "group": "Indonesian GPT-2",
+        "name": "sberbank-ai/mGPT",
+        "description": "Multilingual GPT model, autoregressive GPT-like models with 1.3 billion parameters.",
+        "text_generator": None
+    },
+}
+
+
+def stc_chatbot(root_dir, width=700, height=900):
+    html_file = root_dir/"app/chatbot.html"
+    css_file = root_dir/"app/css/main.css"
+    js_file = root_dir/"app/js/main.js"
+    if css_file.exists() and js_file.exists():
+        html = codecs.open(html_file, "r").read()
+        css = codecs.open(css_file, "r").read()
+        js = codecs.open(js_file, "r").read()
+        html = html.replace('<link rel="stylesheet" href="css/main.css">', "<style>\n" + css + "\n</style>")
+        html = html.replace('<script src="js/main.js"></script>', "<script>\n" + js + "\n</script>")
+        stc.html(html, width=width, height=height, scrolling=True)
+
+st.sidebar.markdown("""
+<style>
+.centeralign {
+    text-align: center;
+}
+</style>
+<p class="centeralign">
+    <img src="https://huggingface.co/spaces/flax-community/gpt2-indonesian/resolve/main/huggingwayang.png"/>
+</p>
+""", unsafe_allow_html=True)
+st.sidebar.markdown(f"""
+___
+<p class="centeralign">
+This is a collection of applications that generates sentences using Indonesian GPT-2 models!
+</p>
+<p class="centeralign">
+Created by <a href="https://huggingface.co/indonesian-nlp">Indonesian NLP</a> team @2021
+<br/>
+<a href="https://github.com/indonesian-nlp/gpt2-app" target="_blank">GitHub</a> | <a href="https://github.com/indonesian-nlp/gpt2-app" target="_blank">Project Report</a>
+<br/>
+A mirror of the application is available <a href="{mirror_url}" target="_blank">here</a>
+</p>
+""", unsafe_allow_html=True)
+
+st.sidebar.markdown("""
+___
+        """, unsafe_allow_html=True)
+
+model = st.sidebar.selectbox('Model', (MODELS.keys()))
+
+
+@st.cache(suppress_st_warning=True, allow_output_mutation=True)
+def get_generator(model_name: str):
+    st.write(f"Loading the GPT2 model {model_name}, please wait...")
+    text_generator = pipeline('text-generation', model=model_name)
+    return text_generator
+
+
+# Disable the st.cache for this function due to issue on newer version of streamlit
+# @st.cache(suppress_st_warning=True, hash_funcs={tokenizers.Tokenizer: id})
+def process(text_generator, text: str, max_length: int = 100, do_sample: bool = True, top_k: int = 50, top_p: float = 0.95,
+            temperature: float = 1.0, max_time: float = 120.0, seed=42, repetition_penalty=1.0):
+    # st.write("Cache miss: process")
+    set_seed(seed)
+    if repetition_penalty == 0.0:
+        min_penalty = 1.05
+        max_penalty = 1.5
+        repetition_penalty = max(min_penalty + (1.0-temperature) * (max_penalty-min_penalty), 0.8)
+    result = text_generator(text, max_length=max_length, do_sample=do_sample,
+                            top_k=top_k, top_p=top_p, temperature=temperature,
+                            max_time=max_time, repetition_penalty=repetition_penalty)
+    return result
+
+
+st.title("Indonesian GPT-2 Applications")
+prompt_group_name = MODELS[model]["group"]
+st.header(prompt_group_name)
+description = f"This application is a demo for {MODELS[model]['description']}"
+st.markdown(description)
+model_name = f"Model name: [{MODELS[model]['name']}](https://huggingface.co/{MODELS[model]['name']})"
+st.markdown(model_name)
+if prompt_group_name in ["Indonesian GPT-2", "Indonesian Literature", "Indonesian Journal"]:
+    session_state = SessionState.get(prompt=None, prompt_box=None, text=None)
+    ALL_PROMPTS = list(PROMPT_LIST[prompt_group_name].keys())+["Custom"]
+
+    prompt = st.selectbox('Prompt', ALL_PROMPTS, index=len(ALL_PROMPTS)-1)
+
+    # Update prompt
+    if session_state.prompt is None:
+        session_state.prompt = prompt
+    elif session_state.prompt is not None and (prompt != session_state.prompt):
+        session_state.prompt = prompt
+        session_state.prompt_box = None
+        session_state.text = None
+    else:
+        session_state.prompt = prompt
+
+    # Update prompt box
+    if session_state.prompt == "Custom":
+        session_state.prompt_box = ""
+    else:
+        print(f"# prompt: {session_state.prompt}")
+        print(f"# prompt_box: {session_state.prompt_box}")
+        if session_state.prompt is not None and session_state.prompt_box is None:
+            session_state.prompt_box = random.choice(PROMPT_LIST[prompt_group_name][session_state.prompt])
+
+    session_state.text = st.text_area("Enter text", session_state.prompt_box)
+
+    max_length = st.sidebar.number_input(
+        "Maximum length",
+        value=100,
+        max_value=512,
+        help="The maximum length of the sequence to be generated."
+    )
+
+    temperature = st.sidebar.slider(
+        "Temperature",
+        value=0.9,
+        min_value=0.0,
+        max_value=2.0
+    )
+
+    do_sample = st.sidebar.checkbox(
+        "Use sampling",
+        value=True
+    )
+
+    top_k = 30
+    top_p = 0.95
+
+    if do_sample:
+        top_k = st.sidebar.number_input(
+            "Top k",
+            value=top_k,
+            help="The number of highest probability vocabulary tokens to keep for top-k-filtering."
+        )
+        top_p = st.sidebar.number_input(
+            "Top p",
+            value=top_p,
+            help="If set to float < 1, only the most probable tokens with probabilities that add up to top_p or higher "
+                 "are kept for generation."
+        )
+
+    seed = st.sidebar.number_input(
+        "Random Seed",
+        value=25,
+        help="The number used to initialize a pseudorandom number generator"
+    )
+
+    repetition_penalty = 0.0
+    automatic_repetition_penalty = st.sidebar.checkbox(
+        "Automatic Repetition Penalty",
+        value=True
+    )
+
+    if not automatic_repetition_penalty:
+        repetition_penalty = st.sidebar.slider(
+            "Repetition Penalty",
+            value=1.0,
+            min_value=1.0,
+            max_value=2.0
+        )
+
+    for group_name in MODELS:
+        if MODELS[group_name]["group"] in ["Indonesian GPT-2", "Indonesian Literature", "Indonesian Journal"]:
+            MODELS[group_name]["text_generator"] = get_generator(MODELS[group_name]["name"])
+    # text_generator = get_generator()
+    if st.button("Run"):
+        with st.spinner(text="Getting results..."):
+            memory = psutil.virtual_memory()
+            st.subheader("Result")
+            time_start = time.time()
+            # text_generator = MODELS[model]["text_generator"]
+            result = process(MODELS[model]["text_generator"], text=session_state.text, max_length=int(max_length),
+                             temperature=temperature, do_sample=do_sample,
+                             top_k=int(top_k), top_p=float(top_p), seed=seed, repetition_penalty=repetition_penalty)
+            time_end = time.time()
+            time_diff = time_end-time_start
+            result = result[0]["generated_text"]
+            st.write(result.replace("\n", "  \n"))
+            st.text("Translation")
+            translation = translate(result, "en", "id")
+            st.write(translation.replace("\n", "  \n"))
+            # st.write(f"*do_sample: {do_sample}, top_k: {top_k}, top_p: {top_p}, seed: {seed}*")
+            info = f"""
+            *Memory: {memory.total/(1024*1024*1024):.2f}GB, used: {memory.percent}%, available: {memory.available/(1024*1024*1024):.2f}GB*        
+            *Text generated in {time_diff:.5} seconds*
+            """
+            st.write(info)
+
+            # Reset state
+            session_state.prompt = None
+            session_state.prompt_box = None
+            session_state.text = None
+elif model.startswith("Indonesian Persona Chatbot"):
+    root_dir = pathlib.Path(".")
+    stc_chatbot(root_dir)

app/chatbot.html

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+
+    <title>Indonesian GPT2 Chatbot</title>
+    <link rel="stylesheet" href="css/main.css">
+    <script src="js/main.js"></script>
+</head>
+<body onload="pageSetup();">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
+
+    <div class="buttons" style="display: none">
+        <div class="minus button">-</div>
+        <div class="value">?</div>
+        <div class="plus button">+</div>
+    </div>
+    <div class="state" style="display: none">
+        <span class="users"></span>
+    </div>
+
+    <div class="container">
+        <div class="chat-container">
+            <div class="chat-messages">
+                <div class="messages">
+                </div>
+            </div>
+        </div>
+        <div class="chat-input input-group mb-3">
+            <input type="text" class="form-control user-input" placeholder="Type a message..." aria-label="User message" aria-describedby="basic-addon2">
+            <span class="input-group-text btn btn-primary user-input-button" id="basic-addon2">Send</span>
+        </div>
+        <!--
+        <div class="chat-suggestion">
+            Suggestion: <span class="js-loading">Loading…</span> <a class="js-suggestion hide">Kenapa kamu sedih?</a>
+        </div>
+        -->
+        <div class="server-message">
+            <span class="server-message-value"></span>
+        </div>
+        <div class="accordion" id="accordionExample">
+            <div class="accordion-item">
+                <h2 class="accordion-header" id="headingOne">
+                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                        Bots Personalities
+                    </button>
+                </h2>
+                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+                    <form class="bot-personality">
+                        <div class="mb-3">
+                            <div class="row g-2 align-items-center">
+                                <div class="col-auto">
+                                    <label for="inputPersonality1" class="col-form-label">Personality 1:</label>
+                                </div>
+                                <div class="col-auto">
+                                    <input type="text" class="form-control" id="inputPersonality1">
+                                </div>
+                            </div>
+                            <div class="row g-2 align-items-center">
+                                <div class="col-auto">
+                                    <label for="inputPersonality2" class="col-form-label">Personality 2:</label>
+                                </div>
+                                <div class="col-auto">
+                                    <input type="text" class="form-control" id="inputPersonality2">
+                                </div>
+                            </div>
+                            <div class="row g-2 align-items-center">
+                                <div class="col-auto">
+                                    <label for="inputPersonality3" class="col-form-label">Personality 3:</label>
+                                </div>
+                                <div class="col-auto">
+                                    <input type="text" class="form-control" id="inputPersonality3">
+                                </div>
+                            </div>
+                            <div class="row g-2 align-items-center">
+                                <div class="col-auto">
+                                    <label for="inputPersonality4" class="col-form-label">Personality 4:</label>
+                                </div>
+                                <div class="col-auto">
+                                    <input type="text" class="form-control" id="inputPersonality4">
+                                </div>
+                            </div>
+                            <div class="row g-2 align-items-center">
+                                <div class="col-auto">
+                                    <label for="inputPersonality5" class="col-form-label">Personality 5:</label>
+                                </div>
+                                <div class="col-auto">
+                                    <input type="text" class="form-control" id="inputPersonality5">
+                                </div>
+                            </div>
+                        </div>
+                        <button id="updatePersonality" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+                            Update Personality
+                        </button>
+                    </form>
+                </div>
+            </div>
+            <div class="accordion-item">
+                <h2 class="accordion-header" id="headingThree">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                        Parameters
+                    </button>
+                </h2>
+                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+
+                    <div class="chat-parameter card card-body">
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" value="" id="doSample" checked>
+                            <label class="form-check-label" for="doSample">
+                                Do Sample
+                            </label>
+                        </div>
+                        <label for="minLength" class="form-label">Minimal Length: <span id="minLengthValue">1</span></label>
+                        <input type="range" class="form-range" min="1" max="10" value="1" id="minLength" onmousemove="updateValue('minLengthValue', this.value);">
+                        <label for="maxLength" class="form-label">Maximal Length: <span id="maxLengthValue">20</span></label>
+                        <input type="range" class="form-range" min="20" max="50" value="20" id="maxLength" onmousemove="updateValue('maxLengthValue', this.value);">
+                        <label for="temperature" class="form-label">Temperature: <span id="temperatureValue">0.7</span></label>
+                        <input type="range" class="form-range" min="0.5" max="10" value="0.7" step="0.1" id="temperature" onmousemove="updateValue('temperatureValue', this.value);">
+                        <label for="topK" class="form-label">Top k: <span id="topKValue">0</span></label>
+                        <input type="range" class="form-range" min="0" max="50" value="0" id="topK" onmousemove="updateValue('topKValue', this.value);">
+                        <label for="topP" class="form-label">Top p: <span id="topPValue">0.9</span></label>
+                        <input type="range" class="form-range" min="0.1" max="1.0" value="0.9" step="0.01" id="topP" onmousemove="updateValue('topPValue', this.value);">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

app/css/main.css

@@ -0,0 +1,109 @@
+body {
+    font-family: "Arial, Courier New", sans-serif;
+    text-align: center;
+}
+
+h1 {
+    margin: 10px 10px;
+}
+
+.buttons {
+    font-size: 2em;
+    display: flex;
+    justify-content: center;
+}
+
+.button, .value {
+    line-height: 1;
+    padding: 1rem;
+    margin: 1rem;
+    border: medium solid;
+    min-height: 1em;
+    min-width: 1em;
+}
+
+.button {
+    cursor: pointer;
+    user-select: none;
+}
+
+.minus {
+    color: red;
+}
+
+.plus {
+    color: green;
+}
+
+.value {
+    min-width: 2em;
+}
+
+.state {
+    font-size: 2em;
+}
+
+.container {
+    min-width: 30em;
+    max-width: 40em;
+}
+
+.accordion-collapse {
+    padding: 5px 5px 0 5px;
+}
+
+.chat-container {
+    margin: 10px 0;
+    min-height: 300px;
+    max-height: 600px;
+    overflow: auto;
+}
+
+.bot-personality {
+    text-align: left;
+    margin: 0 0 5px 0;
+}
+
+.chat-parameter {
+    text-align: left;
+    margin: 5px 0 5px 0;
+}
+
+.bot-personality input {
+    margin: 5px 0 0 0;
+    min-width: 20em;
+}
+
+.message {
+    margin: 5px 0;
+}
+
+.message-inner {
+    font-size: 16px;
+}
+
+.outgoing {
+    text-align: right;
+}
+
+.outgoing .badge {
+    text-align: right;
+}
+
+.botPersonality, .incoming, .incoming .badge, .chat-suggestion, .server-message, .parameters {
+    text-align: left;
+}
+
+.chat-suggestion, .server-message
+{
+    padding-left: 5px;
+}
+
+.server-message-value {
+    font-style: italic;
+}
+
+#collapseParameter {
+    width: 300px;
+    margin: 8px 0px;
+}

app/js/main.js

@@ -0,0 +1,122 @@
+updateValue = function(id, value) {
+    document.getElementById(id).innerText = value;
+}
+
+htmlToElement = function(html) {
+    let template = document.createElement('template');
+    html = html.trim(); // Never return a text node of whitespace as the result
+    template.innerHTML = html;
+    return template.content.firstChild;
+}
+
+pageSetup = function() {
+    const minus = document.querySelector('.minus');
+    const plus = document.querySelector('.plus');
+    const value = document.querySelector('.value');
+    // const users = document.querySelector('.users');
+    const userInput = document.querySelector('.user-input');
+    const userInputButton = document.querySelector('.user-input-button');
+    const serverMessageValue = document.querySelector('.server-message-value');
+    const messages = document.querySelector('.messages');
+    const updatePersonality = document.getElementById("updatePersonality")
+    const websocket = new WebSocket("wss://gpt2-chat.ai-research.id/");
+    //const websocket = new WebSocket("ws://localhost:8502/");
+
+    minus.onclick = function () {
+        websocket.send(JSON.stringify({action: 'minus'}));
+    }
+
+    plus.onclick = function () {
+        websocket.send(JSON.stringify({action: 'plus'}));
+    }
+
+    updatePersonality.onclick = function () {
+        const elements = document.querySelectorAll(".bot-personality input")
+        let data = {
+            "action": "personality",
+            "message": []
+        }
+        for (let i = 0; i < Math.min(elements.length, 5); i++) {
+            if(elements[i].value.length >0)
+                data.message.push(elements[i].value);
+        }
+        websocket.send(JSON.stringify(data));
+    }
+
+    let getParameters = function() {
+        return {
+            "do_sample": document.getElementById("doSample").checked,
+            "min_length": parseInt(document.getElementById("minLength").value),
+            "max_length": parseInt(document.getElementById("maxLength").value),
+            "temperature": parseFloat(document.getElementById("temperature").value),
+            "top_k": parseInt(document.getElementById("topK").value),
+            "top_p": parseFloat(document.getElementById("topP").value),
+        };
+    }
+
+    let processUserInput = function (userInput) {
+        let parameters = getParameters();
+        parameters["action"] = "talk";
+        parameters["utterance"] = userInput.value;
+        websocket.send(JSON.stringify(parameters));
+        const element = htmlToElement("<div class=\"message outgoing\"><div class=\"message-inner badge bg-primary text-wrap\">"
+            + userInput.value + "</div></div>");
+        userInput.value = "";
+        messages.appendChild(element);
+        messages.scrollIntoView(false)
+    }
+
+    userInputButton.onclick = function () {
+        processUserInput(userInput);
+    }
+
+    userInput.addEventListener("keyup", function(event) {
+        if (event.keyCode === 13) {
+            // Cancel the default action, if needed
+            event.preventDefault();
+            processUserInput(userInput);
+        }
+    });
+
+    websocket.onmessage = function (event) {
+        let data = JSON.parse(event.data);
+        switch (data.type) {
+            case 'connection':
+                console.log(data.value)
+                websocket.send(JSON.stringify({action: 'dialog', personality: []}));
+                break;
+            case 'state':
+                value.textContent = data.value;
+                break;
+            case 'users':
+                serverMessageValue.textContent = (
+                    data.count.toString() + " user" +
+                    (data.count === 1 ? "" : "s") + " online");
+                break;
+            case 'dialog':
+                console.log(data.message)
+                break;
+            case 'talk':
+                const element = htmlToElement("<div class=\"message incoming\"><div class=\"message-inner badge bg-success text-wrap\">"
+                    + data.message+ "</div></div>");
+                messages.appendChild(element);
+                messages.scrollIntoView(false)
+                break;
+            case 'personality':
+                const elements = document.querySelectorAll(".bot-personality input")
+                for (let i = 0; i < Math.min(elements.length, data.message.length); i++) {
+                    elements[i].value = data.message[i];
+                }
+                break;
+            case 'personality_reply':
+                serverMessageValue.textContent = data.message
+                setTimeout(function() {
+                    websocket.send(JSON.stringify({action: 'get_users'}));
+                }, 3000);
+                break;
+            default:
+                console.error(
+                    "unsupported event", data);
+        }
+    };
+}

app/prompts.py

@@ -0,0 +1,57 @@
+PROMPT_LIST = {
+    "Indonesian GPT-2": {
+        "Resep masakan (recipe)": [
+            "Berikut adalah cara memasak sate ayam:\n",
+            "Langkah-langkah membuat nasi goreng:\n",
+            "Berikut adalah bahan-bahan membuat nastar:\n"
+        ],
+        "Puisi (poetry)": [
+            "Aku ingin jadi merpati\nTerbang di langit yang damai\nBernyanyi-nyanyi tentang masa depan\n",
+            "Terdiam aku satu persatu dengan tatapan binar\nSenyawa merasuk dalam sukma membuat lara\nKefanaan membentuk kelemahan"
+        ],
+        "Cerpen (short story)": [
+            "Putri memakai sepatunya dengan malas. Kalau bisa, selama seminggu ini ia bolos sekolah saja. Namun, Mama pasti akan marah. Ulangan tengah semester telah selesai. Minggu ini, di sekolah sedang berlangsung pekan olahraga.",
+            "\"Wah, hari ini cerah sekali ya,\" ucap Budi ketika ia keluar rumah.",
+            "Sewindu sudah kita tak berjumpa, rinduku padamu sudah tak terkira."
+        ],
+        "Sejarah (history)": [
+            "Mohammad Natsir adalah seorang ulama, politisi, dan pejuang kemerdekaan Indonesia.",
+            "Ir. H. Soekarno adalah Presiden pertama Republik Indonesia. Ia adalah seorang tokoh perjuangan yang memainkan peranan penting dalam memerdekakan bangsa Indonesia",
+            "Borobudur adalah sebuah candi Buddha yang terletak di sebelah barat laut Yogyakarta. Monumen ini merupakan model alam semesta dan dibangun sebagai tempat suci untuk memuliakan Buddha"
+        ],
+    },
+    "Indonesian Literature": {
+        "Adult Romance": [
+            "Ini adalah kisah tentang seorang laki-laki yang berusaha memperjuangkan cintanya",
+            "Alunan musik terdengar memenuhi ruangan kantor, cowok itu duduk di balik meja kerjanya sambil memejamkan mata. Berusaha meresapi nada per nada",
+            "Aku mencari dan terus mencari\nDimana bahagia akan kutemui\nKumencari terus mencari\nHingga ku tak mengerti arti hari-hari",
+            "Gadis itu mengharuskan dirinya tegar, dan kuat dalam menghadapi masalah. Menahan air matanya jatuh setiap kali ingin menangis"
+        ],
+        "Horror": [
+            "Ditengah-tengah perbincangan mereka berdua, datanglah sesosok mahluk tinggi hitam dan besar",
+            "Sesosok hantu perempuan seperti kuntilanak yang melayang keluar dan bergerak perlahan dari pintu kamar kecil tadi yang tertutup.",
+            "Sejak pertemuannya dengan leak, yang ternyata tinggal satu atap dengannya, hidupnya terus dihantui oleh berbagai sosok seram."
+        ],
+        "Poetry": [
+            "Aku ingin menulis sajak\nyang melesat dalam kejap\nmenembus hati yang pejam\nmemaksa mimpimu terjaga\ndari semu",
+            "Malam ini langitku lengang\ntiada hujan yang membasuh rindu\npun awan yang biasanya temani seruput kopimu",
+            "Di sisimu waktu menjelma\nsetangkai kembang api\ngelora membakar tanpa jeda\nmemercik pijar binar kita."
+        ]
+    },
+    "Indonesian Journal": {
+        "Biologi (biology)": [
+            "Tujuan  penelitian ini untuk menentukan keanekaragaman Arthropoda pada lahan pertanian kacang",
+            "Identifikasi spesies secara molekuler sangat diperlukan dalam mempelajari taksonomi",
+            "Penelitian ini bertujuan untuk menentukan identitas invertebrata laut dari Perairan Papua dengan teknik DNA barcoding"],
+        "Psikologi (psychology)": [
+            "Penelitian ini bertujuan untuk mengetahui perilaku wirausaha remaja yang diprediksi dari motivasi intrinsik",
+            "Tujuan dari penelitian ini adalah untuk mendapatkan data empiris mengenai gambaran peta bakat mahasiswa Fakultas Psikologi Unjani"],
+        "Ekonomi (economics)": [
+            "Faktor kepuasan dan kepercayaan konsumen merupakan dua faktor kunci dalam meningkatkan penetrasi e-commerce. Penelitian yang dilakukan",
+            "Penelitian ini bertujuan untuk menganalisis pola konsumsi pangan di Indonesia",
+            "Model GTAP diimplementasikan untuk melihat dampak yang ditimbulkan pada PDB"],
+        "Teknologi Informasi (IT)": [
+            "pembuatan aplikasi ini menggunakan pengembangan metode Waterfall dan dirancang mengguynakan Unified Modeling Language (UML) dengan bahasa pemrograman",
+            "Berdasarkan masalah tersebut, maka penulis termotivasi untuk membangun Pengembangan Sistem Informasi Manajemen"]
+    },
+}

requirements.txt

@@ -0,0 +1,10 @@
+numpy
+torch
+tokenizers
+transformers
+datasets
+mtranslate
+# streamlit version 0.67.1 is needed due to issue with caching
+# streamlit==0.67.1
+streamlit
+psutil