-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
142 lines (121 loc) · 5.51 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebAssembly style transfer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
<style>
#example_fixed img {
max-width: 200px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x">
<h1 class="cell">Wasm style transfer</h1>
<p class="cell">
This is a WebAssembly port of Embark Studios'
<a href="https://github.com/EmbarkStudios/texture-synthesis">texture synthesis</a>
algorithm, with some input controls to experiment with possible
variations of the algorithm. See also <a href="https://www.youtube.com/watch?v=fMbK7PYQux4&t=6m57s">
the video presentation of this algorithm</a> to get an idea of
how it works.
</p>
<div class="cell grid-x grid-padding-x">
<div class="cell large-6">
<h3>Example</h3>
<select id="example_select">
<option value="upload">Upload</option>
<option value="fixed">Fixed image</option>
</select>
<div class="grid-x">
<div id="example_upload">
<label for="example_input">Example
<input type="file" id="example_input" />
</label>
</div>
<div id="example_fixed">
<img class="thumbnail" src="assets/night.jpg" />
<img class="thumbnail" src="assets/fire.jpg" />
<img class="thumbnail" src="assets/cri.png" />
<img class="thumbnail" src="assets/water.jpg" />
<img class="thumbnail" src="assets/signac.jpg" />
</div>
</div>
</div>
<div class="cell large-6">
<h3>Target</h3>
<select id="target_select">
<option value="upload">Upload</option>
<option value="cam">Use the cam</option>
</select>
<div class="grid-x">
<div id="target_upload">
<label for="target_input">Example
<input type="file" id="target_input" />
</label>
</div>
<div id="target_cam">
<video id="cam">Video stream not available.</video>
<button class="button" id="target_cam_take">Take pic</button>
</div>
</div>
</div>
</div>
<hr class="cell" />
<div class="grid-x grid-padding-x">
<div class="cell medium-4">
<label for="stage">
Backtrack stages
<input type="number" id="stage" value="3" step="1" min="1" />
</label>
</div>
<div class="cell medium-4">
<label for="nearest">
Nearest neighbors
<input type="number" id="nearest" value="50" step="5" min="0" />
</label>
</div>
<div class="cell medium-4">
<label for="alpha">
Guide alpha
<input type="number" id="alpha" value="0.9" step=0.01 min="0" max="1" />
</label>
</div>
<div class="cell medium-4">
<label for="live_preview">Live preview</label>
<div class="switch">
<input class="switch-input" id="live_preview" type="checkbox">
<label class="switch-paddle" for="live_preview">
<span class="show-for-sr">Live preview</span>
</label>
</div>
</div>
<div class="cell">
<button class="button" id="submit">Run texture synthesis</button>
</div>
</div>
<hr class="cell" />
<div class="grid-x">
<div class="cell medium-6">
<h3>Chosen example</h3>
<canvas id="chosen_example"></canvas>
</div>
<div class="cell medium-6">
<h3>Chosen target</h3>
<canvas id="chosen_target"></canvas>
</div>
<div class="cell">
<h3>Result</h3>
<p class="cell" id="status"></p>
<canvas id="output"></canvas>
</div>
</div>
<hr/>
<p class="cell" id="logs"></p>
</div>
</div>
<script type="module" src="index.js"></script>
</body>
</html>