• 请停止将问题标记为已解决，因为问题仍未得到充分回答。

我正在参加2022年的完全网络开发课程，从零到精通，并正在进行一个最后的项目，我们结合了前端和后端的技能。我们集成了一个来自Clarifai的API，它将从我们在输入中提供的链接中检测人脸，然后在我们的代码中，我们告诉它创建一个框，将显示在我们选择的图像上，显示人脸在图像中的位置。
我很难做到这一点。Clarifai似乎已经更新了一些东西，因为制作教程-我不知道这是否会造成任何问题。
这是GitHub上的repo，包含了一个工作项目的所有代码：https://github.com/aneagoie/smart-brain.
我已经将我的代码与repo进行了比较，除了不应该成为破坏性更改的微小更改外，没有发现任何差异。
当我在我的电脑上运行这个程序时，我使用npm start，然后在终端上运行前端和后端文件的两个示例，这工作得很好，当我放入一个照片链接时，一旦我点击检测，照片就会出现，但是没有框显示照片中的脸。
我知道有一种方法可以用Clarifai的gRPC做到这一点，但这个项目是为了教我们如何使用REST。我在控制台中查看，没有看到我记录任何错误。
这让我相信Clarifai API正在被访问，但由于某种原因，我的应用程序没有注册照片中检测到人脸的位置，也没有突出显示它
或
当我在终端上运行两个示例时，我不得不使用代码中所列端口之外的端口，例如，我一直使用3001，因为后端在localhost上使用3000
或
我根本没有访问Clarifai人脸检测API，只是没有记录错误。
或
有些事情正在发生/没有发生，因为我缺少registerServiceWorker（），它包含在教师代码中，但我们被告知不需要包含。
请协助-我想了解我们如何尽可能简单地调整它，使其正常工作。该解决方案将有助于其他学生采取相同的课程。
谢谢

import React, { Component } from 'react';
import ParticlesOptions from './components/Particles/Particles';
import Clarifai from 'clarifai';
import FaceRecognition from './components/FaceRecognition/FaceRecognition';
import Navigation from './components/Navigation/Navigation';
import Signin from './components/Signin/Signin';
import Register from './components/Register/Register';
import Logo from './components/Logo/Logo';
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
import Rank from './components/Rank/Rank';
import './App.css';

const app = new Clarifai.App({
  apiKey: 'MY API KEY GOES HERE'
});

class App extends Component {
  constructor() {
    super();
    this.state = {
      input: '',
      imageUrl: '',
      box: {},
      route: 'signin',
      isSignedIn: false,
      user: {
        id: '',
        name: '',
        email: '',
        entries: 0,
        joined: ''
      }
    }
  }

  loadUser = (data) => {
    this.setState({user: {
      id: data.id,
      name: data.name,
      email: data.email,
      entries: data.entries,
      joined: data.joined
    }})
  }

  // Connect to another piece of application
  // componentDidMount() {
  //   fetch('http://localhost:3000')
  //     .then(response => response.json())
  //     .then(console.log)
  // }

  calculateFaceLocation = (data) => {
    const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box;
    const image = document.getElementById('inputimage');
    const width = Number(image.width);
    const height = Number(image.height);
    return {
      leftCol: clarifaiFace.left_col * width,
      topRow: clarifaiFace.top_row * height,
      rightCol: width - (clarifaiFace.right_col * width),
      bottomRow: height - (clarifaiFace.bottom_row * height)
    }
  }

  displayFaceBox = (box) => {
    this.setState({box: box});
  }

  onInputChange = (event) => {
    this.setState({input: event.target.value});
  }

  onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input});
    app.models
      .predict(
        // HEADS UP! Sometimes the Clarifai Models can be down or not working as they are constantly getting updated.
        // A good way to check if the model you are using is up, is to check them on the clarifai website. For example,
        // for the Face Detect Mode: https://www.clarifai.com/models/face-detection
        // If that isn't working, then that means you will have to wait until their servers are back up. Another solution
        // is to use a different version of their model that works like the ones found here: https://github.com/Clarifai/clarifai-javascript/blob/master/src/index.js
        // so you would change from:
        // .predict(Clarifai.FACE_DETECT_MODEL, this.state.input)
        // to:
        // .predict('53e1df302c079b3db8a0a36033ed2d15', this.state.input)
        Clarifai.FACE_DETECT_MODEL,
        this.state.input)
      .then(response => {
        console.log('hi', response)
        if (response) {
          fetch('http://localhost:3000/image', {
            method: 'put',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
              id: this.state.user.id
            })
          })
            .then(response => response.json())
            .then(count => {
              this.setState(Object.assign(this.state.user, { entries: count }))
            })
        }
        this.displayFaceBox(this.calculateFaceLocation(response))
      })
      .catch(err => console.log(err));
  }

  onRouteChange = (route) => {
    if (route === 'signout') {
      this.setState({isSignedIn: false})
    } else if (route === 'home') {
      this.setState({isSignedIn: true})
    }
    this.setState({route: route});
  }

  render() {
    const { isSignedIn, imageUrl, route, box } = this.state;
    return (
      <div className="App">
        <ParticlesOptions />
        <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange} />
        { route === 'home' 
          ? <div>
              <Logo />
              <Rank name={this.state.user.name} entries={this.state.user.entries} />
              <ImageLinkForm 
                onInputChange={this.onInputChange} 
                onButtonSubmit={this.onButtonSubmit}
                />
              <FaceRecognition box={box} imageUrl={imageUrl} />
            </div>
          : (
              route === 'signin' 
              ? <Signin loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
              : <Register loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
            )
        }
      </div>
    );
  }
}

export default App;