山东大学软件学院2024创新项目实训VCRS个人周报

项目简介

VCRS(Visual chat&retrieve system) 可视化课程知识对话问答与检索系统

本系统是一款专为计算机专业设计的智能学习辅助工具，旨在提升学生的学习效率和知识掌握深度。系统核心功能包括对话问答、知识图谱生成与可视化以及相关题目推荐。

---

个人进度周报

用于记录项目进展与个人工作进度

第一周

首先，系统的核心功能之一就是对话问答。通过观察和实践，决定使用Streamlit框架来实现对话问答相关功能的前端开发。

Streamlit框架

Streamlit lets you transform Python scripts into interactive web apps in minutes, instead of weeks. Build dashboards, generate reports, or create chat apps. Once you’ve created an app, you can use our Community Cloud platform to deploy, manage, and share your app.

Streamlit Github 地址

Streamlit 官方文档

许多著名的对话语言模型的前端开发都是使用的Streamlit框架开发的，例如：

• GPT-3 Playground
• ChatGPT-4
• Hugging Face Transformers
• StyleGAN Image Generation

安装Streamlit并启动演示实例：在项目文件夹下终端输入

pip install streamlit
streamlit hello

 

---

 对话界面的实现

import streamlit as st
import requests
import json

if "messages" not in st.session_state:
    st.session_state["messages"] = []

for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

if prompt := st.chat_input("How can I help you?"):
    with st.chat_message("User"):
        st.write(f"{prompt}")
    st.session_state.messages.append({"role": "user", "content": prompt})
    chat_url = 'http://localhost:5000/chat'
    response = requests.post(chat_url, json=st.session_state.messages)
    if response.status_code == 200:
        result = response.json()["result"]
    else:
        st.write('Error:', response.status_code)
    with st.chat_message("assistant"):
        st.session_state.messages.append({"role": "assistant", "content": result})
        st.write(result)

由于模型的微调与前后端的开发同步进行，因此在这里为了方便测试对话功能，通过ModelScope本地部署了一个轻量化大语言模型。

ModelScope Library是魔搭社区提供的一个能够快速、方便的使用社区提供的各类模型的Python library，其中包含了ModelScope官方模型的实现。

 ModelScope Library

由于仅做测试且部署在本地，因此选择了较小的大语言模型通义千问1.5-0.5B-Chat

Qwen1.5 is a language model series including decoder language models of different model sizes. For each size, we release the base language model and the aligned chat model. It is based on the Transformer architecture with SwiGLU activation, attention QKV bias, group query attention, mixture of sliding window attention and full attention, etc. Additionally, we have an improved tokenizer adaptive to multiple natural languages and codes. For the beta version, temporarily we did not include GQA and the mixture of SWA and full attention.

通义千问1.5-0.5B-Chat

from modelscope import AutoModelForCausalLM, AutoTokenizer

model = AutoModelForCausalLM.from_pretrained(
    "qwen/Qwen1.5-0.5B-Chat",
    device_map="cuda"
)
tokenizer = AutoTokenizer.from_pretrained("qwen/Qwen1.5-0.5B-Chat")

测试效果图 

---

第二周

工作内容简介

本周主要工作内容是搭建vue前端框架并编写部分美化、实用组件。例如card.vue，SideBar.vue， SideBarLink.vue，BaseInput.vue。

card.vue组件实现

<template>
  <div class="card" :class="[type && `card-${type}`]">
    <div class="card-image" v-if="$slots.image">
      <slot name="image"></slot>
    </div>
    <div
      class="card-header"
      :class="isRTL ? 'text-right' : 'text-left'"
      v-if="$slots.header || title"
    >
      <slot name="header">
        <h5 class="card-category" v-if="subTitle">{{ subTitle }}</h5>
        <h2 class="card-title">
          <i v-if="icon" class="tim-icons" :class="icon"></i>{{ title }}
        </h2>
      </slot>
    </div>
    <div class="card-body" v-if="$slots.default">
      <slot></slot>
    </div>
    <div class="card-image" v-if="$slots['image-bottom']">
      <slot name="image-bottom"></slot>
    </div>
    <slot name="raw-content"></slot>
    <div class="card-footer text-left" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "card",
  props: {
    title: String,
    subTitle: String,
    type: String,
    icon: String,
  },
  computed: {
    isRTL() {
      return this.$rtl.isRTL;
    },
  },
};
</script>
<style></style>

