错误400错误的请求，或Clarifai错误11102

Question

我正在尝试使用模型FACE_DETECT调用API clarifai。

这是我的代码App.js

    import React, {Component} from 'react';
import Navigation from "./components/Navigation/Navigation";
import Logo from "./components/Logo/Logo";
import Clarifai from 'clarifai';
import ImageLinkForm from "./components/ImageLinkForm/ImageLinkForm";
import FaceRecognition from "./components/FaceRecognition/FaceRecognition";
import Rank from "./components/Rank/Rank";
import Register from "./components/Register/Register";
import SignIn from "./components/SignIn/SignIn"
import Particles from "react-particles-js";
import './App.css';

const clarifaiApp = new Clarifai.App({
    apiKey: 'api Clarifai'
});

const particlesOptions = {
    "particles": {
        "number": {
            "value": 150
        },
        "size": {
            "value": 3
        }, "density": {
            "enable": true,
            "value_area":  800
        }
    },
    "interactivity": {
        "events": {
            "onhover": {
                "enable": true,
                "mode": "repulse"
            }
        }
    }
}

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            input: '',
            imageUrl: '',
            box: {},
            route: 'signin',
            isSignedIn: false,
        }
    }

    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});
        fetch(this.state.input)
            .then(() => {
                clarifaiApp.models.predict(
                    Clarifai.FACE_DETECT_MODEL,
                    this.state.input)
                    .then(response =>this.displayFaceBox(this.calculateFaceLocation(response)))
                    .catch(err => console.error(err));
            })
            .catch((err) => {
                console.error(`Failure: ${err}`);
            });
    }

    onRouteChange = (route) => {
        if(route === 'signout'){
            this.setState({isSignedIn: false})
        } else if (route === 'home') {
            this.setState({isSignedIn: true})
        }
        this.setState({route: route})
    }

    render() {
        const  {isSignedIn, imageUrl, route, box} = this.state;
        return (
            <div className="App">
                <Particles
                    className="particles"
                    params={particlesOptions}
                />

                <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange}/>
                {route === 'home'
                    ?
                    <div>
                        <Logo/>
                        <Rank />
                        <ImageLinkForm
                            onInputChange={this.onInputChange}
                            onButtonSubmit={this.onButtonSubmit}/>
                        <FaceRecognition box={box} imageUrl={imageUrl}/>
                    </div>
                    : (
                        route === 'signin'
                            ? <SignIn onRouteChange={this.onRouteChange}/>
                            : <Register onRouteChange={this.onRouteChange}/>
                    )
                }
            </div>
        );
    }
}

export default App;

这是我的ImageLinkForm：

    import React from 'react';
    import './ImageLinkForm.css';

    const ImageLinkForm = ({ onInputChange, onButtonSubmit }) => {
        return (
            <div>
                <p className='f3'>
                    {'Ceci est magique, entrez un lien avec un visage et il sera automatiquement detecté !'}
                </p>
                <div className='center'>
                    <div className='form center pa4 br3 shadow-5'>
                        <input className='f4 pa2 w-70 center' type='tex' onChange={onInputChange}/>
                        <button
                            className='w-30 grow f4 link ph3 pv2 dib white bg-light-purple'
                            onClick={onButtonSubmit}
                        >Detect</button>
                    </div>
                </div>
            </div>
        );
    }

    export default ImageLinkForm;

And here my FaceRecognition.js 

    import React from 'react';
import './FaceRecognition.css'

const FaceRecognition = ({imageUrl, box}) => {
    return (
        <div className="center ">
            <div className="absolute mt2 ">
                <img id="inputimage" src={imageUrl} alt='' 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;

问题是当我有效时，正在显示图像，但在网络中收到错误的请求。

Failed to load resource: the server responded with a status of 400 (Bad Request) 
api.clarifai.com/v2/models/a403429f2ddf4b49b307e318f00e528b/outputs:1

浏览互联网后，我认为问题可能是字符串问题或模型中发送的值错误，但我不知道如何解决该问题。

感谢您提前阅读。

Ruldane，