/
index.html
39 lines (39 loc) · 1.71 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
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.1.2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
<script src="./utils.js"></script>
<script src="./pix2pix.js"></script>
</head>
<body>
<div id="textContainer">
<h1>Pix2Pix Edges2Pikachu</h1>
<p>1. Select 'Pencil' tool to draw a Pikachu on the canvas below.</p>
<p>2. Click the 'Transfer' button.</p>
<p>3. A colored Pikachu image will appear on the right side in ~5s.</p>
<p>4. Click the 'Clear' button to clear the canvas and draw again.</p>
</div>
<div id="toolContainer" class="flex flex-space-between">
<button class="flex line-height" onClick="usePencil()"><label>Pencil</label><img src="images/pencil.png"/></button>
<button class="flex line-height" onClick="useEraser()"><label>Eraser</label><img src="images/eraser.png"/></button>
</div>
<div class="flex">
<div>
<div id="canvasContainer"></div>
<div id="btnContainer" class="flex flex-space-between">
<button onClick="clearCanvas()">Clear</button>
<button onClick="getRandomOutput()">Random</button>
</div>
</div>
<div id="transferContainer">
<img src="images/pokeball.png" class="pokeball"/><br>
<button id="transferBtn" class="btn" onClick="transfer()">Transfer ⟶</button>
<p id="status">Loading Model...</p>
</div>
<div id="output"></div>
</div>
<script src="./index.js"> </script>
</body>
</html>