displacy
1.0.0
️ Pada v2.0.0, visualisis yang tidak berkepala sekarang diintegrasikan ke dalam pustaka inti. Lihat di sini untuk detail lebih lanjut tentang cara memvisualisasikan objekDocdari dalam Spacy. Kami juga mengerjakan serangkaian alat baru untuk melayani dan menguji model spacy. Kode visualisasi mandiri masih akan tersedia di GitHub, hanya tidak dipertahankan secara aktif.
Inplacy.js adalah perpustakaan visualisasi yang modern dan independen. Kami berharap ini memudahkan untuk membandingkan berbagai layanan, dan menjelajahi model in-house Anda sendiri. Jika Anda menggunakan parser sintaksis Spacy, Deplacy harus menjadi bagian dari alur kerja reguler Anda. Karena parser Spacy bersifat statistik, seringkali sulit untuk memprediksi bagaimana hal itu akan menganalisis kalimat yang diberikan. Menggunakan Deplacy, Anda bisa mencoba dan melihat. Anda juga dapat berbagi halaman untuk diskusi dengan tim Anda, atau menyimpan SVG untuk digunakan di tempat lain. Jika Anda mengembangkan model Anda sendiri, Anda dapat menjalankan layanan sendiri - ini 100% open source.
Untuk membaca lebih lanjut tentang Inplacy.js, lihat posting blog.
Demo ini diimplementasikan dalam Jade (alias PUG), bahasa templating yang dapat diperluas yang dikompilasi ke HTML, dan dibangun atau dilayani oleh harpa. Untuk melayani secara lokal di http: // localhost: 9000, cukup jalankan:
sudo npm install --global harp
git clone https://github.com/explosion/displacy
cd displacy
harp serverAtau cukup instal dari NPM:
npm install displacy-demoDemo ini ditulis dalam ecmascript 6. Untuk kompatibilitas lengkap, lintas-browser, pastikan untuk menggunakan kompiler seperti Babel. Untuk info lebih lanjut, lihat tabel kompatibilitas ini.
Untuk menggunakan Inpplacy dalam proyek Anda, unduh displacy.js dari GitHub atau melalui NPM:
npm install displacyKemudian sertakan file dan inisialisasi instance baru yang menentukan API dan pengaturan:
const displacy = new displaCy ( 'http://localhost:8000' , {
container : '#displacy' ,
format : 'spacy' ,
distance : 300 ,
offsetX : 100
} ) ;Layanan kami yang menghasilkan data input juga open source. Anda dapat menemukannya di spacy-services.
Pengaturan berikut tersedia:
| Pengaturan | Keterangan | Bawaan |
|---|---|---|
| wadah | elemen untuk menggambar perpindahan, dapat berupa pemilih permintaan apa pun | #displacy |
| format | Format yang digunakan untuk menghasilkan parse ( 'spacy' atau 'google' ) | 'spacy' |
| DefaultText | Teks yang digunakan jika displacy dijalankan tanpa teks yang ditentukan | 'Hello World.' |
| DefaultModel | Model yang Digunakan Jika Inpplacy Dijalankan Tanpa Model Yang Ditentukan | 'en' |
| collapsepunct | Runtuhnya tanda baca | true |
| collapsephrase | frasa runtuh | true |
| jarak | jarak antara kata -kata dalam px | 300 |
| Offsetx | jarak di sisi kiri SVG di px | 50 |
| arrowspacing | jarak antar panah di px untuk menghindari tumpang tindih | 20 |
| Arrowwidth | lebar kepala panah di px | 10 |
| Arrowstroke | lebar busur di px | 2 |
| wordspacing | jarak antar kata dan busur di px | 50 |
| font | wajah font untuk semua teks | 'inherit' |
| warna | Warna teks, hex, rgb atau nama warna | '#000000' |
| bg | Warna latar belakang, hex, rgb atau nama warna | '#ffffff' |
| Mulai | fungsi untuk dieksekusi pada awal permintaan server | false |
| Onsuccess | fungsi panggilan balik untuk dieksekusi pada respons server yang berhasil | false |
| Onerror | Fungsi untuk dieksekusi jika permintaan gagal | false |
Metode parse() membuat parse yang dihasilkan oleh spacy sebagai SVG dalam wadah.
displacy . parse ( 'This is a sentence.' , 'en' , {
collapsePunct : false ,
collapsePhrase : false ,
color : '#ffffff' ,
bg : '#000000'
} ) ;Pengaturan visual yang ditentukan di sini mengganti pengaturan global. Pengaturan yang tersedia adalah Collapsepunct , Collapsephrase , Font , Color dan BG .
Atau, Anda dapat menggunakan render() untuk secara manual membuat set busur dan kata-kata yang diformat 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'
} ) ;Pengaturan visual yang ditentukan di sini mengganti pengaturan global. Pengaturan yang tersedia adalah font , warna dan BG .
Secara default, Deplacy mengharapkan output JSON Spacy dengan gaya berikut:
{
"arcs" : [
{ "dir" : " left " , "end" : 4 , "label" : " nsubj " , "start" : 0 }
],
"words" : [
{ "tag" : " NNS " , "text" : " Robots " }
]
} Jika format diatur ke 'google' , respons API dikonversi dari format Google. Untuk menambahkan aturan konversi Anda sendiri, tambahkan kasus baru ke 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 ;
}
} Anda sekarang dapat menginisialisasi Deplacy dengan format: 'your_format' .
Anda dapat menemukan pengaturan tema saat ini di /assets/css/_displacy-theme.sass . Semua elemen yang terkandung dalam output SVG hadir dengan tag dan atribut data dan dapat ditata secara fleksibel menggunakan CSS. Secara default, currentColor dari elemen digunakan untuk pewarnaan, yang berarti hanya perlu mengubah properti color di CSS.
Kelas berikut tersedia:
| Nama kelas | Keterangan |
|---|---|
| .displacy-word | teks kata |
| .displacy-tag | Tag pos |
| .displacy-Token | wadah tag kata dan pos |
| .displacy-arc | Arrow Arc (tanpa label atau kepala panah) |
| .displacy-label | Tipe Relasi (Label Panah) |
| .displacy-arrowhead | kepala panah |
| .displacy-arrow | wadah busur, label dan kepala panah |
Selain itu, Anda dapat menggunakan atribut ini sebagai pemilih atribut:
| Atribut | Nilai | Pada elemen |
|---|---|---|
| data-tag | Nilai tag POS | .displacy-token , .displacy-word , .displacy-tag |
| Label data | Nilai Jenis Relasi | .displacy-arrow , .displacy-arc , .displacy-arrowhead , .displacy-label |
| Data-Dir | arah panah | .displacy-arrow , .displacy-arc , .displacy-arrowhead , .displacy-label |
Menggunakan kombinasi dari pemilih tersebut dan beberapa logika CSS dasar, Anda dapat membuat templat yang cukup kuat untuk menata elemen berdasarkan peran dan fungsi mereka dalam parse. Berikut beberapa contoh:
/* 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 ;
} Inplacy memungkinkan Anda mendefinisikan atribut khusus melalui representasi JSON dari parse pada kedua words dan arcs :
"words" : [
{
"tag" : " NNS " ,
"text" : " Robots " ,
"data" : [
[ " custom " , " your value here " ],
[ " example " , " example text here " ]
]
}
] Atribut khusus ditambahkan sebagai atribut data yang diawali dengan data- , sehingga namanya tidak boleh berisi spasi atau karakter khusus. Jika ditambahkan ke words , atribut data dilampirkan ke token ( .displacy-token ), jika ditambahkan ke arcs , mereka dilampirkan ke panah ( .displacy-arrow ):
< text class =" displacy-token " data-custom =" your value here " data-example =" example text here " > ... </ text >
