Update share_btn.py

share_btn.py

@@ -8,65 +8,71 @@ loading_icon_html = """<svg id="share-btn-loading-icon" style="display:none;" cl
    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 () => {
-        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;
+    function isMobile() {
+        try {
+            document.createEvent("TouchEvent"); return true;
+        } catch(e) {
+            return false; 
         }
-
-        var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
-        if (!gradioEl) {
-            gradioEl = document.querySelector('body > gradio-app');
-        }
-        
-        const imgEls = gradioEl.querySelectorAll('#gallery .overflow-hidden');
-        const promptTxt = 'my perfect work'; 
-        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){
-            return;
-        };
-        shareBtnEl.style.pointerEvents = 'none';
-        shareIconEl.style.display = 'none';
-        loadingIconEl.style.removeProperty('display');
-
-        var files = [];
-        var nowTime = Date.now();
-        var imgCount = 0;
-        await Promise.all(
-            [...imgEls].map(async (imgEl) => {
-                if (imgEl.offsetWidth > 50 && imgEl.offsetHeight > 50) {
-                    const res = await fetch(imgEl.src);
-                    const blob = await res.blob();
-                    const fileName = `img-cleaner-${nowTime}-${imgCount}.png`;
-                    imgCount += 1;
-                    files.push(new File([blob], fileName, { type: 'image/png'}));
-                }
-            })
-        );
-
-        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 params = new URLSearchParams({
-            title: promptTxt,
-            description: descriptionMd,
+    }
+    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 paramsStr = params.toString();
-        window.open(`https://huggingface.co/spaces/yizhangliu/ImgCleaner/discussions/new?${paramsStr}`, '_blank');
-        shareBtnEl.style.removeProperty('pointer-events');
-        shareIconEl.style.removeProperty('display');
-        loadingIconEl.style.display = 'none';
-    }"""
-
+        const url = await response.text();
+        return url;
+    }
+    var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
+    if (!gradioEl) {
+        gradioEl = document.querySelector('body > gradio-app');
+    }
+    
+    const imgEls = gradioEl.querySelectorAll('#gallery .overflow-hidden');
+    const promptTxt = 'my perfect work'; 
+    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){
+        return;
+    };
+    shareBtnEl.style.pointerEvents = 'none';
+    shareIconEl.style.display = 'none';
+    loadingIconEl.style.removeProperty('display');
+    if (isMobile()) {
+        gradioEl.querySelector('#platform_radio').querySelectorAll('input')[1].checked = true;
+    }
+    var files = [];
+    var nowTime = Date.now();
+    var imgCount = 0;
+    await Promise.all(
+        [...imgEls].map(async (imgEl) => {
+            if (imgEl.offsetWidth > 50 && imgEl.offsetHeight > 50) {
+                const res = await fetch(imgEl.src);
+                const blob = await res.blob();
+                const fileName = `img-cleaner-${nowTime}-${imgCount}.png`;
+                imgCount += 1;
+                files.push(new File([blob], fileName, { type: 'image/png'}));
+            }
+        })
+    );
+    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 params = new URLSearchParams({
+        title: promptTxt,
+        description: descriptionMd,
+    });
+    const paramsStr = params.toString();
+    window.open(`https://huggingface.co/spaces/yizhangliu/ImgCleaner/discussions/new?${paramsStr}`, '_blank');
+    shareBtnEl.style.removeProperty('pointer-events');
+    shareIconEl.style.removeProperty('display');
+    loadingIconEl.style.display = 'none';
+}"""