Coder Social home page Coder Social logo

synyi / poplar Goto Github PK

View Code? Open in Web Editor NEW
506.0 26.0 138.0 15.67 MB

A web-based annotation tool for natural language processing (NLP)

Home Page: https://synyi.github.io/poplar/

License: GNU General Public License v3.0

TypeScript 79.05% JavaScript 2.38% HTML 3.59% CSS 1.45% Vue 13.33% Shell 0.21%
nlp annotation svg

poplar's Introduction

Poplar

license version

A web-based annotation tool for natural language processing (NLP) needs, inspired by brat rapid annotation tool.

screenshot

Poplar is the new version of synyi-annotation-tool and not production ready. Please report an issue if you find any problems.

Demo

See https://synyi.github.io/poplar/

Quick start

Install

npm i poplar-annotation

or if you'd like to use yarn

yarn add poplar-annotation

Create

import {Annotator} from 'poplar-annotation'
/**
  * Create an Annotator object
  * @param data          can be JSON or string
  * @param htmlElement   the html element to bind to
  * @param config        config object
  */
new Annotator(data: string, htmlElement: HTMLElement, config?: Object)

More info

View our API Reference here.

Want to contribute?

See our Developer's Guide.

Support

Poplar is led by AI team at Synyi

Contact us

poplar's People

Contributors

dependabot[bot] avatar geminiyu233 avatar gongkaikai avatar grzhan avatar longfangsong avatar xingbofeng avatar zkllab avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

poplar's Issues

字符长度过长导致标注无法渲染出来

作者您好,我运行您的demo分支代码发现一个问题,我输入一个新的文本(非样本文件)之后,进行标注,label能被添加到json文件中,但是左侧页面上确没有高亮出来,请问这个问题您能帮忙解决一下吗?看您源代码上好像加了TODO

想请教一下如何使用这个工具

我搭建了一个vue项目,然后在该项目中安装了这个工具,可是在模板中只是导入之后就会报错,想知道具体的问题出在哪里,可以帮帮我吗?(qq:1216498454)

中文中出现小数点的情况

在标注的过程中,中文中出现了小数点的情况,会导致直接换行的情况,这个能够做出合理的判断吗?
另外,现在的版本中,在chrome浏览器上,划词功能选中的高亮样式好像没有了,只能看到划词开始的位置,而并看不到划词结束的位置,这个需要怎么解决呢?

Failed to execute 'getExtentOfChar' on 'SVGTextContentElement'

如题,测试文本如下,报如上的错误,直接渲染不出来:
双眼lpi孔通
tyn(+)
颜色可
右眼下方盘沿稍窄
右眼1级 上/下方盘沿稍窄
双眼注视眼位可
后巩膜葡萄肿
双眼外眼前节未见明显异常
相应处rnfld 左眼3级 上下方盘沿均变窄
瞳孔膜闭
双眼球突出
视盘斜入
瞳孔正常
双眼:滤过泡弥散
眼底视盘色淡
左眼盘沿形态未见明显异常
双眼高度近视眼底
左眼视盘水肿
右眼翼状胬肉
乳头+
左眼前节未见明显异常
直径6mm
眼底c/d=0.4
直径5mm
左眼1级 上/下方盘沿稍窄
色尚可
对光反射存
抵抗感(-)
右眼-
斜入
眼底窥视不清
晶体后囊轻混
眼球轻突出
瞳圆
双but< 5s
右眼晶体皮质楔形混浊
右眼rapd(+)
左眼注视
无充血
虹膜纹理清晰
左眼结膜下出血
右j4
视网膜血管细
微血管瘤
双眼黄斑区未见明显异常
瞳孔对光反射存在
双外眼未见明显异常
晶体表面色素沉着
前房深 双眼c/d=05
眼底:双眼盘沿形态未见异常
右眼上/下方盘沿稍窄
余视不清
右眼滤过弥散
左眼角膜弥漫水肿
前房轴深中深
角膜明
根切孔可见
各方向可见大量激光斑
直径2mm
右眼色淡

image

修改行距问题

请问怎么修改行距呢,当文字字体变大时,行距太小了,影响文字显示效果

labelClicked这个功能不想触发它,怎么破?

