House price prediction 2/4: Using Tensorflow.js, Vue.js and Javascript

A series about creating a model using Python and Tensorflow and then importing the model and making predictions using Javascript in a Vue.js application, above is the vid and below you will find some useful notes.

• Here, in part 2 of this series, I will take the model, the data for pre and post processing and finally predict using Vue.js.
  In the first post, called House price prediction 1/4: Using Keras/Tensorflow and python, I talked about how to create a model in python, pre-process a dataset I've already created, train a model, post-process, predict, and finally about creating different files for sharing some information about the data for use on the second part.
  Then in part 3 I will show how does one hot encoding works.
  And finally in part 4 normalizing the inputs and its importance.
  If you want to see a simpler model and how it integrates with a javascript application using Tensorflow.js and Vue.js you can check my previous post: How to import a Keras model into a Vue.js application using Tensorflow.Js, where I also show how to publish the web site into Github Pages.

1. 1.

   Pre-reqs

   • Have node.js installed
     Have the code for the previous post: Python Real Estate - Github
2. 2.

   Loading the data generated in python

   •   
     import neighborhoods from '~/static/shared/neighborhoods.json'
       
     

       neighborhoods.json
       ["envigado", "envigado abadia", "envigado aburra sur", "envigado alcal", "envigado alcala", "envigado alquerias de san isidro", "envigado alto de las flores", "envigado alto de misael", "envigado altos de misael", "envigado andalucia", "envigado antillas", "envigado av poblado", "envigado b margaritas", "envigado barrio mesa", "envigado barrio obrero"
     

       
     import meanX from '~/static/shared/scaler-mean-x.json'
     import varX from '~/static/shared/scaler-var-x.json'
       
     

       scaler-mean-x.json
       [114.6902816399287, 3.4014260249554367, 2.3436720142602496, 0.5928698752228164]
     
       scaler-var-x.json
       [572.865809011588, 0.37646855468812057, 0.2255615608745523, 0.4053680561513214]
     

       
     import meanY from '~/static/shared/scaler-mean-y.json'
     import varY from '~/static/shared/scaler-var-y.json'
       
     

       scaler-mean-y.json
       [281340671.3761141]
     
       scaler-var-y.json
       [3091863947148531.5]
     

3. 3.

   The Html and Data Object for getting the inputs for the model

   •   
     <div class="train-controls">
       <h2 class="section-header">House/Apartment parameters</h2>
     
       <div>
         <div class="col-sm-12">
           <div class="col-sm-6 field-label">Size (mts)</div>
           <input class="col-sm-6 field field-x"
                 v-model="size"
                 type="number">
     
           <div class="col-sm-6 field-label">Rooms</div>
           <input class="col-sm-6 field field-x"
                 v-model="rooms"
                 type="number">
     
           <div class="col-sm-6 field-label">Baths</div>
           <input class="col-sm-6 field field-x"
                 v-model="baths"
                 type="number">
     
           <div class="col-sm-6 field-label">Parking</div>
           <input class="col-sm-6 field field-x"
                 v-model="parking"
                 type="number">
     
           <div class="col-sm-6 field-label">Neighborhood</div>
           <select class="col-sm-6 neighborhood field" v-model="neighborhood">
             <option disabled value="">Please select one</option>
             <option v-for="(item, index) in neighborhoods" v-bind:key="index" v-html="item" :value="index"></option>
           </select>
         </div>
       </div>
     </div>
     
     <div class="predict-controls">
       <h2 class="section-header">Predicting</h2>
       <div class="col-sm-6 field-label">Predicted Value</div>
       <div class="col-sm-6 element field" v-html="predictedValue"></div>
       <button class="col-sm-12 element button--green" v-on:click="predict" :disabled="!modelReady">Predict</button>
     </div>
     
       
     

       
       data() {
         return {
           modelReady: false,
           size:180,
           rooms: 5,
           baths: 2,
           parking: 0,
           neighborhood: 0,
           predictedValue:'Model not loaded!',
           selected: '',
           neighborhoods: neighborhoods
         }
       },
       
     

4. 4.

   Methods for initializing the model

   • Initialize everything when the vue.js component is mounted

       
       mounted() {
         this.initializeScaler();
     
         this.initializeOneHotEncoder();
     
         this.loadModel();
       },
       
     

     Load the Keras Model

       
       methods: {
         ...
         async loadModel() {
           this.model = await tf.loadLayersModel('shared/model/model.json');
     
           this.modelReady = true;
           this.predictedValue = 'Ready for making predictions';
         },
       
     

5. 5.

   Methods for pre/post processing the data

   • These are the methods needed for pre or post processing the data

       
         initializeOneHotEncoder() {
           ...
         },
     
         scale(value, mean, deviation) {
           ...
         },
         unscale(value, mean, deviation) {
           ...
         },
       
     

     The methods below are in charge of defining which pre or post processing methods to call and on which features

       
     
         //Prediction
         preProcessInputs(inputs, neighborhood) {
           let modelInput = tf.tensor1d(inputs);
           let neighborhoodTensor = tf.tensor1d(this.dictionary[this.neighborhoods[neighborhood]]);
     
           modelInput = this.scale(modelInput, this.meanX, this.deviationX);
     
           modelInput = modelInput.concat(neighborhoodTensor)
                                  .expandDims();
     
           return modelInput;
         },
       
     

       
     
         postProcessResults(outputs) {
           return this.unscale(outputs, this.meanY, this.deviationY);
         },
       
     

6. 6.

   Making predictions

   •   
     
         ...
     
         predict() {
           //Transform Inputs
           let modelInput = this.preProcessInputs([
                                                    parseFloat(this.size),
                                                    parseFloat(this.rooms),
                                                    parseFloat(this.baths),
                                                    parseFloat(this.parking)
                                                  ], this.neighborhood);
     
           //Get prediction
           const prediction = this.model.predict(modelInput);
     
           //Transform Outputs
           this.predictedValue = Math.ceil(this.postProcessResults(prediction).dataSync()[0]);
     
           console.log(this.neighborhoods[this.neighborhood], prediction.dataSync()[0], this.predictedValue);
         }
       
     

7. 7.

   Add the House price prediction web page using tensorflow.js and vue.js into github pages

   • Generate the tensorflow.js app into a subfolder

       
     npm run generate:use-subfolder
       
     

   • To make it a bit easier clone your repo into another folder

       
     git clone http://YOUR-REPO.git REPO-NAME-gh-pages
       
     

   • Create a branch named gh-pages that is not connected to the master branch

       
     git checkout --orphan gh-pages
       
     

   • Delete everything and copy the contents of the dist folder here
   • Finally add all the files and commit and push the changes

       
     git add -A
       
     

       
     git commit -m "gh pages branch"
       
     

       
     git push origin gh-pages
       
     

   • Go into your account

     https://YOUR-USERNAME.github.io/YOUR-REPO/
     

8. 8.

   Resources

   Github link for the code

   Live Demo House Price Prediction Application Page

   tf.Tensor.expandDims

   Concatenate a list of tf.Tensors

   Load a model composed of Layer objects, including its topology and optionally weights

   Asynchronously downloads the values from the tf.Tensor

   Synchronously downloads the values from the tf.Tensor

   Tensorflow.js

   TensorFlow Docker Images

   Tensorflow.js Converter

   One Hot Encoding Enumerations