Spaces:
Build error
Build error
Commit
•
9de9483
1
Parent(s):
72ecaf1
Update share_btn.py
Browse files- share_btn.py +66 -60
share_btn.py
CHANGED
@@ -8,65 +8,71 @@ loading_icon_html = """<svg id="share-btn-loading-icon" style="display:none;" cl
|
|
8 |
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>"""
|
9 |
|
10 |
share_js = """async () => {
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
'Content-Type': file.type,
|
17 |
-
'X-Requested-With': 'XMLHttpRequest',
|
18 |
-
},
|
19 |
-
body: file, /// <- File inherits from Blob
|
20 |
-
});
|
21 |
-
const url = await response.text();
|
22 |
-
return url;
|
23 |
}
|
24 |
-
|
25 |
-
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
|
35 |
-
if(!imgEls.length){
|
36 |
-
return;
|
37 |
-
};
|
38 |
-
shareBtnEl.style.pointerEvents = 'none';
|
39 |
-
shareIconEl.style.display = 'none';
|
40 |
-
loadingIconEl.style.removeProperty('display');
|
41 |
-
|
42 |
-
var files = [];
|
43 |
-
var nowTime = Date.now();
|
44 |
-
var imgCount = 0;
|
45 |
-
await Promise.all(
|
46 |
-
[...imgEls].map(async (imgEl) => {
|
47 |
-
if (imgEl.offsetWidth > 50 && imgEl.offsetHeight > 50) {
|
48 |
-
const res = await fetch(imgEl.src);
|
49 |
-
const blob = await res.blob();
|
50 |
-
const fileName = `img-cleaner-${nowTime}-${imgCount}.png`;
|
51 |
-
imgCount += 1;
|
52 |
-
files.push(new File([blob], fileName, { type: 'image/png'}));
|
53 |
-
}
|
54 |
-
})
|
55 |
-
);
|
56 |
-
|
57 |
-
const urls = await Promise.all(files.map((f) => uploadFile(f)));
|
58 |
-
const htmlImgs = urls.map(url => `<img src='${url}' width='400' height='400'>`);
|
59 |
-
const descriptionMd = `<div style='display: flex; flex-wrap: wrap; column-gap: 0.75rem;'>
|
60 |
-
${htmlImgs.join(`\n`)}
|
61 |
-
</div>`;
|
62 |
-
const params = new URLSearchParams({
|
63 |
-
title: promptTxt,
|
64 |
-
description: descriptionMd,
|
65 |
});
|
66 |
-
const
|
67 |
-
|
68 |
-
|
69 |
-
|
70 |
-
|
71 |
-
|
72 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
8 |
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>"""
|
9 |
|
10 |
share_js = """async () => {
|
11 |
+
function isMobile() {
|
12 |
+
try {
|
13 |
+
document.createEvent("TouchEvent"); return true;
|
14 |
+
} catch(e) {
|
15 |
+
return false;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
16 |
}
|
17 |
+
}
|
18 |
+
async function uploadFile(file){
|
19 |
+
const UPLOAD_URL = 'https://huggingface.co/uploads';
|
20 |
+
const response = await fetch(UPLOAD_URL, {
|
21 |
+
method: 'POST',
|
22 |
+
headers: {
|
23 |
+
'Content-Type': file.type,
|
24 |
+
'X-Requested-With': 'XMLHttpRequest',
|
25 |
+
},
|
26 |
+
body: file, /// <- File inherits from Blob
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
27 |
});
|
28 |
+
const url = await response.text();
|
29 |
+
return url;
|
30 |
+
}
|
31 |
+
var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
|
32 |
+
if (!gradioEl) {
|
33 |
+
gradioEl = document.querySelector('body > gradio-app');
|
34 |
+
}
|
35 |
+
|
36 |
+
const imgEls = gradioEl.querySelectorAll('#gallery .overflow-hidden');
|
37 |
+
const promptTxt = 'my perfect work';
|
38 |
+
const shareBtnEl = gradioEl.querySelector('#share-btn');
|
39 |
+
const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
|
40 |
+
const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
|
41 |
+
if(!imgEls.length){
|
42 |
+
return;
|
43 |
+
};
|
44 |
+
shareBtnEl.style.pointerEvents = 'none';
|
45 |
+
shareIconEl.style.display = 'none';
|
46 |
+
loadingIconEl.style.removeProperty('display');
|
47 |
+
if (isMobile()) {
|
48 |
+
gradioEl.querySelector('#platform_radio').querySelectorAll('input')[1].checked = true;
|
49 |
+
}
|
50 |
+
var files = [];
|
51 |
+
var nowTime = Date.now();
|
52 |
+
var imgCount = 0;
|
53 |
+
await Promise.all(
|
54 |
+
[...imgEls].map(async (imgEl) => {
|
55 |
+
if (imgEl.offsetWidth > 50 && imgEl.offsetHeight > 50) {
|
56 |
+
const res = await fetch(imgEl.src);
|
57 |
+
const blob = await res.blob();
|
58 |
+
const fileName = `img-cleaner-${nowTime}-${imgCount}.png`;
|
59 |
+
imgCount += 1;
|
60 |
+
files.push(new File([blob], fileName, { type: 'image/png'}));
|
61 |
+
}
|
62 |
+
})
|
63 |
+
);
|
64 |
+
const urls = await Promise.all(files.map((f) => uploadFile(f)));
|
65 |
+
const htmlImgs = urls.map(url => `<img src='${url}' width='400' height='400'>`);
|
66 |
+
const descriptionMd = `<div style='display: flex; flex-wrap: wrap; column-gap: 0.75rem;'>
|
67 |
+
${htmlImgs.join(`\n`)}
|
68 |
+
</div>`;
|
69 |
+
const params = new URLSearchParams({
|
70 |
+
title: promptTxt,
|
71 |
+
description: descriptionMd,
|
72 |
+
});
|
73 |
+
const paramsStr = params.toString();
|
74 |
+
window.open(`https://huggingface.co/spaces/yizhangliu/ImgCleaner/discussions/new?${paramsStr}`, '_blank');
|
75 |
+
shareBtnEl.style.removeProperty('pointer-events');
|
76 |
+
shareIconEl.style.removeProperty('display');
|
77 |
+
loadingIconEl.style.display = 'none';
|
78 |
+
}"""
|