Skip to content

Commit f04564f

Browse files
r7rohanr7rohan
authored
Update index.html
1 parent 441a6f3 commit f04564f

File tree

1 file changed

+141
-136
lines changed

1 file changed

+141
-136
lines changed

‎Autoencoder/index.html

Lines changed: 141 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -7,181 +7,186 @@
77
<meta charset="utf-8">
88
<meta http-equiv="X-UA-Compatible" content="IE=edge">
99
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10-
11-
12-
<style>
13-
html {
14-
line-height: 200%;
15-
font-family: Georgia;
16-
}
17-
18-
button {
19-
border-radius: 20px;
20-
border-color: #00FFFF;
21-
background-color: #CCFFFF;
22-
font-size: 2vh;
23-
}
24-
25-
#train {
26-
margin-top: 10px;
27-
}
28-
29-
label {
30-
display: inline-block;
31-
width: 90%;
32-
padding: 6px 0 6px 0;
33-
}
34-
35-
.canvases {
36-
display: inline-block;
37-
}
38-
39-
.prediction-canvas {
40-
width: 100px;
41-
}
42-
43-
.pred {
44-
font-size: 20px;
45-
line-height: 25px;
46-
width: 100px;
47-
}
48-
49-
.pred-correct {
50-
background-color: #00cf00;
51-
}
52-
53-
.pred-incorrect {
54-
background-color: red;
55-
}
56-
57-
.pred-container {
58-
display: inline-block;
59-
width: 100px;
60-
margin: 10px;
61-
}
62-
</style>
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>
6360
</head>
6461

6562
<body style="text-align:center;background-color:white;font-size:3vh;top:0%; font-family:Georgia;margin-top:0%;margin-left:0%;">
66-
<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>
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>
6764
<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>
68-
<div id="body" style="text-align:center;height:100%;width:55%;margin-left:22%;background-color:white;padding-left:1vw;padding-top:1vh;">
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.
6970
<br>
70-
<section class='title-area'>
71-
<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 api.
72-
<br> This examples lets you train a MNIST Autoencoder using a Fully Connected Neural Network (also known as a DenseNet).<br><br> 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'>
78-
<h1 style="background-color:#EFEFFF;padding-top:0.5%;padding-bottom:1%;">Training Parameters</h1>
79-
</p>
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>
8078

8179

8280

8381

8482

85-
<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;">
86-
<div>
87-
<label># Batch size:</label>
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;">
8884

89-
<input id="batchsize" value="320">
90-
</div>
9185

92-
<div>
93-
<label># LearnRate:</label>
94-
<input id="lr" value="0.1">
95-
</div>
86+
<div>
87+
<label>N hidden layers in encoder and decoder</label>
88+
<input id="n_layers" value="2">
89+
</div>
9690

97-
<div>
98-
<label># of training epochs:</label>
99-
<input id="train-epochs" value="3">
100-
</div>
10191

102-
<div>
103-
<label>N hidden layers in encoder and decoder</label>
104-
<input id="n_layers" value="2">
105-
</div>
92+
<div>
93+
<label>Output dimension of each layer</label>
94+
<input id="n_units" value="500">
95+
</div>
10696

97+
<div>
98+
<label>Hidden code dimension (Set it to 2 for graph visualization)</label>
99+
<input id="hidden" value="2">
100+
</div>
107101

108-
<div>
109-
<label>Output dimension of each layer</label>
110-
<input id="n_units" value="128">
111-
</div>
102+
<button id="Create">Create model</button>
103+
</div>
112104

113-
<div>
114-
<label>Hidden code dimension (Set it to 2 for graph visualization)</label>
115-
<input id="hidden" value="2">
116-
</div>
117-
<div>
118-
<label>Visualization scale</label>
119-
<input id="vis" value="50">
120-
</div>
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>
121108

109+
<input id="batchsize" value="300">
110+
</div>
122111

112+
<div>
113+
<label># LearnRate:</label>
114+
<input id="lr" value="0.3">
115+
</div>
123116

124-
<button id="train">Train Model</button>
125-
<button id="Create">Create model</button>
126-
</section>
127-
<br>
128-
<div style="width:100%;height:5px;background-color:#EFEFEF;"></div>
129-
</div>
117+
<div>
118+
<label># Training epochs:</label>
119+
<input id="train-epochs" value="1">
120+
</div>
130121

131122

123+
<div>
124+
<label># Visualization scale</label>
125+
<input id="vis" value="50">
126+
</div>
132127

133-
<br><br>
134-
<div style="text-align:center;margin-left:10%;font-family:Times;background-color:#EFEFFF66;width:80%;padding-top:1%;font-family:sans-serif;">
135128

136-
<div style="text-align:center; ">
137-
<h2>This will show the examples of autoencoder once it its trained</h2>
138-
<div id="new" style="text-align:center;"></div>
139-
</div>
140129

130+
<button id="train">Train Model</button>
131+
</div>
141132

142-
<br><br><br>
143-
<div style="text-align:center;">
144-
<h2>This is for 2d plot visualization of latent space of autoencoder.<br> If your latent space dimension is set to 2D<br></h2>
145-
<canvas id="celeba-scene" style="height:400px; width:400px;display:none;"></canvas>
146-
</div>
147-
<div id="cn">
148-
</div>
149133

134+
</section>
135+
<br>
136+
<div style="width:100%;height:5px;background-color:#EFEFEF;"></div>
137+
</div>
150138

151-
<br><br><br>
152-
<div style="text-align:center;">
153-
<h2>This is for autoencoding your drawing on the canvas<br></h2>
154-
<canvas id="canv" style="height:400px; width:400px;display:inline;"></canvas>
155-
<canvas id="outcanv" style="height:400px; width:400px;display:inline;"></canvas>
156-
<span style="display:block;"></span>
157-
<button id="save" style="display:inline;">Autoencode</button>
158-
<button id="clear" style="display:inline;">Clear</button>
159-
</div>
160-
</div>
161139

162140

163-
<!-- TODO(cais): Decide. DO NOT SUBMIT. -->
164-
<!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
165-
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
166-
<!-- Import tfjs-vis -->
167-
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.0.2/dist/tfjs-vis.umd.min.js"></script>
168-
<script src='https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.2.7/tf.min.js'></script>
169-
<script src="three.min.js"></script>
170-
<script src='Control2d.js'></script>
171-
<script src='https://duhaime.s3.amazonaws.com/blog/latent-spaces/ThreeWorld.js'></script>
172-
<script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script>
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;">
173143

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>
174149

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>
175159

176-
<script src="index.js" type="module"></script>
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>
177169

178170

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>
179177

180178

181179

182180

181+
<script src="index.js" type="module"></script>
183182

184-
</div>
183+
184+
185+
186+
187+
188+
189+
</div>
185190
</body>
186191

187-
</html>
192+
</html>

0 commit comments

Comments
 (0)