这个 Vue 组件是一个通用的卡片组件，它提供了一些可配置的插槽和属性，使得后面页面中的文字描述，图表的展示更结构化，更美观，同时更加灵活，更加实用。

这个卡片组件 (card) 包含了多个部分，每个部分都可以通过插槽进行定制

• image：用于在卡片顶部插入图片。
• header：用于自定义卡片头部内容
• default：用于插入卡片主体内容
• image-bottom：用于在卡片底部插入图片
• raw-content：用于在卡片内插入任意位置的内容
• footer：用于插入卡片底部内容

通过上述的插槽和属性，可以很方便地创建和定制卡片组件，使其适应不同的使用场景和需求。为后续的可视化图表以及数据的展示提供更加美观的容器。

SideBar.vue组件实现

<template>
  <div class="sidebar" :data="backgroundColor">
    <div class="sidebar-wrapper text-left">
      <div class="logo">
        <a href="javascript:void(0)" class="simple-text logo-mini">
          {{ abv }}
        </a>

        <a
          href="javascript:void(0)"
          class="simple-text logo-normal"
          :class="$rtl.isRTL ? '' : 'text-left'"
        >
          {{ title }}
        </a>
      </div>
      <ul class="nav">
        <slot>
          <sidebar-link> </sidebar-link>
        </slot>
      </ul>
    </div>
  </div>
</template>
<script>
import SidebarLink from "./SidebarLink.vue";

export default {
  name: "side-bar",
  components: {
    SidebarLink,
  },
  props: {
    abv: {
      type: String,
      default: "计网",
    },
    title: {
      type: String,
      default: "知识库可视化",
    },
    backgroundColor: {
      type: String,
      default: "green",
    },
    sidebarLinks: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeLinkIndex: 0,
    };
  },
  computed: {
    isRTL() {
      return this.$rtl.isRTL;
    },
  },
  methods: {
    findActiveLink() {
      this.links.forEach((link, index) => {
        if (link.isActive()) {
          this.activeLinkIndex = index;
        }
      });
    },
  },
};
</script>
<style></style>

这个组件用于创建一个带有可自定义标题和背景颜色的侧边栏，知识库可视化导航中使用。 

通过 props接受 abv 和 title 参数，分别用于设置侧边栏的缩写标识和完整标题。sidebarLinks 属性接收一个数组，用于传递侧边栏中的链接。默认情况下为空数组。侧边栏内使用 slot 插槽来插入 SidebarLink 组件，允许用户自定义链接内容。通过 data 属性 activeLinkIndex 和 methods 方法 findActiveLink 检测并设置当前活动的链接索引。通过 <slot> 标签和 <sidebar-link> 子组件的组合，使得侧边栏的内容可以根据需要动态插入和更改，提升组件的灵活性和可扩展性。

<template>
  <component :is="tag" v-bind="$attrs" class="nav-item" tag="li">
    <a class="nav-link">
      <slot>
        <i></i>

        <p>{{ link.name }}</p>
      </slot>
    </a>
  </component>
</template>

<script>
export default {
  name: "sidebar-link",
  inject: {
    autoClose: {
      default: true,
    },
  },
  props: {
    link: {
      type: [String, Object],
      default: () => {
        return {
          name: "",
          path: "",
          icon: "",
        };
      },
    },
    tag: {
      type: String,
      default: "router-link",
    },
  },
  methods: {
    isActive() {
      return this.$el.classList.contains("active");
    },
  },
};
</script>

<style></style>

这个组件，用于创建侧边栏中的导航链接。该组件具有灵活性和可扩展性，可以根据传递的属性动态渲染不同类型的链接标签。 

通过 tag 属性，可以动态指定渲染的标签类型，默认为 router-link，也可以根据需要渲染成其他标签，如 a 标签等。使用 inject 机制从父组件中注入 autoClose 属性，默认为 true，方便控制链接点击后的自动关闭行为。通过 v-bind="$attrs" 传递所有未被显式声明的属性到根元素，使得组件更加灵活，可以接收和应用更多属性。

