在React中调用Cloud Vision API

你好，我是TABE。

因为需要调查从React调用CloudVisionAPI的方法，所以将其作为备忘录记录下来。

首先

搭建React项目的配置

请在您希望创建示例React项目的位置上运行以下命令

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

接下来是谷歌云的设置

虽然代码本身很简单，但是我在这里遇到了一些问题…
我是参考了以下内容进行设置的。
https://dev.classmethod.jp/articles/google-cloud_vision-api/

示例代码

我将以下代码替换到 App.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密钥！

REACT_APP_YOUR_GOOGLE_CLOUD_VISION_API_KEY=xxxxxxx

请在xxxxx中输入通过Google Cloud获取的API密钥。

确认行动

请粘贴一个从互联网上获取到的图片URL（请确保URL指向一个.jpeg或.pdf等文件类型），然后点击“分析图片”按钮。

如果能够以Json格式显示响应的话，那就算成功！

因为在样本中使用的内容不是免费素材，所以文本部分已经省略，但图片中的文本仍然可以正确获取！

在Google Cloud设置中发生了几个错误。

云视觉 API 在项目xxxxx中尚未使用过或已被禁用。请访问启用它。

在项目中，没有启用”Cloud Vision API”。我选择了”Vision AI API”。这是个错误。

这个 API 方法需要启用计费。请访问项目 xxxx 启用计费。

请务必设置账单选项以避免出现错误！

我认为只需要在收到错误响应时编写以下代码即可引发上述错误。

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

以上就是了。
非常感谢！