你或许也想拥有专属于自己的AI模型文件格式(可视化篇)-(5)

关注

原创最新推荐文章于 2026-08-29 15:17:49 发布 918 阅读 AI 写同款· GEO 优化 ›

1.基于tflite实现前端检测算法并生成app 1 配置环境 1.1安装tensorflow+cuda+cudnn+anaconda 配置tensorflow环境，最好安装tensorflow1.X，2以上可能会遇到训练问题。 1.2 配置tensorflow object detection API 模型训练使用tensorflow object detection API。具体配置方法可以参考如下链接配置：https://... 阅读详情

太久才来写这个专栏的第五篇，不是我鸽了，是想要测试我那两位数粉丝有没有催更的可能，结果是显而易见的——没有！好吧，其实是可视化篇比较难，花费了比较多的时间去编写代码适配专ai模，尤其是代码调试难度高，导致花费了很多时间精力去配置调试环境，熟悉vscode对于javascript的调试。

本篇章将会讲述如何可视化我们的专属于自己的AI模型文件格式，特别是如何适配netron可视化工具。所以，对于可视化篇而言，或者就止步在这篇章了。这篇将会带你一起来可视化专ai模。

那么，就开始吧。

一、tflite的netron适配源码解读

首先，我们对于netron的工程结构要有一定的认识:

├── publish //发布目录
├── source // 源代码目录，构成应用程序的代码都放在此处
│   ├── tflite.js
│   ├── tflite-schema.js
│   ├── tflite-metedata.json
│   └── .....其他的框架源码
│       
├── test // 
├── tools //工具包，存放了一些升级的代码和工具
└── venv

首先官网没有说明如何把自定义的模型格式通过netron适配出来，因此我们想要是适配自己的模型的最好的方法就是借鉴，这里我选择了tensorflow lite作为参考对象进行源码解读，你可以配合上一篇进行配合解读，以此更好理解。

我们通过浏览器其实可是直接去调试netron，我们只需要用浏览器打开source/index.html就可以了，然后在打开浏览器的开发者模式，接着断点在tflite.js的如下所示的位置（也就是93行）：

上面第93行是在tflite.Model这个类的构造函数处，其中metadata是tflite-schema.json这个文本文件通过Json.parse("tflite-schema.json")得到的，其实就是一个字典文件，其内部包含了各种网络层的参数定义和名字，其实这个json文件就是我们在之前的文章中展示的约束文件（读者可以去翻阅本栏目之前的文章进行查看，那时我通过这个类似的json文件来约束我的模型的构建）；而model是通过tflite-schema.js对需要可视化的模型文件二进制流通过flatbuffers解析后的结构体。

查看tflite.js的源码，我们发现其实任何一个自定义的模型格式只需要在专ai模.js中定义如下所示的几个必要接口就可以了，这里我将设我们的专ai模型叫做pzkm：

pzkm.ModelFactory = class {
    match(context){
       //
    }

    open(context, match){
    // 返回一个new pzkm.Model()
    // 返回的就是送给可视化的结构体
    }
}
pzkm.Model = class{
    constructor(metadata, model){
        //内部构造函数，设备get对应的类成员变量
    }
    get format() {
        return this._format;
    }
    // min_runtime_version
    get runtime() {
        return this._runtime;
    }
    // model name
    get name() {
        return this._name;
    }
    // model version
    get version() {
        return this._version;
    }
    // model description
    get description() {
        return this._description;
    }
    // author name
    get author() {
        return this._author;
    }
    // license optonal
    get license() {
        return this._license;
    }
    // about view graphs
    // important for us
    get graphs() {
        return this._graphs; // 最为重要的结构体
    }
};
// 其他必要的结构体，因此过于繁杂，下文将会以图解的形式进行说明
if(typeof module !== 'undefined' && typeof module.exports === 'object'){
    module.exports.ModelFactory = pzkm.ModelFactory; // 这行代码是必须的
}

从上面我们发现，其实最后提供给netron的是一个ModelFactory，也就是模型工厂。因此我们如果想要适配自己的模型，那么就必须也有一个相应的ModelFactory。其经过ModelFactory.match()后应该返回一个什么样子的结构体呢？

二、ModelFactory.match()应该的结构体

上面的pzkm.Model这个class已经体现了一些信息。如果熟悉javascript，那么我们很容易看出在一个类的方法前面加入修饰符get是什么含义，其起到的作用就是实例化一个类后，通过get修饰符，我们很容易得到对应的内部信息，如下所示：

var pzkm = class {
    constructor(name){
        this._name = name;
    }
    get name(){
        return this._name;
    }
}
var a = new pzkm("hello");
//取值a.name相当于执行了a.name()这个函数，返回了实例化a._name
//将会打印出hello
console.log(a.name);

知道了get修饰符的作用，对于我们解读tflite.js就有很大的帮助了。我们一开始就认定了get修饰符所对应的信息就是netron可视化所必须的信息，这样我们可以根据tflite.js画出了如下所示思维导图：

对于上图的一些说明信息：带有[]的表示该变量是个列表，内部的元素类型是后面所接的蓝色框所示的变量，蓝色框所分支出来的表示其内部的成员变量。因此我们很容易对照上面的结构体来一一对应netron可视化tflite后的数据结构情况。子分支就是表示该分支拥有相应的get接口。而根类就是Model，也就是我们返回给netron的结构体。

那么我们重点解读一下graph下属的各个信息的含义，已经写在了如下所示的图片中：