摘要：感謝像這樣的框架，使得這些數據集可以應用于機器學習領域。藍點被標記為壞球，橙點被標記為好球標注來自大聯盟裁判員使用構建模型將機器學習帶入和領域。使用庫將預測結果呈現為熱圖。好球區域位于本壘板上方至英尺之間。

在這篇文章中，我們將使用TensorFlow.js，D3.js和網絡的力量來可視化訓練模型的過程，以預測棒球數據中的壞球（藍色區域）和好球（橙色區域）。在整個訓練過程中，我們將一步一步的將模型預測出的好球區域動態的展示出來。您可以通過訪問Observable notebook網站在瀏覽器中運行此模型。

如今的職業體育環境里充滿了大量的數據。這些數據被團隊、業余愛好者和粉絲應用于各種案例。感謝像TensorFlow這樣的框架，使得這些數據集可以應用于機器學習領域。

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

以下是訓練數據的具體數據格式示例：

以下是繪制好球區域時的訓練數據分布。藍點被標記為壞球，橙點被標記為好球（標注來自大聯盟裁判員）

TensorFlow.js將機器學習帶入JavaScript和Web領域。我們將使用這個優秀的框架來構建一個深度神經網絡模型。這個模型將能夠以大聯盟裁判的精確度來區分好球和壞球。

該模型從PITCHf/x中選出以下評測指標進行訓練：

協調球越過本壘的位置（"px"和"pz"）

擊球手站在球場的哪一側

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

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

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

我們將使用TensorFlow.js的Layers API定義此模型。Layers API基于Keras，對以前使用過Keras框架的人來說應該很熟悉：

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"]
});

精選的訓練集可以在GitHub gist獲取。該數據集是CSV格式的，需要下載下來在本地轉換成符合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數據后，需要將JS類型轉換為Tensor batches才能進行訓練和評估。有關此過程的詳細信息，請參閱code lab。TensorFlow.js團隊正在開發一種新的數據API接口，以便使數據獲取在將來變得更容易。

讓我們把前期的準備都綜合起來吧。定義好了模型，準備好了訓練數據，現在我們將要開始訓練了。以下的異步方法訓練了一批訓練樣本并更新熱圖：

// 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英尺 柵格的預測矩陣來構建熱圖。在每個訓練步驟之后將該矩陣傳遞到模型中以檢查模型的準確度。使用D3庫將預測結果呈現為熱圖。

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

當每個批次的訓練數據都在模型中訓練之后，我們將預測矩陣傳遞到模型中，這樣就可以去預測好球和壞球了。

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來顯示預測結果。50x50尺寸的每個元素在SVG中呈現為10px x 10px的矩形。每個矩形的顏色取決于預測結果（好球或壞球）以及模型對該結果的確定程度（從50％-100％）。以下代碼段顯示了如何使用D3 svg 矩形組去更新數據：

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);
      }
  });
}

有關使用D3繪制熱圖的完整詳細信息，請參閱此部分。

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

注：本文為譯文，點擊此處預覽原文