implement gradio share

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 import os
+from share_btn import community_icon_html, loading_icon_html, share_js
 
 img_to_text = gr.Interface.load("spaces/pharma/CLIP-Interrogator")
 stable_diffusion = gr.Blocks.load(name="spaces/stabilityai/stable-diffusion")
@@ -11,7 +12,30 @@ def get_images(prompt):
 def get_prompts(uploaded_image):
     return img_to_text(uploaded_image)
 
-with gr.Blocks() as demo:
+css = '''
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+#share-btn-container {
+    display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem;
+}
+#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.25rem !important; padding-bottom: 0.25rem !important;
+}
+#share-btn * {
+    all: unset;
+}
+'''
+
+with gr.Blocks(css=css) as demo:
     gr.Markdown(
         """
         ## Stable Diffusion Perception 🎆🌌
@@ -34,8 +58,12 @@ with gr.Blocks() as demo:
         with gr.Row():
             diffuse_btn = gr.Button(value="Diffuse it!", elem_id="diffuse_btn")
       with gr.Column():
-        sd_output = gr.Gallery().style(grid=2, height="auto")
-        
+        sd_output = gr.Gallery().style(grid=2, height="auto", elem_id="generated-gallery")
+        with gr.Group(elem_id="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")
+
     def translate_directly(img):
         images = get_images(get_prompts(img))
         return images