Update app.py

app.py

@@ -17,7 +17,6 @@ def infer (image_in):
     return output_video_path, gr.Group.update(visible=True)
 
 css="""
-
 #col-container {
     max-width: 580px; 
     margin-left: auto; 
@@ -42,7 +41,8 @@ css="""
   justify-content: center; 
   align-items: center; 
   border-radius: 9999px !important; 
-  max-width: 13rem;
+  max-width: 15rem;
+  height: 36px;
 }
 div#share-btn-container > div {
     flex-direction: row;
@@ -76,9 +76,15 @@ div#share-btn-container > div {
 #share-btn-container.hidden {
   display: none!important;
 }
+div#component-7 {
+    /* display: flex; */
+    align-items: center;
+    /* justify-content: center; */
+}
 img[src*='#center'] { 
     display: block;
-    margin: auto;
+    margin: unset;
+    margin-top: 6px;
 }
 .footer {
     margin-bottom: 45px;
@@ -90,7 +96,7 @@ img[src*='#center'] {
     font-size: .8rem;
     display: inline-block;
     padding: 0 10px;
-    transform: translateY(10px);
+    transform: translateY(16px);
     background: white;
 }
 .dark .footer {
@@ -99,7 +105,6 @@ img[src*='#center'] {
 .dark .footer > p {
     background: #0b0f19;
 }
-
 """
 
 with gr.Blocks(css=css) as demo:
@@ -109,15 +114,11 @@ with gr.Blocks(css=css) as demo:
             <h1 style="text-align: center;">
                 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 <a href="https://huggingface.co/spaces/fffiloni/MS-Image2Video/discussions">Community</a> ;)
             </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)
-
         
         """)
 
@@ -127,30 +128,28 @@ with gr.Blocks(css=css) as demo:
             type = "filepath",
             elem_id = "image-in"
         )
+        with gr.Row():
 
-        submit_btn = gr.Button(
-            "Submit"
-        )
+            submit_btn = gr.Button(
+                "Submit"
+            )
 
         video_out = gr.Video(
             label = "Video Result",
             elem_id = "video-out"
         )
 
-        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")
+        with gr.Row():
 
-        gr.HTML("""
-        
-            <div class="footer">
-                <p>
-                MS-Image2Video Demo by 🤗 <a href="https://twitter.com/fffiloni" target="_blank">Sylvain Filoni</a>
-                </p>
-            </div>
+            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/MS-Image2Video-cloning?duplicate=true)
+            """)
 
         gr.Examples(
             examples = [
@@ -208,6 +207,15 @@ with gr.Blocks(css=css) as demo:
             cache_examples = True
         )
 
+        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 = [
@@ -221,4 +229,4 @@ with gr.Blocks(css=css) as demo:
 
     share_button.click(None, [], [], _js=share_js)
 
-demo.queue(max_size=6).launch()
+demo.queue(max_size=6).launch()