概要
TensorFlow.jsについて2本目の投稿です!
前回の議事はこちら
前回は、公式の公開している自然言語モデルを試してみました。
今回は、画像認識モデルを紹介します!
最終的には、OCRもできたらいいなと思ってます!
TensorFlow.jsとは、TensorFlowをJavaScriptで実行できるようにしたもの。
TensorFlowとは、Googleが開発した機械学習のオープンソースライブラリです。
成果物
テスト画像として、猫を読み込ませてみました。
「トラ猫」ですね! 概ね正解です。
結果は一番確率が高い結果を表示してます。
※デベロッパーツールで、全ての結果をみることができます。
画像提供元:https://www.pakutaso.com/20240100016post-50299.html
コード
ディレクトリ構造は下記
「test.jpg」は自分の好きな画像で良いです。
.
|-- test.jpg
|-- index.html
|-- index.js
|-- node_modules
|-- package-lock.json
|-- package.json
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>OCRくん</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.1/dist/mobilenet.min.js"> </script>
<img id="img" src="../media/test.jpg"></img>
<script>
const img = document.getElementById('img');
mobilenet.load().then(model => {
model.classify(img).then(predictions => {
const result = window.document.getElementById('result');
console.log(predictions);
result.innerHTML = predictions[0].className;
});
});
</script>
<body>
</body>
</html>
index.js
const express = require("express");
const app = express();
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
app.get("/img", function (req, res) {
res.sendFile(__dirname + "/test.jpg");
});
app.listen(8000,function() {
console.log("Listening on localhost port 8000");
});
環境構築手順
本記事でも大まかな環境構築手順を紹介しますが、詳しい手順は別記事をご参照ください。
1.dockerをインストール
2.ubuntuイメージをダウンロード
docker pull ubuntu:20.04
3.コンテナ作成
docker run -it -d --name ubuntu -p 3000:8080 ubuntu:20.04
4.コンテナに入る
docker exec -it ubuntuX /bin/bash
5.アップデート
apt update ; apt upgrade
6.Node.js、npm、expressのインストール
apt install nodejs ; apt install npm ; npm install express
7.ファイルの配置とお決まりの呪文を唱える
index.js、index.html、test.jpgを配置する。
そして、呪文発動!!
npm init -y
7.Node.js起動
node index.js
8.ブラウザで開く
まとめ
今回は公開済みのすぐためせる、画像分析のAiを使ってみました。
GPU搭載サーバーを使わずとも、AIが使えるのです!!
「TensorFlow.js」の最大のメリットだと思います。
管理人的には、AIは小型化が進むのではないかなと読んでます😎
多くの人は、高性能のGPUを用意できない。。。
Part2では、テキストを読み取ってみようと思います。
楽しみにお待ちいただけると、幸いです。