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

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

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

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

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

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

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

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

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

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

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

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

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

我們將使用TensorFlow.js的Layers API定義此模型。Layers API基于Keras，對以前使用過Keras框架的人來說應(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格式的，需要下載下來在本地轉(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才能進行訓(xùn)練和評估。有關(guān)此過程的詳細信息，請參閱code lab。TensorFlow.js團隊正在開發(fā)一種新的數(shù)據(jù)API接口，以便使數(shù)據(jù)獲取在將來變得更容易。

讓我們把前期的準備都綜合起來吧。定義好了模型，準備好了訓(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();
}

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

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

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

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來顯示預(yù)測結(jié)果。50x50尺寸的每個元素在SVG中呈現(xiàn)為10px x 10px的矩形。每個矩形的顏色取決于預(yù)測結(jié)果（好球或壞球）以及模型對該結(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繪制熱圖的完整詳細信息，請參閱此部分。

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

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