add js script to adapt to mobile devices

app.py

@@ -4,7 +4,6 @@ import numpy as np
 import os,sys
 import torch
 import cv2
-import base64
 
 import io
 import multiprocessing
@@ -12,7 +11,8 @@ import random
 import time
 from loguru import logger
 
-from share_btn import community_icon_html, loading_icon_html, share_js
+from utils import *
+from share_btn import *
 
 from lama_cleaner.model_manager import ModelManager
 from lama_cleaner.schema import Config
@@ -99,11 +99,13 @@ model = None
 def model_process(image, mask, img_enhancer):
     global model,image_enhancer
     
+    ori_image = image
     if mask.shape[0] == image.shape[1] and mask.shape[1] == image.shape[0] and mask.shape[0] != mask.shape[1]:
         # rotate image
-        image = np.transpose(image[::-1, ...][:, ::-1], axes=(1, 0, 2))[::-1, ...]
-        
-    original_shape = image.shape
+        ori_image = np.transpose(image[::-1, ...][:, ::-1], axes=(1, 0, 2))[::-1, ...]
+        image = ori_image
+    
+    original_shape = ori_image.shape
     interpolation = cv2.INTER_CUBIC
     
     size_limit = 1080
@@ -167,7 +169,7 @@ def model_process(image, mask, img_enhancer):
         log_info = f"image_enhancer_: {(time.time() - start) * 1000}ms, {res_np_img.shape} "
         logger.info(log_info)
          
-    return  image
+    return  image, Image.fromarray(ori_image)
     
 def resize_image(pil_image, new_width=400):
     width, height = pil_image.size
@@ -181,9 +183,9 @@ model = ModelManager(
     )
 
 image_type = 'pil' # filepath' 
-def predict(input, img_enhancer):    
+def predict(input, img_enhancer):  
     if input is None:
-        return None
+        return None, [], gr.update(visible=False)
     if image_type == 'filepath':
         # input: {'image': '/tmp/tmp8mn9xw93.png', 'mask': '/tmp/tmpn5ars4te.png'}
         origin_image_bytes = open(input["image"], 'rb').read()
@@ -196,165 +198,12 @@ def predict(input, img_enhancer):
         mask_pil = input['mask']
         image = np.array(image_pil)
         mask = np.array(mask_pil.convert("L"))
-    output = model_process(image, mask, img_enhancer)
-    return output, [resize_image(image_pil, new_width=400), resize_image(output, new_width=400)], gr.update(visible=True)
-
-css = '''    
-    .container {max-width: 1150px; margin: auto;padding-top: 1.5rem}
-    #begin-btn {color: blue; font-size:20px;}
-    #work-container {min-width: min(160px, 100%) !important;flex-grow: 0 !important}
-   
-    #op-container{margin: 0 auto; text-align: center;width:fit-content;min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
-    #erase-btn-container{margin: 0 auto; text-align: center;width:150px;border-width:3px;border-color:#2c9748}
-    #erase-btn {padding:0;}
-    #enhancer-checkbox{width:520px}
-    #enhancer-tip{width:450px}
-    #enhancer-tip-div{text-align: left}
-
-    #image_output{margin: 0 auto; text-align: center;width:640px}
-
-    #download-container{margin: 0 auto; text-align: center;width:fit-content; min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
-
-    #download-btn-container{margin: 0 auto; text-align: center;width: 100px;border-width:1px;border-color:#2c9748}
-    #download-btn {padding:0;}
-
-    #share-container{margin: 0 auto; text-align: center;width:fit-content; min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
-
-    #image_upload .touch-none{display: flex}
-    @keyframes spin {
-        from {
-            transform: rotate(0deg);
-        }
-        to {
-            transform: rotate(360deg);
-        }
-    }
-    #share-btn-container {
-        display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem;
-    }
-    #share-btn {
-        all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;
-    }
-    #share-btn * {
-        all: unset;
-    }
-    #share-btn-container div:nth-child(-n+2){
-        width: auto !important;
-        min-height: 0px !important;
-    }
-    #share-btn-container .wrap {
-        display: none !important;
-    }
-'''
-start_cleaner = """async() => {
-    function isMobile() {
-        try {
-            document.createEvent("TouchEvent"); return true;
-        } catch(e) {
-            return false; 
-        }
-    }
-    var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
-    if (!gradioEl) {
-        gradioEl = document.querySelector('body > gradio-app');
-    }
-    const group1 = gradioEl.querySelectorAll('#group_1')[0];
-    const group2 = gradioEl.querySelectorAll('#group_2')[0];    
-    const image_upload = gradioEl.querySelectorAll('#image_upload')[0];
-    const image_output = gradioEl.querySelectorAll('#image_output')[0];
-    const image_output_container = gradioEl.querySelectorAll('#image-output-container')[0];
-    const data_image = gradioEl.querySelectorAll('#image_upload [data-testid="image"]')[0];
-    const data_image_div = gradioEl.querySelectorAll('#image_upload [data-testid="image"] > div')[0];
-
-    image_output_container.setAttribute('style', 'width: 0px; height:0px; display:none;');
-    if (isMobile()) {
-        const group1_width = group1.offsetWidth;
-
-        image_upload.setAttribute('style', 'width:' + (group1_width - 13*2) + 'px; min-height:none;');
-        data_image.setAttribute('style', 'width: ' + (group1_width - 14*2) + 'px;min-height:none;');
-        data_image_div.setAttribute('style', 'width: ' + (group1_width - 14*2) + 'px;min-height:none;');
-        image_output.setAttribute('style', 'width: ' + (group1_width - 13*2) + 'px;min-height:none;'); 
-
-        const enhancer = gradioEl.querySelectorAll('#enhancer-checkbox')[0];  
-        enhancer.style.display = "none";
-
-    } else {
-        max_height = 800;
-        
-        const container = gradioEl.querySelectorAll('.container')[0];
-        container.setAttribute('style', 'max-width: 100%;');
-
-        data_image.setAttribute('style', 'height: ' + max_height + 'px');
-        data_image_div.setAttribute('style', 'min-height: ' + max_height + 'px');
-    }
-    if (!(gradioEl.parentNode)) {
-        const share_btn_container = gradioEl.querySelectorAll('#share-btn-container')[0];  
-        share_btn_container.setAttribute('style', 'width: 0px; height:0px;'); 
-        const share_btn_share_icon = gradioEl.querySelectorAll('#share-btn-share-icon')[0];  
-        share_btn_share_icon.setAttribute('style', 'width: 0px; height:0px;'); 
-    }
-    group1.style.display = "none";
-    group2.style.display = "block";
-    
-    window['gradioEl'] = gradioEl;
-    window['doCheckAction'] = 0;
-    window['checkAction'] = function checkAction() {
-        try {
-            if (window['doCheckAction'] == 0) {
-                var gallery_items = window['gradioEl'].querySelectorAll('#gallery .gallery-item');
-                if (gallery_items && gallery_items.length == 2) {
-                    window.clearInterval(window['checkAction_interval']);
-                    window['doCheckAction'] = 1;
-                    gallery_items[gallery_items.length-1].click();
-                }
-            }
-        } catch(e) {
-        }        
-    }
-    window['checkAction_interval'] = window.setInterval("window.checkAction()", 500);    
-}"""
-
-download_img = """async() => {
-    Date.prototype.Format = function (fmt) { 
-        var o = {
-            "M+": this.getMonth() + 1, 
-            "d+": this.getDate(), 
-            "h+": this.getHours(), 
-            "m+": this.getMinutes(),
-            "s+": this.getSeconds(),
-            "q+": Math.floor((this.getMonth() + 3) / 3), 
-            "S": this.getMilliseconds()
-        };
-        if (/(y+)/.test(fmt))
-            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
-        for (var k in o)
-            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
-                return fmt;
-    }   
-
-    var gradioEl = document.querySelector('body > gradio-app').shadowRoot;
-    if (!gradioEl) {
-        gradioEl = document.querySelector('body > gradio-app');
-    }  
-    const out_image = gradioEl.querySelectorAll('#image_output img')[0]; 
-    if (out_image) {
-        var x=new XMLHttpRequest();
-        x.open("GET", out_image.src, true);
-        x.responseType = 'blob';
-        x.onload = function(e){
-            var url = window.URL.createObjectURL(x.response)
-            var a = document.createElement('a');
-            a.href = url;
-            a.download = (new Date()).Format("yyyyMMdd_hhmmss");
-            a.click();
-        }
-        x.send();
-    }
-}"""
+    output, ori_image = model_process(image, mask, img_enhancer)
+    return output, [resize_image(ori_image, new_width=400), resize_image(output, new_width=400)], gr.update(visible=True)
 
 image_blocks = gr.Blocks(css=css, title='Image Cleaner')
 with image_blocks as demo:
