Firebase Functions, ReactNative and TensorflowJS — AI Models on Budget

Published in

Call For Atlas

14 min readJun 5, 2023

Would it be great, if when you go to the petstore you know you are getting the best catfood deal for your furry friend?

In this article we will utilize Firebase Cloud Functions to host a TensorFlow.js model, and open it up to predictions through API calls from an Android ReactNative App — all with $0 cost.

Start with Firebase

Register your free firebase account here: https://console.firebase.google.com/. You will have to create a project, keep its name in mind.

On your machine, install firebase globally:

npm install -g firebase-tools

firebase login

Initialize your firebase by selecting the existing project you created, with cloud functions capabilities and an emulator. Use the follow command:

firebase init

You'll follow the prompts and enable the services mentioned above. At the end of the whole process, you will have a firebase.json file that is similar to this:

{
  "database": {
    "rules": "database.rules.json"
  },
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ]
    }
  ],
  "emulators": {
    "functions": {
      "port": 5001
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  }
}

Create the NodeJs cloud Function

The firebase cli tool should have created a functions folder, navigate to this folder and edit index.js with these details below, to create the entry script:

const { onRequest } = require("firebase-functions/v2/https");
const logger = require("firebase-functions/logger");
const admin = require('firebase-admin');

admin.initializeApp();
const database = admin.database();

let GLOBAL_COUNT = 0;

exports.helloWorld = onRequest(async (request, response) => {
    logger.info("Hello logs!", { structuredData: true });

    // Save telemetry to Firebase Realtime Database
    await database.ref('telemetry').push({
        msg: `Hello #${GLOBAL_COUNT++}`,
        timestamp: Date.now(),
    });

    response.send("Hello from Firebase!");
});

install all the imported libraries:

npm install express firebase-admin

Emulator to Test the Function

Emulators are the best way to try service and APIs without commiting to firebase's prices, and to validate our code before going to the cloud we should test it on the emulator:

firebase emulators:start

it will print the Emulator's UI url which you can use to browse to:

Go to the functions tab, and access the given url. You should see the 'hello world' ouput, and the logs should start showing on the UI:

With all of that validated, let's deploy to the actual Firebase service

Hello Firebase

To deploy our code, we input the following commands in the command prompt:

firebase deploy

Don't worry if you are asked to switch to the blaze payment plan (mostly because of the cloud functions), you won't be charged anything with what we will do in this article.
If the deploy is successful, you should see this in your prompt:

The cloud function should be visible from firebase:

If you curl or use Postman to hit that url show on firebase, you will get hello world:

Show us some Models!

Time to step it up with datascience and give our pets an edge on their purchases.

Create a folder where we will process the data and test the model, we do this to test our mode before embedding it into the cloud function. CD to the folder, and run npm init to initialize a simple package setup.

From here install all required TensorFlowJS dependencies:

npm install @tensorflow/tfjs @tensorflow/tfjs-node nodeplotlib

With this experiment, we don't have any datasets - so let's synthesize some. We want data that describes the catfood's properties, and we will use this to find the best price for a purchase.

We will generate the synthetic data with the code below:

/**
 * Tensorflow JS Analysis and Model Building.
 */

import * as tf from '@tensorflow/tfjs-node'
import { plot } from 'nodeplotlib';
import Plot from 'nodeplotlib';
const { tidy, tensor2d } = tf;

// Constants
const BRANDS = ['Whiskers', 'Royal Feline', 'Meowarf', 'Unbranded'];
const STORES = ['Fresh Pet', 'Expensive Cats', 'Overpriced Pets', 'Jungle of Money', 'Mom & Pop Petshop'];
const MAX_DS_X = 1000;
const EPOCHS = 30;

/**
 * Generates random cat food data, either as normal or uniform data.
 * 
 * @param numRows The size of the dataset in X
 * @returns 2darray of features.
 */
function generateData(numRows,
    wieghtRangeGrams = { min: 1000.0, max: 10000.0 },
    brands = BRANDS,
    stores = STORES) {

    const brandIndices = tf.randomUniform([numRows], 0, brands.length, 'int32');
    const brandLabels = brandIndices.arraySync().map(index => brands[index]);
    const locationIndices = tf.randomUniform([numRows], 0, stores.length, 'int32');
    const locationLabels = locationIndices.arraySync().map(index => stores[index]);

    const bestBeforeDates = tf.randomUniform([numRows], 0, 365 * 5, 'int32');
    const baseDate = new Date();
    const bestBeforeDatesFormatted = bestBeforeDates.arraySync().map(days => {
        const date = new Date(baseDate);
        date.setDate(baseDate.getDate() + days);
        return date.toISOString().split('T')[0];
    });

    // Generate price values based on weights (with minor variance)
    const weights = tf.randomUniform([numRows], wieghtRangeGrams.min, wieghtRangeGrams.max, 'float32');

    const pricesTemp = weights.div(120);
    const priceMean = tf.mean(pricesTemp).arraySync(); // Mean weight
    const priceStd = tf.moments(pricesTemp).variance.sqrt().arraySync();
    const priceNoise = tf.randomNormal([numRows], priceMean, priceStd, 'float32');
    let prices = tf.tensor1d(pricesTemp.add(priceMean).add(priceNoise).arraySync());

    // Apply logic and transform each number
    prices = tf.tensor1d(prices.dataSync().map((value, index) => {
        const brandLabel = brandLabels[index];
        let newPrice = value;
        switch (brandLabel) {
            case 'Unbranded':
                newPrice *= 0.82;
                break;

            case 'Royal Feline':
                newPrice *= 1.12;
                newPrice += 10;
                break;

            case 'Whiskers and Paws':
                newPrice *= 1.45;
                newPrice += 25;
                break;

            case 'Meowarf':
                newPrice *= 1.60;
                newPrice += 50;
                break;

            default:
                throw new Error(brandLabel);
        }
        return newPrice;
    }));


    const data = {
        weight: weights.arraySync(),
        brand: brandLabels,
        storeLocation: locationLabels,
        bestBeforeDate: bestBeforeDatesFormatted,
        priceUSD: prices.arraySync(),
    };

    return data;
};
...

console.log('Generating Synth Data');
        const catFoodDataset = await generateData(MAX_DS_X);

Using tensorflow normal and uniform based distribution function, we add randomness to our data but we need an element of correlation between the features, so we can try to pin the price on weight.

Once the data is created, we can do some basic javascript-powered EDA:

/**
 * Does some EDA on the given data.
 * 
 * @param {*} {
 *       weight: aray of floats,
 *       brand: array of label strings,
 *       storeLocation: array of label strings,
 *       bestBeforeDate: array of iso dates,
 *       priceUSD: aray of floats,
 *   }; 
 */
function dataEDA(data) {
    function _countUniqueLabels(labels) {
        return labels.reduce((counts, label) => {
            counts[label] = (counts[label] || 0) + 1;
            return counts;
        }, {});
    }

    const { weight, brand, storeLocation, bestBeforeDate, priceUSD } = data;

    // Summary statistics
    const weightMean = tf.mean(weight);
    const weightStd = tf.moments(weight).variance.sqrt().arraySync();
    const priceMean = tf.mean(priceUSD);
    const priceStd = tf.moments(priceUSD).variance.sqrt().arraySync();

    console.log('Weight Summary:');
    console.log(`Mean: ${weightMean.dataSync()[0].toFixed(2)}`);
    console.log(`Standard Deviation: ${weightStd}`);
    console.log('\nPrice Summary:');
    console.log(`Mean: ${priceMean.dataSync()[0].toFixed(2)}`);
    console.log(`Standard Deviation: ${priceStd}`);

    // Histogram of weights
    const weightData = [{ x: weight, type: 'histogram' }];
    const weightLayout = { title: 'Weight Distribution' };
    plot(weightData, weightLayout);

    // Scatter plot of weight vs. price
    const scatterData = [
        { x: weight, y: priceUSD, mode: 'markers', type: 'scatter' },
    ];
    const scatterLayout = { title: 'Weight vs. Price', xaxis: { title: 'Weight' }, yaxis: { title: 'Price' } };
    plot(scatterData, scatterLayout);

    // Box plot of price
    const priceData = [{ y: priceUSD, type: 'box' }];
    const priceLayout = { title: 'Price Distribution' };
    plot(priceData, priceLayout);

    // Bar chart of a categorical feature
    const brandCounts = _countUniqueLabels(brand);
    const locCounts = _countUniqueLabels(storeLocation);

    const brandLabels = Object.keys(brandCounts);
    const locLabels = Object.keys(locCounts);

    const brandData = brandLabels.map(label => brandCounts[label]);
    const locData = locLabels.map(label => locCounts[label]);

    const brandBar = [{ x: brandLabels, y: brandData, type: 'bar' }];
    const locBar = [{ x: locLabels, y: locData, type: 'bar' }];

    const brandLayout = { title: 'Brand Distribution' };
    const locLayout = { title: 'Location Distribution' };

    plot(locBar, brandLayout);
    plot(brandBar, locLayout);

    // Line chart of price over time (Best before date)
    const priceOverTime = bestBeforeDate.map((date, index) => ({ x: date, y: priceUSD[index] }));
    priceOverTime.sort((a, b) => a.x - b.x); // Sort by date in ascending order
    const lineData = [{ x: priceOverTime.map(entry => entry.x), y: priceOverTime.map(entry => entry.y), type: 'scatter' }];
    const lineLayout = { title: 'Price Over Time', xaxis: { type: 'date' }, yaxis: { title: 'Price' } };
    plot(lineData, lineLayout);
}
...
 await dataEDA(catFoodDataset); // For EDA only.

