displacy

顯示器：現代網絡的開源NLP Visualer

配x從v2.0.0開始，現在將顯示屏可視化器集成到核心庫中。有關如何從Spacy中可視化Doc對象的更多詳細信息，請參見此處。我們還為服務和測試Spacy模型提供新的工具套件。獨立可視化器的代碼仍將在GitHub上可用，只是無法積極維護。

spaine.js是一個現代且與服務無關的可視化庫。我們希望這使比較不同的服務並探索自己的內部模型變得容易。如果您正在使用Spacy的句法解析器，則顯示屏應該是常規工作流程的一部分。由於Spacy的解析器是統計的，因此通常很難預測其將如何分析給定的句子。使用顯示屏，您可以嘗試查看。您還可以與團隊共享討論頁面，或保存SVG以便在其他地方使用。如果您正在開發自己的模型，則可以自己運行服務 - 它是100％開源。

要了解有關顯示的更多信息，請查看博客文章。

運行演示

該演示是用Jade（又名Pug）實施的，這是一種可擴展的模板語言，可編譯為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編寫的。對於完整的跨瀏覽器兼容性，請確保使用像babel這樣的編譯器。有關更多信息，請參見此兼容性表。

使用顯示屏

要在項目中使用顯示，請從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
箭頭	箭頭的寬度	10
箭頭	PX中的弧寬度	2
詞語	px中的單詞和弧之間的間距	50
字體	所有文本的字體面孔	'inherit'
顏色	文本顏色，十六進制，RGB或顏色名稱	'#000000'
BG	背景顏色，十六進制，RGB或顏色名稱	'#ffffff'
onstart	在服務器請求開始時要執行的功能	false
努力	回調函數將在成功的服務器響應上執行	false
Onerror	如果請求失敗，將執行的功能	false

可視化解析

parse()方法使Spacy生成的解析作為容器中的SVG。

 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 。

從其他格式轉換輸出並添加您自己的

默認情況下，顯示屏希望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-arrow​​​
數據二線	箭頭的方向	.displacy-arrow​​​

使用這些選擇器和一些基本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 arrow ）：

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