reflect feedback

app.py

@@ -27,16 +27,16 @@ theme = gr.themes.Monochrome(
     font=[gr.themes.GoogleFont("Open Sans"), "ui-sans-serif", "system-ui", "sans-serif"],
 )
 
-# if HF_TOKEN:
-#     try:
-#         shutil.rmtree("./data/")
-#     except:
-#         pass
+if HF_TOKEN:
+    try:
+        shutil.rmtree("./data/")
+    except:
+        pass
 
-#     repo = Repository(
-#         local_dir="./data/", clone_from="trl-lib/star-chat-prompts", use_auth_token=HF_TOKEN, repo_type="dataset"
-#     )
-#     repo.git_pull()
+    repo = Repository(
+        local_dir="./data/", clone_from="trl-lib/star-chat-prompts", use_auth_token=HF_TOKEN, repo_type="dataset"
+    )
+    repo.git_pull()
 
 
 def save_inputs_and_outputs(inputs, outputs, generate_kwargs):
@@ -76,10 +76,11 @@ def generate(
     user_message,
     chatbot,
     history,
-    temperature=0.5,
-    top_p=0.25,
-    top_k=50,
-    max_new_tokens=512,
+    temperature,
+    top_k,
+    top_p,
+    max_new_tokens,
+    repetition_penalty,
     do_save=True,
 ):
     # Don't return meaningless message when the input is empty
