前端基于tensorflow实现语音识别

效果图：

ai模型语音识别例子：

<!--
 * @Author: {haoxian1990} 149322439@qq.com
 * @Date: 2023-02-24 20:01:05
 * @LastEditors: {haoxian1990} 149322439@qq.com
 * @LastEditTime: 2023-02-25 10:53:02
 * @Description: 
-->
<template>
  <h3>语音识别</h3>
  <div id="result"></div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import * as speechCommands from '@tensorflow-models/speech-commands';
import * as tf from '@tensorflow/tfjs';
import '@tensorflow/tfjs-backend-webgl';
// const MODEL_PATH = 'http://127.0.0.1:8080/speech';
const state = reactive({});

onMounted(() => {
  const backend = tf.getBackend();
  console.log(`当前使用的后端为: ${backend}`);
  // tf.backend().setBackend('webgl');

  init();
});

async function init() {
  const recognizer = speechCommands.create('BROWSER_FFT');

  await recognizer.ensureModelLoaded();
  //查看可识别单词
  const labels = recognizer.wordLabels();
  console.log(labels);

  //创建标签
  const element = document.querySelector('#result');
  element.innerHTML = labels.map((item) => `<div>${item}</div>`).join('');

  //设置语音监听
  recognizer.listen(
    (res) => {
      //找出识别最接近的值
      const { scores } = res;
      const maxValue = Math.max(...scores);
      const index = scores.indexOf(maxValue);
      console.log(labels[index]);

      element.innerHTML = labels
        .map((l, i) => {
          return `<div style="background:${i === index && 'green'}">${l}</div>`;
        })
        .join('');
    },
    {
      //识别频率
      overlapFactor: 0.3,
      //有75%以上接近，打印结果
      probabilityThreshold: 0.75,
    }
  );
}
</script>
<style scoped></style>