此页面由 Cloud Translation API 翻译。

TensorFlow.js - 使用迁移学习进行音频识别

1. 简介

在此 Codelab 中，您将构建一个音频识别网络，并使用该网络通过发出声音来控制浏览器中的滑块。您将使用 TensorFlow.js，这是一个功能强大且灵活的 JavaScript 机器学习库。

首先，您将加载并运行一个预训练模型，该模型可以识别 20 个语音指令。然后使用麦克风构建和训练一个简单的神经网络，该网络可识别您的声音，并让滑块向左或向右移动。

此 Codelab 不涵盖音频识别模型背后的理论。如果您想了解相关信息，请查看此教程。

我们还创建了一个术语表，其中包含您在此 Codelab 中找到的机器学习术语。

学习内容

如何加载预训练的语音指令识别模型
如何使用麦克风进行实时预测
如何使用浏览器麦克风训练和使用自定义音频识别模型

下面我们开始步入正题

2. 要求

要完成此 Codelab，您需要：

最新版本的 Chrome 或其他现代浏览器。
文本编辑器（可以在机器本地运行，也可以通过 Codepen 或 Glitch 等工具在网络上运行）。
了解 HTML、CSS、JavaScript 和 Chrome 开发者工具（或您的首选浏览器开发者工具）。
大致了解神经网络的概念。如果您需要了解简介或回顾相关知识，请观看这个由 3blue1brown 制作的视频或这个由 Ashi Krishnan 制作的有关使用 JavaScript 进行深度学习的视频。

3. 加载 TensorFlow.js 和音频模型

在编辑器中打开 index.html 并添加以下内容：

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands"></script>
  </head>
  <body>
    <div id="console"></div>
    <script src="index.js"></script>
  </body>
</html>

第一个 <script> 标记导入 TensorFlow.js 库，第二个 <script> 导入预训练的语音指令模型。<div id="console"> 标记将用于显示模型的输出。

4. 实时预测

接下来，在代码编辑器中打开/创建 index.js 文件，在其中添加以下代码：

let recognizer;

function predictWord() {
 // Array of words that the recognizer is trained to recognize.
 const words = recognizer.wordLabels();
 recognizer.listen(({scores}) => {
   // Turn scores into a list of (score,word) pairs.
   scores = Array.from(scores).map((s, i) => ({score: s, word: words[i]}));
   // Find the most probable word.
   scores.sort((s1, s2) => s2.score - s1.score);
   document.querySelector('#console').textContent = scores[0].word;
 }, {probabilityThreshold: 0.75});
}

async function app() {
 recognizer = speechCommands.create('BROWSER_FFT');
 await recognizer.ensureModelLoaded();
 predictWord();
}

app();

5. 测试预测

确保您的设备有麦克风。请注意，此功能也可以在手机上使用！要运行该网页，请在浏览器中打开 index.html。如果您正在使用本地文件访问麦克风，则必须启动网络服务器并使用 http://localhost:port/。

要在端口 8000 上启动一个简单的网络服务器，请执行以下操作：

python -m SimpleHTTPServer

下载模型可能需要一些时间，所以请耐心等待。模型加载后，您应该会在页面顶部看到一个字词。该模型经过训练，能够识别数字 0 到 9，以及一些其他命令，如“left”“right”“yes”“no”等。

请说出其中一个字词。它能不能准确识别你说的话？不妨试试 probabilityThreshold，它控制模型的触发频率。0.75 表示模型在听到给定字词的置信度超过 75% 时会触发。

如需详细了解 Speech Commands 模型及其 API，请参阅 GitHub 上的 README.md。

6. 收集数据

为了有趣，我们可以使用短音（而不是整个字词）来控制滑块！

您将训练模型来识别 3 个不同的命令：“左”“右”和“噪音”这会使滑块向左或向右移动识别“噪音”（无需操作）在语音检测中至关重要，因为我们希望滑块仅在我们发出正确的声音时做出反应，而不是在我们通常说话和四处移动时做出反应。

