Skip to content

Commit 9745f37

Browse files
sahilg06sahilg06
committed
added loader
1 parent 7cec686 commit 9745f37

File tree

2 files changed

+33
-40
lines changed

2 files changed

+33
-40
lines changed

‎vanishing_gradients/index.html

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,4 @@
1-
<!--
2-
Copyright 2018 Google LLC. All Rights Reserved.
31

4-
Licensed under the Apache License, Version 2.0 (the "License");
5-
you may not use this file except in compliance with the License.
6-
You may obtain a copy of the License at
7-
8-
http://www.apache.org/licenses/LICENSE-2.0
9-
10-
Unless required by applicable law or agreed to in writing, software
11-
distributed under the License is distributed on an "AS IS" BASIS,
12-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13-
See the License for the specific language governing permissions and
14-
limitations under the License.
15-
==============================================================================
16-
-->
172

183
<html>
194

@@ -191,7 +176,6 @@
191176
input {
192177
width: 75px;
193178
}
194-
195179
.input-div {
196180
padding: 5px;
197181
font-family: monospace;
@@ -419,7 +403,7 @@ <h1>Vanishing Gradients</h1><br />
419403
<p class='section-head'>Description</p>
420404
<p class="content">
421405
This example explains the problem of vanishing gradients (which you may encounter when training a deep neural
422-
network) and also use some activation function to prevent it. It describes the situation where a deep
406+
network) and also use some activation functions to prevent it. It describes the situation where a deep
423407
multilayer feed-forward network or a recurrent neural network is unable to propagate useful gradient information
424408
from the output end of the model back to the layers near the input end of the model.
425409
</p>
@@ -542,6 +526,7 @@ <h1>Vanishing Gradients</h1><br />
542526
<li><p>It is strictly advised to keep batch size greater than 1, otherwise you may encounter exploding gradients
543527
problem showing black colour links all over in architecture.</p></li>
544528
<li><p>Wait for some time after clicking the button.</p></li>
529+
<li><p>Change the custom parameters and again press the button to train the changed neural network.</p></li>
545530
</ol>
546531
</p>
547532
</section>
@@ -597,6 +582,7 @@ <h3>Train Model</h3>
597582
<canvas id="tea" height="25" width="500"></canvas>
598583
<div id="graph3"></div><br>
599584
</div>
585+
<div id="loader"></div><br><br>
600586
<button id="show-nn-architecture">Train and Show NN-architecture</button>
601587
</div><br>
602588
<body>
@@ -619,4 +605,4 @@ <h3>Train Model</h3>
619605
<script src="index.js"></script>
620606
</body>
621607

622-
</html>
608+
</html>

‎vanishing_gradients/index.js

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,9 @@
11

22

3-
/**
4-
* @license
5-
* Copyright 2018 Google LLC. All Rights Reserved.
6-
* Licensed under the Apache License, Version 2.0 (the "License");
7-
* you may not use this file except in compliance with the License.
8-
* You may obtain a copy of the License at
9-
*
10-
* http://www.apache.org/licenses/LICENSE-2.0
11-
*
12-
* Unless required by applicable law or agreed to in writing, software
13-
* distributed under the License is distributed on an "AS IS" BASIS,
14-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15-
* See the License for the specific language governing permissions and
16-
* limitations under the License.
17-
* =============================================================================
18-
*/
193
import * as tf from '@tensorflow/tfjs';
204
import * as tfvis from '@tensorflow/tfjs-vis';
215
import Plotly from 'plotly.js-dist';
22-
23-
import * as data from './data';
6+
import * as data from './data';
247

258

269

@@ -44,8 +27,19 @@ import Plotly from 'plotly.js-dist';
4427
var xte_a=Array();
4528
var yte_a=Array();
4629

47-
document.getElementById('show-nn-architecture')
48-
.addEventListener('click', async() => {
30+
31+
var load = document.getElementById("loader");
32+
load.style.fontSize = "30px";
33+
load.style.color = "black";
34+
load.style.fontFamily = "monospace";
35+
load.style.backgroundColor = "greenyellow";
36+
var callback1 = function ()
37+
{
38+
load.innerHTML = "Training......";
39+
}
40+
41+
var callback2 = function()
42+
{
4943
xl=[];yl=[];
5044
xtr_a=[];ytr_a=[];
5145
xte_a=[];yte_a=[];
@@ -176,7 +170,6 @@ for(var e=0;e<iter;e++)
176170
total_loss+=value.arraySync();
177171

178172

179-
180173

181174

182175
for(var j=0;j<layers;j++)
@@ -576,6 +569,20 @@ tea.beginPath();
576569
tea.font="25px Arial";
577570
tea.fillText("Test accuracy(30 egs) vs epoch => ",5,20);
578571

579-
} );
572+
573+
574+
load.innerHTML = "Model Trained"+String.fromCharCode(0xD83D, 0xDE04);
575+
576+
}
577+
578+
579+
document.getElementById('show-nn-architecture')
580+
.addEventListener('click',show);
581+
582+
function show()
583+
{
584+
setTimeout(callback1, 1000);
585+
setTimeout(callback2, 2000);
586+
}
580587

581588

0 commit comments

Comments
 (0)