Update share_btn.py

share_btn.py

@@ -7,98 +7,69 @@ loading_icon_html = """<svg id="share-btn-loading-icon" style="display:none;" cl
    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>"""
 
-download_icon_html = """<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">  <image id="image0" width="24" height="24" x="0" y="0"
-    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAAAAADFHGIkAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
-AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
-cwAADsMAAA7DAcdvqGQAAAAHdElNRQfmCxAEABlIYjStAAAAAW9yTlQBz6J3mgAAAThJREFUKM9N
-kT1uVHEMxH/+eClQkJB2lVPkBBENiUSNcgUK7rE3gFwACQ5AnYKKmk16kBAnAIVq928PRfblrQvb
-47Eta2ziYJLTZjP0ORkmkI0Z29ME9NJ2TMhmB0AudX3hjT0xx6tec7uAXFLtjjYdEzax1HGaggK1
-5uMKlFgHRIVZgehwhTAHF010kyEshMoaxzC8Hi4+0m2fXz0UHhiJTHTsfrw7KT69fbF7PlJy0E4a
-Kt2t8uwsV1tJLQ0hqf580NDdKmJ9r6H3f7slpNbG7iVt1+vvkra+kVoJRp/8OnfOf/IM+vfUYKRg
-XG1u4tQpgv53s7/aJ6CWdM2UkdOUkRPXklqmMq/49tUaQ7guX1a0wgQjq6eDsLK9x0gwMRLQQdnH
-OBLbJ+UdgACDRzhMIw+ftSUw8j+K6bj3uR+D8wAAABplWElmTU0AKgAAAAgAAQESAAMAAAABAAEA
-AAAAAAATwHXnAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTExLTE2VDA0OjAwOjI1KzAwOjAwlNr0
-hwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0xMS0xNlQwNDowMDoyNSswMDowMOWHTDsAAAAodEVY
-dGRhdGU6dGltZXN0YW1wADIwMjItMTEtMTZUMDQ6MDA6MjUrMDA6MDCykm3kAAAAAElFTkSuQmCC" />
-</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;
-	}
+        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 find_els(parent, selectors, min_size){
+              var elAry = Array.prototype.filter.call(parent.querySelectorAll(selectors),function(el){
+                return (el.offsetWidth>min_size && el.offsetHeight>min_size);
+            });
+            return elAry;
+        }
+
+        var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
+        if (!gradioEl) {
+            gradioEl = document.querySelector('body > gradio-app');
+        }
+        
+        // const imgEls = gradioEl.querySelectorAll('#gallery img');
+        const imgEls = find_els(gradioEl, '#gallery .overflow-hidden', 50);
+        console.log(imgEls);
+        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');
 
-	async function getInputImgFile(imgCanvas){
-        const blob = await new Promise(resolve => imgCanvas.toBlob(resolve));
-        const imgId = Date.now() % 200;
-        const fileName = 'image-cleaner-${{imgId}}.png';
-        return new File([blob], fileName, { type: 'image/png' });
-	}
-    async function getOutoutImgFile(imgEl){
-        const res = await fetch(imgEl.src);
-        const blob = await res.blob();
-        const imgId = Date.now() % 200;
-        const fileName = 'image-cleaner-${{imgId}}.png';
-        return new File([blob], fileName, { type: 'image/png' });
-    }
-    var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
-    if (!gradioEl) {
-        gradioEl = document.querySelector('body > gradio-app');
-    }    
-    const inputImgCanvas = gradioEl.querySelector('canvas[key="drawing"]');
-    const outputImgEl = gradioEl.querySelector('#image_output img');
-    const promptTxt = ''; ///gradioEl.querySelector('#input-text textarea').value;
-    let titleTxt = 'my perfect work'; ///promptTxt;
-    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(!outputImgEl){
-        return;
-    };
-    shareBtnEl.style.pointerEvents = 'none';
-    shareIconEl.style.display = 'none';
-    
-    loadingIconEl.style.removeProperty('display');
-    const inputImgFile = await getInputImgFile(inputImgCanvas);
-    const outputImgFile = await getOutoutImgFile(outputImgEl);
-    
-    const files = [inputImgFile, outputImgFile];
-    const urls = await Promise.all(files.map((f) => uploadFile(f)));
-	const htmlImgs = urls.map(url => `<img src='${url}' style='max-width: 450px;'>`);
-    const [inputImgUrl, outputImgUrl] = htmlImgs;
-    
-	var descriptionMd = `<div style='display: flex; flex-wrap: wrap; column-gap: 0.75rem;'>
-                <div>
-                    ${inputImgUrl}
-                    ${promptTxt}
-                </div>
-                <div>
-                    ${outputImgUrl}
-                </div>
-            </div>`;
-    const params = new URLSearchParams({
-        title: titleTxt,
-        description: descriptionMd,
-    });
-    
-	const paramsStr = params.toString();
-	window.open(`${window.location.href}/discussions/new?${paramsStr}`, '_blank');
-    shareBtnEl.style.removeProperty('pointer-events');
-    shareIconEl.style.removeProperty('display');
-    loadingIconEl.style.display = 'none';
-    
-}"""
+        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 = `img-cleaner-${{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' height1='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';
+    }"""