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

这篇具有很好参考价值的文章主要介绍了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 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>

执行结果

音频 tensorflow.js io,tensorflow.js笔记,tensorflow,javascript,语音识别

 文章来源地址https://www.toymoban.com/news/detail-627675.html

到了这里,关于tensorflow.js 练习语音识别控制轮播图(十二)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js实现左右切换轮播图效果

    实现效果: 自动向右循环播放 鼠标悬停,移出继续播放 点击向右按钮,跳到下一张 点击向左按钮,跳到上一张 保证图片的过渡效果完整呈现后,才能跳到下一张 底部圆点随图片位置切换激活状态 实现思路: 把第一张图片复制到最后一张 当播放到最后一张时,无缝切换到

    2024年01月20日
    浏览(57)
  • JS常用插件 Swiper插件 实现轮播图

    Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架 中文官网地址: https://www.swiper.com.cn/ 点击查看 Swiper演示 ,里面的功能和样式十分丰富,根据自己的需求选择 中文教程 中详细介绍了如何使用Swiper API文档 中介绍了各个模块以及参数的详细信息,遇到不明白的参数可以

    2024年02月01日
    浏览(65)
  • 使用JS来实现轮播图的效果

    最好今天分享一个使用JS制作的轮播图效果 个人名片:  😊 作者简介:一名大一在校生,web前端开发专业  🤡  个人主页:几何小超  🐼 座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。  🎅**学习目标:  坚持每一次的学习打卡 ,学好前端 首先是HTML部分

    2024年01月20日
    浏览(49)
  • JS轮播图,鼠标放上暂停,自动播放

    1、图片能够自动轮播, 2、鼠标移入,轮播停止;移出继续轮播; 知识点:1、定时器:setInterval(); 2、鼠标移入事件:onmouseenter/onmouseover; 鼠标移出事件:onmouseleave/onmouseout; 难点:点击第一张图片,我们想要的效果是鼠标移出后,图片轮播到第二张图片,到事实是轮播到

    2024年02月12日
    浏览(45)
  • 网页轮播图制作(html+css+js)

            目的:用于自己做记录,记录制作的过程以及遇到的一些问题。内容参考来自b站的up主:黑马前端 的pink老师JavaScript基础语法课程。 (1)当鼠标经过轮播图,左右两边的按钮出现,离开则隐藏按钮; (2)点击左侧按钮,图片向右播放一张,以此类推,右侧同理;

    2024年02月08日
    浏览(55)
  • JS实现轮播图的三种简单方法。

    实现思路 这可能是轮播图最简单点的实现之一,通过更改图片的src来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下: 实现效果 实现思路 这可能是轮播图最简单点的实现

    2024年02月03日
    浏览(49)
  • 使用vant+video.js实现轮播图图片和视频轮播播放

    先上效果图 1. 安装 2. 在需要用到的页面引入 3. 具体页面使用 假设传给子组件的数组结构 按照步骤来使用,其他地方视频播放情况都还好,至少安卓是好的,只是点击播放和暂停时候,ios需要点击多下才能触发点击事件; 然后以为是video.js插件可能没更新,ios版本迭代超过

    2023年04月08日
    浏览(47)
  • 原生JS轮播图+自动播放+按钮切换+鼠标经过暂停+底部圆点切换

    手搓一个原生的JS轮播图,HTML部分就随意写了一点,重点的逻辑还是在JS中,可以实现自动播放banner图片,还有按钮点击切换banner和底部小圆点,点击底部小圆点可以切换banner图等功能,先上个图吧,是不是很丰富`_`  先放 JS部分 的代码吧,主要用到了点击事件、定时器等技

    2024年02月06日
    浏览(55)
  • vue3 实现门户网站页面鼠标滚轮控制页面上下滚动---类似轮播图

    案例参考:首页_CNESA 储能研究平台 //监听鼠标滚动事件  window.addEventListener(\\\'mousewheel\\\', debounce(methodB,300), true)||window.addEventListener(\\\"DOMMouseScroll\\\",debounce(methodB,300),false) const debounce = (func, wait) ={         let timeout;         return  function() {             let context = this;            

    2024年02月12日
    浏览(80)
  • 基于html+js实现轮播图(自动轮播、左右按钮、小圆点点击及切换图片)

    使用html和js实现的一个简单小练习轮播图。大概功能主要是: 1、使用时间函数自动切换图片; 2、在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型,让鼠标移入,图片暂停,移出,图片恢复轮播; 3、在按钮的父节点身上绑定事件代理,事

    2024年02月11日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包