Update app.py

app.py

@@ -5,7 +5,7 @@ from PIL import Image
 from diffusers.models import AutoencoderKL
 from diffusers import AutoPipelineForInpainting, UNet2DConditionModel, DiffusionPipeline
 import diffusers
-
+from share_btn import community_icon_html, loading_icon_html, share_js
 
 
 vae = AutoencoderKL.from_pretrained("stabilityai/sd-vae-ft-mse")
@@ -102,6 +102,14 @@ css = '''
         transform: rotate(360deg);
     }
 }
+#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}
 #prompt input{width: calc(100% - 160px);border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
 #prompt-container{margin-top:-18px;}
 #prompt-container .form{border-top-left-radius: 0;border-top-right-radius: 0}
@@ -136,10 +144,15 @@ with image_blocks as demo:
                         
                 with gr.Column():
                     image_out = gr.Image(label="Output", elem_id="output-img", height=1024, width=512)
+                    with gr.Group(elem_id="share-btn-container", visible=False) as share_btn_container:
+                        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",visible=True)
             
 
-    btn.click(fn=predict, inputs=[image, prompt, negative_prompt, guidance_scale, steps, strength, model, scheduler], outputs=[image_out], api_name='run')
-    prompt.submit(fn=predict, inputs=[image, prompt, negative_prompt, guidance_scale, steps, strength, model, scheduler], outputs=[image_out])
+    btn.click(fn=predict, inputs=[image, prompt, negative_prompt, guidance_scale, steps, strength, model, scheduler], outputs=[image_out,share_btn_container], api_name='run')
+    prompt.submit(fn=predict, inputs=[image, prompt, negative_prompt, guidance_scale, steps, strength, model, scheduler], outputs=[image_out,share_btn_container])
+    share_button.click(None, [], [], _js=share_js)
 
 
 image_blocks.queue(max_size=25,api_open=True).launch(show_api=True)