/
tfjs10-xor-layers.html
313 lines (191 loc) · 11.4 KB
/
tfjs10-xor-layers.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
306
307
308
309
310
311
<!-- *******************************Start: What source js file to use? **************************************************** -->
<!-- the online version that these examples were made with -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.6"></script> -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0"></script>
<!-- the newest version script tag is below but by using it all the examples may not work
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
-->
<!-- Or you could download the newest version using the link above and work completely offline using a tag similar to
<script src="myNewDownloadedTensorflow.js"></script>
-->
<!-- Note: often nice to load the readable version of the src file. Remember to match the numbers to whatever the newest version is.
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.10.0/dist/tf.js"></script>
-->
<!-- *******************************Stop: What source js file to use? **************************************************** -->
<h2 align=center> Most of the examples are in the following format:</h2>
<div style="font-size:15px; background-color:lightyellow; width:88%; border:5px solid blue; padding:5px; margin:5px;">
A very simple xOr Neural Network using Tensorflowjs Layers<br>
Have a look at the code. It would be very easy to add extra hidden layers to this Neural Network <br>
The Original by <a href="https://twitter.com/mattcameron">Matt Cameron</a> was written for NodeJS, his code is at
<a href="https://github.com/mattcam/tfjs_xor_example">Code</a><br>
The expected output for xOr input is<br>
[0,0] = ~ 0<br>
[1,0] = ~ 1<br>
[0,1] = ~ 1<br>
[1,1] = ~ 0<br>
</div><br>
<div id="myDiv123Code">
Epoch : <input id="myEpoch" type=number value=10> Epoch Batches : <input id="myBatch" type=number value=300><br>
<input id="myButton123" type=button value="Tensorflowjs xOr using layers" onclick="{
document.getElementById('myButton123').style.backgroundColor = 'red'
async function myGo() {
const model = tf.sequential();
model.add(tf.layers.dense({inputShape: [2], units: 10, activation: 'sigmoid',}) ); // 2 inputs to 10 hidden layer nodes
model.add(tf.layers.dense({inputShape: [10], units: 1, activation: 'sigmoid',}) ); // from the 10 hidden layer nodes to 1 output layer
/* -------------------------------------------------------------------------------------------------------
Key words to Search:
--------------------------------------Layers:------------------------------------
elu
leakyReLU
softmax
thresholdedReLU
activation
dense
dropout
embedding
flatten
repeatVector
reshape
conv1d
conv2d
conv2dTranspose
depthwiseConv2d
separableConv2d
add
average
concatenate
maximum
minimum
multiply
batchNormalization
averagePooling1d
averagePooling2d
globalAveragePooling1d
globalAveragePooling2d
globalMaxPooling1d
globalMaxPooling2d
maxPooling1d
maxPooling2d
gru
gruCell
lstm
lstmCell
rnn
simpleRNN
simpleRNNCell
stackedRNNCells
bidirectional
timeDistributed
inputLayer
zeroPadding2d
------------------------------------------------------ activation :------------------------------------------
activation :
elu
hardsigmoid
linear
relu
relu6
selu
sigmoid
softmax
softplus
softsign
tanh
------------------------------------------loss :------------------------------------------
loss :
meanSquaredError
meanAbsoluteError
meanAbsolutePercentageError
meanSquaredLogarithmicError
squaredHinge
hinge
categoricalHinge
logcosh
categoricalCrossentropy
sparseCategoricalCrossentropy
binaryCrossentropy
kullbackLeiblerDivergence
poisson
cosineProximity
---------------------------------------optimizer:----------------------------------------------
optimizer:
sgd
rmsprop
adagrad
adam
momentum
------------------------------------------END Comments-------------------------------------------
*/
const myOptimizer = tf.train.sgd(0.5);
// console.log(myOptimizer)
model.compile({optimizer: myOptimizer, loss: 'meanSquaredError'});
// model.compile({loss: 'meanSquaredError', optimizer: 'rmsprop'});
const training_data = tf.tensor2d([[0,0],[0,1],[1,0],[1,1]]); // array defines shape
const target_data = tf.tensor2d([0,1,1,0],[4,1]); // needs shape defined
for (let myLoop = 1; myLoop <= document.getElementById('myBatch').value; myLoop++) {
var myFit = await model.fit(training_data, target_data, {epochs: document.getElementById('myEpoch').value});
if (myLoop % 20 == 0){
document.getElementById('myDiv123').innerHTML = 'Loss after Batch ' + myLoop + ' : ' + myFit.history.loss[0].toFixed(5) +'<br><br>'
}
await tf.nextFrame(); // GUI update every batch
}
const myPredictArray = await model.predict(training_data).data()
document.getElementById('myDiv123').innerHTML += '[0,0] = ' + myPredictArray[0].toFixed(4) +'<br>'
document.getElementById('myDiv123').innerHTML += '[1,0] = ' + myPredictArray[1].toFixed(4) +'<br>'
document.getElementById('myDiv123').innerHTML += '[0,1] = ' + myPredictArray[2].toFixed(4) +'<br>'
document.getElementById('myDiv123').innerHTML += '[1,1] = ' + myPredictArray[3].toFixed(4) +'<br>'
document.getElementById('myButton123').style.backgroundColor = 'lightgray'
}
// setTimeout(function(){ myGo() }, 10); // wait a bit for the GUI to update the button color.
myGo()
}"><br><br>
</div>
<div id='myDiv123'>...</div><br>
<input id="myUpdate123" type=button value="Update and Run" style="visibility:hidden;" onclick="{
// first remove first and last line since they are injected
myFred = document.getElementById('myTextarea123').value.split('\n')
myFred.pop()
myFred.push('')
myFred.shift()
myFred.shift()
myJoe = myFred.join('\n')
document.getElementById('myDiv123Code').innerHTML = myJoe
document.getElementById('myButton123').click()
}"><br>
<textarea id="myTextarea123" wrap="off" style= "font-size:15px; color:white; background-color:black; width:90%;" rows=2 onclick="{
if (myOnce123){
myTextGrow('myTextarea123', 'myDiv123Code')
document.getElementById('myUpdate123').style.visibility = 'visible'
myOnce123 = false
}
}">
Click here to see the working HTML code.
</textarea><br>
<br><br><br><hr><br><br><br><br>
This <a href="https://github.com/hpssjellis/beginner-tensorflowjs-examples-in-javascript">Github</a>, ...
this <a href="https://hpssjellis.github.io/beginner-tensorflowjs-examples-in-javascript/">Github Website Version</a>, ...
this <a href="http://rocksetta.com/tensorflowjs/">Hosted Website Version</a>, ...
<a href="https://js.tensorflow.org/">Tensorflowjs</a> <br> <br>
By Jeremy Ellis <br>
Twitter<a href="https://twitter.com/@rocksetta">@rocksetta</a><br>
Website <a href="http://rocksetta.com">http://rocksetta.com</a><br>
Use at your own risk!
<!-- Following is a helper functions to grow the textareas -->
<script>
myOnce123 = true // so textareas are only clicked once
function myTextGrow(myT, myB){
var myCursorStart = document.getElementById(myT).selectionStart
var myCursorEnd = document.getElementById(myT).selectionEnd
myDivName = myB.replace('Code','')
document.getElementById(myT).value = '\x3Cscript src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0"> \x3C/script> \n\n' + document.getElementById(myB).innerHTML
document.getElementById(myT).value += '<div id=\''+myDivName+'\'>...</div><br>'
setTimeout(function() {
while ( document.getElementById(myT).clientHeight < document.getElementById(myT).scrollHeight){
document.getElementById(myT).rows += 3;
}
}, 100)
document.getElementById(myT).selectionStart = myCursorStart
document.getElementById(myT).selectionEnd = myCursorEnd
}
</script>
</body>