Duplicate from Fisharp/starcoder-playground

Co-authored-by: Salvador Fisharp <[email protected]>

.gitattributes

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

.gitignore

@@ -0,0 +1,167 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+
+# Temporary ignoring notebook files, conda environment yaml and the vs code workspace settings
+.vscode
+**/*.ipynb
+**/*conda*.yml
+

README.md

@@ -0,0 +1,78 @@
+---
+title: StarCoder Demo
+emoji: 💫
+colorFrom: gray
+colorTo: blue
+sdk: gradio
+sdk_version: 3.28.3
+app_file: app.py
+pinned: true
+duplicated_from: Fisharp/starcoder-playground
+---
+
+
+# ⭐StarCoder Demo💫
+
+## Code-Completion Playground 💻 with ⭐StarCoder Models
+
+This is a demo playground to generate code with the power of ⭐[StarCoder](https://huggingface.co/bigcode/starcoder) a **15B** parameter model for code generation in **80+** programming languages.
+
+ℹ️ This is not an instruction model but just a code completion tool.
+
+🗣️For instruction and chatting you can chat with a prompted version of the model directly at the [HuggingFace🤗Chat💬(hf.co/chat)](https://huggingface.co/chat/?model=starcoder)
+
+---
+
+**Intended Use**: this app and its [supporting model](https://huggingface.co/bigcode/starcoder) are provided for demonstration purposes only; not to serve as a replacement for human expertise. For more details on the model's limitations in terms of factuality and biases, please refer to the source [model card](hf.co/bigcode)
+
+⚠️ Any use or sharing of this demo constitutes your acceptance of the BigCode [OpenRAIL-M](https://huggingface.co/spaces/bigcode/bigcode-model-license-agreement) License Agreement and the use restrictions included within.
+
+---
+
+## Model Formats
+
+The model is pretrained on code and is formatted with special tokens in addition to the pure code data,\
+such as prefixes specifying the source of the file or tokens separating code from a commit message.\
+Use these templates to explore the model's capacities:
+
+### 1. Prefixes 🏷️
+
+For pure code files, use any combination of the following prefixes:
+
+```xml
+<reponame>REPONAME<filename>FILENAME<gh_stars>STARS\ncode<|endoftext|>
+```
+
+STARS can be one of: 0, 1-10, 10-100, 100-1000, 1000+
+
+### 2. Commits 💾
+
+The commits data is formatted as follows:
+
+```xml
+<commit_before>code<commit_msg>text<commit_after>code<|endoftext|>
+```
+
+### 3. Jupyter Notebooks 📓
+
+The model is trained on Jupyter notebooks as Python scripts and structured formats like:
+
+```xml
+<start_jupyter><jupyter_text>text<jupyter_code>code<jupyter_output>output<jupyter_text>
+```
+
+### 4. Issues 🐛
+
+We also trained on GitHub issues using the following formatting:
+
+```xml
+<issue_start><issue_comment>text<issue_comment>...<issue_closed>
+```
+
+### 5. Fill-in-the-middle 🧩
+
+Fill in the middle requires rearranging the model inputs. The playground handles this for you - all you need is to specify where to fill:
+
+```xml
+code before<FILL_HERE>code after
+```

app.py

@@ -0,0 +1,247 @@
+import sys
+import os
+import logging as log
+from typing import Generator
+
+import gradio as gr
+from gradio.themes.utils import sizes
+from text_generation import Client
+from src.request import StarCoderRequest, StarCoderRequestConfig
+
+from src.utils import (
+    get_file_as_string,
+    get_sections,
+    get_url_from_env_or_default_path,
+    preview
+)
+from constants import (
+    FIM_MIDDLE,
+    FIM_PREFIX,
+    FIM_SUFFIX,
+    END_OF_TEXT,
+    MIN_TEMPERATURE,
+)
+from settings import (
+    DEFAULT_PORT,
+    DEFAULT_STARCODER_API_PATH,
+    DEFAULT_STARCODER_BASE_API_PATH,
+)
+
+HF_TOKEN = os.environ.get("HF_TOKEN", None)
+# Gracefully exit the app if the HF_TOKEN is not set,
+# printing to system `errout` the error (instead of raising an exception)
+# and the expected behavior
+if not HF_TOKEN:
+    ERR_MSG = """
+        Please set the HF_TOKEN environment variable with your Hugging Face API token.
+        You can get one by signing up at https://huggingface.co/join and then visiting
+        https://huggingface.co/settings/tokens."""
+    print(ERR_MSG, file=sys.stderr)
+    # gr.errors.GradioError(ERR_MSG)
+    # gr.close_all(verbose=False)
+    sys.exit(1)
+
+API_URL_STAR = get_url_from_env_or_default_path("STARCODER_API", DEFAULT_STARCODER_API_PATH)
+API_URL_BASE = get_url_from_env_or_default_path("STARCODER_BASE_API", DEFAULT_STARCODER_BASE_API_PATH)
+
+preview("StarCoder Model URL", API_URL_STAR)
+preview("StarCoderBase Model URL", API_URL_BASE)
+preview("HF Token", HF_TOKEN, ofuscate=True)
+
+_styles = get_file_as_string("styles.css")
+_script = get_file_as_string("community-btn.js")
+_sharing_icon_svg = get_file_as_string("community-icon.svg")
+_loading_icon_svg = get_file_as_string("loading-icon.svg")
+
+# Loads the whole content of the ./README.md file
+# slicing/unpacking its different sections into their proper variables
+readme_file_content = get_file_as_string("README.md", path='./')
+(
+    manifest,
+    description,
+    disclaimer,
+    formats,
+) = get_sections(readme_file_content, "---", up_to=4)
+
+theme = gr.themes.Monochrome(
+    primary_hue="indigo",
+    secondary_hue="blue",
+    neutral_hue="slate",
+    radius_size=sizes.radius_sm,
+    font=[
+        gr.themes.GoogleFont("IBM Plex Sans", [400, 600]),
+        "ui-sans-serif",
+        "system-ui",
+        "sans-serif",
+    ],
+    text_size=sizes.text_lg,
+)
+
+HEADERS = {
+    "Authorization": f"Bearer {HF_TOKEN}",
+}
+client_star = Client(API_URL_STAR, headers=HEADERS)
+client_base = Client(API_URL_BASE, headers=HEADERS)
+
+def get_tokens_collector(request: StarCoderRequest) -> Generator[str, None, None]:
+
+    model_client = client_star if request.settings.version == "StarCoder" else client_base
+    stream = model_client.generate_stream(request.prompt, **request.settings.kwargs())
+    for response in stream:
+        # print(response.token.id, response.token.text)
+        # if token.text != END_OF_TEXT:
+        if response.token.id != 0:
+            yield response.token.text
+
+def get_tokens_accumulator(request: StarCoderRequest) -> Generator[str, None, None]:
+    # start with the prefix (if in fim_mode)
+    output = request.prefix if request.fim_mode else request.prompt
+    for token in get_tokens_collector(request=request):
+        output += token
+        yield output
+    # after the last token, append the suffix (if in fim_mode)
+    if request.fim_mode:
+        output += request.suffix
+        yield output
+    # Append an extra line at the end
+    yield output + '\n'
+
+def get_tokens_linker(request: StarCoderRequest) -> str:
+    return "".join(list(get_tokens_collector(request)))
+
+def generate(
+        prompt: str,
+        temperature = 0.9,
+        max_new_tokens = 256,
+        top_p = 0.95,
+        repetition_penalty = 1.0,
+        version = "StarCoder",
+    ) -> Generator[str, None, None]:
+    request = StarCoderRequest(
+        prompt=prompt,
+        settings=StarCoderRequestConfig(
+            version=version,
+            temperature=temperature,
+            max_new_tokens=max_new_tokens,
+            top_p=top_p,
+            repetition_penalty=repetition_penalty,
+        )
+    )
+    yield from get_tokens_accumulator(request)
+
+def process_example(
+        prompt: str,
+        temperature = 0.9,
+        max_new_tokens = 256,
+        top_p = 0.95,
+        repetition_penalty = 1.0,
+        version = "StarCoder",
+    ) -> Generator[str, None, None]:
+    request = StarCoderRequest(
+        prompt=prompt,
+        settings=StarCoderRequestConfig(
+            version=version,
+            temperature=temperature,
+            max_new_tokens=max_new_tokens,
+            top_p=top_p,
+            repetition_penalty=repetition_penalty,
+        )
+    )
+    yield from get_tokens_linker(request)
+
+# todo: move it into the README too
+examples = [
+    "X_train, y_train, X_test, y_test = train_test_split(X, y, test_size=0.1)\n\n# Train a logistic regression model, predict the labels on the test set and compute the accuracy score",
+    "// Returns every other value in the array as a new array.\nfunction everyOther(arr) {",
+    "def alternating(list1, list2):\n   results = []\n   for i in range(min(len(list1), len(list2))):\n       results.append(list1[i])\n       results.append(list2[i])\n   if len(list1) > len(list2):\n       <FILL_HERE>\n   else:\n       results.extend(list2[i+1:])\n   return results",
+]
+
+with gr.Blocks(theme=theme, analytics_enabled=False, css=_styles) as demo:
+    with gr.Column():
+        gr.Markdown(description)
+        with gr.Row():
+            with gr.Column():
+                instruction = gr.Textbox(
+                    placeholder="Enter your code here",
+                    label="Code",
+                    elem_id="q-input",
+                )
+                submit = gr.Button("Generate", variant="primary")
+                output = gr.Code(elem_id="q-output", lines=30)
+                with gr.Row():
+                    with gr.Column():
+                        with gr.Accordion("Advanced settings", open=False):
+                            with gr.Row():
+                                column_1, column_2 = gr.Column(), gr.Column()
+                                with column_1:
+                                    temperature = gr.Slider(
+                                        label="Temperature",
+                                        value=0.2,
+                                        minimum=0.0,
+                                        maximum=1.0,
+                                        step=0.05,
+                                        interactive=True,
+                                        info="Higher values produce more diverse outputs",
+                                    )
+                                    max_new_tokens = gr.Slider(
+                                        label="Max new tokens",
+                                        value=256,
+                                        minimum=0,
+                                        maximum=8192,
+                                        step=64,
+                                        interactive=True,
+                                        info="The maximum numbers of new tokens",
+                                    )
+                                with column_2:
+                                    top_p = gr.Slider(
+                                        label="Top-p (nucleus sampling)",
+                                        value=0.90,
+                                        minimum=0.0,
+                                        maximum=1,
+                                        step=0.05,
+                                        interactive=True,
+                                        info="Higher values sample more low-probability tokens",
+                                    )
+                                    repetition_penalty = gr.Slider(
+                                        label="Repetition penalty",
+                                        value=1.2,
+                                        minimum=1.0,
+                                        maximum=2.0,
+                                        step=0.05,
+                                        interactive=True,
+                                        info="Penalize repeated tokens",
+                                    )
+                    with gr.Column():
+                        version = gr.Dropdown(
+                                    ["StarCoderBase", "StarCoder"],
+                                    value="StarCoder",
+                                    label="Version",
+                                    info="",
+                                    )
+                gr.Markdown(disclaimer)
+                with gr.Group(elem_id="share-btn-container"):
+                    community_icon = gr.HTML(_sharing_icon_svg, visible=True)
+                    loading_icon = gr.HTML(_loading_icon_svg, visible=True)
+                    share_button = gr.Button(
+                        "Share to community", elem_id="share-btn", visible=True
+                    )
+                gr.Examples(
+                    examples=examples,
+                    inputs=[instruction],
+                    cache_examples=False,
+                    fn=process_example,
+                    outputs=[output],
+                )
+                gr.Markdown(formats)
+
+    submit.click(
+        generate,
+        inputs=[instruction, temperature, max_new_tokens, top_p, repetition_penalty, version],
+        outputs=[output],
+        # preprocess=False,
+        max_batch_size=8,
+        show_progress=True
+    )
+    share_button.click(None, [], [], _js=_script)
+
+demo.queue(concurrency_count=16).launch(debug=True, server_port=DEFAULT_PORT)

constants.py

@@ -0,0 +1,7 @@
+FIM_PREFIX = "<fim_prefix>"
+FIM_MIDDLE = "<fim_middle>"
+FIM_SUFFIX = "<fim_suffix>"
+END_OF_TEXT = "<|endoftext|>"
+
+# Near zero temperature to avoid division by zero
+MIN_TEMPERATURE = 1e-4

requirements.txt

@@ -0,0 +1,7 @@
+# Gradio
+gradio==3.28.2
+
+# HuggingFace
+huggingface_hub==0.14.1
+text-generation==0.5.1
+transformers==4.28.1

settings.py

@@ -0,0 +1,16 @@
+# URLs for the StarCoder Models/APIs
+DEFAULT_HUGGINGFACE_MODELS_API_BASE_URL = "https://api-inference.huggingface.co/models/"
+DEFAULT_STARCODER_API_PATH = "bigcode/starcoder/"
+DEFAULT_STARCODER_BASE_API_PATH = "bigcode/starcoderbase/"
+FIM_INDICATOR = "<FILL_HERE>"
+DEFAULT_PORT = 7860
+
+STATIC_PATH = "static"
+
+DEFAULT_SETTINGS = dict(
+    temperature = 0.9,
+    max_new_tokens = 256,
+    top_p = 0.95,
+    repetition_penalty = 1.0,
+    version = "StarCoder",
+)

src/request.py

@@ -0,0 +1,74 @@
+from dataclasses import dataclass
+from typing import Dict, Any, Union
+
+from constants import (
+    FIM_MIDDLE,
+    FIM_PREFIX,
+    FIM_SUFFIX,
+    MIN_TEMPERATURE,
+)
+from settings import (
+    FIM_INDICATOR,
+)
+
+@dataclass
+class StarCoderRequestConfig:
+    temperature: float
+    max_new_tokens: int
+    top_p: float
+    repetition_penalty: float
+    version: str
+
+    def __post_init__(self):
+        self.temperature = min(float(self.temperature), MIN_TEMPERATURE)
+        self.max_new_tokens = int(self.max_new_tokens)
+        self.top_p = float(self.top_p)
+        self.repetition_penalty = float(self.repetition_penalty)
+        self.do_sample = True
+        self.seed = 42
+
+    def __repr__(self) -> str:
+        """Returns a custom string representation of the Configurations."""
+        values = dict(
+            model = self.version,
+            temp = self.temperature,
+            tokens = self.max_new_tokens,
+            p = self.top_p,
+            penalty = self.repetition_penalty,
+            sample = self.do_sample,
+            seed = self.seed,
+        )
+        return f"StarCoderRequestConfig({values})"
+
+    def kwargs(self) -> Dict[str, Union[Any, float, int]]:
+        """
+        Returns a custom dictionary representation of the Configurations.
+        removing the model version.
+        """
+        values = vars(self).copy()
+        values.pop("version")
+        return values
+
+@dataclass
+class StarCoderRequest:
+    prompt: str
+    settings: StarCoderRequestConfig
+
+    def __post_init__(self):
+        self.fim_mode = FIM_INDICATOR in self.prompt
+        self.prefix, self.suffix = None, None
+        if self.fim_mode:
+            try:
+                self.prefix, self.suffix = self.prompt.split(FIM_INDICATOR)
+            except Exception as err:
+                print(str(err))
+                raise ValueError(f"Only one {FIM_INDICATOR} allowed in prompt!") from err
+            self.prompt = f"{FIM_PREFIX}{self.prefix}{FIM_SUFFIX}{self.suffix}{FIM_MIDDLE}"
+
+    def __repr__(self) -> str:
+        """Returns a custom string representation of the Request."""
+        values = dict(
+            prompt = self.prompt,
+            configuration = self.settings,
+        )
+        return f"StarCoderRequest({values})"

src/utils.py

@@ -0,0 +1,97 @@
+import os
+from typing import List
+from urllib.parse import urljoin
+
+from settings import (
+    DEFAULT_HUGGINGFACE_MODELS_API_BASE_URL,
+    STATIC_PATH,
+)
+
+def masked(value: str, n_shown: int, length: int = None) -> str:
+    """Returns a string with the first and last n_shown characters
+    and the middle of the string replaced with '*'
+
+    Args:
+        value (str): The string to mask
+        n_shown (int): The number of characters to show at the beginning and end of the string
+        length (int, optional): The length of the string. If not given, it will be calculated as the length of the value. Defaults to None.
+
+    Returns:
+        str: The masked string
+    """
+    l = length or len(value)
+    return value[0:n_shown] + '*'*(length-2*n_shown) + value[-n_shown:]
+
+
+def ofuscated(value: str) -> str:
+    """Returns a string with the first and last 4 characters
+    and the middle of the string replaced with '*'
+
+    Args:
+        value (str): The string to mask
+
+    Returns:
+        str: The masked string
+    """
+    return masked(value, 4, len(value)//2)
+
+
+def preview(label:str, value: str, ofuscate=False):
+    """Print the variable name and its value in a nice way.
+    If ofuscate is True, it will ofuscate the value
+
+    Args:
+        variable_name (str): The name of the variable to print
+        ofuscate (bool, optional): If True, it will ofuscate the value. Defaults to False.
+    """
+    str_value = ofuscated(str(value)) if ofuscate else str(value)
+    print(f"{label} = {str_value}")
+
+def get_url_from_env_or_default_path(env_name: str, api_path: str) -> str:
+    """Takes an url from the env variable (given the env name)
+    or combines with urljoin the default models base url
+    with the default path (given the path name)
+
+    Args:
+        env_name (str): The name of the environment variable to check
+        api_path (str): The default path to use if the environment variable is not set
+
+    Returns:
+        str: The url to use
+    """
+    return os.environ.get(env_name) or urljoin(
+        DEFAULT_HUGGINGFACE_MODELS_API_BASE_URL, api_path
+    )
+
+def get_file_as_string(file_name, path=STATIC_PATH) -> str:
+    """Loads the content of a file given its name
+    and returns all of its lines as a single string
+    if a file path is given, it will be used
+    instead of the default static path (from settings)
+
+    Args:
+        file_name (_type_): The name of the file to load.
+        path (str, optional): The path to the file. Defaults to the current directory.
+
+    Returns:
+        str: The content of the file as a single string
+    """
+    with open(os.path.join(path, file_name), mode='r', encoding='UTF-8') as f:
+        return f.read()
+
+
+def get_sections(string: str, delimiter: str, up_to: int = None) -> List[str]:
+    """Splits a string into sections given a delimiter
+
+    Args:
+        string (str): The string to split
+        delimiter (str): The delimiter to use
+        up_to (int, optional): The maximum number of sections to return.
+                Defaults to None (which means all sections)
+
+    Returns:
+        List[str]: The list of sections (up to the given limit, if any provided)
+    """
+    return [section.strip()
+            for section in string.split(delimiter)
+            if (section and not section.isspace())][:up_to]

static/community-btn.js

@@ -0,0 +1,75 @@
+async () => {
+	async function uploadFile(file){
+		const UPLOAD_URL = 'https://huggingface.co/uploads';
+		const response = await fetch(UPLOAD_URL, {
+			method: 'POST',
+			headers: {
+				'Content-Type': file.type,
+				'X-Requested-With': 'XMLHttpRequest',
+			},
+			body: file, /// <- File inherits from Blob
+		});
+		const url = await response.text();
+		return url;
+	}
+
+	async function getInputImgFile(imgEl){
+        const res = await fetch(imgEl.src);
+        const blob = await res.blob();
+        const imgId = Date.now() % 200;
+        const isPng = imgEl.src.startsWith(`data:image/png`);
+        if(isPng){
+            const fileName = `sd-perception-${{imgId}}.png`;
+            return new File([blob], fileName, { type: 'image/png' });
+        }else{
+            const fileName = `sd-perception-${{imgId}}.jpg`;
+            return new File([blob], fileName, { type: 'image/jpeg' });
+        }
+	}
+
+    // const gradioEl = document.querySelector('body > gradio-app');
+    const gradioEl = document.querySelector("gradio-app");
+    const inputTxt = gradioEl.querySelector('#q-input textarea').value;
+    let outputTxt = gradioEl.querySelector('#q-output .codemirror-wrapper .cm-scroller > div:nth-of-type(2)').innerText;
+    outputTxt = `<pre>${outputTxt}</pre>`
+
+    const titleLength = 150;
+    let titleTxt = inputTxt;
+    if(titleTxt.length > titleLength){
+        titleTxt = titleTxt.slice(0, titleLength) + ' ...';
+    }
+
+    const shareBtnEl = gradioEl.querySelector('#share-btn');
+    const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
+    const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
+
+    if(!inputTxt || !outputTxt){
+        return;
+    };
+
+    shareBtnEl.style.pointerEvents = 'none';
+    shareIconEl.style.display = 'none';
+    loadingIconEl.style.removeProperty('display');
+
+	const descriptionMd = `### Question:
+${inputTxt}
+
+### Answer:
+
+${outputTxt}`;
+
+    const params = {
+        title: titleTxt,
+        description: descriptionMd,
+    };
+
+    const paramsStr = Object.entries(params)
+        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+        .join('&');
+
+	window.open(`https://huggingface.co/spaces/fisharp/starcoder-playground/discussions/new?${paramsStr}`, '_blank');
+
+    shareBtnEl.style.removeProperty('pointer-events');
+    shareIconEl.style.removeProperty('display');
+    loadingIconEl.style.display = 'none';
+}

static/styles.css

@@ -0,0 +1,78 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap');
+
+h1, h2 {
+    font-family: 'IBM Plex Mono', sans-serif;
+}
+
+.generating {
+    visibility: hidden
+}
+
+.gradio-container {
+    color: black
+}
+
+/* monospace_css */
+#q-input textarea {
+    font-family: monospace, 'Consolas', Courier, monospace;
+}
+
+/* Share Button */
+
+/* it was hidden directly inside the svg xml content */
+#share-btn-loading-icon {
+    display: none;
+}
+
+a {
+    text-decoration-line: underline;
+    font-weight: 600;
+}
+
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+#share-btn-container {
+    display: flex;
+    padding-left: 0.5rem !important;
+    padding-right: 0.5rem !important;
+    background-color: #000000;
+    justify-content: center;
+    align-items: center;
+    border-radius: 9999px !important;
+    width: 15rem;
+}
+
+#share-btn {
+    all: initial;
+    color: #ffffff;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', sans-serif;
+    margin-left: 0.5rem !important;
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+}
+
+#share-btn * {
+    all: unset;
+}
+
+#share-btn-container div:nth-child(-n+2) {
+    width: auto !important;
+    min-height: 0px !important;
+}
+
+#share-btn-container .wrap {
+    display: none !important;
+}