我这样用:
this.annotator.on('labelClicked', (id) => {
// 输出用户点击的label的ID
console.log(id);
});
仅仅是答应一个日志,但是为什么在鼠标左键点击标签时,还是会触犯连接标签的箭头呢?
我想要的是:用户点击标签时也不要触发连接功能,也就是完全禁止用户操作。怎么做才能达到这个要求!

能否支持跨越换行符标注

看到src/Action/Label.ts里面调用的:

    apply(store: Store) {
            if (store.content.slice(this.startIndex, this.endIndex).includes("\n")) {
                // todo: support this?
                throw Error("Insert label across hard line is not supported now! Please remove the \\n in content first!");
            }
            store.labelRepo.add(new LabelModel.Enthity(null, this.categoryId, this.startIndex, this.endIndex, store));
        }

想问下这个换行符好不好支持啊

求教如何使用。

可以教我一下怎么用这个工具吗?我按照开发文档,在js中导入,然后就报错了(qq:1216498454)

DOMException: "Index or size is negative or greater than the allowed amount"

{"content": "The aim of the presented study was to characterize the anticonvulsant effects of levetiracetam in combination with various antiepileptic drugs (carbamazepine, phenytoin, topiramate and vigabatrin) in the mouse 6Hz psychomotor seizure model. Limbic (psychomotor) seizure activity was evoked in albino Swiss mice by a current (32mA, 6Hz, 3s stimulus duration) delivered via ocular electrodes; type II isobolographic analysis was used to characterize the consequent anticonvulsant interactions between the various drug combinations for fixed-ratios of 1:1, 1:2, 1:5 and 1:10. With type II isobolographic analysis, the combinations of levetiracetam with carbamazepine and phenytoin for the fixed-ratios of 1:5 and 1:10 were supra-additive (synergistic; P<0.01) in terms of seizure suppression, while the combinations for the fixed-ratios of 1:1 and 1:2 were additive. Levetiracetam combined with topiramate and vigabatrin for the fixed-ratio of 1:10 exerted supra-additive interaction (P<0.05), and simultaneously, the two-drug combinations for the fixed-ratios of 1:1, 1:2 and 1:5 produced additive interaction in the mouse 6Hz psychomotor seizure model. The combinations of levetiracetam with carbamazepine and phenytoin for the fixed-ratios of 1:5 and 1:10, as well as the combinations of levetiracetam with topiramate and vigabatrin for the fixed-ratio of 1:10 appear to be particularly favorable combinations exerting supra-additive interaction in the mouse 6Hz psychomotor seizure model. Finally, it may be concluded that because of the synergistic interactions between levetiracetam and carbamazepine, phenytoin, topiramate and vigabatrin, the combinations might be useful in clinical practice."}

上面为出问题的文本,上面只是出问题的一个例子。我用其中的多个部分进行测试可以正常标记,但是整体就会出错,文本区域只显示小量黑点,其他什么也没有。如下图所示:
WX20200227-114952@2x

Firefox中console的错误为:
DOMException: "Index or size is negative or greater than the allowed amount"

Chrome中的错误为:
vue.runtime.esm.js:1888 DOMException: Failed to execute 'getExtentOfChar' on 'SVGTextContentElement': The charnum provided (47) is greater than or equal to the maximum bound (47).

开源询问

您好,现在贵公司poplar是没打算开源吗?那synyi版本是已经开源使用了吗?感谢

无开源协议

你好,看到poplar没有开源协议,请问下能否添加一份开源协议?

Roadmap

Version 0.1.1

  • feature: support clean up (clear all svg elements)
  • feature: make initial render async
  • feature: auto left padding

Version 0.2.0

feature: relation

  • detect relation label's collision
  • draw arrow
  • handle situation: relation text label is wider than related label's distance
  • async render relations while importing
  • connect two annotated labels by dragging

Version 0.3.0

span multi-lines

  • label: span multi-lines
  • compatibility: firefox
  • rendering failed occasionally

Version 0.4.0

  • load optimization
  • annotate paragraph
  • Safari: crash while exporting PNG image

Refactor

  • FE workflow: integrate jspm
  • Component: Line
  • Neaten SVG groups' hierarchy
  • Rebuild scaffold

