Use of a proper .js file for click action scripts

(instead of the python file with js scripts in variables)
Including changes to fuctions for loading files

README.md

@@ -21,8 +21,6 @@ This is a demo playground to generate code with the power of ⭐[StarCoder](http
 
 🗣️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)
 
-![StarCoder](https://huggingface.co/datasets/bigcode/admin/resolve/main/StarCoderBanner.png)
-
 ---
 
 **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)
@@ -30,3 +28,51 @@ This is a demo playground to generate code with the power of ⭐[StarCoder](http
 ⚠️ 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

@@ -8,8 +8,6 @@ from gradio.themes.utils import sizes
 from text_generation import Client
 from src.request import StarCoderRequest, StarCoderRequestConfig
 
-# todo: remove and replace by the actual js file instead
-from src.share_btn import (share_js)
 from src.utils import (
     get_file_as_string,
     get_sections,
@@ -50,21 +48,20 @@ preview("StarCoder Model URL", API_URL_STAR)
 preview("StarCoderBase Model URL", API_URL_BASE)
 preview("HF Token", HF_TOKEN, ofuscate=True)
 
-# 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)
-
-# todo: evaluate making STATIC_PATH the default path instead of the current one
-README = get_file_as_string("README.md")
-
-# Slicing the different sections from the README
-readme_sections = get_sections(README, "---")
-
-manifest, description, disclaimer = readme_sections[:3]
+_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",
@@ -72,7 +69,7 @@ theme = gr.themes.Monochrome(
     neutral_hue="slate",
     radius_size=sizes.radius_sm,
     font=[
-        gr.themes.GoogleFont("Rubik"),
+        gr.themes.GoogleFont("IBM Plex Sans", [400, 600]),
         "ui-sans-serif",
         "system-ui",
         "sans-serif",
@@ -159,7 +156,7 @@ examples = [
     "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=CSS) as demo:
+with gr.Blocks(theme=theme, analytics_enabled=False, css=_styles) as demo:
     with gr.Column():
         gr.Markdown(description)
         with gr.Row():
@@ -223,8 +220,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_svg, visible=True)
-                    loading_icon = gr.HTML(loading_icon_svg, visible=True)
+                    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
                     )
@@ -235,7 +232,7 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=CSS) as demo:
                     fn=process_example,
                     outputs=[output],
                 )
-                gr.Markdown(FORMATS)
+                gr.Markdown(formats)
 
     submit.click(
         generate,
@@ -245,6 +242,6 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=CSS) as demo:
         max_batch_size=8,
         show_progress=True
     )
-    share_button.click(None, [], [], _js=share_js)
+    share_button.click(None, [], [], _js=_script)
 
 demo.queue(concurrency_count=16).launch(debug=True, server_port=DEFAULT_PORT)

settings.py

@@ -5,6 +5,8 @@ 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,

src/utils.py

@@ -2,8 +2,10 @@ import os
 from typing import List
 from urllib.parse import urljoin
 
-from settings import DEFAULT_HUGGINGFACE_MODELS_API_BASE_URL
-
+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
@@ -61,11 +63,11 @@ def get_url_from_env_or_default_path(env_name: str, api_path: str) -> str:
         DEFAULT_HUGGINGFACE_MODELS_API_BASE_URL, api_path
     )
 
-def get_file_as_string(file_name, path='.') -> str:
+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 current directory
+    instead of the default static path (from settings)
 
     Args:
         file_name (_type_): The name of the file to load.
@@ -78,16 +80,18 @@ def get_file_as_string(file_name, path='.') -> str:
         return f.read()
 
 
-def get_sections(string: str, delimiter: str) -> List[str]:
+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
+        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())]
+            if (section and not section.isspace())][:up_to]

src/share_btn.py → static/community-btn.js

@@ -1,4 +1,4 @@
-share_js = """async () => {
+async () => {
 	async function uploadFile(file){
 		const UPLOAD_URL = 'https://huggingface.co/uploads';
 		const response = await fetch(UPLOAD_URL, {
@@ -72,4 +72,4 @@ ${outputTxt}`;
     shareBtnEl.style.removeProperty('pointer-events');
     shareIconEl.style.removeProperty('display');
     loadingIconEl.style.display = 'none';
-}"""
+}

static/formats.md

@@ -1,47 +0,0 @@
-## 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/styles.css

@@ -1,3 +1,9 @@
+@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
 }
@@ -44,7 +50,7 @@ a {
     justify-content: center;
     align-items: center;
     border-radius: 9999px !important;
-    width: 13rem;
+    width: 15rem;
 }
 
 #share-btn {