-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
346 lines (266 loc) · 12.3 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
<!DOCTYPE html>
<html>
<head>
<title>BrainScapes: The possible landscape of primate brain shapes.</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/@quasar/[email protected]/dist/index.min.css" rel="stylesheet" type="text/css">
<link rel='shortcut icon' type='image/x-icon' href="/favicon.svg" />
<style>
[v-cloak] {display: none}
.my-logo-font {
font-family: 'Roboto Condensed', sans-serif;
}
.my-font {
font-family: 'Roboto', sans-serif;
}
.my-image {
filter: grayscale(70%) brightness(80%) contrast(120%);
}
.box-shadow:hover {
box-shadow: 3px 3px 3px rgba(0,0,0,0.2) !important;
}
.intro {
background: url(./img/pattern1.png);
background-size: cover;
background-position: 50%;
background-attachment: fixed;
background-repeat: no-repeat;
}
.custom_tab {
width: 80px;
min-height:50px !important;
color: white
}
</style>
<style>
html, body {
margin:0;
font-size: 18px;
}
.b {
fill: rgb(59,81,94);
}
.a {
fill: rgba(83,91,96,0.5);
}
</style>
<script>
window.quasarConfig = {
brand: {
primary: '#FFFFFF',
secondary: '#26A69A',
accent: '#C10015',
dark: 'rgb(66,67,68)',
positive: '#21BA45',
negative: '#C10015',
info: '#31CCEC',
warning: '#F2C037'
}
}
</script>
</head>
<body>
<div id="q-app">
<q-layout v-cloak view="lHh lpr lFf">
<q-page-container>
<q-page>
<!-- Image header section -->
<div class="q-px-md bg-primary" >
<div class="q-px-xl q-pt-none bg-primary" id="brainshapes_1" >
<div class="row justify-left" >
<div class="col-md-1" ></div>
<div class="q-pt-none q-px-none col-12 col-lg-6 col-md-8" >
<q-img class="q-px-xl q-py-sm my-image" style="width:100%;" src="./img/1_brain-shapes.png" >
</q-img>
</div>
<div class="col-md-1" ></div>
</div>
</div>
</div>
<!-- Page 1 -->
<div class="q-px-md bg-primary" >
<div class="q-px-xl q-pt-xl bg-primary" id="page_1" >
<!-- Titel -->
<div class="row justify-left" >
<div class="col-md-1" ></div>
<div class="q-py-xl col-12 col-lg-6 col-md-9" >
<span class="text-left e" style="font-size: 36px;">BrainScapes: The possible landscape of primate brain shapes.
</span>
</div>
<div class="col-md-2" ></div>
</div>
<!-- Authors -->
<div class="q-pb-md row justify-left">
<div class="col-md-1"></div>
<div class="q-py-sm col-12 col-lg-6 col-md-9">
<span class="text-center text-h6 text-weight-light"><a href="https://twitter.com/katjaQheuer" target="_blank" class="text-center text-black text-h6 text-weight-medium" style="text-decoration: none; cursor: pointer">Katja Heuer</a>, Marian Kleineberg, Russell Dinnage, Chet C. Sherwood, William Donald, Hopkins, Ernst Schwartz, Georg Langs, Romain Valabregue, Mathieu D. Santin, Marc Herbin, & <a href="https://twitter.com/R3RT0" target="_blank" class="text-center text-black text-h6 text-weight-medium" style="text-decoration: none; cursor: pointer">Roberto Toro</a>
</span>
</div>
<div class="col-md-2"></div>
</div>
<!-- Links to poster pdf and jitsi chat -->
<div class="row justify-left">
<div class="col-md-1"></div>
<div class="col-12 col-lg-6 col-md-9 text-left">
<q-btn flat dense no-caps class="text-weight-regular q-mr-lg q-px-md q-py-none" type="a" target="_blank" href="https://meet.jit.si/DeepPrimateBrainShapes" size="lg"
:style="'background:'+ theme_color +'; color: white; font-size: 21px;'" label="Come to our video chat" >
</q-btn>
<q-btn flat dense no-caps class="text-weight-regular q-px-md q-py-none" type="a" target="_blank" href="https://github.com/katjaq/brainscapes/blob/master/img/Heuer-Toro_BrainScapes_OHBM_2020.pdf" size="lg"
:style="'background:'+ theme_color +'; color: white'" label="Our poster for more details" >
</q-btn>
</div>
<div class="col-12 col-md-2"></div>
</div>
<!-- Text Section 1: Intro -->
<div class="q-pb-none row justify-left">
<div class="col-md-1"></div>
<div class="q-pt-xl col-12 col-lg-6 col-md-9">
<span class="text-center text-body1 text-weight-light">The shape of primate brains varies widely from small smooth to profusely folded large brains. Studying morphological diversity across phylogeny allows us to better understand how primate brains adapt, and in particular the evolutionary context of the human brain.
</span>
</div>
<div class="col-md-2"></div>
</div>
<!-- Image 1 -->
<div class="row justify-left" >
<div class="col-md-1" ></div>
<div class="q-pt-md q-px-none col-12 col-lg-10 col-md-9" >
<q-img class="q-px-xl q-pt-md q-py-sm" style="width:100%;" src="./img/1_brain-shapes.png" >
</q-img>
</div>
<div class="col-md-1" ></div>
</div>
</div>
</div>
<!-- Page 2 -->
<div class="q-px-md bg-primary" >
<div class="q-px-xl q-pt-xl bg-primary" id="page_2" >
<!-- Text section 2 -->
<div class="row justify-left" >
<div class="col-md-1" ></div>
<div class="q-py-xl col-12 col-lg-6 col-md-9">
<span class="text-center text-body1 text-weight-light">Recent advances in generative machine learning models have led to algorithms capable of learning shape embeddings and to generate realistic new instances. We explored an autoencoder deep neural network to generate shapes of primate brains including 34 different species.
</span>
</div>
<div class="col-md-1" ></div>
</div>
<!-- Video section -->
<div class="row justify-left" >
<div class="col-md-1" ></div>
<div class="q-pb-lg q-px-none col-12 col-lg-10 col-md-9" >
<!-- <q-video class="q-pa-none" style="width:90%;height:620px;" src="./img/2_animated_tsne_01.mp4" autoplay loop muted>
</q-video> -->
<video width="100%" poster="./img/2_animated_tsne_01.jpg" autoplay loop muted>
<source type="video/mp4" src="./img/2_animated_tsne_01.mp4">
</video>
</div>
<div class="col-md-1" ></div>
</div>
</div>
</div>
<!-- Page 3 -->
<div class="q-px-md bg-primary" >
<div class="q-px-xl q-pt-md bg-primary" id="page_3" >
<!-- Text section 3 -->
<div class="row justify-left" >
<div class="col-md-1" ></div>
<div class="q-py-xl col-12 col-lg-6 col-md-9">
<span class="text-center text-body1 text-weight-light">Our network successfully learnt a landscape of changes in shape. Interestingly, species with brains of comparable volume were close in the learnt space, despite having been size-normalised for the training. This suggests that changes in volume are consistently concomitant with changes in shape, and this disregarding the species’ position in the phylogenetic tree.
</span>
</div>
<div class="col-md-1" ></div>
</div>
<!-- Image 3 -->
<div class="row justify-left q-px-none" >
<div class="col-md-1 col-lg-1" ></div>
<div class="q-pt-none q-pb-lg q-px-none col-12 col-lg-6 col-md-8" >
<q-img class="q-pl-none q-pt-md q-pb-lg" style="width:100%;" src="./img/3_autoencoder-tsne.png" >
</q-img>
</div>
<div class="col-md-1" ></div>
</div>
</div>
</div>
<!-- Page 4 -->
<div class="q-px-md bg-primary" >
<div class="q-px-xl q-pt-md bg-primary" id="page_4" >
<!-- Text section 4 -->
<div class="row justify-left" >
<div class="col-md-1" ></div>
<div class="q-py-xl col-12 col-lg-6 col-md-9">
<span class="text-center text-body1 text-weight-light">Our network is also able to generate new data. We generated possible brain shapes for all ancestral states of the primate phylogenetic tree, and evolutionary trajectories for each of our species back to the brain of the common ancestor.
</span>
</div>
<div class="col-md-1" ></div>
</div>
<!-- Video section -->
<div class="row justify-left" >
<div class="col-md-1" ></div>
<div class="q-pb-lg q-px-none col-12 col-lg-6 col-md-8" >
<video width="100%" poster="./img/4_ancestor_animation_cebus_apella.jpg" autoplay loop muted>
<source type="video/mp4" src="./img/4_ancestor_animation_cebus_apella.mp4">
</video>
</div>
<div class="col-md-1" ></div>
</div>
</div>
</div>
<!-- Page 5 -->
<div class="q-px-md bg-primary" >
<div class="q-px-xl q-pt-sm q-pb-xl bg-primary" id="page_5" >
<!-- Text section 5 -->
<div class="row justify-left" >
<div class="col-md-1" ></div>
<div class="q-py-xl col-12 col-lg-6 col-md-9">
<span class="text-center text-body1 text-weight-light">In conclusion, we successfully trained a deep neural network to learn the space of morphological variation across primates, and to generate new data along the phylogenetic tree. We obtained evolutionary trajectories of extant primate brains all the way back to the common ancestor.
</span>
</div>
<div class="col-md-1" ></div>
</div>
</div>
</div>
</q-page>
</q-page-container>
</q-layout>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@quasar/[email protected]/dist/index.umd.min.js"></script>
<script>
const { getScrollTarget, setScrollPosition } = Quasar.scroll
app = new Vue({
el: "#q-app",
data() {
return {
selected_tab: 't_0',
bg_color: '#4b4f51',
hover: false,
active: false,
theme_color: '#917e81',
background_style: '#917e81',
paper_heading_1: [],
paper_heading_color_1: '#4b4f51',
headerState: false,
}
},
methods: {
scrollToElement(id) {
let el = document.getElementById(id)
const target = getScrollTarget(el)
const offset = el.offsetTop + 3
const duration = 900
setScrollPosition(target, offset, duration)
},
goTo(url){
window.location.href = url;
},
scrollFunction (pos) {
this.headerState = (pos>300);
}
}
});
</script>
</body>
</html>