跨多行connection渲染失败

测试json:

{
"content": "1. Carbamazepine (CBZ) is an antiepileptic drug with narrow therapeutic window and administration in humans receiving long-term therapy with diosmin (DSN) may occur, which leads to CYP3A4-mediated drug interactions. The purpose of the present study was to assess the influence of DSN on the metabolism and pharmacokinetics of CBZ in healthy volunteers. 2. An open-label, sequential, two-period study was conducted in 12 healthy male volunteers. A single dose of DSN 500 mg was administered once daily for 10 days during treatment phase. A single dose of CBZ 200 mg was administered during control and after treatment phases under fasting conditions. The blood samples were collected after CBZ dosing at predetermined time intervals and analyzed by LC-MS/MS. 3. Treatment with DSN significantly enhanced the maximum plasma concentration (Cmax),area under the curve (AUC), half-life (t1/2) and significantly decreased the apparent oral clearance (CL/F) and elimination rate constant (Kel) of CBZ. On the other hand, treatment with DSN significantly decreased the Cmaxand AUC of carbamazepine 10, 11-epoxide (CBZE). Furthermore, treatment with DSN significantly decreased the metabolite to parent ratios of Cmaxand AUC, indicating the reduced metabolism of CBZ to CBZE. 4. The results suggest that the altered CYP3A4 enzyme activity and pharmacokinetics of CBZ might be attributed to DSN-mediated inhibition of CYP3A4 enzyme, which indicates pharmacokinetic interaction present between DSN and CBZ. Therefore, we conclude that DSN has an inhibiting effect on the metabolism and disposition of CBZ.",
"labelCategories": [
{
"id": 0,
"text": "Herb/herbal component",
"color": "#eac0a2",
"borderColor": "#8c7361"
},
{
"id": 1,
"text": "Western Drug",
"color": "#7ed321",
"borderColor": "#f8e71c"
}],
"labels": [
{
"id": 0,
"categoryId": 1,
"startIndex": "3",
"endIndex": "16"
},
{
"id": 1,
"categoryId": 1,
"startIndex": "1076",
"endIndex": "1104"
}],
"connections": [
{
"id": 0,
"categoryId": 12,
"fromId": 1,
"toId": 0
}],
"connectionCategories": [
{
"id": 12,
"text": "Metabolite of"
}]
}

上面的json载入后,就会报错:
TypeError: this.svgElement is null ConnectionView.ts:141:6

请帮忙看下,谢谢。

readme里面启动的命令有误

package.json文件的第11行,scripts节点里面,实际的启动应该是 npm run start:dev
但readme里面写的是 npm run dev
对于我这样的小白,解决这个命令还花了点时间.

cache的实现

cache的实现是否可以考虑使用一个全局的Map而不是加载class的constructor里?

V2.0中labelCategories及connectionCategories的id为什么设计是从0开始连续自增的呢?

在使用升级的V2.0后,我的data格式如下:

{
  "content": "文本内容",
  "labelCategories": [
        {
            "id": 0,
            "text": "名词",
            "color": "#eac0a2",
            "borderColor": "#a38671"
        },
        {
            "id":8,
            "text": "动词",
            "color": "#619dff",
            "borderColor": "#436db2"
        },
        {
            "id": 2,
            "text": "形容词",
            "color": "#9d61ff",
            "borderColor": "#6d43b2"
        },
        {
            "id": 99,
            "text": "副词",
            "color": "#ff9d61",
            "borderColor": "#b26d43"
        }
    ],
    "labels": [
        {
            "id": 0,
            "categoryId": 99,
            "startIndex": 0,
            "endIndex": 2
        },
        {
            "id": 1,
            "categoryId": 0,
            "startIndex": 3,
            "endIndex": 4
        }
    ],
    "connectionCategories": [
        {
            "id": 0,
            "text": "修饰"
        },
        {
            "id": 1,
            "text": "限定"
        },
        {
            "id": 2,
            "text": "是...的动作"
        }
    ],
    "connections": []
}

