displacy

Display.js: un visualizador de PNL de código abierto para la web moderna

️ A partir de V2.0.0, los visualizadores de desplazamiento ahora están integrados en la biblioteca central. Vea aquí para obtener más detalles sobre cómo visualizar un objeto Doc desde dentro de Spacy. También estamos trabajando en un nuevo conjunto de herramientas para servir y probar modelos Spacy. El código de los visualizadores independientes aún estará disponible en GitHub, simplemente no se mantiene activamente.

Display.js es una biblioteca de visualización moderna e independiente del servicio. Esperamos que esto sea fácil comparar diferentes servicios y explorar sus propios modelos internos. Si está utilizando el analizador sintáctico de Spacy, la desplazamiento debe ser parte de su flujo de trabajo regular. Debido a que el analizador de Spacy es estadístico, a menudo es difícil predecir cómo analizará una oración dada. Usando la desplazamiento, simplemente puede intentar ver. También puede compartir la página para discusión con su equipo o guardar el SVG para usar en otro lugar. Si está desarrollando su propio modelo, puede ejecutar el servicio usted mismo: es de código abierto al 100%.

Para leer más sobre Dispsacy.js, consulte la publicación del blog.

Ejecutar la demostración

Esta demostración se implementa en Jade (también conocida como PUG), un lenguaje de plantilla extensible que compila a HTML, y es construido o servido por HARP. Para servirlo localmente en http: // localhost: 9000, simplemente ejecute:

sudo npm install --global harp
git clone https://github.com/explosion/displacy
cd displacy
harp server

O simplemente instálelo desde NPM:

npm install displacy-demo

La demostración está escrita en Ecmascript 6. Para la compatibilidad completa del navegador cruzado, asegúrese de usar un compilador como Babel. Para obtener más información, consulte esta tabla de compatibilidad.

Usando desplazamiento.js

Para usar la desplazamiento en su proyecto, descargue displacy.js desde GitHub o a través de NPM:

npm install displacy

Luego incluya el archivo e inicialice una nueva instancia especificando la API y la configuración:

 const displacy = new displaCy ( 'http://localhost:8000' , {
    container : '#displacy' ,
    format : 'spacy' ,
    distance : 300 ,
    offsetX : 100
} ) ;

Nuestro servicio que produce los datos de entrada también es de código abierto. Puede encontrarlo en Spacy-Services.

Las siguientes configuraciones están disponibles:

Configuración	Descripción	Por defecto
recipiente	El elemento para atraer la desplazamiento puede ser cualquier selector de consultas	#displacy
formato	Formato utilizado para generar PARSE ( 'spacy' o 'google' )	'spacy'
outhText	Texto utilizado si la desplazamiento se ejecuta sin texto especificado	'Hello World.'
Modelo predeterminado	modelo utilizado si la desplazamiento se ejecuta sin el modelo especificado	'en'
colapso	puntuación de colapso	true
colapso	frases de colapso	true
distancia	Distancia entre palabras en PX	300
compensación	espaciado en el lado izquierdo del SVG en PX	50
cosecha	Espacio entre flechas en PX para evitar superposiciones	20
ancho de flecha	Ancho de Arrow Head en PX	10
pimiento de flecha	Ancho de arco en PX	2
espalda de palabras	Espacio entre palabras y arcos en PX	50
fuente	cara de fuente para todo el texto	'inherit'
color	color de texto, hex, RGB o nombres de color	'#000000'
BG	Color de fondo, hex, RGB o nombres de color	'#ffffff'
en marcha	función que se ejecutará en el inicio de la solicitud del servidor	false
inesperación	La función de devolución de llamada se ejecutará en una respuesta exitosa del servidor	false
onderror	función a ejecutar si falla la solicitud	false

Visualizar un análisis

El método parse() hace que un análisis generado por Spacy como SVG en el contenedor.

 displacy . parse ( 'This is a sentence.' , 'en' , {
    collapsePunct : false ,
    collapsePhrase : false ,
    color : '#ffffff' ,
    bg : '#000000'
} ) ;

La configuración visual especificada aquí anula la configuración global. Las configuraciones disponibles son colapses , colapsas colapsas , fuente , color y BG .

Renderizar un análisis manualmente

Alternativamente, puede usar render() para representar manualmente un conjunto de arcos y palabras con formato 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'
} ) ;

La configuración visual especificada aquí anula la configuración global. La configuración disponible es FUENT , COLOR y BG .

Convertir la salida de otros formatos y agregar la suya propia

Por defecto, Displacy espera la salida JSON de Spacy en el siguiente estilo:

{
    "arcs" : [
        { "dir" : " left " , "end" : 4 , "label" : " nsubj " , "start" : 0 }
    ],

    "words" : [
        { "tag" : " NNS " , "text" : " Robots " }
    ]
}

Si format se establece en 'google' , la respuesta de la API se convierte del formato de Google. Para agregar sus propias reglas de conversión, agregue un nuevo caso a 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 ;
    }
}

Ahora puede inicializar la desplazamiento con format: 'your_format' .

Cambiar el tema y los colores

Puede encontrar la configuración del tema actual en /assets/css/_displacy-theme.sass . Todos los elementos contenidos en la salida SVG vienen con etiquetas y atributos de datos y pueden diseñarse de manera flexible utilizando CSS. Por defecto, el currentColor del elemento se usa para colorear, lo que significa que solo necesita cambiar la propiedad color en CSS.

Las siguientes clases están disponibles:

Nombre de clase	Descripción
.	texto de palabras
.display-tag	Etiqueta
.display-token	contenedor de palabras y etiqueta POS
.display-arco	Arco de flecha (sin etiqueta o cabezal de flecha)
.displaz-etiqueta	Tipo de relación (etiqueta de flecha)
.display-arrowhead	cabeza de flecha
.	contenedor de arco, etiqueta y cabeza de flecha

Además, puede usar estos atributos como selectores de atributos:

Atributo	Valor	En elemento
etiqueta de datos	Valor de etiqueta	.displacy-token , .displacy-word , .displacy-tag
etiqueta de datos	valor de tipo de relación	.displacy-arrow ,. .displacy-arc ,. .displacy-arrowhead ,. .displacy-label
DAT-DIR	Dirección de flecha	.displacy-arrow ,. .displacy-arc ,. .displacy-arrowhead ,. .displacy-label

Usando una combinación de esos selectores y algunas lógicas básicas de CSS, puede crear plantillas bastante poderosas para diseñar los elementos en función de su papel y función en el análisis. Aquí hay algunos ejemplos:

 /* 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 ;
}

Agregar atributos de datos personalizados

La desplazamiento le permite definir atributos personalizados a través de la representación JSON del análisis en words y arcs :

 "words" : [
    {
        "tag" : " NNS " ,
        "text" : " Robots " ,
        "data" : [
            [ " custom " , " your value here " ],
            [ " example " , " example text here " ]
        ]
    }
]

Los atributos personalizados se agregan a medida que los atributos de datos prefijados con data- , por lo que sus nombres no deben contener espacios o caracteres especiales. Si se agrega a words , los atributos de datos se adjuntan al token ( .displacy-token ), si se agregan a arcs , están conectados a la flecha ( .displacy-arrow ):

 < text class =" displacy-token " data-custom =" your value here " data-example =" example text here " > ... </ text >