Update share_btn.py

share_btn.py

@@ -9,7 +9,83 @@ 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;
+	}
+	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 = `magic-prompt-${{imgId}}.png`;
+            return new File([blob], fileName, { type: 'image/png' });
+        }else{
+            const fileName = `magic-prompt-${{imgId}}.jpg`;
+            return new File([blob], fileName, { type: 'image/jpeg' });
+        }
+	}
+    const gradioEl = document.querySelector('body > gradio-app');
+    // const gradioEl = document.querySelector("gradio-app").shadowRoot;
+    const inputImgEl = gradioEl.querySelector('#input-img img');
+    const imgEls = gradioEl.querySelectorAll('#generated-gallery img');
+    const promptTxt = gradioEl.querySelector('#translated textarea').value;
+    let titleTxt = 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(!imgEls.length){
+        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 = `sd-perception-${{imgId}}.jpg`;
+            return new File([blob], fileName, { type: 'image/jpeg' });
+        })
+    );
+    const inputFile = await getInputImgFile(inputImgEl);
+    files.push(inputFile);
+    const urls = await Promise.all(files.map((f) => uploadFile(f)));
+    const urlInputImg = urls.pop();
+	const htmlImgs = urls.map(url => `<img src='${url}' width='400' height='400'>`);
+    const htmlImgsMd = htmlImgs.join(`\n`);
+	const descriptionMd = `#### Input img:
+<img src='${urlInputImg}' style='max-height: 350px;'>
+#### Caption:
+${promptTxt}
+#### Generations:
+<div style='display: flex; flex-wrap: wrap; column-gap: 0.75rem;'>
+${htmlImgsMd}
+</div>`;
+    const params = new URLSearchParams({
+        title: titleTxt,
+        description: descriptionMd,
+    });
+	const paramsStr = params.toString();
+	window.open(`https://huggingface.co/spaces/huggingface-projects/magic-diffusion/new?${paramsStr}`, '_blank');
+    shareBtnEl.style.removeProperty('pointer-events');
+    shareIconEl.style.removeProperty('display');
+    loadingIconEl.style.display = 'none'; }
      alert("hello")
 
     console.log("hello")