見出し画像

TypeScript + webpack + TensorFlow.js を使って画像分類

npaka

TypeScript + webpack + TensorFlow.js を使って、ブラウザで画像分類を行う方法をまとめました。

1. 開発環境の準備

開発環境の準備手順は、次のとおり。

(1) Node.js と live-server のインストール。
「Node.js の使い方」参照。

(2) プロジェクトの作成。

$ mkdir classifier
$ cd classifier
$ npm init -y

(3) モジュールのインストール。

$ npm i -D webpack webpack-cli typescript ts-loader
$ npm i -S @tensorflow/tfjs @tensorflow-models/mobilenet

(4) プロジェクトの設定ファイル「package.json」の「scripts」を以下のように変更。

・package.json

"scripts": {
    "start": "live-server dist",
    "build": "webpack",
    "watch": "webpack -w"
 },

(5) TypeScriptの設定ファイル「tsconfig.json」をプロジェクトフォルダ直下に作成し、以下のように編集。
・tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "es2015"
  }
}

2. 画像分類

TensorFlow.jsでの画像分類の手順は次のとおり。

(1) プロジェクトフォルダ直下に src フォルダを生成し、srcフォルダ直下に index.ts を作成し、以下のように編集。

・index.ts

const tf=require('@tensorflow/tfjs')
const mobilenet=require('@tensorflow-models/mobilenet')

// 画像の取得
const img = document.getElementById('img')

// モデルの読み込み
mobilenet.load().then(model => {
  // 画像分類
  model.classify(img).then(predictions => {
    console.log('Predictions: ', predictions)
  })
})

(2) プロジェクトフォルダ直下に dist フォルダを生成し、distフォルダ直下に index.html と 画像ファイル cat.jpg を配置。

・index.html

<html>
  <head>
    <img id="img" src="cat.jpg"></img>
    <script type="text/javascript" src="main.js"></script>
  </head>
</html>

・cat.jpg

画像1

(3) ビルドと実行。

$ npm run build
$ npm run start



この記事が気に入ったらサポートをしてみませんか？