Ir al contenido principal

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
  • 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

Add support for tensorflow.js in vue.js and add a simple model

  • Install tensorflow.js into the vue.js app
    • npm install --save @tensorflow/tfjs
  • Add the library into the vendor property on the nuxt.config file
  • Add the fields, simple model and css into the TensorflowExample component

Add the simple tensorflow.js model using vue.js into github pages

  • Add support for using subfolders at the start of the nuxt.config file
  • Install cross env for helping us configure the app for generating the html using subfolders
    • npm install cross-env --save-dev
  • Generate the tensorflow.js app into a subfolder
    • npm run generate:use-subfolder
  • Create a branch named gh-pages that is not connected to the master branch
    • git checkout --orphan gh-pages
    • git add -A
    • git commit -m "gh pages branch"
    • git push origin gh-pages

Template using tensorflow.js

  • For creating an application using tensorflow that is also configured for github pages
    • vue init drginm/tensorflow-js-vuejs-starter-template my-simple-vue-tensorflow-project

Resources

Entradas populares de este blog

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 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
C…