fix ImageMask display for mobile devices

app.py

@@ -27,14 +27,14 @@ negative_prompt_str = "text, bad anatomy, bad proportions, blurry, cropped, defo
 positive_prompt_str = "Full HD, 4K, high quality, high resolution"
 
 example_inputs = [
-    ['assets/examples/images/a40.jpg', 'medieval castle'],
-    ['assets/examples/images/a4.jpg', 'parrot'],
-    ['assets/examples/images/a65.jpg', 'hoodie'],
-    ['assets/examples/images/a54.jpg', 'salad'],
-    ['assets/examples/images/a51.jpg', 'space helmet'],
-    ['assets/examples/images/a46.jpg', 'stack of books'],
-    ['assets/examples/images/a19.jpg', 'antique greek vase'],
-    ['assets/examples/images/a2.jpg', 'sunglasses'],
+    ['assets/examples/images_1024/a40.jpg', 'assets/examples/images_2048/a40.jpg', 'medieval castle'],
+    ['assets/examples/images_1024/a4.jpg', 'assets/examples/images_2048/a4.jpg', 'parrot'],
+    ['assets/examples/images_1024/a65.jpg', 'assets/examples/images_2048/a65.jpg', 'hoodie'],
+    ['assets/examples/images_1024/a54.jpg', 'assets/examples/images_2048/a54.jpg', 'salad'],
+    ['assets/examples/images_1024/a51.jpg', 'assets/examples/images_2048/a51.jpg', 'space helmet'],
+    ['assets/examples/images_1024/a46.jpg', 'assets/examples/images_2048/a46.jpg', 'stack of books'],
+    ['assets/examples/images_1024/a19.jpg', 'assets/examples/images_2048/a19.jpg', 'antique greek vase'],
+    ['assets/examples/images_1024/a2.jpg', 'assets/examples/images_2048/a2.jpg', 'sunglasses'],
 ]
 
 thumbnails = [
@@ -54,7 +54,7 @@ example_previews = [
     [thumbnails[2], 'Prompt: hoodie'],
     [thumbnails[3], 'Prompt: salad'],
     [thumbnails[4], 'Prompt: space helmet'],
-    [thumbnails[5], 'Prompt: laptop'],
+    [thumbnails[5], 'Prompt: stack of books'],
     [thumbnails[6], 'Prompt: antique greek vase'],
     [thumbnails[7], 'Prompt: sunglasses'],
 ]
@@ -122,7 +122,7 @@ def recover_user_session(session_id):
 
 
 def rasg_run(
-    use_painta, prompt, input, seed, eta,
+    use_painta, prompt, imageMask, hr_image, seed, eta,
     negative_prompt, positive_prompt, ddim_steps,
     guidance_scale=7.5,
     batch_size=1, session_id=''
@@ -132,8 +132,8 @@ def rasg_run(
     seed = int(seed)
     batch_size = max(1, min(int(batch_size), 4))
 
-    image = IImage(input['image']).resize(512)
-    mask = IImage(input['mask']).rgb().resize(512)
+    image = IImage(hr_image).resize(512)
+    mask = IImage(imageMask['mask']).rgb().resize(512)
 
     method = ['rasg']
     if use_painta: method.append('painta')
@@ -168,12 +168,12 @@ def rasg_run(
         inpainted_images.append(inpainted_image.pil())
 
     session_id = save_user_session(
-        input['image'], input['mask'], inpainted_images, prompt, session_id=session_id)
+        hr_image, imageMask['mask'], inpainted_images, prompt, session_id=session_id)
 
     return blended_images, session_id
 
 
-def sd_run(use_painta, prompt, input, seed, eta,
+def sd_run(use_painta, prompt, imageMask, hr_image, seed, eta,
     negative_prompt, positive_prompt, ddim_steps,
     guidance_scale=7.5,
     batch_size=1, session_id=''
@@ -183,8 +183,8 @@ def sd_run(use_painta, prompt, input, seed, eta,
     seed = int(seed)
     batch_size = max(1, min(int(batch_size), 4))
 
-    image = IImage(input['image']).resize(512)
-    mask = IImage(input['mask']).rgb().resize(512)
+    image = IImage(hr_image).resize(512)
+    mask = IImage(imageMask['mask']).rgb().resize(512)
 
     method = ['default']
     if use_painta: method.append('painta')
@@ -219,7 +219,7 @@ def sd_run(use_painta, prompt, input, seed, eta,
         inpainted_images.append(inpainted_image.pil())
 
     session_id = save_user_session(
-        input['image'], input['mask'], inpainted_images, prompt, session_id=session_id)
+        hr_image, imageMask['mask'], inpainted_images, prompt, session_id=session_id)
     
     return blended_images, session_id
 
@@ -319,8 +319,15 @@ with gr.Blocks(css='style.css') as demo:
     prompt = gr.Textbox(label = "Inpainting Prompt")
     with gr.Row():
         with gr.Column():
-            input = gr.ImageMask(label = "Input Image", brush_color='#ff0000', elem_id="inputmask", type="pil")
-            
+            imageMask = gr.ImageMask(label = "Input Image", brush_color='#ff0000', elem_id="inputmask", type="pil")
+            hr_image = gr.Image(visible=False, type="pil")
+            hr_image.change(fn=None, _js="function() {setTimeout(imageMaskResize, 200);}", inputs=[], outputs=[])
+            imageMask.upload(
+                fn=None,
+                _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}]}",
+                inputs=[imageMask],
+                outputs=[hr_image, imageMask],
+            )
             with gr.Row():
                 inpaint_btn = gr.Button("Inpaint", scale = 0)
    
@@ -363,11 +370,10 @@ with gr.Blocks(css='style.css') as demo:
         )
 
         gr.Examples(
-            [
-                example_inputs[i] + [[example_previews[i]]]
-                for i in range(len(example_previews))
-            ],
-            [input, prompt, example_container]
+            [example_inputs[i] + [[example_previews[i]]]
+                for i in range(len(example_previews))],
+            [imageMask, hr_image, prompt, example_container],
+            elem_id='examples'
         )
 
     session_id = gr.Textbox(value='', visible=False)
@@ -380,7 +386,8 @@ with gr.Blocks(css='style.css') as demo:
             model_picker,
             use_painta,
             prompt,
-            input,
+            imageMask,
+            hr_image,
             seed,
             eta,
             negative_prompt,

script.js

@@ -32,8 +32,85 @@ function demo_load(x) {
         return all_gallery_buttons().findIndex(elem => elem.classList.contains('selected'));
     }
 
+    function loadImg(src){
+        return new Promise((resolve, reject) => {
+          let img = new Image()
+          img.onload = () => resolve(img)
+          img.onerror = reject
+          img.src = src
+        })
+    }
+
+    async function resize_b64_img(b64_img, max_side=2048) {
+        var img = await loadImg(b64_img);
+        naturalWidth = img.naturalWidth;
+        naturalHeight = img.naturalHeight;
+
+        if (naturalWidth > max_side || naturalHeight > max_side) {
+            var width = 0;
+            var height = 0;
+            if (naturalWidth >= naturalHeight) {
+                width = max_side;
+                height = Math.ceil((max_side / naturalWidth) * naturalHeight);
+            } else {
+                height = max_side;
+                width = Math.ceil((max_side / naturalHeight) * naturalWidth);
+            }
+
+            var canvas = document.createElement('canvas');
+            ctx = canvas.getContext('2d');
+            canvas.width = width;
+            canvas.height = height;
+            ctx.drawImage(img, 0, 0, width, height);
+            return canvas.toDataURL();
+        }
+        return b64_img;
+    }
+
+    // fix image preview on mobile
+    function imageMaskResize() {
+        const canvases = gradioApp().querySelectorAll('#inputmask canvas');
+        if (!canvases.length) {
+            window.removeEventListener('resize', imageMaskResize);
+            return;
+        }
+    
+        const wrapper = canvases[0].closest('.wrap');
+        const previewImage = wrapper.previousElementSibling;
+    
+        if (!previewImage.complete) {
+            previewImage.addEventListener('load', imageMaskResize);
+            return;
+        }
+    
+        const w = previewImage.width;
+        const h = previewImage.height;
+        const nw = previewImage.naturalWidth;
+        const nh = previewImage.naturalHeight;
+        const portrait = nh > nw;
+    
+        const wW = Math.min(w, portrait ? h / nh * nw : w / nw * nw);
+        const wH = Math.min(h, portrait ? h / nh * nh : w / nw * nh);
+    
+        wrapper.style.width = `${wW}px`;
+        wrapper.style.height = `${wH}px`;
+        wrapper.style.left = `0px`;
+        wrapper.style.top = `0px`;
+    
+        canvases.forEach(c => {
+            c.style.width = c.style.height = '';
+            c.style.maxWidth = '100%';
+            c.style.maxHeight = '100%';
+            c.style.objectFit = 'contain';
+        });
+    }
+
     window.gradioApp = gradioApp
     window.all_gallery_buttons = all_gallery_buttons
     window.selected_gallery_button = selected_gallery_button
     window.selected_gallery_index = selected_gallery_index
+    window.resize_b64_img = resize_b64_img
+    window.imageMaskResize = imageMaskResize;
+
+    window.addEventListener('resize', imageMaskResize);
 }

style.css

@@ -29,4 +29,9 @@
     #inputmask {
         height: 400px !important;
     }
+}
+
+#examples table td:nth-child(2),
+#examples table th:nth-child(2) {
+  display: none!important;
 }