Cloud Vision APIをReactで呼び出す

どうもTABEです。

ReactからCloudVisionAPI呼び出す方法を調査しなくてはいけなかった為
それを備忘録として残します。

まずは

Reactプロジェクトのセットアップ

以下のコマンドをサンプルのReactプロジェクトを作成したい場所で実行

npx create-react-app my-vision-app
cd my-vision-app

次にgoogle cloudのセットアップ

コード自体は簡単なのですが、ここで結構詰まりました。。。
私は以下を参考にして、設定しました。
https://dev.classmethod.jp/articles/google-cloud_vision-api/

サンプルコード

App.jsの中身を以下に書き換えます。

react.js

import './App.css';
import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [image, setImage] = useState('');
  const [result, setResult] = useState(null);

  const handleChange = (e) => {
    setImage(e.target.value);
  };

  const handleSubmit = async () => {
    const API_KEY = process.env.REACT_APP_YOUR_GOOGLE_CLOUD_VISION_API_KEY;
    console.log(process.env);
    const url = `https://vision.googleapis.com/v1/images:annotate?key=${API_KEY}`;

    const request = {
      requests: [
        {
          image: {
            source: {
              imageUri: image,
            },
          },
          features: [
            {
              type: 'LABEL_DETECTION',
              "maxResults":1
            },
            {
              type: 'TEXT_DETECTION',
              maxResults: 10
            },  
          ],
        },
      ],
    };

    try {
      const response = await axios.post(url, request);
      setResult(response.data);
    } catch (error) {
      console.error('Error calling the Vision API', error);
      setResult(null);
    }
  };
  return (
    <div>
      <h1>Google Cloud Vision API with React</h1>
      <input type="text" value={image} onChange={handleChange} placeholder="Image URL" />
      <button onClick={handleSubmit}>Analyze Image</button>
      {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
    </div>
  );
}
export default App;

.envファイルにAPIキーを設定することを忘れずに！

.env

REACT_APP_YOUR_GOOGLE_CLOUD_VISION_API_KEY=xxxxxxx

xxxxxにGoogle Cloudで取得したAPIキーを入力してください。

動作確認

ネットのどこかから取得した、画像のURLを貼り付けて（URLが.jpegや.pdfの様なファイルを参照しているものにしてください。）Analyze Imageボタンを押して

以下の様にJson形式でレスポンスが表示できれば成功です！

サンプルで使ったものが、無料の素材でなかった為、テキストの部分は抜けていますが
画像のテキストもちゃんと取得できていました！

Google Cloudの設定でいくつかのエラー

①Cloud Vision API has not been used in project xxxxx before or it is disabled. Enable it by visiting

プロジェクトで「Cloud Vision API」が有効化されていなかった。
「Vision AI API」という方を選択していました。。。。ボンミスです。

②This API method requires billing to be enabled. Please enable billing on project xxxx by visiting

請求の設定をしていなくエラーになりました。
請求の設定を忘れずに！！

上記のエラーを出すには、レスポンスにエラーが入ってきた時に
以下を仕込んでおけば出せると思います。

console.error('Error response data:', error.response.data);

以上です。
ありがとうございました！