om-app commited on
Commit
9368155
·
1 Parent(s): 9cd5ee2

Update share_btn.py

Browse files
Files changed (1) hide show
  1. 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 = """async () => {
12
- async function uploadFile(file){
13
- const UPLOAD_URL = 'https://huggingface.co/uploads';
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
  }"""