-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (101 loc) · 2.99 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
<html>
<head>
<title>Phoneme Detector</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Aldrich&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Comfortaa:wght@300&family=Dosis:wght@200;300;400&family=Londrina+Solid:wght@100;300;400&family=Passion+One&family=Poiret+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/addons/p5.sound.min.js"></script>
<meta charset="utf-8" />
</head>
<style>
#OUTPUT {
position: fixed;
top: 110px;
right: 10px;
font-size: 24px;
}
#topPrediction {
font-weight: bold;
position: fixed;
top: 10px;
right: 10px;
font-size: 100px;
}
#hablado {
font-weight: bold;
position: fixed;
top: 350px;
right: 10px;
font-size: 24px;
}
canvas {
display: block;
}
html,
body {
margin: 0;
padding: 0;
}
</style>
<body>
<span id="topPrediction"></span>
<span id="OUTPUT"></span>
<span id="hablado"></span>
<button id="toggleMicrophone" disabled>enable microphone</button>
<br />
<main></main>
<script src="/src/probability_chart.js"></script>
<canvas width="500" height="200" id="spectrum"></canvas>
<br />
<button id="train" disabled>train</button>
<button id="predict" disabled>predict</button>
<label
>upload data
<input type="file" accept="application/JSON" id="uploadClassifications"
/></label>
<br />
<!-- THIS IS USED TO GENERATE VALIDATIONS, NOT IMPORTANT IN GENERAL-->
<label
>upload validation
<input type="file" accept="application/JSON" id="uploadValidation"
/></label>
<button id="validate">validate</button>
<!-- -->
<br />
<button id="record">start recording</button>
<button id="print">print</button>
<br />
<label
>Volume threshold
<input
step="0.005"
type="number"
class="threshold"
min="0"
max="1"
value="0.02"
/></label>
<label>
<input
step="0.005"
type="range"
class="threshold"
min="0"
max="1"
value="0.02"
/>
</label>
<br />
</body>
<script src="/src/ext/ml5.min.js"></script>
<script src="/src/ext/utils.js"></script>
<script src="/src/main_script.js"></script>
<script src="/src/ext/essentia.js"></script>
<script src="/src/ext/ringbuf.js"></script>
<script src="/src/ext/meyda.min.js"></script>
<script src="/src/ext/meyda.js"></script>
</html>