Relocation of static contents to their own files

README.md

@@ -1,13 +1,30 @@
 ---
-title: BigCode - Playground
-emoji: 🪐
-colorFrom: grey
-colorTo: yellow
+title: StarCoder Completion
+emoji: 💫
+colorFrom: gray
+colorTo: blue
 sdk: gradio
 sdk_version: 3.28.3
 app_file: app.py
-pinned: false
+pinned: true
 duplicated_from: bigcode/bigcode-playground
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# StarCoder Demo
+
+## Star💫Coder Code Completion Playground 💻
+
+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.
+
+---

app.py

@@ -1,173 +1,150 @@
-import json
+import sys
 import os
-import shutil
-import requests
 
 import gradio as gr
-from huggingface_hub import Repository
+from gradio.themes.utils import sizes
 from text_generation import Client
 
-from share_btn import community_icon_html, loading_icon_html, share_js, share_btn_css
+# todo: remove and replace by the actual js file instead
+from share_btn import (share_js)
+from utils import (
+    get_file_as_string,
+    get_sections,
+    get_url_from_env_or_default_path,
+    preview
+)
+from constants import (
+    DEFAULT_STARCODER_API_PATH,
+    DEFAULT_STARCODER_BASE_API_PATH,
+    FIM_MIDDLE,
+    FIM_PREFIX,
+    FIM_SUFFIX,
+    END_OF_TEXT,
+    MIN_TEMPERATURE,
+)
 
 HF_TOKEN = os.environ.get("HF_TOKEN", None)
-API_URL = "https://api-inference.huggingface.co/models/bigcode/starcoder/"
-API_URL_BASE ="https://api-inference.huggingface.co/models/bigcode/starcoderbase/"
-
-FIM_PREFIX = "<fim_prefix>"
-FIM_MIDDLE = "<fim_middle>"
-FIM_SUFFIX = "<fim_suffix>"
+# 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 = 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's URL", API_URL)
+preview("StarCoderBase Model's URL", API_URL_BASE)
+preview("HF Token", HF_TOKEN, ofuscate=True)
+
+DEFAULT_PORT = 7860
 
 FIM_INDICATOR = "<FILL_HERE>"
 
-FORMATS = """## 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:
-
-```
-<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:
+# Loads the whole content of the formats.md file
+# and stores it into the FORMATS variable
+STATIC_PATH = "static"
+FORMATS = get_file_as_string("formats.md", path=STATIC_PATH)
+CSS = get_file_as_string("styles.css", path=STATIC_PATH)
+community_icon_svg = get_file_as_string("community_icon.svg", path=STATIC_PATH)
+loading_icon_svg = get_file_as_string("loading_icon.svg", path=STATIC_PATH)
 
-```
-<commit_before>code<commit_msg>text<commit_after>code<|endoftext|>
-```
+# todo: evaluate making STATIC_PATH the default path instead of the current one
+README = get_file_as_string("README.md")
 
-### 3. Jupyter Notebooks 📓
-The model is trained on Jupyter notebooks as Python scripts and structured formats like:
+# Slicing the different sections from the README
+readme_sections = get_sections(README, "---")
 
-```
-<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:
-```
-<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:
-```
-code before<FILL_HERE>code after
-```
-"""
+manifest, description, disclaimer = readme_sections[:3]
 
 theme = gr.themes.Monochrome(
     primary_hue="indigo",
     secondary_hue="blue",
     neutral_hue="slate",
-    radius_size=gr.themes.sizes.radius_sm,
+    radius_size=sizes.radius_sm,
     font=[
-        gr.themes.GoogleFont("Open Sans"),
+        gr.themes.GoogleFont("Rubik"),
         "ui-sans-serif",
         "system-ui",
         "sans-serif",
     ],
+    text_size=sizes.text_lg,
 )
 
