Added share to community button

app.py

@@ -3,6 +3,8 @@ import os
 import gradio as gr
 from text_generation import Client
 
+from share_btn import community_icon_html, loading_icon_html, share_js, share_btn_css
+
 HF_TOKEN = os.environ.get("HF_TOKEN", None)
 API_URL = " https://api-inference.huggingface.co/models/BigCode/octocoder"
 
@@ -24,7 +26,8 @@ client = Client(
     headers={"Authorization": f"Bearer {HF_TOKEN}"},
 )
 
-def generate(query:str, temperature=0.9, max_new_tokens=256, top_p=0.95, repetition_penalty=1.0, ):
+
+def generate(query: str, temperature=0.9, max_new_tokens=256, top_p=0.95, repetition_penalty=1.0, ):
     if query.endswith("."):
         prompt = f"Question: {query}\n\nAnswer:"
     else:
@@ -72,6 +75,8 @@ monospace_css = """
 }
 """
 
+css += share_btn_css + monospace_css
+
 description = """
 <div style="text-align: center;">
     <center><img src='https://raw.githubusercontent.com/bigcode-project/octopack/31f3320f098703c7910e43492c39366eeea68d83/banner.png' width='70%'/></center>
@@ -87,7 +92,6 @@ description = """
 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.](https://huggingface.co/bigcode)"""
 
-
 examples = [
     ['Please write a function in Python that performs bubble sort.', 256],
     ['''Explain the following piece of code
@@ -98,11 +102,12 @@ def count_unique(s):
     valid_sentence = "".join(valid_chars)
     uniques = set(valid_sentence.split(" "))
     return len(uniques)''', 512],
-    ['Write an efficient Python function that takes a given text and returns its Morse code equivalent without using any third party library', 512],
+    [
+        'Write an efficient Python function that takes a given text and returns its Morse code equivalent without using any third party library',
+        512],
     ['Write a html and css code to render a clock', 8000],
 ]
 
-
 with gr.Blocks(theme=theme, analytics_enabled=False, css=css) as demo:
     with gr.Column():
         gr.Markdown(description)
@@ -161,6 +166,12 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=css) as demo:
                 submit = gr.Button("Generate", variant="primary")
                 output = gr.Code(elem_id="q-output", lines=30, label="Output")
                 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)
+                    share_button = gr.Button(
+                        "Share to community", elem_id="share-btn", visible=True
+                    )
                 gr.Examples(
                     examples=examples,
                     inputs=[instruction, max_new_tokens],
@@ -174,4 +185,5 @@ with gr.Blocks(theme=theme, analytics_enabled=False, css=css) as demo:
         inputs=[instruction, temperature, max_new_tokens, top_p, repetition_penalty],
         outputs=[output],
     )
+    share_button.click(None, [], [], _js=share_js)
 demo.queue(concurrency_count=16).launch(debug=True)