Update share_btn.py

share_btn.py

@@ -9,78 +9,76 @@ style = "color: #ffffff;
 xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" aria - hidden="true" fill = "none" focusable = "false" role = "img" width = "1em" height = "1em" preserveAspectRatio = "xMidYMid meet" viewBox = "0 0 24 24" ><circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="white" stroke-width="4"></circle><path style="opacity: 0.75;" fill="white" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg > """
 
 share_js = """async () => {
-    
-// console.log('share button clicked');
-
-async function uploadFile(file) {
-    const UPLOAD_URL = 'https://huggingface.co/uploads';
-    const response = await fetch(UPLOAD_URL, {
-        method: 'POST',
-        headers: {
-            'Content-Type': file.type,
-            'X-Requested-With': 'XMLHttpRequest',
-        },
-        body: file, /// <- File inherits from Blob
+
+    async function uploadFile(file) {
+        const UPLOAD_URL = 'https://huggingface.co/uploads';
+        const response = await fetch(UPLOAD_URL, {
+            method: 'POST',
+            headers: {
+                'Content-Type': file.type,
+                'X-Requested-With': 'XMLHttpRequest',
+            },
+            body: file, /// <- File inherits from Blob
+        });
+        const url = await response.text();
+        return url;
+    }
+
+    async function getVideoFile(videoEl) {
+        const res = await fetch(videoEl.src);
+        const blob = await res.blob();
+        const videoId = Date.now() % 200;
+        const fileName = `video-${{ videoId }}.mp4`;
+        const file = new File([blob], fileName, { type: 'video/mp4' });
+        console.log(file);
+        return file;
+    }
+
+
+    const gradioAppEL = document.querySelector('body > gradio-app');
+
+    const prompt_1 = gradioAppEL.querySelector('#riff-prompt_1 textarea').value;
+    const prompt_2 = gradioAppEL.querySelector('#riff-prompt_2 textarea').value;
+    const feel = gradioAppEL.querySelector("#riff-feel select").value;
+    const seed = gradioAppEL.querySelector("#riff-seed input").value;
+
+    const videoEl = gradioAppEL.querySelector('#riff-video video');
+
+    const title = prompt_2 ? `From ${prompt_1} to ${prompt_2}` : prompt_1;
+
+    const shareBtnEl = gradioAppEL.querySelector('#share-btn');
+    const shareIconEl = gradioAppEL.querySelector('#share-btn-share-icon');
+    const loadingIconEl = gradioAppEL.querySelector('#share-btn-loading-icon');
+
+    if (!videoEl) {
+        return;
+    };
+
+    shareBtnEl.style.pointerEvents = 'none';
+    shareIconEl.style.display = 'none';
+    loadingIconEl.style.removeProperty('display');
+
+    const video = await getVideoFile(videoEl);
+
+    const descriptionMd = `Prompt: ${title}
+    Feel: ${feel}
+    Seed: ${seed}
+
+    #### Video:
+
+    <video controls>
+        <source src="${video}" type="video/mp4">
+    Your browser does not support the video element.
+    </video>
+    `;
+
+    const params = new URLSearchParams({
+        title: title,
+        description: descriptionMd,
     });
-    const url = await response.text();
-    return url;
-}
-
-async function getVideoFile(videoEl) {
-    const res = await fetch(videoEl.src);
-    const blob = await res.blob();
-    const videoId = Date.now() % 200;
-    const fileName = `video-${{ videoId }}.mp4`;
-    const file = new File([blob], fileName, { type: 'video/mp4' });
-    console.log(file);
-    return file;
-}
-
-
-const gradioAppEL = document.querySelector('body > gradio-app');
-
-const prompt_1 = gradioAppEL.querySelector('#riff-prompt_1 textarea').value;
-const prompt_2 = gradioAppEL.querySelector('#riff-prompt_2 textarea').value;
-const feel = gradioAppEL.querySelector("#riff-feel select").value;
-const seed = gradioAppEL.querySelector("#riff-seed input").value;
-
-const videoEl = gradioAppEL.querySelector('#riff-video video');
-
-const title = prompt_2 ? `From ${prompt_1} to ${prompt_2}` : prompt_1;
-
-const shareBtnEl = gradioAppEL.querySelector('#share-btn');
-const shareIconEl = gradioAppEL.querySelector('#share-btn-share-icon');
-const loadingIconEl = gradioAppEL.querySelector('#share-btn-loading-icon');
-
-if (!videoEl) {
-    return;
-};
-
-shareBtnEl.style.pointerEvents = 'none';
-shareIconEl.style.display = 'none';
-loadingIconEl.style.removeProperty('display');
-
-const video = await getVideoFile(videoEl);
-
-const descriptionMdVideo = `Prompt: ${title}
-Feel: ${feel}
-Seed: ${seed}
-
-#### Video:
-
-<video controls>
-    <source src="${video}" type="video/mp4">
-Your browser does not support the video element.
-</video>
-`;
-
-const params = new URLSearchParams({
-    title: title,
-    description: descriptionMd,
-});
-const paramsStr = params.toString();
-window.open(`https://huggingface.co/spaces/anzorq/riffusion-demo/discussions/new?${paramsStr}`, '_blank');
-shareBtnEl.style.removeProperty('pointer-events');
-shareIconEl.style.removeProperty('display');
-loadingIconEl.style.display = 'none';
+    const paramsStr = params.toString();
+    window.open(`https://huggingface.co/spaces/anzorq/riffusion-demo/discussions/new?${paramsStr}`, '_blank');
+    shareBtnEl.style.removeProperty('pointer-events');
+    shareIconEl.style.removeProperty('display');
+    loadingIconEl.style.display = 'none';
 }"""