Spaces:
Runtime error
Runtime error
Update share_btn.py
Browse files- share_btn.py +3 -77
share_btn.py
CHANGED
@@ -8,83 +8,9 @@ loading_icon_html = """<svg id="share-btn-loading-icon" style="display:none;" cl
|
|
8 |
"
|
9 |
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>"""
|
10 |
|
11 |
-
share_js = """
|
12 |
-
|
13 |
-
|
14 |
-
const response = await fetch(UPLOAD_URL, {
|
15 |
-
method: 'POST',
|
16 |
-
headers: {
|
17 |
-
'Content-Type': file.type,
|
18 |
-
'X-Requested-With': 'XMLHttpRequest',
|
19 |
-
},
|
20 |
-
body: file, /// <- File inherits from Blob
|
21 |
-
});
|
22 |
-
const url = await response.text();
|
23 |
-
return url;
|
24 |
-
}
|
25 |
-
async function getInputImgFile(imgEl){
|
26 |
-
const res = await fetch(imgEl.src);
|
27 |
-
const blob = await res.blob();
|
28 |
-
const imgId = Date.now() % 200;
|
29 |
-
const isPng = imgEl.src.startsWith(`data:image/png`);
|
30 |
-
if(isPng){
|
31 |
-
const fileName = `magic-prompt-${{imgId}}.png`;
|
32 |
-
return new File([blob], fileName, { type: 'image/png' });
|
33 |
-
}else{
|
34 |
-
const fileName = `magic-prompt-${{imgId}}.jpg`;
|
35 |
-
return new File([blob], fileName, { type: 'image/jpeg' });
|
36 |
-
}
|
37 |
-
}
|
38 |
-
const gradioEl = document.querySelector('body > gradio-app');
|
39 |
-
// const gradioEl = document.querySelector("gradio-app").shadowRoot;
|
40 |
-
const inputImgEl = gradioEl.querySelector('#input-img img');
|
41 |
-
const imgEls = gradioEl.querySelectorAll('#generated-gallery img');
|
42 |
-
const promptTxt = gradioEl.querySelector('#translated textarea').value;
|
43 |
-
let titleTxt = promptTxt;
|
44 |
-
if(titleTxt.length > 100){
|
45 |
-
titleTxt = titleTxt.slice(0, 100) + ' ...';
|
46 |
-
}
|
47 |
-
const shareBtnEl = gradioEl.querySelector('#share-btn');
|
48 |
-
const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
|
49 |
-
const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
|
50 |
-
if(!imgEls.length){
|
51 |
-
return;
|
52 |
-
};
|
53 |
-
shareBtnEl.style.pointerEvents = 'none';
|
54 |
-
shareIconEl.style.display = 'none';
|
55 |
-
loadingIconEl.style.removeProperty('display');
|
56 |
-
const files = await Promise.all(
|
57 |
-
[...imgEls].map(async (imgEl) => {
|
58 |
-
const res = await fetch(imgEl.src);
|
59 |
-
const blob = await res.blob();
|
60 |
-
const imgId = Date.now() % 200;
|
61 |
-
const fileName = `sd-perception-${{imgId}}.jpg`;
|
62 |
-
return new File([blob], fileName, { type: 'image/jpeg' });
|
63 |
-
})
|
64 |
-
);
|
65 |
-
const inputFile = await getInputImgFile(inputImgEl);
|
66 |
-
files.push(inputFile);
|
67 |
-
const urls = await Promise.all(files.map((f) => uploadFile(f)));
|
68 |
-
const urlInputImg = urls.pop();
|
69 |
-
const htmlImgs = urls.map(url => `<img src='${url}' width='400' height='400'>`);
|
70 |
-
const htmlImgsMd = htmlImgs.join(`\n`);
|
71 |
-
const descriptionMd = `#### Input img:
|
72 |
-
<img src='${urlInputImg}' style='max-height: 350px;'>
|
73 |
-
#### Caption:
|
74 |
-
${promptTxt}
|
75 |
-
#### Generations:
|
76 |
-
<div style='display: flex; flex-wrap: wrap; column-gap: 0.75rem;'>
|
77 |
-
${htmlImgsMd}
|
78 |
-
</div>`;
|
79 |
-
const params = new URLSearchParams({
|
80 |
-
title: titleTxt,
|
81 |
-
description: descriptionMd,
|
82 |
-
});
|
83 |
-
const paramsStr = params.toString();
|
84 |
-
window.open(`https://huggingface.co/spaces/huggingface-projects/magic-diffusion/new?${paramsStr}`, '_blank');
|
85 |
-
shareBtnEl.style.removeProperty('pointer-events');
|
86 |
-
shareIconEl.style.removeProperty('display');
|
87 |
-
loadingIconEl.style.display = 'none';
|
88 |
|
89 |
console.log("hello")
|
90 |
}"""
|
|
|
8 |
"
|
9 |
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>"""
|
10 |
|
11 |
+
share_js = """
|
12 |
+
|
13 |
+
alert("hello")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
14 |
|
15 |
console.log("hello")
|
16 |
}"""
|