Skip to content

Instantly share code, notes, and snippets.

@ganeshkumartk

ganeshkumartk/index.html

Created March 14, 2020 15:44
Show Gist options
  • Save ganeshkumartk/fef37bac89b86c23f703d2220f4e0d05 to your computer and use it in GitHub Desktop.
Save ganeshkumartk/fef37bac89b86c23f703d2220f4e0d05 to your computer and use it in GitHub Desktop.
Download ZIP
Tensorflow.js Car Model Prdeiction
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>get this</title>
<!-- Import TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
<!-- Import tfjs-vis -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.0.2/dist/tfjs-vis.umd.min.js"></script>
<!-- Import the main script file -->
<script src="script.js"></script>
<div class="container col-md-3">
<h1 class="Jumbotron text-center">Live ML Model</h1>
</div>
</head>
<body>
</body>
</html>
Raw
script.js
async function getData() {
const carsDataReq = await fetch('https://storage.googleapis.com/tfjs-tutorials/carsData.json');
const carsData = await carsDataReq.json();
const cleaned = carsData.map(car => ({
mpg: car.Miles_per_Gallon,
horsepower: car.Horsepower,
}))
.filter(car => (car.mpg != null && car.horsepower != null));
return cleaned;
}
async function run() {
// Load and plot the original input data that we are going to train on.
const data = await getData();
const values = data.map(d => ({
x: d.horsepower,
y: d.mpg,
}));
// Create the model
const model = createModel();
tfvis.show.modelSummary({name: 'Model Breakdown'}, model);
tfvis.render.scatterplot(
{name: 'Horsepower v MPG'},
{values},
{
xLabel: 'Horsepower',
yLabel: 'Miles Per Gallon',
height: 400
}
);
// Convert the data to a form we can use for training.
const tensorData = convertToTensor(data);
const {inputs, labels} = tensorData;
// Train the model
await trainModel(model, inputs, labels);
console.log('Done Training');
}
document.addEventListener('DOMContentLoaded', run);
function createModel() {
// Create a sequential model
const model = tf.sequential();
// Add a single hidden layer
model.add(tf.layers.dense({inputShape: [1], units: 1, useBias: true}));
// Add an output layer
model.add(tf.layers.dense({units: 1, useBias: true}));
return model;
}
/**
* Convert the input data to tensors that we can use for machine
* learning. We will also do the important best practices of _shuffling_
* the data and _normalizing_ the data
* MPG on the y-axis.
*/
function convertToTensor(data) {
// Wrapping these calculations in a tidy will dispose any
// intermediate tensors.
return tf.tidy(() => {
// Step 1. Shuffle the data
tf.util.shuffle(data);
// Step 2. Convert data to Tensor
const inputs = data.map(d => d.horsepower)
const labels = data.map(d => d.mpg);
const inputTensor = tf.tensor2d(inputs, [inputs.length, 1]);
const labelTensor = tf.tensor2d(labels, [labels.length, 1]);
//Step 3. Normalize the data to the range 0 - 1 using min-max scaling
const inputMax = inputTensor.max();
const inputMin = inputTensor.min();
const labelMax = labelTensor.max();
const labelMin = labelTensor.min();
const normalizedInputs = inputTensor.sub(inputMin).div(inputMax.sub(inputMin));
const normalizedLabels = labelTensor.sub(labelMin).div(labelMax.sub(labelMin));
return {
inputs: normalizedInputs,
labels: normalizedLabels,
// Return the min/max bounds so we can use them later.
inputMax,
inputMin,
labelMax,
labelMin,
}
});
}
async function trainModel(model, inputs, labels) {
// Prepare the model for training.
model.compile({
optimizer: tf.train.adam(),
loss: tf.losses.meanSquaredError,
metrics: ['mse'],
});
const batchSize = 28;
const epochs = 150;
return await model.fit(inputs, labels, {
batchSize,
epochs,
shuffle: true,
callbacks: tfvis.show.fitCallbacks(
{ name: 'Training Performance' },
['loss', 'mse'],
{ height: 200, callbacks: ['onEpochEnd'] }
)
});
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/keras-js/0.3.0/keras.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.1.2/tf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>
Raw
style.css
body {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
color: #7f7f7f;
}
.container{
width: 25%;
background-color:lightgrey;
radius: 5px;
border-left: blue 10px solid;
margin-left: 5px;
padding-left: 5px;
}
.container > h1{
position: left left;
}
#keyboard {
display: block;
margin-right: auto;
margin-left: auto;
transform: translate(0, 0);
width: calc(100% - 20px);
height: 100px
}
#container #glow,
#container #roll,
body #glow,
body #roll {
display: none;
width: 100%;
height: calc(100% - 130px);
top: 0;
left: 0
}
#container #bottom,
body #bottom {
width: 100%;
height: 30px;
bottom: 0;
left: 0;
position: absolute;
background-color: #222;
box-shadow: inset 0 12px 30px -5px rgba(0, 0, 0, .75)
}
#container.focus {
-webkit-filter: none;
filter: none;
opacity: 1
}
#keyboard .key {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
#keyboard .key {
height: calc(100% - 2 * 2px);
width: 10px;
left: 0;
top: 0
}
#keyboard .key.black {
z-index: 1;
height: 50%
}
#keyboard .key.black .fill {
background-color: #7f7f7f;
width: calc(100% - 8px);
left: 4px
}
#keyboard .key.white {
z-index: 0
}
#keyboard .key.white .fill {
background-color: #e5e5e5
}
#keyboard .key .fill {
border: 2px solid #d7d7d7;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
transition: background-color 0.6s;
}
#keyboard .key .fill.active {
background-color: #fff;
transition: background-color 0s;
}
#keyboard .key .highlight.ai {
background-color: #fff
}
#status {
z-index: 10;
display: block;
height: auto;
margin-right: auto;
margin-left: auto;
font-size: 26px;
text-align: center;
line-height: 200px;
height: 200px;
}
.hidden {
display: none;
}
.image {
position: absolute;
left: 0px;
margin-left: 40px;
}
.text-block {
position: absolute;
right: 40px;
width: 450px;
padding: 20px 0;
font-size: 15px;
line-height: 25px;
}
.header {
font-size: 50px;
line-height: 50px;
margin-top: 10px;
width: 100%;
text-align: center;
font-weight: bold;
}
.link {
color: #6fc9c6;
}
#controls {
width: 100%;
text-align: center;
}
.control {
display: inline-block;
vertical-align: middle;
}
.control .pitch {
width: 3em;
}
#conditioning-controls {
display: inline-block;
}
#conditioning-controls.inactive .conditional {
opacity: .2;
}
#conditioning-controls.midicondition .ui-condition {
opacity: .2;
}
a.main-title {
color: white;
text-decoration: none;
}
#midi-out-container, #midi-in-container {
margin: 10px auto;
}
#gain-container {
margin-top: 5px;
text-align: center;
}
#gain, #note-density {
width: 150px;
}
.histogram-bucket {
height: 100px;
position: relative;
}
.histogram-value {
width: 39px;
height: 70px;
position: absolute;
bottom: 0;
background-color: green;
}
#resettingText {
font-size: 20px;
transition: opacity 1s;
text-align: center;
margin-top: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment