Gradioをはじめよう

はじめに

今回はPythonライブラリである、Gradioについて紹介します。

まず結論から申し上げますと、機械学習、データサイエンス向けのWeb UIをめっっちゃ簡単に構築できるPythonライブラリです。

そしてGradioにはこんな特徴があります。

1. めっちゃ使いやすい
   • サーバーサイド言語であるPythonで簡単にかけて、コマンド一つで実行できるため、スピーディーにUIを構築することができます。
2. 多様な入出力形式をサポートしている
   • Gradioは、テキスト、画像、音声、ビデオ、ファイルアップロードの入出力の関数、コンポーネントを備えています。画像の表示、音楽、動画再生のコンポーネントが標準で使うことができます。そのため機械学習のモデルに簡単に多種多様なデータを入力することができます。
3. 公開が簡単
   • Hugging faceというサイトにてGradioで作ったアプリケーションを簡単にデプロイでき、公開することができます！またHuggin face spacesで公開された大量のアプリケーションを使うこともできます！

導入手順

続いては導入手順について説明します。

導入は簡単で、pythonの実行環境で

pip install gradio

を実行するだけです。

ただこれだけでも簡単ですが、もっと簡単な方法があります。

それはgradioのホームページから、gradio playgroundにアクセスすることでGradioの開発環境が用意できちゃいます。

このように、Gradioの右側にエディタ、左側に実行結果を確認するタブが表示されます。

また左側のDemosのタブからサンプルコードを参照することもできます。

デモンストレーション

ここからは実際にデモンストレーションを通して、

「どれくらい簡単にGUIが構築できるのか？」

という部分にフォーカスして、自分が作成したOCRアプリをもとに一部のコンポーネントを解説します！

そして今回作成したOCRアプリがこちらになります

左側のブロックで画像を入力し、submitボタンを押すと、右側にテキストが出力されます！

このようにGradioは外部のAPIと連携させることで、様々なアプリを作成することができます！

早速中身を紹介していきます！

ディレクトリ構造

ディレクトリ構造はこのようになっています。

OCRの部分は外部のAPIを利用するため別ファイルに関数を定義します。

project_dir/
├── ocr.py
└── main.py

【ocr.py】OCRのAPIと関数の用意

import requests


def ocr_space_api(image_path):
   # OCR.space APIキーを設定してください
   api_key = "APIキーを入力してください"
  
   # OCR.space APIのエンドポイントURL
   api_url = 'https://api.ocr.space/parse/image'
  
   # APIリクエストのペイロードを設定
   payload = {
       'isOverlayRequired': False,  # オーバーレイ情報が必要かどうか
       'apikey': api_key,           # APIキー
       'language': 'jpn',           # 使用する言語（日本語）
   }
  
   # 画像ファイルをバイナリモードで開く
   with open(image_path, 'rb') as image_file:
       # OCR.space APIにPOSTリクエストを送信
       response = requests.post(api_url, files={'file': image_file}, data=payload)
  
   # レスポンスをJSON形式で解析
   result = response.json()
  
   # 処理中にエラーが発生したか確認
   if result['IsErroredOnProcessing']:
       # エラーメッセージを返す
       return 'Error: ' + result['ErrorMessage'][0]
   else:
       # 解析されたテキストを返す
       return result['ParsedResults'][0]['ParsedText']

OCRの利用についてはOCR Space（https://ocr.space/）というサービスを利用しました。こちらの関数では入力画像のファイルパスが入力されると、OCRのAPIに画像がPOSTされ、最終的にテキストが出力される流れになっています。

こちらの関数については深く解説しません。

Gradioの実装

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


from ocr import ocr_space_api


def process_image(input_image):
   image = Image.fromarray(np.uint8(input_image['composite'])).convert('RGB')
   temp_image_path = "/tmp/handwritten_image.png"
   image.save(temp_image_path)
   return ocr_space_api(temp_image_path)


with gr.Blocks() as demo:
   gr.Markdown("## OCR App")
   with gr.Row():
       with gr.Column():
           image_editor = gr.ImageEditor(type="numpy",label="Upload or Draw Image", interactive=True)
       with gr.Column():
           text_output = gr.Textbox(label="OCR Output")
  
   submit_button = gr.Button("Submit")  # 送信ボタン
   submit_button.click(fn=process_image, inputs=image_editor, outputs=text_output)


demo.launch(server_name="0.0.0.0", auth=("admin", "password"))

こちらがGradio部分のコードです。
それぞれの部分について解説していきます。

ライブラリのインポート

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

Gradio：ユーザーインターフェースを簡単に作成するためのライブラリです。

PIL：画像の処理と変換に使用します。

NumPy：画像データを数値配列として扱います。

ocr_space_api：OCR機能を提供する関数。

OCRを実行するprocess_image関数

def process_image(input_image):     image = Image.fromarray(np.uint8(input_image[‘composite’])).convert(‘RGB’)     temp_image_path = “/tmp/handwritten_image.png”     image.save(temp_image_path)     return ocr_space_api(temp_image_path)

こちらのprocess_image関数は、ユーザーがアップロードまたは描画した画像を受け取り、それを見やすい形式に変換して一時的に保存します。そして、その画像をOCRサービスに送信して、画像内のテキストを取り出してくれる仕組みになっています。

Gradio部分

with gr.Blocks() as demo:     gr.Markdown(“## OCR App”)     with gr.Row():         with gr.Column():             image_editor = gr.ImageEditor(type=“numpy”, label=“Upload or Draw Image”, interactive=True)         with gr.Column():             text_output = gr.Textbox(label=“OCR Output”)         submit_button = gr.Button(“Submit”)  # 送信ボタン     submit_button.click(fn=process_image, inputs=image_editor, outputs=text_output)demo.launch(server_name=“0.0.0.0”)

ここからはGradioの解説に入ります。使用されているコンポーネントについてそれぞれ解説していきます。

• gr.Blocks: Gradioのレイアウトコンテナです。UIコンポーネントをブロック単位で配置できます。
• gr.Markdown: タイトル「OCR App」を表示します。
• gr.Rowとgr.Column: レイアウトを横に2つのカラムに分割します。
• 左カラム (gr.ImageEditor): ユーザーが画像をアップロードまたは描画できるエディターです。
• type=”numpy”: 画像データをNumPy配列として扱います。
• interactive=True: ユーザーがインタラクティブに画像を編集できます。
• 右カラム (gr.Textbox): OCRで抽出されたテキストを表示するテキストボックスです。
• gr.Button: 「Submit」ボタンです。
• submit_button.click(…): ボタンがクリックされたときにprocess_image関数を実行し、image_editorから入力を受け取り、text_outputに出力を表示します。
• demo.launch(…): Gradioアプリケーションを起動します。

アプリケーションの起動

ターミナルで以下のコマンドを実行します。

python3 app.py

ブラウザでhttp://localhost:7860にアクセスすると、OCRアプリケーションが表示されます。

まとめ

こんな感じでGradioを活用することでアプリケーションのモックの作成だったり、APIを試しに使ってみたり、簡単なアプリ制作が可能です！！

皆さんもぜひGradioを活用してアプリ開発をしてみてください！

それでは良いエンジニアライフを！！