---

---

【Next.js+Tensorflow+TypeScript】機械学習Webアプリの作成｜Part２

投稿日：2021年7月3日

この記事ではKerasに用意された訓練済のモデルEfficientNetをTensorflow.js用に出力し、それをNext.js + TypeScriptのアプリケーション上で読み込んで分類をする方法について詳しく解説しています。

---

はじめに

この記事について

環境について

参考

---

実践

Kerasの環境を構築

version: "3"

services: 
    keras_app:
        image: tensorflow/tensorflow:2.4.2-jupyter
        volumes:
            - ./keras_app/notebooks:/tf/notebooks
        ports:
            - 8888:8888

$ sudo docker-compose up -d

import numpy as np
import tensorflow as tf
from tensorflow import keras

訓練済NNモデルの出力

from tensorflow.keras.applications import EfficientNetB0

# モデルをインスタンス化
model = EfficientNetB0(weights = "imagenet")

model.summary()

Model: "efficientnetb0"
__________________________________________________________________________________________________
Layer (type)                    Output Shape         Param #     Connected to                     
==================================================================================================
input_5 (InputLayer)            [(None, 224, 224, 3) 0                                            
__________________________________________________________________________________________________
rescaling_3 (Rescaling)         (None, 224, 224, 3)  0           input_5[0][0]                    
__________________________________________________________________________________________________
normalization_3 (Normalization) (None, 224, 224, 3)  7           rescaling_3[0][0]                

[...]

top_dropout (Dropout)           (None, 1280)         0           avg_pool[0][0]                   
__________________________________________________________________________________________________
predictions (Dense)             (None, 1000)         1281000     top_dropout[0][0]                
==================================================================================================
Total params: 5,330,571
Trainable params: 5,288,548
Non-trainable params: 42,023

!pip install tensorflowjs

# pythonコードでjsモデルを出力
import tensorflowjs as tfjs

# tfjs_modelsディレクトリにモデルデータを出力
tfjs.converters.save_keras_model(model, "tfjs_models")

./keras_app/notebooks
└── tfjs_models
    ├── group1-shard10of25.bin
    ├── group1-shard11of25.bin
    ︙
    ├── group1-shard9of25.bin
    └── model.json

Next.jsアプリケーションの作成

$ mkdir next_app
$ cd next_app
$ npm init
$ npx create-next-app --typescript app

モデルファイルの配信設定

$ cp -r -f ./keras_app/notebooks/tfjs_models ./next_app/app/public

$ npm run dev

$ cd app
$ npm install --save @tensorflow/tfjs

import * as tf from '@tensorflow/tfjs';
import { useState, useEffect, useRef} from "react";

export default function Home() {

  // Modelをstateで定義
  const [model, setModel] = useState<tf.LayersModel|null>(null);
  
  // TODO:デバッグ情報は公開時には消去
  // modelが読み込めたらコンソールに情報を出力
  useEffect(()=>{
    console.log(model);
  },[model]);

  // モデルは一度だけ読み込む
  useEffect(()=>{

    // モデルを静的サーバーから読み込む
    tf.loadLayersModel('/tfjs_models/model.json').then(model => {
      
      // stateにセット
      setModel(model);
    });
  },[]);

  return (
    <div>
      {model==null ? "読み込み中です…" : "準備完了しました…"}
    </div>
  )
}

カメラを入力に推論を実行

import * as tf from '@tensorflow/tfjs';
import { useState, useEffect, useRef } from "react";

export default function Home() {

  // [ ref ] ビデオを参照するRef
  const videoRef = useRef<HTMLVideoElement>(null);

  // [ state ] 訓練済NNモデル
  const [model, setModel] = useState<tf.LayersModel|null>();

  // [ state ] 推論の結果
  const [predictionResult, setPredictionResult] = useState<number>(0);

  // モデルは初回一度だけ読み込む
  useEffect(()=>{
    // モデルを静的サーバーから読み込む
    tf.loadLayersModel('/tfjs_models/model.json').then(model => {
      
      // stateにセット
      setModel(model);
    });
  },[]);

  /**
   * ビデオの読み込み、モデルの読み込みが完了したら推論スタート
   */
  useEffect(()=>{
    if(videoRef.current == null || model == null){
      return;
    }
    
    // <video>の参照を取得
    let video = videoRef.current;

    // <video>にカメラのストリームを入力
    getVideo(video).then(video => {

      //<video>への入力が完了したら推論
      video.onloadeddata = () => {

        // 初回に１回だけ推論
        execEstimate(video, model);

        // 推論を１秒ごとにスケーリング
        setInterval(() => {
          execEstimate(video, model);
        },1000);
      }
    });
    
  },[model, videoRef]);

  /**
   * カメラの入力をvideoに流し込む
   * 今回のNNモデルの入力は224 * 224 * 3なのでそれに合わせる
   */
  const getVideo = (video: HTMLVideoElement):Promise<HTMLVideoElement> => {
    console.log("getVideo");
    return navigator.mediaDevices
      .getUserMedia({ video: { width: 224, height: 224 } })
      .then(stream => {
        video.srcObject = stream;
        video.play();
        return video;
      })
  };

  /**
   * 推論の実行
   * @returns 
   */
  const execEstimate = (video:HTMLVideoElement, model:tf.LayersModel): void => {
    // <video>に出力されている画像をTensorとして取得
    let input = tf.browser.fromPixels(video);

    // Batch=1（１枚の画像のみ）の入力を生成
    let inputReshaped = input.reshape([1,224,224,3]);

    // モデルで推論
    let prediction = model.predict(inputReshaped) as tf.Tensor<tf.Rank>;

    // 出力は0~1の値なので、0~100の値に変更
    let predictionHundredFold = prediction.dataSync<"float32">().map((value, index, array) => {
      return value * 100;
    });
    let predictionArgMax = tf.argMax(predictionHundredFold).dataSync<"int32">();
    setPredictionResult(predictionArgMax[0]);
  }

  return (
    <div>
      <video ref={videoRef}></video>
      {model==null ? "読み込み中です…" : `推測ラベル：${predictionResult}`}
    </div>
  )
}

---

---

---