CPSC581-Project2/test.html at main · Andrew-Musa/CPSC581-Project2 · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <title>Audio Classifier</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/4.7.0/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        #result {
            font-size: 24px;
            margin: 20px;
            padding: 20px;
            border-radius: 8px;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div id="result">Listening...</div>

    <script>
        async function loadMetadata() {
            const response = await fetch('./models/tm-my-audio-model/metadata.json');
            return await response.json();
        }

        async function createModel() {
            try {
                const metadata = await loadMetadata();

                const recognizer = speechCommands.create(
                    "BROWSER_FFT",
                    undefined,
                    './models/tm-my-audio-model/model.json',
                    metadata
                );

                await recognizer.ensureModelLoaded();
                return recognizer;
            } catch (error) {
                console.error('Error creating model:', error);
                document.getElementById('result').textContent = 'Error loading model: ' + error.message;
                throw error;
            }
        }

        async function init() {
            try {
                const recognizer = await createModel();
                const classLabels = recognizer.wordLabels();
                const resultDiv = document.getElementById('result');

                recognizer.listen(result => {
                    const scores = result.scores;
                    const maxScore = Math.max(...scores);
                    const maxScoreIndex = scores.indexOf(maxScore);
                    const detectedLabel = classLabels[maxScoreIndex];

                    resultDiv.textContent = detectedLabel === 'psps' ? 'psps' : 'background noise';
                }, {
                    includeSpectrogram: true,
                    probabilityThreshold: 0.99,
                    invokeCallbackOnNoiseAndUnknown: true,
                    overlapFactor: 0.5
                });
            } catch (error) {
                console.error('Error in init:', error);
                document.getElementById('result').textContent = 'Error initializing: ' + error.message;
            }
        }

        // Start the audio classification when the page loads
        window.addEventListener('load', () => init());
    </script>
</body>
</html>