-    with gr.Group(elem_id="group_1", visible=True) as group_1:
+    with gr.Group(elem_id="page_1", visible=True) as page_1:
         with gr.Box():
             with gr.Row(elem_id="gallery_row"):
                 with gr.Column(elem_id="gallery_col"):
@@ -378,12 +227,18 @@ with image_blocks as demo:
                         """
                     )
 
-    with gr.Group(elem_id="group_2", visible=False) as group_2:    
+    with gr.Group(elem_id="page_2", visible=False) as page_2:    
         with gr.Box(elem_id="work-container"):
             with gr.Row(elem_id="input-container"):
                 with gr.Column():
                     image_input = gr.Image(source='upload', elem_id="image_upload",tool='sketch', type=f'{image_type}', 
                                      label="Upload", show_label=False).style(mobile_collapse=False)
+            with gr.Row(elem_id="scroll_x_row"):
+                with gr.Column(id="scroll_x_col"):
+                    gr.HTML("""
+                        <div id="scroll_x_container" style="width:100%;height:25px;"></div>                    
+                    """
+                    )            
             with gr.Row(elem_id="op-container").style(mobile_collapse=False, equal_height=True):
                 with gr.Column(elem_id="erase-btn-container"):
                     erase_btn = gr.Button(value = "Erase(⏬)",elem_id="erase-btn").style(
@@ -410,10 +265,18 @@ with image_blocks as demo:
                         loading_icon = gr.HTML(loading_icon_html, elem_id="loading-icon", visible=True)
                         share_button = gr.Button("Share to community", elem_id="share-btn", visible=True)  
 
+            with gr.Row(elem_id="log_row"):
+                with gr.Column(id="log_col"):
+                    gr.HTML("""
+                        <div id="log_container" style="width:100%;height:auto;">
+                        </div>                    
+                    """
+                    ) 
+
             erase_btn.click(fn=predict, inputs=[image_input, img_enhancer], outputs=[image_out, gallery, download_container])
             download_button.click(None, [], [], _js=download_img)
             share_button.click(None, [], [], _js=share_js)
     
-        begin_button.click(fn=None, inputs=[], outputs=[group_1, group_2], _js=start_cleaner)
+        begin_button.click(fn=None, inputs=[], outputs=[page_1, page_2], _js=start_cleaner)
 
 image_blocks.launch(server_name='0.0.0.0')