首页 > 解决方案 > React Native 中的 Clarifai 自定义模型

问题描述

任何人都可以帮助在 React Native 中集成 Clarifai 自定义训练模型吗?我在文档中发现,如果你想使用自定义而不是通用模型,你应该传递带有 model_id 和 model_version_id 的对象。当我在他们的网页上创建这个自定义模型时,它给了我这些参数,但算法不会真正起作用,它会返回“请求失败状态代码 400”的错误。有没有人尝试在 React Native 中实现这个 API?

const ScanMachine = props =>  {
    const {id} = props.route.params;
    const selectedCategory = CATEGORIES.find(cat => cat.id === id);
    const camRef = useRef(null);
    const [hasPermission, setHasPermission] = useState(null);
    const [ratio, setRatio] = useState(null);
    const [capturedPhoto, setCapturedPhoto] = useState(null);
    const [prediction, setPrediction] = useState([]);

    useEffect(() => {
        (async () => {
        const { status } = await Camera.requestPermissionsAsync();
        setHasPermission(status === 'granted');
        setRatio('16:9');
        })();
    }, []);

    if (hasPermission === null) {
        return <View />;
    }
    if (hasPermission === false) {
        return <Text>No access to camera</Text>;
    }

    async function takePicture() {
        if(camRef) {
            let data = await camRef.current.takePictureAsync();
            console.log(data);
            setCapturedPhoto(data.uri);
            return data.uri;
        }
    }

    async function resize(photo) {
        let imageManipulate = await ImageManipulator.manipulateAsync(photo, [{resize: {height: 350, width: 300}}], {base64: true});
        return imageManipulate.base64;
    }

    async function predictions(image) {
        let pred = await clarifai.models.predict({id: "custom_laundry_id", version: "03f4ff3ce1ba4cf68b77e923d0ce8699"}, image);
        return pred;
    }

    async function detectObject() {
        let photo = await takePicture();
        let resized = await resize(photo);
        let predict = await predictions(resized);
        setPrediction(predict.outputs[0].data.concepts)
        console.log(predict);
    }

    return (
        <View style={{ flex: 1}}>
            <Camera style={{ flex: 1, alignItems:'center'}} ref={camRef} ratio={ratio}>
                <View style={{ flex: 1, backgroundColor: 'transparent', margin: 20, justifyContent: 'space-between'}}>
                 {prediction &&  <FlatList data={prediction.map(predict => ({
                        key: predict.name,
                    }))} renderItem={({ item }) => (
                       <Text style={{fontSize: 17, color: '#fff'}}>{item.key + " "}</Text>
                    )} numColumns={4} /> } 
                    </View>
                    <BarcodeMask edgeColor={'#62B1F6'} backgroundColor={'transparent'} width={300} height={350} showAnimatedLine={false} />
                    <View style={{flex: 1, justifyContent: 'space-between', justifyContent:'flex-end', margin: 20}}>
                        <TouchableOpacity style={{ backgroundColor: 'transparent', alignSelf: 'flex-end'}} onPress={detectObject}>
                            <FontAwesome name="camera" style={{color: '#fff', fontSize: 40, alignContent: 'flex-start'}} />    
                        </TouchableOpacity>
                        </View>
            </Camera>
            {/* { capturedPhoto &&
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', margin: 20}}>
                        <Image style={{width: '100%', height: '100%', borderRadius: 10}} source={{uri: capturedPhoto}} />
                    </View> } */}
        </View>
    );
};

标签: react-nativeclassificationobject-detectionclarifai

解决方案


推荐阅读