Update app.py

app.py

@@ -3,6 +3,7 @@ from time import sleep
 from diffusers import DiffusionPipeline
 from huggingface_hub import hf_hub_download
 from safetensors.torch import load_file
+from share_btn import community_icon_html, loading_icon_html, share_js
 
 import torch
 import json
@@ -54,6 +55,15 @@ css = '''
 .random_column{align-self: center; align-items: center}
 @media (max-width: 1024px) {
 .roulette_group{flex-direction: column}
+
+#share-btn-container {padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; max-width: 13rem; margin-left: auto;}
+div#share-btn-container > div {flex-direction: row;background: black;align-items: center}
+#share-btn-container:hover {background-color: #060606}
+#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.5rem !important; padding-bottom: 0.5rem !important;right:0;}
+#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}
+#share-btn-container.hidden {display: none!important}
 }
 '''
 
@@ -124,9 +134,20 @@ with gr.Blocks(css=css) as demo:
     with gr.Column(min_width=10, scale=14):
         with gr.Box():
             with gr.Row():
-                prompt = gr.Textbox(label="Your prompt", show_label=False, interactive=True, elem_id="prompt")
+                prompt = gr.Textbox(label="Your prompt", info="rearrange the trigger words into a coherent prompt!", show_label=False, interactive=True, elem_id="prompt")
                 run_btn = gr.Button("Run", elem_id="run_button")
             output_image = gr.Image(label="Output", height=355)
+            with gr.Row():
+                with gr.Column():
+                    gr.Button("👍")
+                with gr.Column():
+                    gr.Button("👎")
+                with gr.Column():
+                    with gr.Group(elem_id="share-btn-container") as share_group:
+                        community_icon = gr.HTML(community_icon_html)
+                        loading_icon = gr.HTML(loading_icon_html)
+                        share_button = gr.Button("Share to community", elem_id="share-btn")
+                
     
   
   
@@ -143,6 +164,6 @@ with gr.Blocks(css=css) as demo:
 
   run_btn.click(merge_and_run, inputs=[prompt, negative_prompt, shuffled_items, lora_1_scale, lora_2_scale], outputs=[output_image])
   prompt.submit(merge_and_run, inputs=[prompt, negative_prompt, shuffled_items, lora_1_scale, lora_2_scale], outputs=[output_image])
-
+  share_button.click(None, [], [], _js=share_js)
 demo.queue()
 demo.launch()