@@ -109,8 +110,8 @@ def generate(
 
     generate_kwargs = {
         "temperature": temperature,
-        "top_p": top_p,
         "top_k": top_k,
+        "top_p": top_p,
         "max_new_tokens": max_new_tokens,
     }
 
@@ -123,10 +124,10 @@ def generate(
         temperature=temperature,
         max_new_tokens=max_new_tokens,
         top_p=top_p,
+        repetition_penalty=repetition_penalty,
         do_sample=True,
         truncate=999,
         seed=42,
-        repetition_penalty=1.2,
         stop_sequences=["<|end|>"],
     )
 
@@ -147,22 +148,22 @@ def generate(
 
         chat = [(history[i].strip(), history[i + 1].strip()) for i in range(0, len(history) - 1, 2)]
 
-        # if HF_TOKEN and do_save:
-        #     try:
-        #         print("Pushing prompt and completion to the Hub")
-        #         save_inputs_and_outputs(prompt, output, generate_kwargs)
-        #     except Exception as e:
-        #         print(e)
+        if HF_TOKEN and do_save:
+            try:
+                print("Pushing prompt and completion to the Hub")
+                save_inputs_and_outputs(prompt, output, generate_kwargs)
+            except Exception as e:
+                print(e)
 
         yield chat, history, user_message, ""
 
 
 examples = [
+    "How can I write a Python function to generate the nth Fibonacci number?",
     "What's the capital city of Brunei?",
-    "How can I sort a list in Python?",
-    "What date is it today? Use Python to answer the question.",
+    "How do I get the current date using shell commands? Explain how it works.",
     "What's the meaning of life?",
-    "How can I write a Java function to generate the nth Fibonacci number?",
+    "Write a function in Python to reverse words in a given string.",
 ]
 
 
@@ -171,10 +172,11 @@ examples = [
 #     user_message,
 #     chatbot,
 #     history,
-#     temperature=0.5,
-#     top_p=0.25,
-#     top_k=50,
-#     max_new_tokens=512,
+#     temperature,
+#     top_k,
+#     top_p,
+#     max_new_tokens,
+#     repetition_penalty,
 #     do_save=True,
 # ):
 #     # Do nothing if there's no history
@@ -189,7 +191,7 @@ examples = [
 #     chatbot = chatbot[:-1]
 #     history = history[:-2]
 
-#     return generate(system_message, user_message, chatbot, history, temperature, top_p, top_k, max_new_tokens, do_save)
+#     return generate(system_message, user_message, chatbot, history, temperature, top_k, top_p, max_new_tokens, repetition_penalty, do_save)
 
 
 def clear_chat():
@@ -205,38 +207,32 @@ def process_example(args):
 title = """<h1 align="center">⭐ Chat with StarCoder Demo 💬</h1>"""
 custom_css = """
 #banner-image {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  width: 40%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    /* width: 40%; */
 }
 
 #chat-message .message {
- padding: 15px;
- border-color: #a5b4fc;
- background-color: #eef2ff;
+    /* padding: 15px; */
+    border-color: #a5b4fc;
+    background-color: #eef2ff;
 }
 
 #chat-message .message.bot {
- padding: 15px;
- border-color: #e2e8f0;
+    /* padding: 15px; */
+    border-color: #e2e8f0;
     background-color: #f8fafc;
 }
 
-#system-message {
-    min-height: 527px;
-}
-
-#system-message textarea {
-    min-height: 462px;
-}
-
 #chat-message {
     font-size: 14px;
-    min-height: 500px;
+    min-height: 300px;
 }
 
-message pending
+#parameters-accordion {
+    color: #0f172a;
+}
 
 """
 
@@ -244,17 +240,25 @@ message pending
 
 with gr.Blocks(theme=theme, analytics_enabled=False, css=custom_css) as demo:
     gr.HTML(title)
-    gr.Image("StarCoderBanner.png", elem_id="banner-image", show_label=False)
-    gr.Markdown(
+
+    with gr.Row():
+        with gr.Column():
+            gr.Image("StarCoderBanner.png", elem_id="banner-image", show_label=False)
+        with gr.Column():
+            gr.Markdown(
         """
-            This demo showcases an instruction fine-tuned model based on [StarCoder](https://huggingface.co/bigcode/starcoder), a 16B parameter model trained on one trillion tokens sourced from 80+ programming languages, GitHub issues, Git commits, and Jupyter notebooks (all permissively licensed). With an enterprise-friendly license, 8,192 token context length, and fast large-batch inference via [multi-query attention](https://arxiv.org/abs/1911.02150), StarCoder is currently the best open-source choice for code-based applications. For more details, check out our [blog post]().
+            💻 This demo showcases an instruction fine-tuned model based on **[StarCoder](https://huggingface.co/bigcode/starcoder)**, a 16B parameter model trained on one trillion tokens sourced from 80+ programming languages, GitHub issues, Git commits, and Jupyter notebooks (all permissively licensed). 
+            
+            🤗 With an enterprise-friendly license, 8,192 token context length, and fast large-batch inference via [multi-query attention](https://arxiv.org/abs/1911.02150), **StarCoder** is currently the best open-source choice for code-based applications. 
+            
+            📝 For more details, check out our [blog post]().
 
             ⚠️ **Intended Use**: this app and its [supporting model](https://huggingface.co/HuggingFaceH4/starcoderbase-finetuned-oasst1) are provided as educational tools to explain instruction fine-tuning; 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](https://huggingface.co/HuggingFaceH4/starcoderbase-finetuned-oasst1#bias-risks-and-limitations).
 
             ⚠️ **Data Collection**: by default, we are collecting the prompts entered in this app to further improve and evaluate the model. Do NOT share any personal or sensitive information while using the app! You can opt out of this data collection by removing the checkbox below.
     """
     )
-
+            
     with gr.Row():
         do_save = gr.Checkbox(
             value=True,
@@ -263,27 +267,71 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=custom_css) as demo:
         )
 
     with gr.Row():
-        with gr.Column(scale=1):
+        with gr.Box(elem_id="chat-box"):
             system_message = gr.Textbox(
                 elem_id="system-message",
-                placeholder="Below is a conversation between a human user and a helpful AI coding assistant",
+                placeholder="Below is a conversation between a human user and a helpful AI coding assistant.",
                 label="System prompt",
             )
-
-        with gr.Column(scale=1):
-            with gr.Box():
-                output = gr.Markdown()
-                chatbot = gr.Chatbot(elem_id="chat-message", label="Chat")
+            output = gr.Markdown()
+            chatbot = gr.Chatbot(elem_id="chat-message", label="Chat")
 
     with gr.Row():
         with gr.Column(scale=3):
             user_message = gr.Textbox(placeholder="Enter your message here", show_label=False, elem_id="q-input")
             with gr.Row():
                 send_button = gr.Button("Send", elem_id="send-btn", visible=True)
+                
                 # regenerate_button = gr.Button("Regenerate", elem_id="send-btn", visible=True)
 
                 clear_chat_button = gr.Button("Clear chat", elem_id="clear-btn", visible=True)
 
+            with gr.Accordion(label="Parameters", open=False, elem_id="parameters-accordion"):
+                temperature = gr.Slider(
+                    label="Temperature",
+                    value=0.2,
+                    minimum=0.0,
+                    maximum=1.0,
+                    step=0.1,
+                    interactive=True,
+                    info="Higher values produce more diverse outputs",
+                )
+                top_k = gr.Slider(
+                    label="Top-k",
+                    value=50,
+                    minimum=0.0,
+                    maximum=100,
+                    step=1,
+                    interactive=True,
+                    info="Sample from a shortlist of top-k tokens",
+                )
+                top_p = gr.Slider(
+                    label="Top-p (nucleus sampling)",
+                    value=0.95,
+                    minimum=0.0,
+                    maximum=1,
+                    step=0.05,
+                    interactive=True,
+                    info="Higher values sample more low-probability tokens",
+                )
+                max_new_tokens = gr.Slider(
+                    label="Max new tokens",
+                    value=384,
+                    minimum=0,
+                    maximum=2048,
+                    step=4,
+                    interactive=True,
+                    info="The maximum numbers of new tokens",
+                )
+                repetition_penalty = gr.Slider(
+                    label="Repetition Penalty",
+                    value=1.2,
+                    minimum=0.0,
+                    maximum=10,
+                    step=0.1,
+                    interactive=True,
+                    info="The parameter for repetition penalty. 1.0 means no penalty.",
+                )
             # 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)
@@ -297,43 +345,6 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=custom_css) as demo:
                     outputs=[output],
                 )
 
-        with gr.Column(scale=1):
-            temperature = gr.Slider(
-                label="Temperature",
-                value=0.2,
-                minimum=0.0,
-                maximum=1.0,
-                step=0.1,
-                interactive=True,
-                info="Higher values produce more diverse outputs",
-            )
-            top_k = gr.Slider(
-                label="Top-k",
-                value=50,
-                minimum=0.0,
-                maximum=100,
-                step=1,
-                interactive=True,
-                info="Sample from a shortlist of top-k tokens",
-            )
-            top_p = gr.Slider(
-                label="Top-p (nucleus sampling)",
-                value=0.95,
-                minimum=0.0,
-                maximum=1,
-                step=0.05,
-                interactive=True,
-                info="Higher values sample more low-probability tokens",
-            )
-            max_new_tokens = gr.Slider(
-                label="Max new tokens",
-                value=384,
-                minimum=0,
-                maximum=2048,
-                step=4,
-                interactive=True,
-                info="The maximum numbers of new tokens",
-            )
 
     history = gr.State([])
     # To clear out "message" input textbox and use this to regenerate message
@@ -347,9 +358,10 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=custom_css) as demo:
             chatbot,
             history,
             temperature,
-            top_p,
             top_k,
+            top_p,
             max_new_tokens,
+            repetition_penalty,
             do_save,
         ],
         outputs=[chatbot, history, last_user_message, user_message],
