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