Update app.py

app.py

@@ -1,5 +1,7 @@
 import gradio as gr
 
+from share_btn import community_icon_html, loading_icon_html, share_js
+
 from modelscope.pipelines import pipeline
 from modelscope.outputs import OutputKeys
 
@@ -12,7 +14,7 @@ def infer (image_in):
     output_video_path = pipe(IMG_PATH, output_video='output.mp4')[OutputKeys.OUTPUT_VIDEO]
     print(output_video_path)
     
-    return output_video_path
+    return output_video_path, gr.Group.update(visible=True)
 
 css="""
 
@@ -21,6 +23,59 @@ css="""
     margin-left: auto; 
     margin-right: auto;
 }
+.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: 13rem;
+}
+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;
+}
 img[src*='#center'] { 
     display: block;
     margin: auto;
@@ -55,6 +110,12 @@ with gr.Blocks(css=css) as demo:
                 MS Image2Video
             </h1>
 
+            <p style="text-align: center;">
+                Turn any image into a video ! <br />
+                To use this demo, simply upload an image and hit the Submit button. <br />
+                Don't forget to share your results with the Community ;)
+            </p>
+
             [![Duplicate this Space](https://huggingface.co/datasets/huggingface/badges/raw/main/duplicate-this-space-sm.svg#center)](https://huggingface.co/spaces/fffiloni/MS-Image2Video-cloning?duplicate=true)
 
         
@@ -74,6 +135,21 @@ with gr.Blocks(css=css) as demo:
             label = "Video Result"
         )
 
+        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 to community", elem_id="share-btn")
+
+        gr.HTML("""
+        
+            <div class="footer">
+                <p>
+                MS-Image2Video Demo by 🤗 <a href="https://twitter.com/fffiloni" target="_blank">Sylvain Filoni</a>
+                </p>
+            </div>
+
+        """)
+
         gr.Examples(
             examples = [
                 [
@@ -91,29 +167,23 @@ with gr.Blocks(css=css) as demo:
                 image_in
             ],
             outputs = [ 
-                video_out
+                video_out, 
+                share_group
             ],
             cache_examples = False
         )
 
-        gr.HTML("""
-        
-            <div class="footer">
-                <p>
-                MS-Image2Video Demo by 🤗 <a href="https://twitter.com/fffiloni" target="_blank">Sylvain Filoni</a>
-                </p>
-            </div>
-
-        """)
-
     submit_btn.click(
         fn = infer,
         inputs = [
             image_in
         ],
         outputs = [
-            video_out
+            video_out, 
+            share_group
         ]
     )
 
+    share_button.click(None, [], [], _js=share_js)
+
 demo.queue(max_size=20).launch()