Add validation score to the chart (#74)

* save

* save

Author: dsmilkov

baseball-node/.vscode/settings.json

@@ -0,0 +1,27 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "search.exclude": {
+    "**/node_modules": true,
+    "dist/": true,
+    "**/yarn.lock": true
+  },
+  "files.trimTrailingWhitespace": true,
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "[javascript]": {
+    "editor.formatOnSave": true
+  },
+
+  "tslint.enable": true,
+  "tslint.run": "onType",
+  "tslint.configFile": "tslint.json",
+  "[typescript]": {
+    "editor.formatOnSave": true
+  },
+
+  "clang-format.style": "Google",
+  "files.insertFinalNewline": true,
+  "editor.detectIndentation": false,
+  "editor.wrappingIndent": "none",
+  "clang-format.executable": "${workspaceRoot}/node_modules/.bin/clang-format"
+}

baseball-node/.vscode/tasks.json

@@ -0,0 +1,27 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+      {
+        "command": "yarn",
+        "label": "lint",
+        "type": "shell",
+        "args": [
+          "lint"
+        ],
+        "problemMatcher": {
+          "base": "$tslint5",
+          "owner": "tslint-type-checked",
+          "fileLocation": "absolute"
+        }
+      },
+      {
+        "command": "yarn",
+        "label": "build",
+        "type": "shell",
+        "args": ["build", "--pretty", "false"],
+        "problemMatcher": [
+          "$tsc"
+        ]
+      }
+    ]
+  }

baseball-node/src/abstract-pitch-model.ts

@@ -16,7 +16,6 @@
  */
 
 import * as tf from '@tensorflow/tfjs';
-
 import {PitchData, PitchDataBatch, PitchTrainFields} from './pitch-data';
 import {TrainProgress} from './types';
 
@@ -73,4 +72,4 @@ export abstract class PitchModel {
     });
     this.totalTrainSteps++;
   }
-}
+}

baseball-node/src/client/App.vue

@@ -15,18 +15,49 @@ limitations under the License.
 
 <template>
   <div class="container content">
-    <div id="table"></div>
+    <div id="table">
+      <h2 style="text-align:center;">Accuracy per pitch type (%)</h2>
+      <div id="legend">
+        <div class="legend-item">
+          <div class="score"></div>
+          <div>Train set</div>
+        </div>
+        <div class="legend-item">
+          <div class="score validation"></div>
+          <div>Test set</div>
+        </div>
+      </div>
+      <div id="table-rows"></div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" src="./app.ts"></script>
 
 <style>
+#table {
+  border-right: 2px solid #bbb;
+  width: 660px;
+}
 #table .row {
   display: flex;
   align-items: center;
-  margin: 5px 0;
+  margin: 25px 0;
+}
+#legend {
+  position: absolute;
+}
+.legend-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
 }
+
+.legend-item .score {
+  width: 30px;
+  margin-right: 10px;
+}
+
 .label {
   text-align: center;
   font-family: "Google Sans", sans-serif;
@@ -37,26 +68,26 @@ limitations under the License.
 }
 #table .label {
   margin-right: 20px;
-  width: 300px;
+  width: 360px;
   text-align: right;
 }
 #table .score {
-  background-color: #999;
+  background-color: #0277bd;
   height: 30px;
   text-align: right;
   line-height: 30px;
   color: white;
   padding-right: 10px;
   box-sizing: border-box;
 }
-
-#table .score-container {
-  border-right: 1px solid black;
+#table .score.validation {
+  background-color: #ef6c00;
 }
 
 html,
 body {
   font-family: Roboto, sans-serif;
+  color: #5f6368;
 }
 
 body {

baseball-node/src/client/app.ts

@@ -17,15 +17,13 @@
 
 import * as socketioClient from 'socket.io-client';
 import Vue from 'vue';
-
 import {AccuracyPerClass} from '../types';
 
 const SOCKET = 'http://localhost:8001/';
 
 // tslint:disable-next-line:no-default-export
 export default Vue.extend({
-  // tslint:disable-next-line:object-literal-shorthand
-  mounted: function() {
+  mounted: () => {
     const socket = socketioClient(
         SOCKET, {reconnectionDelay: 300, reconnectionDelayMax: 300});
     socket.connect();
@@ -42,13 +40,14 @@ export default Vue.extend({
   }
 });
 
+const BAR_WIDTH_PX = 300;
+
 function plotAccuracyPerClass(accPerClass: AccuracyPerClass) {
-  const table = document.getElementById('table');
+  const table = document.getElementById('table-rows');
   table.innerHTML = '';
 
-  const BAR_WIDTH_PX = 300;
-
   for (const label in accPerClass) {
+    const scores = accPerClass[label];
     // Row.
     const rowDiv = document.createElement('div');
     rowDiv.className = 'row';
@@ -64,14 +63,20 @@ function plotAccuracyPerClass(accPerClass: AccuracyPerClass) {
     const scoreContainer = document.createElement('div');
     scoreContainer.className = 'score-container';
     scoreContainer.style.width = BAR_WIDTH_PX + 'px';
-
-    const scoreDiv = document.createElement('div');
-    scoreDiv.className = 'score';
-    const score = accPerClass[label].training;
-    scoreDiv.style.width = (score * BAR_WIDTH_PX) + 'px';
-    scoreDiv.innerHTML = (score * 100).toFixed(1) + '%';
-
-    scoreContainer.appendChild(scoreDiv);
     rowDiv.appendChild(scoreContainer);
+
+    plotScoreBar(scores.training, scoreContainer);
+    if (scores.validation) {
+      plotScoreBar(scores.validation, scoreContainer, 'validation');
+    }
   }
 }
+
+function plotScoreBar(
+    score: number, container: HTMLDivElement, className = '') {
+  const scoreDiv = document.createElement('div');
+  scoreDiv.className = 'score ' + className;
+  scoreDiv.style.width = (score * BAR_WIDTH_PX) + 'px';
+  scoreDiv.innerHTML = (score * 100).toFixed(1);
+  container.appendChild(scoreDiv);
+}

baseball-node/src/client/client.ts

@@ -19,4 +19,4 @@ import Vue from 'vue';
 import App from './App.vue';
 
 // tslint:disable-next-line:no-unused-expression
-new Vue({el: '#app', render: h => h(App)});
+new Vue({el: '#app', render: h => h(App)});

baseball-node/src/server/server.ts

@@ -19,7 +19,6 @@ import {bindTensorFlowBackend} from '@tensorflow/tfjs-node';
 
 import {PitchTypeModel} from '../pitch-type-model';
 import {sleep} from '../utils';
-
 import {Socket} from './socket';
 
 const TIMEOUT_BETWEEN_EPOCHS_MS = 100;
@@ -42,4 +41,4 @@ async function run() {
   }
 }
 
-run();
+run();

baseball-node/yarn.lock

@@ -1246,7 +1246,7 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-clang-format@~1.2.3:
+clang-format@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/clang-format/-/clang-format-1.2.3.tgz#2763561aa7449c43737480f8df3a2b5b66e6cf37"
   dependencies: