示例
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>
执行结果
文章来源:https://www.toymoban.com/news/detail-627675.html
文章来源地址https://www.toymoban.com/news/detail-627675.html
到了这里,关于tensorflow.js 练习语音识别控制轮播图(十二)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!