-client = Client(
-    API_URL,
-    headers={"Authorization": f"Bearer {HF_TOKEN}"},
-)
-client_base = Client(
-    API_URL_BASE, headers={"Authorization": f"Bearer {HF_TOKEN}"},
-)
-
-def generate(
-    prompt, temperature=0.9, max_new_tokens=256, top_p=0.95, repetition_penalty=1.0, version="StarCoder",
-):
-
-    temperature = float(temperature)
-    if temperature < 1e-2:
-        temperature = 1e-2
+HEADERS = {
+    "Authorization": f"Bearer {HF_TOKEN}",
+}
+client = Client(API_URL, headers = HEADERS)
+client_base = Client(API_URL_BASE, headers = HEADERS)
+
+def generate(prompt,
+        temperature = 0.9,
+        max_new_tokens = 256,
+        top_p = 0.95,
+        repetition_penalty = 1.0,
+        version = "StarCoder",
+    ):
+
+    temperature = min(float(temperature), MIN_TEMPERATURE)
     top_p = float(top_p)
-    fim_mode = False
 
     generate_kwargs = dict(
-        temperature=temperature,
-        max_new_tokens=max_new_tokens,
-        top_p=top_p,
-        repetition_penalty=repetition_penalty,
-        do_sample=True,
-        seed=42,
+        temperature = temperature,
+        max_new_tokens = max_new_tokens,
+        top_p = top_p,
+        repetition_penalty = repetition_penalty,
+        do_sample = True,
+        seed = 42,
     )
 
-    if FIM_INDICATOR in prompt:
-        fim_mode = True
+    if fim_mode := FIM_INDICATOR in prompt:
         try:
             prefix, suffix = prompt.split(FIM_INDICATOR)
-        except:
-            raise ValueError(f"Only one {FIM_INDICATOR} allowed in prompt!")
+        except Exception as err:
+            print(str(err))
+            raise ValueError(f"Only one {FIM_INDICATOR} allowed in prompt!") from err
         prompt = f"{FIM_PREFIX}{prefix}{FIM_SUFFIX}{suffix}{FIM_MIDDLE}"
 
-    if version == "StarCoder":
-        stream = client.generate_stream(prompt, **generate_kwargs)
-    else:
-        stream = client_base.generate_stream(prompt, **generate_kwargs)
+    model_client = client if version == "StarCoder" else client_base
+
+    stream = model_client.generate_stream(prompt, **generate_kwargs)
 
-    if fim_mode:
-        output = prefix
-    else:
-        output = prompt
+    output = prefix if fim_mode else prompt
 
-    previous_token = ""
     for response in stream:
-        if response.token.text == "<|endoftext|>":
+        if response.token.text == END_OF_TEXT:
             if fim_mode:
                 output += suffix
             else:
                 return output
         else:
             output += response.token.text
-        previous_token = response.token.text
+        # todo: log this value while in debug mode
+        # previous_token = response.token.text
         yield output
     return output
 
-
+# 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",
 ]
 
-
 def process_example(args):
     for x in generate(args):
         pass
     return x
 
 
-css = ".generating {visibility: hidden}"
-
-monospace_css = """
-#q-input textarea {
-    font-family: monospace, 'Consolas', Courier, monospace;
-}
-"""
-
-
-css += share_btn_css + monospace_css + ".gradio-container {color: black}"
-
-
-description = """
-<div style="text-align: center;">
-    <h1> 💫 StarCoder<span style='color: #e6b800;'> - </span>Code Completion Playground 🪐</h1>
-    <p>This is a demo to generate code with <a href="https://huggingface.co/bigcode/starcoder" style='color: #e6b800;'>StarCoder</a>, a 15B parameter model for code generation in 86 programming languages.
-    <b>This is not an instruction model</b>. For instruction and chatting you can chat with a prompted version of the model at <a href="https://huggingface.co/chat/?model=bigcode/starcoder">hf.co/chat</a></p>
-</div>
-"""
-disclaimer = """⚠️<b>Any use or sharing of this demo constitues your acceptance of the BigCode [OpenRAIL-M](https://huggingface.co/spaces/bigcode/bigcode-model-license-agreement) License Agreement and the use restrictions included within.</b>\
- <br>**Intended Use**: this app and its [supporting model](https://huggingface.co/bigcode) are provided for demonstration purposes; not to serve as replacement for human expertise. For more details on the model's limitations in terms of factuality and biases, see the [model card.](hf.co/bigcode)"""
-
-with gr.Blocks(theme=theme, analytics_enabled=False, css=css) as demo:
+with gr.Blocks(theme=theme, analytics_enabled=False, css=CSS) as demo:
     with gr.Column():
         gr.Markdown(description)
         with gr.Row():
