Update app.py

app.py

@@ -1,25 +1,16 @@
 import gradio as gr
-import PIL
 from PIL import Image
 import numpy as np
-import os
+import os,sys
 import uuid
 import torch
-from torch import autocast
 import cv2
-from io import BytesIO
-
-from matplotlib import pyplot as plt
-from torchvision import transforms
 
 import io
-import logging
 import multiprocessing
 import random
 import time
 import imghdr
-from pathlib import Path
-from typing import Union
 from loguru import logger
 
 from lama_cleaner.model_manager import ModelManager
@@ -33,7 +24,6 @@ try:
 except:
     pass
 
-
 from lama_cleaner.helper import (
     load_img,
     numpy_to_bytes,
@@ -58,19 +48,13 @@ HF_TOKEN_SD = os.environ.get('HF_TOKEN_SD')
 device = "cuda" if torch.cuda.is_available() else "cpu"
 print(f'device = {device}')
 
-def get_image_ext(img_bytes):
-    w = imghdr.what("", img_bytes)
-    if w is None:
-        w = "jpeg"
-    return w
-    
-def read_content(file_path):
+def read_content(file_path: str) -> str:
     """read the content of target file
     """
-    with open(file_path, 'rb') as f:
+    with open(file_path, 'r', encoding='utf-8') as f:
         content = f.read()
     return content
-    
+
 def get_image_enhancer(scale = 2, device='cuda:0'):
     from basicsr.archs.rrdbnet_arch import RRDBNet
     from realesrgan import RealESRGANer
@@ -105,7 +89,9 @@ def get_image_enhancer(scale = 2, device='cuda:0'):
       )
     return img_enhancer
 
-image_enhancer = get_image_enhancer(scale = 1, device=device)
+image_enhancer = None
+if sys.platform == 'linux':
+    image_enhancer = get_image_enhancer(scale = 1, device=device)
         
 model = None
 
@@ -119,7 +105,7 @@ def model_process(image, mask, img_enhancer):
     original_shape = image.shape
     interpolation = cv2.INTER_CUBIC
     
-    size_limit = 1080 #1080 # "Original"
+    size_limit = 1080
     if size_limit == "Original":
         size_limit = max(image.shape)
     else:
@@ -193,10 +179,10 @@ def predict(input, img_enhancer):
         return None
     if image_type == 'filepath':
         # input: {'image': '/tmp/tmp8mn9xw93.png', 'mask': '/tmp/tmpn5ars4te.png'}
-        origin_image_bytes = read_content(input["image"])
+        origin_image_bytes = open(input["image"], 'rb').read()
         print(f'origin_image_bytes = ', type(origin_image_bytes), len(origin_image_bytes))    
         image, _ = load_img(origin_image_bytes) 
-        mask, _ = load_img(read_content(input["mask"]), gray=True)       
+        mask, _ = load_img(open(input["mask"], 'rb').read(), gray=True)       
     elif image_type == 'pil':
         # input: {'image': pil, 'mask': pil}
         image_pil = input['image']
@@ -206,22 +192,17 @@ def predict(input, img_enhancer):
     output = model_process(image, mask, img_enhancer)
     return output
 
