Python・AI Webアプリ開発スキルを、もっと学びたい方へ

Gradioとは

Gradio（グラディオ）とは、機械学習モデルのデモを行うWebアプリケーションを簡単に作ることができるPythonのライブラリーです。Gradioで作成したWebアプリケーションは、HuggingFaceのSpacesでアプリを公開することができます。
（現時点では、Gradio以外にも、Streamlitをサポートしています。）

Gradioの公式ページより、デモアプリケーションを確認できますので、一度確認してみてください。

このサイトは、Pythonや生成AIなどを学べるオンラインプログラミングスクール AI Academy Bootcampが運営しています。

Gradioをインストールする

Gradioをインストールは以下のコマンドをpipコマンドでインストールするだけです。
Macですとターミナル、Windowsですとコマンドプロンプトを起動し、次のコマンドを入力し実行(Enter)してください）

pip install gradio

Gradioの使い方

基本的な使い方は、Gradioを読み込み、Interface()に関数と入力形式（画像、テキスト等）、出力形式の3つを渡しlaunch()を実行するという記述を行うだけです。
説明だけですとわかりにくいため、アプリケーションを作りながら確認していきましょう。

✨生成AIコース受講お申込み受付中！

生成AIの概要やChatGPTの基礎操作、プロンプトエンジニアリングの基礎から実践まで学べます。演習課題を通じて、ご自身の業務に適したプロンプトやツールを作成し、生成AIを業務に活用できるスキルが身につきます。

受講特典：受講期間中、59種類の充実したAI Academyのオリジナルテキストを使いながら学んでいただけます。例）「機械学習に必要な数学編」「機械学習アルゴリズムの理論と実装編」「自然言語処理編」「プロンプトエンジニアリング入門編」など

おみくじアプリケーションを作ろう

まずはGradioを使って今日の運勢が表示されるおみくじWebアプリケーションを作ります。
実行環境はGradioがインストールされたGoogle Colabを利用します。
以下がコード全体です。

import random
import gradio as gr

def get_foturne(your_name):
    fortune_lists = ['大吉', '吉', '小吉', '凶', '末吉']
    fortune_result = random.choice(fortune_lists)
    return your_name + "さんの今日の運勢は・・・" + fortune_result + "です"


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

アプリケーションを実行すると、URLが発行されますが、Colab内にアプリケーションが表示されますので、
そこから動作の確認ができます。
名前を入力すると、運勢が表示されます。

✨LINE友だち限定：「動画プラン」受講お申込み受付中！

2025年、未来への投資をしませんか？ AI Academy Bootcamp LINE公式 では、AIリテラシーからPython、データ分析、Web開発まで学べる「動画プラン」をご用意！さらにお得な割引クーポンもプレゼントしています！

単独で学ぶより、全コースを一気に学ぶことで得られる「学習シナジー効果」が特長。
基礎から応用まで、データ分析とAI開発のスキルを効率よく身につけられます。

「動画プラン」のおすすめポイントを以下の動画で紹介しています！

動画プランを受講された方のリアルなレビューです。受講をご検討中の方、ぜひチェックしてみてください！

花の種類を判定するWebアプリケーションを作ろう

先ほどは、Gradioを使っておみくじアプリケーションを作りましたが、次は機械学習を用いた花の種類を判定するアプリケーションを作ります。
今回はscikit-learnでニューラルネットワークを用いて花を判定するモデルを作成し、学習済みモデルをGradio内から読み込み動作させます。

from sklearn.datasets import load_iris
from sklearn.model_selection import train_test_split
from sklearn.neural_network import MLPClassifier
import joblib
from sklearn.metrics import classification_report, accuracy_score

# データ取得
iris = load_iris()
x, y = iris.data, iris.target

# 訓練データとテストデータに分割
x_train, x_test, y_train, y_test = train_test_split(x, y, test_size=0.5, random_state=0)

# solverには確率的勾配降下法(sgd)やadamなどが利用可能です。
model = MLPClassifier(solver="sgd", random_state=0, max_iter=3000)

# 学習
model.fit(x_train, y_train)
pred = model.predict(x_test)

# 学習済みモデルの保存
joblib.dump(model, "nn.pkl", compress=True)


# 精度と近藤行列の出力
print("result: ", model.score(x_test, y_test))
print(classification_report(y_test, pred))

上記のプログラムを実行すると、花の判別する学習済みモデル（nn.pkl）が作成されます。
これをGradio内で呼び出し、花の判定を行います。

from flask import Flask, render_template, request, flash
from wtforms import Form, FloatField, SubmitField, validators, ValidationError
import numpy as np
import gradio as gr
import joblib

# 学習済みモデルを読み込み利用します
def predict(parameters):
    # ニューラルネットワークのモデルを読み込み
    model = joblib.load('./nn.pkl')
    params = parameters.reshape(1, -1)
    pred = model.predict(params)
    return pred

# ラベルからIrisの名前を取得します
def getName(label):
    print(label)
    if label == 0:
        return "Iris Setosa"
    elif label == 1: 
        return "Iris Versicolor"
    elif label == 2: 
        return "Iris Virginica"
    else: 
        return "Error"

def recognition_flower(sepal_length, sepal_width, petal_length, petal_width):
    x = np.array([int(sepal_length), int(sepal_width), int(petal_length), int(petal_width)])
    pred = predict(x)
    irisName = getName(pred)
    return irisName


demo = gr.Interface(fn=recognition_flower,
                    inputs=[gr.Textbox(label="SepalLength"),
                            gr.Textbox(label="SepalWidth"),
                            gr.Textbox(label="PetalLength"),
                            gr.Textbox(label="PetalWidth")
                    ],
                    outputs="text")
demo.launch()

それぞれ4つの入力フォームに萼（がく）の長さや、花びらの長さなどを数値を入れてボタンを押すことで、花の種類が表示されます。

まとめ

短期間で、AIアプリケーションのプロトタイプを作りたい方にはGradioはオススメです。是非オリジナルのAIアプリケーションを作ってみてください。

AI AcademyのWebアプリケーション開発編では、今回学んだGradioの主要なコンポーネントの説明や、アプリの公開方法、さらには、FlaskやFastAPIなどについても解説しています。それらの内容についても学びたい方はAI Academy Bootcampの受講も検討いただけますと幸いです。

🎁ちょっとひと息 ! 業務や学習に役立つライブラリーをプレゼント !

オンラインプログラミングスクールのAI Academy Bootcamp LINE公式のライブラリーでは無料動画、講座、最新技術資料など、学習や業務に役立つ秀逸な教材や実践的なリソースを豊富に取り揃えています！毎週新しいコンテンツも更新中です。LINE友だち登録でプレゼントします。ぜひご活用ください！

LINE Libraryで人気 No.1の資料です。

【業務で役立つプロンプト15選！コピぺしてすぐに活用可！プロンプトを自動生成するGPTsも紹介】　「Gradioを使って、テキスト入力と画像出力のインターフェースを作るコードを生成」「Hugging FaceのモデルをGradioで動かすデモを作成するPythonコードの生成」「Gradioのレイアウトをカスタマイズする方法を教えて」などのプロンプトの自動作成も可能です！