AI Model Visualization

导言

作为一个AI初学者,总是遇到以下场景:

  1. 客户正在基于NV开发一个AI模型,需要同步的做昇腾适配。手上只有NV下的代码。
  2. 往往很难将论文里的AI模型的图,和代码里的每一层以及参数对应起来。

设计期望:

  1. 在模型开发的过程中,能简单插入,来明确当前模块的大致信息。
    1. 名称,类型(卷积层,池化层),输入/输出/参数, 执行的时间(第一次)。
  2. 可视化
  3. 格式兼容cpprinter。
  4. 能体现出TP,CP等并行策略的效果。

大致思路:

  • 还是借助chrome://tracing格式,来设计类似PyPrinter的工具。
  • 早期可以使用VizTracer代替。
Read more

Echart

echart

快速上手

  • 在github仓库dist目录下拷贝echart.js 和 echart.min.js到index.html目录下。

Vue-ECharts

参考中文文档

1
2
sudo apt-get install npm
npm install echarts vue-echarts

实践

简单柱状图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
option = {
title: {
text: 'Percentage of page walk time overhead caused by data TLB misses',
subtext: 'GUPS RandomAccess benchmark'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
name: 'input-data \nsize',
type: 'category',
data: ['2^29', '2^30', '2^31', '2^32'],
},
yAxis: {
// name: 'Percentage',
type: 'value',
title: 'align'
},
series: [
{
name: "Percentage",
data: [13.20, 19.50, 45.22,66.81],
type: 'bar',
label: {
show: true,
position: 'top'
},
}
]
};

需要进一步的研究学习

暂无

遇到的问题

暂无

开题缘由、总结、反思、吐槽~~

参考文献

Visualization Ranking

Goal

横向条形图排序赛跑叫Bar chart race

visualization using echart

  1. 完整的中文官方教程和丰富的插件和相关项目
  2. 可以支持vue
  3. 支持动态折线图和动态柱状图

visualization using d3.js

参考项目

但是好像是静态的,而且只有一个排序的柱状图

visualization using anichart

参考文档, 使用template项目

1
2
3
4
5
6
git clone https://github.com/Kirrito-k423/leetcode-ranking-visualization-anichart.git

# Install Dependencies
npm install -g pnpm
pnpm i
pnpm build # error

由于项目还在开发,暂时不进一步尝试

需要进一步的研究学习

暂无

遇到的问题

暂无

开题缘由、总结、反思、吐槽~~

参考文献