displacy
1.0.0
ショ和 V2.0.0の時点で、ディスプレイ視覚装置はコアライブラリに統合されました。 Spacy内からDocオブジェクトを視覚化する方法の詳細については、こちらをご覧ください。また、スペイシーモデルを提供およびテストするための新しいツールスイートにも取り組んでいます。スタンドアロンビジュアライザーのコードは、githubで引き続き利用可能であり、積極的に維持されていません。
displacy.jsは、近代的でサービスに依存しない視覚化ライブラリです。これにより、さまざまなサービスを簡単に比較し、独自の社内モデルを探索できることを願っています。 SpacyのSyntactic Parserを使用している場合、Displacyは通常のワークフローの一部である必要があります。 Spacyのパーサーは統計的であるため、特定の文をどのように分析するかを予測することはしばしば困難です。ディスプレイを使用して、単に試して見ることができます。また、チームと話し合うためにページを共有したり、SVGを保存して他の場所で使用することもできます。独自のモデルを開発している場合は、自分でサービスを実行できます。これは100％オープンソースです。
displacy.jsの詳細については、ブログ投稿をご覧ください。
このデモは、HTMLにコンパイルする拡張可能なテンプレート言語であるJade（別名Pug）に実装され、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に記述されています。完全なクロスブラウザー互換性については、Babelなどのコンパイラを使用してください。詳細については、この互換性テーブルを参照してください。
プロジェクトでdisplacyを使用するには、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' |
| defaultText | テキストが指定されていない場合にディスプレイが実行された場合に使用されます | 'Hello World.' |
| DefaultModel | モデルは、モデルが指定されていない場合にディスプレイが実行された場合に使用されます | 'en' |
| 崩壊します | 折りたたみ句読点 | true |
| 崩壊障害 | 崩壊フレーズ | true |
| 距離 | pxの単語間の距離 | 300 |
| offsetx | PXのSVGの左側の間隔 | 50 |
| 矢じ出します | 重複を避けるために、PXの矢印間の間隔 | 20 |
| 矢印 | pxの矢印ヘッドの幅 | 10 |
| 矢印 | PxのARCの幅 | 2 |
| ワードスペース | PXの単語とアーク間の間隔 | 50 |
| フォント | すべてのテキストのフォントフェイス | 'inherit' |
| 色 | テキストの色、16進、RGB、または色名 | '#000000' |
| BG | 背景色、六角、RGB、またはカラー名 | '#ffffff' |
| スタート | サーバー要求の開始時に実行される機能 | false |
| onsuccess | 成功したサーバー応答で実行されるコールバック関数 | false |
| onerror | 要求が失敗した場合に実行される機能 | false |
parse()メソッドは、容器内のSVGとしてSpacyによって生成されるParseをレンダリングします。
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です。
デフォルトでは、Displacyは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 | 単語と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ロジックの組み合わせを使用して、非常に強力なテンプレートを作成して、その役割と機能に基づいて要素をスタイリングできます。ここにいくつかの例があります：
/* 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 ;
}ディスプレイを使用すると、 wordsとarcsの両方の解析のJSON表現を介してカスタム属性を定義できます。
"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 >
