-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathindex.html
480 lines (471 loc) · 31.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AudioDeepFakeDetection</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css" integrity="sha256-fSct41tBD7FlN3VQzfnE06gPu8yWHhEZFOTVwOr1cp8=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css" integrity="sha256-DfWjNxDkM94fVBWx1H5BMMp0Zq7luBlV8QRcSES7s+0=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<script defer src="https://unpkg.com/img-comparison-slider@7/dist/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/img-comparison-slider@7/dist/styles.css"/>
<style type="text/css">
img-comparison-slider {
--divider-width: 5px;
--divider-color: #ff0000;
--default-handle-color: #ff0000;
--default-handle-opacity: 1.0;
--default-handle-width: clamp(40px, 10vw, 200px);
}
img-comparison-slider:focus {
--default-handle-opacity: 0;
}
.custom-animated-handle {
transition: transform 0.2s;
}
.slider-with-animated-handle:hover .custom-animated-handle {
transform: scale(1.2);
}
.loader-wrapper {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
opacity: 0;
z-index: -1;
transition: opacity 0s;
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
}
.loader-wrapper .loader {
height: 40px;
width: 40px;
}
.loader-wrapper.is-active {
opacity: 1;
z-index: 1;
}
.is-loading {
position: relative;
}
.box {
padding: 20px;
position: relative;
margin-top: 15px;
}
</style>
<script type="text/javascript">
let output_to_result_mapping = {
"0": "Fake",
"1": "Real"
}
let cached_inference = {
"LJ049-0058":"1",
"LJ043-0062":"1",
"LJ042-0089":"1",
"LJ049-0221":"1",
"LJ042-0238":"1",
"LJ045-0202":"1",
"LJ048-0265":"1",
"LJ049-0103":"1",
"LJ046-0243":"1",
"LJ049-0079":"1",
"LJ047-0048":"1",
"LJ043-0069":"1",
"LJ048-0178":"1",
"LJ044-0233":"1",
"LJ042-0222":"1",
"LJ040-0165":"1",
"LJ040-0073":"1",
"LJ045-0182":"1",
"LJ045-0231":"1",
"LJ050-0082":"1",
"LJ049-0058_gen":"0",
"LJ043-0062_gen":"0",
"LJ042-0089_gen":"0",
"LJ049-0221_gen":"0",
"LJ042-0238_gen":"0",
"LJ045-0202_gen":"0",
"LJ048-0265_gen":"0",
"LJ049-0103_gen":"0",
"LJ046-0243_gen":"0",
"LJ049-0079_gen":"0",
"LJ047-0048_gen":"0",
"LJ043-0069_gen":"0",
"LJ048-0178_gen":"0",
"LJ044-0233_gen":"0",
"LJ042-0222_gen":"0",
"LJ040-0165_gen":"0",
"LJ040-0073_gen":"0",
"LJ045-0182_gen":"0",
"LJ045-0231_gen":"0",
"LJ050-0082_gen":"0"
};
let cached_transcript = {
"LJ040-0073":"Marguerite Oswald withdrew Lee from the orphans' home and took him with her to Dallas when he was a little over four years old.",
"LJ040-0073_gen":"Marguerite Oswald withdrew Lee from the orphans' home and took him with her to Dallas when he was a little over four years old.",
"LJ040-0165":"Lee's withdrawal was also noted by Mrs. Siegel, who described him as a, quote, seriously detached, withdrawn youngster, end quote.",
"LJ040-0165_gen":"Lee's withdrawal was also noted by Mrs. Siegel, who described him as a, quote, seriously detached, withdrawn youngster, end quote.",
"LJ042-0089":"I leave Embassy, elated at this showdown, returning to my hotel I feel now my energies are not spent in vain.",
"LJ042-0089_gen":"I leave Embassy, elated at this showdown, returning to my hotel I feel now my energies are not spent in vain.",
"LJ042-0222":"Judged by his other statements and writings, however, he appears to have indicated his true feelings in the set of answers first presented",
"LJ042-0222_gen":"Judged by his other statements and writings, however, he appears to have indicated his true feelings in the set of answers first presented",
"LJ042-0238":"freedom of speech, travel outspoken opposition to unpopular policies, freedom to believe in god, end quote, while the Soviet Union did not.",
"LJ042-0238_gen":"freedom of speech, travel outspoken opposition to unpopular policies, freedom to believe in god, end quote, while the Soviet Union did not.",
"LJ043-0062":"Oswald's defection, his interest in the Soviet Union, and his activities on behalf of the Fair Play for Cuba Committee",
"LJ043-0062_gen":"Oswald's defection, his interest in the Soviet Union, and his activities on behalf of the Fair Play for Cuba Committee",
"LJ043-0069":"the evidence indicates that Oswald usually told his prospective employers and employment counselors that he had recently been discharged from the Marine Corps.",
"LJ043-0069_gen":"the evidence indicates that Oswald usually told his prospective employers and employment counselors that he had recently been discharged from the Marine Corps.",
"LJ044-0233":"Oswald was carrying only thirteen dollars, eighty-seven cents at the time of his arrest, although he had left, apparently by design,",
"LJ044-0233_gen":"Oswald was carrying only thirteen dollars, eighty-seven cents at the time of his arrest, although he had left, apparently by design,",
"LJ045-0182":"Instead of returning to Irving on November fifteen for his customary weekend visit, he remained in Dallas at his wife's suggestion because of the birthday party.",
"LJ045-0182_gen":"Instead of returning to Irving on November fifteen for his customary weekend visit, he remained in Dallas at his wife's suggestion because of the birthday party.",
"LJ045-0202":"He had great difficulty in establishing meaningful relations with other people. Except for his family he was completely alone.",
"LJ045-0202_gen":"He had great difficulty in establishing meaningful relations with other people. Except for his family he was completely alone.",
"LJ045-0231":"two officers have testified that at the time of his arrest Oswald said something to the effect that, quote, it's all over now, end quote.",
"LJ045-0231_gen":"two officers have testified that at the time of his arrest Oswald said something to the effect that, quote, it's all over now, end quote.",
"LJ046-0243":"if the presence in Dallas of the Stevenson pickets might have created a danger for the President on a visit to that city,",
"LJ046-0243_gen":"if the presence in Dallas of the Stevenson pickets might have created a danger for the President on a visit to that city,",
"LJ047-0048":"while Oswald remained somewhat evasive at this interview, he was not antagonistic and seemed generally to be settling down.",
"LJ047-0048_gen":"while Oswald remained somewhat evasive at this interview, he was not antagonistic and seemed generally to be settling down.",
"LJ048-0178":"In accordance with its regular procedures, no survey or other check was made by the Secret Service, or by any other law enforcement agency at its request,",
"LJ048-0178_gen":"In accordance with its regular procedures, no survey or other check was made by the Secret Service, or by any other law enforcement agency at its request,",
"LJ048-0265":"after which time a very moderate use of liquor will not be considered a violation. However, all members of the White House Detail",
"LJ048-0265_gen":"after which time a very moderate use of liquor will not be considered a violation. However, all members of the White House Detail",
"LJ049-0058":"Secondly, agents are instructed to remove the President as quickly as possible from known or impending danger.",
"LJ049-0058_gen":"Secondly, agents are instructed to remove the President as quickly as possible from known or impending danger.",
"LJ049-0079":"Many changes have already been made and others are contemplated, some of them in response to the Commission's questions and informal suggestions.",
"LJ049-0079_gen":"Many changes have already been made and others are contemplated, some of them in response to the Commission's questions and informal suggestions.",
"LJ049-0103":"whether or not the act is committed while the victim is in the performance of his official duties or on account of such performance.",
"LJ049-0103_gen":"whether or not the act is committed while the victim is in the performance of his official duties or on account of such performance.",
"LJ049-0221":"perhaps upon recommendations based on further studies by the Cabinet-level committee recommended above or the National Security Council.",
"LJ049-0221_gen":"perhaps upon recommendations based on further studies by the Cabinet-level committee recommended above or the National Security Council.",
"LJ050-0082":"the interest of the Secret Service goes beyond information on individuals or groups threatening to cause harm or embarrassment to the President.",
"LJ050-0082_gen":"the interest of the Secret Service goes beyond information on individuals or groups threatening to cause harm or embarrassment to the President."
};
function processAudioSelection() {
let audioFileName = document.getElementById("audio-selector").value;
if (!audioFileName) {
return;
}
let sound = document.createElement('audio');
sound.id = 'selected-audio-player';
sound.controls = 'controls';
let divider = document.createElement("br");
let transcriptHeader = document.createTextNode("Transcript: ");
let transcriptContent = document.createElement("em");
transcriptContent.innerHTML = cached_transcript[audioFileName];
let newChildNodes = [sound, divider, transcriptHeader, transcriptContent];
fetch('https://markhh.com/AudioDeepFakeDetection/samples/' + audioFileName + ".wav")
.then(response => response.blob())
.then(blob=>sound.src = URL.createObjectURL(blob))
sound.type = 'audio/wav';
let audioElement = document.getElementById('selected_audio_container');
audioElement.replaceChildren(...newChildNodes);
}
function getCachedAudioResult() {
let randomTimeout = Math.round(Math.random() * (2000 - 1000)) + 1000;
let loaderWrapper = document.getElementsByClassName("loader-wrapper")[0];
loaderWrapper.classList.add("is-active");
setTimeout(function() {
loaderWrapper.classList.remove("is-active");
}, randomTimeout);
let audioFileName = document.getElementById("audio-selector").value;
let resultTags = [];
if (audioFileName) {
let resultHeader = document.createTextNode("The audio file is: ");
let resultContent = document.createElement("b");
resultContent.innerHTML = output_to_result_mapping[cached_inference[audioFileName]];
resultTags.push(resultHeader);
resultTags.push(resultContent);
} else {
let resultContent = document.createTextNode("Please select an audio file first.");
resultTags.push(resultContent);
}
let resultElement = document.getElementById('audio_result_container');
resultElement.replaceChildren(...resultTags);
}
</script>
</head>
<body>
<nav class="navbar is-info" role="navigation" aria-label="main navigation" id="top">
<div class="navbar-brand">
<a class="navbar-item" href=".">
<b>Audio DeepFake Detection • SUTD 2022 50.039 DL Project</b>
</a>
</div>
<div class="navbar-end">
<a class="navbar-item" href="https://github.com/MarkHershey/AudioDeepFakeDetection.git" target="_blank"
rel="noopener noreferrer">
Made with <strong>♥</strong> by Mark, James, Peiyuan, Madhu, Shyam
</a>
</div>
</nav>
<div class="container">
<br>
<div class="columns">
<div class="column is-full has-text-justified">
<article class="message is-primary" id="introduction">
<div class="message-header">
<p>Introduction to Exploratory GUI</p>
</div>
<div class="message-body">
<p>This minimalist GUI serves as a method to explore the results of our Deep Learning group project!</p>
<p>More concretely, you will be able to interact with some of the data and findings to better understand the intuition and implications of our results.</p>
<p>Without further ado, let's explore!</p>
</div>
</article>
<article class="message" id="results">
<div class="message-header">
<p>Overall Results</p>
</div>
<div class="message-body">
<p>We will first go through the overall results of our various models.</p>
<p>Note that the model names are in the following format: <i>network_feature_{in/out_dist}</i>.</p>
<br>
<table class="table has-text-centered mx-auto is-bordered is-striped is-fullwidth">
<thead><tr class="th is-selected"><td>Experiment</td><td>Accuracy</td><td><abbr title="F1 score">F1</abbr></td><td><abbr title="Area Under the Receiver Operating Characteristic Curve">ROC AUC</abbr></td><td><abbr title="Equal Error Rate">EER</abbr></td></tr></thead>
<tr><td>WaveRNN_wave_I</td><td>0.653</td><td>0.649</td><td>0.6527</td><td>0.3502</td></tr>
<tr><td>WaveLSTM_wave_I</td><td>0.749</td><td>0.742</td><td>0.7494</td><td>0.2640</td></tr>
<tr><td>ShallowCNN_lfcc_O</td><td>0.937</td><td>0.939</td><td>0.9366</td><td>0.0926</td></tr>
<tr><td>TSSD_wave_O</td><td>0.956</td><td>0.957</td><td>0.9561</td><td>0.0561</td></tr>
<tr><td>SimpleLSTM_mfcc_I</td><td>0.960</td><td>0.960</td><td>0.9601</td><td>0.0404</td></tr>
<tr><td>SimpleLSTM_lfcc_O</td><td>0.965</td><td>0.965</td><td>0.9651</td><td>0.0441</td></tr>
<tr><td>SimpleLSTM_lfcc_I</td><td>0.996</td><td>0.996</td><td>0.9962</td><td>0.0042</td></tr>
<tr><td>ShallowCNN_mfcc_I</td><td>0.997</td><td>0.997</td><td>0.9968</td><td>0.0049</td></tr>
<tr><td>TSSD_wave_I</td><td>0.999</td><td>0.999</td><td>0.9994</td><td>0.0011</td></tr>
<tr><td>ShallowCNN_lfcc_I</td><td>1.000</td><td>1.000</td><td>0.9996</td><td>0.0004</td></tr>
</table>
</div>
</article>
<article class="message is-link" id="showcase">
<div class="message-header">
<p>Try It Out!</p>
</div>
<div class="message-body">
<p>In this section, you can select either a real audio or a fake audio from a subset of our dataset, listen to it, and see how our model performs. Any audio file with a "<i>_gen</i>" suffix is fake, otherwise it is real. The selected model is our best model so far: <em>ShallowCNN_lfcc_I</em>.</p>
<div class="control has-icons-left" style="margin-top:10px; margin-bottom:10px;">
<div class="select is-rounded is-link">
<select id="audio-selector" onchange="processAudioSelection();">
<option value="" selected="selected" disabled hidden>Choose here</option>
<option value="LJ049-0058">LJ049-0058</option>
<option value="LJ043-0062">LJ043-0062</option>
<option value="LJ042-0089">LJ042-0089</option>
<option value="LJ049-0221">LJ049-0221</option>
<option value="LJ042-0238">LJ042-0238</option>
<option value="LJ045-0202">LJ045-0202</option>
<option value="LJ048-0265">LJ048-0265</option>
<option value="LJ049-0103">LJ049-0103</option>
<option value="LJ046-0243">LJ046-0243</option>
<option value="LJ049-0079">LJ049-0079</option>
<option value="LJ047-0048">LJ047-0048</option>
<option value="LJ043-0069">LJ043-0069</option>
<option value="LJ048-0178">LJ048-0178</option>
<option value="LJ044-0233">LJ044-0233</option>
<option value="LJ042-0222">LJ042-0222</option>
<option value="LJ040-0165">LJ040-0165</option>
<option value="LJ040-0073">LJ040-0073</option>
<option value="LJ045-0182">LJ045-0182</option>
<option value="LJ045-0231">LJ045-0231</option>
<option value="LJ050-0082">LJ050-0082</option>
<option value="LJ049-0058_gen">LJ049-0058_gen</option>
<option value="LJ043-0062_gen">LJ043-0062_gen</option>
<option value="LJ042-0089_gen">LJ042-0089_gen</option>
<option value="LJ049-0221_gen">LJ049-0221_gen</option>
<option value="LJ042-0238_gen">LJ042-0238_gen</option>
<option value="LJ045-0202_gen">LJ045-0202_gen</option>
<option value="LJ048-0265_gen">LJ048-0265_gen</option>
<option value="LJ049-0103_gen">LJ049-0103_gen</option>
<option value="LJ046-0243_gen">LJ046-0243_gen</option>
<option value="LJ049-0079_gen">LJ049-0079_gen</option>
<option value="LJ047-0048_gen">LJ047-0048_gen</option>
<option value="LJ043-0069_gen">LJ043-0069_gen</option>
<option value="LJ048-0178_gen">LJ048-0178_gen</option>
<option value="LJ044-0233_gen">LJ044-0233_gen</option>
<option value="LJ042-0222_gen">LJ042-0222_gen</option>
<option value="LJ040-0165_gen">LJ040-0165_gen</option>
<option value="LJ040-0073_gen">LJ040-0073_gen</option>
<option value="LJ045-0182_gen">LJ045-0182_gen</option>
<option value="LJ045-0231_gen">LJ045-0231_gen</option>
<option value="LJ050-0082_gen">LJ050-0082_gen</option>
</select>
</div>
<span class="icon is-small is-left has-text-link">
<i class="fas fa-volume-high"></i>
</span>
</div>
<div id="selected_audio_container" style="margin-bottom:10px;">
<audio id="selected-audio-player" controls>
<source src="" type="audio/wav">
Your browser does not support the audio element.
</audio>
<br>
<p>Transcript: <em></em></p>
</div>
<button id="submit_button" class="button is-link" onclick="getCachedAudioResult();">Predict</button>
<br>
<div class="box">
<div class="loader-wrapper">
<div class="loader is-loading"></div>
</div>
<div id="audio_result_container">
<p>The prediction result will appear here.</p>
</div>
</div>
</div>
</article>
<article class="message is-warning" id="anomalies">
<div class="message-header">
<p>Interesting Results</p>
</div>
<div class="message-body content">
<p>There are 2 data points that 5 of our classifier models have wrongly predicted. The data point names are:</p>
<ul>
<li>
<p>LJ045-0047</p>
<audio controls>
<source src="./samples/anomalies/LJ045-0047.wav" type="audio/wav">
Your browser does not support the audio tag.
</audio>
<p>Transcript: <em>and I told him that</em></p>
</li>
<li>
<p>LJ045-0087</p>
<audio controls>
<source src="./samples/anomalies/LJ045-0087.wav" type="audio/wav">
Your browser does not support the audio tag.
</audio>
<p>Transcript: <em>Mrs. Oswald told another of her friends that Oswald was very cold to her, that they very seldom had sexual relations</em></p>
</li>
</ul>
<p>The above audio files are the real human voices, obtained from the LJ Speech dataset. Here are the corresponding fake ones generated by MelGAN:</p>
<ul>
<li>
<p>LJ045-0047_gen</p>
<audio controls>
<source src="./samples/anomalies/LJ045-0047_gen.wav" type="audio/wav">
Your browser does not support the audio tag.
</audio>
<p>Transcript: <em>and I told him that</em></p>
</li>
<li>
<p>LJ045-0087_gen</p>
<audio controls>
<source src="./samples/anomalies/LJ045-0087_gen.wav" type="audio/wav">
Your browser does not support the audio tag.
</audio>
<p>Transcript: <em>Mrs. Oswald told another of her friends that Oswald was very cold to her, that they very seldom had sexual relations</em></p>
</li>
</ul>
<p>If you try to listen to the audio files, they are very similar and virtually indistinguishable to the human ear. If you pay very close attention, you can make out faint distortions in the fake audio files generated by MelGAN. Isolated from each other and without a direct comparison, it is quite difficult to identify and differentiate them. Let's take a closer look at their features.</p>
</div>
</article>
<article class="message is-danger" id="visualizations">
<div class="message-header">
<p>Audio Features</p>
</div>
<div class="message-body content">
<p>Let's take a look at their waveforms first. You can drag the slider across the images to observe the differences.</p>
<ul>
<li>
<p>LJ045-0047</p>
<img-comparison-slider class="slider-with-animated-handle">
<img slot="first" src="./assets/waveform/LJ045-0047-waveform.png" />
<img slot="second" src="./assets/waveform/LJ045-0047_gen-waveform.png" />
<svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
<path stroke="#ff0000" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#ff0000" vector-effect="non-scaling-stroke"></path>
</svg>
</img-comparison-slider>
</li>
<li>
<p>LJ045-0087</p>
<img-comparison-slider class="slider-with-animated-handle">
<img slot="first" src="./assets/waveform/LJ045-0087-waveform.png" />
<img slot="second" src="./assets/waveform/LJ045-0087_gen-waveform.png" />
<svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
<path stroke="#ff0000" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#ff0000" vector-effect="non-scaling-stroke"></path>
</svg>
</img-comparison-slider>
</li>
</ul>
<p>Next, we will take a look at their spectrograms.</p>
<ul>
<li>
<p>LJ045-0047</p>
<img-comparison-slider class="slider-with-animated-handle">
<img slot="first" src="./assets/spectrogram/LJ045-0047-spectrogram.png" />
<img slot="second" src="./assets/spectrogram/LJ045-0047_gen-spectrogram.png" />
<svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
<path stroke="#ff0000" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#ff0000" vector-effect="non-scaling-stroke"></path>
</svg>
</img-comparison-slider>
</li>
<li>
<p>LJ045-0087</p>
<img-comparison-slider class="slider-with-animated-handle">
<img slot="first" src="./assets/spectrogram/LJ045-0087-spectrogram.png" />
<img slot="second" src="./assets/spectrogram/LJ045-0087_gen-spectrogram.png" />
<svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
<path stroke="#ff0000" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#ff0000" vector-effect="non-scaling-stroke"></path>
</svg>
</img-comparison-slider>
</li>
</ul>
<p>Now, we will take a look at their MFCC features.</p>
<ul>
<li>
<p>LJ045-0047</p>
<img-comparison-slider class="slider-with-animated-handle">
<img slot="first" src="./assets/MFCC/LJ045-0047-MFCC.png" />
<img slot="second" src="./assets/MFCC/LJ045-0047_gen-MFCC.png" />
<svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
<path stroke="#ff0000" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#ff0000" vector-effect="non-scaling-stroke"></path>
</svg>
</img-comparison-slider>
</li>
<li>
<p>LJ045-0087</p>
<img-comparison-slider class="slider-with-animated-handle">
<img slot="first" src="./assets/MFCC/LJ045-0087-MFCC.png" />
<img slot="second" src="./assets/MFCC/LJ045-0087_gen-MFCC.png" />
<svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
<path stroke="#ff0000" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#ff0000" vector-effect="non-scaling-stroke"></path>
</svg>
</img-comparison-slider>
</li>
</ul>
<p>And finally, we will take a look at the LFCC features.</p>
<ul>
<li>
<p>LJ045-0047</p>
<img-comparison-slider class="slider-with-animated-handle">
<img slot="first" src="./assets/LFCC/LJ045-0047-LFCC.png" />
<img slot="second" src="./assets/LFCC/LJ045-0047_gen-LFCC.png" />
<svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
<path stroke="#ff0000" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#ff0000" vector-effect="non-scaling-stroke"></path>
</svg>
</img-comparison-slider>
</li>
<li>
<p>LJ045-0087</p>
<img-comparison-slider class="slider-with-animated-handle">
<img slot="first" src="./assets/LFCC/LJ045-0087-LFCC.png" />
<img slot="second" src="./assets/LFCC/LJ045-0087_gen-LFCC.png" />
<svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
<path stroke="#ff0000" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#ff0000" vector-effect="non-scaling-stroke"></path>
</svg>
</img-comparison-slider>
</li>
</ul>
<p>As you can see, all of the features are quite similar. The main blocks in each of the features are mostly the same, and they only differ in the finer details. Hence, this explains why the models have a harder time in differentiating them.</p>
</div>
</article>
</div>
</div>
</body>
</html>