@@ -363,9 +375,10 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=custom_css) as demo:
             chatbot,
             history,
             temperature,
-            top_p,
             top_k,
+            top_p,
             max_new_tokens,
+            repetition_penalty,
             do_save,
         ],
         outputs=[chatbot, history, last_user_message, user_message],
@@ -379,9 +392,10 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=custom_css) as demo:
     #         chatbot,
     #         history,
     #         temperature,
-    #         top_p,
     #         top_k,
+    #         top_p,
     #         max_new_tokens,
+    #         repetition_penalty,
     #         do_save,
     #     ],
     #     outputs=[chatbot, history, last_user_message, user_message],
@@ -389,5 +403,22 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=custom_css) as demo:
 
     clear_chat_button.click(clear_chat, outputs=[chatbot, history])
     # share_button.click(None, [], [], _js=share_js)
+    with gr.Row():
+        with gr.Column():
+            gr.Image("StarCoderBanner.png", elem_id="banner-image", show_label=False)
+        with gr.Column():
+            gr.Markdown(
+        """
+            💻 This demo showcases an instruction fine-tuned model based on **[StarCoder](https://huggingface.co/bigcode/starcoder)**, a 16B parameter model trained on one trillion tokens sourced from 80+ programming languages, GitHub issues, Git commits, and Jupyter notebooks (all permissively licensed). 
+            
+            🤗 With an enterprise-friendly license, 8,192 token context length, and fast large-batch inference via [multi-query attention](https://arxiv.org/abs/1911.02150), **StarCoder** is currently the best open-source choice for code-based applications. 
+            
+            📝 For more details, check out our [blog post]().
+
+            ⚠️ **Intended Use**: this app and its [supporting model](https://huggingface.co/HuggingFaceH4/starcoderbase-finetuned-oasst1) are provided as educational tools to explain instruction fine-tuning; 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](https://huggingface.co/HuggingFaceH4/starcoderbase-finetuned-oasst1#bias-risks-and-limitations).
+
+            ⚠️ **Data Collection**: by default, we are collecting the prompts entered in this app to further improve and evaluate the model. Do NOT share any personal or sensitive information while using the app! You can opt out of this data collection by removing the checkbox below.
+    """
+    )
 
 demo.queue(concurrency_count=16).launch(debug=True)