<template>
  <div
    class="form-group"
    :class="{
      'input-group': hasIcon,
      'input-group-focus': focused,
    }"
  >
    <slot name="label">
      <label v-if="label" class="control-label">
        {{ label }}
      </label>
    </slot>
    <slot name="addonLeft">
      <span v-if="addonLeftIcon" class="input-group-prepend">
        <div class="input-group-text">
          <i :class="addonLeftIcon"></i>
        </div>
      </span>
    </slot>
    <slot>
      <input
        :value="value"
        v-bind="$attrs"
        v-on="listeners"
        class="form-control"
        aria-describedby="addon-right addon-left"
      />
    </slot>
    <slot name="addonRight">
      <span v-if="addonRightIcon" class="input-group-append">
        <div class="input-group-text">
          <i :class="addonRightIcon"></i>
        </div>
      </span>
    </slot>
    <slot name="helperText"></slot>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  name: "base-input",
  props: {
    label: String,
    value: [String, Number],
    addonRightIcon: String,
    addonLeftIcon: String,
  },
  model: {
    prop: "value",
    event: "input",
  },
  data() {
    return {
      focused: false,
    };
  },
  computed: {
    hasIcon() {
      const { addonRight, addonLeft } = this.$slots;
      return (
        addonRight !== undefined ||
        addonLeft !== undefined ||
        this.addonRightIcon !== undefined ||
        this.addonLeftIcon !== undefined
      );
    },
    listeners() {
      return {
        ...this.$listeners,
        input: this.onInput,
        blur: this.onBlur,
        focus: this.onFocus,
      };
    },
  },
  methods: {
    onInput(evt) {
      this.$emit("input", evt.target.value);
    },
    onFocus() {
      this.focused = true;
    },
    onBlur() {
      this.focused = false;
    },
  },
};
</script>
<style></style>

这个组件，用于创建一个带有标签、图标和辅助文本的基础输入框。该组件通过灵活的插槽机制允许用户自定义输入框的内容和外观，适用于各种表单场景。

提供多个插槽，允许用户自定义标签（slot name="label"）、左侧附加图标（slot name="addonLeft"）、右侧附加图标（slot name="addonRight"）和辅助文本（slot name="helperText"默认插槽包含输入框本身，使其结构灵活，可根据需要进行扩展

组件内部通过 focused 属性管理输入框的焦点状态，并在焦点状态变化时添加或移除 input-group-focus 类名。根据是否存在图标动态添加 input-group 类名，并根据焦点状态动态添加 input-group-focus 类名，使输入框在不同状态下具有不同的样式。左侧图标使用 input-group-prepend 和 input-group-text 包裹，右侧图标使用 input-group-append 和 input-group-text 包裹，使图标和输入框的样式一致且美观。使用 inheritAttrs: false 使组件不自动继承根元素的特性，并通过 v-bind="$attrs" 传递所有未被显式声明的属性到输入框元素。使用 computed 属性 listeners 合并和重写事件监听器，确保输入框的事件处理函数可以正常工作。

第三周 

工作内容简介

以计算机网络相关知识为例来做前端的开发，包括对计算机网络知识库各实体类型的统计，实体关系的可视化。

使用工具

前端使用echarts以下三种图表作为辅助工具对数据进行可视化展示

Echarts饼状图

Echarts关系依赖图

Echarts环形关系图

实现与展示

计算机网络知识各层占比——Echarts饼状图

查看Echarts的示例代码，可以看到数据以下形式存放

data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],

在vue中导入echarts组件

import * as echarts from "echarts";

在HTML中为图表预留位置，id为"main"。

<div id="main" style="width: 100%; height: 400px"></div>

在methods中创建SetOption方法，使用document.getElementById获取位置信息，使用echarts来初始化图标，将数据放入配置项放入option将echarts生成。

setOption() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '目录',
          subtext: 'OSI',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [{"value": 2730, "name": "物理层"}, {"value": 1341, "name": "数据链路层"}, {"value": 1254, "name": "介质访问控制"}, {"value": 1848, "name": "网络层"}, {"value": 766, "name": "传输层"}, {"value": 256, "name": "应用层"}, {"value": 1, "name": "其他"}],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }

最后再在mounted中调用函数，即可使用echarts对数据进行可视化

mounted() {
    this.setOption();
  },

展示效果 

计算机网络章节关系

