-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (123 loc) · 4.93 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Music Emotion Recognition</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands"></script>
<style>
input[type=file] {
margin: 0 auto;
}
</style>
</head>
<body class="d-flex flex-column">
<div class="jumbotron text-center">
<h1>Music Emotion Recognizer</h1>
<p>In real-time!</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 text-center">
<h2>Training</h2>
<p>Start training by playing the desired type of music while pressing and holding down the corresponding button. Collect at least 150 examples of each as well as some examples of room ambience while pressing and holding down "Noise". When you're done hit the "Train" button.</p>
<div class="btn-group">
<button id="happy" class="btn btn-default" onmousedown="collect(0)" onmouseup="collect(null)">Happy</button>
<button id="angry" class="btn btn-default" onmousedown="collect(1)" onmouseup="collect(null)">Sad</button>
<button id="sad" class="btn btn-default" onmousedown="collect(2)" onmouseup="collect(null)">Angry</button>
<button id="noise" class="btn btn-default" onmousedown="collect(3)" onmouseup="collect(null)">Noise</button>
</div>
<p></p>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 text-center">
<button id="train" class="btn btn-primary" onclick="train()">Train</button>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 text-center">
<h2>Testing</h2>
<p>Once the model is trained, begin testing by hitting the "Listen" button. The app will then start listening to incoming audio and report the confidence values for each emotion in the table below.</p>
<p>If you're not happy with how the model is performing, you can go back and add some more examples, then retrain it.</p>
<button id="listen" class="btn btn-primary" onclick="listen()">Listen</button>
<p></p>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<table class="table table-bordered" id="emotions-table">
<thead>
<tr>
<th scope="col" class="text-center">Emotion</th>
<th scope="col" class="text-center">Confidence</th>
</tr>
</thead>
<tbody>
<tr>
<td>Happy</td>
<td>0.0</td>
</tr>
<tr>
<td>Sad</td>
<td>0.0</td>
</tr>
<tr>
<td>Angry</td>
<td>0.0</td>
</tr>
</tbody>
</table>
<div id="console"></div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 text-center">
<h2>Save Model</h2>
<p>Here you can save your trained model for later use. This will generate two files, one for the topology and one for the weights of the model.</p>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center">
<label for="model-name">Model Name:</label>
<input type="text" class="form-control" id="model-name" placeholder="my-model">
<p></p>
<button id="save" class="btn btn-primary" onclick="save()">Save</button>
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-8 text-center">
<h2>Load model</h2>
<p>Load the topology and weights separately then hit the "Listen" button to pick up from where you left off.</p>
<form>
<div class="form-group">
<label for="upload-json">Topology:</label>
<input type="file" class="form-control-file" id="upload-json" name="upload-json">
</div>
<div class="form-group">
<label for="upload-weights">Weights:</label>
<input type="file" class="form-control-file" id="upload-weights" name="upload-weights">
</div>
</form>
<button id="load" class="btn btn-primary" onclick="load()">Load</button>
</div>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>♩♩♩</small>
</div>
</footer>
</body>
<script src="js/index.js"></script>
</html>