Dubhe/dubhe-visual-server/webapp/▓┘╫ў╓╕─╧.md

## 模型结构

### 主体界面

#### 计算图

1.通过滚轮实现图的放大与缩小

2.通过单击鼠标左键并移动实现图的移动

3.单击节点会将节点具体信息显示在菜单栏，同时，与该节点相连的其他节点以及边都会标红

4.双击节点可以实现节点的展开与缩回

5.右键节点可以对节点进行边的隐藏、显示以及删除操作

6.当通过右键删除节点时，节点会被放置在右侧的隐藏栏中。双击隐藏栏内的节点可以实现节点的放回

#### 结构图

1.通过滚轮实现图的放大与缩小

2.通过单击鼠标左键并移动实现图的移动

3.单击选择节点在右侧展示不同的特征图

### 功能栏

上方**计算图**、**结构图**按钮可以切换展示不同图像

#### 计算图

1.用户通过条件的输入与选择实现针对节点的**批量筛选**

2.**隐藏**按钮用于实现针对符合批量筛选条件节点的隐藏，但并没有改变图的结构

3.**布局**按钮用于实现针对符合批量筛选条件以及单独隐藏节点的删除与重新布局，该操作会让剩余节点在当前新条件下重新绘制，会改变图的结构

4.**上一步**按钮用于返回用户的之前一步操作

5.**初始化**按钮用于将图重置为最初未经改变的图像

#### 结构图

1.当日志中存在特征图数据时，下方会显示特征图展示框

2.特征图展示框在未展开状态时也可展示特征图，在每一个节点的特征图区域可以横向滑动查看更多

3.**选择特征图方法**下拉选择框用于选择不同的特征图方法，选择一种方法后，左侧结构图上有特征图的节点出现标记

4.**展开显示特征图**按钮用于展开显示特征图，并展示更多功能

5.特征图展示框展开后，**展示分类结果**按钮用于显示图片是否分类正确，正确分类的图片的特征图有绿色边框，错误分类显示红色边框

6.**清空**按钮用于清除特征图展示框中的所有图片

7.每一个节点的特征图展示区域下方的**更多**按钮用于加载日志中的更多特征图，一次获取最多16张

#### 数据信息栏

信息栏用于显示单击特定节点时节点的全部信息，可通过**箭头**按钮实现对信息的折叠与展开



---



## 标量数据

### 主体界面


标量图表操作：

1. 不同分类的图表组可以单击选择关闭或打开视图
2. 可以鼠标移动到数据上显示数据信息
3. 每一图表右上角有放大缩小按钮
4. 右上角矩形框可为用户定制所用，选中后再按定制按钮就可以把数据迁移上用户定制上；也可为合并多个图表时所用
5. 在图表内部拖动鼠标选择一个方形区域可进行图表局部放大，双击图表可还原


### 控制栏


Smooth：调整数据显示平滑程度，选择范围为（0 ~ 0.9）

Y-axis：调整y轴数据显示方式，共两种，一种是linear（原始数据），一种是log-linear（取对数后的数据）

合并按钮：将勾选中的图表进行合并，合并限制：至多可勾选两种tag的图表，至多可勾选6幅图表

还原按钮：将勾选中的合并图表进行还原


### 数据信息栏

暂无数据



---



## 媒体数据

### 主体界面

可以显示文本，图像，音频

#### 文本

1. 显示相应的数据
2. slider 可以对step进行拖拽

#### 图像

1. 可以对图像进行点击，显示大图
2. slider 可以对step进行拖拽

#### 音频

1. 可以播放音频
2. slider 可以对step进行拖拽

### 数据信息栏

1. 暂时为空

   

---



## 统计分析

### 主体界面

由直方图和分布图两部分组成

直方图操作：

1. 直方图可以单击选择关闭或打开视图
2. 可以鼠标移动到数据上显示数据信息
3. 每一直方图右上角有放大缩小按钮
4. 右上角矩形框为用户定制所用，选中后再按定制按钮就可以把数据迁移上用户定制上

分布图操作：

1. 分布图可以单击选择关闭或打开视图
2. 每一直方图右上角有放大缩小按钮
3. 右上角矩形框为用户定制所用，选中后再按定制按钮就可以把数据迁移上用户定制上


### 控制栏

直方图控制栏：

数据显示比率参数：调整数据显示数量

统计区间个数参数：调整总体数据的统计区间个数

模式下拉框：直方图三维或二维显示



### 数据信息栏

显示直方图选中的原始数据



---



## 降维分析

### 主体界面

可以显示2维，3维，4-8维操作

#### 2维操作

1. 可以对点(线条)进行点击，数据信息栏会显示存储的图片/文本
2. 鼠标移动上去可以简单显示对应的点和标签
3. 拖拽可以对点进行局部方法
4. 双击显示窗口可以回到初始的显示界面

#### 3维操作

1. 可以对点(线条)进行点击，数据信息栏会显示存储的图片/文本
2. 鼠标移动上去可以简单显示对应的点和标签
3. 鼠标滚轮可以进行缩放

#### 4-8维操作

1. 可以对点(线条)进行点击，数据信息栏会显示存储的图片/文本
2. 鼠标移动上去可以简单显示对应的点和标签
3. 控制面板栏目会出现`概率密度`窗口
   勾选对应的标签会显示对应标签的统计数据，最多勾选两个
4. 可以在轴上拖拽出一个灰色矩形框，然后对局部进行高亮

### 控制面板

1. 可以选择对应的标签(Tag)
2. 可以选择对应的降维方法(PCA TSNE)
3. 可以选择维度信息
4. 播放按钮可以显示出step动态的动画（这个功能对于应2，3,4-8维）

### 数据信息栏

