displacy

DIPTACY.JS: NLP Visualiser โอเพนซอร์ซสำหรับเว็บสมัยใหม่

ณ ตอนนี้ V2.0.0 ตอนนี้ Visualizers ที่ไม่เหมาะสมได้ถูกรวมเข้ากับไลบรารีหลัก ดูที่นี่สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการมองเห็นวัตถุ Doc จากภายใน Spacy นอกจากนี้เรายังทำงานเกี่ยวกับชุดเครื่องมือใหม่สำหรับการให้บริการและทดสอบโมเดลเครื่องราง รหัสของ Visualizers แบบสแตนด์อโลนจะยังคงมีอยู่ใน GitHub ไม่ได้รับการดูแลอย่างแข็งขัน

DIPTACY.JS เป็นห้องสมุดการสร้างภาพข้อมูลที่ทันสมัยและไม่ขึ้นกับบริการ เราหวังว่าสิ่งนี้จะทำให้ง่ายต่อการเปรียบเทียบบริการที่แตกต่างกันและสำรวจโมเดลภายใน บริษัท ของคุณเอง หากคุณใช้ตัวแยกวิเคราะห์วากยสัมพันธ์ของ Spacy ความไม่พอใจควรเป็นส่วนหนึ่งของเวิร์กโฟลว์ปกติของคุณ เนื่องจากตัวแยกวิเคราะห์ของ Spacy นั้นเป็นสถิติจึงยากที่จะคาดการณ์ว่ามันจะวิเคราะห์ประโยคที่กำหนดได้อย่างไร การใช้ความไม่เหมาะสมคุณสามารถลองดูได้ นอกจากนี้คุณยังสามารถแบ่งปันหน้าสำหรับการสนทนากับทีมของคุณหรือบันทึก SVG เพื่อใช้ที่อื่น หากคุณกำลังพัฒนาโมเดลของคุณเองคุณสามารถเรียกใช้บริการด้วยตัวเอง - เป็นโอเพ่นซอร์ส 100%

หากต้องการอ่านเพิ่มเติมเกี่ยวกับ dimplacy.js ลองดูโพสต์บล็อก

เรียกใช้การสาธิต

การสาธิตนี้ถูกนำไปใช้ใน Jade (AKA 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. สำหรับความเข้ากันได้แบบเต็มรูปแบบข้ามเบราว์เซอร์ตรวจสอบให้แน่ใจว่าใช้คอมไพเลอร์อย่างบาเบล สำหรับข้อมูลเพิ่มเติมดูตารางความเข้ากันได้นี้

การใช้ dictacy.js

หากต้องการใช้ความไม่พอใจในโครงการของคุณให้ดาวน์โหลด displacy.js จาก gitHub หรือผ่าน NPM:

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'
TefaultText	ข้อความที่ใช้หากความไม่ถูกต้องทำงานโดยไม่ระบุข้อความ	'Hello World.'
defaultModel	โมเดลที่ใช้ถ้าความไม่พอใจทำงานโดยไม่ได้ระบุโมเดล	'en'
การยุบ	วรรคตอนการยุบ	true
การยุบ	วลียุบ	true
ระยะทาง	ระยะห่างระหว่างคำใน px	300
Offsetx	ระยะห่างที่ด้านซ้ายของ SVG ใน PX	50
การเดินลูกศร	ระยะห่างระหว่างลูกศรใน PX เพื่อหลีกเลี่ยงการทับซ้อน	20
ลูกศร	ความกว้างของหัวลูกศรใน px	10
การตีลูกศร	ความกว้างของอาร์คใน PX	2
คำพูดของคำ	ระยะห่างระหว่างคำและส่วนโค้งใน px	50
แบบอักษร	ตัวอักษรใบหน้าสำหรับข้อความทั้งหมด	'inherit'
สี	สีข้อความ, hex, rgb หรือชื่อสี	'#000000'
BG	สีพื้นหลัง, hex, rgb หรือสี	'#ffffff'
เริ่มต้น	ฟังก์ชั่นที่จะดำเนินการเมื่อเริ่มคำขอเซิร์ฟเวอร์	false
ความสำเร็จ	ฟังก์ชั่นการโทรกลับที่จะดำเนินการในการตอบกลับเซิร์ฟเวอร์ที่ประสบความสำเร็จ	false
ผู้กระทำความผิด	ฟังก์ชั่นที่จะดำเนินการหากคำขอล้มเหลว	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

การแปลงผลลัพธ์จากรูปแบบอื่น ๆ และเพิ่มของคุณเอง

โดยค่าเริ่มต้นความไม่พอใจคาดว่าเอาต์พุต JSON ของ Spacy ในรูปแบบต่อไปนี้:

{
    "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 ขององค์ประกอบจะใช้สำหรับการระบายสีซึ่งหมายความว่าจำเป็นต้องเปลี่ยนคุณสมบัติ color ใน CSS เท่านั้น

มีคลาสต่อไปนี้:

ชื่อชั้นเรียน	คำอธิบาย
.displacy-word	ข้อความคำ
.displacy-tag	แท็ก POS
. displacy-token	คอนเทนเนอร์ของคำและแท็ก POS
.Displacy-arc	Arrow 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 ;
}

การเพิ่มแอตทริบิวต์ข้อมูลที่กำหนดเอง

ความไม่เหมาะสมช่วยให้คุณกำหนดคุณลักษณะที่กำหนดเองผ่านการแสดง JSON ของการแยกวิเคราะห์ทั้ง words และ arcs :

 "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 >