Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Style: Homepage button added to MNIST-CNN #58

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Style: Homepage button added to MNIST-CNN #58

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 51 additions & 36 deletions MNIST-CNN/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,69 +12,74 @@
#train {
margin-top: 10px;
}

label {
display: inline-block;
width: 250px;
padding: 6px 0 6px 0;
}

.canvases {
display: inline-block;
}

.prediction-canvas {
width: 100px;
}

.pred {
font-size: 20px;
line-height: 25px;
width: 100px;
}

.pred-correct {
background-color: #00cf1c;
}

.pred-incorrect {
background-color: red;
}

.pred-container {
display: inline-block;
width: 100px;
margin: 10px;
}

.btn:hover {
background-color: #035aa6 !important;
}


.homepage-button {
position: fixed;
right: 5%;
}

#container1 {
height: 100%;
width: 100%;
display: flex;
}

#parameters {
width: 35%;
}

#images {
width: 65%;
}

#container2 {
height: 100%;
width: 100%;
display: flex;
}

#board {
width: 50%;
}

#chart {
width: 50%;
}
Expand All @@ -85,7 +90,10 @@
<body>
<div style="background-color: #eafdf8;">
<div class="tfjs-example-container">


<section class="title-area">

<h1 style="
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
Expand Down Expand Up @@ -113,14 +121,18 @@
">
Train a CNN to recognize handwritten digits from the MNIST database using the tf.layers api.
</p>
<button class="homepage-button" onclick="location.href='http://visualml.dsgiitr.com/'" type="button">
Go to Homepage</button>
</section>

<section>
<p class="section-head">
Description
</p>
<p>
This examples lets you train a handwritten digit recognizer using either a Convolutional Neural Network (also known as a ConvNet or CNN) The CNN contains 8 layers in total. We use the softmax function as the activation for the output layer as it creates
This examples lets you train a handwritten digit recognizer using either a Convolutional Neural
Network (also known as a ConvNet or CNN) The CNN contains 8 layers in total. We use the softmax
function as the activation for the output layer as it creates
a probability distribution over our 10 classes so their output values sum to 1. Go train that model!
</p>
<p>The MNIST dataset is used as training data.</p>
Expand All @@ -132,41 +144,41 @@
<div id="parameters">
<div>
<label style="font-size: large; font-weight: 500;">
No. of training epochs:
No. of training epochs:
</label>
<input id="train-epochs" value="3" />
</div>
<div>
<label style="font-size: large; font-weight: 500;">
Optimizer:
Optimizer:
</label>
<select id="optimizer">
<option>
Adam
</option>
<option>
RMSprop
</option>
<option>
SGD
</option>
<option>
Adam
</option>
<option>
RMSprop
</option>
<option>
SGD
</option>
</select>
</div>
<div>
<label style="font-size: large; font-weight: 500;">
Learning Rate:
Learning Rate:
</label>
<input id="learning-rate" value="0.003" />
</div>
<div>
<label style="font-size: large; font-weight: 500;">
Batch Size:
Batch Size:
</label>
<input id="batch-size" value="640" />
</div>

<button id="train" class="btn btn-dark">
Load Data and Train Model
Load Data and Train Model
</button>
</div>
<div id="images">
Expand Down Expand Up @@ -202,12 +214,14 @@
<div id="board">
<div id="canvas_box" class="canvas-box" style="margin-left: 20em; margin-bottom: 1em;">
</div>
<button id="clear-button" class="btn btn-dark" marginTop="1em" marginBottom="1em" style="background-color: crimson; margin-left: 19em; width: 9.5em;">
Clear
</button>
<button id="predict-button" class="btn btn-dark" marginTop="1em" marginBottom="1em" style="background-color: #00cf1c; margin-left: 10px; width: 9.5em;">
Predict
</button>
<button id="clear-button" class="btn btn-dark" marginTop="1em" marginBottom="1em"
style="background-color: crimson; margin-left: 19em; width: 9.5em;">
Clear
</button>
<button id="predict-button" class="btn btn-dark" marginTop="1em" marginBottom="1em"
style="background-color: #00cf1c; margin-left: 10px; width: 9.5em;">
Predict
</button>
</div>
<div id="chart">
<canvas id="myChart" width="600" height="300"></canvas>
Expand Down Expand Up @@ -264,7 +278,8 @@
<div id="Layer7"></div>
<div id="Spacing2" marginTop="1em"></div>
</section>
<p>You can also check out a <a href="https://garg-doppler.github.io/MNIST-CNN/" target="_blank">3D model</a> of this CNN, and play with it.</p>
<p>You can also check out a <a href="https://garg-doppler.github.io/MNIST-CNN/" target="_blank">3D model</a>
of this CNN, and play with it.</p>
</div>
</div>
<script src="index.js"></script>
Expand Down