displacy
1.0.0
️ По состоянию на v2.0.0 визуализаторы дисплеера теперь интегрированы в основную библиотеку. Смотрите здесь для получения более подробной информации о том, как визуализировать объектDocиз Spacy. Мы также работаем над новым набором инструментов для обслуживания и тестирования моделей SPACY. Код автономных визуализаторов все еще будет доступен на GitHub, просто не поддерживается активно.
Displacy.js-это современная и независимая от обслуживания библиотека визуализации. Мы надеемся, что это позволяет легко сравнивать различные услуги и изучить свои собственные модели. Если вы используете синтаксический анализатор SPACY, дифферентность должна быть частью вашего обычного рабочего процесса. Поскольку анализатор Spacy является статистическим, часто трудно предсказать, как он будет анализировать данное предложение. Используя дисптационирование, вы можете просто попробовать увидеть. Вы также можете поделиться страницей для обсуждения с вашей командой или сохранить SVG для использования в другом месте. Если вы разрабатываете свою собственную модель, вы можете запустить услугу самостоятельно - это 100% открытый исходный код.
Чтобы узнать больше о Displacy.js, ознакомьтесь с сообщением в блоге.
Эта демонстрация реализована в нефрите (он же мопс), расширяемого языка шаблонов, который компилируется для HTML, и построен или обслуживается Harp. Чтобы обслуживать его локально на 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. Для полной кросс-браузерной совместимости обязательно используйте такого компилятора, как Вабель. Для получения дополнительной информации см. Эта таблица совместимости.
Чтобы использовать дифферентность в вашем проекте, загрузите displacy.js из github или через NPM:
npm install displacyЗатем включите файл и инициализируйте новый экземпляр, указывающий API и настройки:
const displacy = new displaCy ( 'http://localhost:8000' , {
container : '#displacy' ,
format : 'spacy' ,
distance : 300 ,
offsetX : 100
} ) ;Наша служба, которая производит входные данные, также является открытым исходным кодом. Вы можете найти его в Spacy-Services.
Доступны следующие настройки:
| Параметр | Описание | По умолчанию |
|---|---|---|
| контейнер | Элемент для привлечения дифферентности, может быть любым выбором запросов | #displacy |
| формат | Формат, используемый для генерации Parse ( 'spacy' или 'google' ) | 'spacy' |
| по умолчанию | Текст используется, если недовольство запускается без указанного текста | 'Hello World.' |
| DefaultModel | модель, используемая, если диспетчерская работа запускается без указанной модели | 'en' |
| коллапспункт | коллапс пунктуация | true |
| коллапсефраз | коллапсные фразы | true |
| расстояние | Расстояние между словами в PX | 300 |
| offsetx | Расстояние на левой стороне SVG в PX | 50 |
| Стрелка | Расстояние между стрелками в PX, чтобы избежать совпадений | 20 |
| Стрезающая шитина | ширина стрелки в PX | 10 |
| Стрелка | ширина дуги в PX | 2 |
| Слова | Расстояние между словами и дугами в PX | 50 |
| шрифт | Лицо шрифта для всего текста | 'inherit' |
| цвет | Цвет текста, шестигранник, RGB или имена цветов | '#000000' |
| б. | Цвет фона, шестнадцатеричный, RGB или цветные названия | '#ffffff' |
| Onstart | Функция, которая будет выполнена в начале запроса сервера | false |
| onsuccess | Функция обратного вызова, которая будет выполнена на успешном ответе на сервер | false |
| Onerror | Функция, которая будет выполнена, если запрос не удастся | false |
Метод parse() делает анализ, генерируемый Spacy в качестве SVG в контейнере.
displacy . parse ( 'This is a sentence.' , 'en' , {
collapsePunct : false ,
collapsePhrase : false ,
color : '#ffffff' ,
bg : '#000000'
} ) ;Визуальные настройки, указанные здесь, переопределяют глобальные настройки. Доступными настройками являются Collapssepnce , Collapsephrase , Font , Color и 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 .
По умолчанию, Displacy ожидает вывода JSON Spacy в следующем стиле:
{
"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 _displacy-teme.sass. Все элементы, содержащиеся на выходе SVG, поставляются с тегами и атрибутами данных и могут быть гибкими стилями с использованием CSS. По умолчанию currentColor элемента используется для окраски, что означает, что только необходимо изменить свойство color в CSS.
Доступны следующие занятия:
| Название класса | Описание |
|---|---|
| .displacy-word | Текст слова |
| .displacy-tag | POS TAG |
| .displacy-token | Контейнер с тегом Word и POS |
| .displacy-arc | Стрелка (без метки или стрелки) |
| .displacy-label | Тип отношения (метка стрелка) |
| .displacy-arrowhead | стрелка голова |
| .displacy-arrow | контейнер дуги, этикетка и стрелка голова |
Кроме того, вы можете использовать эти атрибуты в качестве селекторов атрибутов:
| Атрибут | Ценить | На элементе |
|---|---|---|
| данные | Значение тега POS | .displacy-token , .displacy-word , .displacy-tag |
| данные данных | Значение типа отношения | .displacy-arrow , .displacy-arc , .displacy-arrowhead , .displacy-label |
| Data-Dir | направление стрелы | .displacy-arrow , .displacy-arc , .displacy-arrowhead , .displacy-label |
Используя комбинацию этих селекторов и некоторой базовой логики CSS, вы можете создать довольно мощные шаблоны для стилирования элементов на основе их роли и функций в Parse. Вот несколько примеров:
/* 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 ;
} Диспликация позволяет вам определять пользовательские атрибуты с помощью представления анализа JSON как на 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 >
