月: 2024年6月

はじめに Google Cloud Vision APIは、Googleが提供する機械学習を活用した画像解析サービスです。 このAPIを使用することで、開発者は画像に含まれる情報を自動的に抽出し、様々な解析を行うことができます。 今回Reactを使ってGoogle Cloud Vision APIを使って簡単な画像認識アプリを作ってみました。 1. 環境構築 Node環境があることを前提にして行います。 templateはtypescriptを指定して、Google Cloud Vision APIをコールするためにaxiosをインストールしておきます。 npm startしてReactの初期画面が表示されれば成功です。 [crayon-67169c5c47666581624014/] 2. Cloud Vision APIの設定 Cloud Vision APIはGCPの管理画面の検索窓から「Cloud Vision API」を実行し、有効化されていない場合は「有効化」するを押します。 「このAPIを使用するには、認証情報が必要になる可能性があります」と表示された場合は、「認証情報」から「認証情報を作成」します。作成後、APIキーが表示されるのでコピーしておきます。 3. 環境変数の設定 作成したAPIキーを.envファイルを作成し、環境変数を設定します。 creare-react-appで作ったプロジェクトはprocess.env.REACT_APP_から始まる変数を読み込みができるようになっています。 ・.env [crayon-67169c5c47669225178696/] 4. Cloud Vision APIを呼び出す Cloud Vision APIのキーを設定できたら、実際にCloud Vision APIを呼び出して結果を表示するようにします。 流れとしては、画像をアップロードしたら、Cloud Vision APIを呼び出して、レスポンスを整形して画面に表示するといった感じです。 ・App.tsx [crayon-67169c5c4766a108457738/] 5. 画像認識アプリを動かす では実際に動かしてみます。適当に画像を用意して、実行してみます。 今回はたけのこの画像を用意して、アップロードして解析してみました。結果は以下の通りです。 食べ物や植物に対して高いスコアが出ています。他も材料や自然な食べ物、主食などわりと的確にラベリングできていると思います。 6. スタイルを整える 最後にスタイルを整えます。特にこだわりがないようであれば、そのままコピペして使用して大丈夫です。 [crayon-67169c5c4766b266910132/] CSSを書いたら、App.tsxに以下のimportを追加して完了です。 [crayon-67169c5c4766d178924226/] 今度はラーメンの画像で実行してみます。 ローカルの画面を見ると、良い感じのデザインになりました。あとは画像のプレビューやラベルの日本語化などしても良いかもしれません。 おわりに 今回はCloud Vision APIを利用して簡単な画像認識アプリを実装しました。 画像認識してラベリングした結果をDBに保存するなどするとより実用的なアプリになるかと思います。

【ハンズオン】ReactとGoogle Cloud Vision APIで画像認識アプリを作ろう【TypeScript】