React 项目中的 Clarifai Api Face_Detector_Model
Face_Detector_Model of Clarifai Api in react project
任何人都可以帮助我,如何使用 clarifai api 的人脸检测模型来检测多张人脸。我这样创建了 App.js。
const app = new Clarifai.App({
apiKey: 'my_api_key'
});
class App extends React.Component {
constructor(){
super();
this.state = {
input: '',
imageUrl: '',
box: {},
}
}
calculateFaceLocation = (response) => {
let width;
let height;
let clarifaiFace;
response.outputs[0].data.regions.forEach(function differentfaces(item){
clarifaiFace = item.region_info.bounding_box;
const image = document.getElementById('inputImage');
width = Number(image.width);
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(
Clarifai.FACE_DETECT_MODEL,
this.state.input
)
.then(response => this.displayFaceBox(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 box={this.state.box} imageUrl={this.state.imageUrl} />
</div>
);
}
}
export default App;
Link 澄清 api 人脸检测模型:https://www.clarifai.com/models/face-detection-image-recognition-model-a403429f2ddf4b49b307e318f00e528b-detection
在这里支持 Clarifai。能否请您尝试更换
FACE_DETECT_MODEL
和
FACE_DETECTION_MODEL
它可能只是一个语法错误那么简单。
任何人都可以帮助我,如何使用 clarifai api 的人脸检测模型来检测多张人脸。我这样创建了 App.js。
const app = new Clarifai.App({
apiKey: 'my_api_key'
});
class App extends React.Component {
constructor(){
super();
this.state = {
input: '',
imageUrl: '',
box: {},
}
}
calculateFaceLocation = (response) => {
let width;
let height;
let clarifaiFace;
response.outputs[0].data.regions.forEach(function differentfaces(item){
clarifaiFace = item.region_info.bounding_box;
const image = document.getElementById('inputImage');
width = Number(image.width);
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(
Clarifai.FACE_DETECT_MODEL,
this.state.input
)
.then(response => this.displayFaceBox(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 box={this.state.box} imageUrl={this.state.imageUrl} />
</div>
);
}
}
export default App;
Link 澄清 api 人脸检测模型:https://www.clarifai.com/models/face-detection-image-recognition-model-a403429f2ddf4b49b307e318f00e528b-detection
在这里支持 Clarifai。能否请您尝试更换
FACE_DETECT_MODEL
和
FACE_DETECTION_MODEL
它可能只是一个语法错误那么简单。