iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
0
自我挑戰組

Tensorflow.js初學筆記系列 第 22

Day21 TensorFlow.js Limited-Vocabulary Speech Recognition

  • 分享至 

  • xImage
  •  

今天一樣只有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>

上一篇
Day20 TensorFlow.js 即時物件辨識(背後的技術)Part2
下一篇
Day22 TensorFlow.js 使用PoseNet
系列文
Tensorflow.js初學筆記27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言