使用方式与上述饼状图方法类似，不同的是存有章节关系的json文件要通过$.get获取，通过回调函数拿到json文件中的实体关系内容，为每一个node加上索引idx后组成新的node列表，同时获取json文件中的category和links，加入到echarts的配置项中，生成出关系图。

mainReSetOption(){
      var chartDom = document.getElementById("main-re");
      var myChart = echarts.init(chartDom);
      var option;
      myChart.showLoading();
      myChart.showLoading();
      $.get('/kg_by_category.json', function (webkitDep) {
        myChart.hideLoading();
        option = {
          legend: {
            data: ['物理层', '数据链路层', '介质访问控制', '网络层', '传输层', '应用层', '其他'],
            top: 10
          },
          series: [
            {
              type: 'graph',
              layout: 'force',
              animation: false,
              label: {
                position: 'right',
                formatter: '{b}'
              },
              draggable: false,
              data: webkitDep.nodes.map(function (node, idx) {
                node.id = idx;
                return node;
              }),
              categories: webkitDep.categories,
              force: {
                edgeLength: 5,
                repulsion: 20,
                gravity: 0.2
              },
              edges: webkitDep.links,
              symbolSize: 7,
              zoom: 0.5
            }
          ],
          dataZoom: [
            {
              type: 'slider',
              start: 0,
              end: 100
            },
            {
              type: 'inside',
              start: 0,
              end: 100
            }
          ]
        };
        myChart.setOption(option);
      });
    },

效果展示

计算机网络章内实体关系样例

使用方法与上述两个图表相似，这里不做过多阐述

setCircleOptions(){
      var chartDom = document.getElementById('main-circle');
      var myChart = echarts.init(chartDom);
      var option;

      myChart.showLoading();
      $.getJSON('re_circle.json', function (graph) {
        myChart.hideLoading();
        graph.nodes.forEach(function (node) {
          node.label = {
            show: node.symbolSize > 30
          };
        });
        option = {
          title: {
            text: '环状关系网',
            subtext: 'Circular layout',
            top: 'bottom',
            left: 'right'
          },
          tooltip: {},
          legend: [
            {
              data: graph.categories.map(function (a) {
                return a.name;
              })
            }
          ],
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              name: 'Les Miserables',
              type: 'graph',
              layout: 'circular',
              circular: {
                rotateLabel: true
              },
              data: graph.nodes,
              links: graph.links,
              categories: graph.categories,
              roam: true,
              label: {
                position: 'right',
                formatter: '{b}'
              },
              lineStyle: {
                color: 'source',
                curveness: 0.3
              }
            }
          ]
        };
        myChart.setOption(option);
      });
    },

效果展示

 

通过这三个可视化的图表，可以直观地看到计算机网络知识在不同层次（如物理层、数据链路层、网络层、传输层、应用层等）的分布情况。理解整个计算机网络课程或书籍的逻辑结构和章节的组织方式。明确学习的路径和顺序。并深入理解每个章节的内部结构和知识点的逻辑关系。通过了解知识点之间的关系，掌握知识的连贯性和整体性。  

第四周

工作内容简介

本周主要完成的是对计算机网络相关知识点概念词条的搜索与展示

实现与展示

搜索

首先就是搜索功能的实现，功能比较简单，这里直接贴代码

<v-card class="mx-auto my-12" min-width="240">
            <v-text-field
              v-model="search"
              label="搜索"
              prepend-icon="mdi-magnify"
              class="mx-3"
            ></v-text-field>
            <v-list class="scroll-list">
              <v-list-item
                v-for="item in filteredItems"
                :key="item['id']"
                @click="handleClick(item)"
                clickable
              >
                <v-list-item-content>{{ item['title'] }}</v-list-item-content>
              </v-list-item>
            </v-list>
          </v-card>

对所有知识点的获取还是通过对读取组内其他成员爬取好的json数据

getEntities(){
      const self = this;
      $.getJSON('entities.json', function (entities) {
        self.items = entities
      });
    },

概念词条的展示 

可以通过点击搜索出的每个知识点，获取该知识点的信息，通过该知识点信息的id去访问其具体的概念词条并展示出来。

handleClick(item) {
      this.loadItemData(item['id']);
    },
    loadItemData(id) {
      const self = this;
      $.getJSON(`text_data/${id}.json`, function (data) {
        self.currentItem = data;
      });
    },

效果展示

