Skip to content

Commit c6c004c

Browse files
r7rohanr7rohan
authored
Update index.html
1 parent 5105d47 commit c6c004c

File tree

1 file changed

+23
-20
lines changed

1 file changed

+23
-20
lines changed

‎Autoencoder/index.html‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -49,25 +49,28 @@
4949
}
5050
</style>
5151
</head>
52-
52+
5353
<body style="text-align:center;background-color:white;font-size:3vh;top:0%; font-family:Georgia;margin-top:0%;margin-left:0%;">
5454
<p style="background-color:#111111E9;font-size:3vw;top:0%;font-family:Times;margin-top:0%;padding-bottom:1%;padding-top:1%;position:fixed;width:100%;color:#EEEEFF;">TensorFlow.js: MNIST Autoencoder</p>
5555
<p style="background-color:#7777AA;font-size:3vw;top:0%;font-family:Times;margin-top:0%;padding-bottom:1%;padding-top:1%;visibility: hidden;width:100%;margin-bottom:0%;">TensorFlow.js: MNIST Autoencoder</p>
5656
<div id="body" style="text-align:center;height:100%;width:55%;margin-left:22%;background-color:white;padding-left:1vw;padding-top:1vh;">
5757
<br>
58-
59-
58+
59+
6060
<section class='title-area' >
61-
<p style="text-align:left;color:#111111;margin-top:0%;">Train a model to autoencode handwritten digits from the MNIST database using the tf.layers
62-
api.
63-
<br>
64-
This examples lets you train a MNIST Autoencoder using a Fully Connected Neural Network (also known as a DenseNet).<br><br>
61+
<p style="text-align:left;color:#111111;margin-top:0%;">
62+
This examples lets you train a MNIST Autoencoder using a Fully Connected Neural Network (also known as a DenseNet) in written in Tfjs<br><br>
6563
You can select the structure for the DenseNet and see the performance of the model.
6664
<br>The MNIST dataset is used as training data.
65+
<br>
66+
<br>
67+
Set latent space dimension to 2 for 2d Exploration of the latent space. Otherwise set it high for accurate autoencoding
68+
<br>
69+
Visualization scale determines the scale of 2d pane
6770
</p>
6871
</section>
69-
70-
72+
73+
7174
<div style="width:100%;height:5px;background-color:#EFEFEF;"></div>
7275
<section style="text-align:center;">
7376
<p class='section-head' >
@@ -76,7 +79,7 @@ <h1 style="background-color:#EFEFFF;padding-top:0.5%;padding-bottom:1%;">Trainin
7679
<div style="font-family:Times;width:20vw;background-color:#EFEFEF;text-align:left;padding-left:3%;padding-top:3%;padding-bottom:2%;display:inline-block;">
7780
<div>
7881
<label>N hidden layers in encoder and decoder</label>
79-
<input id="n_layers" value="2">
82+
<input id="n_layers" value="3">
8083
</div>
8184
<div>
8285
<label>Output dimension of each layer</label>
@@ -88,29 +91,29 @@ <h1 style="background-color:#EFEFFF;padding-top:0.5%;padding-bottom:1%;">Trainin
8891
</div>
8992
<button id="Create">Create model</button>
9093
</div>
91-
94+
9295
<div style="font-family:Times;width:20vw;background-color:#EFEFEF;text-align:left;padding-left:3%;padding-top:1.3%;padding-bottom:2%;display:inline-block;">
9396
<div>
9497
<label># Batch size:</label>
9598
<input id="batchsize" value="300">
9699
</div>
97100
<div>
98101
<label># LearnRate:</label>
99-
<input id="lr" value="0.3">
102+
<input id="lr" value="0.1">
100103
</div>
101104
<div>
102105
<label># Training epochs:</label>
103106
<input id="train-epochs" value="1">
104107
</div>
105108
<div>
106109
<label># Visualization scale</label>
107-
<input id="vis" value="50">
110+
<input id="vis" value="0.1">
108111
</div>
109112
<button id="train">Train Model</button>
110113
</div>
111114
</section>
112-
113-
115+
116+
114117
<br>
115118
<div style="width:100%;height:5px;background-color:#EFEFEF;"></div>
116119
</div>
@@ -124,11 +127,11 @@ <h2>This will show the examples of autoencoder once it its trained</h2>
124127
</div>
125128
</div>
126129
<br><br><br>
127-
128-
130+
131+
129132
<div style="width:100%;background-color:white;height:15px;"></div>
130133
<div style="text-align:center;">
131-
<h2>This is for 2d plot visualization of latent space of autoencoder.<br> If your latent space dimension is set to 2D<br></h2>
134+
<h2>This is for 2d plot visualization of latent space of autoencoder.<br> Drag in the 2d Pane below slowly<br></h2>
132135
<div id="cn" style="display:none;margin-left:35%;text-align:center;">
133136
<canvas id="mot" style="height:80px;width:80px;display:block;margin-left:20%;border:solid 3px black;"></canvas>
134137
<br>
@@ -146,8 +149,8 @@ <h2>This is for autoencoding your drawing on the canvas<br></h2>
146149
<button id="clear" style="display:inline;">Clear</button>
147150
</div>
148151
</div>
149-
150-
152+
153+
151154
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
152155
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tfjs-vis.umd.min.js"></script>
153156
<script src='https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.2.7/tf.min.js'></script>

0 commit comments

Comments
 (0)