add necessary elements for sharing

app.py

@@ -8,6 +8,7 @@ from moviepy.editor import *
 from moviepy.video.io.ffmpeg_tools import ffmpeg_extract_subclip
 from gradio_client import Client
 import gradio as gr
+from share_btn import community_icon_html, loading_icon_html, share_js
 
 matte_client = Client("https://fffiloni-video-matting-anything.hf.space/")
 
@@ -103,7 +104,7 @@ def infer(video_frames, masks_frames, project_name):
     for item in results_folder_content:
         print(item)
 
-    return results_folder_content[0], results_folder_content[1]
+    return results_folder_content[0], results_folder_content[1], gr.Group.update(visible=True)
 
 
 def get_frames(video_in, img_type):
@@ -295,7 +296,7 @@ def infer_auto(project_name, video_in, subject_to_remove):
     for item in results_folder_content:
         print(item)
 
-    return results_folder_content[0], results_folder_content[1]
+    return results_folder_content[0], results_folder_content[1], gr.Group.update(visible=True)
 
 css="""
 #col-container{
@@ -303,6 +304,69 @@ css="""
     max-width: 840px;
     text-align: left;
 }
+.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; 
+  max-width: 15rem;
+  height: 32px;
+}
+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; 
+  font-size: 1em;
+  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;
+}
+img[src*='#center'] { 
+    display: block;
+    margin: unset;
+    margin-top: 6px;
+}
+div#component-25 {
+    align-items: center;
+}
 """
     
 with gr.Blocks(css=css) as demo:
@@ -345,7 +409,6 @@ with gr.Blocks(css=css) as demo:
                         #outputs=[res_masked, res_files]
                     )
 
-
             with gr.Tab("Auto"):
                 with gr.Column():
                     project_name_2 = gr.Textbox(label="Name your project", info="no spaces nor special characters", value="my-new-project")
@@ -375,18 +438,29 @@ with gr.Blocks(css=css) as demo:
                         fn = infer_auto, 
                         inputs=[project_name_2, video_in, subject_to_remove], 
                         #outputs=[res_masked, res_files]
-                    )                    
+                    )
 
             with gr.Column():
                 gr.Markdown("""
                 ### Results
                 """)
-                res_masked = gr.Video(label="Masked video")
-                res_files = gr.Video(label="Final result")
+                res_masked = gr.Video(label="Masked video", elem_id="res-masked")
+                res_files = gr.Video(label="Final result", elem_id="res_cleaned")
 
+                with gr.Row():
+
+                    with gr.Group(elem_id="share-btn-container", visible=False) as share_group:
+                        community_icon = gr.HTML(community_icon_html)
+                        loading_icon = gr.HTML(loading_icon_html)
+                        share_button = gr.Button("Share with Community", elem_id="share-btn")
+        
+                    gr.Markdown("""
+                        [![Duplicate this Space](https://huggingface.co/datasets/huggingface/badges/raw/main/duplicate-this-space-lg.svg#center)](https://huggingface.co/spaces/fffiloni/ProPainter?duplicate=true)
+                    """)
         
             
-    submit_btn.click(fn=infer, inputs=[video_frames, masks_frames, project_name], outputs=[res_masked, res_files])
-    submit_auto_btn.click(fn=infer_auto, inputs=[project_name_2, video_in, subject_to_remove], outputs=[res_masked, res_files])
+    submit_btn.click(fn=infer, inputs=[video_frames, masks_frames, project_name], outputs=[res_masked, res_files, share_group])
+    submit_auto_btn.click(fn=infer_auto, inputs=[project_name_2, video_in, subject_to_remove], outputs=[res_masked, res_files, share_group])
+    share_button.click(None, [], [], _js=share_js)
     
 demo.queue(max_size=12).launch()