Google Colab上でGUIを作ってみる

はじめに

今までGoogle Colabを使ってディープラーニングについていろいろと試してきました。
推論の結果などはテキスト形式でColab上に表示するだけでしたが、GUIで表示できた方が便利そうという安直な思い付きでその方法について調べてみました。その備忘録について記載します。

Gradioとは

WebアプリケーションのUIを簡単に作成することができるPythonのライブラリのようです。
以下の本家のサイトにもWebインタフェースを使って機械学習モデルをデモすることができるツールと記載があり、Google Colabとも相性がよさそうです。

早速使ってみる

使い方はかなり簡単で、本家にも記載されている通り、
gradio.Interface()でWebベースのGUIを作成（骨格を作成）し、
gradio.Interface.launch()でデモを実施するためにWebサーバを起動するとのことです。

またwith gradio.Blocks()でもカスタマイズしたWebベースのGUIを作成することができます。

import gradio as gr

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

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

ディープラーニングの推論で得られた上位3つの結果を表示したかったので、
出力用にテキストボックスを3つ用意しました（もっとよいやり方はありそうですが。。。）

import numpy as np

def mod_predict(inp):
    x = np.array(inp)
    x = np.expand_dims(np.array(x, dtype=np.float32) / 255., 0)
    pred = model.predict(x)
    argpred = np.argsort(pred[0])[::-1]
    strlist=[]
    for i in range(3):
        strlist.append(classes[argpred[i]]  + ": " + str(pred[0, argpred[i]]))
    return strlist[0], strlist[1], strlist[2]

降順に並べた推論結果の上位3つをリストにappendしています。

import gradio as gr

with gr.Blocks(css=".gradio-container {background-color: skyblue}") as demo:
    # UI
    input = gr.Image(type="pil")
    output = outputs=[gr.Textbox(label="No1:"), gr.Textbox(label="No2:"), gr.Textbox(label="No3:")]
    submit_btn = gr.Button("Submit")

    submit_btn.click(fn=mod_predict, inputs=input, outputs=output)

demo.launch(debug=True)

デフォルトのままだと少し味気ないので、skyblueの背景にしてみました。
demo.launchの引数のdebug=TrueはGUI実行時にエラーが発生したときにデバッグ用にログを出力するオプションです。

作成できた

gradioを実行すると以下のようなメッセージが表示されます。

Colab notebook detected. This cell will run indefinitely so that you can see errors and logs. To turn off, set debug=False in launch().
Running on public URL: https://XXXXXXXXXXXXXXXXXX

このリンクは72時間で有効期限が切れるとのことです。このURLにアクセスするとWeb UIが表示されます。

注意点

Google Colabではgradioはインストールされていないので、以下のコマンドで
インストールして使用してください。

!pip install gradio