Gradioでスライダーが作れるSliderの使い方

某

どーも！某 (@7254bou)です！

Gradioを使うとGoogle Colabで作成したAIモデルを簡単にWebアプリとして公開できて便利です。Gradioについて知らない方は下記記事をご覧ください。

2023-01-21Google Colab上でwebアプリが作れるGradioの使い方

今回はそんなGradioでスライダーを作る方法についてご紹介します。

スライダーとは

スライダーとは、数値をスライドさせることで変更できるUIです。Gradioでは、入出力にスライダーを指定するだけでスライダーを作成することができます。

スライダーの作り方

スライダーを作るにはシンプルな方法（ショートカットを指定）とパラメータを調整する方法（クラスを使用）の2種類があります。

最もシンプルなスライダー

まずはシンプルな方法でスライダーを使った簡単なwebアプリを作成しましょう。今回作るのは、スライダーで値を指定した後に「送信」を押すと、2乗して返すwebアプリです。

上記のwebアプリを実装するには下記のようにコードを書きます。

import gradio as gr
# 関数を定義
def square(x): return x ** 2
# Webアプリを作成
app = gr.Interface( fn=square, inputs="slider", outputs="number",
)
# Webアプリを起動
app.launch()

スライダーを作成すると、綺麗にスライダーが表示されます。スライダーのつまみをスライドさせると、数値を変えることができます。

上記のコードでは、何も指定していないスライダーなので、次はパラメータを指定してみます。

パラメータを指定したスライダー

パラメータを指定する場合は、”slider”ではなくgr.Slider()を使用します。この引数（パラメータ）を指定することで、スライダーの機能を調整することができます。

今回は最大値、初期値、ラベルを指定した下記のようなスライダーにします。

少し分かりにくいかもしれませんが、最大値が10に設定されているので、スライダーの値は5ですがバーが半分まできていると思います。また、左上のxとなっていた部分のラベルを「2乗する数」に指定しています。

実際に上記のアプリを実装したのが下記のコードです。

import gradio as gr
# 関数を定義
def square(x): return x ** 2
# Webアプリを作成
app = gr.Interface( fn=square, inputs=gr.Slider( minimum=0, maximum=10, value=5, step=1, label="2乗する数", interactive=True, ), outputs="number",
)
# Webアプリを起動
app.launch()

パラメータの説明

各パラメータについて簡単に解説します。

参考

• Gradio
• Gradio Docs