forked from pleonard212/pix-plot
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
59 lines (59 loc) · 2.86 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
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='assets/css/style.css'>
<title>Visualizing Image Fields</title>
<meta name='author' content='Douglas Duhaime'>
</head>
<body>
<header class='header'>
<img class='logo' src='assets/images/dhlab-logo.svg' alt='DHLab logo' />
<div class='app-name'>PixPlot</div>
<div class='tagline'>Image fields in a Local Collection</div>
</header>
<div class='loader-scene'>
<p class='welcome'>This page visualizes a large image collection within an interactive WebGL scene. Each image was processed with an <a href='https://www.cs.unc.edu/~wliu/papers/GoogLeNet.pdf' target='_blank'>Inception</a> Convolutional Neural Network, trained on <a href='http://image-net.org/challenges/LSVRC/2012/' target='_blank'>ImageNet 2012</a>, and projected into a two-dimensional manifold with the <a href='https://github.com/lmcinnes/umap' target='_blank'>UMAP</a> algorithm such that similar images appear proximate to one another.</p>
<div class='loader-container'>
<div class='loader-icon'>
<div class='blocks'>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
</div>
</div>
<div id='progress'>0%</div>
</div>
<button id='enter'>Enter</button>
</div>
<nav>
<div class='nav-inner'>
<h2>Hotspots</h2>
<div id='hotspots'></div>
<script type='text/html' id='template'>
<% _.forEach(hotspots, function(hotspot) { %>
<div class='hotspot'>
<div class='background-image'
style='background-image: url("output/thumbs/128px/<%= hotspot.img %>")'></div>
<div><%= hotspot.label %></div>
</div>
<% }); %>
</script>
</div>
</nav>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
<script type='text/javascript' src='assets/js/object-assign-polyfill.js'></script>
<script type='text/javascript' src='assets/js/tween.js'></script>
<script type='text/javascript' src='assets/js/trackball-controls.js'></script>
<script type='text/javascript' src='assets/js/texture-loader.js'></script>
<script type='text/javascript' src='assets/js/tsne-webgl.js'></script>
<script type='text/javascript' src='assets/js/ga.js'></script>
</body>
</html>