使用来自 Clarifai API 的人脸检测 API 时遇到问题答案

【问题标题】：having issues using face detection API from Clarifai API使用来自 Clarifai API 的人脸检测 API 时遇到问题
【发布时间】：2022-12-05 03:18:12
【问题描述】：

我已经将来自 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;

人脸识别.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;

人脸识别.css

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

我究竟做错了什么？我尝试从实际的 Clarifai API 代码中复制粘贴，但没有成功边界框 css 甚至没有出现在控制台中。请帮我

【问题讨论】：

有谁能够帮我？

标签： css reactjs clarifai tachyons-css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

Clarifai 改变了使用他们的 Api 的方式。在Clarifai Face detect model 上，点击使用model，然后就可以复制他们的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

不客气?

【讨论】：