Skip to content

Commit

Permalink
Baseball Model Cleanup (tensorflow#216)
Browse files Browse the repository at this point in the history
* save

* save

* save

* Pitch type model.

* Add utils.

* save

* Cleanup

* Rename

* save

* save

* save

* Actually train

* More cleanup

* Make training data all work!

* Drop all TS

* Drop all TS

* save

* save

* Dev-server config

* Save

* Fix title

* save argparser

* Cleanup

* save

* Save

* save

* save
  • Loading branch information
nkreeger authored Jan 23, 2019
1 parent 1992ff6 commit a6b9605
Show file tree
Hide file tree
Showing 27 changed files with 1,081 additions and 2,706 deletions.
61 changes: 26 additions & 35 deletions baseball-node/src/client/app.ts → baseball-node/client.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* @license
* Copyright 2018 Google LLC. All Rights Reserved.
* Copyright 2019 Google LLC. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
Expand All @@ -15,45 +15,37 @@
* =============================================================================
*/

import * as socketioClient from 'socket.io-client';
import Vue from 'vue';
import {AccuracyPerClass} from '../types';
import io from 'socket.io-client';
const evalTestButton = document.getElementById('eval-test-button');

const SOCKET = 'http://localhost:8001/';
const socket =
io('http://localhost:8001',
{reconnectionDelay: 300, reconnectionDelayMax: 300});

// tslint:disable-next-line:no-default-export
export default Vue.extend({
mounted: () => {
const liveButton = document.getElementById('live-button');
const socket = socketioClient(
SOCKET, {reconnectionDelay: 300, reconnectionDelayMax: 300});
socket.connect();

socket.on('connect', () => {
liveButton.style.display = 'block';
liveButton.textContent = 'Test Live';
});
const BAR_WIDTH_PX = 300;

socket.on('accuracyPerClass', (accPerClass: AccuracyPerClass) => {
plotAccuracyPerClass(accPerClass);
});
evalTestButton.onclick = () => {
evalTestButton.textContent = 'Loading...';
socket.emit('test_data', 'true');
};

socket.on('disconnect', () => {
liveButton.style.display = 'block';
document.getElementById('waiting-msg').style.display = 'block';
document.getElementById('table').style.display = 'none';
});
socket.on('connect', () => {
evalTestButton.style.display = 'block';
evalTestButton.textContent = 'Eval Test';
});

liveButton.onclick = () => {
liveButton.textContent = 'Loading...';
socket.emit('live_data', '' + true);
};
},
socket.on('accuracyPerClass', (accPerClass) => {
plotAccuracyPerClass(accPerClass);
});

const BAR_WIDTH_PX = 300;
socket.on('disconnect', () => {
evalTestButton.style.display = 'block';
document.getElementById('waiting-msg').style.display = 'block';
document.getElementById('table').style.display = 'none';
});

function plotAccuracyPerClass(accPerClass: AccuracyPerClass) {
function plotAccuracyPerClass(accPerClass) {
console.log(accPerClass);
document.getElementById('table').style.display = 'block';
document.getElementById('waiting-msg').style.display = 'none';

Expand Down Expand Up @@ -83,14 +75,13 @@ function plotAccuracyPerClass(accPerClass: AccuracyPerClass) {

plotScoreBar(scores.training, scoreContainer);
if (scores.validation) {
document.getElementById('live-button').style.display = 'none';
document.getElementById('eval-test-button').style.display = 'none';
plotScoreBar(scores.validation, scoreContainer, 'validation');
}
});
}

function plotScoreBar(
score: number, container: HTMLDivElement, className = '') {
function plotScoreBar(score, container, className = '') {
const scoreDiv = document.createElement('div');
scoreDiv.className = 'score ' + className;
scoreDiv.style.width = (score * BAR_WIDTH_PX) + 'px';
Expand Down
97 changes: 97 additions & 0 deletions baseball-node/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!doctype html>
<html>
<head>
<title>Pitch Training Accuracy</title>
</head>
<body>
<h3 id="waiting-msg">Waiting for server...</h3>
<div id="table">
<h2 style="text-align:center;">Pitch accuracy (%)</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>Live set</div>
</div>
</div>
<div id="table-rows"></div>
<button id="eval-test-button">Eval Test</button>
</div>
<script src="dist/bundle.js"></script>
<style>
#table {
width: 660px;
display: none;
}
#table-rows {
border-right: 2px solid #bbb;
}
#table .row {
display: flex;
align-items: center;
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;
font-size: 24px;
color: #5f6368;
line-height: 24px;
font-weight: 500;
}
#table .label {
margin-right: 20px;
width: 360px;
text-align: right;
}
#table .score {
background-color: #0277bd;
height: 30px;
text-align: right;
line-height: 30px;
color: white;
padding-right: 10px;
box-sizing: border-box;
}
#table .score.validation {
background-color: #ef6c00;
}

html,
body {
font-family: Roboto, sans-serif;
color: #5f6368;
}

body {
background-color: rgb(248, 249, 250);
}

#accuracyCanvas > div {
display: none;
}

#eval-test-button {
padding: 10px;
font-size: 24px;
}
</style>
</body>
</html>
36 changes: 9 additions & 27 deletions baseball-node/package.json
Original file line number Diff line number Diff line change
@@ -1,41 +1,23 @@
{
"name": "tfjs-examples-baseball-node",
"version": "0.1.0",
"version": "0.2.0",
"description": "Deep learning models for classifying baseball metrics",
"scripts": {
"build": "tsc",
"build-client": "webpack",
"link-local": "yalc link",
"download-data": "./scripts/download-data.sh",
"start-client": "webpack-dev-server --content-base src/client",
"start-server": "ts-node src/server/server.ts",
"train-pitch-model": "ts-node src/train/pitch-model.ts",
"train-strike-model": "ts-node src/train/strike-model.ts"
"start-client": "webpack-dev-server",
"start-server": "node server.js"
},
"license": "Apache-2.0",
"devDependencies": {
"@types/socket.io": "~1.4.33",
"@types/socket.io-client": "~1.4.32",
"clang-format": "~1.2.3",
"css-loader": "~0.28.11",
"file-loader": "~1.1.11",
"mkdirp": "~0.5.1",
"ts-loader": "~4.2.0",
"ts-node": "~6.0.2",
"tslint": "~5.9.1",
"typescript": "~2.8.3",
"vue-loader": "~14.2.2",
"vue-template-compiler": "~2.5.16",
"webpack": "~4.16.5",
"webpack-cli": "~3.1.0",
"webpack-dev-server": "~3.1.5",
"yalc": "~1.0.0-pre.22"
"webpack": "~4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "~3.1.14"
},
"dependencies": {
"@tensorflow/tfjs-node": "^0.2.1",
"baseball-pitchfx-types": "~0.0.4",
"node-simple-timer": "~0.0.1",
"socket.io": "~2.1.0",
"vue": "~2.5.16"
"@tensorflow/tfjs-node": "^0.2.3",
"argparse": "^1.0.10",
"socket.io": "~2.2.0"
}
}
Loading

0 comments on commit a6b9605

Please sign in to comment.