Ir al contenido principal

How to import a Keras model into a Vue.js application using Tensorflow.Js

In this Tensorflow.js tutorial I will show how to create a really simple model using Keras, then convert the model and import it into a Vue.js app using tensorflow.js. Above is the vid and below you will find some of the steps followed.
  • There are two projects as show in the video, one written in python that trains the model using Keras, Tensorflow and other libraries. In that project there is also a dockerfile for the tensorflowjs_converter that will be used for converting the model for later use inside the javascript application.

  • And then there is a vue.js project that was created using the Tensorflow.js + Vue.js Starter Template that already has TF.js configured (If you want to see how I created that application you can read the Creating a Tensorflow.js Vue.js Simple Application In Javascript post plus video!).

  • Below are the most important parts from the video:

  1. 1.


    • You need Anaconda with Keras and Tensorflow installed
    • Also node.js installed
      And docker installed (Optional!)
  2. 2.

    Keras/Tensorflow Python project

    • So first you need a model, in this case let's say that you created a model using Keras, you would then need to save it and finally transform it.
    • Create the model
      #%% Create the model
      def build_model(x_size, y_size):
          t_model = Sequential()
          t_model.add(Dense(x_size, input_shape=(x_size,)))
      model = build_model(X_train.shape[1], y_train.shape[1])
    • Train the model
      history =, y_train,
          validation_data=(X_test, y_test),
    • And save the model
  3. 3.

    Convert the model using the tfjs Converter

    • If you have Docker installed, first build the image
      docker build -t tf-converter .
    • And finally use the tensorflow.js converter container giving it the path to the current keras model and the path for the converted model
      docker run -it --rm --name tf-converter -v "$(pwd)":/workdir tf-converter
                                            --input_format keras \
                                            ./model/-scaled-categorical/model.h5 \
    • If you don't have docker :(, you first need to install tensorflow.js
      pip install tensorflowjs
    • And then as before use the tensorflowjs_converter command
      tensorflowjs_converter --input_format keras \
                             ./model/-scaled-categorical/model.h5 \
  4. 4.

    Vue.js + Tensorflow Javascript project

    • Load the model
      that.model = await tf.loadModel('/shared/model/model.json');
    • And then you can just take the inputs, transform them into a tensor and then predict the output
          predictValue(inputs) {
            const tfarray = tf.tensor2d(inputs, [1, inputs.length]);
            const prediction = this.model.predict(tfarray);
            return prediction.get(0, 0);
  5. 5.


Entradas populares de este blog

Creating a Mongo replicaset using docker: Mongo replicaset + Nodejs + Docker Compose

This is a Docker tutorial for creating a Mongo replica set using docker compose and also a couple more containers to experiment with the replica set, above is the vid and below you will find some of the steps followed.
StepsPre-reqsHave node.js installedAnd docker installed (make sure you have docker-compose as well)Create a container for defining configurations for a mongo instanceCreate a container for setting up the replica setCreate a simple node app using expressjs and mongoose (A modified version from the previous video)Create a docker-compose file with the mongo and setup containers and two additional containers for experimenting with the replica setBuild, Run and experiment with your new containers Create a dockerfile for the first mongo container (not really needed but you could configure more stuff if needed)Include container with mongo preinstalled: FROM mongoCreate default/working directory: WORKDIR /usr/src/configsCopy mongo's configurations file into the container

Creating a Docker container for a NodeJs application: Express + Mongo + Docker Compose

This is a Docker tutorial for creating a NodeJs container using expressjs and mongoose, above is the vid and below you will find the steps followed.
StepsPre-reqsHave node.js installedAnd docker installed (make sure you have docker-compose as well)Create an simple node app using expressjs and mongooseModify your container and create a docker-compose fileBuild and Run your new container Create your simple node appInitialize the node appnpm initInstall the dependencies for our appnpm install --save express mongoose Create the database.jsCreate the index.js Create a dockerfileInclude container with node preinstalled: FROM nodeCreate default/working directory: WORKDIR /usr/src/appCopy package.json to workdir and install dependencies (which we will need in this case😊): COPY package.json .RUN npm install Copy the rest of the app (just the index.js file in this case)COPY . .Expose the port required for reaching our expressjs appEXPOSE 3000Add a command to run when this container is star…

Creating a tensorflow.js + vue.js simple application in javascript

This is a Tensorflow.js tutorial for creating a simple application using Vue.js, above is the vid and below you will find some of the steps followed. Steps Pre-reqs Have node.js installed Create the Vue.js application using nuxt.js Add support for tensorflow.js in vue.js and add a simple model Add the simple tensorflow.js model using vue.js into github pages Create the Vue.js application using nuxt.js Install vue.js cli npm install -g vue-cli Create a base Vue.js app using the starter kit from Nuxt vue init nuxt-community/starter-template simple-vue-tensorflow Start the dev server npm run dev Create empty component components/TensorflowExample.vue Add the component into the page pages/index.vue …