reactjs - 使用 Clarifai 的 FACE_DETECT

问题描述

我正在使用 Clarifai 的 Api 来检测图像中的人脸，它工作正常，我将它部署到 github 页面。一段时间后，它停止工作并开始在网络选项卡上给我状态码 400 和状态码 10020，尽管我使用的是 Clarifai 想要的正确图像格式，即 base64。同时，我的应用程序使用了 Clarifai 的服装检测模型，效果非常好。

以下是相关代码：

import React from 'react';

import Clarifai from 'clarifai';
import { connect } from 'react-redux';

import { setFaceBoundary, setApparelBoundary, numberOfFaces, setBoundingBox, setApparelsInfo, setWithSpinner } from '../../redux/box/box.actions';
import { setImageDimensions } from '../../redux/image/image.actions.js';

import './models-options.styles.css';

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

const ModelsOptions = ({ setFaceBoundary, setApparelBoundary, fileProperties, numberOfFaces, setBoundingBox, setApparelsInfo, setWithSpinner, setImageDimensions })=> {

        const calculateApparel = (data) => {
            const conceptsArray = data.outputs[0].data.regions.map(concepts => concepts.data.concepts);
            setApparelsInfo(conceptsArray)
            const outputs = data.outputs[0].data.regions.map(apparels => apparels.region_info.bounding_box);
            console.log(outputs);
            setBoundingBox(outputs)
            const image = document.getElementById("inputImage");
            console.log('image dimensions' ,image.naturalWidth, image.naturalHeight);
            const width = image.naturalWidth;
            const height = image.naturalHeight;
            const apparelsLoaction = outputs.map(apparel => { 
                    return {
                        leftCol: apparel.left_col * width,
                        topRow: apparel.top_row * height,
                        rightCol: width -  apparel.right_col * width,
                        bottomRow: height - apparel.bottom_row * height
                    }
                });
            return apparelsLoaction;
    }

    const calculateFace = (data) => {
            const faceNumber = data.outputs[0].data.regions.length;
            numberOfFaces(faceNumber);
            const outputs = data.outputs[0].data.regions.map((faces) => faces.region_info.bounding_box);
            setBoundingBox(outputs);
            const image = document.getElementById("inputImage");
            const width = image.clientWidth;
            const height = image.clientHeight;
            const faceCordinates = outputs.map((face) => {
                    return {
                        leftCol: face.left_col * width,
                        topRow: face.top_row * height,
                        rightCol: width -  face.right_col * width,
                        bottomRow: height - face.bottom_row * height,
                    }
                });
            return faceCordinates;
        }



    const detectFace = () => {
        setWithSpinner(true)
        app.models.predict(Clarifai.FACE_DETECT_MODEL, {base64: fileProperties}).then(
        (response) => {
            setFaceBoundary(calculateFace(response));
            setWithSpinner(false)

        },
        (err) => {
            console.log('There was an error', err);
        }
            );
        setApparelsInfo({});
        setApparelBoundary({});
    }

    const detectApparels = () => {
        setWithSpinner(true)
        app.models.predict('72c523807f93e18b431676fb9a58e6ad', {base64: fileProperties}).then(
        (response) => {         
            console.log('response at the  models',response)
            setApparelBoundary(calculateApparel(response));
            setWithSpinner(false)

        },
        (err) => {
            console.log('There was an error', err);
        }
            );              
        setFaceBoundary({});
        numberOfFaces(0)
    }
    return (
        <div className="models-button">
          <button onClick={detectFace}>Detect Face</button>
          <button onClick={detectApparels}>Detect Apparels</button>
        </div>
    );
};

const mapStateToProps = ({image: {fileProperties}}) => ({
    fileProperties
})

const mapDispatchToProps = dispatch => ({
    setFaceBoundary: (facePostion) => dispatch(setFaceBoundary(facePostion)),
    setApparelBoundary: (apparelPosition) => dispatch(setApparelBoundary(apparelPosition)),
    numberOfFaces: (number) => dispatch(numberOfFaces(number)),
    setApparelsInfo: (number) => dispatch(setApparelsInfo(number)),
    setBoundingBox: (bounding) => dispatch(setBoundingBox(bounding)),
    setWithSpinner: (spinner) => dispatch(setWithSpinner(spinner)),
    setImageDimensions: (dimensions) => dispatch(setImageDimensions(dimensions)),
})

export default connect(mapStateToProps, mapDispatchToProps)(ModelsOptions);

如果可能有帮助，这里是 webApp 的链接：https ://abdullahgumi.github.io/smart-box/

任何关于如何解决这个问题的想法都将不胜感激。谢谢

标签： reactjsapihttp-status-code-400clarifai

reactjs - 使用 Clarifai 的 FACE_DETECT_MODEL 时的状态码 400

问题描述

解决方案

推荐阅读