-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
51 lines (43 loc) · 2.17 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Video Sense</title>
<meta name="unique-mark" content="">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
</head>
<body
class="flex relative bg-fixed flex-col leading-8 text-lg items-center min-h-screen py-12 justify-center bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-900 via-blue-950 to-gray-950 text-slate-50">
<div class="grid gap-6 max-w-2xl mx-auto">
<p class="flex items-center gap-4 justify-center text-center text-6xl">
<span class="mt-2">🎞️</span>
<span>👀</span>
</p>
<h1 class="text-6xl border-b-2 mx-auto pb-6 border-slate-600 text-center font-thin text-slate-300" style="text-shadow: 2px 4px black;">Video Sense
</h1>
<p>
Welcome to Video Sense, a simple web app that uses COCO SSD machine learning to detect objects in photos and videos. Upload a mp4 video,
an image file or enter a remote file URL to get started.
</p>
<canvas style="display: none;" class="max-w-full mx-auto" id="canvasEl"></canvas>
<form class="flex flex-col items-center justify-center gap-4 w-full" onsubmit="return false;">
<input type="file" accept="video/*, image/*" />
<p class="text-center opacity-50 italic">--- or ---</p>
<label class="flex gap-2 w-4/5">
Remote file :
<input class="text-black grow px-2 border border-slate-500 rounded-sm bg-slate-200 py-0.5" type="text"
placeholder="https://example.com/video.mp4" />
</label>
</form>
<div id="loading" class="top-0 left-0 fixed w-screen h-screen flex flex-col items-center justify-center bg-black/50">
<img src="assets/loading.svg" />
</div>
</div>
<span id="unique-mark" class="absolute w-full bottom-0 text-center text-sm font-mono opacity-30 pb-4">unique-mark</span>
<script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
<script type="module" src='main.js'></script>
</body>
</html>