摘要：感謝像這樣的框架，使得這些數(shù)據(jù)集可以應(yīng)用于機(jī)器學(xué)習(xí)領(lǐng)域。藍(lán)點(diǎn)被標(biāo)記為壞球，橙點(diǎn)被標(biāo)記為好球標(biāo)注來(lái)自大聯(lián)盟裁判員使用構(gòu)建模型將機(jī)器學(xué)習(xí)帶入和領(lǐng)域。使用庫(kù)將預(yù)測(cè)結(jié)果呈現(xiàn)為熱圖。好球區(qū)域位于本壘板上方至英尺之間。

在這篇文章中，我們將使用TensorFlow.js，D3.js和網(wǎng)絡(luò)的力量來(lái)可視化訓(xùn)練模型的過(guò)程，以預(yù)測(cè)棒球數(shù)據(jù)中的壞球（藍(lán)色區(qū)域）和好球（橙色區(qū)域）。在整個(gè)訓(xùn)練過(guò)程中，我們將一步一步的將模型預(yù)測(cè)出的好球區(qū)域動(dòng)態(tài)的展示出來(lái)。您可以通過(guò)訪問(wèn)Observable notebook網(wǎng)站在瀏覽器中運(yùn)行此模型。

如今的職業(yè)體育環(huán)境里充滿了大量的數(shù)據(jù)。這些數(shù)據(jù)被團(tuán)隊(duì)、業(yè)余愛(ài)好者和粉絲應(yīng)用于各種案例。感謝像TensorFlow這樣的框架，使得這些數(shù)據(jù)集可以應(yīng)用于機(jī)器學(xué)習(xí)領(lǐng)域。

美國(guó)職業(yè)棒球大聯(lián)盟高級(jí)媒體（MLBAM）發(fā)布了一個(gè)可供公眾研究的大型數(shù)據(jù)集。該數(shù)據(jù)集包含有關(guān)過(guò)去幾年在MLB游戲中投擲的投球的傳感器信息。從這個(gè)數(shù)據(jù)集中挑選了一個(gè)包含5000個(gè)樣本（2,500個(gè)壞球和2,500個(gè)好球）的訓(xùn)練集用于此處實(shí)驗(yàn)。

以下是訓(xùn)練數(shù)據(jù)的具體數(shù)據(jù)格式示例：

以下是繪制好球區(qū)域時(shí)的訓(xùn)練數(shù)據(jù)分布。藍(lán)點(diǎn)被標(biāo)記為壞球，橙點(diǎn)被標(biāo)記為好球（標(biāo)注來(lái)自大聯(lián)盟裁判員）

TensorFlow.js將機(jī)器學(xué)習(xí)帶入JavaScript和Web領(lǐng)域。我們將使用這個(gè)優(yōu)秀的框架來(lái)構(gòu)建一個(gè)深度神經(jīng)網(wǎng)絡(luò)模型。這個(gè)模型將能夠以大聯(lián)盟裁判的精確度來(lái)區(qū)分好球和壞球。

該模型從PITCHf/x中選出以下評(píng)測(cè)指標(biāo)進(jìn)行訓(xùn)練：

協(xié)調(diào)球越過(guò)本壘的位置（"px"和"pz"）

擊球手站在球場(chǎng)的哪一側(cè)

擊球區(qū)（擊球手的軀干）的高度，以英尺為單位。

擊球區(qū)底部的高度（擊球手的膝蓋）以英尺為單位

該次擊球是好球還是壞球（由裁判員判定的）

我們將使用TensorFlow.js的Layers API定義此模型。Layers API基于Keras，對(duì)以前使用過(guò)Keras框架的人來(lái)說(shuō)應(yīng)該很熟悉：

const model = tf.sequential();

// Two fully connected layers with dropout between each:
model.add(tf.layers.dense({units: 24, activation: "relu", inputShape: [5]}));
model.add(tf.layers.dropout({rate: 0.01}));
model.add(tf.layers.dense({units: 16, activation: "relu"}));
model.add(tf.layers.dropout({rate: 0.01}));

// Only two classes: "strike" and "ball":
model.add(tf.layers.dense({units: 2, activation: "softmax"}));

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

精選的訓(xùn)練集可以在GitHub gist獲取。該數(shù)據(jù)集是CSV格式的，需要下載下來(lái)在本地轉(zhuǎn)換成符合TensorFlow.js的格式。