+
 css = '''
 .container {max-width: 100%;margin: auto;padding-top: 1.5rem}
-.output-image, .input-image, .image-preview {height: 600px !important;object-fit: contain}
+#begin-btn {color: blue; font-size:20px;}
 #work-container {min-width: min(160px, 100%) !important;flex-grow: 0 !important}
-#image_upload{min-height:610px}
-#image_upload [data-testid="image"], #image_upload [data-testid="image"] > div{min-height: 620px}
 #image_output{margin: 0 auto; text-align: center;width:640px}
 #erase-container{margin: 0 auto; text-align: center;width:150px;border-width:5px;border-color:#2c9748}
 #enhancer-checkbox{width:520px}
 #enhancer-tip{width:450px}
 #enhancer-tip-div{text-align: left}
 #prompt-container{margin: 0 auto; text-align: center;width:fit-content;min-width: min(150px, 100%);flex-grow: 0; flex-wrap: nowrap;}
-.footer {margin-bottom: 45px;margin-top: 35px;text-align: center;border-bottom: 1px solid #e5e5e5}
-.footer>p {font-size: .8rem; display: inline-block; padding: 0 10px;transform: translateY(10px);background: white}
-.dark .footer {border-color: #303030}
-.dark .footer>p {background: #0b0f19}
 #image_upload .touch-none{display: flex}
 @keyframes spin {
     from {
@@ -232,15 +213,63 @@ css = '''
     }
 }
 '''
+set_page_elements = """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');
+    }
+    var group1 = gradioEl.querySelectorAll('#group_1')[0];
+    var group2 = gradioEl.querySelectorAll('#group_2')[0];    
+    var image_upload = gradioEl.querySelectorAll('#image_upload')[0];
+    var image_output = gradioEl.querySelectorAll('#image_output')[0];
+    var data_image = gradioEl.querySelectorAll('#image_upload [data-testid="image"]')[0];
+    var data_image_div = gradioEl.querySelectorAll('#image_upload [data-testid="image"] > div')[0];
+
+    if (isMobile()) {
+        var 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;'); 
+        var enhancer = gradioEl.querySelectorAll('#enhancer-checkbox')[0];  
+        enhancer.style.display = "none";
+    } else {
+        image_upload.setAttribute('style', 'min-height: 600px; overflow-x: overlay');
+        data_image.setAttribute('style', 'height: 600px');
+        data_image_div.setAttribute('style', 'min-height: 600px');
+        image_output.setAttribute('style', 'width: 600px'); 
+    }
+    group1.style.display = "none";
+    group2.style.display = "block";
+
+}"""
 
 image_blocks = gr.Blocks(css=css)
 with image_blocks as demo:
-    with gr.Group():
+    with gr.Group(elem_id="group_1", visible=True) as group_1:
+        with gr.Box():
+            with gr.Row():
+                with gr.Column():
+                    gallery = gr.Gallery(value=['./sample_00.jpg','./sample_00_e.jpg'], show_label=False)
+                    gallery.style(grid=[2], width=320)                                 
+            with gr.Row():
+                with gr.Column():
+                    begin_button = gr.Button("Let's GO!", elem_id="begin-btn", visible=True) 
+
+    with gr.Group(elem_id="group_2", visible=False) as group_2:    
         with gr.Box(elem_id="work-container"):
             with gr.Row(elem_id="input-container"):
                 with gr.Column():
                     image = gr.Image(source='upload', elem_id="image_upload",tool='sketch', type=f'{image_type}', 
-                                     label="Upload(载入图片)", show_label=True).style(mobile_collapse=False)
+                                     label="Upload(载入图片)", show_label=False).style(mobile_collapse=False)
             with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
                 with gr.Column(elem_id="erase-container"):
                     btn_erase = gr.Button(value = "Erase(擦除↓)",elem_id="erase_btn").style(
@@ -248,13 +277,15 @@ with image_blocks as demo:
                         rounded=(True, True, True, True),
                         full_width=True,
                     ).style(width=100)   
-                with gr.Column(elem_id="enhancer-checkbox"):
+                with gr.Column(elem_id="enhancer-checkbox", visible=True if image_enhancer is not None else False):
                     enhancer_label = 'Enhanced image(processing is very slow, please check only for blurred images)【增强图像(处理很慢，请仅针对模糊图像做勾选)】'
                     img_enhancer = gr.Checkbox(label=enhancer_label).style(width=150) 
             with gr.Row(elem_id="output-container"):             
                 with gr.Column():
-                    image_out = gr.Image(label="Result", elem_id="image_output", visible=True).style(width=640)
+                    image_out = gr.Image(elem_id="image_output",label="Result", show_label=False)
                     
             btn_erase.click(fn=predict, inputs=[image, img_enhancer], outputs=[image_out])
-            
+    
+        begin_button.click(fn=None, inputs=[], outputs=[group_1, group_2], _js=set_page_elements)
+
 image_blocks.launch()