第五周

 工作内容简介

本周完成的主要工作就是对计算机网络每个知识点实体的知识图谱的可视化

使用工具

Echarts 关系图

经过对Echarts关系图的观察，关系图需要的数据有

data: graph.nodes,
links: graph.links,
categories: graph.categories,

而graph的数据来自示例中的ROOT_PATH + '/data/asset/data/les-miserables.json'

想要获取实例中的json信息，来得知graph的结构，需要F12进入开发者模式找到NetWork，重新刷新界面，找到“les-miserables.json”即可观察json中的数据的结构。

 可以观察到数据的结构为(每个元素只取第一个)

{
   "nodes": [
      {
        "id": "0",
        "name": "Myriel",
        "symbolSize": 19.12381,
        "x": -266.82776,
        "y": 299.6904,
        "value": 28.685715,
        "category": 0
      }
    ],
    "links": [
      {
        "source": "1",
        "target": "0"
      },
    ],
    "categories": [
      {
        "name": "A"
      },
    ]
}

实现与展示

通过上述观察到的数据的结构，组内其他队员完成了对所有知识点实体关系的提取，并将json文件保存下来。

拥有关系数据后，只需要使用类似前几周完成的计算机网络章节关系和章内实体关系样例图的方法，使用$.getJSON 和回调函数将选取的知识点的json文件中的关系信息放入option中，并用echarts将option嵌入，生成图表。

loadTreeData(item) {
      const self = this;
      self.currentItem = item['title']
      echarts.dispose(document.getElementById('vis-kg'))
      var chartDom = document.getElementById('vis-kg');
      var myChart = echarts.init(chartDom);
      var option;
      myChart.showLoading();
      $.getJSON('kg_data/' + item['id'] + '.json', function (graph) {
        myChart.hideLoading();
        option = {
          tooltip: {},
          legend: [
            {
              data: graph.categories.map(function (a) {
                return a.name;
              })
            }
          ],
          series: [
            {
              name: 'Les Miserables',
              type: 'graph',
              layout: 'none',
              data: graph.nodes,
              links: graph.links,
              categories: graph.categories,
              roam: true,
              label: {
                show: true,
                position: 'right',
                formatter: '{b}'
              },
              labelLayout: {
                hideOverlap: true
              },
              scaleLimit: {
                min: 0.4,
                max: 2
              },
              lineStyle: {
                color: 'source',
                curveness: 0.3
              }
            }
          ]
        };
        myChart.setOption(option);
      });
    },

效果展示

 通过知识图谱，可以直观地展示每个知识点与其他相关知识点之间的关联关系。可以快速浏览整个知识体系，理解各个知识点的全貌和具体细节，而无需逐一阅读文本描述。图谱化的信息呈现方式，可以增强对知识点及其关系的记忆，更好地理解知识点的内在联系和应用场景，加深对复杂概念的理解。还可以帮助用户规划学习路径，获取更有针对性的信息。

第六周

工作内容简介

本周主要完成的工作内容是实现对每一个计算机网络相关知识点的目录树的可视化展示

使用工具

Echarts 矩形树图

先对Echarts给出的json实例进行观察，数据的结构为以下结构

{
  "name": "echarts",
  "size": 3835461,
  "children": [
    {
      "name": "action",
      "size": 2307,
      "children": [
        {
          "name": "action/roamHelper.ts",
          "size": 2307,
          "value": 2307
        }
      ],
      "value": 2307
    },
    {
      "name": "animation",
      "size": 44515,
      "children": [
        {
          "name": "animation/basicTrasition.ts",
          "size": 11322,
          "value": 11322
        },
        {
          "name": "animation/morphTransitionHelper.ts",
          "size": 8706,
          "value": 8706
        },
        {
          "name": "animation/universalTransition.ts",
          "size": 24487,
          "value": 24487
        }
      ],
      "value": 44515
    },
  ]
}

每一矩形块有name,size,children,value四个参数，其中children里可以嵌套的加入矩形块，来达到展示表示包含，分类等关系的目录树的目的。

实现与展示

在队友完成对关系的提取，数据的生成与保存后，即可实现对计算机网络相关知识点的矩形目录树的可视化展示。

