javascript - React App ，人脸识别 API 运行正确但不显示任何图像

Question

我正在尝试使用 clarifai API 制作人脸识别应用程序。代码成功运行但未显示任何图像。onInputChange 有什么问题吗？请参阅此 repo 以获取完整的项目文件。

https://github.com/thekaranjit/Smart-Brain.git

我在应用程序中使用 React JS，在人脸检测 API 中使用 Clarifai

import React, { Component } from 'react';
import Particles from 'react-particles-js';
import Clarifai from'clarifai';
import Navigation from './components/Navigation/Navigation';
import FaceRecognition from './components/FaceRecognition/FaceRecognition';
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: '245f746d8470433682b6de5e9805104f'
});


const particlesOptions = {
  particles: {
      value: 30,
      density: {
        enable: true,
        value_area: 800 
    
    }
  }
}
class App extends Component {

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

    }
  }

calculateFaceLocation = (data) => {

const clarifaiFace = data.outputs[0].data.regions[0].regions_info.bounding_box;
const image = document.getElementById('inputimage')
const width = Number(image.width);
const height = Number(image.height);
console.log(width.height);
}
  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.calculateFaceLocation(response))
    .catch(err => console.log(err))
    

  }
  render() {
    return ( 
      <div className="App">
         <Particles className='particles' 
              params={particlesOptions}
              />
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm  
        onInputChange={this.onInputChange} 
        onButtonSubmit={this.onButtonSubmit}
        />
        <FaceRecognition  imageUrl={this.setState.imageUrl}/>
      </div>
    );
  }
}

export default App;

标签： javascriptapi

Answer 1

<FaceRecognition imageUrl={this.setState.imageUrl}/>绝对不是你想做的。

我不太清楚，但我认为你想要类似的东西

<FaceRecognition imageUrl={this.state.input}/>或者

<FaceRecognition imageUrl={this.state.imageUrl}/>