displacy
1.0.0
️ En ce qui concerne la v2.0.0, les visualiseurs de déplacement sont désormais intégrés dans la bibliothèque de base. Voir ici pour plus de détails sur la façon de visualiser un objetDocà partir de Spacy. Nous travaillons également sur une nouvelle suite d'outils pour servir et tester des modèles de spacy. Le code des visualiseurs autonomes sera toujours disponible sur GitHub, mais pas activement entretenu.
Displacy.js est une bibliothèque de visualisation moderne et indépendante du service. Nous espérons que cela facilite la comparaison des différents services et explorez vos propres modèles internes. Si vous utilisez l'analyseur syntaxique de Spacy, la déshumation devrait faire partie de votre flux de travail régulier. Parce que l'analyseur de Spacy est statistique, il est souvent difficile de prédire comment il analysera une phrase donnée. En utilisant la déformation, vous pouvez simplement essayer de voir. Vous pouvez également partager la page de discussion avec votre équipe ou enregistrer le SVG à utiliser ailleurs. Si vous développez votre propre modèle, vous pouvez exécuter le service vous-même - c'est 100% open source.
Pour en savoir plus sur Displacy.js, consultez le billet de blog.
Cette démo est mise en œuvre dans Jade (alias PUG), un langage de modèles extensible qui se compile en HTML, et est construit ou servi par la harpe. Pour le servir localement sur http: // localhost: 9000, exécutez simplement:
sudo npm install --global harp
git clone https://github.com/explosion/displacy
cd displacy
harp serverOu l'installez-le à partir de NPM:
npm install displacy-demoLa démo est écrite dans Ecmascript 6. Pour une compatibilité complète et transversale, assurez-vous d'utiliser un compilateur comme Babel. Pour plus d'informations, consultez ce tableau de compatibilité.
Pour utiliser la déshumation dans votre projet, téléchargez displacy.js à partir de GitHub ou via NPM:
npm install displacyIncluez ensuite le fichier et initialisez une nouvelle instance spécifiant l'API et les paramètres:
const displacy = new displaCy ( 'http://localhost:8000' , {
container : '#displacy' ,
format : 'spacy' ,
distance : 300 ,
offsetX : 100
} ) ;Notre service qui produit les données d'entrée est également open source. Vous pouvez le trouver chez Spacy-Services.
Les paramètres suivants sont disponibles:
| Paramètre | Description | Défaut |
|---|---|---|
| récipient | élément pour dessiner un désagrément, peut être n'importe quel sélecteur de requête | #displacy |
| format | Format utilisé pour générer Parse ( 'spacy' ou 'google' ) | 'spacy' |
| defaultText | Texte utilisé si la délaisie est exécutée sans texte spécifié | 'Hello World.' |
| defaultmodel | Modèle utilisé si la déshumation est exécutée sans modèle spécifié | 'en' |
| collapse | effondrement de la ponctuation | true |
| téléphonie | s'effondrer | true |
| distance | Distance entre les mots en px | 300 |
| Offsetx | Espacement sur le côté gauche du SVG en PX | 50 |
| espacement des flèches | Espacement entre les flèches en PX pour éviter les chevauchements | 20 |
| largeur de flèche | Largeur de la tête de flèche dans PX | 10 |
| étouffage de flèche | Largeur de l'arc dans PX | 2 |
| espacement de mots | espacement entre les mots et les arcs en px | 50 |
| fonte | Face pour la police pour tout texte | 'inherit' |
| couleur | Couleur de texte, Hex, RVB ou noms de couleurs | '#000000' |
| bg | Couleur d'arrière-plan, Hex, RVB ou noms de couleurs | '#ffffff' |
| à terre | fonction à exécuter au début de la demande de serveur | false |
| sur le succès | Fonction de rappel à exécuter sur la réponse du serveur réussi | false |
| onerror | fonction à exécuter si la demande échoue | false |
La méthode parse() rend une analyse générée par Spacy sous forme de SVG dans le conteneur.
displacy . parse ( 'This is a sentence.' , 'en' , {
collapsePunct : false ,
collapsePhrase : false ,
color : '#ffffff' ,
bg : '#000000'
} ) ;Les paramètres visuels spécifiés ici remplacent les paramètres globaux. Les paramètres disponibles sont le collapset , la colapse en téléphonie , la police , la couleur et le BG .
Alternativement, vous pouvez utiliser render() pour rendre manuellement un ensemble d'arcs et de mots formés par 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'
} ) ;Les paramètres visuels spécifiés ici remplacent les paramètres globaux. Les paramètres disponibles sont la police , la couleur et le BG .
Par défaut, Displacy s'attend à une sortie JSON de Spacy dans le style suivant:
{
"arcs" : [
{ "dir" : " left " , "end" : 4 , "label" : " nsubj " , "start" : 0 }
],
"words" : [
{ "tag" : " NNS " , "text" : " Robots " }
]
} Si format est défini sur 'google' , la réponse API est convertie du format de Google. Pour ajouter vos propres règles de conversion, ajoutez un nouveau cas à 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 ;
}
} Vous pouvez désormais initialiser la détention avec format: 'your_format' .
Vous pouvez trouver les paramètres de thème actuels dans /assets/css/_displacy-theme.sass . Tous les éléments contenus dans la sortie SVG sont livrés avec des balises et des attributs de données et peuvent être stylisés de manière flexible à l'aide de CSS. Par défaut, le currentColor de l'élément est utilisé pour la coloration, ce qui signifie seulement pour modifier la propriété color dans CSS.
Les cours suivants sont disponibles:
| Nom de classe | Description |
|---|---|
| .dispacy-mot | texte de mot |
| .dispacy-tag | Balise POS |
| .dispacy-token | conteneur de mot et balise POS |
| .dispacy-arc | Arc de flèche (sans étiquette ni tête de flèche) |
| .dispacy-label | Type de relation (étiquette Arrow) |
| .dispacy-arrowhead | tête de flèche |
| .dispacy-arrow | conteneur d'arc, étiquette et tête de flèche |
De plus, vous pouvez utiliser ces attributs comme sélecteurs d'attribut:
| Attribut | Valeur | Sur l'élément |
|---|---|---|
| tag de données | Valeur de balise POS | .displacy-token , .displacy-word , .displacy-tag |
| étiquette de données | Valeur de type de relation | .displacy-arrow , .displacy-arc , .displacy-arrowhead , .displacy-label |
| de données | direction de la flèche | .displacy-arrow , .displacy-arc , .displacy-arrowhead , .displacy-label |
En utilisant une combinaison de ces sélecteurs et de la logique CSS de base, vous pouvez créer des modèles assez puissants pour styliser les éléments en fonction de leur rôle et de leur fonction dans l'analyse. Voici quelques exemples:
/* 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 ;
} Displacy vous permet de définir des attributs personnalisés via la représentation JSON de l'analyse sur words et arcs :
"words" : [
{
"tag" : " NNS " ,
"text" : " Robots " ,
"data" : [
[ " custom " , " your value here " ],
[ " example " , " example text here " ]
]
}
] Des attributs personnalisés sont ajoutés en tant qu'attributs de données préfixés avec data- , de sorte que leurs noms ne doivent pas contenir d'espaces ou de caractères spéciaux. S'il est ajouté aux words , les attributs de données sont attachés au jeton ( .displacy-token ), s'ils sont ajoutés aux arcs , ils sont attachés à la flèche ( .displacy-arrow ):
< text class =" displacy-token " data-custom =" your value here " data-example =" example text here " > ... </ text >