loadTreeData(item) {
      const self = this;
      self.currentItem = item['title']
      if (self.intervalId != null) {
        clearInterval(self.intervalId);
        self.intervalId = null;
      }
      echarts.dispose(document.getElementById('vis-tree'))
      var chartDom = document.getElementById('vis-tree');
      var myChart = echarts.init(chartDom);
      var option;
      $.getJSON(
        'tree_data/' + item['id'] + '.json',
        function (data) {
          const treemapOption = {
            series: [
              {
                type: 'treemap',
                id: 'echarts-package-size',
                animationDurationUpdate: 1000,
                roam: false,
                nodeClick: undefined,
                data: data.children,
                universalTransition: true,
                label: {
                  show: true
                },
                breadcrumb: {
                  show: false
                }
              }
            ]
          };
          const sunburstOption = {
            series: [
              {
                type: 'sunburst',
                id: 'echarts-package-size',
                radius: ['20%', '90%'],
                animationDurationUpdate: 1000,
                nodeClick: undefined,
                data: data.children,
                universalTransition: true,
                itemStyle: {
                  borderWidth: 1,
                  borderColor: 'rgba(255,255,255,.5)'
                },
                label: {
                  show: false
                }
              }
            ]
          };
          let currentOption = treemapOption;
          myChart.setOption(currentOption);
          self.intervalId = setInterval(function () {
            currentOption =
              currentOption === treemapOption ? sunburstOption : treemapOption;
            myChart.setOption(currentOption);
          }, 3000);
        }
      );
    },

效果展示

第七周

工作内容简介

本周的主要工作内容主要是完成对计算机网络各个知识点概念词条的分析以生成词云

使用工具 

• python jieba模块

Python的jieba库是一个中文分词工具，它可以将一段中文文本分割成一个一个的词语，帮助进行文本分类、情感分析等工作。jieba库使用了基于前缀词典的分词方法，能够处理中文的各种复杂情况，如歧义词、新词等。它还提供了多种分词模式，如精确模式、全模式、搜索引擎模式等，以适应不同场景的需求。

• python wordcloud模块

 wordcloud则是一个非常优秀的词云展示python库，它支持自定义词云图的大小、颜色、字体等，甚至可以通过蒙版图片设置词云图的形状。

实现与展示

使用jieba库和wordcloud库对计算机网络相关知识点进行分词和词云的生成并在前端进行展示

loadImageData(item) {
      this.currentImage = {
        'title': item['title'],
        'img': `img_data/${item['id']}.png`
      };
    },

 效果展示

截至目前

前端开发方面相关的工作已经做了以下几个方面

首先，使用streamlit前端框架实现了一个简易的对话界面，通过本地部署大语言模型对该功能进行了测试，能够正确的进行对话，后续将连接小组自己训练和微调的大语言模型。并将streamlit的对话界面嵌入到vue框架中。

其次是搭建好了vue前端框架，写了几个具有更加灵活的使用方法且更加美观的vue组件，例如card.vue，SideBar.vue， SideBarLink.vue，BaseInput.vue。这几个组件可以使系统的展示结构更加鲜明，条理，美观。同时通过组件添加的插槽和属性，可以很方便地创建和定制各种组件，使其适应不同的使用场景和需求。

然后以计算机网络的相关知识为例，做了几个方面的数据分析和可视化。首先统计分析了计算机网络知识库里的所有知识在计算机网络分层架构上的分布情况。然后以层为分类做了章节关系的知识图谱的可视化，再对每个章节内部的知识点根据他们之间的关系做了章节内部的知识图谱的可视化。

然后实现了对计算机网络所有知识实体的概念词条的展示。

再对每一个知识实体进行进一步分析，由它们与其他各实体之间的关系出发为每一个实体进行了知识图谱的构建和可视化。可以搜索任意一个实体展示其与其他实体之间的联系。可以快速浏览整个知识体系，理解各个知识点的全貌和具体细节，而无需逐一阅读文本描述。

再根据实体之间的联系，具有描述实体之间包含与被包含关系的数据。对每一个实体实现一个矩形目录的可视化，可以通过看每个实体的矩形目录，清楚的获取该实体包含哪些内容，以及这些内容之间的并列或者嵌套包含的关系。有大到小，有简入深，掌握知识的整体性和条理性。

最后对每一个实体，根据它的概念词条，使用python的jieba库进行分词，使用wordcloud库生成词云。并进行了展示。