This library nodeplotlib has been created to spin up a server and visualize the data as if we were on a notebook:

From the graphs above, the best-before-date and storeLocation provide no value and should be dropped from the features. Price, brand and wieght have correlation.

Let's create the training splits:

/**
 * Cleans, nromalizes and drops irrelavant data. Then splits the data into train, validate, test sets.
 * 
 * @param {*} data 
 * @param {*} trainRatio 
 * @param {*} testRatio 
 * @param {*} valRatio 
 * @returns {Object} of: {
 *      trainData: {Tensor},
 *      testData: {Tensor},
 *      validationData: {Tensor}
 *   }
 */
function cleanTrainSpitData(data, trainRatio = 0.7, testRatio = 0.1, valRatio = 0.2) {

    /**
     * local function to noramlize a range, will save the mins and maxs to a global cache to be used in a prediction.
     * 
     * @see MINIMUMS
     * @returns {Array[*]} The normalized range.
     */
    function _normalizeFeature(feature, featureName, metaData = DATASETS_METADATA) {
        const min = tf.min(feature);
        const max = tf.max(feature);
        const normalizedFeature = tf.div(tf.sub(feature, min), tf.sub(max, min));

        // We will need to normalize input data with the same constants.
        metaData[featureName] = { min: min, max: max };

        return normalizedFeature;
    }

    // Remove irrelevant features (date in this case) and NaNs
    const cleanedAndNormalizedData = { weight: [], brandOHE: [], storeOHE: [], priceUSD: [] };

    for (let i = 0; i < data.weight.length; i++) {
        // Handle missing values if needed
        if (!isNaN(data.weight[i]) && !isNaN(data.priceUSD[i]) && (data.brand[i])) {
            cleanedAndNormalizedData.weight.push(data.weight[i]);
            cleanedAndNormalizedData.brandOHE.push(data.brand[i]);
            cleanedAndNormalizedData.priceUSD.push(data.priceUSD[i]);
        }
    }

    // Normalize the Data
    cleanedAndNormalizedData.weight = _normalizeFeature(cleanedAndNormalizedData.weight, 'weight');
    cleanedAndNormalizedData.brandOHE = oneHotEncode(cleanedAndNormalizedData.brandOHE);
    cleanedAndNormalizedData.priceUSD = _normalizeFeature(cleanedAndNormalizedData.priceUSD, 'priceUSD');

    const { weight, brandOHE, storeOHE, priceUSD } = cleanedAndNormalizedData;
    const totalSize = weight.shape[0];
    const trainIndex = Math.floor(trainRatio * totalSize);
    const valSize = Math.floor(valRatio * totalSize);
    const testIndex = trainIndex + valSize;

    const trainData = {
        weight: weight.slice([0], [trainIndex]),
        brandOHE: brandOHE.slice([0], [trainIndex]),
        priceUSD: priceUSD.slice([0], [trainIndex])
    };
    const validationData = {
        weight: weight.slice([trainIndex], [valSize]),
        brandOHE: brandOHE.slice([trainIndex], [valSize]),
        priceUSD: priceUSD.slice([trainIndex], [valSize])
    };
    const testData = {
        weight: weight.slice([testIndex]),
        brandOHE: brandOHE.slice([testIndex]),
        priceUSD: priceUSD.slice([testIndex])
    };

    return {
        trainData: trainData,
        testData: testData,
        validationData: validationData
    };
}
...
console.log('Clean and Split Data');
const datasets = await cleanTrainSpitData(catFoodDataset);

