企业官网建设流程全解析

网站建设加后台,专业网站制作地址,html网站制作答辩ppt,网站建设 上传和下载功能displaCy.js#xff1a;面向现代Web的开源NLP可视化工具 随着某中心、某机构等机构推出新服务#xff0c;现在已有多种优秀的云端API可用于句法依赖分析。这些服务的一个关键部分是交互式演示#xff0c;用户可以输入句子并查看标注结果。现在宣布发布displaCy.js#xff…displaCy.js面向现代Web的开源NLP可视化工具随着某中心、某机构等机构推出新服务现在已有多种优秀的云端API可用于句法依赖分析。这些服务的一个关键部分是交互式演示用户可以输入句子并查看标注结果。现在宣布发布displaCy.js这是一个现代化的、独立于服务的可视化库。希望这能方便用户比较不同的服务并探索自己的内部模型。更新2018年2月自spaCy v2.0起displaCy可视化工具已集成到核心库中。它支持在浏览器中提供可视化、生成原始标记或在Jupyter笔记本中输出结果。更多细节请参阅可视化工具文档。displaCy的历史于2015年将其作为NLP库spaCy的可视化工具推出并于2016年8月开源了代码。第一个版本依赖于一个旧的CSS技巧。新版本使用SVG来产生灵活且易于导出的输出。这里有一个由新版基于SVG的displaCy渲染的句子示例。在项目中使用displaCy.js关于兼容性的说明displaCy使用ECMAScript 6编写。为了获得完全的跨浏览器兼容性请确保使用像Babel这样的编译器。更多信息请参阅此兼容性表格。只需包含displaCy.js并初始化一个指定API和设置的新实例。parse(text, model, settings)方法将spaCy生成的解析结果在容器中渲染为SVG。默认情况下它期望使用spaCy的服务你可以免费下载和运行。如果使用某中心的NLP API请将format设置为google。// 你的APIconstapihttp://localhost:8000// 初始化displaCyconstdisplacynewdisplaCy(api,{container:#displacy,format:spacy,distance:300,offsetX:100,})// 解析句子displacy.parse(This is a sentence.,en,{collapsePunct:false,collapsePhrase:false,color:#ffffff,bg:#000000,})displaCy的工作原理一个依赖关系可视化包含三个主要组成部分单词及其对应的词性标签按顺序水平显示。弧线不同长度的弧线连接两个单词并带有显示其关系类型的相应标签。箭头头部位于每条弧线起点或终点的箭头头部指示其方向。关于SVG可缩放矢量图形格式自21世纪初就已存在。与其他图像格式不同SVG使用易于通过CSS或JavaScript操作的XML标记。SVG甚至提供了强大的颜色滤镜和动态裁剪功能并且随着浏览器支持的改进已在许多网站上取代了图标字体。所有三个组件都可以使用SVG元素path和text来实现其中tspan用于分隔文本片段textPath用于将弧线标签沿着圆形的弧线路径包裹。让我们看一下第一个单词“Robots”以及连接它和“are”的箭头。这是displaCy生成的标记的一个简化示例示例SVG标记节选svgxmlnshttp://www.w3.org/2000/svgxmlns:xlinkhttp://www.w3.org/1999/xlink!-- 词元 --texty440text-anchormiddletspanx150fillcurrentColorRobots/tspantspanx150dy2emfillcurrentColorNNS/tspan/text!-- 弧线 --pathidarrow-0dM150,400 C150,0 950,0 950,400stroke-width2pxstrokecurrentColorfillnone/path!-- 弧线标签 --textdy1emtextPathxmlns:xlinkhttp://www.w3.org/1999/xlinkxlink:href#arrow-0startOffset50%text-anchormiddlefillcurrentColornsubj/textPath/text!-- 箭头头部 --pathdM150,402 L144,392 156,392fillcurrentColor/path/svg上面的标记是根据如下所示的JSON数据生成的来自API的示例JSON节选{arcs:[{dir:left,end:4,label:nsubj,start:0}],words:[{tag:NNS,text:Robots}]}为了将JSON格式转换为SVG标记需要两个主要函数一个用于绘制单词一个用于绘制弧线。绘制单词渲染单词相当简单因为它们独立于整个句子。每个单词需要两个坐标x距左侧的距离和y距顶部的距离。从左侧的固定偏移量开始第一个单词将放置在offsetX处第二个单词在offsetX distance处第三个单词在offsetX 2 * distance处依此类推。这可以简化为一个简单的公式offsetX i * distance。暂时不要过于关注y坐标因为它们对于所有组件几乎相同——对于单词只是添加了一点间距使它们不会太靠近箭头。constoffsetX150;// 距左侧的距离constdistance300;// 单词间距// 遍历单词constmarkupwords.map(({text,tag},i)text y${offsetYwordSpacing} text-anchormiddle tspan x${offsetXi*distance}${text}/tspan tspan x${offsetXi*distance} dy2em${tag}/tspan /text.trim()).join();绘制弧线每条弧线都带有其起点和终点的索引因此计算其长度变得很简单end - start。这使得弧线的起点为offsetX start * distance终点为offsetX (end - start) * distance。现在如果将这些数字添加到我们的路径定义中会得到一条连接两点的漂亮的直线pathstrokecurrentColordM150,400 950,400/曲线部分则有些棘手。对于每条曲线需要在路径定义中添加四个额外的值左右三次贝塞尔控制点的x和y坐标。为了展示其效果从SitePoint复刻了这个很棒的演示。你可以移动控制点并观察它如何影响path标记。曲线的高度需要适应弧线的长度。跨越三个单词的箭头需要比跨越两个单词的箭头更高——否则它们会重叠。根据句子的语法结构通常会有很多长度为1和2的弧线连接单词与其下一个和第二个邻居然后是一两条长度为3或4的弧线可能还会有一条长度为10的大弧线。这种长依赖关系在关系从句、疑问句和标点符号中尤其常见并且在像德语这样的语言中也很常见动词和动词前缀经常放在从句的末尾。错误修复说明这个问题也是旧版displaCy中一个主要bug的原因。当时使用了一个技巧如果句子有特别长的弧线就按一定百分比减少整体弧线高度。然而这有时会导致最小的弧线变得不可见。如果仅使用弧线的长度来计算其曲线在可视化复杂句子时会很快遇到问题最大的箭头变得巨大并产生太多空白使得可视化几乎无法使用。最长的弧线与其他弧线相比非常巨大并产生了太多空白。这里最大箭头的高度相对于其长度21来说是巨大的即使相对于长度8的高度也足以使其比第二大箭头更高。可以通过生成所有出现长度的有序列表来解决这个问题。渲染弧线时现在可以使用每个长度的索引1从级别1开始。// 从集合创建数组以避免重复值并排序constlevels[...newSet(arcs.map(({end,start})end-start).sort((a,b)a-b))];// [1, 2, 3, 4, 5, 6, 7, 21]// 获取弧线的级别constarc{dir:right,end:28,label:punct,start:7};constlevellevels.indexOf(arc.end-arc.start)1;// 8同一句子得到了更好的结果——最大的弧线仍然是最大的。现在可以相对于整体级别生成箭头及其曲线// 获取最高级别最高长度值的索引 1consthighestLevellevels.indexOf(levels.slice(-1)[0])1constoffsetX150// 距左侧的距离constdistance300// 单词间距conststartXoffsetXstart*distanceconststartY(distance/2)*highestLevelconstendpointoffsetX(end-start)*distanceconstcurvestartY-((end-start)*distance)/2// 合并路径定义的值constdM${startX},${startY}C${startX},${curve}${endpoint},${curve}${endpoint},${startY}// 生成路径标记constpathpath d${d} stroke-width2px fillnone strokecurrentColor /path箭头头部只是一个形成三角形的路径放置在弧线的起点或终点。为了将标签沿着弧线路径的中间包裹可以利用textPath元素并将其链接到弧线的idpathidarrow-0d.../pathtextPathxlink:href#arrow-0startOffset50%text-anchormiddleLabel/textPath使用CSS为可视化添加样式为了允许自定义样式SVG中包含的所有元素都带有标签和数据属性。默认情况下使用元素的currentColor进行着色这意味着你只需要在CSS中更改color属性。例如箭头具有类.displacy-arrow以及data-label和data-dir属性。使用这些选择器的组合和一些基本的CSS逻辑可以创建相当强大的模板来根据元素在解析中的角色和功能为其添加样式。/* 使所有名词短语以NN开头的标签变为绿色 */.displacy-tag[data-tag^NN]{color:green;}/* 隐藏所有不是基本形式VB的动词标签以VB开头的标签 */.displacy-tag[data-tag^VB]:not([data-tagVB]){display:none;}将displaCy与Harp或Node / Express一起使用由于SVG图形由基本的XML组成可以使用像Jade这样的模板引擎来动态生成标记。为此博客编写了一个简单的mixin可以为任何给定的解析JSON表示生成静态内联SVG。它甚至比displacy.js更紧凑不到50行并且可在此处获得。它适用于基于Jade的静态网站生成器如Harp或使用原生支持Jade模板的Express的Node应用程序。要使用此mixin请将其包含在文件顶部并使用完整的解析对象作为参数调用displacy()include _displacy displacy({ arcs: [ ... ], words: [ ... ] })要为单个弧线添加自定义类名可以在相应的弧线对象中添加style: classname。已在此功能中使用了此功能以在一张图形中说明正确的依赖关系与不正确的依赖关系。下一步计划计划支持更多注释格式如CoreNLP。同时你可以添加自己的自定义转换器。还推出了一个现代化且轻量级的命名实体可视化工具——敬请期待另一篇深入的博客文章更新2018年2月自spaCy v2.0起displaCy可视化工具已集成到核心库中。它支持在浏览器中提供可视化、生成原始标记或在Jupyter笔记本中输出结果。更多细节请参阅可视化工具文档。更多精彩内容 请关注我的个人公众号 公众号办公AI智能小助手或者 我的个人博客 https://blog.qife122.com/对网络安全、黑客技术感兴趣的朋友可以关注我的安全公众号网络安全技术点滴分享