【JavaScript】 JavaScriptでOCRやってみたい〜PART1〜【TensorFlow.js】

TensorFlow
目次

概要

TensorFlow.jsについて2本目の投稿です!

前回の議事はこちら

前回は、公式の公開している自然言語モデルを試してみました。

今回は、画像認識モデルを紹介します!

最終的には、OCRもできたらいいなと思ってます!

TensorFlow.jsとは、TensorFlowをJavaScriptで実行できるようにしたもの。
TensorFlowとは、Googleが開発した機械学習のオープンソースライブラリです。

成果物

テスト画像として、猫を読み込ませてみました。

「トラ猫」ですね! 概ね正解です。

結果は一番確率が高い結果を表示してます。

※デベロッパーツールで、全ての結果をみることができます。

neko

画像提供元: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では、テキストを読み取ってみようと思います。

楽しみにお待ちいただけると、幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
目次