Skip to content

Commit 4fe9c05

Browse files
laythfadhalalaythfadhala
committed
edit
1 parent 4fc3152 commit 4fe9c05

4 files changed

Lines changed: 55 additions & 39 deletions

File tree

‎Machine-learning-data-visualization.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<html>
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Machine learning data visualization</title>
6+
<link rel="stylesheet" href="css.css">
7+
<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
8+
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
9+
10+
<style>
11+
html{
12+
font-family:Arial, Helvetica, sans-serif;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
18+
<div style="margin:-25px 0px -50px 0px">
19+
<button onclick="StartTraining()" style="border-radius: 33px; font-size: 18px; padding: 16px 16px 16px 16px;
20+
background-color:rgb(0, 180, 0);outline: none; color: rgb(255, 255, 255);margin: 45px 5px 15px 10px;">Start training</button>
21+
<button onclick="window.location.reload()" style="border-radius: 33px; font-size: 18px; padding: 16px 16px 16px 16px;
22+
background-color:rgb(226, 0, 0);outline: none; color: rgb(255, 255, 255);">Start over</button>
23+
<button onclick="bt()" style="margin: 45px 15px 15px 55px; border-radius: 33px; font-size: 18px; padding: 16px 16px 16px 16px;
24+
background-color:rgb(0, 180, 0);outline: none; color: rgb(255, 255, 255);">Dowload the model</button> &nbsp
25+
<button onclick="dataBt()" style="border-radius: 33px; font-size: 18px; padding: 16px 16px 16px 16px;
26+
background-color:royalblue;outline: none; color: rgb(255, 255, 255);">Download the data</button><br><br>
27+
<label for="epochs" style="margin-left:25px;font-size: 26px">Number of epochs </label><input id="ep" style="font-size: 26px"
28+
name="epochs" type="number"><p style="margin-left:250px"> If no number was chosen, 32 will be set as default</p>
29+
</div>
30+
<br><br><br>
31+
<div style="background-color:rgb(248, 248, 248); border: 1px solid gainsboro; padding: 35px 20px 300px 35px;">
32+
<div id="chart_div" style="width:800px; float:right;"></div>
33+
<div id="show" style="font-size: 22px;width: 300px;"></div>
34+
<br><br><br><br><br><br>
35+
<div id="show_results" style="width: 400px;font-size:22px;"></div>
36+
</div>
37+
38+
<script>
39+
40+
</script>
41+
<script src="Machine-learning-data-visualization.js"></script>
42+
43+
44+
</body>
45+
46+
</html>

data.js renamed to Machine-learning-data-visualization.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
// specifying the neural network shape and parameters
2+
function StartTraining(){
3+
document.getElementById("show_results").innerHTML = "";
4+
var ep = document.getElementById("ep").value;
25
const defults = {
36
inputs: 6,
47
outputs:2,
5-
epochs: 30,
8+
epochs:ep,
69
layers: [
710
ml5.tf.layers.dense({
811
units: 16,
@@ -48,8 +51,9 @@ neuralNetwork.data.normalize();
4851

4952
// Train the model with two callback functions (whileTraining, finish)
5053
// Please note that the "finish" callback function will not return anything unless the training is done
51-
// The whileTraining callback function is to visualise the data while training
52-
neuralNetwork.train(whileTraining,finish);
54+
// The whileTraining callback function is to visualise the data while training
55+
neuralNetwork.train(whileTraining,finish);
56+
5357

5458

5559

@@ -101,6 +105,7 @@ var chart = new CanvasJS.Chart("chart_div", {
101105
}]
102106
});
103107

108+
104109
var xVal = 0;
105110
var yVal = 0;
106111
var dataLength = 100; // number of dataPoints visible at any point
@@ -150,3 +155,4 @@ function bt(){
150155
function dataBt(){
151156
neuralNetwork.saveData();
152157
}
158+
}

‎css.css‎

Whitespace-only changes.

‎index.html‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

0 commit comments

Comments
 (0)