spaCy/website/blog/displacy/robots-in-popular-culture.html

14 lines
5.5 KiB
HTML

<html lang="en">
<head>
<title>displaCy Demo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/assets/css/style.css" />
</head>
<body>
<div id="displacy"><style class="" scoped="true">#displacy *,#displacy *:before,#displacy *:after{box-sizing:border-box}#displacy{position:relative;overflow:scroll}#displacy .focus{position:absolute;top:0;height:100%;z-index:-1;background:rgba(0,0,0,.25)}#displacy .current-stack{margin:6em 1.5em;font-size:.75em;opacity:.25}#displacy .actions{position:fixed;}#displacy .words{display:flex;display:-webkit-flex;display:-ms-flexbox;display:-webkit-box;flex-flow:row nowrap;overflow:hidden;text-align:center}#displacy .words .word:after{content:attr(title);display:block}#displacy .arrows{width:100%;position:relative}.level{position:absolute;bottom:0;width:100%}#displacy .arrow{height:100%;position:absolute;overflow:hidden}#displacy .arrow:before{content:attr(title);text-align:center;display:block;height:200%;border-radius:50%;border:2px solid;margin:0 auto}#displacy .arrow:after{content:'';width:0;height:0;position:absolute;bottom:-1px;border-top:12px solid;border-left:6px solid transparent;border-right:6px solid transparent}#displacy .arrow.null{display:none} #displacy .level1{height:33%}#displacy .level1 .arrow{width:calc(175px * 1)}#displacy .level1 .arrow:before{width:calc(100% - 10px * 2 - 10px)}#displacy .level1 .arrow.left:after{left:calc(10px * 1)}#displacy .level1 .arrow.right:after{right:calc(10px * 1)} #displacy .level2{height:66%}#displacy .level2 .arrow{width:calc(175px * 2)}#displacy .level2 .arrow:before{width:calc(100% - 10px * 1 - 10px)}#displacy .level2 .arrow.left:after{left:calc(10px * 0.5)}#displacy .level2 .arrow.right:after{right:calc(10px * 0.5)} #displacy .level3{height:100%}#displacy .level3 .arrow{width:calc(175px * 3)}#displacy .level3 .arrow:before{width:calc(100% - 10px * 0 - 10px)}#displacy .level3 .arrow.left:after{left:calc(10px * 0)}#displacy .level3 .arrow.right:after{right:calc(10px * 0)} #displacy .level .arrow:nth-child(1){left:calc(175px * 0)}#displacy .arrows{height:175px}#displacy .level{left:calc(175px/2)} #displacy .level .arrow:nth-child(2){left:calc(175px * 1)}#displacy .arrows{height:175px}#displacy .level{left:calc(175px/2)} #displacy .level .arrow:nth-child(3){left:calc(175px * 2)}#displacy .arrows{height:175px}#displacy .level{left:calc(175px/2)} #displacy .level .arrow:nth-child(4){left:calc(175px * 3)}#displacy .arrows{height:175px}#displacy .level{left:calc(175px/2)} #displacy .level .arrow:nth-child(5){left:calc(175px * 4)}#displacy .arrows{height:175px}#displacy .level{left:calc(175px/2)} #displacy .level .arrow:nth-child(6){left:calc(175px * 5)}#displacy .arrows{height:175px}#displacy .level{left:calc(175px/2)} #displacy .level .arrow:nth-child(7){left:calc(175px * 6)}#displacy .arrows{height:175px}#displacy .level{left:calc(175px/2)} #displacy .level .arrow:nth-child(8){left:calc(175px * 7)}#displacy .arrows{height:175px}#displacy .level{left:calc(175px/2)} #displacy .level .arrow:nth-child(9){left:calc(175px * 8)}#displacy .arrows{height:175px}#displacy .level{left:calc(175px/2)} #displacy .level .arrow:nth-child(10){left:calc(175px * 9)}#displacy .arrows{height:175px}#displacy .level{left:calc(175px/2)} #displacy .level .arrow:nth-child(11){left:calc(175px * 10)}#displacy .arrows{height:175px}#displacy .level{left:calc(175px/2)} #displacy .words{min-width:calc(175px * 12)}.words .word{width:175px}</style><div class="arrows"><div class="level level1"><span class="arrow right" title="prep"></span><span class="arrow right" title="pobj"></span><span class="arrow null"></span><span class="arrow right" title="advmod"></span><span class="arrow null"></span><span class="arrow left" title="aux"></span><span class="arrow right" title="dobj"></span><span class="arrow null"></span><span class="arrow right" title="pobj"></span><span class="arrow right" title="prep"></span><span class="arrow right" title="pobj"></span></div><div class="level level2"><span class="arrow null"></span><span class="arrow null"></span><span class="arrow null"></span><span class="arrow null"></span><span class="arrow null"></span><span class="arrow null"></span><span class="arrow right" title="prep"></span><span class="arrow null"></span><span class="arrow null"></span><span class="arrow null"></span></div><div class="level level3"><span class="arrow left" title="nsubj"></span><span class="arrow null"></span><span class="arrow null"></span><span class="arrow right" title="advcl"></span><span class="arrow null"></span><span class="arrow null"></span><span class="arrow null"></span><span class="arrow null"></span><span class="arrow null"></span></div></div><div class="words"><div class="word w-noun" title="NOUN"><span class="">Robots</span></div><div class="word w-adp" title="ADP"><span class="">in</span></div><div class="word w-adj w-ent" title="ADJ"><span class="">popular culture</span></div><div class="word w-verb" title="VERB"><span class="">are</span></div><div class="word w-adv" title="ADV"><span class="">there</span></div><div class="word w-prt" title="PRT"><span class="">to</span></div><div class="word w-verb" title="VERB"><span class="">remind</span></div><div class="word w-pron" title="PRON"><span class="">us</span></div><div class="word w-adp" title="ADP"><span class="">of</span></div><div class="word w-det w-ent" title="DET"><span class="">the awesomeness</span></div><div class="word w-adp" title="ADP"><span class="">of</span></div><div class="word w-adj w-ent" title="ADJ"><span class="">unbounded human agency.</span></div></div></div>
</body>
</html>