displacy
1.0.0
켈 v2.0.0 기준으로, Dispacy Visualizers는 이제 핵심 라이브러리에 통합됩니다. Spacy 내에서Doc객체를 시각화하는 방법에 대한 자세한 내용은 여기를 참조하십시오. 우리는 또한 스파크 모델을 제공하고 테스트하기위한 새로운 도구를 연구하고 있습니다. 독립형 비주얼 코드는 여전히 적극적으로 유지되지 않은 Github에서 사용할 수 있습니다.
discy.js는 현대적이고 서비스 독립적 인 시각화 라이브러리입니다. 이것이 다른 서비스를 쉽게 비교하고 자신의 사내 모델을 탐색 할 수 있기를 바랍니다. Spacy의 구문 파서를 사용하는 경우 변위는 일반 워크 플로의 일부가되어야합니다. Spacy의 파서는 통계적이기 때문에 주어진 문장을 분석하는 방법을 예측하기가 종종 어렵습니다. Dastacy를 사용하면 간단히 시도하고 볼 수 있습니다. 팀과 토론 할 페이지를 공유하거나 다른 곳에서 사용할 SVG를 저장할 수도 있습니다. 자신의 모델을 개발하는 경우 서비스를 직접 실행할 수 있습니다. 100% 오픈 소스입니다.
discy.js에 대한 자세한 내용은 블로그 게시물을 확인하십시오.
이 데모는 HTML에 컴파일하고 HARP가 제작하거나 제공하는 확장 가능한 템플릿 언어 인 Jade (일명 Pug)에서 구현됩니다. http : // localhost : 9000에서 로컬로 제공하려면 간단히 실행하십시오.
sudo npm install --global harp
git clone https://github.com/explosion/displacy
cd displacy
harp server또는 단순히 NPM에서 설치하십시오.
npm install displacy-demo데모는 ECMAScript 6으로 작성되었습니다. 전체 크로스 브라우저 호환성을 위해 Babel과 같은 컴파일러를 사용해야합니다. 자세한 내용은이 호환성 테이블을 참조하십시오.
프로젝트에서 Dastacy를 사용하려면 Github에서 또는 NPM을 통해 displacy.js 다운로드하십시오.
npm install displacy그런 다음 파일을 포함시키고 API 및 설정을 지정하는 새 인스턴스를 초기화합니다.
const displacy = new displaCy ( 'http://localhost:8000' , {
container : '#displacy' ,
format : 'spacy' ,
distance : 300 ,
offsetX : 100
} ) ;입력 데이터를 생성하는 서비스도 오픈 소스입니다. Spacy-Services에서 찾을 수 있습니다.
다음 설정을 사용할 수 있습니다.
| 환경 | 설명 | 기본 |
|---|---|---|
| 컨테이너 | 변형을 끌어 올리는 요소는 쿼리 선택기 일 수 있습니다. | #displacy |
| 체재 | 구문 분석에 사용되는 형식 ( 'spacy' 또는 'google' ) | 'spacy' |
| 기본 텍스트 | 텍스트를 지정하지 않고 변형이 실행되는 경우 사용됩니다 | 'Hello World.' |
| 기본 모델 | 모델이 지정되지 않은 상태에서 실행되면 사용됩니다 | 'en' |
| 붕괴 | 문장 부호를 붕괴시킵니다 | true |
| 붕괴 | 붕괴 문구 | true |
| 거리 | px의 단어 사이의 거리 | 300 |
| 오프셋 | px에서 SVG의 왼쪽에 간격 | 50 |
| 화살표 | 겹치는 것을 피하기 위해 PX의 화살표 사이의 간격 | 20 |
| Arrowwidth | px에서 화살표 헤드의 너비 | 10 |
| 화살표 | px의 아크 너비 | 2 |
| 단어 낭비 | px에서 단어와 아크 사이의 간격 | 50 |
| 세례반 | 모든 텍스트에 대한 글꼴 얼굴 | 'inherit' |
| 색상 | 텍스트 색상, 16 진수, RGB 또는 색상 이름 | '#000000' |
| BG | 배경색, 16 진수, RGB 또는 색상 이름 | '#ffffff' |
| onstart | 서버 요청 시작시 실행될 기능 | false |
| onsuccess | 성공적인 서버 응답에서 실행되는 콜백 기능 | false |
| 오류 | 요청이 실패하면 실행할 기능 | false |
parse() 메소드는 컨테이너에서 SVG로 Spacy에 의해 생성 된 구문 분석을 렌더링합니다.
displacy . parse ( 'This is a sentence.' , 'en' , {
collapsePunct : false ,
collapsePhrase : false ,
color : '#ffffff' ,
bg : '#000000'
} ) ;여기에 지정된 시각적 설정은 전역 설정을 무시합니다. 사용 가능한 설정은 붕괴 , 붕괴 , 글꼴 , 색상 및 BG 입니다.
또는 render() 사용하여 JSON 형식의 아크 및 단어 세트를 수동으로 렌더링 할 수 있습니다.
const parse = {
arcs : [
{ dir : 'right' , end : 1 , label : 'npadvmod' , start : 0 }
] ,
words : [
{ tag : 'UH' , text : 'Hello' } ,
{ tag : 'NNP' , text : 'World.' }
]
} ;
displacy . render ( parse , {
color : '#ff0000'
} ) ;여기에 지정된 시각적 설정은 전역 설정을 무시합니다. 사용 가능한 설정은 글꼴 , 색상 및 BG 입니다.
기본적으로, Disclacy는 다음 스타일로 Spacy의 JSON 출력을 기대합니다.
{
"arcs" : [
{ "dir" : " left " , "end" : 4 , "label" : " nsubj " , "start" : 0 }
],
"words" : [
{ "tag" : " NNS " , "text" : " Robots " }
]
} format 'google' 으로 설정되면 API 응답은 Google 형식에서 변환됩니다. 자신의 전환 규칙을 추가하려면 handleConversion() 에 새 사례를 추가하십시오.
handleConversion ( parse ) {
switch ( this . format ) {
case 'spacy' : return parse ; break ;
case 'google' : return ( { words : ... , arcs : ... } ) ; break ;
case 'your_format' : return ( { words : ... , arcs : ... } ) ; break ;
default : return parse ;
}
} 이제 format: 'your_format' 으로 변위를 초기화 할 수 있습니다.
/assets/css/_displacy-theme.sass 에서 현재 테마 설정을 찾을 수 있습니다. SVG 출력에 포함 된 모든 요소에는 태그 및 데이터 속성이 함께 제공되며 CSS를 사용하여 유연하게 스타일링 할 수 있습니다. 기본적으로 요소의 currentColor 채색에 사용되므로 CSS의 color 속성 만 변경하면됩니다.
다음 수업을 사용할 수 있습니다.
| 클래스 이름 | 설명 |
|---|---|
| .Displacy-Word | 단어 텍스트 |
| .Displacy-tag | POS 태그 |
| .Displacy-token | Word and Pos 태그의 컨테이너 |
| .Displacy-arc | 화살표 아크 (레이블 또는 화살표 없음) |
| .Displacy-label | 관계 유형 (화살표 레이블) |
| .Displacy-Arrowhead | 화살표 머리 |
| .Displacy-Arrow | 아크, 라벨 및 화살표 헤드의 컨테이너 |
또한 이러한 속성을 속성 선택기로 사용할 수 있습니다.
| 기인하다 | 값 | 요소에 |
|---|---|---|
| 데이터 태그 | POS 태그 값 | .displacy-token , .displacy-word , .displacy-tag |
| 데이터 라벨 | 관계 유형 값 | .displacy-arrow , .displacy-arc , .displacy-arrowhead , .displacy-label |
| 데이터 디어 | 화살의 방향 | .displacy-arrow , .displacy-arc , .displacy-arrowhead , .displacy-label |
해당 선택기와 일부 기본 CSS 논리의 조합을 사용하여 구문 분석의 역할과 기능을 기반으로 요소를 스타일링하기 위해 매우 강력한 템플릿을 만들 수 있습니다. 몇 가지 예는 다음과 같습니다.
/* Format all words in 12px Helvetica and grey */
. displacy-word {
font : 12 px Helvetica , Arial , sans-serif;
color : grey;
}
/* Make all noun phrases (tags that start with "NN") green */
. displacy-tag [ data-tag ^= "NN" ] {
color : green;
}
/* Make all right arrows red and hide their labels */
. displacy-arc [ data-dir = "right" ] ,
. displacy-arrowhead [ data-dir = "right" ] {
color : red;
}
. displacy-label [ data-dir = "right" ] {
display : none;
}
/* Hide all tags for verbs (tags that start with "VB") that are NOT the base form ("VB") */
. displacy-tag [ data-tag ^= "VB" ] : not ([ data-tag = "VB" ]) {
display : none;
}
/* Only display tags if word is hovered (with smooth transition) */
. displacy-tag {
opacity : 0 ;
transition : opacity 0.25 s ease;
}
. displacy-word : hover + . displacy-tag {
opacity : 1 ;
} Disclacy는 words 와 arcs 에서 구문 분석을 통해 사용자 정의 속성을 정의 할 수 있습니다.
"words" : [
{
"tag" : " NNS " ,
"text" : " Robots " ,
"data" : [
[ " custom " , " your value here " ],
[ " example " , " example text here " ]
]
}
] 사용자 정의 속성은 데이터 속성으로 data- 속성으로 추가되므로 이름에는 공백이나 특수 문자가 포함되어서는 안됩니다. words 에 추가되면 데이터 속성은 토큰 ( .displacy-token )에 첨부되고 arcs 에 추가되면 화살표 ( .displacy-arrow )에 연결됩니다.
< text class =" displacy-token " data-custom =" your value here " data-example =" example text here " > ... </ text >
