如何在TensorFlow JS中实现数据可视化？Tfjs-vis弃用求替代方案

tfjs-vis 确实已停止维护进入只读状态，以下是几个适配不同场景、上手门槛低的实现方式：

1. 前端轻量快速实现（最适合初学者入门场景） #

用维护状态稳定的轻量图表库配合TFJS训练自定义回调即可，不需要复杂配置，很快就能搭出和tfjs-vis效果一致的实时损失曲线：

• 先通过包管理或本地脚本引入Chart.js，在页面中预留一个canvas元素作为图表容器：

  <canvas id="lossChart" width="450" height="220"></canvas>
  

• 初始化折线图实例，配置训练集、验证集损失两个数据序列

• 在model.fit的配置中传入onEpochEnd回调，每轮训练结束后把当前轮次的损失值追加到图表数据中，触发图表刷新即可

  最小可运行代码示例：

  // 初始化损失曲线图表
  const lossChart = new Chart(document.getElementById('lossChart'), {
    type: 'line',
    data: {
      labels: [],
      datasets: [
        { label: '训练集损失', data: [], borderColor: '#ef4444', tension: 0.1 },
        { label: '验证集损失', data: [], borderColor: '#3b82f6', tension: 0.1 }
      ]
    },
    options: { 
      responsive: true, 
      scales: { 
        x: { title: { display: true, text: '训练轮次' } }, 
        y: { title: { display: true, text: '损失值' } } 
      } 
    }
  })
  
  // 训练时绑定回调实时更新曲线
  await model.fit(trainX, trainY, {
    epochs: 30,
    validationData: [valX, valY],
    callbacks: {
      onEpochEnd: (currentEpoch, logs) => {
        lossChart.data.labels.push(currentEpoch)
        lossChart.data.datasets[0].data.push(logs.loss)
        lossChart.data.datasets[1].data.push(logs.val_loss)
        lossChart.update('none') // 关闭动画避免训练时卡顿
      }
    }
  })
  

2. 功能最全的方案：对接TensorBoard #

如果需要更专业的训练可视化能力（损失曲线、权重分布、模型结构、降维投影等），直接对接TensorBoard是最优选择，和Python版TensorFlow的使用体验完全一致：

• 浏览器端训练可以把训练过程的标量数据按TensorBoard格式打包导出，Node.js环境训练可以直接用官方内置的summary写入工具

• 启动本地TensorBoard服务指向日志目录，就能看到实时更新的训练指标，不需要自己写任何前端渲染逻辑

  Node环境下的核心代码示例：

  const tf = require('@tensorflow/tfjs-node')
  // 初始化日志写入器
  const logWriter = tf.node.summaryFileWriter('./tf_train_logs')
  
  await model.fit(trainX, trainY, {
    epochs: 50,
    validationData: [valX, valY],
    callbacks: {
      onEpochEnd: (epoch, logs) => {
        logWriter.scalar('loss/train', logs.loss, epoch)
        logWriter.scalar('loss/val', logs.val_loss, epoch)
        // 也可以记录准确率、学习率等其他自定义指标
      }
    }
  })
  

3. 高自定义需求方案 #

如果需要做预测结果可视化、高维数据分布展示等复杂需求，可以直接选用通用可视化库（Plotly.js、D3.js、ECharts等），核心逻辑和第一种方案一致：都是通过onEpochEnd、onBatchEnd等训练钩子拿到实时数据，再喂给对应图表库完成渲染，可定制空间远大于原来的tfjs-vis。

老项目迁移提示：tfjs-vis本身的核心逻辑就是封装了训练回调和基础图表渲染，从tfjs-vis迁移不需要改动模型训练的核心代码，只需要把原来绑定tfvis.show.fitCallbacks的位置替换成自己写的、对接新图表库的回调函数即可，迁移成本极低。

内容的提问来源于stack exchange，提问作者UV-Sam