react-native - 无法调用 TfliteReactNative.loadModel

问题描述

我正在尝试将 Tensorflow-Lite 与我的 React-Native 应用程序一起使用。基本上我使用的是 npm pakage，称为tflite-react-native. 遵循文档后，我收到错误消息。

Could not invoke TfliteReactNative.loadModel 
null
./models/mobilenet_v1_1.0_224.tflite

我并没有做错什么，但是当我通过单击它来选择模型时，它会显示上述错误。

以下是我尝试过的一些代码。



import React, { Component } from 'react';
import { Platform, StyleSheet, Image, Text, View, TouchableOpacity } from 'react-native';
import Tflite from 'tflite-react-native';
import ImagePicker from 'react-native-image-picker';

let tflite = new Tflite();

const height = 350;
const width = 350;
const blue = "#25d5fd";
const mobile = "mobilenet_v1_1.0_224";
const ssd = "ssd_mobilenet";
const yolo = "yolov2_tiny";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      model: null,
      source: null,
      imageHeight: height,
      imageWidth: width,
      recognitions: []
    };
  }

  onSelectModel(model) {
    this.setState({ model:model });
    switch (model) {
      case ssd:
        var modelFile  = './models/ssd_mobilenet.tflite';
        var labelsFile = './models/ssd_mobilenet.txt';
        break;
      case yolo:
        var modelFile  = './models/yolov2_tiny.tflite';
        var labelsFile = './models/yolov2_tiny.txt';
        break;
      default:
        var modelFile  = './models/mobilenet_v1_1.0_224.tflite';
        var labelsFile = './models/mobilenet_v1_1.0_224.txt';
    }
    tflite.loadModel({
      model: modelFile,
      labels: labelsFile,
    },
      (err, res) => {
        if (err)
          console.log(err);
        else
          console.log(res);
      });
  }

  onSelectImage() {
    const options = {
      title: 'Select Avatar',
      customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.launchImageLibrary(options, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        var path = Platform.OS === 'ios' ? response.uri : 'file://' + response.path;
        var w = response.width;
        var h = response.height;
        this.setState({
          source: { uri: path },
          imageHeight: h * width / w,
          imageWidth: width
        });

        switch (this.state.model) {
          case ssd:
            tflite.detectObjectOnImage({
              path,
              threshold: 0.2,
              numResultsPerClass: 1,
            },
              (err, res) => {
                if (err)
                  console.log(err);
                else
                  this.setState({ recognitions: res });
              });
            break;
          case yolo:
            tflite.detectObjectOnImage({
              path,
              model: 'YOLO',
              imageMean: 0.0,
              imageStd: 255.0,
              threshold: 0.4,
              numResultsPerClass: 1,
            },
              (err, res) => {
                if (err)
                  console.log(err);
                else
                  this.setState({ recognitions: res });
              });
            break;
          default:
            tflite.runModelOnImage({
              path,
              imageMean: 128.0,
              imageStd: 128.0,
              numResults: 3,
              threshold: 0.05
            },
              (err, res) => {
                if (err)
                  console.log(err);
                else
                  this.setState({ recognitions: res });
              });
        }
      }
    });
  }

  renderBoxes() {
    const { model, recognitions, imageHeight, imageWidth } = this.state;
    if (model == mobile)
      return recognitions.map((res, id) => {
        return (
          <Text key={id} style={{ color: 'black' }}>
            {res["label"] + "-" + (res["confidence"] * 100).toFixed(0) + "%"}
          </Text>
        )
      });
    else
      return recognitions.map((res, id) => {
        var left = res["rect"]["x"] * imageWidth;
        var top = res["rect"]["y"] * imageHeight;
        var width = res["rect"]["w"] * imageWidth;
        var height = res["rect"]["h"] * imageHeight;
        return (
          <View key={id} style={[styles.box, { top, left, width, height }]}>
            <Text style={{ color: 'white', backgroundColor: blue }}>
              {res["detectedClass"] + " " + (res["confidenceInClass"] * 100).toFixed(0) + "%"}
            </Text>
          </View>
        )
      });
  }

  render() {
    const { model, source, imageHeight, imageWidth } = this.state;
    var renderButton = (m) => {
      return (
        <TouchableOpacity style={styles.button} onPress={this.onSelectModel.bind(this, m)}>
          <Text style={styles.buttonText}>{m}</Text>
        </TouchableOpacity>
      );
    }
    return (
      <View style={styles.container}>
        {model ?
          <TouchableOpacity style={
            [styles.imageContainer, {
              height: imageHeight,
              width: imageWidth,
              borderWidth: source ? 0 : 2
            }]} onPress={this.onSelectImage.bind(this)}>
            {
              source ?
                <Image source={source} style={{
                  height: imageHeight, width: imageWidth
                }} resizeMode="contain" /> :
                <Text style={styles.text}>Select Picture</Text>
            }
            <View style={styles.boxes}>
              {this.renderBoxes()}
            </View>
          </TouchableOpacity>
          :
          <View>
            {renderButton(mobile)}
            {renderButton(ssd)}
            {renderButton(yolo)}
          </View>
        }
      </View>
    );
  }
}

标签： react-nativetensorflowtensorflow-lite

react-native - 无法调用 TfliteReactNative.loadModel

问题描述

解决方案

推荐阅读