Neural Network Regression Example (tensorflow#111)

manrajgrover · caisq · commit fea6cfba26d2 · 2018-08-05T21:23:33.000-04:00
* Neural Network Regression: Base neural network regression completed
diff --git a/boston-housing/index.html b/boston-housing/index.html
@@ -23,15 +23,32 @@
     textarea {
       border: none;
       resize: none;
+      font-size: 20px;
+      text-align: center;
+    }
+    .container {
+      width: 80%;
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+    }
+    #plot {
+      width: auto;
+      height: auto;
     }
   </style>
 </head>
 
 <body>
-  <h3>TensorFlow.js: Train Multivariate Linear Regression with the Core API</h3>
-
-  <div id="plot"></div>
-  <textarea rows="3" cols="60" readonly="true" id="status">Loading data...</textarea>
+  <div class="container">
+    <h3>TensorFlow.js: Train Multivariate Regression with the Layers API</h3>
+    <div id="plot"></div>
+    <textarea rows="3" cols="60" readonly="true" id="status">Loading data...</textarea>
+    <div id="buttons">
+      <button id="simple-mlr">Train Linear Regressor</button>
+      <button id="nn-mlr">Train Neural Network Regressor</button>
+    </div>
+  </div>
   <script src="index.js"></script>
 </body>
 
diff --git a/boston-housing/index.js b/boston-housing/index.js
@@ -22,26 +22,58 @@ import * as ui from './ui';
 
 // Some hyperparameters for model training.
 const NUM_EPOCHS = 250;
-const BATCH_SIZE = 50;
+const BATCH_SIZE = 40;
 const LEARNING_RATE = 0.01;
 
 const data = new BostonHousingDataset();
-data.loadData().then(async () => {
+
+/**
+ * Builds and returns Linear Regression Model.
+ *
+ * @returns {tf.Sequential} The linear regression model.
+ */
+export const linearRegressionModel = () => {
+  const model = tf.sequential();
+  model.add(tf.layers.dense({inputShape: [data.numFeatures], units: 1}));
+
+  return model;
+};
+
+/**
+ * Builds and returns Multi Layer Perceptron Regression Model
+ * with 2 hidden layers, each with 10 units activated by sigmoid.
+ *
+ * @returns {tf.Sequential} The multi layer perceptron regression model.
+ */
+export const multiLayerPerceptronRegressionModel = () => {
+  const model = tf.sequential();
+  model.add(tf.layers.dense(
+      {inputShape: [data.numFeatures], units: 50, activation: 'sigmoid'}));
+  model.add(tf.layers.dense({units: 50, activation: 'sigmoid'}));
+  model.add(tf.layers.dense({units: 1}));
+
+  return model;
+};
+
+/**
+ * Fetches training and testing data, compiles `model`, trains the model
+ * using train data and runs model against test data.
+ *
+ * @param {tf.Sequential} model Model to be trained.
+ */
+export const run = async (model) => {
   await ui.updateStatus('Getting training and testing data...');
   const trainData = data.getTrainData();
   const testData = data.getTestData();
 
-  await ui.updateStatus('Building model...');
-  const model = tf.sequential();
-  model.add(tf.layers.dense({inputShape: [data.numFeatures], units: 1}));
-  model.compile({
-    optimizer: tf.train.sgd(LEARNING_RATE),
-    loss: 'meanSquaredError'
-  });
+  await ui.updateStatus('Compiling model...');
+
+  model.compile(
+      {optimizer: tf.train.sgd(LEARNING_RATE), loss: 'meanSquaredError'});
 
   let trainLoss;
   let valLoss;
-  await ui.updateStatus('Training starting...');
+  await ui.updateStatus('Starting training process...');
   await model.fit(trainData.data, trainData.target, {
     batchSize: BATCH_SIZE,
     epochs: NUM_EPOCHS,
@@ -69,4 +101,10 @@ data.loadData().then(async () => {
       `Final train-set loss: ${trainLoss.toFixed(4)}\n` +
       `Final validation-set loss: ${valLoss.toFixed(4)}\n` +
       `Test-set loss: ${testLoss.toFixed(4)}`);
-});
+};
+
+document.addEventListener('DOMContentLoaded', async () => {
+  await data.loadData();
+  await ui.updateStatus('Data loaded!');
+  await ui.setup();
+}, false);
diff --git a/boston-housing/ui.js b/boston-housing/ui.js
@@ -17,23 +17,34 @@
 
 import renderChart from 'vega-embed';
 
+import {linearRegressionModel, multiLayerPerceptronRegressionModel, run} from './index';
+
 const statusElement = document.getElementById('status');
 export const updateStatus = (message) => {
   statusElement.value = message;
 };
 
-const losses = [];
+export const setup = async () => {
+  const trainSimpleLinearRegression = document.getElementById('simple-mlr');
+  const trainNeuralNetworkLinearRegression = document.getElementById('nn-mlr');
+
+  trainSimpleLinearRegression.addEventListener('click', async (e) => {
+    const model = linearRegressionModel();
+    losses = [];
+    await run(model);
+  }, false);
+
+  trainNeuralNetworkLinearRegression.addEventListener('click', async (e) => {
+    const model = multiLayerPerceptronRegressionModel();
+    losses = [];
+    await run(model);
+  }, false);
+};
+
+let losses = [];
 export const plotData = async (epoch, trainLoss, valLoss) => {
-  losses.push({
-    'epoch': epoch,
-    'loss': trainLoss,
-    'split': 'Train Loss'
-  });
-  losses.push({
-    'epoch': epoch,
-    'loss': valLoss,
-    'split': 'Validation Loss'
-  });
+  losses.push({'epoch': epoch, 'loss': trainLoss, 'split': 'Train Loss'});
+  losses.push({'epoch': epoch, 'loss': valLoss, 'split': 'Validation Loss'});
 
   const spec = {
     '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
