displacy
1.0.0
Euen Ab V2.0.0 sind die Unglücksvisualisierer nun in die Kernbibliothek integriert. Weitere Informationen zum Visualisieren einesDoc-Objekts innerhalb von Spacy finden Sie hier. Wir arbeiten auch an einer neuen Reihe von Tools zum Servieren und Testen von Spact -Modellen. Der Code der eigenständigen Visualisierer wird weiterhin auf Github verfügbar sein, nur nicht aktiv gepflegt.
crplacy.js ist eine moderne und dienstleistungsunabhängige Visualisierungsbibliothek. Wir hoffen, dass dies einfach ist, verschiedene Dienste zu vergleichen und Ihre eigenen internen Modelle zu erkunden. Wenn Sie den syntaktischen Parser von Spact verwenden, sollte die Unschaltung Teil Ihres regulären Workflows sein. Da Spacys Parser statistisch ist, ist es oft schwierig, vorherzusagen, wie er einen bestimmten Satz analysiert. Mit Unschrecklichkeit können Sie einfach versuchen zu sehen. Sie können die Seite auch für die Diskussion mit Ihrem Team teilen oder die SVG speichern, um sie an anderer Stelle zu verwenden. Wenn Sie Ihr eigenes Modell entwickeln, können Sie den Dienst selbst ausführen - er ist 100% Open Source.
Weitere Informationen zu Unclacy.js finden Sie im Blog -Beitrag.
Diese Demo wird in Jade (auch bekannt als Pug) implementiert, einer erweiterbaren Vorlagensprache, die HTML kompiliert und von Harfe gebaut oder bedient wird. Um es lokal auf http: // localhost: 9000 zu servieren, laufen Sie einfach:
sudo npm install --global harp
git clone https://github.com/explosion/displacy
cd displacy
harp serverOder installieren Sie es einfach von NPM:
npm install displacy-demoDie Demo ist in ECMascript 6 geschrieben. Verwenden Sie einen Compiler wie Babel. Weitere Informationen finden Sie in dieser Kompatibilitätstabelle.
Um Unschalter in Ihrem Projekt zu verwenden, laden Sie displacy.js von GitHub oder über NPM herunter:
npm install displacyFügen Sie dann die Datei ein und initialisieren Sie eine neue Instanz, in der die API und die Einstellungen angegeben werden:
const displacy = new displaCy ( 'http://localhost:8000' , {
container : '#displacy' ,
format : 'spacy' ,
distance : 300 ,
offsetX : 100
} ) ;Unser Service, der die Eingabedaten erzeugt, ist ebenfalls Open Source. Sie finden es bei Spacy-Services.
Die folgenden Einstellungen sind verfügbar:
| Einstellung | Beschreibung | Standard |
|---|---|---|
| Container | Element zum Zeichnen von Unfälle kann jeder Abfragetektor sein | #displacy |
| Format | Format zum Generieren von Parse ( 'spacy' oder 'google' ) | 'spacy' |
| StandardText | Text verwendet, wenn die Schiedsrichter ohne angegebenes Text ausgeführt wird | 'Hello World.' |
| DefaultModel | Modell verwendet, wenn die Schrecklichkeit ohne angegebenes Modell ausgeführt wird | 'en' |
| Zusammenbruch | Interpunktion zusammenbrechen | true |
| Zusammenbruch | Zusammenbruch von Phrasen | true |
| Distanz | Abstand zwischen Wörtern in PX | 300 |
| OffsetX | Abstand auf der linken Seite des SVG in PX | 50 |
| Pfeilspazierungen | Abstand zwischen Pfeilen in PX, um Überlappungen zu vermeiden | 20 |
| Arrowwidth | Breite des Pfeilkopfes in PX | 10 |
| Pfeilschlag | Breite des Bogens in PX | 2 |
| Wortspazierungen | Abstand zwischen Wörtern und Bögen in PX | 50 |
| Schriftart | Schriftart für alle Text | 'inherit' |
| Farbe | Textfarbe, Hex, RGB oder Farbnamen | '#000000' |
| BG | Hintergrundfarbe, Hex, RGB oder Farbnamen | '#ffffff' |
| OnStart | Funktionen, die zu Beginn der Serveranforderung ausgeführt werden sollen | false |
| Onsuccess | Rückruffunktion, die auf erfolgreiche Serverantwort ausgeführt werden soll | false |
| onError | Funktionen, die ausgeführt werden muss, wenn die Anforderung fehlschlägt | false |
Die parse() -Methode macht einen von Spacy als SVG im Container erzeugten Parse.
displacy . parse ( 'This is a sentence.' , 'en' , {
collapsePunct : false ,
collapsePhrase : false ,
color : '#ffffff' ,
bg : '#000000'
} ) ;Die hier angegebenen visuellen Einstellungen überschreiben die globalen Einstellungen. Die verfügbaren Einstellungen sind ein Zusammenbruch , eine Zusammenfassung , eine Schriftart , die Farbe und die BG .
Alternativ können Sie render() verwenden, um einen JSON-formatierten Satz von Bögen und Wörtern manuell zu machen:
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'
} ) ;Die hier angegebenen visuellen Einstellungen überschreiben die globalen Einstellungen. Die verfügbaren Einstellungen sind Schriftart , Farbe und BG .
Standardmäßig erwartet Unschütze die JSON -Ausgabe von Spact im folgenden Stil:
{
"arcs" : [
{ "dir" : " left " , "end" : 4 , "label" : " nsubj " , "start" : 0 }
],
"words" : [
{ "tag" : " NNS " , "text" : " Robots " }
]
} Wenn format auf 'google' festgelegt ist, wird die API -Antwort aus Googles Format konvertiert. Um Ihre eigenen Conversion -Regeln hinzuzufügen, fügen Sie handleConversion() einen neuen Fall hinzu:
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 ;
}
} Sie können jetzt die Unfall mit format: 'your_format' .
Die aktuellen Themeneinstellungen finden Sie in /assets/css/_displacy-theme.sass . Alle in der SVG -Ausgabe enthaltenen Elemente sind mit Tags und Datenattributen ausgestattet und können mit CSS flexibel gestylt werden. Standardmäßig wird der currentColor des Elements zum Färben verwendet, was bedeutet, dass nur die color in CSS geändert werden muss.
Die folgenden Klassen sind verfügbar:
| Klassenname | Beschreibung |
|---|---|
| .Displacy-Wort | Worttext |
| .Displacy-Tag | POS -Tag |
| .Displatz-gezwungen | Container des Wortes und POS -Tags |
| .Displacy-Arc | Pfeilbogen (ohne Etikett oder Pfeilkopf) |
| .Displacy-Label | Beziehungstyp (Pfeilbezeichnung) |
| .Displacy-Arrowhead | Pfeilkopf |
| .Displacy-Arrow | Behälter aus Lichtbogen-, Etikett- und Pfeilkopf |
Zusätzlich können Sie diese Attribute als Attributauswahl verwenden:
| Attribut | Wert | Auf Element |
|---|---|---|
| Datenmark | POS -Tag -Wert | .displacy-token .displacy-word .displacy-tag |
| Datenmarke | Wertentyp Wert | .displacy-arrow , .displacy-arc , .displacy-arrowhead , .displacy-label |
| Daten-Dir | Richtung des Pfeils | .displacy-arrow , .displacy-arc , .displacy-arrowhead , .displacy-label |
Mit einer Kombination dieser Selektoren und einer grundlegenden CSS -Logik können Sie ziemlich leistungsstarke Vorlagen erstellen, um die Elemente basierend auf ihrer Rolle und Funktion im Analyse zu stylen. Hier sind einige Beispiele:
/* 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 ;
} Mit Unruhen können Sie benutzerdefinierte Attribute über die JSON -Darstellung des Analyse sowohl words als auch arcs definieren:
"words" : [
{
"tag" : " NNS " ,
"text" : " Robots " ,
"data" : [
[ " custom " , " your value here " ],
[ " example " , " example text here " ]
]
}
] Benutzerdefinierte Attribute werden als Datenattribute hinzugefügt, die mit data- vorangestellt sind, sodass ihre Namen keine Leerzeichen oder Sonderzeichen enthalten sollten. Wenn es zu words hinzugefügt wird, werden die Datenattribute an das Token ( .displacy-token ) beigefügt, wenn sie zu arcs hinzugefügt werden, sind sie an den Pfeil ( .displacy-arrow ) beigefügt:
< text class =" displacy-token " data-custom =" your value here " data-example =" example text here " > ... </ text >