And build the model:

/**
 * 
 * @param {*} trainData 
 * @param {*} validationData 
 * @param {*} testData 
 * @param {*} numEpochs 
 */
async function buildLinearRegressionModel(trainData, validationData, testData, epochs) {
    const { weight, brandOHE, storeOHE, priceUSD } = trainData;
    const trainX = tf.tensor2d(
        tf.concat([
            tf.tensor2d(weight.arraySync(), [weight.arraySync().length, 1]),
            tf.tensor2d(brandOHE.arraySync())], 1)
            .arraySync());
    const trainY = tf.tensor1d(priceUSD.arraySync());

    console.log('trainX shape:', trainX.shape);
    console.log('trainY shape:', trainY.shape);

    const model = tf.sequential();
    model.add(tf.layers.dense({
        units: trainX.shape[0],
        activation: 'sigmoid',
        inputShape: [trainX.shape[1]]
    }));
    model.add(tf.layers.dense({ units: trainX.shape[0] / 2, activation: 'sigmoid' }));
    model.add(tf.layers.dense({ units: 1, activation: 'linear' }));
    model.compile({
        optimizer: 'adam',
        loss: 'meanSquaredError',
        metrics: ['accuracy']
    });

    const history = await model.fit(trainX, trainY, { validationData: validationData, epochs: epochs });

    console.log("Model trained and fitted!")

    const { weight: testWeight, brandOHE: testBrandOHE, storeOHE: testStoreOHE, priceUSD: testPriceUSD } = testData;

    const testX = tf.tensor2d(
        tf.concat([
            tf.tensor2d(testWeight.arraySync(), [testWeight.arraySync().length, 1]),
            tf.tensor2d(testBrandOHE.arraySync())], 1)
            .arraySync());
    const testY = tf.tensor1d(testPriceUSD.arraySync());

    console.log('testX shape:', testX.shape);
    console.log('testY shape:', testY.shape);

    const testPredictions = await model.predict(testX);

    return {
        model: model,
        predictions: testPredictions,
        trueValues: testY,
        history: history.history
    };
}
...
console.log('Build Model');
const modelMetaData = await buildLinearRegressionModel(datasets.trainData, datasets.validationData, datasets.trainData, EPOCHS);

Finishing with an evaluation:

/**
 * 
 * @param {*} model 
 * @param {*} testData 
 */
async function modelMetrics(modelMetaData) {
    const accuracy = tf.metrics.binaryAccuracy(modelMetaData.trueValues, modelMetaData.predictions);
    const error = tf.metrics.meanAbsoluteError(modelMetaData.trueValues, modelMetaData.predictions);

    console.log(`Accuracy: ${accuracy.arraySync()[accuracy.arraySync().length - 1] * 100}%`);
    console.log(`Error: ${error.arraySync()[error.arraySync().length - 1] * 100}%`);

    console.log(`Loss: ${[modelMetaData.history.loss.length - 1]}%`);
}
...
console.log('Get Model Metrics');
await modelMetrics(modelMetaData, datasets.trainData);

Which give us these results:

Yikes! not the best results. Nonetheless, we trained this model on unrealistic data. Garbage-in-garbage-out.

Warm Up that API

When you have a model on a serverless setup, it's always good to warm it up, to cache the layers' wieghts.

We will do this with the loadModel function:

/**
 * Loads meta data and model.
 * 
 * Once loaded, warm up model with sample prediciton.
 */
