Spaces:
PAIR
/
Running on A10G

Andranik Sargsyan commited on
Commit
073105a
β€’
1 Parent(s): b9f7e06

fix ImageMask display for mobile devices

Browse files
app.py CHANGED
@@ -27,14 +27,14 @@ negative_prompt_str = "text, bad anatomy, bad proportions, blurry, cropped, defo
27
  positive_prompt_str = "Full HD, 4K, high quality, high resolution"
28
 
29
  example_inputs = [
30
- ['assets/examples/images/a40.jpg', 'medieval castle'],
31
- ['assets/examples/images/a4.jpg', 'parrot'],
32
- ['assets/examples/images/a65.jpg', 'hoodie'],
33
- ['assets/examples/images/a54.jpg', 'salad'],
34
- ['assets/examples/images/a51.jpg', 'space helmet'],
35
- ['assets/examples/images/a46.jpg', 'stack of books'],
36
- ['assets/examples/images/a19.jpg', 'antique greek vase'],
37
- ['assets/examples/images/a2.jpg', 'sunglasses'],
38
  ]
39
 
40
  thumbnails = [
@@ -54,7 +54,7 @@ example_previews = [
54
  [thumbnails[2], 'Prompt: hoodie'],
55
  [thumbnails[3], 'Prompt: salad'],
56
  [thumbnails[4], 'Prompt: space helmet'],
57
- [thumbnails[5], 'Prompt: laptop'],
58
  [thumbnails[6], 'Prompt: antique greek vase'],
59
  [thumbnails[7], 'Prompt: sunglasses'],
60
  ]
@@ -122,7 +122,7 @@ def recover_user_session(session_id):
122
 
123
 
124
  def rasg_run(
125
- use_painta, prompt, input, seed, eta,
126
  negative_prompt, positive_prompt, ddim_steps,
127
  guidance_scale=7.5,
128
  batch_size=1, session_id=''
@@ -132,8 +132,8 @@ def rasg_run(
132
  seed = int(seed)
133
  batch_size = max(1, min(int(batch_size), 4))
134
 
135
- image = IImage(input['image']).resize(512)
136
- mask = IImage(input['mask']).rgb().resize(512)
137
 
138
  method = ['rasg']
139
  if use_painta: method.append('painta')
@@ -168,12 +168,12 @@ def rasg_run(
168
  inpainted_images.append(inpainted_image.pil())
169
 
170
  session_id = save_user_session(
171
- input['image'], input['mask'], inpainted_images, prompt, session_id=session_id)
172
 
173
  return blended_images, session_id
174
 
175
 
176
- def sd_run(use_painta, prompt, input, seed, eta,
177
  negative_prompt, positive_prompt, ddim_steps,
178
  guidance_scale=7.5,
179
  batch_size=1, session_id=''
@@ -183,8 +183,8 @@ def sd_run(use_painta, prompt, input, seed, eta,
183
  seed = int(seed)
184
  batch_size = max(1, min(int(batch_size), 4))
185
 
186
- image = IImage(input['image']).resize(512)
187
- mask = IImage(input['mask']).rgb().resize(512)
188
 
189
  method = ['default']
190
  if use_painta: method.append('painta')
@@ -219,7 +219,7 @@ def sd_run(use_painta, prompt, input, seed, eta,
219
  inpainted_images.append(inpainted_image.pil())
220
 
221
  session_id = save_user_session(
222
- input['image'], input['mask'], inpainted_images, prompt, session_id=session_id)
223
 
224
  return blended_images, session_id
225
 
@@ -319,8 +319,15 @@ with gr.Blocks(css='style.css') as demo:
319
  prompt = gr.Textbox(label = "Inpainting Prompt")
320
  with gr.Row():
321
  with gr.Column():
322
- input = gr.ImageMask(label = "Input Image", brush_color='#ff0000', elem_id="inputmask", type="pil")
323
-
 
 
 
 
 
 
 
324
  with gr.Row():
325
  inpaint_btn = gr.Button("Inpaint", scale = 0)
326
 
@@ -363,11 +370,10 @@ with gr.Blocks(css='style.css') as demo:
363
  )
364
 
365
  gr.Examples(
366
- [
367
- example_inputs[i] + [[example_previews[i]]]
368
- for i in range(len(example_previews))
369
- ],
370
- [input, prompt, example_container]
371
  )
372
 
373
  session_id = gr.Textbox(value='', visible=False)
@@ -380,7 +386,8 @@ with gr.Blocks(css='style.css') as demo:
380
  model_picker,
381
  use_painta,
382
  prompt,
383
- input,
 
384
  seed,
385
  eta,
386
  negative_prompt,
 
27
  positive_prompt_str = "Full HD, 4K, high quality, high resolution"
28
 
29
  example_inputs = [
30
+ ['assets/examples/images_1024/a40.jpg', 'assets/examples/images_2048/a40.jpg', 'medieval castle'],
31
+ ['assets/examples/images_1024/a4.jpg', 'assets/examples/images_2048/a4.jpg', 'parrot'],
32
+ ['assets/examples/images_1024/a65.jpg', 'assets/examples/images_2048/a65.jpg', 'hoodie'],
33
+ ['assets/examples/images_1024/a54.jpg', 'assets/examples/images_2048/a54.jpg', 'salad'],
34
+ ['assets/examples/images_1024/a51.jpg', 'assets/examples/images_2048/a51.jpg', 'space helmet'],
35
+ ['assets/examples/images_1024/a46.jpg', 'assets/examples/images_2048/a46.jpg', 'stack of books'],
36
+ ['assets/examples/images_1024/a19.jpg', 'assets/examples/images_2048/a19.jpg', 'antique greek vase'],
37
+ ['assets/examples/images_1024/a2.jpg', 'assets/examples/images_2048/a2.jpg', 'sunglasses'],
38
  ]
39
 
40
  thumbnails = [
 
54
  [thumbnails[2], 'Prompt: hoodie'],
55
  [thumbnails[3], 'Prompt: salad'],
56
  [thumbnails[4], 'Prompt: space helmet'],
57
+ [thumbnails[5], 'Prompt: stack of books'],
58
  [thumbnails[6], 'Prompt: antique greek vase'],
59
  [thumbnails[7], 'Prompt: sunglasses'],
60
  ]
 
122
 
123
 
124
  def rasg_run(
125
+ use_painta, prompt, imageMask, hr_image, seed, eta,
126
  negative_prompt, positive_prompt, ddim_steps,
127
  guidance_scale=7.5,
128
  batch_size=1, session_id=''
 
132
  seed = int(seed)
133
  batch_size = max(1, min(int(batch_size), 4))
134
 
135
+ image = IImage(hr_image).resize(512)
136
+ mask = IImage(imageMask['mask']).rgb().resize(512)
137
 
138
  method = ['rasg']
139
  if use_painta: method.append('painta')
 
168
  inpainted_images.append(inpainted_image.pil())
169
 
170
  session_id = save_user_session(
171
+ hr_image, imageMask['mask'], inpainted_images, prompt, session_id=session_id)
172
 
173
  return blended_images, session_id
174
 
175
 
176
+ def sd_run(use_painta, prompt, imageMask, hr_image, seed, eta,
177
  negative_prompt, positive_prompt, ddim_steps,
178
  guidance_scale=7.5,
179
  batch_size=1, session_id=''
 
183
  seed = int(seed)
184
  batch_size = max(1, min(int(batch_size), 4))
185
 
186
+ image = IImage(hr_image).resize(512)
187
+ mask = IImage(imageMask['mask']).rgb().resize(512)
188
 
189
  method = ['default']
190
  if use_painta: method.append('painta')
 
219
  inpainted_images.append(inpainted_image.pil())
220
 
221
  session_id = save_user_session(
222
+ hr_image, imageMask['mask'], inpainted_images, prompt, session_id=session_id)
223
 
224
  return blended_images, session_id
225
 
 
319
  prompt = gr.Textbox(label = "Inpainting Prompt")
320
  with gr.Row():
321
  with gr.Column():
322
+ imageMask = gr.ImageMask(label = "Input Image", brush_color='#ff0000', elem_id="inputmask", type="pil")
323
+ hr_image = gr.Image(visible=False, type="pil")
324
+ hr_image.change(fn=None, _js="function() {setTimeout(imageMaskResize, 200);}", inputs=[], outputs=[])
325
+ imageMask.upload(
326
+ fn=None,
327
+ _js="async function (a) {hr_img = await resize_b64_img(a['image'], 2048); dp_img = await resize_b64_img(hr_img, 1024); return [hr_img, {image: dp_img, mask: null}]}",
328
+ inputs=[imageMask],
329
+ outputs=[hr_image, imageMask],
330
+ )
331
  with gr.Row():
332
  inpaint_btn = gr.Button("Inpaint", scale = 0)
333
 
 
370
  )
371
 
372
  gr.Examples(
373
+ [example_inputs[i] + [[example_previews[i]]]
374
+ for i in range(len(example_previews))],
375
+ [imageMask, hr_image, prompt, example_container],
376
+ elem_id='examples'
 
377
  )
378
 
379
  session_id = gr.Textbox(value='', visible=False)
 
386
  model_picker,
387
  use_painta,
388
  prompt,
389
+ imageMask,
390
+ hr_image,
391
  seed,
392
  eta,
393
  negative_prompt,
assets/examples/images_1024/a19.jpg ADDED

Git LFS Details

  • SHA256: 2ac8df26a0b92cb6a9e201847b8319ca1a1c1c80584d67b3e274df12a91a299b
  • Pointer size: 130 Bytes
  • Size of remote file: 55.6 kB
assets/examples/images_1024/a2.jpg ADDED

Git LFS Details

  • SHA256: 98bb07323dd7766f2f6e9d0603b23c4488fd58cfb38dadd05c134021db62d575
  • Pointer size: 130 Bytes
  • Size of remote file: 60.8 kB
assets/examples/images_1024/a4.jpg ADDED

Git LFS Details

  • SHA256: 732978375f9f09d2067234b92a8d3db8a76f6cb0289cc903ddcc015a1b162a9d
  • Pointer size: 130 Bytes
  • Size of remote file: 96.6 kB
assets/examples/images_1024/a40.jpg ADDED

Git LFS Details

  • SHA256: e1da3d6ce0c671ca3f5329389d9f1297dc98f0cd54d71769cd17d1eb414870f9
  • Pointer size: 131 Bytes
  • Size of remote file: 124 kB
assets/examples/images_1024/a46.jpg ADDED

Git LFS Details

  • SHA256: e77c26096843eef4ef48de4307c97ed6ba080be18dfd7f817c6270b45f7a1364
  • Pointer size: 130 Bytes
  • Size of remote file: 36.5 kB
assets/examples/images_1024/a51.jpg ADDED

Git LFS Details

  • SHA256: 9a15000700ded82aa0ec89d82b76a91b55c63a7a43bd5c939830fddb4109491d
  • Pointer size: 130 Bytes
  • Size of remote file: 58.4 kB
assets/examples/images_1024/a54.jpg ADDED

Git LFS Details

  • SHA256: adbca2970489fa491d06b3c820ebc1ddd92331e4a2e5f210a8c96bcad7b23e7f
  • Pointer size: 131 Bytes
  • Size of remote file: 163 kB
assets/examples/images_1024/a65.jpg ADDED

Git LFS Details

  • SHA256: 05a689a4d0906d6cdc928e6133e77eaf617250c59061776462f20a6cb9a91df8
  • Pointer size: 130 Bytes
  • Size of remote file: 83.7 kB
assets/examples/{images β†’ images_2048}/a19.jpg RENAMED
File without changes
assets/examples/{images β†’ images_2048}/a2.jpg RENAMED
File without changes
assets/examples/{images β†’ images_2048}/a4.jpg RENAMED
File without changes
assets/examples/{images β†’ images_2048}/a40.jpg RENAMED
File without changes
assets/examples/{images β†’ images_2048}/a46.jpg RENAMED
File without changes
assets/examples/{images β†’ images_2048}/a51.jpg RENAMED
File without changes
assets/examples/{images β†’ images_2048}/a54.jpg RENAMED
File without changes
assets/examples/{images β†’ images_2048}/a65.jpg RENAMED
File without changes
script.js CHANGED
@@ -32,8 +32,85 @@ function demo_load(x) {
32
  return all_gallery_buttons().findIndex(elem => elem.classList.contains('selected'));
33
  }
34
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  window.gradioApp = gradioApp
36
  window.all_gallery_buttons = all_gallery_buttons
37
  window.selected_gallery_button = selected_gallery_button
38
  window.selected_gallery_index = selected_gallery_index
 
 
 
 
39
  }
 
32
  return all_gallery_buttons().findIndex(elem => elem.classList.contains('selected'));
33
  }
34
 
35
+ function loadImg(src){
36
+ return new Promise((resolve, reject) => {
37
+ let img = new Image()
38
+ img.onload = () => resolve(img)
39
+ img.onerror = reject
40
+ img.src = src
41
+ })
42
+ }
43
+
44
+ async function resize_b64_img(b64_img, max_side=2048) {
45
+ var img = await loadImg(b64_img);
46
+ naturalWidth = img.naturalWidth;
47
+ naturalHeight = img.naturalHeight;
48
+
49
+ if (naturalWidth > max_side || naturalHeight > max_side) {
50
+ var width = 0;
51
+ var height = 0;
52
+ if (naturalWidth >= naturalHeight) {
53
+ width = max_side;
54
+ height = Math.ceil((max_side / naturalWidth) * naturalHeight);
55
+ } else {
56
+ height = max_side;
57
+ width = Math.ceil((max_side / naturalHeight) * naturalWidth);
58
+ }
59
+
60
+ var canvas = document.createElement('canvas');
61
+ ctx = canvas.getContext('2d');
62
+ canvas.width = width;
63
+ canvas.height = height;
64
+ ctx.drawImage(img, 0, 0, width, height);
65
+ return canvas.toDataURL();
66
+ }
67
+ return b64_img;
68
+ }
69
+
70
+ // fix image preview on mobile
71
+ function imageMaskResize() {
72
+ const canvases = gradioApp().querySelectorAll('#inputmask canvas');
73
+ if (!canvases.length) {
74
+ window.removeEventListener('resize', imageMaskResize);
75
+ return;
76
+ }
77
+
78
+ const wrapper = canvases[0].closest('.wrap');
79
+ const previewImage = wrapper.previousElementSibling;
80
+
81
+ if (!previewImage.complete) {
82
+ previewImage.addEventListener('load', imageMaskResize);
83
+ return;
84
+ }
85
+
86
+ const w = previewImage.width;
87
+ const h = previewImage.height;
88
+ const nw = previewImage.naturalWidth;
89
+ const nh = previewImage.naturalHeight;
90
+ const portrait = nh > nw;
91
+
92
+ const wW = Math.min(w, portrait ? h / nh * nw : w / nw * nw);
93
+ const wH = Math.min(h, portrait ? h / nh * nh : w / nw * nh);
94
+
95
+ wrapper.style.width = `${wW}px`;
96
+ wrapper.style.height = `${wH}px`;
97
+ wrapper.style.left = `0px`;
98
+ wrapper.style.top = `0px`;
99
+
100
+ canvases.forEach(c => {
101
+ c.style.width = c.style.height = '';
102
+ c.style.maxWidth = '100%';
103
+ c.style.maxHeight = '100%';
104
+ c.style.objectFit = 'contain';
105
+ });
106
+ }
107
+
108
  window.gradioApp = gradioApp
109
  window.all_gallery_buttons = all_gallery_buttons
110
  window.selected_gallery_button = selected_gallery_button
111
  window.selected_gallery_index = selected_gallery_index
112
+ window.resize_b64_img = resize_b64_img
113
+ window.imageMaskResize = imageMaskResize;
114
+
115
+ window.addEventListener('resize', imageMaskResize);
116
  }
style.css CHANGED
@@ -29,4 +29,9 @@
29
  #inputmask {
30
  height: 400px !important;
31
  }
 
 
 
 
 
32
  }
 
29
  #inputmask {
30
  height: 400px !important;
31
  }
32
+ }
33
+
34
+ #examples table td:nth-child(2),
35
+ #examples table th:nth-child(2) {
36
+ display: none!important;
37
  }