创建使用google cloud vision的reactjs应用程序

Question

我试图创建一个使用谷歌云视觉的Reactjs应用程序，但我正在努力让示例代码工作。我刚刚开始学习React-js，所以我有点不明白如何为节点创建示例代码。Js应该被更改以使其工作。

我从参观开始https://cloud.google.com/vision/docs/quickstart-client-libraries?authuser=1

然后我使用命令“npx create react app cloud vision”在我的计算机上创建了一个新项目。我在项目的根目录中创建了一个凭据文件夹，将json文件放在那里。我创造了一个。输入环境变量的env文件：

GOOGLE_APPLICATION_CREDENTIALS=“C:\Development\Projects\cloud vision\CREDENTIALS\My First Project-b38ff120f2ad.json”

然后，我使用以下命令安装了云视觉npm： npm安装-保存@google-Cloud/vision

下一步是找到我想从中使用的OCR的示例代码https://cloud.google.com/vision/docs/ocr?authuser=1

然后我尝试npm启动

import React from 'react';
import logo from './logo.svg';
import './App.css';
import testImage from './images/image--002.png'
import vision from '@google-cloud/vision'

function App() {

  const googleVison = async () => {
    // const vision = require('@google-cloud/vision');

    // Creates a client
    const client = new vision.ImageAnnotatorClient();

    /**
     * TODO(developer): Uncomment the following line before running the sample.
     */
    const fileName = testImage;

    // Performs text detection on the local file
    const [result] = await client.textDetection(fileName);
    const detections = result.textAnnotations;
    console.log('Text:');
    detections.forEach(text => console.log(text));
  }

googleVison()

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

因为我是React的新手，不太懂Node.js我主要希望控制台能显示一些我能理解的东西，这样我就可以做更多的研究。我的第一个问题是我不知道如何替换“const vision=要求（@google-Cloud/vision）；”，所以我试着导入它。对吗？我也不知道我是否可以原样使用Node.js代码，或者我是否必须以某种方式改变它。但是，如果我在应用程序启动时查看控制台，我会得到一个错误，说：“找不到模块：无法解决'C：\Development\Projects\Cloud-vision\node_modules@grpc\grpc-js\build\src中的'http p2'”

然后我尝试npm安装http p2也，但只是得到了一个新的错误（这我不记得了，但我可以再试一次，如果这是重要的让应用程序工作。）

有人能给我一些如何让应用程序运行的建议吗？

Answer 1

首先，React无法识别环境变量GOOGLE_APPLICATION_CREDENTIALS。您必须为所有自定义环境变量使用前缀REACT_APP_。

您需要做的是在初始化您的视觉客户端时将您的GoogleProject Id和JSON密钥文件指定为凭据，如下所示：

const options = { 
    credentials = require('/path/to/key/json'),
    projectId = 'Your Google Cloud Project ID'
};
const client = new vision.ImageAnnotatorClient(options);