forked from tensorflow/tfjs-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (94 loc) · 3.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!--
Copyright 2018 Google LLC. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================
-->
<!doctype html>
<head>
<link rel="stylesheet" href="../shared/tfjs-examples.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="tfjs-example-container centered-container">
<section class='title-area'>
<h1>TensorFlow.js: Generative Adversarial Network</h1>
<p class='subtitle'>Demonstrates the generator part of the ACGAN in the browser.</p>
</section>
<p class='section-head'>Description</p>
<p>
This is the web demo part of the dual-environment TensorFlow.js example
of
<a href="https://arxiv.org/abs/1610.09585" target="_blank">Auxiliary Classifier Generative Adversarial Network (ACGAN)</a>.
</p>
<p>
The training code is in
<a href="https://github.com/tensorflow/tfjs-examples/blob/master/mnist-acgan/gan.js">gan.js</a>,
which runs in Node.js using tfjs-node
or tfjs-node-gpu. In this web page, we load the generator part of a pre-trained
GAN to generate MNIST images. How real those generated MNIST images look depends
on how well the model has been trained. After 5 epochs of training, you should
start seeing reasonable images. After 15 epochs, the images should start to
look good.
Close-to-perfect images (ones that are hard to distinguish from the real ones)
should appear toward the end of the default 100 epochs of training.
</p>
<p>
The ACGAN is a type of
<a href="https://en.wikipedia.org/wiki/Generative_adversarial_network" target="_blank">GAN</a>.
It consists of
<ul>
<li>
A <strong>disriminator</strong>, which is trained to distinguish a "counterfeit" MNIST image
from a real MNIST image. In addition, the disciminator part of ACGAN is also trained
to classify an MNIST image into the ten digit categories.
</li>
<li>
A <strong>generator</strong>, which is trained to generate realistic-looking MNIST images
and "fool" the discriminator. The generator takes two inputs:
<ol>
<li>
A fixed-length latent vector, which can be viewed as a "random primer" for the fake
generation process.
</li>
<li>
An integer in the interval [0, 10), which indicates the desired digit category.
</li>
</ol>
Using these two inputs, it outputs a fake MNIST image.
</li>
</ul>
</p>
</p>
<div id="status">Loading model...</div>
<button id="load-hosted-model">Load Hosted model</button>
<button id="test" disabled="true">Generate</button>
<div>
<div>
<div>
<span id="fake-images-span">Fake images (1 example per class)</span>
</div>
<div>
<button id="toggle-sliders" disabled="true">Show z-vector sliders</button>
<div id="sliders-container"></div>
</div>
<canvas id="fake-canvas" width="280" height="28"></canvas>
</div>
<div>
<div>
<span>Real images for comparison (10 examples per class)</span>
</div>
<canvas id="real-canvas" width="280" height="280"></canvas>
</div>
</div>
<div>
</div>
</body>
<script src="index.js"></script>