TensorFlow.js 浏览器端可视化指南tfjs-vis 使用详解与源码剖析【免费下载链接】tfjsA WebGL accelerated JavaScript library for training and deploying ML models.项目地址: https://gitcode.com/gh_mirrors/tf/tfjstfjs-vis 是 TensorFlow.js 官方提供的轻量级浏览器内可视化库专为训练与部署 ML 模型场景设计。本文以其 README 为骨架结合 源码目录 中的真实实现系统讲解其安装方式、Visor 组织模型、render / show / metrics 三大 API 命名空间、训练曲线与模型评估实战并深入剖析底层基于 Vega-Lite 的渲染机制帮助你在一小时内掌握在浏览器中可视化模型行为的标准方案。tfjs-vis 是什么tfjs-vis 是一个用于浏览器内in browser可视化的小型库设计目标是与 TensorFlow.js 配合使用。根据其 README 的定义它的核心特性有三条提供一组用于可视化模型行为的图表能力柱状图、折线图、直方图、散点图、混淆矩阵、热力图、表格等提供一组针对 TensorFlow.js 特有对象的高层函数例如直接接收tf.Model、History、Tensor、Logs回调对象进行渲染提供一种组织可视化的机制——Visor将模型行为的可视化结果收纳在独立面板中不会干扰你的 Web 应用。同时该库保持了良好的灵活性它不强制你使用内置图表你可以很容易地借助自己选定的工具如 d3、Chart.js 或 plotly.js实现自定义可视化只要把绘制目标指向某个 Surface 的容器元素即可。从 package.json 可以看出库的底层图表引擎实际由 Vega 系依赖支撑vega、vega-lite与vega-embedUI 层则使用 Preactpreact ~8.2.9与glamor样式方案数据处理使用d3-format与d3-selection。核心概念Visor、Surface 与 Tab在深入 API 之前必须先理解 tfjs-vis 的三个核心抽象它们在 src/visor.ts 与 src/types.ts 中有完整的类型定义。Visor可视化面板Visor 是一个固定在页面上的可折叠面板所有图表都渲染在它内部从而避免遮挡你的 Web 应用。它有以下行为见 Visor 类通过tfvis.visor()获取单例实例首次调用时会在页面创建idtfjs-visor-container的容器元素支持open()/close()/toggle()/isOpen()/isFullscreen()/toggleFullScreen()等面板控制方法默认绑定~波浪号键来切换面板开合可通过bindKeys()/unbindKeys()手动控制通过setActiveTab(tabName)切换当前激活的 Tab若页面不存在document如 Node 环境visor()会抛出错误——该库必须在浏览器/DOM 环境下运行见 visor.ts。Surface绘图表面Surface 是 Visor 内部的一块具名绘图区域由visor().surface({...})创建或获取。SurfaceInfo类型见 types.ts支持以下字段字段类型说明namestringSurface 名称 / 标签必填同时用于后续检索tabstring所在 Tab 名称可选缺省时落到默认 TabVisor见 visor.tsstylesStyleOptions可选样式width、height、maxWidth、maxHeighttypes.ts从 visor.ts 的实现可以看到surface()以${name}-${tab}作为键在内部Map中缓存 Surface同名同 Tab 的 Surface 只创建一次重复调用返回同一实例。若name缺失会直接抛出异常。Surface结构体types.ts暴露三个 DOM 元素container外层容器、label文本标签、drawArea图表绘制区——自定义图表时通常直接向drawArea里塞东西。Drawable更灵活的容器传参所有渲染函数的第一个参数类型都是Drawabletypes.ts它可以是以下四种之一裸HTMLElementSurface对象带drawArea属性SurfaceInfo对象{name, tab?}{drawArea: HTMLElement}结构。getDrawArea()render/render_utils.ts负责把任意 Drawable 归一化为真正的绘制区drawArea——这意味着你可以不经 Visor直接把图表渲染到页面任意元素上这正是不干扰应用和完全自定义两种模式的切换点。安装与引入根据 README 的说明安装方式有三种。npm / yarnnpm install tensorflow/tfjs-vis # 或 yarn add tensorflow/tfjs-vis注意tfjs-vis 依赖tensorflow/tfjs-corepeerDependencies 要求 1.0.0见 package.json实际使用中通常还需要搭配tensorflow/tfjs-layers等包来训练模型。Script Tag 直接引入通过 CDN 引入时必须先加载 TensorFlow.js再加载 tfjs-vis两者同时存在才能正常工作script srchttps://cdn.jsdelivr.net/npm/tensorflow/tfjs /script script srchttps://cdn.jsdelivr.net/npm/tensorflow/tfjs-vis/script此时全局对象为tfvis与 npm 方式下的tfvis命名空间保持一致。快速上手第一个柱状图README 给出了一个最小可运行的示例下面结合源码逐行解读const data [ { index: 0, value: 50 }, { index: 1, value: 100 }, { index: 2, value: 150 }, ]; // Get a surface const surface tfvis.visor().surface({ name: Barchart, tab: Charts }); // Render a barchart on that surface tfvis.render.barchart(surface, data, {});第一步通过tfvis.visor()创建或取回全局单例 Visor第二步在Charts这个 Tab 下申请名为Barchart的 Surface第三步调用tfvis.render.barchart(surface, data, {})渲染柱状图。barchart的数据格式是对象数组[{index, value}]见 render/barchart.tsindex为类别X 轴value为数值Y 轴。该函数返回一个 Promise表示渲染完成。值得一提的实现细节barchart内部对每个drawArea缓存了 Vega 视图实例instancesMap当再次以相同 options 渲染时会走数据增量更新路径view.changeset()而不是整图重绘从而保证训练过程中的高频刷新见 render/barchart.ts。所有渲染函数都会在绘制前等待一帧nextFrame()见 render/render_utils.ts避免阻塞主线程的模型计算。API 全景四个命名空间从 src/index.ts 可以看到tfjs-vis 的公开 API 被组织为四个命名空间命名空间内容对应源码tfvis.visor()Visor 单例管理面板与 Surfacesrc/visor.tstfvis.render.*7 个通用图表barchart、table、histogram、linechart、scatterplot、confusionMatrix、heatmapsrc/rendertfvis.show.*6 个面向 TensorFlow.js 对象的高层函数history、fitCallbacks、perClassAccuracy、valuesDistribution、layer、modelSummarysrc/showtfvis.metrics.*3 个纯计算函数accuracy、perClassAccuracy、confusionMatrixsrc/util/math.tsrender与show是相辅相成的两层 APIshow系列负责把 TensorFlow.js 特有对象模型、训练历史、Tensor转换成标准数据格式最终仍委托给render系列完成绘制metrics系列则是不依赖 DOM 的纯计算工具可直接在 Node 或浏览器中调用。通用图表选项所有render.*函数都接受一个可选的VisOptions配置对象types.ts常用字段包括width/height图表宽高pxxLabel/yLabel坐标轴标题fontSize字体大小pxxType/yType轴的数据类型quantitative | ordinal | nominal通常会自动推断。XY 类图表折线图、散点图额外支持XYPlotOptionsxAxisDomain/yAxisDomain手动指定坐标轴范围、zoomToFit自动缩放至数据范围、seriesColors多序列配色。直方图支持maxBins最大分箱数、color柱色、stats是否显示统计摘要也可传入预计算的统计值。混淆矩阵支持shadeDiagonal默认高亮对角线、showTextOverlay是否在单元格内显示数值、colorMap配色方案支持greyscale | viridis | blues或自定义两端颜色。训练过程可视化show.history 与 show.fitCallbacks这是 tfjs-vis 最常用的场景源码在 src/show/history.ts。show.history绘制完整训练历史tfvis.show.history(surface, history, metrics)接收一个 History 对象tfjs-layers的model.fit()返回值或一个Logs[]数组并绘制指定的指标曲线const surface { name: show.history, tab: Training }; const history await model.fit(data, labels, { epochs: 5, batchSize: 32 }); tfvis.show.history(surface, history, [loss, acc]);其实现逻辑history()有几个值得注意的行为传入的metrics数组中的每个指标会生成一条曲线多个指标会组织成多序列折线图带val_前缀的验证指标会与其对应的非验证指标合并到同一张图中如acc与val_acc同图对比分组逻辑见 history.ts若某张图的所有序列名都包含acc即都是准确率类指标会自动把 Y 轴范围设为[0, 1]如需自动缩放可传zoomToFitAccuracy: true每个指标图渲染到独立子 SurfacesubSurfaceX 轴标签默认为Iteration。show.fitCallbacks训练中实时刷新tfvis.show.fitCallbacks(surface, metrics, opts)返回一组可直接传给model.fit()的 callbacks实现边训练边画图const surface { name: show.fitCallbacks, tab: Training }; await model.fit(data, labels, { epochs: 5, batchSize: 32, callbacks: tfvis.show.fitCallbacks(surface, [loss, acc]), });其实现fitCallbacks()默认注册onEpochEnd与onBatchEnd两个回调可通过opts.callbacks指定见 FitCallbackOptions内部按(callbackName, metric)维度累积日志accumulators从而在onBatchEnd时拿到准确的全局 batch 序号作为 X 轴X 轴标签会根据回调类型自动设为Batch或Epoch每次回调触发时把累积数据交给show.history重新渲染并在每帧之间await nextFrame()保证 UI 有机会刷新。这种增量累积 逐帧刷新的设计让训练曲线在浏览器中保持流畅同时不影响训练主循环。模型评估metrics 与 show.perClassAccuracymetrics 纯计算函数src/util/math.ts 提供三个与 DOM 无关的评估函数输入均为tf.Tensoraccuracy(labels, predictions)计算整体准确率要求两者形状一致assertShapesMatch实现为labels.equal(predictions).mean()math.tsperClassAccuracy(labels, predictions, numClasses?)逐类计算准确率与样本数返回[{accuracy, count}]数组numClasses缺省时取 labels/predictions 最大值 1math.tsconfusionMatrix(labels, predictions, numClasses?, weights?)计算混淆矩阵返回number[][]支持可选的weights张量为每个预测加权math.ts。示例const labels tf.tensor1d([0, 0, 1, 2, 2, 2]); const predictions tf.tensor1d([0, 0, 0, 2, 1, 1]); const result await tfvis.metrics.perClassAccuracy(labels, predictions); console.log(result); const container { name: Per Class Accuracy, tab: Evaluation }; const categories [cat, dog, mouse]; await tfvis.show.perClassAccuracy(container, result, categories);show.perClassAccuracy评估结果上屏tfvis.show.perClassAccuracy(container, classAccuracy, classLabels?)把metrics.perClassAccuracy的结果渲染成一张表格表头为Class / Accuracy / # SamplesclassLabels可选用于把类别序号替换为可读名称见 show/quality.ts。render.confusionMatrix混淆矩阵图把metrics.confusionMatrix的结果交给tfvis.render.confusionMatrix(surface, data)即可得到可视化矩阵数据格式为{values: number[][], tickLabels?: string[]}见 types.ts。模型内部结构modelSummary、layer 与 valuesDistribution源码位于 src/show/model.ts 与 src/show/tensor.ts用于模型体检。show.modelSummarytfvis.show.modelSummary(surface, model)以表格形式展示模型每一层的概要信息表头为Layer Name / Output Shape / # Of Params / Trainablemodel.ts。实现上遍历model.layers调用layer.countParams()统计参数数量并对null的 batch 维度显示为batchmodel.ts。show.layertfvis.show.layer(surface, layer)对单个层做深度剖析包含两部分model.ts一张权重信息表每个权重的名称、形状、Min / Max、参数个数、零值个数、NaN 个数、无穷值个数一个交互式直方图选择器通过下拉框选择权重名点击按钮后在该权重数值的分布直方图height: 150, width: 460。其中统计信息由tensorStats()计算util/math.tsMin/Max/零值计数在 GPU 上用tidy内的张量运算完成NaN/Inf 计数则拉回 CPU 遍历并处理了全 NaN 时 GPU 极值不准的边界情况。show.valuesDistributiontfvis.show.valuesDistribution(surface, tensor)显示任意 Tensor 内所有值的分布直方图内部先取tensor.data()再调用render.histogram并叠加统计摘要show/tensor.ts。它常被用来检查中间层激活值或梯度的分布是否健康。自定义可视化与数据格式约定tfjs-vis 的灵活性体现在两个层面。其一任意 Drawable 皆可绘。由于所有渲染函数都接受Drawable裸 DOM 元素 / Surface / SurfaceInfo你可以绕过 Visor把图表直接渲染到应用自己的布局里也可以手动visor().surface({name, tab, styles})拿到drawArea后用 d3、Chart.js 或 plotly.js 绘制自定义内容——这正是 README 强调的用你自己选定的工具做自定义可视化。其二数据结构有明确约定。各图表的数据格式定义在 types.ts折线图 / 散点图XYPlotDatavalues为{x, y}点数组或嵌套数组以表示多个序列series为序列名types.ts直方图TypedArrayFloat32Array、Int32Array等类型数组或普通数值数组热力图HeatmapDatavalues为number[][]或Tensor2D支持rowMajor选项指定按行主序传入types.ts表格TableDataheaders为列名数组values为二维行数组types.ts。从源码构建README 的构建说明如下需要 Node.js 环境官方使用yarnnpm亦可。先安装依赖yarn # 或 npm install再执行构建yarn build # 或 npm run build构建脚本定义在 package.jsonbuild实际执行tsc NODE_ENVproduction webpack即先编译 TypeScript再以生产模式打包。产物为dist/tfjs-vis.umd.min.jsUMD 格式可直接通过 script 标签引入同时生成dist/index.jsCommonJS 入口与dist/index.d.ts类型声明分别对应main、jsdelivr/unpkg、types字段。仓库还配套了完整的测试体系yarn test构建 Karma 浏览器测试、yarn run-browserstack跨浏览器云端测试。测试覆盖了每个渲染函数与 show 函数如 render/barchart_test.ts、show/history_test.ts、show/model_test.ts以及 Visor 组件本身components/visor_test.tsx、visor_test.ts可作为理解 API 行为的补充资料。小结tfjs-vis 通过 Visor 面板 Surface 绘图区 Tab 分组 的组织模型为 TensorFlow.js 的浏览器端实验提供了一个不干扰应用、易于组织、可高度自定义的可视化层。其 API 设计分层清晰render.*提供通用图表原语底层由 Vega-Lite 驱动show.*把模型、训练历史、张量等 TF.js 对象翻译成图表数据metrics.*提供与 DOM 无关的评估计算visor()提供面板级生命周期管理。无论是训练曲线实时监控、混淆矩阵与逐类准确率评估还是权重分布与激活值体检都可以用几行代码接入。对于需要完全掌控渲染细节的场景把图表绘制到任意 DOM 元素或使用 d3 / Chart.js / plotly.js 进行自定义同样在库的设计支持范围之内。【免费下载链接】tfjsA WebGL accelerated JavaScript library for training and deploying ML models.项目地址: https://gitcode.com/gh_mirrors/tf/tfjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考