-
Notifications
You must be signed in to change notification settings - Fork 12
/
basic_ml.html
305 lines (248 loc) · 10.6 KB
/
basic_ml.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE html>
<html>
<head>
<title>Y Predictor</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<style>
.jumbotron {
background: #ffd89b;
background: -webkit-linear-gradient(to left, #19547b, #ffd89b); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #19547b, #ffd89b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
h1{
color: white;
}
body{
background: #eef2f3;
}
h3{
color: #19547b;
font-family: "Nunito", sans-serif;
}
h5{
color: #19547b;
font-family: "Nunito", sans-serif;
}
a{
color: #19547b;
}
input{
background-color: #f7f7f7;
margin: 0;
padding: 0;
color: #19547b;
}
th{
background-color: #19547b;
color: white;
font-family: 'Oswald', sans-serif;
font-weight: 400;
text-align: center;
}
.btn {
background-color: #19547b;
color: white;
font-family: 'Oswald', sans-serif;
font-weight: 400;
}
</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
<body>
<div class="container-fluid p-0">
<div class="jumbotron mt-0">
<h1 id="head" class="display-4">Basic Machine <br> Learning Model</h1>
</div>
</div>
<section class="container-fluid">
<h3>What does it do?</h3>
<p>
Considering an equation, this application will take input 6 x values(independant variable) and 6 y values(dependant variable) from you and run 500 epochs over a single neuron <br> and will try to learn the realtionship between them. <br>
The Model without knowing the exact equation will try to predict the answer of an unknown x given by you.
</p>
<h3>
Enter the values: Please try to provide as much variety as you can...
</h3>
<h5>
Please don't leave any cell in the table blank and go to the prediction once a <strong>"Training is Complete"</strong> message pops up.
</h5>
This will only be able to predict linear relations.<br>
The answer will never be accurate,but close to the real answer.<br>
<p>
Considering an equation, this application will take input 6 x values(independant variable) and 6 y values(dependant variable) from you and run 500 epochs over a single neuron <br> and will try to learn the realtionship between them. <br>
The Model without knowing the exact equation will try to predict the answer of an unknown x given by you.
</p>
<h6>IF NAN IS RETURNED, OUR MODEL WAS NOT ABLE TO TRAIN CORRECTLY TO YOUR VALUES</h6>
</section>
<section class="container-fluid">
<table border="1">
<tr>
<th>Values of X</th>
<th>Corresponding values of Y</th>
</tr>
<tr>
<td><input type="text" name="" class="x" placeholder="Enter x1"></td>
<td><input type="text" name="" class="y" placeholder="Enter y1"></td>
</tr>
<tr>
<td><input type="text" name="" class="x" placeholder="Enter x2"></td>
<td><input type="text" name="" class="y" placeholder="Enter y2"></td>
</tr>
<tr>
<td><input type="text" name="" class="x" placeholder="Enter x3"></td>
<td><input type="text" name="" class="y" placeholder="Enter y3"></td>
</tr>
<tr>
<td><input type="text" name="" class="x" placeholder="Enter x4"></td>
<td><input type="text" name="" class="y" placeholder="Enter y4"></td>
</tr>
<tr>
<td><input type="text" name="" class="x" placeholder="Enter x5"></td>
<td><input type="text" name="" class="y" placeholder="Enter y5"></td>
</tr>
<tr>
<td><input type="text" name="" class="x" placeholder="Enter x6"></td>
<td><input type="text" name="" class="y" placeholder="Enter y6"></td>
</tr>
</table>
<p></p>
THE ENTRY YOU LEAVE BLANK THE DEFAULT ONES WILL BE USED.
<br>
DEFAULTS ARE --> Optimizer: SGD Loss: meanSquaredError Epochs: 500 Layer 1: 1 Neuron Layer 2: 1 Neuron Learning Rate: 0.001
<p>
LAYER 1 : <input type="text" id="layer1" placeholder=" Default">
LAYER 2 : <input type="text" id="layer2" placeholder=" Default">
</p>
<p id="sep">
<input type="text" id="epoch" placeholder=" Epochs">
<br>
Loss Function -------
<select id="losses">
<option value="0">meanSquaredError</option>
<option value="1">absoluteDifference</option>
<option value="2">computeWeightedLoss</option>
<option value="3">cosineDistance</option>
<option value="4">hingeLoss</option>
<option value="5">huberLoss </option>
<option value="6">logLoss</option>
</select>
<br>
Optimizer ------
<select id="optimizers">
<option value="0">SGD</option>
<option value="1">Momentum</option>
<option value="2">Adagrad</option>
<option value="3">Adadelta</option>
<option value="4">Adam</option>
<option value="5">adamax</option>
<option value="6">RMSProp</option>
</select>
<br>
<input type="text" id="lr" placeholder="Learning Rate">
</p>
<button id="train" class="btn btn-light">Train</button>
<p></p>
<div id="progress"></div>
<div id="current_loss"></div>
<p></p>
<label for="train_progress">Training progress:</label>
<progress id="train_progress" value="" max=""></progress>
<h5>Enter x who's y you want to predict:</h5>
<input type="text" name="" placeholder="Enter x" id="test_value">
<p></p>
<button id="predict" class="btn btn-light">Predict</button>
<P></P>
<h5>Open the console(pressing F12 and clicking the console tab) in the inspect page if you want to see the training process...</h5>
<h4><a href="https://github.com/FranciscanLads">Made By Franciscan Lads.</a></h4>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
<script>
const model = tf.sequential();
//FUNCTION FOR TRAINING
async function doTraining(EPOCHS, XS, YS){
document.getElementById("train_progress").max = EPOCHS;
const history = await model.fit(XS, YS, {
epochs: EPOCHS, callbacks: {
onEpochEnd: async(epoch, logs) => {
console.log("Epochs:" + epoch + "Loss: " + logs.loss + ' Accuracy: ', parseFloat(logs.acc));
document.getElementById("progress").innerHTML = "Epochs: "+(epoch+1)+" / "+EPOCHS;
document.getElementById("current_loss").innerHTML = "Loss: "+logs.loss;
document.getElementById("train_progress").value = epoch+1;
}
}
}
);
alert("Training is Complete. You can now predict Y");
firstRun = false;
}
//FUNCTION FOR INITIALIZING MODEL
async function initializeModel(LAYER1NEURON, LAYER2NEURON, LOSS, OPTIMIZER){
model.add(tf.layers.dense({units: LAYER1NEURON, inputShape: [1]}));
model.add(tf.layers.dense({units: LAYER2NEURON}));
model.add(tf.layers.dense({units: 1}));
model.compile({loss: LOSS, optimizer: OPTIMIZER, metrics: 'accuracy'});
}
var train = document.getElementById("train");
var predict = document.getElementById("predict");
var flag = true;
var firstRun = true;
train.addEventListener("click", async function() {
//GETTING USERS INPUTS
var x = await document.getElementsByClassName("x");
var y = await document.getElementsByClassName("y");
var layer_1_neuron =parseInt(document.getElementById("layer1").value);
var layer_2_neuron =parseInt(document.getElementById("layer2").value);
var no_of_epochs = parseInt(document.getElementById("epoch").value);
var learning_rate = parseInt(document.getElementById("lr").value);
var loss_function = parseInt(document.querySelector('#losses').value);
var optimizer_select = parseInt(document.querySelector('#optimizers').value);
//CHECKING THE INPUTS AND SETTING DEFAULTS
for(var i = 0; i<6; i++)if(!(((parseFloat(x[i].value)) && (parseFloat(y[i].value))) || ((parseFloat(x[i].value)==0) || (parseFloat(y[i].value)==0))))
{ flag = false; alert("Please fill in all the values before training!"+"\n"+"All the values should be numbers."); break;}
else{flag = true}
if(!layer_1_neuron)layer_1_neuron=1;
if(!layer_2_neuron)layer_2_neuron=1;
if(!no_of_epochs)no_of_epochs=500;
if(!learning_rate)learning_rate=0.001;
var lr = learning_rate;
var optimizers;
var losses;
switch(optimizer_select){
case 0: optimizers = tf.train.sgd(lr); break;
case 1: optimizers = tf.train.momentum(lr, 0.9); break;
case 2: optimizers = tf.train.adagrad(lr); break;
case 3: optimizers = tf.train.adadelta(lr); break;
case 4: optimizers = tf.train.adam(lr); break;
case 5: optimizers = tf.train.adamax(lr); break;
case 6: optimizers = tf.train.rmsprop(lr); break;
default: optimizers = tf.train.sgd(lr); break;
}
switch(loss_function){
case 0: losses = tf.losses.meanSquaredError; break;
case 1: losses = tf.losses.absoluteDifference; break;
case 2: losses = tf.losses.computeWeightedLoss; break;
case 3: losses = tf.losses.cosineDistance; break;
case 4: losses = tf.losses.hingeLoss; break;
case 5: losses = tf.losses.huberLoss; break;
case 6: losses = tf.losses.logLoss; break;
default: losses = tf.losses.meanSquaredError; break;
}
var xs = await tf.tensor2d([parseFloat(x[0].value),parseFloat(x[1].value),parseFloat(x[2].value),parseFloat(x[3].value),parseFloat(x[4].value),parseFloat(x[5].value)],[6,1]);
var ys = await tf.tensor2d([parseFloat(y[0].value), parseFloat(y[1].value),parseFloat(y[2].value),parseFloat(y[3].value),parseFloat(y[4].value),parseFloat(y[5].value)],[6,1]);
if(firstRun)initializeModel(layer_1_neuron, layer_2_neuron, losses, optimizers);
if(flag)doTraining(no_of_epochs, xs, ys);
});
predict.addEventListener("click", async function(){
var test_value = document.getElementById("test_value");
test_value = test_value.value;
var a = model.predict(tf.tensor2d([parseFloat(test_value)], [1, 1]));
console.log(test_value);
alert(a.dataSync());
});
</script>