بازشناسی گفتار در جاوا اسکریپت | به زبان خیلی ساده

1<div class="demo">
2    <div>
3        <label class="form-switch">
4            <input type="checkbox" id="audio-switch">
5            Microphone
6        </label>
7        <div id="demo-loading" class="hidden">Loading...</div>
8    </div>
9    <div id="sp-cmd-wrapper" class="grid"></div>
10</div>

1const wrapperElement = document.getElementById('sp-cmd-wrapper');
2for (let word of wordList) {
3    wrapperElement.innerHTML += `<div id='word-${word}'>${word}</div>`;
4}

1document.getElementById("audio-switch").addEventListener('change', (event) => {
2    if(event.target.checked) {
3        if(modelLoaded) {
4            startListening();
5        }else{
6            loadModel();
7        }
8    } else {
9        stopListening();
10    }   
11});

1async function loadModel() { 
2    // Show the loading element
3    const loadingElement = document.getElementById('demo-loading');
4    loadingElement.classList.remove('hidden');
5    
6    recognizer = speechCommands.create("BROWSER_FFT");  
7    await recognizer.ensureModelLoaded()
8    
9    words = recognizer.wordLabels();
10    modelLoaded = true;
11    
12    // Hide the loading element
13    loadingElement.classList.add('hidden');
14    startListening();
15}

1function startListening() {
2    recognizer.listen(({scores}) => {
3    
4        scores = Array.from(scores).map((s, i) => ({score: s, word: words[i]}));
5      
6        scores.sort((s1, s2) => s2.score - s1.score);
7        const elementId = `word-${scores[0].word}`;
8        document.getElementById(elementId).classList.add('active');
9        
10        // This is just for removing the highlight after 2.5 seconds
11        setTimeout(() => {
12            document.getElementById(elementId).classList.remove('active');
13        }, 2500);
14    }, 
15    {
16        probabilityThreshold: 0.70
17    });
18}

1function stopListening(){
2    recognizer.stopListening();
3}

1<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
2<script src="https://unpkg.com/@tensorflow-models/speech-commands"></script>
3
4<script type="text/javascript">
5    let recognizer;
6    let words;
7    const wordList = ["zero","one","two","three","four","five","six","seven","eight","nine", "yes", "no", "up", "down", "left", "right", "stop", "go"];
8    let modelLoaded = false;
9    
10    document.addEventListener('DOMContentLoaded', () => {
11        const wrapperElement = document.getElementById('sp-cmd-wrapper');
12        for (let word of wordList) {
13            wrapperElement.innerHTML += `<div class='col-3 col-md-6'><div id='word-${word}' class='badge'>${word}</div></div>`;
14        };
15        
16        document.getElementById("audio-switch").addEventListener('change', (event) => {
17            if(event.target.checked) {
18                if(modelLoaded) {
19                    startListening();
20                }else{
21                    loadModel();
22                }
23            } else {
24                stopListening();
25            }   
26        });
27    });
28    
29    async function loadModel() { 
30        // Show the loading element
31        const loadingElement = document.getElementById('demo-loading');
32        loadingElement.classList.remove('hidden');
33     
34        recognizer = speechCommands.create("BROWSER_FFT");  
35        await recognizer.ensureModelLoaded()
36        
37        words = recognizer.wordLabels();
38        modelLoaded = true;
39        
40        // Hide the loading element
41        loadingElement.classList.add('hidden');
42        startListening();
43    }
44    
45    function startListening() {
46        recognizer.listen(({scores}) => {
47            scores = Array.from(scores).map((s, i) => ({score: s, word: words[i]}));
48            
49            // After that we sort the array by score descending
50            scores.sort((s1, s2) => s2.score - s1.score);
51            
52            // And we highlight the word with the highest score
53            const elementId = `word-${scores[0].word}`;
54            document.getElementById(elementId).classList.add('active');
55            
56            // This is just for removing the highlight after 2.5 seconds
57            setTimeout(() => {
58                document.getElementById(elementId).classList.remove('active');
59            }, 2500);
60        }, 
61        {
62            probabilityThreshold: 0.70
63        });
64    }
65    
66    function stopListening(){
67        recognizer.stopListening();
68    }
69</script>
70
71<div class="demo">
72    Please enable the microphone checkbox and authorize this site to access the microphone.
73    <br />
74    Once the process finished loading speak one of the word bellow and see the magic happen.
75    <br /><br />
76    <div>
77        <label class="form-switch">
78            <input type="checkbox" id="audio-switch">
79            Microphone
80        </label>
81        <div id="demo-loading" class="hidden">Loading...</div>
82    </div>
83    <div id="sp-cmd-wrapper" class="grid"></div>
84</div>