reactjs 如何 让 Clarifai API 响应 我 的 请求

zynd9foi  于 2022-11-22  发布在  React
关注(0)|答案(3)|浏览(145)

我尝试使用Clarifai API来构建一个人脸检测应用程序,但它没有回应。我是新手,我已经做了几乎所有的事情来让它工作,但我没有得到任何回应。
这是我的密码

import React, { Component } from 'react';
import Clarifai from 'clarifai';
import Navigation from "./Components/Navigation/Navigation";
import Rank from './Components/Rank/Rank';
import ImageLinkForm from "./Components/ImageLinkForm/ImageLinkForm";
import FaceDetection from './Components/FaceDetection/FaceDetection';
import Logo from './Components/Logo/Logo';
import ParticlesBg from 'particles-bg';
import './App.css';

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

const Particles = () => {
  return (
    <>
        <div>...</div>
        <ParticlesBg 
          type="cobweb" 
          bg={true} 
          num={40}
        />
      </>
  )
};

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

onInputChange = (event) => {
  console.log(event.target.value)
};

onButtonClick = () => {
console.log('click');
app.models.predict("https://samples.clarifai.com/face-det.jpg%22").then(
 function(response) {
 console.log(response)
  },
  function(err) {

  }
 )
};

  render() {
    return (
      <div className="App">
        <Particles />
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm onInputChange={this.onInputChange} onButtonClick={this.onButtonClick} />
        <FaceDetection />
      </div>
    );
  };
};

export default App;

我试着切换我的API密钥,希望它是不工作的那个,但它仍然不工作。而且它没有抛出任何错误!

kkbh8khc

kkbh8khc1#

在React中使用Clarifai API时,您需要通过HTTP调用它,而不要使用任何gRPC客户端。此外,不要使用过时的JavaScript客户端。您可以参考Clarifai文档中的JavaScript(REST)示例,了解如何在React中使用API。

anhgbhbe

anhgbhbe2#

试试这个,我觉得承诺处理得不对

app.models.predict("https://samples.clarifai.com/face-det.jpg%22").then(response => {
 console.log(response)
}).catch(err => {
 console.log(err)
})
pjngdqdw

pjngdqdw3#

我 知道 你 正在 学习 的 课程 , 而且 我 已经 尝试 了 很 长 一 段 时间 让 这个 工作 。 跟随 一 个 小 的 React 项目 会 给 我们 知识 去 自己 解决 它 的 想法 是 不 现实 的 , 所以 不要 像 我 一样 拔 你 的 头发 。 一篇 文章 在 Clarifai 帮助 搜索 " Clarifai React " 后 确实 有 帮助 , 但 它 仍然 需要 欺骗 。 以下 是 我 到 目前 为止 所 得到 的 。它 至少 会 得到 一 个 数组 形式 的 响应 。

onButtonSubmit = () => {
console.log('button clicked');
this.setState({imageUrl: this.state.input});
const USER_ID = 'oxxxxxxxxxx';//(the code by your name)
const PAT = '96d20xxxxxxxxxxxx';//(your Clarifai api key)
const APP_ID = 'facerec';//(what you named your app in Clarifai)
const MODEL_ID = 'face-detection';
const MODEL_VERSION_ID = '6dc7e46bc9124c5c8824be4822abe105';    
const IMAGE_URL = this.state.input;
const raw = JSON.stringify({
  "user_app_id": {
      "user_id": USER_ID,
      "app_id": APP_ID
  },
  "inputs": [{"data": {"image": {"url": IMAGE_URL}}}]
});

const requestOptions = {
  method: 'POST',
  headers: {
      'Accept': 'application/json',
      'Authorization': 'Key ' + PAT
  }, body: raw
};
fetch("https://api.clarifai.com/v2/models/" + MODEL_ID + "/versions/" + MODEL_VERSION_ID + "/outputs", requestOptions)
  .then(response => response.text())
  .then(response => {
    const parser = JSON.parse(response)
    console.log('hi', parser.outputs[0].data.regions[0].region_info.bounding_box)
    // console.log(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))
  })
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

中 的 每 一 个
}

相关问题