Day21 TensorFlow.js Limited-Vocabulary Speech Recognition

第 11 屆 iThome 鐵人賽

DAY 22

自我挑戰組

Tensorflow.js初學筆記系列第 22 篇

11th鐵人賽

qu4qu426com123

2019-10-08 22:04:22

925 瀏覽

分享至

今天一樣只有code

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>命令(指定的語音)辨識</title>
    <!-- TensorFlow.js Core -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js">
    </script>
    <!-- TensorFlow.js speech-commands-->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands"></script>
    </script>
</head>

<body>
    <ul id="command">

    </ul>
    <script>
        let command_list_dom_cache = [];

        function listAllCommand(command_array) {
            let command_list = document.getElementById('command');
            command_array.map((element, i) => {
                let command_dom = document.createElement('li');
                command_dom.innerHTML = element;
                command_list.appendChild(command_dom);
                command_list_dom_cache[i] = command_dom;
            });
        }

        function showCommand(scores) {
            let high_score = 0;
            scores.map((score, i) => {
                command_list_dom_cache[i].score = score;
                if (score > high_score) high_score = score;
            })
            command_list_dom_cache.map((element) => {
                element.style.color = "black";
                if (element.score >= high_score) {
                    element.style.color = "red";
                }
            })

        }
        //need to allow third-party cookies
        async function app() {
            //use FFT in browser
            let recognizer = speechCommands.create('BROWSER_FFT');
            //await for model loading
            await recognizer.ensureModelLoaded();
            //read all exist word label
            const commands = recognizer.wordLabels();
            //write to command list 
            listAllCommand(commands);
            recognizer.listen(result => {
                showCommand(result.scores)
            }, {
                probabilityThreshold: 0.9
            })
        }
        app();
    </script>
</body>

</html>