【Gradio】PythonでWebアプリケーションを簡単に実装する

Itoi Yoshihiko

横浜国立大学理工学部建築都市環境系学科卒
一級鉄筋技能士

Gradioは、Pythonで簡単にWebアプリケーションを実装するための素晴らしいフレームワークです。

このフレームワークを活用すれば、コードの知識が限られている方でも簡単にWebアプリケーションを迅速に構築することができます。

本記事では、Gradioを使ったWebアプリケーションの活用方法を紹介します。

Gradioとは？

詳しく見ていきましょう！

専門的なWeb開発スキルがなくても簡単にデモを作成できる

Gradioは、機械学習モデルのインターフェースを簡単に作成し、共有するためのPythonライブラリです。

機械学習開発者やデータサイエンティストが、自分のモデルを他の人々と簡単に共有し、フィードバックを受け取ることができるように設計されています。

Gradioを使用することで、専門的なWeb開発スキルがなくても、わずか数行のコードでインタラクティブなデモを作成することができます。

Gradio実装の基本的なコード

公式サイトの簡単なデモを実装してみます。

www.gradio.app

Gradio

https://www.gradio.app

Build & Share Delightful Machine Learning Apps

名前を打つと「hello　名前!!」と返してくれるデモです。

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()

import gradio as gr

def greet(name):

return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")

demo.launch()

コードの内容は非常に簡単なので、直感的にも理解できるのではないでしょうか。

ライブラリのインストール

最初に、Gradioライブラリをインストールします。

import gradio as gr

1	import gradio as gr

関数の定義

Gradioインターフェースによって使用される関数を定義します。

この関数は、ユーザーからの入力を受け取り、何らかの処理を行った後に結果を返します。

この関数は、機械学習モデルの予測、データの変換、画像の処理など、さまざまな用途に使用できます。

def greet(name):
    return "Hello " + name + "!"

1 2	def greet(name): return "Hello " + name + "!"

Interfaceメソッドでの入出力形式の指定

関数が定義されたら、gr.Interface メソッドを使用してインターフェースを作成します。

この際、inputs と outputs の引数を使って、インターフェースの入力と出力の形式を指定します。

これらの形式にはテキスト、画像、音声など、多様なオプションがあります。

demo = gr.Interface(fn=greet, inputs="text", outputs="text")

1	demo = gr.Interface(fn=greet, inputs="text", outputs="text")

launchでインターフェースの表示

最後に、launch メソッドを呼び出すことで、作成したインターフェースを表示します。

これにより、Webブラウザ上でインターフェースが起動し、結果を確認できます。

demo.launch()

1	demo.launch()

Gradioを使ってデモを作成する

こちらは、Gradioを使用した鉄筋カウントのデモです。

udemy講座『AI開発のナビゲーター物体検知AI編』で紹介した鉄筋カウントの内容をGradioで実装してみます。

Pythonのインストール

Pythonをインストールし、Pycharm上で実行していきます。

【PyCharm】pythonの仮想環境の構築について

必要なライブラリをrequirements.txtにまとめてインストール

requirements.txtに必要なライブラリを集めてインストールします。

gradio==4.10.0
torch==1.11.0
torchvision==0.12.0
segmentation-models-pytorch==0.2.0
albumentations==1.1.0
opencv-python==4.8.1.78
scikit-image
scikit-learn
scipy
Pillow
matplotlib
pandas

gradio==4.10.0

torch==1.11.0

torchvision==0.12.0

segmentation-models-pytorch==0.2.0

albumentations==1.1.0

opencv-python==4.8.1.78

scikit-image

scikit-learn

scipy

Pillow

matplotlib

pandas

Pycharmでmain.pyを実行する

main.pyを実行します。

内容は以下の通りです。

import random
import gradio as gr
from detect_tekkin_count import TekkinCount

def predict(inp):
    import cv2
    # import matplotlib.pyplot as plt
    import numpy as np

    models_conf = {
        "test1": ["resnet34", "Unet"],
    }
    # inp = Image.fromarray(inp.astype('uint8'), 'RGB')
    img = cv2.cvtColor(inp, cv2.COLOR_BGR2RGB)
    for key in models_conf:
        ENCODER, DECODER = models_conf[key]
        tekkin = TekkinCount(ENCODER, DECODER, ".")
        # img = cv2.imread("test.jpg")
        count, max_points = tekkin.count(img)
        mask = np.full(img.shape[:2], 255, dtype=img.dtype)
        for p in max_points:
            cv2.circle(mask, p, 15, color=0, thickness=-1)
        img[mask == 0] = [0, 0, 255]
    #     plt.figure(figsize=(25, 25), dpi=50)
    #     plt.imshow(img)
    # plt.show()
    result_image = cv2.cvtColor(np.array(img), cv2.COLOR_RGB2BGR)
    return result_image, count

demo = gr.Interface(fn=predict,
                    inputs=gr.Image(type="numpy", label="Upload an Image or Select a Sample"),
                    outputs=[
                        gr.Image(type="numpy", label="Image with point"),
                        gr.Textbox(label="Tekkin Count")
                    ],
                    examples=[
                        ["sample1.JPG"],
                        ["sample2.JPG"]
                    ],
                    title="鉄筋カウントサンプル",
                    allow_flagging='never'
                    )

demo.launch(share=True, inbrowser=True)

import random

import gradio as gr

from detect_tekkin_count import TekkinCount

def predict(inp):

import cv2

# import matplotlib.pyplot as plt

import numpy as np

models_conf = {

"test1": ["resnet34", "Unet"],

}

# inp = Image.fromarray(inp.astype('uint8'), 'RGB')

img = cv2.cvtColor(inp, cv2.COLOR_BGR2RGB)

for key in models_conf:

ENCODER, DECODER = models_conf[key]

tekkin = TekkinCount(ENCODER, DECODER, ".")

# img = cv2.imread("test.jpg")

count, max_points = tekkin.count(img)

mask = np.full(img.shape[:2], 255, dtype=img.dtype)

for p in max_points:

cv2.circle(mask, p, 15, color=0, thickness=-1)

img[mask == 0] = [0, 0, 255]

# plt.figure(figsize=(25, 25), dpi=50)

# plt.imshow(img)

# plt.show()

result_image = cv2.cvtColor(np.array(img), cv2.COLOR_RGB2BGR)

return result_image, count

demo = gr.Interface(fn=predict,

inputs=gr.Image(type="numpy", label="Upload an Image or Select a Sample"),

outputs=[

gr.Image(type="numpy", label="Image with point"),

gr.Textbox(label="Tekkin Count")

examples=[

["sample1.JPG"],

["sample2.JPG"]

title="鉄筋カウントサンプル",

allow_flagging='never'

)

demo.launch(share=True, inbrowser=True)

営業の際にGradioのデモを公開すれば具体的なイメージにつながる

営業活動においてGradioのデモを公開することは、お客様に具体的なイメージを提供する優れた方法となります。

Gradioを活用したデモは、製品やサービスの機能や利点をリアルタイムで視覚化し、理解しやすく伝えるための強力なツールです。

AIを開発したらGradioを使って商品販促をしてみてはいかがでしょうか？

まとめ

Gradioを使用することで、Pythonで簡単にWebアプリケーションを実装できます。

ぜひGradioを使用して自分のプロジェクトの販促に活用してみてください！

AIによる部資材（鉄筋）の個数カウントについて課題から開発手順まで解説！