首先，我们需要收集数据。将以下代码添加到 <body> 标记的 <div id="console"> 前面，即可为应用添加一个简单的界面：

<button id="left" onmousedown="collect(0)" onmouseup="collect(null)">Left</button>
<button id="right" onmousedown="collect(1)" onmouseup="collect(null)">Right</button>
<button id="noise" onmousedown="collect(2)" onmouseup="collect(null)">Noise</button>

将以下内容添加到 index.js：

// One frame is ~23ms of audio.
const NUM_FRAMES = 3;
let examples = [];

function collect(label) {
 if (recognizer.isListening()) {
   return recognizer.stopListening();
 }
 if (label == null) {
   return;
 }
 recognizer.listen(async ({spectrogram: {frameSize, data}}) => {
   let vals = normalize(data.subarray(-frameSize * NUM_FRAMES));
   examples.push({vals, label});
   document.querySelector('#console').textContent =
       `${examples.length} examples collected`;
 }, {
   overlapFactor: 0.999,
   includeSpectrogram: true,
   invokeCallbackOnNoiseAndUnknown: true
 });
}

function normalize(x) {
 const mean = -100;
 const std = 10;
 return x.map(x => (x - mean) / std);
}

从 app() 中移除 predictWord()：

async function app() {
 recognizer = speechCommands.create('BROWSER_FFT');
 await recognizer.ensureModelLoaded();
 // predictWord() no longer called.
}

细分

这段代码一开始可能会让人无所适从，我们来详细了解一下吧。

我们在界面中添加了三个标记为“Left”“Right”和“Noise”的按钮，分别对应于我们希望模型识别的三个命令。按下这些按钮会调用我们新添加的 collect() 函数，该函数会为模型创建训练示例。

collect() 会将 label 与 recognizer.listen() 的输出相关联。由于 includeSpectrogram 为 true, recognizer.listen() 会给出 1 秒音频的原始声谱图（频率数据），分 43 帧，因此每帧的音频时长约为 23 毫秒：

recognizer.listen(async ({spectrogram: {frameSize, data}}) => {
...
}, {includeSpectrogram: true});

由于我们想使用较短的声音而不是文字来控制滑块，因此我们仅考虑最后 3 帧（约 70 毫秒）：

let vals = normalize(data.subarray(-frameSize * NUM_FRAMES));

为了避免数值问题，我们将数据归一化，使平均值为 0，标准差为 1。在这种情况下，声谱图值通常是 -100 左右的较大负值，偏差为 10：

const mean = -100;
const std = 10;
return x.map(x => (x - mean) / std);

最后，每个训练样本都包含 2 个字段：

label****：0、1 和 2 分别表示“左”和“右”和“噪音”。
vals****：696 个数字，包含频率信息（声谱图）

并将所有数据存储在 examples 变量中：

examples.push({vals, label});

7. 测试数据收集

在浏览器中打开 index.html，您应该会看到与 3 个命令相对应的 3 个按钮。如果您通过本地文件访问麦克风，则必须启动网络服务器并使用 http://localhost:port/。

要在端口 8000 上启动一个简单的网络服务器，请执行以下操作：

python -m SimpleHTTPServer

如需收集每条指令的示例，请在按住每个按钮 3-4 秒的同时（或连续）发出一致的声音。您应为每个标签收集大约 150 个样本。例如，我们可以用手指打响“左”手势，用口哨吹出“右耳”，还可以在静音和讲话之间切换“噪音”。

随着您收集更多样本，页面上显示的计数器应该也会变大。您还可以随时通过在控制台中的 examples 变量上调用 console.log() 来检查数据。此阶段的目标是测试数据收集流程。之后，您会在测试整个应用时重新收集数据。

8. 训练模型

添加“火车”“Noise”按钮之后index.html: 中正文的按钮

<br/><br/>
<button id="train" onclick="train()">Train</button>

