-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
502 lines (447 loc) · 31 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
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
<!doctype html>
<html class="h-100" lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KBPJCWFJLE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-KBPJCWFJLE');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="description" content="Marsupial ai homepage">
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.png">
<meta name="author" content="Marsupial.ai">
<meta name="generator" content="Eleventy v2.0.0">
<meta name="HandheldFriendly" content="true">
<title>Marsupial.ai</title>
<link rel="stylesheet" href="css/theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* inter-200 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
font-display: swap;
src: local(''),
url('../fonts/inter-v11-latin-200.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/inter-v11-latin-200.woff') format('woff');
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-300 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local(''),
url('../fonts/inter-v11-latin-300.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/inter-v11-latin-300.woff') format('woff');
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-regular - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(''),
url('../fonts/inter-v11-latin-regular.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/inter-v11-latin-regular.woff') format('woff');
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-500 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local(''),
url('../fonts/inter-v11-latin-500.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/inter-v11-latin-500.woff') format('woff');
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navScroll">
<nav id="navScroll" class="navbar navbar-expand-lg navbar-light fixed-top" tabindex="0">
<div class="container">
<a class="navbar-brand pe-4 fs-3 border-end" href="/web/">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="60" height="60" viewBox="0, 0, 621, 446">
<defs>
<clipPath id="Clip_1">
<path d="M0.06,0.152 L620.398,0.152 L620.398,446 L0.06,446 z" />
</clipPath>
<clipPath id="Clip_2">
<path d="M0.06,0.152 L620.398,0.152 L620.398,446 L0.06,446 z" />
</clipPath>
</defs>
<g id="Layer_1">
<g clip-path="url(#Clip_1)">
<path d="M544.904,28.712 L435.52,446 L234.589,446 L351.063,3.22 C351.063,3.22 404.541,-3.683 452.784,3.22 C495.745,9.367 520.229,17.943 544.904,28.712" fill="#513523" />
</g>
<path d="M382.296,362.117 C375.633,392.89 362.89,416.246 362.89,416.246 C362.89,416.246 360.95,389.71 367.613,358.938 C374.277,328.165 387.019,304.808 387.019,304.808 C387.019,304.808 388.959,331.344 382.296,362.117" fill="#2A1D14" />
<path d="M441.448,303.325 C434.785,334.098 422.042,357.454 422.042,357.454 C422.042,357.454 420.103,330.919 426.766,300.146 C433.429,269.373 446.172,246.016 446.172,246.016 C446.172,246.016 448.112,272.552 441.448,303.325"
fill="#2A1D14" />
<path d="M429.121,214.656 C422.458,245.429 409.715,268.785 409.715,268.785 C409.715,268.785 407.775,242.249 414.438,211.477 C421.102,180.704 433.844,157.347 433.844,157.347 C433.844,157.347 435.784,183.883 429.121,214.656"
fill="#2A1D14" />
<path d="M482.975,146.733 C476.312,177.506 463.569,200.862 463.569,200.862 C463.569,200.862 461.629,174.326 468.292,143.554 C474.956,112.781 487.698,89.424 487.698,89.424 C487.698,89.424 489.638,115.96 482.975,146.733" fill="#2A1D14" />
<path d="M480.712,218.483 L522.607,203.198 L485.156,237.526 L480.712,218.483" fill="#513523" />
<path d="M567.156,178.912 C593.442,171.338 617.798,175.772 617.798,175.772 C617.798,175.772 599.535,192.485 573.248,200.058 C546.962,207.632 522.607,203.198 522.607,203.198 C522.607,203.198 540.87,186.485 567.156,178.912"
fill="#3E9F46" />
<path d="M576.752,215.969 C603.757,229.021 620.398,250.464 620.398,250.464 C620.398,250.464 593.257,250.745 566.252,237.693 C539.248,224.641 522.607,203.198 522.607,203.198 C522.607,203.198 549.748,202.917 576.752,215.969"
fill="#3E9F46" />
<path d="M349.292,304.798 C349.292,304.798 343.077,307.471 335.965,306.539 C328.852,305.607 323.535,301.424 323.535,301.424 C323.535,301.424 329.75,298.752 336.863,299.683 C343.975,300.615 349.292,304.798 349.292,304.798"
fill="#1A1715" />
<path d="M345.839,318.688 C345.839,318.688 339.124,319.506 332.559,316.614 C325.995,313.721 322.068,308.212 322.068,308.212 C322.068,308.212 328.783,307.394 335.348,310.286 C341.912,313.179 345.839,318.688 345.839,318.688"
fill="#1A1715" />
<path d="M338.597,330.229 C338.597,330.229 331.881,329.411 326.203,325.028 C320.525,320.644 318.035,314.353 318.035,314.353 C318.035,314.353 324.751,315.171 330.429,319.555 C336.107,323.939 338.597,330.229 338.597,330.229"
fill="#1A1715" />
<path d="M344.788,363.623 C344.788,363.623 341.179,369.345 334.789,372.605 C328.399,375.864 321.648,375.427 321.648,375.427 C321.648,375.427 325.257,369.705 331.647,366.445 C338.037,363.185 344.788,363.623 344.788,363.623"
fill="#1A1715" />
<path d="M349.807,377.026 C349.807,377.026 344.736,381.504 337.687,382.837 C330.639,384.169 324.282,381.853 324.282,381.853 C324.282,381.853 329.354,377.375 336.402,376.043 C343.451,374.71 349.807,377.026 349.807,377.026"
fill="#1A1715" />
<path d="M350.373,390.64 C350.373,390.64 344.375,393.769 337.212,393.371 C330.05,392.973 324.436,389.198 324.436,389.198 C324.436,389.198 330.434,386.069 337.596,386.467 C344.759,386.865 350.373,390.64 350.373,390.64" fill="#1A1715" />
<g clip-path="url(#Clip_2)">
<path
d="M279.901,336.323 C279.901,377.947 324.478,343.874 331.394,377.911 C342.17,430.968 225.805,418.066 192.523,418.066 C139.279,418.066 119.854,387.925 135.395,340.081 C152.006,288.975 178.565,249.007 231.803,249.007 C268.715,249.007 330.337,271.591 331.032,304.6 C331.816,342.243 279.901,294.755 279.901,336.323"
fill="#B6AA90" />
<path
d="M381.093,25.036 C333.431,2.803 305.433,20.298 288.641,38.623 C270.161,30.052 249.855,25.036 228.541,25.036 C203.663,25.036 180.16,31.878 159.33,43.225 C158.652,42.398 157.954,41.563 157.218,40.716 C140.632,21.611 112.811,2.922 62.894,25.036 C32.276,38.602 12.101,64.157 4.008,75.821 C-2.93,85.82 -4.879,106.765 32.414,104.543 C9.552,118.743 24.32,133.108 47.927,131.742 C28.764,141.042 37.65,163.259 75.514,153.686 C74.317,160.214 73.694,166.702 73.694,173.069 C73.694,240.363 143.024,275.269 228.541,275.269 C314.064,275.269 383.394,240.363 383.394,173.069 C383.394,166.214 382.663,159.218 381.28,152.183 C395.337,163.22 411.415,167.72 406.287,136.169 C429.297,157.347 440.723,132.79 417.554,102.545 C424.179,107.855 446.765,113.764 445.801,99.783 C444.531,81.375 432.471,49.002 381.093,25.036"
fill="#B6AA90" />
</g>
<path d="M289.157,199.392 C289.157,228.379 273.96,241.166 255.205,241.166 C236.456,241.166 221.26,228.379 221.26,199.392 C221.26,170.399 236.456,136.169 255.205,136.169 C273.96,136.169 289.157,170.399 289.157,199.392" fill="#201D1A" />
<path d="M206.092,163.217 C206.092,175.558 196.09,185.566 183.743,185.566 C171.403,185.566 161.401,175.558 161.401,163.217 C161.401,150.877 171.403,140.875 183.743,140.875 C196.09,140.875 206.092,150.877 206.092,163.217" fill="#1A1715" />
<path d="M349.004,163.217 C349.004,175.558 339.001,185.566 326.655,185.566 C314.321,185.566 304.318,175.558 304.318,163.217 C304.318,150.877 314.321,140.875 326.655,140.875 C339.001,140.875 349.004,150.877 349.004,163.217"
fill="#1A1715" />
<path d="M261.56,161.592 C259.21,157.962 255.151,155.546 250.512,155.546 C243.234,155.546 237.344,161.442 237.344,168.714 C237.344,174.676 241.331,179.659 246.767,181.278 C247.89,172.749 252.831,164.896 261.56,161.592" fill="#FFFFFE" />
<path
d="M78.059,136.944 C76.601,136.825 73.644,136.602 70.217,136.448 C68.78,136.383 67.5,135.513 66.912,134.2 C66.323,132.885 66.528,131.351 67.437,130.236 C70.901,125.987 75.281,122.262 77.323,120.73 C76.981,120.641 68.807,118.526 57.525,118.526 C57.525,118.526 56.9,118.528 56.889,118.528 C55.485,118.528 54.194,117.756 53.53,116.516 C52.863,115.267 52.943,113.75 53.741,112.578 C59.48,104.137 67.755,99.051 68.105,98.839 C67.809,98.704 60.478,95.71 48.695,93.878 C47.255,93.654 46.069,92.627 45.641,91.234 C45.212,89.839 45.618,88.323 46.684,87.329 C60.549,74.408 76.512,67.857 94.132,67.857 C101.69,67.857 109.603,69.109 117.655,71.579 C118.962,71.979 119.953,73.051 120.253,74.385 C120.552,75.719 120.115,77.111 119.105,78.033 C100.935,94.616 88.455,113.54 82.007,134.279 C81.509,135.882 80.027,136.957 78.372,136.957 C78.268,136.957 78.163,136.953 78.059,136.944"
fill="#FFFFFE" />
<path
d="M78.37,133.148 C76.253,132.975 73.408,132.779 70.388,132.643 C73.629,128.668 77.782,125.147 79.608,123.777 C80.776,122.9 81.342,121.433 81.061,119.999 C80.78,118.566 79.705,117.419 78.292,117.047 C77.931,116.952 69.306,114.717 57.525,114.717 C57.313,114.717 57.101,114.718 56.889,114.72 C62.187,106.93 69.988,102.151 70.083,102.094 C71.314,101.35 72.025,99.975 71.915,98.542 C71.803,97.108 70.9,95.857 69.57,95.31 C69.185,95.151 61.441,92.005 49.281,90.115 C62.425,77.865 77.481,71.665 94.132,71.665 C101.331,71.665 108.842,72.859 116.537,75.22 C97.848,92.278 85.029,111.727 78.37,133.148"
fill="#FFFFFE" />
<path
d="M379.716,136.934 C378.067,136.934 376.586,135.865 376.084,134.267 C369.749,114.099 356.928,95.174 337.98,78.019 C336.968,77.103 336.526,75.716 336.816,74.382 C337.108,73.05 338.09,71.974 339.392,71.564 C348.128,68.808 356.528,67.411 364.356,67.411 C380.843,67.411 395.172,73.244 408.161,85.243 C409.259,86.258 409.662,87.819 409.192,89.238 C408.723,90.656 407.468,91.67 405.982,91.829 C394.406,93.067 387.075,94.334 386.768,94.387 C386.859,94.462 397.095,102.754 403.464,112.66 C404.219,113.836 404.271,115.333 403.596,116.558 C402.925,117.774 401.647,118.528 400.26,118.528 C400.251,118.528 399.559,118.526 399.559,118.526 C388.276,118.526 380.103,120.641 379.761,120.73 C379.815,120.77 385.37,124.961 389.673,130.248 C390.579,131.362 390.781,132.891 390.195,134.203 C389.61,135.515 388.336,136.387 386.902,136.455 C384.012,136.595 381.582,136.785 380.051,136.919 C379.939,136.929 379.828,136.934 379.716,136.934"
fill="#FFFFFE" />
<path
d="M379.718,133.126 C373.168,112.278 360.011,92.828 340.537,75.196 C348.911,72.555 356.898,71.22 364.356,71.22 C379.789,71.22 393.338,76.736 405.577,88.041 C393.922,89.288 386.489,90.57 386.115,90.635 C384.644,90.891 383.46,91.983 383.082,93.428 C382.707,94.873 383.21,96.405 384.369,97.346 C384.488,97.442 394.32,105.481 400.26,114.72 C400.025,114.718 399.791,114.717 399.559,114.717 C387.778,114.717 379.153,116.952 378.792,117.047 C377.381,117.419 376.306,118.566 376.025,119.997 C375.744,121.43 376.307,122.898 377.473,123.775 C377.544,123.828 382.748,127.772 386.718,132.652 C384.044,132.781 381.589,132.961 379.718,133.126"
fill="#FFFFFE" />
<path d="M120.704,250.244 C148.572,266.787 186.558,275.269 228.541,275.269 C275.336,275.269 317.249,264.794 345.644,244.306 C274.721,267.058 180.471,266.299 120.704,250.244" fill="#958E7D" />
<path
d="M135.729,393.047 C135.729,393.048 135.729,393.048 135.729,393.048 C138.902,398.876 144.703,404.854 153.527,410.112 C163.415,415.289 187.93,423.59 214.907,423.543 C239.855,423.499 289.101,425.315 318.872,406.598 C318.924,406.564 318.976,406.531 319.028,406.497 C319.396,406.264 319.747,406.021 320.101,405.78 C320.455,405.536 320.806,405.292 321.147,405.044 C321.572,404.733 321.996,404.422 322.399,404.098 C322.411,404.089 322.422,404.079 322.433,404.07 C328.074,399.528 331.557,393.691 332.022,386.244 C279.494,426.367 177.298,416.246 135.729,393.047"
fill="#958E7D" />
<path
d="M146.887,297.823 C149.914,296.7 153.997,292.242 156.371,292.309 C163.492,292.514 165.026,301.339 154.945,306.334 C140.019,313.727 140.871,333.189 148.681,344.847 C160.176,362.019 128.447,388.596 124.979,376.099 C116.354,366.247 76.059,389.786 83.737,348.434 C85.531,338.764 88.847,316.337 102.993,305.434 C119.634,292.605 146.887,297.823 146.887,297.823"
fill="#CDBD9D" />
<path d="M99.073,222.852 C105.458,212.711 124.182,210.379 135.683,216.196 C147.183,222.019 148.077,236.479 140.726,243.932 C131.678,253.114 92.212,233.761 99.073,222.852" fill="#796760" />
<path d="M148.977,257.717 C157.294,282.493 138.226,304.456 107.258,316.47 C76.289,328.484 46.282,325.572 36.834,301.212 C27.382,276.84 40.495,236.026 72.115,225.855 C106.889,214.68 140.895,233.652 148.977,257.717" fill="#CDBD9D" />
<path d="M118.353,285.121 C122.485,295.776 118.722,302.643 111.824,305.314 C104.938,307.983 97.526,305.458 93.395,294.797 C89.264,284.142 89.976,269.398 96.862,266.722 C103.754,264.053 114.222,274.46 118.353,285.121" fill="#201D1A" />
<path d="M86.322,288.902 C88.2,293.758 85.796,299.212 80.94,301.091 C76.09,302.982 70.63,300.566 68.745,295.722 C66.867,290.865 69.271,285.411 74.127,283.52 C78.977,281.642 84.437,284.046 86.322,288.902" fill="#1A1715" />
<path d="M135.043,265.551 C136.921,270.407 134.517,275.862 129.66,277.746 C124.811,279.63 119.35,277.214 117.471,272.37 C115.593,267.513 117.997,262.059 122.854,260.168 C127.698,258.29 133.164,260.694 135.043,265.551" fill="#1A1715" />
<path d="M104.576,279.685 C103.198,278.682 101.356,278.368 99.653,279.032 C96.977,280.071 95.648,283.079 96.687,285.755 C97.545,287.948 99.713,289.204 101.948,289.029 C101.145,285.731 101.839,282.143 104.576,279.685" fill="#FFFFFE" />
<path d="M35.572,301.81 C26.669,306.298 10.082,300.282 12.71,282.88 C14.631,270.141 27.128,257.396 40.024,257.396 C52.92,257.396 47.085,296.005 35.572,301.81" fill="#796760" />
<path d="M92.985,320.958 C108.029,321.517 127.786,315.284 135.158,300.118 C127.84,306.618 118.314,312.181 107.258,316.47 C102.453,318.334 97.671,319.837 92.985,320.958" fill="#B39F87" />
<path
d="M127.31,373.523 C124.545,365.627 107.018,371.777 99.698,370.349 C92.573,368.959 85.048,367.102 82.946,361.023 C85.584,384.45 117.426,367.47 124.979,376.099 C125.493,377.95 126.637,378.926 128.159,379.219 C127.907,378.06 127.81,374.951 127.31,373.523"
fill="#B39F87" />
</g>
</svg>
<span class="ms-1 fw-bold">Marsupial.ai</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- <li class="nav-item">
<a class="nav-link" href="#services" aria-label="Brings you to the frontpage">
Services
</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="#aboutus">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#numbers">
Performance
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">
Gallery
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tryitout">
Try it out
</a>
</li>
</ul>
<!-- <a href="#" aria-label="Link to the customers profil page" class="link-dark bg-white-95 p-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person" viewbox="0 0 16 16">
<path
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
</svg>
<span class="d-none">Profil</span>
</a> -->
</div>
</div>
</nav>
<main>
<div class="w-100 overflow-hidden bg-gray-100" id="top">
<div class="container position-relative">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-lg-6 py-vh-6 position-relative" data-aos="fade-right">
<h1 class="display-1 fw-bold mt-5">Count native animals automatically!</h1>
<p class="lead">Marsupial.ai allows you to detect and count native animals in camera trap images reliably and fast!</p>
<a href="https://huggingface.co/spaces/hlydecker/marsupial" class="btn btn-dark btn-xl shadow me-3 rounded-0 my-5">Try our live demo 🤗</a>
</div>
<div class="col-lg-6 end-0 bg-cover aos-init aos-animate" data-aos="fade-left">
<video class="img-fluid col-12 col-lg-12" data-aos="fade-left" autoplay muted loop>
<source src="img/examples/lyrebird_detected.mp4" type="video/mp4" class="img-fluid" alt="lyrebird">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
</div>
<div class="py-vh-4 bg-gray-100 w-100 overflow-hidden" id="aboutus">
<div class="container">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-lg-6">
<div class="row gx-5 d-flex">
<div class="col-md-11">
<div class="shadow ratio ratio-1x1 rounded bg-cover mt-5 bp-center float-end" data-aos="fade-up" style="background-image: url(img/examples/kookaburra.jpg);--bs-aspect-ratio: 40%;">
</div>
</div>
<!-- <div class="shadow ratio ratio-16x9 rounded bg-cover bp-center align-self-end" data-aos="fade-right">
<video width="848" height="480" autoplay muted loop>
<source src="img/examples/lyrebird_detected.mp4" type="video/mp4" class="img-fluid rounded shadow" alt="lyrebird" width="848" height="480">
Your browser does not support the video tag.
</video>
</div>
</div> -->
<div class="col-md-5">
<div class="shadow ratio ratio-1x1 rounded bg-cover mt-5 bp-center float-end" data-aos="fade-up" style="background-image: url(img/examples/koala_crop.png);--bs-aspect-ratio: 150%;">
</div>
</div>
<div class="col-md-7">
<div class="col-12 shadow ratio rounded bg-cover mt-5 bp-center" data-aos="fade-left" style="background-image: url(img/examples/dingo_crop.jpg);--bs-aspect-ratio: 100%;">
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<h3 class="py-5 border-top border-dark" data-aos="fade-left">
Reliably detect Australian native animals in your camera trap photos
</h3>
<p data-aos="fade-left" data-aos-delay="200">
Camera traps take motion-triggered pictures of animals in their natural environment, and are the most cost-effective, non-invasive method of monitoring wildlife species. However, after collecting the images, a significant amount of time
is spent labelling the species which are present in each image. It is estimated that single-species image labelling can be done at 450 images/hour by experts and around half that rate for citizen scientists which would equate to ~4
person-years per million labelled images.
<br><br>
<b>Marsupial.ai</b> solves this problem, allowing you to label tens of thousands of images an hour, at just a fraction of the cost!
</p>
<p>
<a href="#" class="link-fancy link-dark" data-aos="fade-left" data-aos-delay="400">Learn more
</a>
</p>
</div>
</div>
</div>
</div>
<div class="py-vh-5 w-100 overflow-hidden" id="numbers">
<div class="container">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-lg-5">
<h3 class="py-5 border-top border-dark" data-aos="fade-right">Performance metrics</h3>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-12">
<h2 class="display-6 mb-5" data-aos="fade-down">High accuracy</h2>
</div>
<div class="col-lg-6" data-aos="fade-up">
<div class="display-1 fw-bold py-4">94%</div>
<p class="text-black-50">94% precision and 93% recall on detecting the top 33 species of native animals.
On the top 71 species we have 88% precision and 84% recall.
</p>
</div>
<div class="col-lg-6" data-aos="fade-up">
<div class="display-1 fw-bold py-4">Fast!</div>
<p class="text-black-50">Tens of thousands of images labelled per hour with Marsupial.ai's state-of-the-art system.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="position-relative overflow-hidden w-100 bg-light" id="gallery">
<div class="container-fluid">
<div class="row overflow-scroll">
<div class="col-24">
<div class="row vw-100 px-0 py-vh-5 d-flex align-items-center scrollx">
<div class="col-md-4" data-aos="fade-up">
<img src="img/examples/echidna_detected.gif" class="rounded shadow img-fluid" alt="echidna" width="380">
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
<img src="img/examples/pademelon.jpg" class="img-fluid rounded shadow" alt="pademelon" width="380">
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="600">
<img src="img/examples/wombats_detected.png" class="img-fluid rounded shadow" alt="wombats" width="380">
</div>
<!-- <div class="col-md-3" data-aos="fade-up" data-aos-delay="800">
<img src="img/examples/koala.png" class="rounded shadow img-fluid" alt="koala" width="380">
</div> -->
</div>
</div>
</div>
</div>
</div>
<div class="container py-vh-4 w-100 overflow-hidden">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-lg-5">
<h3 class="py-5 border-top border-dark" data-aos="fade-right">What our clients say</h3>
</div>
<div class="col-md-7" data-aos="fade-left">
<blockquote>
<div class="fs-4 my-3 fw-light pt-4 border-bottom pb-3">“The prospect of using these tools in my own work and for the broader ecological community is very exciting. Land managers, researchers, students and volunteers will no longer have
to painstakingly sift through thousands or millions of images. The time gained by implementing an automated image processing pipeline and increase speed of reporting results can be used for on-ground species conservation management.”
</div>
<img src="img/aaron.jpg" width="64" height="64" class="img-fluid rounded-circle me-3" alt="" data-aos="fade">
<span><span class="fw-bold">Dr. Aaron Greenville,</span>
The University of Sydney</span>
</blockquote>
</div>
</div>
</div>
<div class="py-vh-6 bg-gray-900 text-light w-100 overflow-hidden" id="tryitout">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="row d-flex justify-content-center text-center">
<div class="col-lg-8 text-center" data-aos="fade">
<p class="text-secondary lead">How to get involved</p>
<h2 class="display-6 mb-5">Our goal is to develop the most accurate and efficient Australian native animal detection and identification models the world has ever seen. We're ready to help you find ways to use our models and tools to detect and identify
animals in your camera trap imagery.</h2>
</div>
<div class="col-12">
<a href="https://huggingface.co/spaces/hlydecker/marsupial" class="btn btn-warning btn-xl shadow me-3 mt-4" data-aos="fade-down">Try our live demo 🤗</a>
<a href="https://github.com/marsupial-ai/marsupial" class="btn btn-dark btn-xl shadow me-3 mt-4" data-aos="fade-down"><i class="fa fa-github"></i> View the GitHub Repository</a>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="py-vh-5 w-100 overflow-hidden" id="services">
<div class="container">
<div class="row d-flex justify-content-end">
<div class="col-lg-8" data-aos="fade-down">
<h2 class="display-6">Okay, there are three really good reasons for us. There are no more than three, but we think three is a reasonable good number of good stuff.</h2>
</div>
</div>
<div class="row d-flex align-items-center">
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<span class="h5 fw-lighter">01.</span>
<h3 class="py-5 border-top border-dark">We rented this fancy startup office in an old factory building.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus culpa, voluptatibus ex itaque, sapiente a consequatur inventore beatae, ipsam debitis omnis consequuntur iste asperiores. Similique quisquam debitis corrupti deserunt,
dolor.</p>
<a href="#" class="link-fancy">Learn more
</a>
</div>
<div class="col-md-6 col-lg-4 py-vh-4 pb-0" data-aos="fade-up" data-aos-delay="400">
<span class="h5 fw-lighter">02.</span>
<h3 class="py-5 border-top border-dark">We don´t know exactly what we are doing. But thats good because we can´t break something intentionally.</h3>
<p>Lorem, ipsum dolor sit adipisicing elit. Minus culpa, voluptatibus ex itaque, sapiente a consequatur inventore beatae, ipsam debitis omnis consequuntur iste asperiores. Similique quisquam debitis corrupti deserunt, dolor.</p>
<a href="#" class="link-fancy">Learn more
</a>
</div>
<div class="col-md-6 col-lg-4 py-vh-6 pb-0" data-aos="fade-up" data-aos-delay="600">
<span class="h5 fw-lighter">03.</span>
<h3 class="py-5 border-top border-dark">There is no real number three reason. So please read again number one and two.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus culpa, voluptatibus ex itaque, sapiente a consequatur inventore beatae, ipsam debitis omnis consequuntur iste asperiores. Similique quisquam debitis corrupti deserunt,
dolor.</p>
<a href="#" class="link-fancy">Learn more
</a>
</div>
</div>
</div>
</div> -->
</main>
<footer>
<div class="container small border-top">
<div class="row py-5 d-flex justify-content-between">
<div class="col-12 col-lg-6 col-xl-3 border-end p-5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-layers-half" viewbox="0 0 16 16">
<path
d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z" />
</svg>
<address class="text-secondary mt-3">
<strong>Marsupial.ai</strong><br>
Sydney, Australia<br>
</address>
</div>
<div class="col-12 col-lg-6 col-xl-3 border-end p-5">
<h3 class="h6 mb-3">About</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link link-secondary ps-0" aria-current="page" href="https://github.com/marsupial-ai/marsupial">How it works</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-6 col-xl-3 border-end p-5">
<h3 class="h6 mb-3">Products</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link link-secondary ps-0" aria-current="page" href="https://github.com/marsupial-ai/marsupial">Code base</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary ps-0" href="https://huggingface.co/spaces/hlydecker/marsupial">Live Demo</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-6 col-xl-3 p-5">
<h3 class="h6 mb-3">Support</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link link-secondary ps-0" aria-current="page" href="https://github.com/marsupial-ai/marsupial">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/aos.js"></script>
<script>
AOS.init({
duration: 800, // values from 0 to 3000, with step 50ms
});
</script>
<script>
let scrollpos = window.scrollY
const header = document.querySelector(".navbar")
const header_height = header.offsetHeight
const add_class_on_scroll = () => header.classList.add("scrolled", "shadow-sm")
const remove_class_on_scroll = () => header.classList.remove("scrolled", "shadow-sm")
window.addEventListener('scroll', function() {
scrollpos = window.scrollY;
if (scrollpos >= header_height) {
add_class_on_scroll()
} else {
remove_class_on_scroll()
}
console.log(scrollpos)
})
</script>
</body>
</html>