Fix share button

README.md

@@ -1,5 +1,5 @@
 ---
-title: YouTube to Illustrated Summary
+title: YouTube to Video Summary
 emoji: 🏢
 colorFrom: indigo
 colorTo: red

app.py

@@ -235,7 +235,7 @@ with block as demo:
                 </h1>
               </div>
               <p style="margin-bottom: 10px; font-size: 94%">
-                Enter the URL of a YouTube video (in Spanish or English) and you'll recive a video with an illustraded summary (in Spanish or English, it works as translator).
+                Enter the URL of a YouTube video (in Spanish or English) and you'll recieve a video with an illustraded summary (in Spanish or English, it works as translator).
                 It works for audio books, history lessons, etc. Try it out with a short video (less than 4 minutes). SEE SOME EXAMPLES AT THE BOTTOM.
               </p>
               <p style="margin-bottom: 10px; font-size: 94%">
@@ -247,7 +247,7 @@ with block as demo:
     with gr.Group():
         with gr.Box():
             with gr.Row(elem_id="setting_id").style(mobile_collapse=False, equal_height=True):
-              gr.HTML("<h1>Setting</h1>")
+              gr.HTML("<h1>Settings</h1>")
             with gr.Row():
               with gr.Column():
                 video_language = gr.Radio(choices=["Spanish", "English"],
@@ -279,7 +279,7 @@ with block as demo:
                     margin=False,
                     rounded=(False, True, True, False),
                 )
-        video_output = gr.Video()
+        video_output = gr.Video(elem_id="output-video")
         file_output = gr.File()
         
         btn.click(datapipeline,

share_btn.py

@@ -22,6 +22,13 @@ share_js = """async () => {
 		const url = await response.text();
 		return url;
 	}
+    async function getInputVideoFile(videoEl){
+        const res = await fetch(videoEl.src);
+        const blob = await res.blob();
+        const videoId = Date.now() % 200;
+        const fileName = `sd-perception-${{videoId}}.mp4`;
+        return new File([blob], fileName, { type: 'video/mp4' }); 
+	}
 	async function getInputImgFile(imgEl){
         const res = await fetch(imgEl.src);
         const blob = await res.blob();
@@ -57,6 +64,7 @@ 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 outputVideoEl = gradioEl.querySelector('#output-video video');
     const outputImgEl = gradioEl.querySelector('#img-out img');
     const outputMusic = gradioEl.querySelector('#music-out audio');
     const outputMusic_src = gradioEl.querySelector('#music-out audio').src;
@@ -68,20 +76,22 @@ share_js = """async () => {
     const shareBtnEl = gradioEl.querySelector('#share-btn');
     const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
     const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
-    if(!outputMusic){
+    if(!outputVideoEl){
         return;
     };
     shareBtnEl.style.pointerEvents = 'none';
     shareIconEl.style.display = 'none';
     loadingIconEl.style.removeProperty('display');
+    const outputVideo = await getInputVideoFile(outputVideoEl);
+    const urlOutputVideo = await uploadFile(outputVideo);
     const outputImg = await getInputImgFile(outputImgEl);
     const urlOutputImg = await uploadFile(outputImg);
     const musicFile = await getOutputMusicFile(outputMusic);
 	const dataOutputMusic = await uploadFile(musicFile);
     
-    const descriptionMd = `#### Spectrogram Image:
+    const descriptionMd = `#### Here is my AI generated Video Summary:
 <img src='${urlOutputImg}' style='max-height: 350px;'>
-#### Spectrogram Sound:
+
 <audio controls>
   <source src="${dataOutputMusic}" type="audio/wav">
 Your browser does not support the audio element.
@@ -92,7 +102,7 @@ Your browser does not support the audio element.
         description: descriptionMd,
     });
 	const paramsStr = params.toString();
-	window.open(`https://huggingface.co/spaces/fffiloni/spectrogram-to-music/discussions/new?${paramsStr}`, '_blank');
+	window.open(`https://huggingface.co/spaces/juancopi81/whisper-demo-es-medium/discussions/new?${paramsStr}`, '_blank');
     shareBtnEl.style.removeProperty('pointer-events');
     shareIconEl.style.removeProperty('display');
     loadingIconEl.style.display = 'none';