mishig HF staff commited on
Commit
282f153
1 Parent(s): 753d179

Add input img as part of share button

Browse files
Files changed (2) hide show
  1. app.py +1 -1
  2. share_btn.py +17 -0
app.py CHANGED
@@ -53,7 +53,7 @@ with gr.Blocks(css=css) as demo:
53
 
54
  with gr.Row():
55
  with gr.Column():
56
- input_img = gr.Image(type="filepath")
57
  with gr.Row():
58
  see_prompts = gr.Button("Check how your image prompts your model!")
59
 
 
53
 
54
  with gr.Row():
55
  with gr.Column():
56
+ input_img = gr.Image(type="filepath", elem_id="input-img")
57
  with gr.Row():
58
  see_prompts = gr.Button("Check how your image prompts your model!")
59
 
share_btn.py CHANGED
@@ -23,8 +23,23 @@ share_js = """async () => {
23
  return url;
24
  }
25
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  const gradioEl = document.querySelector('body > gradio-app');
27
  // const gradioEl = document.querySelector("gradio-app").shadowRoot;
 
28
  const imgEls = gradioEl.querySelectorAll('#generated-gallery img');
29
  const promptTxt = gradioEl.querySelector('#translated textarea').value;
30
  const shareBtnEl = gradioEl.querySelector('#share-btn');
@@ -48,6 +63,8 @@ share_js = """async () => {
48
  return new File([blob], fileName, { type: 'image/jpeg' });
49
  })
50
  );
 
 
51
 
52
  const urls = await Promise.all(files.map((f) => uploadFile(f)));
53
  const htmlImgs = urls.map(url => `<img src='${url}' width='400' height='400'>`);
 
23
  return url;
24
  }
25
 
26
+ async function getInputImgFile(imgEl){
27
+ const res = await fetch(imgEl.src);
28
+ const blob = await res.blob();
29
+ const imgId = Date.now() % 200;
30
+ const isPng = imgEl.src.startsWith(`data:image/png`);
31
+ if(isPng){
32
+ const fileName = `sd-perception-${{imgId}}.png`;
33
+ return new File([blob], fileName, { type: 'image/png' });
34
+ }else{
35
+ const fileName = `sd-perception-${{imgId}}.jpg`;
36
+ return new File([blob], fileName, { type: 'image/jpeg' });
37
+ }
38
+ }
39
+
40
  const gradioEl = document.querySelector('body > gradio-app');
41
  // const gradioEl = document.querySelector("gradio-app").shadowRoot;
42
+ const inputImgEl = gradioEl.querySelector('#input-img img');
43
  const imgEls = gradioEl.querySelectorAll('#generated-gallery img');
44
  const promptTxt = gradioEl.querySelector('#translated textarea').value;
45
  const shareBtnEl = gradioEl.querySelector('#share-btn');
 
63
  return new File([blob], fileName, { type: 'image/jpeg' });
64
  })
65
  );
66
+ const inputFile = await getInputImgFile(inputImgEl);
67
+ files.push(inputFile);
68
 
69
  const urls = await Promise.all(files.map((f) => uploadFile(f)));
70
  const htmlImgs = urls.map(url => `<img src='${url}' width='400' height='400'>`);