Update share_btn.py

share_btn.py

@@ -22,38 +22,82 @@ 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();
+        const imgId = Date.now() % 200;
+        const isPng = imgEl.src.startsWith(`data:image/png`);
+        if(isPng){
+            const fileName = `sd-perception-${{imgId}}.png`;
+            return new File([blob], fileName, { type: 'image/png' });
+        }else{
+            const fileName = `sd-perception-${{imgId}}.jpg`;
+            return new File([blob], fileName, { type: 'image/jpeg' });
+        }
+	}
+    async function getOutputMusicFile(audioEL){
+        const res = await fetch(audioEL.src);
+        const blob = await res.blob();
+        const audioId = Date.now() % 200;
+        const fileName = `spectro-music-${{audioId}}.wav`;
+        const musicBlob = new File([blob], fileName, { type: 'audio/wav' });
+        console.log(musicBlob);
+        return musicBlob;
+	}
+    
+    async function audioToBase64(audioFile) {
+        return new Promise((resolve, reject) => {
+            let reader = new FileReader();
+            reader.readAsDataURL(audioFile);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+          
+        });
+      }
     const gradioEl = document.querySelector('body > gradio-app');
-    const imgEls = gradioEl.querySelectorAll('#gallery img');
-    const promptTxt = gradioEl.querySelector('#prompt-text-input input').value;
+    // const gradioEl = document.querySelector("gradio-app").shadowRoot;
+    const inputPromptEl = gradioEl.querySelector('#input-prompt input').value;
+    const outputVideoEl = gradioEl.querySelector('#output-video video');
+    //const outputMusic = gradioEl.querySelector('#music-out audio');
+    //const outputMusic_src = gradioEl.querySelector('#music-out audio').src;
+    
+    let titleTxt = inputPromptEl;
+    //if(titleTxt.length > 100){
+    //    titleTxt = titleTxt.slice(0, 100) + ' ...';
+    //}
     const shareBtnEl = gradioEl.querySelector('#share-btn');
     const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
     const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
-    if(!imgEls.length){
+    if(!outputVideoEl){
         return;
     };
     shareBtnEl.style.pointerEvents = 'none';
     shareIconEl.style.display = 'none';
     loadingIconEl.style.removeProperty('display');
-    const files = await Promise.all(
-        [...imgEls].map(async (imgEl) => {
-            const res = await fetch(imgEl.src);
-            const blob = await res.blob();
-            const imgId = Date.now() % 200;
-            const fileName = `diffuse-the-rest-${{imgId}}.jpg`;
-            return new File([blob], fileName, { type: 'image/jpeg' });
-        })
-    );
-    const urls = await Promise.all(files.map((f) => uploadFile(f)));
-	const htmlImgs = urls.map(url => `<img src='${url}' width='400' height='400'>`);
-	const descriptionMd = `<div style='display: flex; flex-wrap: wrap; column-gap: 0.75rem;'>
-${htmlImgs.join(`\n`)}
-</div>`;
+    const outputVideo = await getInputVideoFile(outputVideoEl);
+    const urlOutputVideo = await uploadFile(outputVideo);
+    //const outputImg = await getInputImgFile(outputvideoEl);
+    //const urlOutputImg = await uploadFile(outputImg);
+    //const musicFile = await getOutputMusicFile(outputMusic);
+	//const dataOutputMusic = await uploadFile(musicFile);
+    
+    const descriptionMd = `#### Here is my AI generated video:
+    
+<video src='${urlOutputVideo}' style='max-height: 704px;'>
+`;
     const params = new URLSearchParams({
-        title: promptTxt,
+        title: titleTxt,
         description: descriptionMd,
     });
 	const paramsStr = params.toString();
-	window.open(`https://huggingface.co/spaces/stabilityai/stable-diffusion/discussions/new?${paramsStr}`, '_blank');
+	window.open(`https://huggingface.co/spaces/DGSpitzer/TXT-2-IMG-2-MUSIC-2-VIDEO-w-RIFFUSION/discussions/new?${paramsStr}`, '_blank');
     shareBtnEl.style.removeProperty('pointer-events');
     shareIconEl.style.removeProperty('display');
     loadingIconEl.style.display = 'none';