# Gradioを使ってPythonで簡単に機械学習Webアプリを開発してみよう！ > 当サイト【スタビジ】の本記事では、Gradioの使い方を解説していきます！Gradioは機械学習モデルをデモするためのPythonライブラリ！誰でも機械学習モデルを使って予測や分類できるようなWebアプリを簡単に開発できます！ - URL: https://toukei-lab.com/gradio - 公開: 2024.03.18 / 更新: 2025.11.26 - サイト: スタビジ（https://toukei-lab.com） :::talk{who="umatan"} 当サイト【スタビジ】の本記事では、Gradioの使い方を解説していきます！Gradioは機械学習モデルをデモするためのPythonライブラリ！誰でも機械学習モデルを使って予測や分類できるようなWebアプリを簡単に開発できます！ ::: こんにちは！スタビジ編集部です！ 今回は「**[Gradio](https://www.gradio.app/)**」の使い方について解説していきます。 Gradioを使うことで機械学習のデモを行うようなWebアプリを簡単に開発できます。 データサイエンスに興味がある方は使い方をマスターしていきましょう！ ## Gradio（グラディオ）とは まずは「**[Gradio（グラディオ）](https://www.gradio.app/)**」について簡単に見ていきましょう。 Gradioとは機械学習モデルをデモするためのPythonライブラリです。 Gradioの特徴は以下になります。 :::box **・数行のコードでWeb画面を作成できる**\ **・様々なインターフェイスが用意されている**\ **・作成したWeb画面は自動生成されるリンクで簡単に共有できる**\ **・Python関数であれば任意でGradioで実行できる**\ **・”[Hugging Face](/hugging-face) Spaces”でアプリを公開することも可能** ::: Gradioの最大の特徴はPythonの数行のコードで使いやすいWeb画面を作成できるところです。 PythonのコードにGradioを組み込めるため、例えばデータを入力して機械学習モデルを実行したい場合のデータ入力画面として利用されます。 ただ、開発の柔軟性は低いため、複雑なWebアプリを開発したい場合は「[Django](/django)」や「[Flask](/python-flask)」を検討してみて下さい。 :::talk{who="umatan"} Gradioは機械学習モデルをWeb画面でデモするためのPythonライブラリ！ 分かりやすいWeb画面を簡単に作成できる！ ::: Django・Flaskについては以下の記事で解説しているので参考にしてみて下さい。 ## Gradioを試してみる 実際にGradioを試してみましょう。 まずはGradioをローカル環境にインストールします。 ```python pip install gradio ``` pipコマンドでインストールできます。 ### デモアプリを動かしてみる [公式ページ](https://www.gradio.app/guides/quickstart)にあるデモを動かしてみましょう。 app.pyというファイルに以下コードを書いて”python3 app.py”で実行してみます。 ```python import gradio as gr def greet(name, intensity): return "Hello, " + name + "!" * int(intensity) demo = gr.Interface( fn=greet, inputs=["text", "slider"], outputs=["text"], ) demo.launch() ``` 以下のような実行結果が表示されます。 :::box Running on local URL: http\://127.0.0.1\:7860 To create a public link, set \`share=True\` in \`launch()\`. ::: ブラウザを開いて”**http\://127.0.0.1\:7860**“もしくは”**http\://localhost\:7860**“と入力すると以下の画面が表示されます。 ![gradio](/wp-content/uploads/2024/03/gradio-min.jpg) “name”に自分の名前を入力し、”intensity”のスライドを動かしてみましょう。 “Submit”ボタンを押すと、“name”、”intensity”の入力情報を元に”greet関数”が実行されます。 ![gradio](/wp-content/uploads/2024/03/gradio2-min.jpg) “greet関数”の返り値が実行結果として”output”の欄に表示されました。 “Clear”ボタンを押すと実行前に画面がリセットされます。 また、”Flag”ボタンを押すと入出力データを保存することが出来ます。 これは、Gradioの”Flagging”という機能で、入出力データがCSVファイルとして実行環境に保存されます。 ![gradio](/wp-content/uploads/2024/03/gradio3-min.jpg) :::talk{who="umatan"} Gradioを利用すると、画面上で簡単にPythonの関数を試すことが出来る！ ::: ### デモ画面を確認してみる デモ画面の中身を確認してみましょう。 ```python def greet(name, intensity): return "Hello, " + name + "!" * int(intensity) ``` “greet関数”では”name”と”intensity”を引数にメッセージを返しています。 このように実行したいモデルをPython関数として定義します。 ```python demo = gr.Interface( fn=greet, inputs=["text", "slider"], outputs=["text"], ) ``` デモ画面の作成には、”**Interface**“クラスを利用しています。 “Interface”クラスでは以下の3つの引数を指定することで、それに応じたデモ画面が作成されます。 :::box **“fn”：実行する関数**\ **“inputs”：入力に使用するGradioコンポーネント**\ **“outputs”：出力に使用するGradioコンポーネント** ::: 実行する関数とその関数の引数と返り値を”Interface”クラスに指定するイメージです。 “fn”引数にはPython関数であれば機械学習モデル関数や画像処理関数といった高度ものまで、任意のものを指定することが可能です。 またGradioコンポーネントでは文字列や数値の他にも、画像データやデータフレームといったものまでサポートされています。 ```python demo.launch() ``` “gr.Interface.launch()”でデモを提供する単純なWebサーバーが起動され、ブラウザからデモ画面を確認できます。 :::talk{who="umatan"} gradioで様々な機能が準備されているので、デモ画面の作成自体は値を設定するだけで簡単に出来るね！ ::: ## GradioでWebアプリを実装してみる GradioでWebアプリを実装してみましょう。 今回は”顔検出アプリ”を実装してみます。 ```python import cv2 import numpy as np import gradio as gr def detect_faces(image): # 画像をグレースケールに変換 gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY) # OpenCVの顔検出器を初期化 face_cascade = cv2.CascadeClassifier('./data/haarcascade_frontalface_default.xml') # 顔の検出 faces = face_cascade.detectMultiScale(gray) # 検出された顔に矩形を描画 for (x,y,w,h) in faces: image = cv2.rectangle(image,(x,y),(x+w,y+h),(255,0,0),2) return image # レイアウト作成 with gr.Blocks() as iface: gr.Markdown( """ # 顔検出アプリ 顔を検出します！ """ ) with gr.Row(): image_input = gr.Image(label="アップロード画像") image_output = gr.Image(label="検出結果") image_button = gr.Button("顔検出") image_button.click(detect_faces, inputs=image_input, outputs=image_output) iface.launch() ``` 顔検出には”[OpenCV](/python_opencv)“というライブラリを利用して、受け取った画像から顔を検出し、枠を囲む処理を行っています。 OpenCVについては以下の記事で解説しているので、参考にしてみて下さい。 レイアウトの部分はdemoで使った”Interface”クラスではなく”**Blocks**“クラスを使用しています。 “Block”クラスでは、Gradioのコンポーネントを自由に選択・配置することが出来るため、Webアプリのレイアウトをカスタマイズできます。 pythonファイルを実行すると以下のように画像をアップロード出来る画面が表示されます。 ![gradio](/wp-content/uploads/2024/03/gradio4-min.jpg) 実際に画像をアップロードして”顔検出”ボタンを押してみましょう。 ![gradio](/wp-content/uploads/2024/03/gradio5-min2.jpg) アップロードされた画像から顔をピックアップすることが出来ました。 :::talk{who="umatan"} 画像を使ったWebアプリも簡単に試すことが出来るね！ ::: ### パブリック公開 gradioで作成したアプリを他の人に共有したいことがあると思います。 gradioで作成したアプリを公開したい場合は以下のように、 ```python demo.launch(share=True) ``` launchメソッドで”share=True”を設定すると共有リンクが生成されます。 ![gradio](/wp-content/uploads/2024/03/gradio6-min.jpg) 共有リンクは72時間まで利用可能で、リンクを知っている人であればだれでも、作成したアプリにアクセスできます。 実際にスマートフォンから共有リンクにアクセスしWebアプリを試すことも出来ました。 ![gradio](/wp-content/uploads/2024/03/gradio10-min.jpg) また共有リンク以外には、”[Hugging Face Spaces](https://huggingface.co/spaces)“に作ったアプリをデプロイすることで共有することも可能です。 その場合、”Hugging Face”のアカウントが必要になるので注意してください。 :::talk{who="umatan"} 作ったアプリをパラメータ一つで簡単に共有できるのすごい！ ::: ### 認証機能 簡単に共有リンクを生成できますが、アプリを開く人を制限したい場合、”**認証機能**“を使うことが出来ます。 Gradioでは以下の認証方法を設定できます。 :::box **・パスワードベースの認証**\ **・Hugging Faceアカウントを使ったOAuth認証**\ **・外部OAuthプロバイダー（Googleなど）を使った認証** ::: 今回は設定が簡単な”パスワードベースの認証”を試してみます。 ```python demo.launch(auth=("umatan", "toukei-lab")) ``` launchメソッドで”ユーザー名”と”パスワード”を設定することで、認証設定が出来ます。 実際のアプリを実行してみると、以下のように認証画面が表示されます。 ![gradio](/wp-content/uploads/2024/03/gradio11-min.jpg) “username”と”password”に設定した文字を入力して”Login”ボタンを押すとアプリに接続できます。 :::talk{who="umatan"} 認証設定も簡単に追加できる！ ::: ## Gradioで機械学習のデモをやってみる 機械学習モデルのデモをGradioでやってみます。 “[不動産取引価格情報](https://www.reinfolib.mlit.go.jp/realEstatePrices/)“で2023年第3四半期の新宿区のデータを使って取引価格を予測するアプリを作っていきます。 ```python import gradio as gr import numpy as np from sklearn.ensemble import RandomForestRegressor import pandas as pd # データ読み込み df = pd.read_csv('./data/data.csv', encoding='cp932') # 「種類」フィールドの値が「宅地(土地と建物)」のデータのみ使用 df = df[df['種類'] == "中古マンション等"] # 「取引価格（総額）」を万円単位に修正 df["取引価格（総額）"] = df["取引価格（総額）"]/10000 # 建築年の元号表記を築年数に変換 df['年号'] = df['建築年'].str[:2] df['和暦_年'] = df['建築年'].str[2:].str.replace('年','').astype(int) df.loc[df['年号']=='昭和','築年数'] = 2021 - (df['和暦_年'] + 1925) df.loc[df['年号']=='平成','築年数'] = 2021 - (df['和暦_年'] + 1988) df.loc[df['年号']=='令和','築年数'] = 2021 - (df['和暦_年'] + 2019) # 出力変数 y = df["取引価格（総額）"] # 学習に必要なカラムを抽出(最寄り駅までの時間、広さ、築年数) x = df.iloc[:,[8,12,32]] # ランダムフォレスト回帰モデルの初期化と学習 model = RandomForestRegressor() model.fit(x, y) # 不動産価格を予測する関数 def predict_price(time, space, age): values = np.array([time, space, age]).reshape(1, -1) # 入力をNumPy配列に変換して形状を整える prediction = model.predict(values) # 予測を行う return prediction[0] # レイアウト作成 with gr.Blocks() as iface: gr.Markdown( """ # 不動産予測アプリ 新宿区の不動産価格を予測します！ """ ) with gr.Row(): area_input = gr.Slider(0, 20, label="最寄り駅までの時間") rooms_input = gr.Slider(1, 100, label="広さ") rate_input = gr.Number(label="築年数") value_output = gr.Number(label="取引価格（万円）") area_input.change(predict_price, inputs=[area_input, rooms_input, rate_input], outputs=value_output) rooms_input.change(predict_price, inputs=[area_input, rooms_input, rate_input], outputs=value_output) rate_input.change(predict_price, inputs=[area_input, rooms_input, rate_input], outputs=value_output) value_output.change(predict_price, inputs=[area_input, rooms_input, rate_input], outputs=value_output) #インタラクティブに結果が反映される iface.load(predict_price, inputs=[area_input, rooms_input, rate_input], outputs=value_output) # インターフェースを起動 iface.launch() ``` 今回は”[ランダムフォレスト](/%e3%83%a9%e3%83%b3%e3%83%80%e3%83%a0%e3%83%95%e3%82%a9%e3%83%ac%e3%82%b9%e3%83%88)“でモデルを構築していきます。 ランダムフォレストについては以下の記事で詳しく解説しているので、参考にしてみて下さい。 実際にアプリを動かしてみます。 今回はレイアウトの部分でgradioの”**load**“機能を使っています。 “load”機能とinput・outputをchange機能で変更可能にすることで、入力情報を変えるたびに自動で関数が実行され、結果を出力してくれます。 ![gradio](/wp-content/uploads/2024/03/gradio13-min.jpg) “最寄り駅までの時間”、”広さ”、”築年数”の値を更新するたびに取引価格を予測してくれます。 :::talk{who="umatan"} 機械学習モデルを使ったアプリも簡単に構築できる！ いろんなモデルを試してみよう！ ::: ## Gradio まとめ ここまでご覧いただきありがとうございました！ 本記事では、”**Gradio**“の使い方を見ていきました。 Gradioの特徴をおさらいすると以下です。 :::box **・数行のコードでWeb画面を作成できる**\ **・様々なインターフェイスが用意されている**\ **・作成したWeb画面は自動生成されるリンクで簡単に共有できる**\ **・Python関数であれば任意でGradioで実行できる**\ **・”Hugging Face Spaces”でアプリを公開することも可能** ::: 今回見てきたように数行のコードでPython関数をWeb画面上で確認出来てとても便利です。 :::talk{who="umatan"} Gradioを使って、いろんなWebアプリを開発してみよう！ ::: 本記事を通してアプリ開発や機械学習をもっと勉強したいと思った方は、当メディアが運営する教育サービス[「スタアカ（スタビジアカデミー）」](https://toukei-lab.com/achademy/)の講座をチェックしてみてください。 :::box **AIデータサイエンス特化スクール「スタアカ」** ![スタアカ（スタビジアカデミー）のトップページ](/wp-content/uploads/2026/10/achademy-top.jpg) :::
【価格】 ライトプラン：1,280円/月（全コースが受講し放題）
プレミアムプラン：129,800円（通常149,800円・買い切り）
【オススメ度】
【サポート体制】
【受講形式】 オンライン形式
【学習範囲】 統計学・機械学習・ディープラーニングを網羅的に学ぶ
生成AI（LLM・RAG・プロンプトエンジニアリング）を学ぶ
SQLとPythonを組み合わせて実データを使った様々なワークを行う
実践的なビジネスフレームワークを学ぶ
マーケティングの実行プラン策定
データサイエンティストとしての自分の経験をふまえてエッセンスを詰め込んだのがこちらのスタビジアカデミー、略して「[スタアカ](https://toukei-lab.com/achademy/)」！！ 月額1,280円のライトプランで、統計学から機械学習・生成AIまで全コースが受講し放題です！ プレミアムプランでは、24時間以内の質問対応と現役データサイエンティストとの1on1（30分×4回）を実施します！ カリキュラム自体は、他のスクールと比較して圧倒的に良い自信があるのでぜひ受講してみてください！ 他のスクールのカリキュラムはPythonでの機械学習実装だけに焦点が当たっているものが多く、実務に即した内容になっていないものが多いです。 そんな課題感に対して、実務で使うことの多いSQLや機械学習のビジネス導入プロセスの理解なども合わせて学べるボリューム満点のコースになっています！ Pythonが初めての人でも学べるようなカリキュラムにしておりますので是非チェックしてみてください！ ウォルマートのデータを使って商品の予測分析をしたり、実務で使うことの多いGoogleプロダクトのBigQueryを使って投球分析をしたり、データサイエンティストに必要なビジネス・マーケティングの基礎を学んでマーケティングプランを作ってもらったりする盛りだくさんの内容になってます！ :::box **・BigQuery上でSQL、Google Colab上でPythonを使い野球の投球分析**\ **・世界最大手小売企業のウォルマートの実データを用いた需要予測**\ **・ビジネス・マーケティングの基礎を学んで実際の企業を題材にしたマーケティングプランの策定**\ **・生成AIのAPIを使ってチャットボットやAIエージェントを作る** ::: ::button[スタアカの受講はこちら]{href="https://toukei-lab.com/achademy/" note="＼今すぐ試す／"} その他のPythonのWebフレームワークについては以下の記事でまとめているのでチェックしてみて下さい。