function loadModel() {
    fs.readFile(`${FUNCTION_MODEL_PATH}/meta.json`, (err, data) => {
        if (err) throw err;

        logger.info(`Model metadata loaded ${data}`);

        DATASETS_METADATA = JSON.parse(data);

        const brand = oneHotEncode([BRANDS[1]], BRANDS, 'brand');
        const wieghtInGrams = tf.tensor1d([5000]);
        const wieght = normalizeFeature(wieghtInGrams, 'weight');

        tf.loadLayersModel(tfn.io.fileSystem(`${FUNCTION_MODEL_PATH}/model.json`))
            .then((loadedModel) => {
                logger.info(`Model loaded ${loadedModel}, predicting sample: `);

                const x = tf.tensor2d(
                    tf.concat([
                        tf.tensor2d(wieght.arraySync(), [wieght.arraySync().length, 1]),
                        tf.tensor2d(brand.arraySync())], 1)
                        .arraySync());
                MODEL = loadedModel;

                return MODEL.predict(x);
            }).then((prediction) => {
                logger.info(`Predicted: '$${prediction}' for a brand: '${BRANDS[1]}' and weight: '${wieghtInGrams}g'`);
            });
    });

}

loadModel();

We must not forget to bring along the utility functions used in the test nodeJs script to normalize data and perform one oneHotEncoding, along with all the metadata with from the trained model: OHE data and min/max wieghts.