labelCategories及connectionCategories从数据库取出来的的id是乱序,并非是从0开始连续自增的,这样就会导致对label新增的时候,新增的label名称并非选中的label名,connections也是同样的。
对此我有两点问题:
1、不是很明白作者为什么要设计labelCategories及connectionCategories的id是从0开始连续自增的?
2、这样对版本迁移非常不友好呢,像我司开始用您的V1.0版本是允许labelCategories及connectionCategories的id随意的,升级V2.0版本后,若要按此规则的话,之前用V1.0版本标注的数据都不能用了呢,请问有什么解决办法吗?(目前我的办法是将后端传过来的数据labelCategories及connectionCategories的id处理成从0开始连续自增,在标注结束后,提交保存前,再对应还原数据库的labelCategories及connectionCategories的id)

v2意见征集

本人目前正在开发v2版本

希望能新增的内容是:

  • 更小的包大小(通过移除svg.js和rxjs的依赖)
  • 更好的换行策略 (#26, #32)
  • 自适应行距 (#29)
  • 更多的可配置项,包括
    • 行距 (#29)
    • 所有的字体(内容、Label、Connection)(#15)
    • 给内容、Label和Connection添加自定义class
    • Label的padding
    • 是否允许同两个Label间的重复Connection(#21)
    • 各种功能是否启用(#19)
  • 允许自定义Action
  • 更多事件
  • 内容编辑功能(#33)
  • 更详尽的文档(#23,#24,#25,#28)

如果有相关建议或意见,欢迎在本issue或其他issue中提出。

(目前已经有了不使用svg.js和rxjs,支持自适应行距、配置所有字体的demo版,代码已经上传至v2分支)

字數換行的問題

虽然可以设置maxLineWidth来决定每行的字数
但是不同的萤幕大小所能承受的maxLineWidth是不同的,这样除了自动计算不同萤幕的maxLineWidth之外,不知道是否有更好的做法?

文本中含‘\n’解析页面换行,label显示不出来,并在尝试标注此文本label时会报错。

数据格式形如:
{
"content": "你好呀的你\n好呀的你好呀的你好呀的你好呀",
"labelCategories": [
{
"id": 0,
"text": "你好",
"color": "#eac0a2",
"borderColor": "#a38671"
}
],
"labels": [
{
"id": 0,
"categoryId": 0,
"startIndex": 4,
"endIndex": 8
}
],
"connectionCategories": [],
"connections": []
}

页面渲染“你好”的label并没有成功,并且在手动标注“你好”的时候,报错如下:
Error: Insert label across hard line is not supported now! Please remove the \n in content first!
什么时候能支持到呢?

今天看了下源码 poplar\src\Annotator\Store\Entities路径下的Line.ts中的第65行!!。.??"\n这里把.去掉还有第70行!!。.??”"a-zA-Z这里也把.去掉 小数点就不会换行了 demo中找到vendor.6884fc746c954a8feea5.js这个文件和源码Line.ts第65、70行相对应的地方改掉就可以了

今天看了下源码 poplar\src\Annotator\Store\Entities路径下的Line.ts中的第65行!!。.??"\n这里把.去掉还有第70行!!。.??”"a-zA-Z这里也把.去掉 小数点就不会换行了 demo中找到vendor.6884fc746c954a8feea5.js这个文件和源码Line.ts第65、70行相对应的地方改掉就可以了

Originally posted by @dllmm in #16 (comment)

如何進行更新

如想把文字進行更新,有remove()在new Annotator()之外的方法嗎?

V2.0中Action.Label.Update并不生效

在升级V2.0版本后使用Action.Label.Update方法时,对于单独的label修改并不生效,若修改有connection的label,则报错TypeError: Cannot read property 'startIndex' of undefined;,根据官方demo中vue版本做了修改以此来复现该问题,请fork此链接项目,只需修改Annotate.vue文件备注部分即可。

換行問題

你好,在maxLineWidth正確設定的狀況下,偶爾會有無法換行的情況,推測可能是因為文字有label,所以無法換行。請問這是Bug嗎?

image

同一个词重复标记问题

您好,首先非常感谢您的开源项目,在您的demo中同一个词可以重复标记,请问是有这样的业务需求吗?

image

有支持快捷键标注的吗

每个标签label都有对应的快捷键。选择文本后,直接按下快捷键,就对该文本进行标注了。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.