1. 显示对应的数据（文字和图片）

   

---



## 超参数

### 主体界面

主界面由平行坐标以及表格数据

平行坐标操作：

1. 选择坐标轴上部分区域高亮显示对应的表格数据也会高亮

  2. 鼠标移动到线上高亮显示
  3. 坐标轴移动以改变平行坐标

表格操作：

1. 鼠标移动到某一行，平行坐标上对应数据会高亮显示

### 控制面板

主参数 控制颜色映射对应的数据

坐标尺度： 数值型数据可以选择线性坐标轴和对数坐标轴

### 统计信息栏

显示选中的数据进行统计信息显示。

默认选中全部数据


### 数据信息栏

显示选中数据的原始信息。



---



## 异常检测

### 主体界面

由直方图、颜色矩阵和盒须图三部分组成
直方图：数据的统计信息，区间不均匀分布，坐标轴上的红色标记对应盒须图异常点的上下边界
颜色矩阵：用矩形表示数值点，根据数值大小为矩形赋予一个颜色值，颜色矩阵可以通过滚轮放大缩小查看；
		  颜色条上下三角形可拖动，只查看一定范围内的数值分布，数值大小超出上下三角形数值的矩形颜色变灰
盒须图：拖动下方坐标轴上的刷子可查看相应范围内的盒须图，
	    点击某个盒须图，请求异常点数据，在盒须图中用红色圆圈标记出来，并把颜色矩阵中对应的矩形的边界高亮
		异常值的上下边界也可拖拽，停止拖拽时会重新获取新范围外的异常点数据
		

### 控制栏

主要功能：调节盒须图异常值的上下边界
联动选择：勾选联动后，盒须图异常值的上下边界会同步变化

### 数据信息栏

鼠标放到颜色矩阵或是盒须图的异常点上，显示该点所在的行、列、数值大小等

### 数据信息栏

暂无数据



---


## 注意力分析

注意力分析模块用于展示Transformer模型训练过程中所产生的注意力数据，包括图像注意力数据和文本注意力数据，对于图像注意力数据，可以点击图片的某块区域，获取其他区域与该区域的注意力数据分析图；可以选择不同的层和头展示不同的注意力数据；可以选择不同图片展示注意力数据；可以切换全局和局部注意力，在全局模式下可以调整注意力比例，获取更为明显的注意力图像。对于文本注意力数据，首先以表格和环形图的方式展现全部层和头注意力数据的大体情况，用户可通过观察表格数据，在环形图中过滤出感兴趣的注意力头。在选定某个注意力头后，用户可在AttentionVis区域查看具体的注意力联系情况，分析出具体的注意力分布模式。

### 文本注意力

#### 主体界面

1. 统计信息表以表格形式展示单句话的所有注意力头信息，所选头已高亮，用户可点击表头上下箭头进行升序或降序排序。
   
2. 统计信息图以环形图形式展示单句话的所有注意力头信息，每个柱形图代表一个注意力头，柱形图的起始点标识最小值和最大值，颜色标识方差大小。将鼠标悬停在柱形图上方时，会有相应的提示框提示相应头的具体信息，同时右侧的数据信息栏也会展示相应信息。通过上方的过滤操作，可展示过滤后符合条件的注意力头。
   
3. AttentionVis提供折线图及矩阵图展示单个头的注意力信息，通过统计信息表和统计信息图了解全部注意力头数据后，用户可选定单个注意力头，通过两种展现形式具体查看相应数据，通过选择不同的layer和head，用户可逐一查看所有头的注意力信息数据。

#### 控制栏

用户可通过下拉框选择不同语句文本展示不同的注意力数据。

### 图像注意力

#### 主体界面

1.左侧图片展示区域显示分析的原图，图片上的绿色框为选择的区域，随鼠标点击移动

2.右侧激活图展示区域展示不同Layer的激活图

#### 控制栏

1.**选择图片**下拉框用于选择不同的分析图片

2.**选择层**下拉框用于选择不同的Layer，可以多选

3.**选择归一化方式**开关用于选择展示全局归一化或局部归一化方式的激活图

4.在全局归一化方式下，**比例**选择滑动条用于选择不同的展示比例


---


## 隐状态分析

### 主体界面

隐状态分析模块用于展示RNN模型训练过程中所产生的隐状态数据，将隐状态数据的每一维数据可视化一条直线，通过递进的文本输入，展现维度数据的变化。用户可点击左右按钮及设置跳转位置进行任意位置的跳转。通过设置阈值，用户可在文本带上选择滑动区域进行过滤操作，观察符合匹配模式的隐状态数据维度，结果由蓝色线条高亮显示。同时点击匹配按钮可全局搜索输入文本中和所选区域内符合相同模式的文本，展示在匹配结果表格中。

1. 用户可点击左移右移按钮，按照固定步数更新折线图，也可以通过设置指定位置，直接进行跳转。

2. 用户可设置阈值Threshold过滤在指定范围内大于阈值的隐状态数据维度。

3. 用户在选定滑动范围时，可选择匹配模式，中间阴影区域为大于阈值（记录为1），两侧为小于阈值（记录为0），通过匹配模式字符串匹配整个输入文本中的相同模式区域。

### 控制栏

1. 阈值设置

2. 跳转位置设置

3. 匹配模式显示及匹配按钮

4. 显示高亮维度编号


---


## 用户定制

### 主体界面

可以将媒体数据，标量数据，统计分析数据集中到用户定制集中显示
1. 通过点击上面信息框的勾选框，再点击用户定制图标，自动跳转到用户定制
2. 点击‘X’，会删除对应的显示组件

### 控制栏
对应的显示组件有对应的控制栏的话，右边会出现相应的控制栏