将以下内容添加到 index.js 中的现有代码中：

const INPUT_SHAPE = [NUM_FRAMES, 232, 1];
let model;

async function train() {
 toggleButtons(false);
 const ys = tf.oneHot(examples.map(e => e.label), 3);
 const xsShape = [examples.length, ...INPUT_SHAPE];
 const xs = tf.tensor(flatten(examples.map(e => e.vals)), xsShape);

 await model.fit(xs, ys, {
   batchSize: 16,
   epochs: 10,
   callbacks: {
     onEpochEnd: (epoch, logs) => {
       document.querySelector('#console').textContent =
           `Accuracy: ${(logs.acc * 100).toFixed(1)}% Epoch: ${epoch + 1}`;
     }
   }
 });
 tf.dispose([xs, ys]);
 toggleButtons(true);
}

function buildModel() {
 model = tf.sequential();
 model.add(tf.layers.depthwiseConv2d({
   depthMultiplier: 8,
   kernelSize: [NUM_FRAMES, 3],
   activation: 'relu',
   inputShape: INPUT_SHAPE
 }));
 model.add(tf.layers.maxPooling2d({poolSize: [1, 2], strides: [2, 2]}));
 model.add(tf.layers.flatten());
 model.add(tf.layers.dense({units: 3, activation: 'softmax'}));
 const optimizer = tf.train.adam(0.01);
 model.compile({
   optimizer,
   loss: 'categoricalCrossentropy',
   metrics: ['accuracy']
 });
}

function toggleButtons(enable) {
 document.querySelectorAll('button').forEach(b => b.disabled = !enable);
}

function flatten(tensors) {
 const size = tensors[0].length;
 const result = new Float32Array(tensors.length * size);
 tensors.forEach((arr, i) => result.set(arr, i * size));
 return result;
}

当应用加载时，调用 buildModel()：

async function app() {
 recognizer = speechCommands.create('BROWSER_FFT');
 await recognizer.ensureModelLoaded();
 // Add this line.
 buildModel();
}

此时，如果您刷新应用，会看到新的“Train”按钮。您可以通过重新收集数据并点击“训练”来测试训练，也可以等到第 10 步再测试训练和预测。

分解

概括来讲，我们要做两件事：buildModel() 定义模型架构，train() 使用收集的数据训练模型。

模型架构

该模型有 4 个层：用于处理音频数据的卷积层（表示为声谱图）、一个最大池层、一个扁平化层，以及一个映射到以下 3 个操作的密集层：

model = tf.sequential();
 model.add(tf.layers.depthwiseConv2d({
   depthMultiplier: 8,
   kernelSize: [NUM_FRAMES, 3],
   activation: 'relu',
   inputShape: INPUT_SHAPE
 }));
 model.add(tf.layers.maxPooling2d({poolSize: [1, 2], strides: [2, 2]}));
 model.add(tf.layers.flatten());
 model.add(tf.layers.dense({units: 3, activation: 'softmax'}));

模型的输入形状是 [NUM_FRAMES, 232, 1]，其中每帧是 23 毫秒的音频，包含 232 个对应于不同频率的数字（选择了 232 个，因为这是捕获人类语音所需的频率范围量）。在此 Codelab 中，我们将使用时长为 3 帧的样本（样本时长约为 70 毫秒），因为我们通过发出声音来控制滑块，而不是读出整个字词。

我们编译模型，使其准备好进行训练：

const optimizer = tf.train.adam(0.01);
 model.compile({
   optimizer,
   loss: 'categoricalCrossentropy',
   metrics: ['accuracy']
 });

我们使用 Adam 优化器（深度学习中常用的优化器）和 categoricalCrossEntropy（用于分类的标准损失函数）处理损失函数。简而言之，它会测量预测的概率（每个类别一个概率）与真实类别中的概率为 100%，所有其他类别中的概率为 0% 的差距。我们还提供 accuracy 作为监控的指标，这可提供每个训练周期后模型正确获取样本的百分比。

