【tensorflow.js】一个超低配版《Read along》，或者说练习念诗词的网页应用

大家好啊 啊哈哈

2020年末的时候就想开这个坑，一直拖到2021下半年才开始认真照着教程把搭建Tensorflow、导出至Tensorflow.JS的过程走了一遍，并继续开始搭建用户界面，最近快完成完整设想中的逻辑了，打算再与3D打印的拼图结合起来在今年春节前的游园会（2022年1月15日）上给观众一起玩。虽然还在施工中，但是读诗词的那部分，已经差不多达到我目前所能达到的水平了，所以丢个链接地址：https://quadpixels.github.io/readalong/（注意：大概消耗6M流量，主要占流量的是Tensorflow.js模型权重文件）

使用方法：各种按钮都点一遍大概就知；点住REC不放并对麦克风说话来完成念诵

图：在本人的PC上（使用FireFox浏览器）的效果


（github.io是所布署的地址，这个小东西本身的代码库的地址在这里）

（支持的浏览器的话，试过的有：PC上的Chrome、Edge和火狐，安卓上的Chrome、华为P30自带浏览器和火狐、iPad上的自带浏览器与火狐）

（点击【謎之模式】功能启动显示3D拼图解法的功能。设想的玩法可以参看附件中的图片；当来到游园会时，使用自己的设备或游园会所提供的设备一边念一首选定的篇目一边把3D拼图复原，当念完，并且复原完时，就可以获得奖励的说！那么现在就是需要多加一些（且3D打印一些）拼图模型啦。）

图：预计游园会中的游玩方式，图中所用的设备为iPad 9

在适配这些个浏览器时遇到过一些坑：
※ 火狐不能调节麦克风采样率，在手机上就非得是48KHz不可，在PC上就非得是44.1KHz不可，所以需要自制一个频率转换Audio Worklet
※ Chrome的话，音频结点断开后，再接上，就不出声了，而火狐上不会这样。所以后来就采取了暂停音频上下文的方式兼顾各种平台。
※ 除了安卓上的Chrome和PC上的Chrome与Edge之外，其它所有平台都不能【同时】启用Web Worker与Tensorflow.JS的WebGL后端。所以在那些平台上采取了降帧率的方法在主线程中跑Tensorflow.JS。

在导出到TFJS的过程中也遇到过一些坑：
※ CTC解码函数没有在Tensorflow.js中提供，需要自己用JavaScript制作一个

对于模型本身的话，我其实没有太多研究，但是如果你真的看目前的模型识别出来的拼音的话（猛击【？】按钮打开“Stats for Nerds面板”），你就会看到它其实识别出来的东西一大半都是鬼画符，要不是因为这个应用是【已经给定了文本】这种简单的情况，就根本无法使用吧

那就是这样，总的来说，可能就是个入门级玩具项目，接下来可以提高的地方还有很多，当然也很期待在游园会时的互动效果嘻嘻

cs900601 发表于 2022-01-03 02:08:41
嗯嗯感谢反馈、不知“中速”是多快呢？
其实我也在使用苹果设备（或者其它不能同时打开Web Worker和WebGL后端的设备）时发现过类似的情况，就是识别会（被画图的负载？）拖慢
不过主要的原因更

半秒钟一个字 我拿秒表测得 可以注意下语速

aw21pskd 发表于 2022-1-3 01:19
所以这是啥

是一个Tensorflow.js的练习
可以理解为低配版的谷歌《Read Along》（https://readalong.google/）
或者低配版的《百度汉语》（https://shouji.baidu.com/soft/it ... p;from=web_alad_2_2）中的背诵功能

低配的意思是现在只能非常粗略地指出用户读到了哪，还不能指明用户哪里发音不对

三喵 发表于 2022-1-3 03:53
不是很accurate，有些地方念到了没标黄有些没念到标黄了。

嗯嗯是的，确实不是很精确 ・・·
如果仔细看的话，会发现在念到的时候，一些字的颜色会稍微变浅，那些就是程序认为“可能被读到了”的字
然后，其实里面有些字是永远识别不出来的，有些明明没有念到也会被识别出来
而就目前的这个样子，也已经是加了一些拍脑袋想出来的hack之后“优化”（还是劣化？）后的结果了

这也都是因为识别准确率还很低 ・・・ 比如 说“熊猫是一种怎样的生物？”识别结果可能是“xiong mao she yi zhuo ji yang di shi wu”之类 ···

如果想要Accurate，就得要对ASR的原理再多了解很多才行了吧

所以这是啥

cs900601 发表于 2022-01-03 01:09:01
是一个Tensorflow.js的练习
可以理解为低配版的谷歌《Read Along》（https://readalong.google/）
或者低配版的《百度汉语》（https://shouji

哇噢 挺有意思的 大概看了下 很强！

cs900601 发表于 2022-01-03 01:09:01
是一个Tensorflow.js的练习
可以理解为低配版的谷歌《Read Along》（https://readalong.google/）
或者低配版的《百度汉语》（https://shouji

体验有点问题，中速就跟不上了，字体不会变黄

不是很accurate，有些地方念到了没标黄有些没念到标黄了。

aw21pskd 发表于 2022-1-3 03:19
体验有点问题，中速就跟不上了，字体不会变黄

嗯嗯感谢反馈、不知“中速”是多快呢？
其实我也在使用苹果设备（或者其它不能同时打开Web Worker和WebGL后端的设备）时发现过类似的情况，就是识别会（被画图的负载？）拖慢
不过主要的原因更可能是识别精度不是很高 ・・・ 精度的改善可能就是接下来要填的坑了吧 XD

aw21pskd 发表于 2022-1-3 04:15
半秒钟一个字 我拿秒表测得 可以注意下语速

哦哦了解了！确实这个可能会有些影响，因为这个东西的识别过程是这样的：有一个1秒长（就是100个FFT频谱，因为FFT是每秒抓100次）的窗口，每次识别这1秒中里有什么拼音，然后这个窗口每次会前进0.25秒（就是25个FFT频谱）

所以念得越快，反而是越可能被识别得多（就跟霰弹枪debug法一样）其实我自己平时测试的时候都是每秒4～5个字左右 “rush”过去的😂

如果是每秒2个字可能要把窗口弄得比现在更长一点？不过那样每次 prediction 所用要的时间就会长一些・・・ 这几天有空了再捣鼓几下😂