On the CLI, type emulators:run, and go to the function url (should be something like: http://127.0.0.1:5001/cloudfunctions-f2309/us-central1/catFoodPredictor).

Assuming the emulator in port 4000, if you access http://127.0.0.1:4000/logs you should see the warmup prediction:

Now we serve the model with the API:

/**
 * POST only, predicts the price of the catfood item.
 */
exports.catFoodPredictor = onRequest(async (req, res) => {
    if (req.method !== 'POST') {
        return res.status(400).json({ error: 'Invalid request method. Only POST requests are allowed.' });
    }

    const data = req.body;
    logger.info(`Received this: ${JSON.stringify(data)}`);


    await database.ref('telemetry').push({
        data: JSON.stringify(data),
        timestamp: Date.now(),
    });

    logger.info(`Received this: ${data.brand} and ${data.weight}`);

    const brand = oneHotEncode([data.brand], BRANDS, 'brand');
    const weightInGrams = tf.tensor1d([data.weight]);
    const weight = normalizeFeature(weightInGrams, 'weight');

    const x = tf.tensor2d(
        tf.concat([
            tf.tensor2d(weight.arraySync(), [weight.arraySync().length, 1]),
            tf.tensor2d(brand.arraySync())], 1)
            .arraySync());

    try {
        const prediciton = MODEL.predict(x).arraySync()[0];
        res.status(200).json({ prediciton: prediciton });

        logger.info(`Predicted this: ${JSON.stringify(prediciton)}`);
    }
    catch (err) {
        console.error('Error adding data:', error);
        res.status(500).json({ error: 'Something went wrong. Please try again later.' });
    }
});

Using POSTMAN, test the emulated function and you should see this result:

Finally we can launch to Firebase! Deploy the functions and the analytics database we setup as using the command:

firebase deploy

If we navigate to our google cloud dashboard and find the logs tab, we can see that the function loaded and the model has been warmed up:

Now the last, and real, postman test:

Predictions in your Pocket

With our successful deployment of the model to firebase, we want portability so we can take this intelligence to the pet store.

Here we will create a React Native app. We recommend having a read of our past article on how to build android apps here, it describes variious steps to install device SDKs, set up Android Studio and reeister the virtual devices on which we can work on.

Initialize the project:

npx react-native@latest init fairCatApp

CD to the newly created folder and test the app with npm run android (or npm start and select android in Metro) to see the welcome page on the virtual device.

Note that YARN is mentioned in other literature or within the project files - yarn is similar to npm.

Install the additional libraries for the input forms and POST request: npm install axios react-native-dropdown-picker.

Within the app, we will create a simple form, with a select for the catfood brands and a numeric counter for their weight in grams. Replace the welcome page in App.tsx with this code:

import React, { useState, FC } from 'react';
import {
  View,
  StyleSheet,
  TextInput,
  Text,
  Button,
  Image,
  Alert,
} from 'react-native';
import axios from 'axios';
import DropDownPicker from 'react-native-dropdown-picker';

const App: FC = () => {
  const DEFAULT_WEIGHT = DEFAULT_WEIGHT;
  const BRANDS: Array<Object> = [
    { label: 'Unbranded', value: 'Unbranded' },
    { label: 'Whiskers and Paws', value: 'Whiskers and Paws' },
    { label: 'Royal Feline', value: 'Royal Feline' },
    { label: 'Meowarf', value: 'Meowarf' },
  ];
  const [weight, setWeight] = useState('0');
  const [open, setOpen] = useState(false);
  const [brand, setBrand] = useState(BRANDS[0].value);
  const [brands, setBrands] = useState(BRANDS);
  const [prediction, setPrediction] = useState([]);

  /**
   * Submit Weight and Brand to firebase for a prediction.
   */
  const handleSubmit = () => {
    const data = {
      brand: brand,
      weight: weight,
    };

    axios
      .post(
        'https://catfoodpredictor-2526dyxuva-uc.a.run.app/catFoodPredictor',
        data,
        {
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
          },
        },
      )
      .then(response => response.data)
      .then(result => {
        setPrediction(result);
        Alert.alert(
          `Predicted: $${Number.parseFloat(result?.prediciton).toFixed(2)}`,
        );
      })
      .catch(err => {
        Alert.alert(`Error: ${err}`);
      });
  };
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require('./img/freeCatLogo.jpg')} />
      <Text style={styles.title}>fair Cat!</Text>

      <View style={styles.container}>
        <Text>Weight in Grams: </Text>
        <TextInput
          style={styles.input}
          label="Weight in Grams"
          value={weight}
          onChangeText={setWeight}
          keyboardType="numeric"
          inputMode="numeric"
        />
        <Text>Select Brand from dropdown: </Text>
        <DropDownPicker
          open={open}
          value={brand}
          items={brands}
          setOpen={setOpen}
          setValue={setBrand}
          setItems={setBrands}
        />
        {prediction?.length > 0 && (
          <Alert
            title="Prediction"
            message={prediction.join(', ')}
            onPress={() => {
              setPrediction([]);
            }}
          />
        )}
      </View>
      <View style={styles.button}>
        <Text>
          Selected Brand: [{brand}] and Quantity: [{weight}]g.
        </Text>
        <View style={{ padding: 10 }} />
        <Text>Submit for Prediction: </Text>
        <Button title="Predict Price" onPress={handleSubmit} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    width: 350,
    alignSelf: 'center',
  },
  button: {
    alignSelf: 'center',
  },
  input: {
    width: 320,
    borderColor: '#000',
    borderWidth: 1,
    borderRadius: 10,
    alignSelf: 'center',
    backgroundColor: '#fff',
    color: '#000',
  },
  image: {
    width: 100,
    height: 100,
    alignSelf: 'center',
    marginTop: 16,
  },
  title: {
    fontSize: 20,
    textAlign: 'center',
    marginTop: 8,
  },
});

export default App;

The TextInput component is for the wieghts, which will be translated to a number between 500 and 100000 grams and a custome element DropDownPicker to have a dropdown for the brands.
Axios is used to deliver a post request to the firebase function, and the result will be displayed on the App as a modal dialog with Alert.

Some challenges you might encounter will be: approving your SDK licences, having Metro running to allow android studio to connect the React app to your device, and if you are trying the app out of virtual devices the axios library might not perform any requests.

If all goes well, this is what you will see:

Conclusion

We explored the whole end-to-end of a datascience-powered mobile App stack (android only) with tensorflowJS.

We constructed a simple neural network to predict a continuous value, which is the price. This was tested on synthetic data and trained using a simple nodejs script, before being deployed to our firebase.
Then we bootstraped a lightweight ReactNative app, which calls our firebase function — and for some of you — installed the App on your real device.

Now you have an App that gives you the fair price of the catfood you buying. Your wallet and your cat will be much happier this year.

References

Github

Article and source code here is available on Github

Media

All media used (in the form of code or images) are either solely owned by me, acquired through licensing, or part of the Public Domain and granted use through Creative Commons License.