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

        太久才来写这个专栏的第五篇，不是我鸽了，是想要测试我那两位数粉丝有没有催更的可能，结果是显而易见的——没有！好吧，其实是可视化篇比较难，花费了比较多的时间去编写代码适配专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下属的各个信息的含义，已经写在了如下所示的图片中：

 三、编写适配的代码

        按照上面的思维导图，我们应该很清晰的知道如何适配我们自己的模型格式，进行可视化操作了。适配的过程是漫长的，主要思路就是按照思维导图进行类的创建，以及实例化操作。

        我的主要适配代码放在了我的github的Custom-Netron仓库中https://github.com/pengzhikang/Custom-Netronhttps://github.com/pengzhikang/Custom-Netron       

        我编写的代码主要是

source/pzkm.jshttps://github.com/pengzhikang/Custom-Netron/blob/main/source/pzkm.js

        除此之外，我们还需要在以下各处添加对应的注册代码，不然netron遇到我们的格式后缀将产生报错：

        在source/app.js中添加自己扩展后缀：

         在source/index.html中添加自己的扩展后缀：

        在source/view.js中添加自己的扩展后缀： 

四、netron可视化专ai模的效果

        编写好适配代码后，我在之前文章的基础上，使用自己的专ai模生成了一个带有一个卷积层和一个池化层的模型。

        我使用上述适配好专ai模的netron打开那个模型文件，已经可以可视化了，同时对于权重的显示也成功适配了，如下所示：

        模型信息以及连接信息也成功显示：

 

         层的权重信息等也成功显示：

         因此，走到这一步，我们已经对我们的专ai模作了非常多的工作了，已经是逐渐走向成熟了。这些天的努力总算是有所成效了。

        那么下一步该做什么呢？正在计划中，或许可以来点不一样的。