update

app.py

@@ -1,19 +1,22 @@
-# === Included SDK === #
+# === Chosen SDK === #
 import gradio as gr
 
-# === Installed from requirements.txt === #
+# === requirements.txt === #
 from PIL import Image
 import numpy as np
 import torch
+import cv2
 
 # === Python built-in === #
+from io import BytesIO
+import base64
 import sys
 import os
 
-# ============================================================ #
-# Q: Why use gr.Blocks instead of gr.Interface? #
-# A: Only Blocks supports Layouts (and I'm more used to this) #
-# ============================================================ #
+# =========================================================== #
+# Q: Why use gr.Blocks instead of gr.Interface? #
+# A: Only Blocks supports Layouts (and I'm more used to this) #
+# =========================================================== #
 with gr.Blocks() as demo:
 
  # ======================================== #
@@ -22,10 +25,10 @@ with gr.Blocks() as demo:
  gr.Markdown("""<h1 align="center">Hello World</h1>""")
  gr.Markdown("""<p align="center">For <b>learning</b> purposes only...</p>""")
 
- # ====================================== #
- # function name is overrides by api_name #
- # ====================================== #
- def log() -> str:
+ # ======================================= #
+ # function name is overridden by api_name #
+ # ======================================= #
+ def whatever() -> str:
  info: list[str] = []
  info.append(f"OS: {os.name}")
  info.append(f"Python: {sys.version.split(' ', 1)[0]}")
@@ -33,16 +36,31 @@ with gr.Blocks() as demo:
 
  return "\n".join(info)
 
+ # ==================================================================== #
+ # parameter name is also shown as parameter name in API #
+ # Note: parameter type has to be manually handled when called from API #
+ # ==================================================================== #
  def proc_image(
- img: np.ndarray, target_w: int, target_h: int
+ image: np.ndarray | str, width: int, height: int
  ) -> list[str, Image.Image]:
 
- input_h, input_w, channels = img.shape
+ if isinstance(image, np.ndarray):
+ image = Image.fromarray(image)
+ elif isinstance(image, str):
+ image = Image.open(BytesIO(base64.b64decode(image)))
+ else:
+ raise ValueError("Unsupported Image Type")
 
- log = f"Resize a {input_w}x{input_h} image to {target_w}x{target_h}..."
+ if isinstance(width, float):
+ width = int(width)
+ if isinstance(height, float):
+ height = int(height)
 
- image = Image.fromarray(img)
- image = image.resize((target_w, target_h))
+ input_w, input_h = image.size
+
+ log = f"Resize a {input_w}x{input_h} image to {width}x{height}..."
+
+ image = image.convert("RGB").resize((width, height))
 
  return [log, image]
 
@@ -50,11 +68,10 @@ with gr.Blocks() as demo:
 
  with gr.Column():
 
- # ============================= #
- # Images take base64 str in API #
- # ============================= #
-
- input_image = gr.Image(
+ # ==================================== #
+ # variable name does not matter in API #
+ # ==================================== #
+ foo1 = gr.Image(
  value=None,
  image_mode="RGB",
  sources="upload",
@@ -68,8 +85,11 @@ with gr.Blocks() as demo:
  show_fullscreen_button=False,
  )
 
+ # =============================================== #
+ # Only value matters (shown as the Default value) #
+ # =============================================== #
  with gr.Row():
- target_w = gr.Slider(
+ foo2 = gr.Slider(
  minimum=1,
  maximum=1024,
  step=1,
@@ -79,7 +99,7 @@ with gr.Blocks() as demo:
  interactive=True,
  )
 
- target_h = gr.Slider(
+ foo3 = gr.Slider(
  minimum=1,
  maximum=1024,
  step=1,
@@ -89,7 +109,7 @@ with gr.Blocks() as demo:
  interactive=True,
  )
 
- output_image = gr.Image(
+ bar = gr.Image(
  value=None,
  image_mode="RGB",
  sources="upload",
@@ -103,15 +123,14 @@ with gr.Blocks() as demo:
  show_fullscreen_button=False,
  )
 
- btn1 = gr.Button("Resize")
+ yeet1 = gr.Button("Resize")
 
  with gr.Column():
 
- # ============================= #
- # Buttons do not show up in API #
- # ============================= #
-
- btn2 = gr.Button("Print Info")
+ # ============================== #
+ # Button does not show up in API #
+ # ============================== #
+ yeet2 = gr.Button("Print Info")
 
  # ==================================== #
  # label is shown in the returns in API #
@@ -128,19 +147,11 @@ with gr.Blocks() as demo:
 
  # =================================== #
  # api_name is used as endpoint in API #
+ # order is based on event defination #
  # =================================== #
 
- btn1.click(
- fn=proc_image,
- inputs=[input_image, target_w, target_h],
- outputs=[console_logs, output_image],
- show_progress="hidden",
- show_api=True,
- api_name="resizeImage",
- )
-
- btn2.click(
- fn=log,
+ yeet2.click(
+ fn=whatever,
  inputs=None,
  outputs=console_logs,
  show_progress="hidden",
@@ -148,5 +159,13 @@ with gr.Blocks() as demo:
  api_name="systemInfo",
  )
 
+ yeet1.click(
+ fn=proc_image,
+ inputs=[foo1, foo2, foo3],
+ outputs=[console_logs, bar],
+ show_progress="hidden",
+ show_api=True,
+ api_name="resizeImage",
+ )
 
 demo.launch()