chore(app): update to Gradio 5

.gitignore

@@ -1,5 +1,6 @@
 # folder
 .vscode
+/upscaled
 
 # file type
 *.svg

app.py

@@ -5,53 +5,11 @@ from run_cmd import run_cmd
 
 is_colab = util.is_google_colab()
 
-css = '''
-    .file-preview {
-        overflow: hidden !important;
-        margin: 5px 0 !important;
-        padding: 0 10px !important;
-    }
-
-    .file-preview div div:nth-child(2) {
-        flex-grow: 1 !important;
-    }
-
-    .file-preview div div:nth-child(3) {
-        text-align: right !important;
-        padding: 0.5rem 0;
-        width: auto;
-    }
-
-    #preview_file .h-full.min-h-\[15rem\].flex.justify-center.items-center {
-        min-height: initial !important;
-        padding: 10px 0;
-    }
-
-    #preview_file a {
-        border-radius: 0.5rem;
-        padding-top: 0.5rem;
-        padding-bottom: 0.5rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        font-size: 1rem;
-        line-height: 1.5rem;
-        font-weight: 600;
-        color: white;
-        background-color: gray;
-    }
-
-    .colab_img {
-        margin: 10px 0;
-        display: inline-block;
-        margin: 0 10px;
-    }
-'''
-
 title = "ESRGAN Upscaling With Custom Models"
 
-with gr.Blocks(title=title, css=css) as demo:
+with gr.Blocks(title=title, fill_height=True) as demo:
     gr.Markdown(
-    f"""
+        f"""
     # {title}
     This space uses old ESRGAN architecture to upscale images, using models made by the community.
 
@@ -62,25 +20,49 @@ with gr.Blocks(title=title, css=css) as demo:
 
     gr.HTML(value="<a href='https://ko-fi.com/Y8Y7GVAAF' target='_blank' style='display:block;margin-bottom:5px'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi1.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>")
 
-    with gr.Box():
-        with gr.Row():
-            with gr.Column():
-                input_image = gr.Image(type="pil", label="Input")
-                upscale_size = gr.Radio(["x4", "x2"], label="Upscale by:", value="x4")
-                upscale_type = gr.Radio(["Manga", "Anime", "Photo", "General"], label="Select the type of picture you want to upscale:", value="Manga")
-
-                with gr.Row():
-                    upscale_btn = gr.Button(value="Upscale", variant="primary")
-
-            with gr.Column():
-                output_image = gr.Image(type="filepath", interactive=False, label="Upscaled image", elem_id="preview_img")
-                
-                with gr.Row():
-                    out_file = gr.File(interactive=False, show_label=False, elem_id="preview_file")
+    with gr.Row():
+        with gr.Column():
+            input_image = gr.Image(
+                sources="upload",
+                type="filepath",
+                label="Image to upscale"
+            )
+
+            upscale_size = gr.Radio(
+                ["x4", "x2"],
+                label="Upscale by:",
+                value="x4"
+            )
+
+            upscale_type = gr.Radio(
+                ["Manga", "Anime", "Photo", "General"],
+                label="Select the type of picture you want to upscale:",
+                value="Manga"
+            )
+
+            with gr.Row():
+                upscale_btn = gr.Button(value="Upscale", variant="primary")
+
+        with gr.Column():
+            output_image = gr.Image(
+                type="pil",
+                interactive=False,
+                label="Upscaled image",
+                elem_id="preview_img"
+            )
+
+            with gr.Row():
+                out_file = gr.DownloadButton(
+                    visible=False,
+                )
 
     gr.HTML(value="<p><a href='https://upscale.wiki/wiki/Model_Database'>Model Database</a></p>")
-        
-    upscale_btn.click(process_image.inference, inputs=[input_image, upscale_size, upscale_type], outputs=[output_image, out_file])
+
+    upscale_btn.click(
+        process_image.inference,
+        inputs=[input_image, upscale_size, upscale_type],
+        outputs=[output_image, out_file]
+    )
 
 demo.queue()
-demo.launch(debug=is_colab, share=is_colab, inline=is_colab)
+demo.launch(debug=is_colab, share=is_colab, inline=is_colab)

process_image.py

@@ -2,19 +2,22 @@ import os
 import gradio as gr
 from run_cmd import run_cmd
 from PIL import Image
-import tempfile
 import uuid
 import numpy as np
 
-temp_path = tempfile.gettempdir()
+temp_path = "./upscaled"
+
 
 def inference(img, size, type):
-    if not img:
-        raise Exception("No image!")
+    if not os.path.exists(temp_path):
+        os.mkdir(temp_path)
+
+    image = Image.open(img)
+
+    OUTPUT_PATH = os.path.join(
+        temp_path, f"{str(uuid.uuid4())[0:12]}_{size}.png")
 
-    OUTPUT_PATH = os.path.join(temp_path, f"{str(uuid.uuid4())[0:12]}_{size}.png")
-    
-    img.save(OUTPUT_PATH)
+    image.save(OUTPUT_PATH)
 
     if type == "Manga":
         run_cmd(f"python inference_manga_v2.py {OUTPUT_PATH}")
@@ -24,8 +27,12 @@ def inference(img, size, type):
     img_out = Image.open(OUTPUT_PATH)
 
     if size == "x2":
-        img_out = img_out.resize((img_out.width // 2, img_out.height // 2), resample=Image.BICUBIC)
+        img_out = img_out.resize(
+            (img_out.width // 2, img_out.height // 2), resample=Image.BICUBIC)
 
     img_out = np.array(img_out)
 
-    return img_out, gr.File.update(value=OUTPUT_PATH)
+    return img_out, gr.DownloadButton(
+        value=OUTPUT_PATH,
+        visible=True,
+    )

requirements.txt

@@ -3,7 +3,7 @@ numpy
 opencv-python-headless
 setuptools
 Pillow
-gradio==3.48.0
+gradio==5.1.0
 torchvision
 addict
 future