const data = [];
csvData.forEach((values) => {
  // "logit" data uses the 5 fields:
  const x = [];
  x.push(parseFloat(values.px));
  x.push(parseFloat(values.pz));
  x.push(parseFloat(values.sz_top));
  x.push(parseFloat(values.sz_bot));
  x.push(parseFloat(values.left_handed_batter));
  // The label is simply "is strike" or "is ball":
  const y = parseInt(values.is_strike, 10);
  data.push({x: x, y: y});
});
// Shuffle the contents to ensure the model does not always train on the same
// sequence of pitch data:
tf.util.shuffle(data);

解析CSV數(shù)據(jù)后，需要將JS類型轉(zhuǎn)換為Tensor batches才能進(jìn)行訓(xùn)練和評(píng)估。有關(guān)此過(guò)程的詳細(xì)信息，請(qǐng)參閱code lab。TensorFlow.js團(tuán)隊(duì)正在開發(fā)一種新的數(shù)據(jù)API接口，以便使數(shù)據(jù)獲取在將來(lái)變得更容易。

讓我們把前期的準(zhǔn)備都綜合起來(lái)吧。定義好了模型，準(zhǔn)備好了訓(xùn)練數(shù)據(jù)，現(xiàn)在我們將要開始訓(xùn)練了。以下的異步方法訓(xùn)練了一批訓(xùn)練樣本并更新熱圖：

// Trains and reports loss+accuracy for one batch of training data:
async function trainBatch(index) {
  const history = await model.fit(batches[index].x, batches[index].y, {
    epochs: 1,
    shuffle: false,
    validationData: [batches[index].x, batches[index].y],
    batchSize: CONSTANTS.BATCH_SIZE
  });

  // Don"t block the UI frame by using tf.nextFrame()
  await tf.nextFrame();
  updateHeatmap();
  await tf.nextFrame();
}

使用來(lái)自均勻放置在本壘板上方的 4英尺x4英尺 柵格的預(yù)測(cè)矩陣來(lái)構(gòu)建熱圖。在每個(gè)訓(xùn)練步驟之后將該矩陣傳遞到模型中以檢查模型的準(zhǔn)確度。使用D3庫(kù)將預(yù)測(cè)結(jié)果呈現(xiàn)為熱圖。

熱圖中所使用的預(yù)測(cè)矩陣從本壘板的中間開始，向左和向右各延伸2英尺寬，高度從本壘板的底部到4英尺高。好球區(qū)域位于本壘板上方1.5至3.5英尺之間。下圖在二維平面上呈現(xiàn)出各個(gè)矩陣之間的關(guān)系：

當(dāng)每個(gè)批次的訓(xùn)練數(shù)據(jù)都在模型中訓(xùn)練之后，我們將預(yù)測(cè)矩陣傳遞到模型中，這樣就可以去預(yù)測(cè)好球和壞球了。

function predictZone() {
  const predictions = model.predictOnBatch(predictionMatrix.data);
  const values = predictions.dataSync();

  // Sort each value so the higher prediction is the first element in the array:
  const results = [];
  let index = 0;
  for (let i = 0; i < values.length; i++) {
    let list = [];
    list.push({value: values[index++], strike: 0});
    list.push({value: values[index++], strike: 1});
    list = list.sort((a, b) => b.value - a.value);
    results.push(list);
  }
  return results;
}

我們可以使用D3來(lái)顯示預(yù)測(cè)結(jié)果。50x50尺寸的每個(gè)元素在SVG中呈現(xiàn)為10px x 10px的矩形。每個(gè)矩形的顏色取決于預(yù)測(cè)結(jié)果（好球或壞球）以及模型對(duì)該結(jié)果的確定程度（從50％-100％）。以下代碼段顯示了如何使用D3 svg 矩形組去更新數(shù)據(jù)：

function updateHeatmap() {
  rects.data(generateHeatmapData());
  rects
    .attr("x", (coord) => { return scaleX(coord.x) * CONSTANTS.HEATMAP_SIZE; })
    .attr("y", (coord) => { return scaleY(coord.y) * CONSTANTS.HEATMAP_SIZE; })
    .attr("width", CONSTANTS.HEATMAP_SIZE)
    .attr("height", CONSTANTS.HEATMAP_SIZE)
    .style("fill", (coord) => {
      if (coord.strike) {
        return strikeColorScale(coord.value);
      } else {
        return ballColorScale(coord.value);
      }
  });
}

有關(guān)使用D3繪制熱圖的完整詳細(xì)信息，請(qǐng)參閱此部分。

如今web前端有許多令人驚嘆的庫(kù)和工具來(lái)創(chuàng)建可視化視覺(jué)效果。把這些與機(jī)器學(xué)習(xí)的強(qiáng)大功能和TensorFlow.js相結(jié)合，可以使開發(fā)人員創(chuàng)建一些非常有趣的demo。

注：本文為譯文，點(diǎn)擊此處預(yù)覽原文