app.py

# === Chosen SDK === #
import gradio as gr

# === 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) #
# =========================================================== #
with gr.Blocks() as demo:

 # ======================================== #
 # Markdown is pointless in API usage... XD #
 # ======================================== #
 gr.Markdown("""<h1 align="center">Hello World</h1>""")
 gr.Markdown("""<p align="center">For <b>learning</b> purposes only...</p>""")

 # ======================================= #
 # 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]}")
 info.append(f"CUDA: {torch.cuda.is_available()}")

 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(
 image: np.ndarray | str, width: int, height: int
 ) -> list[str, Image.Image]:

 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")

 if isinstance(width, float):
 width = int(width)
 if isinstance(height, float):
 height = int(height)

 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]

 with gr.Row():

 with gr.Column():

 # ==================================== #
 # variable name does not matter in API #
 # ==================================== #
 foo1 = gr.Image(
 value=None,
 image_mode="RGB",
 sources="upload",
 type="numpy",
 label="Input",
 show_label=True,
 show_download_button=False,
 visible=True,
 interactive=True,
 show_share_button=False,
 show_fullscreen_button=False,
 )

 # =============================================== #
 # Only value matters (shown as the Default value) #
 # =============================================== #
 with gr.Row():
 foo2 = gr.Slider(
 minimum=1,
 maximum=1024,
 step=1,
 value=512,
 label="width",
 show_label=True,
 interactive=True,
 )

 foo3 = gr.Slider(
 minimum=1,
 maximum=1024,
 step=1,
 value=512,
 label="width",
 show_label=True,
 interactive=True,
 )

 bar = gr.Image(
 value=None,
 image_mode="RGB",
 sources="upload",
 type="pil",
 label="Output",
 show_label=True,
 show_download_button=False,
 visible=True,
 interactive=False,
 show_share_button=False,
 show_fullscreen_button=False,
 )

 yeet1 = gr.Button("Resize")

 with gr.Column():

 # ============================== #
 # Button does not show up in API #
 # ============================== #
 yeet2 = gr.Button("Print Info")

 # ==================================== #
 # label is shown in the returns in API #
 # ==================================== #

 console_logs = gr.Text(
 value="...",
 label="Logs",
 show_label=True,
 lines=1,
 max_lines=8,
 interactive=False,
 )

 # =================================== #
 # api_name is used as endpoint in API #
 # order is based on event defination #
 # =================================== #

 yeet2.click(
 fn=whatever,
 inputs=None,
 outputs=console_logs,
 show_progress="hidden",
 show_api=True,
 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()