[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'x.mul')] and Graph Model being converted into layer model

TensorFlow.js version

@tensorflow/tfjs": ^1.7.4 @tensorflow/tfjs-react-native": ^0.2.3

Browser version

“react-native”: “https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz” “expo”: “~37.0.3” “react”: “^16.9.0”

Describe the problem or feature request

I’m trying to get a pre-trained model loaded onto react native.

When I try to run it, it gives me the error:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating ‘x.mul’)]

Additionally, my model is originally a graph model, but tf_js converter converts it into a layer model.

Code to reproduce the bug / link to feature request

import React, { Component } from 'react';
import { Camera } from 'expo-camera';
import { cameraWithTensors, fetch, decodeJpeg, bundleResourceIO } from '@tensorflow/tfjs-react-native';
import { View, Text, StyleSheet, Platform } from 'react-native'
import { CameraStyle } from './styles'
import * as tf from '@tensorflow/tfjs';

class Swish extends tf.layers.Layer {
  constructor(config) {
    super(config);
    this.alpha = config.alpha;
  }

  call(input) {
    return tf.tidy(() => {
      const x = input[0]; //tf.getExactlyOneTensor(input);
      return tf.sigmoid(x.mul(this.alpha)).mul(x);
    });
  }

  computeOutputShape(inputShape) {
    return inputShape;
  }

  static get className() {
    return 'swish';
  }
}
tf.serialization.registerClass(Swish)

class FixedDropout extends tf.layers.Layer {
  constructor(config) {
    super(config);
    this.alpha = config.alpha;
  }

  call(input) {
    return input;
  }

  computeOutputShape(inputShape) {
    return inputShape;
  }

  static get className() {
    return 'FixedDropout';
  }
}
tf.serialization.registerClass(FixedDropout)

const TensorCamera = cameraWithTensors(Camera);

const modelJson = require('../../assets/model/model-fixed.json');
const modelWeights = require('../../assets/model/group1-shard1of1.bin');

class CameraCompo extends Component {

  constructor(props) {
    super(props)
    this.state = { modelLoaded: false };
    this.isModelLoaded = this.isModelLoaded.bind(this);
    this.getModel = this.getModel.bind(this);
  }

  async componentDidMount() {
    await tf.ready()
    console.log("TF Ready")
    this.model = await tf.loadLayersModel(bundleResourceIO(modelJson, modelWeights));
    console.log("Model Loaded")
    this.setState({modelLoaded:true})
  }

  isModelLoaded(){
    return this.state.modelLoaded;
  }

  getModel(){
    return this.model
  }

  handleCameraStream(images, updatePreview, gl) {
    model2 = this.getModel()
    console.log(model2)
    const loop = async () => {
      const nextImageTensor = images.next().value
      const nextImageTensor2 = nextImageTensor.reshape([1,320,320,3])
      
      //console.log("Prediction:")
      if (this.isModelLoaded()) {
        if (model2 == undefined){
          model2 = this.getModel()
        }
        else{
        console.log(nextImageTensor2)
        console.log(model2)
        const prediction = (await model2.predict(nextImageTensor2))[0];
        console.log(prediction)
        }
      }


      //
      // do something with tensor here
      //

      // if autorender is false you need the following two lines.
      // updatePreview();
      // gl.endFrameEXP();

      requestAnimationFrame(loop);
    }
    loop();
  }

  render() {
    // Currently expo does not support automatically determining the
    // resolution of the camera texture used. So it must be determined
    // empirically for the supported devices and preview size.

    let textureDims;
    if (Platform.OS === 'ios') {
      textureDims = {
        height: 1920,
        width: 1080,
      };
    } else {
      textureDims = {
        height: 1200,
        width: 1600,
      };
    }

    return <View>
      <TensorCamera
        // Standard Camera props
        style={CameraStyle.preview}
        type={Camera.Constants.Type.front}
        isModelLoaded={this.isModelLoaded}
        getModel = {this.getModel}
        // Tensor related props
        cameraTextureHeight={textureDims.height}
        cameraTextureWidth={textureDims.width}
        resizeHeight={320}
        resizeWidth={320}
        resizeDepth={3}
        onReady={this.handleCameraStream}
        autorender={true}
      />
    </View>
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default CameraCompo;

Link to python model: https://www.dropbox.com/s/6ginejkhna1sic8/unet_70.h5?dl=0 Link to tfjs model: https://www.dropbox.com/sh/p9ddj0vee4vrd9j/AAB5uU2EFIGr21A0_zzj3XcQa?dl=0 Link to model.summary(): https://pastebin.com/iUrhuxJq

To verify that the model is a graph model, look to “block1a_se_excite”

[tafsiri]

• For your model conversion it looks like you are starting with a keras model in the h5 format. By default this will be converted to a tfjs-layers model, to convert it to a tfjs graph model you can pass set the --output_format parameter. See https://github.com/tensorflow/tfjs/tree/master/tfjs-converter#python-to-javascript for details on the input and output options.
• TFJS graph models do not support the ‘custom layers’ concept (the layers api is not used in that format). So if you do want a custom layer/activation, you if you do have a custom layer you should use the layers-model format, you can look at this example https://github.com/tensorflow/tfjs-examples/blob/master/custom-layer/custom_layer.js for reference.

[google-ml-butler[bot]]

Are you satisfied with the resolution of your issue? Yes No