使用Clarifai API中的人脸检测API有问题

Question

我已经将Clarifai API中的脸检测APi添加到我的项目中，但是，每当我将图像复制到我的项目并单击“检测”时，它实际上会显示该图像，但它不会检测到该脸。见下文App.js和FaceRecognition.js

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

const app = new Clarifai.App({
  apiKey: 'xxxxxxxxxxxx'
});

class App extends Component {
  constructor() {
    super();
    this.state = {
      input: '',
      imageUrl: '',
      box: {}
    }
  }

  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) => {
    console.log(box)
    this.setState({box: box});
  }

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

  onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input})
    app.models.predict(
      Clarifai.FACE_DETECT_MODEL,
      this.state.input)
      .then( response => this.displayFaceBox(this.calculateFaceLocation(response)))
      .catch(err => console.log(err));
      
  }

  render() {
  return (
    <div className="App">
       
       <Navigation />
       <Logo />
       <Rank />
       <ImageLinkForm  
       onInputChange={this.onInputChange}
       onButtonSubmit={this.onButtonSubmit} />
       <FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl}/>
    </div>
  );
}
}

export default App;

FaceRecognition.js

import React from 'react';
import './FaceRecognition.css';

const FaceRecognition = ({imageUrl, box}) => {
    return (
      <div className='center ma'>
      <div className='absolute mt2'>
        <img id='inputimage' alt='' src={imageUrl} width='500px' height='auto' />
        <div className='bounding-box' style=
        {{top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol}}></div>
       </div>
     </div>
    );
}

export default FaceRecognition;

FaceRecognition.css

bounding-box {
    position: absolute;
    box-shadow: 0 0 0 3px #149df2 inset;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    cursor: pointer;
}

我做错什么了？我试着从实际的Clarifai代码中复制粘贴，但是没有幸运的是，边界框css甚至没有出现在控制台中。请帮帮我

Answer 1

首先，请不要使用这个客户端：https://github.com/Clarifai/clarifai-javascript，它已经被废弃了一段时间了，这个包中的一些东西是非常老的和坏的。

如果您纯粹是在开发客户端，则可以直接使用REST端点：https://docs.clarifai.com/api-guide/predict/images (参见整个文档中的"Javascript (REST)“片段)

我还建议使用PAT而不是API密钥。这将允许您使用单个令牌访问所有Clarifai应用程序。

Answer 2

克拉里法伊改变了使用他们的Api的方式。在Clarifai脸检测模型上，单击“使用模型”，然后可以复制有关如何使用其Api的代码。https://clarifai.com/clarifai/main/models/face-detection?utm_source=clarifai&utm_medium=referral&tab=versions

然后，您可以从Clarifai门户导入代码中请求的PAT和其他凭据。将此用作指南https://help.clarifai.com/hc/en-us/articles/4408131744407-Integrating-Clarifai-in-your-React-Javascript-project

不客气