1. 内容

Streamlitで作成したアプリ画面とTeachable Machineで作成したAIモデルとの連携について説明します。

2. 環境

使用環境は引き続きGoogle Colabratoryを使用。
詳細は1つ前の記事を参照。
https://note.com/pttr_yh/n/n35b513c0402e

3. アプリ開発

3-1. 画像の読み込み

st.file_uploaderを使用することで、
簡単に画面にファイルアップロードを作成することができます。

uploaded_file = st.file_uploader("判定したい画像をアップロードしてください。",type = ['png','jpg','jpeg'])

オプションとして、ラベルとアップロード対象ファイルの形式を指定しています。
詳しくはStreamlitの公式ページを参照ください。
https://docs.streamlit.io/library/api-reference/widgets/st.file_uploader

3-2. AIモデルへデータを渡す

Part1でTeachable Machineを使用し、nocode画像判定の学習モデルを作成しました。
「3-1. 画像の読み込み」で取り込んだ画像ファイルを作成した学習済みモデルを用いて画像判定します。
コードは以下です。

### 〜画像判定〜　###

#　学習済モデルの読み込み（load_modelを用いて学習済モデルを読み込む）
model = load_model('./model/keras_model.h5', compile=False)

# 学習済モデルのラベルの読み込み（readlinesを用いてラベルを文字列のリストとして読み込む）
class_names = open('./model/labels.txt', 'r').readlines()

# モデルの形状を多次元配列として定義
data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)

# 画像判定関数
def predict(uploaded_img):

  # 画像を分析できる形に変換するため、アップロードファイルを「RGB」に変換
  image = uploaded_img.convert('RGB')

  # 画像を224x224にリサイズする。
  size = (224, 224)
  image = ImageOps.fit(image, size)

  # 画像分析できるようにNumpy配列に変換(形状：224,224,3)
  image_array = np.asarray(image)

  # データのスケールを扱いやすく整えるために正規化（最小値0、最大値1)
  normalized_image_array = (image_array.astype(np.float32) / 127.5) - 1
  
  # 配列に格納
  data[0] = normalized_image_array

  # 画像を判定
  prediction = model.predict(data) #推論を実行する(分類結果の当てはまりをクラス毎に0〜1で出力)
  index = np.argmax(prediction) #結果のうち最大値のインデックスを取得
  class_name = class_names[index] #インデックスに対応するラベル(0 cat or 1 dog)を取得
  confidence_score = round((prediction[0][index]*100),2) #信頼度スコアを取得し、100倍し、小数２位まで表示
 
  # 判定結果を格納
  result_name = class_name[2:]  #ラベルから「cat or dog」を取得

  # 結果を返す

  return [result_name, str(confidence_score)]

3-3. 結果を表示する

AIモデルから帰ってきた結果（ここでは画像判定）を画面に表示します。

# 画像を判定
pred = predict(uploaded_img) 	

# 情報を表示（画像判定で取得した　名前と信頼度を表示する）
st.info(f"この画像は「{pred[0]}」です(信頼度：{pred[1]}%)。")

4.次回予告

ここまでAIアプリの説明をしてきました。
最後は「AIアプリって結局こういうことだった」と題して、まとめ記事を書く予定です。