tensorflow.js 练习语音识别控制轮播图（十二）

最新推荐文章于 2024-04-25 15:13:31 发布

（；￣ェ￣）。

最新推荐文章于 2024-04-25 15:13:31 发布

阅读量1.9k

点赞数 2

分类专栏： tensorflow.js笔记文章标签： tensorflow javascript 语音识别

本文链接：https://blog.csdn.net/qq_35496811/article/details/122625314

版权

tensorflow.js笔记专栏收录该内容

13 篇文章 3 订阅

订阅专栏

示例

const $ = require('jquery');
const tf = require('@tensorflow/tfjs');
const tfvis = require('@tensorflow/tfjs-vis');
const speechCommands = require('@tensorflow-models/speech-commands');

const MODEL_PATH = 'http://127.0.0.1:8080';

let transferRecognizer;
let curIndex = 0;

$(async () => {
  //创建语音识别器
  const recognizer = speechCommands.create(
    'BROWSER_FFT',
    null,
    MODEL_PATH + '/speech/model.json',
    MODEL_PATH + '/speech/metadata.json',
  );

  //确定模型已加载
  await recognizer.ensureModelLoaded();

  //创建迁移学习器，起名为“轮播图”用于区分
  transferRecognizer = recognizer.createTransfer('轮播图');

  const res = await fetch(MODEL_PATH + '/slider/data.bin');
  const arrayBuffer = await res.arrayBuffer();
  console.log(arrayBuffer);

  //加载的数据
  transferRecognizer.loadExamples(arrayBuffer);

  //查看加载的数据
  console.log(transferRecognizer.countExamples());

  //训练模型
  await transferRecognizer.train({
    epochs: 30,
    callback: tfvis.show.fitCallbacks(
      { name: "训练过程" },
      ['loss', 'acc'],
      { callbacks: ['onEpochEnd'] }
    )
  });
});

//是否监听语音
window.toggle = async (checked) => {
  console.log(checked);
  if (checked) {
    await transferRecognizer.listen(result => {
      const { scores } = result;
      const labels = transferRecognizer.wordLabels();
      const index = scores.indexOf(Math.max(...scores));
      console.log(labels[index]);
      play(labels[index]);
    }, {
      overlapFactor: 0.5,
      probabilityThreshold: 0.75
    });
  } else {
    transferRecognizer.stopListening();
  }
}

window.play = (label) => {
  const div = $('.slider>div');
  if (label == '上一张') {
    if (curIndex === 0) {
      return;
    }
    curIndex--;

  } else if (label == '下一张') {
    if (curIndex === $('img').length - 1) {
      return;
    }
    curIndex++;
  }

  div.css({
    transition: 'transform 1s',
    transform: `translateX(-${100 * curIndex}%)`
  });
}

html部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .slider {
      width: 600px;
      overflow: hidden;
      margin: 10px auto;
    }

    .slider>div {
      display: flex;
      align-items: center;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div>
      <img src="https://cdn.pixabay.com/photo/2019/10/29/15/57/vancouver-4587302__480.jpg" alt="" width="600">
      <img src="https://cdn.pixabay.com/photo/2019/10/31/07/14/coffee-4591159__480.jpg" alt="" width="600">
      <img src="https://cdn.pixabay.com/photo/2019/11/01/11/08/landscape-4593909__480.jpg" alt="" width="600">
      <img src="https://cdn.pixabay.com/photo/2019/11/02/21/45/maple-leaf-4597501__480.jpg" alt="" width="600">
      <img src="https://cdn.pixabay.com/photo/2019/11/02/03/13/in-xinjiang-4595560__480.jpg" alt="" width="600">
      <img src="https://cdn.pixabay.com/photo/2019/11/01/22/45/reschensee-4595385__480.jpg" alt="" width="600">
    </div>
  </div>
  监听开关：<input type="checkbox" onchange="toggle(this.checked)">
</body>
<script src="./t10.js"></script>

</html>

执行结果

（；￣ェ￣）。

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
tensorflow.js 练习语音识别控制轮播图（十二）

示例const $ = require('jquery');const tf = require('@tensorflow/tfjs');const tfvis = require('@tensorflow/tfjs-vis');const speechCommands = require('@tensorflow-models/speech-commands');const MODEL_PATH = 'http://127.0.0.1:8080';let transferRecogni
复制链接

扫一扫