fix share button (#2)

- fix share button (db8467029e52306e86ff24b699585fd0c2589d6a)


Co-authored-by: Radamés Ajna <[email protected]>

app.py

@@ -218,13 +218,22 @@ css = """
         }
         #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;
+            margin-top: 10px;
+            margin-left: auto;
         }
         #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;
+            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;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;
+        }
         .gr-form{
             flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
         }
@@ -332,7 +341,10 @@ with block as demo:
                   ["https://www.youtube.com/watch?v=Hk5evm1NgzA", "Spanish", "English", "trending on artstation pixiv makoto shinkai"],
                   ["https://www.youtube.com/watch?v=sRmmQBBln9Q", "Spanish", "Spanish", "Hyper real, 4k"],
                   ["https://www.youtube.com/watch?v=qz4Wc48KITA", "Spanish", "English", "detailed art by kay nielsen and walter crane, illustration style, watercolor"]],
-        inputs=[url, video_language, summary_language, video_styles]
+        inputs=[url, video_language, summary_language, video_styles],
+        outputs=[video_output, file_output],
+        fn=datapipeline,
+        cache_examples=True
     )
     gr.HTML(
             """

share_btn.py

@@ -39,15 +39,12 @@ share_js = """async () => {
           
         });
       }
-    const gradioEl = document.querySelector('body > gradio-app');
-    // const gradioEl = document.querySelector("gradio-app").shadowRoot;
-    const inputPromptEl = gradioEl.querySelector('#prompt-in textarea').value;
+    const gradioEl = document.querySelector("gradio-app").shadowRoot || document.querySelector('body > gradio-app');
+    const inputPromptEl = gradioEl.querySelector('#prompt-in input').value;
     const outputVideoEl = gradioEl.querySelector('#output-video video');
     
-    let titleTxt = inputPromptEl;
-    //if(titleTxt.length > 100){
-    //    titleTxt = titleTxt.slice(0, 100) + ' ...';
-    //}
+    let titleTxt = `Video Summary: ${inputPromptEl}`;
+
     const shareBtnEl = gradioEl.querySelector('#share-btn');
     const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
     const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
@@ -60,12 +57,11 @@ share_js = """async () => {
     const outputVideo = await getInputVideoFile(outputVideoEl);
     const urlOutputVideo = await uploadFile(outputVideo);
     
-    const descriptionMd = `#### Here is my AI generated Video Summary:
-    <video width="320" height="240" controls>
-        <source src='${urlOutputVideo}' type="video/mp4">
-        Your browser does not support the video tag.
-    </video>
-
+    const descriptionMd = `
+#### Here is my AI generated Video Summary:
+##### ${inputPromptEl}
+    
+${urlOutputVideo}
 `;
     const params = new URLSearchParams({
         title: titleTxt,