[FIXED] How to use tf.image.ssim in tensorflow.js and React Native?

Issue

In a React Native, in an Expo managed app, I want to retrieve an image(s) from the ImagePicker and pass it through the tf.image.ssim function of tensorflow , here is what I have done so far:

import React, { useState } from 'react';
import { Button, Image, View } from 'react-native';
import * as tf from '@tensorflow/tfjs';
import * as ImagePicker from 'expo-image-picker';
import * as FileSystem from 'expo-file-system';

export default function App() {

  const [image, setImage] = useState(null);
  const pickImage = async () => {

    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      quality: 1,
    });
    
    const img64 = await FileSystem.readAsStringAsync(result.uri, { encoding: 'base64' });
    const rawImageData = tf.util.encodeString(img64, 'base64');

    // Calling tensorflow.image.ssim function FAILS
    tf.image.ssim(rawImageData, rawImageData)

    if (!result.cancelled) {
      setImage({uri: result.uri, fileSize: result.fileSize});
    }
  };
  return (
    <View style={{ flex: 1, backgroundColor: "white", marginTop: 40 }}>
      <Button title="Pick image from camera roll" onPress={pickImage} />
      {image && <Image source={{ uri: image.uri }} style={{ width: 200, height: 200 }} />}
  </View>
  );
}

But this returns an error:

WARN Possible Unhandled Promise Rejection (id: 0): TypeError: undefined is not an object (evaluating 'env().platform.encode')

I have been looking on other posts but no post corresponds to this issue.

Any idea ?

Thanks

p.s: normally we pass two different images to ssim, but this is just to see if it works

Solution

entire tf.image namespace in tensorflow is an add-on.
tfjs implements some of its own tf.image methods, but overlap between python tf.image namespace and tfjs tf.image namespace is near-zero.

if you want .ssim method, you'd need to implement it yourself in tfjs - it simply does not exist.

Answered By - Vladimir Mandic
Answer Checked By - - Marilyn (ReactFix Volunteer)