gradio入門

はじめてのWEB UI作成

gradioをインストール

pip install gradio

シンプルなWEB UIを作成して起動

( 名前を入力して名前へのあいさつを出力するWEB UI )

import gradio as gr

# あいさつの関数
def greet(name):
    return "Hello " + name + "!"
    
# Interfaceの作成
demo = gr.Interface(
    fn=greet,
    inputs="text",
    outputs="text"
)

# 起動
demo.launch()

実行

Interface

interface は関数をUIでラップするためのクラス

主なパラメータは以下の通り

fn : ラップする関数
inputs : 入力コンポーネント ( “text” “image” “audio”など )
outputs : 出力コンポーネント ( “text” “image” “label”など )

コンポーネント

「inputs」と「outputs」には「コンポーネント」を指定することができる。

コンポーネントは、コンポーネント属性でカスタマイズできる。

以下では、inputs にコンポーネント「TextBox」を指定し、行数に2、プレースホルダーに ”Name Here…” を指定している。

import gradio as gr

# あいさつの関数
def greet(name):
    return "Hello " + name + "!"
    
# Interfaceの作成
demo = gr.Interface(
    fn=greet,
    inputs=gr.Textbox(
        lines=2, #行数
        placeholder="Name Here..." # プレースホルダ
    ),
    outputs="text",
)

# 起動
demo.launch()

実行

複数の入出力

「inputs」と「outputs」には複数のコンポーネントを指定することもできる。

これによって複数の入出力を持つ関数をラップすることができる。

以下では複数の入出力を行っている。

import gradio as gr

# あいさつの関数
def greet(name, is_morning, temperature):
    salutation = "Good morning" if is_morning else "Good evening"
    greeting = f"{salutation} {name}. It is {temperature} degrees today"
    celsius = (temperature - 32) * 5 / 9
    return greeting, round(celsius, 2)

# Interfaceの作成
demo = gr.Interface(
    fn=greet,
    inputs=["text", "checkbox", gr.Slider(0, 100)],
    outputs=["text", "number"]
)

# 起動
demo.launch()

** temperature = 温度

実行

画像の入出力

「gradio」は「Image」「DataFrame」「Video」「Label」など様々なコンポーネントをサポートしている。

以下では画像の入出力を行っている。

import numpy as np
import gradio as gr

# セピア化の関数
def sepia(input_img):
    sepia_filter = np.array([
        [0.393, 0.769, 0.189],
        [0.349, 0.686, 0.168],
        [0.272, 0.534, 0.131]
    ])
    sepia_img = input_img.dot(sepia_filter.T)
    sepia_img /= sepia_img.max()
    return sepia_img

# Interfaceの作成
demo = gr.Interface(
    fn=sepia,
    inputs=gr.Image(shape=(200, 200)),
    outputs="image"
)

# 起動
demo.launch()

import numpy as np
import gradio as gr
from PIL import Image

# セピア化の関数
def sepia(input_img):
    # 入力画像をリサイズ（200x200）する
    input_img = input_img.resize((200, 200))
    
    sepia_filter = np.array([
        [0.393, 0.769, 0.189], 
        [0.349, 0.686, 0.168], 
        [0.272, 0.534, 0.131]
    ])
    
    # 画像をNumPy配列に変換してフィルタを適用
    input_np = np.array(input_img)
    sepia_img = input_np.dot(sepia_filter.T)
    
    # ピクセル値を0〜255の範囲にスケーリング
    sepia_img = np.clip(sepia_img, 0, 255).astype(np.uint8)
    
    return Image.fromarray(sepia_img)

# Interfaceの作成
demo = gr.Interface(
    fn=sepia, 
    inputs=gr.Image(image_mode="RGB"),  # shapeではなくimage_modeを指定
    outputs="image"
)

# 起動
demo.launch()

実行

Blocks

gradioはアプリを構築するため、「Interface」の他に「Blocks」も提供する。

Interface : 関数をUIでラップするための高レベルクラス
Blocks : より柔軟なレイアウトとデータフローを実現するための低レベルクラス

以下では、「はじめてのWEB UIの作成」を「Blocks」で書き直す。

import gradio as gr

# あいさつの関数
def greet(name):
    return "Hello " + name + "!"

# Blocksの作成
with gr.Blocks() as demo:
    # UI
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")

    # イベントハンドラー
    greet_btn.click(fn=greet, inputs=name, outputs=output)

# 起動
demo.launch()

実行

複雑なBlocksの例

以下はより複雑な「Blocks」の例

import numpy as np
import gradio as gr

# テキストフリップの関数
def flip_text(x):
    return x[::-1]

# 画像フリップの関数
def flip_image(x):
    return np.fliplr(x)

# Blocksの作成
with gr.Blocks() as demo:
    # UI
    gr.Markdown("Flip text or image files using this demo.")
    with gr.Tabs():
        # Flip Textタブ
        with gr.TabItem("Flip Text"):
            text_input = gr.Textbox()
            text_output = gr.Textbox()
            text_button = gr.Button("Flip")

        # Flip Imageタブ
        with gr.TabItem("Flip Image"):
            with gr.Row():
                image_input = gr.Image()
                image_output = gr.Image()
            image_button = gr.Button("Flip")
        
    # イベントリスナー
    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

# 起動
demo.launch()

** flip = 反転

実行

参照元

gradio 入門 (1) - 事始め｜npaka