*请停止将问题标记为已解决，因为问题仍然没有得到充分的回答。
我正在参加2022年从零到精通的完整Web开发人员课程，并正在研究一个最终项目，我们将技能与前端和后端结合起来。我们从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;
Javascript API已弃用
我能够通过直接调用javascript REST API来继续课程。访问
获取更多信息。这个链接也将有助于获得所需的参数
使用fetch()直接调用rest api