@@ -231,8 +208,8 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=css) as demo:
                                     )
                 gr.Markdown(disclaimer)
                 with gr.Group(elem_id="share-btn-container"):
-                    community_icon = gr.HTML(community_icon_html, visible=True)
-                    loading_icon = gr.HTML(loading_icon_html, visible=True)
+                    community_icon = gr.HTML(community_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
                     )
@@ -251,4 +228,5 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=css) as demo:
         outputs=[output],
     )
     share_button.click(None, [], [], _js=share_js)
-demo.queue(concurrency_count=16).launch(debug=True)
+
+demo.queue(concurrency_count=16).launch(debug=True, server_port=DEFAULT_PORT)

constants.py

@@ -0,0 +1,10 @@
+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_PREFIX = "<fim_prefix>"
+FIM_MIDDLE = "<fim_middle>"
+FIM_SUFFIX = "<fim_suffix>"
+END_OF_TEXT = "<|endoftext|>"
+
+MIN_TEMPERATURE = 1e-3

requirements.txt

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

share_btn.py

@@ -1,13 +1,3 @@
-community_icon_html = """<svg id="share-btn-share-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32">
-    <path d="M20.6081 3C21.7684 3 22.8053 3.49196 23.5284 4.38415C23.9756 4.93678 24.4428 5.82749 24.4808 7.16133C24.9674 7.01707 25.4353 6.93643 25.8725 6.93643C26.9833 6.93643 27.9865 7.37587 28.696 8.17411C29.6075 9.19872 30.0124 10.4579 29.8361 11.7177C29.7523 12.3177 29.5581 12.8555 29.2678 13.3534C29.8798 13.8646 30.3306 14.5763 30.5485 15.4322C30.719 16.1032 30.8939 17.5006 29.9808 18.9403C30.0389 19.0342 30.0934 19.1319 30.1442 19.2318C30.6932 20.3074 30.7283 21.5229 30.2439 22.6548C29.5093 24.3704 27.6841 25.7219 24.1397 27.1727C21.9347 28.0753 19.9174 28.6523 19.8994 28.6575C16.9842 29.4379 14.3477 29.8345 12.0653 29.8345C7.87017 29.8345 4.8668 28.508 3.13831 25.8921C0.356375 21.6797 0.754104 17.8269 4.35369 14.1131C6.34591 12.058 7.67023 9.02782 7.94613 8.36275C8.50224 6.39343 9.97271 4.20438 12.4172 4.20438H12.4179C12.6236 4.20438 12.8314 4.2214 13.0364 4.25468C14.107 4.42854 15.0428 5.06476 15.7115 6.02205C16.4331 5.09583 17.134 4.359 17.7682 3.94323C18.7242 3.31737 19.6794 3 20.6081 3ZM20.6081 5.95917C20.2427 5.95917 19.7963 6.1197 19.3039 6.44225C17.7754 7.44319 14.8258 12.6772 13.7458 14.7131C13.3839 15.3952 12.7655 15.6837 12.2086 15.6837C11.1036 15.6837 10.2408 14.5497 12.1076 13.1085C14.9146 10.9402 13.9299 7.39584 12.5898 7.1776C12.5311 7.16799 12.4731 7.16355 12.4172 7.16355C11.1989 7.16355 10.6615 9.33114 10.6615 9.33114C10.6615 9.33114 9.0863 13.4148 6.38031 16.206C3.67434 18.998 3.5346 21.2388 5.50675 24.2246C6.85185 26.2606 9.42666 26.8753 12.0653 26.8753C14.8021 26.8753 17.6077 26.2139 19.1799 25.793C19.2574 25.7723 28.8193 22.984 27.6081 20.6107C27.4046 20.212 27.0693 20.0522 26.6471 20.0522C24.9416 20.0522 21.8393 22.6726 20.5057 22.6726C20.2076 22.6726 19.9976 22.5416 19.9116 22.222C19.3433 20.1173 28.552 19.2325 27.7758 16.1839C27.639 15.6445 27.2677 15.4256 26.746 15.4263C24.4923 15.4263 19.4358 19.5181 18.3759 19.5181C18.2949 19.5181 18.2368 19.4937 18.2053 19.4419C17.6743 18.557 17.9653 17.9394 21.7082 15.6009C25.4511 13.2617 28.0783 11.8545 26.5841 10.1752C26.4121 9.98141 26.1684 9.8956 25.8725 9.8956C23.6001 9.89634 18.2311 14.9403 18.2311 14.9403C18.2311 14.9403 16.7821 16.496 15.9057 16.496C15.7043 16.496 15.533 16.4139 15.4169 16.2112C14.7956 15.1296 21.1879 10.1286 21.5484 8.06535C21.7928 6.66715 21.3771 5.95917 20.6081 5.95917Z" fill="#FF9D00"></path>
-    <path d="M5.50686 24.2246C3.53472 21.2387 3.67446 18.9979 6.38043 16.206C9.08641 13.4147 10.6615 9.33111 10.6615 9.33111C10.6615 9.33111 11.2499 6.95933 12.59 7.17757C13.93 7.39581 14.9139 10.9401 12.1069 13.1084C9.29997 15.276 12.6659 16.7489 13.7459 14.713C14.8258 12.6772 17.7747 7.44316 19.304 6.44221C20.8326 5.44128 21.9089 6.00204 21.5484 8.06532C21.188 10.1286 14.795 15.1295 15.4171 16.2118C16.0391 17.2934 18.2312 14.9402 18.2312 14.9402C18.2312 14.9402 25.0907 8.49588 26.5842 10.1752C28.0776 11.8545 25.4512 13.2616 21.7082 15.6008C17.9646 17.9393 17.6744 18.557 18.2054 19.4418C18.7372 20.3266 26.9998 13.1351 27.7759 16.1838C28.5513 19.2324 19.3434 20.1173 19.9117 22.2219C20.48 24.3274 26.3979 18.2382 27.6082 20.6107C28.8193 22.9839 19.2574 25.7722 19.18 25.7929C16.0914 26.62 8.24723 28.3726 5.50686 24.2246Z" fill="#FFD21E"></path>
-</svg>"""
-
-loading_icon_html = """<svg id="share-btn-loading-icon" style="display:none;" class="animate-spin"
-   style="color: #ffffff; 
-"
-   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" fill="none" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="white" stroke-width="4"></circle><path style="opacity: 0.75;" fill="white" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>"""
-
 share_js = """async () => {
 	async function uploadFile(file){
 		const UPLOAD_URL = 'https://huggingface.co/uploads';
@@ -77,36 +67,9 @@ ${outputTxt}`;
         .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
         .join('&');
 
-	window.open(`https://huggingface.co/spaces/bigcode/bigcode-playground/discussions/new?${paramsStr}`, '_blank');
+	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';
 }"""
-
-share_btn_css = """
-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: 13rem;
-}
-#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;
-}
-"""

static/formats.md

@@ -0,0 +1,47 @@
+## 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:
+
+```
+<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:
+
+```
+<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:
+
+```
+<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:
+
+```
+<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:
+
+```
+code before<FILL_HERE>code after
+```

static/share_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,72 @@
+.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: 13rem;
+}
+
+#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;
+}

utils.py

@@ -0,0 +1,93 @@
+import os
+from typing import List
+from urllib.parse import urljoin
+
+from constants import DEFAULT_HUGGINGFACE_MODELS_API_BASE_URL
+
+
+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='.') -> 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 current directory
+
+    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) -> List[str]:
+    """Splits a string into sections given a delimiter
+
+    Args:
+        string (str): The string to split
+        delimiter (str): The delimiter to use
+
+    Returns:
+        List[str]: The list of sections
+    """
+    return [section.strip()
+            for section in string.split(delimiter)
+            if (section and not section.isspace())]