现代网页的开源命名实体可视化工具
2016年10月5日 · 7分钟阅读
命名实体识别（NER）是自然语言处理中的关键技术。无论进行何种文本处理，通常都需要以不同于常规词汇的方式处理人名、数字、日期等实体。为此，某机构发布了displaCy-ent.js库。本文阐述该库的工作原理及使用方法。
更新（2018年2月）
自spaCy v2.0起，displaCy ENT可视化器已集成至核心库，支持在浏览器中呈现可视化效果、生成原始标记或在Jupyter笔记本中输出结果。详见可视化器文档。
技术特性
displaCy ENT是一款轻量级可扩展库，可获取JSON格式的命名实体标注并将其转换为语义化HTML。此方式既能保持原始文本完整性，又可基于Web标准避免额外依赖。例如Brat可视化器功能丰富但需要500多行样式表、三种字体及11个JavaScript依赖（包含jQuery及两个插件），而displaCy ENT仅需最简依赖即可实现静态可视化或自定义工作流。
实战应用
浏览器兼容性说明
displaCy ENT基于ECMAScript 6开发，需使用Babel等编译器确保跨浏览器兼容性（详见兼容性表）。
基础集成方法
引入displaCy-ent.js后初始化实例并指定API配置。通过parse(text, model, ents)方法渲染由spaCy服务生成的解析结果（可免费下载运行）：
1
2
3
4
5
6
7
8
9
|
const api = 'http://localhost:8000'
const displacy = new displaCyENT(api, {
container: '#displacy'
})
const text = '示例文本内容'
const model = 'en'
const ents = ['person', 'org', 'date']
displacy.parse(text, model, ents)
|
也可使用render(text, spans, ents)手动渲染REST服务返回的JSON格式实体范围。
静态可视化方案
若仅需可视化给定文本实体，无需引入JavaScript：直接通过在线演示页面复制HTML与CSS代码，可使用CodePen工具实时测试效果。displaCy ENT同时会在控制台输出完整HTML标记。
动态生成方案
通过文档加载完成后替换容器内容实现动态可视化：
1
2
3
4
5
6
7
8
9
10
|
const displacy = new displaCyENT('http://localhost:8000', {
container: '#displacy',
defaultModel: 'en',
defaultEnts: ['person', 'org', 'date']
});
document.addEventListener('DOMContentLoaded', (ev) => {
const text = document.querySelector('#displacy').textContent;
displacy.parse(text);
});
|
注意：此方案仅获取文本内容会忽略换行符与HTML标签。可通过替换内部HTML的换行符和段落标签作为临时解决方案：
1
2
3
4
5
6
|
const container = document.querySelector('#displacy');
container.innerHTML = container.innerHTML
.replace(/<br\s*[\/]?>/gi, '\n')
.replace(/<p[^>]*>/g, '')
.replace(/<\/p>/g, '\n\n');
displacy.parse(container.textContent);
|
XSS防护警告
不建议使用正则表达式随意清除HTML标签。若处理用户输入等不可控内容，应使用专业HTML消毒库防止跨站脚本攻击（XSS）。建议仅对纯文本使用displaCy ENT。
技术实现原理
displaCy ENT使用HTML5 <mark> 元素包装实体并添加data-entity数据属性：
1
2
3
4
5
|
<div class="entities">
当<mark data-entity="person">示例人名</mark>于
<mark data-entity="date">2023年</mark>在
<mark data-entity="org">某机构</mark>开始工作时...
</div>
|
通过JavaScript将服务器返回的实体范围列表切片，对需可视化的实体添加标记标签和数据属性。CSS通过:after伪元素显示数据属性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
[data-entity]:after {
content: attr(data-entity);
display: inline-block;
vertical-align: middle;
}
[data-entity='person'] {
background: rgb(166, 226, 45);
}
[data-entity='person']:after {
background: rgba(166, 226, 45, 0.2);
border-color: rgb(166, 226, 45);
}
|
高级样式控制
通过CSS选择器可实现首实例标签显示、悬停效果等高级功能。使用~选择器实现非首实例标签隐藏：
1
2
3
4
5
6
7
8
9
10
11
|
[data-entity="person"] {
transition: opacity 0.25s ease;
}
[data-entity="person"] ~ [data-entity="person"]:after {
opacity: 0;
}
[data-entity="person"] ~ [data-entity="person"]:hover:after {
opacity: 1;
}
|
可通过Sass循环自动化处理多实体类型：
1
2
3
4
5
6
7
8
|
$entities: ( person: #f44d61, org: #8e7dff, date: #2fbbab )
@each $entity, $color in $entities
[data-entity="#{$entity}"] ~ [data-entity="#{$entity}"]
&:after
opacity: 0
&:hover:after
opacity: 1
|
未来规划
计划增加对更多标注格式（如某中心NLP API和CoreNLP）的支持，并发布更多实体样式CSS主题。欢迎通过Sass模板提交功能请求。
更新（2018年2月）
displaCy ENT可视化器已集成至spaCy v2.0核心库，详见可视化器文档。