-1

尝试使用 clarifai 的 Api 通过我安装的拖放包 react-dropzone 构建一个识别图像中的人脸和对象的应用程序。当我使用静态图像时，我得到 Clarifai 的响应，没有任何错误，但是当我尝试从我的状态加载它时，我不断收到 400 个错误请求。

我认为该错误可能与 useState 的工作方式有关。

请问有人可以帮忙吗？

请参阅下面的代码。

import React, { useState, useEffect} from 'react';

import Clarifai from 'clarifai';
import Dropzone from 'react-dropzone';

import Header from './components/header/header.component.jsx';
import Modal from './components/modal/modal.component';
import Box from './components/box/box.component';
import './App.css';


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

const App = () => {

    const [fileProperties, setFileProperties] = useState([]);
    const [isModalOpen, setModal] = useState(false);

    const handleDrop = acceptedFiles => {
        setFileProperties(acceptedFiles.map(file => URL.createObjectURL(file)));
        toggleModal()
    }
    useEffect(() => {
        if(fileProperties.length > 0){
            console.log(fileProperties);
            app.models.predict(Clarifai.FACE_DETECT_MODEL, fileProperties).then(
            function(response) {
                console.log(response);
            },
            function(err) {
                console.log('There was an error', err);
            }
                );          
        }
    }, [fileProperties]);

        

    const toggleModal = () => {
        setModal(!isModalOpen);
    }
    return (
        <div className="main">  
            <Header/>   
            { isModalOpen && 
                <Modal>
                    <Box isModalOpen={isModalOpen} fileProperties={fileProperties} toggleModal={toggleModal}/>
                </Modal>
            }   
            <Dropzone  onDrop={handleDrop} accept="image/*">
                {({ getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject}) => {
                  // additional CSS depends on dragging status
                  const additionalClass = isDragAccept ? "accept" : isDragReject ? "reject" : "";
                  return (
                    <div{...getRootProps({className: `dropzone ${additionalClass}` })} >
                          <input {...getInputProps()} />
                          <h2>This smart box detects faces & objects like sunglasses and hats in an image</h2>
                          <span>{isDragActive ? "" : ""}</span>
                          <p>Drag and drop an image, or click to select </p>
                    </div>
                  );
               }}
            </Dropzone>
        </div>
    );  
}

export default App;
4

1 回答 1

1

URL.createObjectURL 返回 DOMString，您需要发送 Clarifai 可以访问的 base64 字符串或 url。 https://docs.clarifai.com/api-guide/predict/images

于 2020-08-19T13:28:37.397 回答