-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
100 lines (98 loc) · 3.61 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
<html lang="en">
<head>
<link rel="stylesheet" href="./src/styles/style.css" />
<title>The Bubble Figure | Wunderdog</title>
<!-- importing pose detection libraries via npm doesn't work when building -->
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
</head>
<body>
<form id="controls" class="hidden">
<div>
<label> Limbs Big: <input type="number" name="limbsThickCount" min="0" /> </label>
<label>
of radius
<input type="number" name="limbsThickRadius" min="0.05" step="0.05" />
</label>
<label>
Med:
<input type="number" name="limbsMediumCount" min="0" />
</label>
<label>
of radius
<input type="number" name="limbsMediumRadius" min="0.05" step="0.05" />
</label>
<label>
Small:
<input type="number" name="limbsSmallCount" min="0" />
</label>
<label>
of radius
<input type="number" name="limbsSmallRadius" min="0.05" step="0.05" />
</label>
<label> Offset +/-<input type="number" name="limbsOffsetPercentage" min="0" step="0.1" /> </label>
</div>
<div>
<label> Torso Big: <input type="number" name="torsoThickCount" min="0" /> </label>
<label>
of radius
<input type="number" name="torsoThickRadius" min="0.05" step="0.05" />
</label>
<label>
Med:
<input type="number" name="torsoMediumCount" min="0" />
</label>
<label>
of radius
<input type="number" name="torsoMediumRadius" min="0.05" step="0.05" />
</label>
<label>
Small:
<input type="number" name="torsoSmallCount" min="0" />
</label>
<label>
of radius
<input type="number" name="torsoSmallRadius" min="0.05" step="0.05" />
</label>
<label> Offset +/-<input type="number" name="torsoOffsetPercentage" min="0" step="0.1" /> </label>
</div>
<div>
<label>
Camera Z position:
<input type="number" name="cameraZ" step="1" />
</label>
<label>
Camera Zoom:
<input type="number" name="cameraZoom" min="0" step="5" />
</label>
</div>
<div>
<label>
Amount of shapes:
<input type="number" name="amountShapes" min="0" step="1" />
</label>
</div>
<div>
<label>
Minimum poses score:
<input type="number" name="minPosesScore" step="1" />
</label>
<label>
Video input (refresh browser after Apply):
<select name="videoDeviceId"></select>
</label>
</div>
<button id="apply" type="submit">Apply</button>
<button id="reset">Reset</button>
</form>
<script type="module" src="./src/js/index.ts"></script>
</body>
</html>