-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
69 lines (66 loc) · 4.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Creator</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<script src="https://www.lactame.com/lib/ml/4.0.0/ml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img class="center" style="width:400px;" src="logo.png">
<img id="loadImage" class="center w3-animate-opacity" style="width:100px;" src="loading.gif">
<div id="main" class="flex-container" style="display:none">
<div id="sliders" class="w3-margin" style="flex-grow: 1; height: 600px; width: 250px; margin-right: 16px; overflow: scroll; border: 2px solid black;">
Loading...
</div>
<div class="w3-margin w3-padding" style="margin-right: 16px; flex-grow: 1; border: 4px solid black; overflow: scroll;">
<canvas style="display: block; border: 4px solid black;" id="canvas" width="256px" height="256px"></canvas>
<br>
<button class="guibutton" style="display: block;" id="render">Render</button>
</div>
<div class="w3-margin w3-padding" style="flex-grow: 0; border: 4px solid black;height: 600px; max-width:400px;overflow: scroll;">
<label style="position: relative; top: 3px;">Render on change: </label>
<input id="liveRender" class="w3-check" type="checkbox" style="width: 16px; height: 16px;" checked>
<br>
<br>
<button class="guibutton" id="randomTrue">Random Cat</button>
<br>
<br>
<button class="guibutton" id="random">Random Cat (From Dataset)</button>
<br>
<br>
<button class="guibutton" id="average">Return to Average Cat</button>
<br>
<br>
<label>Encode Image: </label>
<input id="imageUpload" type="file" accept="image/*">
<br>
<button style="margin-top:8px" class="guibutton" id="encode">Encode</button>
<br>
<br>
<button class="guibutton" id="save">Save Cat As</button>
<input id="catName" value="cat" type="text" style="width: 75px; position: relative; bottom: 2px;">
<label>.png</label>
<br>
<h3>Instructions:</h3>
<p>Drag the sliders around to customize the cat above. The higher up a slider is on the list, the more it impacts what the cat looks like. You can also find random cats, upload your own cats to encode, and save cool cats you make to your device.
Eldritch abominations may occur when trying to encode your own cat.</p>
<h3>Technical Info:</h3>
<p>This application is powered by a convolutional autoencoder trained on the cats in <a target="_blank" href="https://www.kaggle.com/andrewmvd/animal-faces">this dataset</a>. PCA was then run on the encodings produced by this model, creating
a 256-dimensional latent space, where cats from the training set and novel cats could be encoded and decoded. The 256 sliders allow you to explore this latent space, the first slider corresponding to the first dimension (most important),
the second slider to the second (second most important), and so on. These dimensions are fed to a decoder model, and the decoding is mapped to a canvas and displayed.</p>
<p>The model was trained with <a href="https://www.tensorflow.org/js" target="_blank">tensorflow.js</a>.</p>
<p>The PCA was done using <a href="https://github.com/mljs/pca">mljs</a>.</p>
</div>
</div>
<a href="https://clustrmaps.com/site/1bfpp" title="Visit tracker" hidden><img src="//www.clustrmaps.com/map_v2.png?d=6K9oYXClV9XMKD2xcprpd6kAN40KJiDHCSZcH5-ct-8&cl=ffffff"></a>
<script src="main.js"></script>
</body>
</html>