训练

使用批量大小为 16 的数据对数据进行 10 次（周期）训练（一次处理 16 个样本），并在界面中显示当前的准确率：

await model.fit(xs, ys, {
   batchSize: 16,
   epochs: 10,
   callbacks: {
     onEpochEnd: (epoch, logs) => {
       document.querySelector('#console').textContent =
           `Accuracy: ${(logs.acc * 100).toFixed(1)}% Epoch: ${epoch + 1}`;
     }
   }
 });

9. 实时更新滑块

现在我们可以训练模型了，让我们添加代码来实时进行预测并移动滑块。将以下代码添加到“Train”之后、index.html 中的按钮：

<br/><br/>
<button id="listen" onclick="listen()">Listen</button>
<input type="range" id="output" min="0" max="10" step="0.1">

以及 index.js 中的以下内容：

async function moveSlider(labelTensor) {
 const label = (await labelTensor.data())[0];
 document.getElementById('console').textContent = label;
 if (label == 2) {
   return;
 }
 let delta = 0.1;
 const prevValue = +document.getElementById('output').value;
 document.getElementById('output').value =
     prevValue + (label === 0 ? -delta : delta);
}

function listen() {
 if (recognizer.isListening()) {
   recognizer.stopListening();
   toggleButtons(true);
   document.getElementById('listen').textContent = 'Listen';
   return;
 }
 toggleButtons(false);
 document.getElementById('listen').textContent = 'Stop';
 document.getElementById('listen').disabled = false;

 recognizer.listen(async ({spectrogram: {frameSize, data}}) => {
   const vals = normalize(data.subarray(-frameSize * NUM_FRAMES));
   const input = tf.tensor(vals, [1, ...INPUT_SHAPE]);
   const probs = model.predict(input);
   const predLabel = probs.argMax(1);
   await moveSlider(predLabel);
   tf.dispose([input, probs, predLabel]);
 }, {
   overlapFactor: 0.999,
   includeSpectrogram: true,
   invokeCallbackOnNoiseAndUnknown: true
 });
}

分解

实时预测

listen() 会监听麦克风并进行实时预测。该代码与 collect() 方法非常相似，该方法会将原始声谱图归一化并删除最后 NUM_FRAMES 帧以外的所有帧。唯一的区别在于，我们还会调用经过训练的模型，以获取预测结果：

const probs = model.predict(input);
const predLabel = probs.argMax(1);
await moveSlider(predLabel);

model.predict(input) 的输出是形状为 [1, numClasses] 的张量，表示类别数量的概率分布。简而言之，这只是每个可能输出类别的一组置信度，总和为 1。张量的外维度为 1，因为这是批次（单个样本）的大小。

为了将概率分布转换为表示最可能类别的单个整数，我们调用 probs.argMax(1) 以返回概率最高的类别索引。我们将一个“1”作为轴参数，因为我们想要计算最后一个维度 numClasses 的 argMax。

更新滑块

moveSlider()：如果标签为 0（“左”），则减小滑块的值；如果标签为 1（“右”），则减小滑块的值；如果标签为 2（“噪声”），则忽略该值。

处置张量

要清理 GPU 内存，我们必须对输出张量手动调用 tf.dispose()。手动 tf.dispose() 的替代方案是将函数调用封装在 tf.tidy() 中，但这不能用于异步函数。

   tf.dispose([input, probs, predLabel]);

10. 测试最终应用

在浏览器中打开 index.html，并按照与上一部分相同的操作，使用对应于 3 个命令的 3 个按钮收集数据。收集数据时，请记得按住每个按钮 3-4 秒。

收集样本后，按训练按钮。这将开始训练模型，您应该会看到模型的准确率超过 90%。如果模型性能不佳，请尝试收集更多数据。

训练完成后，按 Listen 按钮，使用麦克风进行预测并控制滑块！

如需查看更多教程，请访问 http://js.tensorflow.org/。