Skip to content

Commit f279476

Browse files
r7rohanr7rohan
authored
Update index.html
1 parent fd7f2e5 commit f279476

File tree

1 file changed

+151
-186
lines changed

1 file changed

+151
-186
lines changed

‎Autoencoder/index.html

Lines changed: 151 additions & 186 deletions
Original file line numberDiff line numberDiff line change
@@ -1,192 +1,157 @@
11
<!DOCTYPE html>
22
<html>
3-
4-
<head>
5-
<title>VisualML | Autoencoder</title>
6-
<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
7-
<meta charset="utf-8">
8-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
9-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10-
<style>
11-
html{
12-
line-height: 200%;
13-
font-family:Georgia;
14-
}
15-
button{
16-
border-radius: 20px;
17-
border-color:#00FFFF;
18-
background-color: #CCFFFF;
19-
font-size:2vh;
20-
}
21-
#train {
22-
margin-top: 10px;
23-
}
24-
25-
26-
label {
27-
display: inline-block;
28-
width: 90%;
29-
padding: 6px 0 6px 0;
30-
}
31-
32-
.canvases {
33-
display: inline-block;
34-
}
35-
36-
.prediction-canvas {
37-
width: 100px;
38-
}
39-
.pred {
40-
font-size: 20px;
41-
line-height: 25px;
42-
width: 100px;
43-
}
44-
45-
.pred-correct {
46-
background-color: #00cf00;
47-
}
48-
49-
.pred-incorrect {
50-
background-color: red;
51-
}
52-
53-
.pred-container {
54-
display: inline-block;
55-
width: 100px;
56-
margin: 10px;
57-
}
58-
59-
</style>
60-
</head>
61-
62-
<body style="text-align:center;background-color:white;font-size:3vh;top:0%; font-family:Georgia;margin-top:0%;margin-left:0%;">
63-
<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>
64-
<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>
65-
<div id="body" style="text-align:center;height:100%;width:55%;margin-left:22%;background-color:white;padding-left:1vw;padding-top:1vh;">
66-
<br>
67-
<section class='title-area' >
68-
<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
69-
api.
70-
<br>
71-
This examples lets you train a MNIST Autoencoder using a Fully Connected Neural Network (also known as a DenseNet).<br><br>
72-
You can select the structure for the DenseNet and see the performance of the model.
73-
<br>The MNIST dataset is used as training data.</p>
74-
</section>
75-
<div style="width:100%;height:5px;background-color:#EFEFEF;"></div>
76-
<section style="text-align:center;">
77-
<p class='section-head' ><h1 style="background-color:#EFEFFF;padding-top:0.5%;padding-bottom:1%;">Training Parameters</h1></p>
78-
79-
80-
81-
82-
83-
<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;">
84-
85-
86-
<div>
87-
<label>N hidden layers in encoder and decoder</label>
88-
<input id="n_layers" value="2">
3+
<head>
4+
<title>VisualML | Autoencoder</title>
5+
<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
6+
<meta charset="utf-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<style>
10+
html{
11+
line-height: 200%;
12+
font-family:Georgia;
13+
}
14+
button{
15+
border-radius: 20px;
16+
border-color:#00FFFF;
17+
background-color: #CCFFFF;
18+
font-size:2vh;
19+
}
20+
#train {
21+
margin-top: 10px;
22+
}
23+
label {
24+
display: inline-block;
25+
width: 90%;
26+
padding: 6px 0 6px 0;
27+
}
28+
.canvases {
29+
display: inline-block;
30+
}
31+
.prediction-canvas {
32+
width: 100px;
33+
}
34+
.pred {
35+
font-size: 20px;
36+
line-height: 25px;
37+
width: 100px;
38+
}
39+
.pred-correct {
40+
background-color: #00cf00;
41+
}
42+
.pred-incorrect {
43+
background-color: red;
44+
}
45+
.pred-container {
46+
display: inline-block;
47+
width: 100px;
48+
margin: 10px;
49+
}
50+
</style>
51+
</head>
52+
53+
<body style="text-align:center;background-color:white;font-size:3vh;top:0%; font-family:Georgia;margin-top:0%;margin-left:0%;">
54+
<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>
55+
<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>
56+
<div id="body" style="text-align:center;height:100%;width:55%;margin-left:22%;background-color:white;padding-left:1vw;padding-top:1vh;">
57+
<br>
58+
59+
60+
<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>
65+
You can select the structure for the DenseNet and see the performance of the model.
66+
<br>The MNIST dataset is used as training data.
67+
</p>
68+
</section>
69+
70+
71+
<div style="width:100%;height:5px;background-color:#EFEFEF;"></div>
72+
<section style="text-align:center;">
73+
<p class='section-head' >
74+
<h1 style="background-color:#EFEFFF;padding-top:0.5%;padding-bottom:1%;">Training Parameters</h1>
75+
</p>
76+
<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;">
77+
<div>
78+
<label>N hidden layers in encoder and decoder</label>
79+
<input id="n_layers" value="2">
80+
</div>
81+
<div>
82+
<label>Output dimension of each layer</label>
83+
<input id="n_units" value="500">
84+
</div>
85+
<div>
86+
<label>Hidden code dimension (Set it to 2 for graph visualization)</label>
87+
<input id="hidden" value="2">
88+
</div>
89+
<button id="Create">Create model</button>
90+
</div>
91+
92+
<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;">
93+
<div>
94+
<label># Batch size:</label>
95+
<input id="batchsize" value="300">
96+
</div>
97+
<div>
98+
<label># LearnRate:</label>
99+
<input id="lr" value="0.3">
100+
</div>
101+
<div>
102+
<label># Training epochs:</label>
103+
<input id="train-epochs" value="1">
104+
</div>
105+
<div>
106+
<label># Visualization scale</label>
107+
<input id="vis" value="50">
108+
</div>
109+
<button id="train">Train Model</button>
110+
</div>
111+
</section>
112+
113+
114+
<br>
115+
<div style="width:100%;height:5px;background-color:#EFEFEF;"></div>
89116
</div>
90-
91-
92-
<div>
93-
<label>Output dimension of each layer</label>
94-
<input id="n_units" value="500">
117+
<br><br>
118+
<div style="text-align:center;margin-left:10%;font-family:Times;background-color:#EFEFFF66;width:80%;padding-top:1%;font-family:sans-serif;">
119+
<div style="text-align:center; ">
120+
<h2>This will show the examples of autoencoder once it its trained</h2>
121+
<div id="new" style="text-align:center;"></div>
122+
<div id="barc" style='background-color:#BBBBBB;height:30px;width:60%;margin-left:20%;display:none;'>
123+
<div id="bar" style='background-color:#3333FF;height:30px;width:0%;color:white;'>0%</div>
124+
</div>
125+
</div>
126+
<br><br><br>
127+
128+
129+
<div style="width:100%;background-color:white;height:15px;"></div>
130+
<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>
132+
<div id="cn" style="display:none;margin-left:35%;text-align:center;">
133+
<canvas id="mot" style="height:80px;width:80px;display:block;margin-left:20%;border:solid 3px black;"></canvas>
134+
<br>
135+
<canvas id="celeba-scene" style="height:400px; width:400px;display:block;"></canvas>
136+
</div>
137+
</div>
138+
<br><br>
139+
<div style="width:100%;background-color:white;height:15px;"></div>
140+
<div style="text-align:center;">
141+
<h2>This is for autoencoding your drawing on the canvas<br></h2>
142+
<canvas id="canv" style="height:400px; width:400px;display:inline;"></canvas>
143+
<canvas id="outcanv" style="height:400px; width:400px;display:inline;"></canvas>
144+
<span style="display:block;"></span>
145+
<button id="save" style="display:inline;">Autoencode</button>
146+
<button id="clear" style="display:inline;">Clear</button>
147+
</div>
95148
</div>
96-
97-
<div>
98-
<label>Hidden code dimension (Set it to 2 for graph visualization)</label>
99-
<input id="hidden" value="2">
149+
150+
151+
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
152+
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.0.2/dist/tfjs-vis.umd.min.js"></script>
153+
<script src='https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.2.7/tf.min.js'></script>
154+
<script src="index.js" type="module"></script>
100155
</div>
101-
102-
<button id="Create">Create model</button>
103-
</div>
104-
105-
<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;">
106-
<div>
107-
<label># Batch size:</label>
108-
109-
<input id="batchsize" value="300">
110-
</div>
111-
112-
<div>
113-
<label># LearnRate:</label>
114-
<input id="lr" value="0.3">
115-
</div>
116-
117-
<div>
118-
<label># Training epochs:</label>
119-
<input id="train-epochs" value="1">
120-
</div>
121-
122-
123-
<div>
124-
<label># Visualization scale</label>
125-
<input id="vis" value="50">
126-
</div>
127-
128-
129-
130-
<button id="train">Train Model</button>
131-
</div>
132-
133-
134-
</section>
135-
<br>
136-
<div style="width:100%;height:5px;background-color:#EFEFEF;"></div>
137-
</div>
138-
139-
140-
141-
<br><br>
142-
<div style="text-align:center;margin-left:10%;font-family:Times;background-color:#EFEFFF66;width:80%;padding-top:1%;font-family:sans-serif;">
143-
144-
<div style="text-align:center; "> <h2>This will show the examples of autoencoder once it its trained</h2>
145-
<div id="new" style="text-align:center;"></div>
146-
<div id="barc" style='background-color:#BBBBBB;height:30px;width:60%;margin-left:20%;display:none;'><div id="bar" style='background-color:#3333FF;height:30px;width:0%;color:white;'>0%</div></div>
147-
</div>
148-
<br><br><br>
149-
150-
<div style="width:100%;background-color:white;height:15px;"></div>
151-
<div style="text-align:center;">
152-
<h2>This is for 2d plot visualization of latent space of autoencoder.<br> If your latent space dimension is set to 2D<br></h2>
153-
<div id="cn" style="display:none;margin-left:35%;text-align:center;">
154-
<canvas id="mot" style="height:80px;width:80px;display:block;margin-left:20%;border:solid 3px black;"></canvas><br>
155-
<canvas id="celeba-scene" style="height:400px; width:400px;display:block;"></canvas>
156-
</div>
157-
</div>
158-
<br><br>
159-
160-
<div style="width:100%;background-color:white;height:15px;"></div>
161-
<div style="text-align:center;"><h2>This is for autoencoding your drawing on the canvas<br></h2>
162-
<canvas id="canv" style="height:400px; width:400px;display:inline;"></canvas>
163-
<canvas id="outcanv" style="height:400px; width:400px;display:inline;"></canvas>
164-
<span style="display:block;"></span>
165-
<button id="save" style="display:inline;">Autoencode</button>
166-
<button id="clear" style="display:inline;">Clear</button>
167-
</div>
168-
</div>
169-
170-
171-
<!-- TODO(cais): Decide. DO NOT SUBMIT. -->
172-
<!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
173-
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
174-
<!-- Import tfjs-vis -->
175-
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.0.2/dist/tfjs-vis.umd.min.js"></script>
176-
<script src='https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.2.7/tf.min.js'></script>
177-
178-
179-
180-
181-
<script src="index.js" type="module"></script>
182-
183-
184-
185-
186-
187-
188-
189-
</div>
190-
</body>
191-
156+
</body>
192157
</html>

0 commit comments

Comments
 (0)