Inline displaCy visualizations in docs (#13050) [ci skip]
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
|
@ -31,8 +31,6 @@ for ent in doc.ents:
|
|||
Using spaCy's built-in [displaCy visualizer](/usage/visualizers), here's what
|
||||
our example sentence and its named entities look like:
|
||||
|
||||
<Iframe
|
||||
title="displaCy visualization of entities"
|
||||
src="/images/displacy-ent1.html"
|
||||
height={100}
|
||||
/>
|
||||
<Standalone height={120}>
|
||||
<div style={{lineHeight: 2.5, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18}}><mark style={{ background: '#7aecec', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Apple <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark> is looking at buying <mark style={{ background: '#feca74', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>U.K. <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>GPE</span></mark> startup for <mark style={{ background: '#e4e7d2', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>$1 billion <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>MONEY</span></mark></div>
|
||||
</Standalone>
|
||||
|
|
|
@ -56,8 +56,7 @@ for token in doc:
|
|||
Using spaCy's built-in [displaCy visualizer](/usage/visualizers), here's what
|
||||
our example sentence and its dependencies look like:
|
||||
|
||||
<Iframe
|
||||
title="displaCy visualization of dependencies and entities"
|
||||
src="/images/displacy-long.html"
|
||||
height={450}
|
||||
<ImageScrollable
|
||||
src="/images/displacy-long.svg"
|
||||
width={1975}
|
||||
/>
|
||||
|
|
|
@ -290,10 +290,9 @@ for token in doc:
|
|||
| toward | `prep` | shift | `NOUN` | manufacturers |
|
||||
| manufacturers | `pobj` | toward | `ADP` | |
|
||||
|
||||
<Iframe
|
||||
title="displaCy visualization of dependencies and entities 2"
|
||||
src="/images/displacy-long2.html"
|
||||
height={450}
|
||||
<ImageScrollable
|
||||
src="/images/displacy-long2.svg"
|
||||
width={1275}
|
||||
/>
|
||||
|
||||
Because the syntactic relations form a tree, every word has **exactly one
|
||||
|
@ -709,11 +708,9 @@ doc = nlp(text)
|
|||
displacy.serve(doc, style="ent")
|
||||
```
|
||||
|
||||
<Iframe
|
||||
title="displaCy visualizer for entities"
|
||||
src="/images/displacy-ent2.html"
|
||||
height={180}
|
||||
/>
|
||||
<Standalone height={180}>
|
||||
<div style={{lineHeight: 2.5, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18}}>When <mark style={{ background: '#aa9cfc', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Sebastian Thrun <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>PERSON</span></mark> started working on self-driving cars at <mark style={{ background: '#7aecec', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Google <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark> in <mark style={{ background: '#bfe1d9', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>2007 <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>DATE</span></mark>, few people outside of the company took him seriously.</div>
|
||||
</Standalone>
|
||||
|
||||
## Entity Linking {id="entity-linking"}
|
||||
|
||||
|
|
|
@ -1144,10 +1144,9 @@ relations and tokens we want to match:
|
|||
> displacy.serve(doc)
|
||||
> ```
|
||||
|
||||
<Iframe
|
||||
title="displaCy visualization of dependencies"
|
||||
src="/images/displacy-dep-founded.html"
|
||||
height={450}
|
||||
<ImageScrollable
|
||||
src="/images/displacy-dep-founded.svg"
|
||||
width={925}
|
||||
/>
|
||||
|
||||
The relations we're interested in are:
|
||||
|
|
|
@ -586,11 +586,9 @@ After installing the package, the custom colors will be used when visualizing
|
|||
text with `displacy`. Whenever the label `SNEK` is assigned, it will be
|
||||
displayed in `#3dff74`.
|
||||
|
||||
<Iframe
|
||||
title="displaCy visualization of entities"
|
||||
src="/images/displacy-ent-snek.html"
|
||||
height={100}
|
||||
/>
|
||||
<Standalone height={100}>
|
||||
<div style={{lineHeight: 2.5, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18}}>🌱🌿 <mark style={{ background: '#3dff74', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>🐍 <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>SNEK</span></mark> ____ 🌳🌲 ____ <mark style={{ background: '#cfc5ff', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>👨🌾 <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>HUMAN</span></mark> 🏘️</div>
|
||||
</Standalone>
|
||||
|
||||
## Saving, loading and distributing trained pipelines {id="models"}
|
||||
|
||||
|
|
|
@ -77,11 +77,9 @@ doc.spans["custom"] = [Span(doc, 3, 6, "ORG"), Span(doc, 5, 6, "GPE")]
|
|||
displacy.serve(doc, style="span", options={"spans_key": "custom"})
|
||||
```
|
||||
|
||||
<Iframe
|
||||
title="displaCy visualizer for overlapping spans"
|
||||
src="/images/displacy-span.html"
|
||||
height={180}
|
||||
/>
|
||||
<Standalone height={100}>
|
||||
<div style={{ lineHeight: 2.5, direction: 'ltr', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18 }}>Welcome to the <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>Bank<span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#7aecec', top: 40, height: 4, borderTopLeftRadius: 3, borderBottomLeftRadius: 3, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}><span style={{ background: '#7aecec', color: '#000', top: '-0.5em', padding: '2px 3px', position: 'absolute', fontSize: '0.6em', fontWeight: 'bold', lineHeight: 1, borderRadius: 3 }}>ORG</span></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>of <span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>China<span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#feca74', top: 57, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#feca74', top: 57, height: 4, borderTopLeftRadius: 3, borderBottomLeftRadius: 3, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}><span style={{ background: '#feca74', color: '#000', top: '-0.5em', padding: '2px 3px', position: 'absolute', fontSize: '0.6em', fontWeight: 'bold', lineHeight: 1, borderRadius: 3 }}>GPE</span></span></span>.</div>
|
||||
</Standalone>
|
||||
|
||||
## Additional features and improvements
|
||||
|
||||
|
|
|
@ -119,11 +119,9 @@ doc = nlp(text)
|
|||
displacy.serve(doc, style="ent")
|
||||
```
|
||||
|
||||
<Iframe
|
||||
title="displaCy visualizer for entities"
|
||||
src="/images/displacy-ent2.html"
|
||||
height={180}
|
||||
/>
|
||||
<Standalone height={180}>
|
||||
<div style={{lineHeight: 2.5, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18}}>When <mark style={{ background: '#aa9cfc', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Sebastian Thrun <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>PERSON</span></mark> started working on self-driving cars at <mark style={{ background: '#7aecec', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Google <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark> in <mark style={{ background: '#bfe1d9', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>2007 <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>DATE</span></mark>, few people outside of the company took him seriously.</div>
|
||||
</Standalone>
|
||||
|
||||
The entity visualizer lets you customize the following `options`:
|
||||
|
||||
|
@ -148,11 +146,9 @@ use the `colors` setting to add your own colors for them.
|
|||
> displacy.serve(doc, style="ent", options=options)
|
||||
> ```
|
||||
|
||||
<Iframe
|
||||
title="displaCy visualizer for entities (custom styling)"
|
||||
src="/images/displacy-ent-custom.html"
|
||||
height={225}
|
||||
/>
|
||||
<Standalone height={225}>
|
||||
<div style={{lineHeight: 2.5, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18}}>But <mark style={{ background: 'linear-gradient(90deg, #aa9cfc, #fc9ce7)', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Google <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark> is starting from behind. The company made a late push into hardware, and <mark style={{ background: 'linear-gradient(90deg, #aa9cfc, #fc9ce7)', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Apple <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark>’s Siri, available on iPhones, and <mark style={{ background: 'linear-gradient(90deg, #aa9cfc, #fc9ce7)', padding: '0.45em 0.6em', margin: '0 0.25em', lineHeight: 1, borderRadius: '0.35em'}}>Amazon <span style={{ fontSize: '0.8em', fontWeight: 'bold', lineHeight: 1, borderRadius: '0.35em', marginLeft: '0.5rem'}}>ORG</span></mark>’s Alexa software, which runs on its Echo and Dot devices, have clear leads in consumer adoption.</div>
|
||||
</Standalone>
|
||||
|
||||
The above example uses a little trick: Since the background color values are
|
||||
added as the `background` style attribute, you can use any
|
||||
|
@ -197,11 +193,9 @@ doc.spans["sc"] = [
|
|||
displacy.serve(doc, style="span")
|
||||
```
|
||||
|
||||
<Iframe
|
||||
title="displaCy visualizer for overlapping spans"
|
||||
src="/images/displacy-span.html"
|
||||
height={180}
|
||||
/>
|
||||
<Standalone height={100}>
|
||||
<div style={{ lineHeight: 2.5, direction: 'ltr', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18 }}>Welcome to the <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>Bank<span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#7aecec', top: 40, height: 4, borderTopLeftRadius: 3, borderBottomLeftRadius: 3, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}><span style={{ background: '#7aecec', color: '#000', top: '-0.5em', padding: '2px 3px', position: 'absolute', fontSize: '0.6em', fontWeight: 'bold', lineHeight: 1, borderRadius: 3 }}>ORG</span></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>of <span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>China<span style={{ background: '#7aecec', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#feca74', top: 57, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#feca74', top: 57, height: 4, borderTopLeftRadius: 3, borderBottomLeftRadius: 3, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}><span style={{ background: '#feca74', color: '#000', top: '-0.5em', padding: '2px 3px', position: 'absolute', fontSize: '0.6em', fontWeight: 'bold', lineHeight: 1, borderRadius: 3 }}>GPE</span></span></span>.</div>
|
||||
</Standalone>
|
||||
|
||||
The span visualizer lets you customize the following `options`:
|
||||
|
||||
|
@ -223,11 +217,9 @@ specify which one displaCy should use with `spans_key` (`sc` is the default).
|
|||
> displacy.serve(doc, style="span", options=options)
|
||||
> ```
|
||||
|
||||
<Iframe
|
||||
title="displaCy visualizer for spans (custom spans_key)"
|
||||
src="/images/displacy-span-custom.html"
|
||||
height={225}
|
||||
/>
|
||||
<Standalone height={100}>
|
||||
<div style={{ lineHeight: 2.5, direction: 'ltr', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", fontSize: 18 }}>Welcome to the <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>Bank<span style={{ background: '#ddd', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span><span style={{ background: '#ddd', top: 40, height: 4, borderTopLeftRadius: 3, borderBottomLeftRadius: 3, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}><span style={{ background: '#ddd', color: '#000', top: '-0.5em', padding: '2px 3px', position: 'absolute', fontSize: '0.6em', fontWeight: 'bold', lineHeight: 1, borderRadius: 3 }}>BANK</span></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>of <span style={{ background: '#ddd', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span></span> <span style={{ fontWeight: 'bold', display: 'inline-block', position: 'relative'}}>China<span style={{ background: '#ddd', top: 40, height: 4, left: -1, width: 'calc(100% + 2px)', position: 'absolute' }}></span></span>.</div>
|
||||
</Standalone>
|
||||
|
||||
## Using displaCy in Jupyter notebooks {id="jupyter"}
|
||||
|
||||
|
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
|
@ -1,80 +0,0 @@
|
|||
<div
|
||||
class="entities"
|
||||
style="
|
||||
line-height: 2.5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-size: 18px;
|
||||
"
|
||||
>But
|
||||
<mark
|
||||
class="entity"
|
||||
style="
|
||||
background: linear-gradient(90deg, #aa9cfc, #fc9ce7);
|
||||
padding: 0.45em 0.6em;
|
||||
margin: 0 0.25em;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
"
|
||||
>Google
|
||||
<span
|
||||
style="
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>ORG</span
|
||||
></mark
|
||||
>is starting from behind. The company made a late push into hardware, and
|
||||
<mark
|
||||
class="entity"
|
||||
style="
|
||||
background: linear-gradient(90deg, #aa9cfc, #fc9ce7);
|
||||
padding: 0.45em 0.6em;
|
||||
margin: 0 0.25em;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
"
|
||||
>Apple
|
||||
<span
|
||||
style="
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>ORG</span
|
||||
></mark
|
||||
>’s Siri, available on iPhones, and
|
||||
<mark
|
||||
class="entity"
|
||||
style="
|
||||
background: linear-gradient(90deg, #aa9cfc, #fc9ce7);
|
||||
padding: 0.45em 0.6em;
|
||||
margin: 0 0.25em;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
"
|
||||
>Amazon
|
||||
<span
|
||||
style="
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>ORG</span
|
||||
></mark
|
||||
>’s Alexa software, which runs on its Echo and Dot devices, have clear leads in consumer
|
||||
adoption.</div
|
||||
>
|
|
@ -1,59 +0,0 @@
|
|||
<div
|
||||
class="entities"
|
||||
style="
|
||||
line-height: 2.5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-size: 16px;
|
||||
"
|
||||
>
|
||||
🌱🌿
|
||||
<mark
|
||||
class="entity"
|
||||
style="
|
||||
background: #3dff74;
|
||||
padding: 0.45em 0.6em;
|
||||
margin: 0 0.25em;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
"
|
||||
>🐍
|
||||
<span
|
||||
style="
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>SNEK</span
|
||||
></mark
|
||||
>
|
||||
____ 🌳🌲 ____
|
||||
<mark
|
||||
class="entity"
|
||||
style="
|
||||
background: #cfc5ff;
|
||||
padding: 0.45em 0.6em;
|
||||
margin: 0 0.25em;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
"
|
||||
>👨🌾
|
||||
<span
|
||||
style="
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>HUMAN</span
|
||||
></mark
|
||||
>
|
||||
🏘️
|
||||
</div>
|
|
@ -1,84 +0,0 @@
|
|||
<div
|
||||
class="entities"
|
||||
style="
|
||||
line-height: 2.5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-size: 16px;
|
||||
"
|
||||
>
|
||||
<mark
|
||||
class="entity"
|
||||
style="
|
||||
background: #7aecec;
|
||||
padding: 0.45em 0.6em;
|
||||
margin: 0 0.25em;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
"
|
||||
>
|
||||
Apple
|
||||
<span
|
||||
style="
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>ORG</span
|
||||
>
|
||||
</mark>
|
||||
is looking at buying
|
||||
<mark
|
||||
class="entity"
|
||||
style="
|
||||
background: #feca74;
|
||||
padding: 0.45em 0.6em;
|
||||
margin: 0 0.25em;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
"
|
||||
>
|
||||
U.K.
|
||||
<span
|
||||
style="
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>GPE</span
|
||||
>
|
||||
</mark>
|
||||
startup for
|
||||
<mark
|
||||
class="entity"
|
||||
style="
|
||||
background: #e4e7d2;
|
||||
padding: 0.45em 0.6em;
|
||||
margin: 0 0.25em;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
"
|
||||
>
|
||||
$1 billion
|
||||
<span
|
||||
style="
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>MONEY</span
|
||||
>
|
||||
</mark>
|
||||
</div>
|
|
@ -1,86 +0,0 @@
|
|||
<div
|
||||
class="entities"
|
||||
style="
|
||||
line-height: 2.5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-size: 18px;
|
||||
"
|
||||
>
|
||||
When
|
||||
<mark
|
||||
class="entity"
|
||||
style="
|
||||
background: #aa9cfc;
|
||||
padding: 0.45em 0.6em;
|
||||
margin: 0 0.25em;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
"
|
||||
>
|
||||
Sebastian Thrun
|
||||
<span
|
||||
style="
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>PERSON</span
|
||||
>
|
||||
</mark>
|
||||
started working on self-driving cars at
|
||||
<mark
|
||||
class="entity"
|
||||
style="
|
||||
background: #7aecec;
|
||||
padding: 0.45em 0.6em;
|
||||
margin: 0 0.25em;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
"
|
||||
>
|
||||
Google
|
||||
<span
|
||||
style="
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>ORG</span
|
||||
>
|
||||
</mark>
|
||||
in
|
||||
<mark
|
||||
class="entity"
|
||||
style="
|
||||
background: #bfe1d9;
|
||||
padding: 0.45em 0.6em;
|
||||
margin: 0 0.25em;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
"
|
||||
>
|
||||
2007
|
||||
<span
|
||||
style="
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 0.35em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
"
|
||||
>DATE</span
|
||||
>
|
||||
</mark>
|
||||
, few people outside of the company took him seriously.
|
||||
</div>
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
@ -0,0 +1,212 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
id="0"
|
||||
class="displacy"
|
||||
width="1275"
|
||||
height="399.5"
|
||||
style="
|
||||
max-width: none;
|
||||
height: 399.5px;
|
||||
color: #000000;
|
||||
background: #ffffff;
|
||||
font-family: Arial;
|
||||
"
|
||||
>
|
||||
<text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
|
||||
<tspan class="displacy-word" fill="currentColor" x="50">Autonomous</tspan>
|
||||
<tspan class="displacy-tag" dy="2em" fill="currentColor" x="50">ADJ</tspan>
|
||||
</text>
|
||||
|
||||
<text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
|
||||
<tspan class="displacy-word" fill="currentColor" x="225">cars</tspan>
|
||||
<tspan class="displacy-tag" dy="2em" fill="currentColor" x="225">NOUN</tspan>
|
||||
</text>
|
||||
|
||||
<text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
|
||||
<tspan class="displacy-word" fill="currentColor" x="400">shift</tspan>
|
||||
<tspan class="displacy-tag" dy="2em" fill="currentColor" x="400">VERB</tspan>
|
||||
</text>
|
||||
|
||||
<text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
|
||||
<tspan class="displacy-word" fill="currentColor" x="575">insurance</tspan>
|
||||
<tspan class="displacy-tag" dy="2em" fill="currentColor" x="575">NOUN</tspan>
|
||||
</text>
|
||||
|
||||
<text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
|
||||
<tspan class="displacy-word" fill="currentColor" x="750">liability</tspan>
|
||||
<tspan class="displacy-tag" dy="2em" fill="currentColor" x="750">NOUN</tspan>
|
||||
</text>
|
||||
|
||||
<text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
|
||||
<tspan class="displacy-word" fill="currentColor" x="925">toward</tspan>
|
||||
<tspan class="displacy-tag" dy="2em" fill="currentColor" x="925">ADP</tspan>
|
||||
</text>
|
||||
|
||||
<text class="displacy-token" fill="currentColor" text-anchor="middle" y="309.5">
|
||||
<tspan class="displacy-word" fill="currentColor" x="1100">manufacturers</tspan>
|
||||
<tspan class="displacy-tag" dy="2em" fill="currentColor" x="1100">NOUN</tspan>
|
||||
</text>
|
||||
|
||||
<g class="displacy-arrow">
|
||||
<path
|
||||
class="displacy-arc"
|
||||
id="arrow-0-0"
|
||||
stroke-width="2px"
|
||||
d="M70,264.5 C70,177.0 215.0,177.0 215.0,264.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
></path>
|
||||
<text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
|
||||
<textpath
|
||||
xlink:href="#arrow-0-0"
|
||||
class="displacy-label"
|
||||
startOffset="50%"
|
||||
fill="currentColor"
|
||||
text-anchor="middle"
|
||||
>
|
||||
amod
|
||||
</textpath>
|
||||
</text>
|
||||
<path
|
||||
class="displacy-arrowhead"
|
||||
d="M70,266.5 L62,254.5 78,254.5"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</g>
|
||||
|
||||
<g class="displacy-arrow">
|
||||
<path
|
||||
class="displacy-arc"
|
||||
id="arrow-0-1"
|
||||
stroke-width="2px"
|
||||
d="M245,264.5 C245,177.0 390.0,177.0 390.0,264.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
></path>
|
||||
<text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
|
||||
<textpath
|
||||
xlink:href="#arrow-0-1"
|
||||
class="displacy-label"
|
||||
startOffset="50%"
|
||||
fill="currentColor"
|
||||
text-anchor="middle"
|
||||
>
|
||||
nsubj
|
||||
</textpath>
|
||||
</text>
|
||||
<path
|
||||
class="displacy-arrowhead"
|
||||
d="M245,266.5 L237,254.5 253,254.5"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</g>
|
||||
|
||||
<g class="displacy-arrow">
|
||||
<path
|
||||
class="displacy-arc"
|
||||
id="arrow-0-2"
|
||||
stroke-width="2px"
|
||||
d="M595,264.5 C595,177.0 740.0,177.0 740.0,264.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
></path>
|
||||
<text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
|
||||
<textpath
|
||||
xlink:href="#arrow-0-2"
|
||||
class="displacy-label"
|
||||
startOffset="50%"
|
||||
fill="currentColor"
|
||||
text-anchor="middle"
|
||||
>
|
||||
compound
|
||||
</textpath>
|
||||
</text>
|
||||
<path
|
||||
class="displacy-arrowhead"
|
||||
d="M595,266.5 L587,254.5 603,254.5"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</g>
|
||||
|
||||
<g class="displacy-arrow">
|
||||
<path
|
||||
class="displacy-arc"
|
||||
id="arrow-0-3"
|
||||
stroke-width="2px"
|
||||
d="M420,264.5 C420,89.5 745.0,89.5 745.0,264.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
></path>
|
||||
<text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
|
||||
<textpath
|
||||
xlink:href="#arrow-0-3"
|
||||
class="displacy-label"
|
||||
startOffset="50%"
|
||||
fill="currentColor"
|
||||
text-anchor="middle"
|
||||
>
|
||||
dobj
|
||||
</textpath>
|
||||
</text>
|
||||
<path
|
||||
class="displacy-arrowhead"
|
||||
d="M745.0,266.5 L753.0,254.5 737.0,254.5"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</g>
|
||||
|
||||
<g class="displacy-arrow">
|
||||
<path
|
||||
class="displacy-arc"
|
||||
id="arrow-0-4"
|
||||
stroke-width="2px"
|
||||
d="M420,264.5 C420,2.0 925.0,2.0 925.0,264.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
></path>
|
||||
<text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
|
||||
<textpath
|
||||
xlink:href="#arrow-0-4"
|
||||
class="displacy-label"
|
||||
startOffset="50%"
|
||||
fill="currentColor"
|
||||
text-anchor="middle"
|
||||
>
|
||||
prep
|
||||
</textpath>
|
||||
</text>
|
||||
<path
|
||||
class="displacy-arrowhead"
|
||||
d="M925.0,266.5 L933.0,254.5 917.0,254.5"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</g>
|
||||
|
||||
<g class="displacy-arrow">
|
||||
<path
|
||||
class="displacy-arc"
|
||||
id="arrow-0-5"
|
||||
stroke-width="2px"
|
||||
d="M945,264.5 C945,177.0 1090.0,177.0 1090.0,264.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
></path>
|
||||
<text dy="1.25em" style="font-size: 0.8em; letter-spacing: 1px">
|
||||
<textpath
|
||||
xlink:href="#arrow-0-5"
|
||||
class="displacy-label"
|
||||
startOffset="50%"
|
||||
fill="currentColor"
|
||||
text-anchor="middle"
|
||||
>
|
||||
pobj
|
||||
</textpath>
|
||||
</text>
|
||||
<path
|
||||
class="displacy-arrowhead"
|
||||
d="M1090.0,266.5 L1098.0,254.5 1082.0,254.5"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 6.8 KiB |
|
@ -1,84 +0,0 @@
|
|||
<div
|
||||
class="spans"
|
||||
style="
|
||||
line-height: 2.5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-size: 18px;
|
||||
direction: ltr;
|
||||
"
|
||||
>
|
||||
Welcome to the
|
||||
<span style="font-weight: bold; display: inline-block; position: relative">
|
||||
Bank
|
||||
<span
|
||||
style="
|
||||
background: #ddd;
|
||||
top: 40px;
|
||||
height: 4px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
position: absolute;
|
||||
"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
style="
|
||||
background: #ddd;
|
||||
top: 40px;
|
||||
height: 4px;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
position: absolute;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
background: #ddd;
|
||||
color: #000;
|
||||
top: -0.5em;
|
||||
padding: 2px 3px;
|
||||
position: absolute;
|
||||
font-size: 0.6em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
"
|
||||
>
|
||||
BANK
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span style="font-weight: bold; display: inline-block; position: relative">
|
||||
of
|
||||
<span
|
||||
style="
|
||||
background: #ddd;
|
||||
top: 40px;
|
||||
height: 4px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
position: absolute;
|
||||
"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
<span style="font-weight: bold; display: inline-block; position: relative">
|
||||
China
|
||||
|
||||
<span
|
||||
style="
|
||||
background: #ddd;
|
||||
top: 40px;
|
||||
height: 4px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
position: absolute;
|
||||
"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
.
|
||||
</div>
|
|
@ -1,123 +0,0 @@
|
|||
<div
|
||||
class="spans"
|
||||
style="
|
||||
line-height: 2.5;
|
||||
direction: ltr;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-size: 18px;
|
||||
"
|
||||
>
|
||||
Welcome to the
|
||||
<span style="font-weight: bold; display: inline-block; position: relative">
|
||||
Bank
|
||||
<span
|
||||
style="
|
||||
background: #7aecec;
|
||||
top: 40px;
|
||||
height: 4px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
position: absolute;
|
||||
"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
style="
|
||||
background: #7aecec;
|
||||
top: 40px;
|
||||
height: 4px;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
position: absolute;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
background: #7aecec;
|
||||
color: #000;
|
||||
top: -0.5em;
|
||||
padding: 2px 3px;
|
||||
position: absolute;
|
||||
font-size: 0.6em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
"
|
||||
>
|
||||
ORG
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span style="font-weight: bold; display: inline-block; position: relative">
|
||||
of
|
||||
|
||||
<span
|
||||
style="
|
||||
background: #7aecec;
|
||||
top: 40px;
|
||||
height: 4px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
position: absolute;
|
||||
"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
<span style="font-weight: bold; display: inline-block; position: relative">
|
||||
China
|
||||
<span
|
||||
style="
|
||||
background: #7aecec;
|
||||
top: 40px;
|
||||
height: 4px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
position: absolute;
|
||||
"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
style="
|
||||
background: #feca74;
|
||||
top: 57px;
|
||||
height: 4px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
position: absolute;
|
||||
"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
style="
|
||||
background: #feca74;
|
||||
top: 57px;
|
||||
height: 4px;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
position: absolute;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
background: #feca74;
|
||||
color: #000;
|
||||
top: -0.5em;
|
||||
padding: 2px 3px;
|
||||
position: absolute;
|
||||
font-size: 0.6em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
"
|
||||
>
|
||||
GPE
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
.
|
||||
</div>
|
|
@ -107,6 +107,22 @@ const Image = ({ src, alt, title, href, ...props }) => {
|
|||
)
|
||||
}
|
||||
|
||||
const ImageScrollable = ({ src, alt, width, ...props }) => {
|
||||
return (
|
||||
<figure className={classNames(classes.standalone, classes.scrollable)}>
|
||||
<img className={classes['image-scrollable']} src={src} alt={alt} width={width} height="auto" />
|
||||
</figure>
|
||||
)
|
||||
}
|
||||
|
||||
const Standalone = ({ height, children, ...props }) => {
|
||||
return (
|
||||
<figure className={classes.standalone} style={{ height }}>
|
||||
{children}
|
||||
</figure>
|
||||
)
|
||||
}
|
||||
|
||||
const ImageFill = ({ image, ...props }) => {
|
||||
return (
|
||||
<span
|
||||
|
@ -137,4 +153,4 @@ const GoogleSheet = ({ id, link, height, button = 'View full table' }) => {
|
|||
)
|
||||
}
|
||||
|
||||
export { YouTube, SoundCloud, Iframe, Image, ImageFill, GoogleSheet }
|
||||
export { YouTube, SoundCloud, Iframe, Image, ImageFill, ImageScrollable, GoogleSheet, Standalone }
|
||||
|
|
|
@ -13,7 +13,7 @@ import Aside from './components/aside'
|
|||
import Button from './components/button'
|
||||
import Tag from './components/tag'
|
||||
import Grid from './components/grid'
|
||||
import { YouTube, SoundCloud, Iframe, Image, GoogleSheet } from './components/embed'
|
||||
import { YouTube, SoundCloud, Iframe, Image, ImageScrollable, GoogleSheet, Standalone } from './components/embed'
|
||||
import Project from './widgets/project'
|
||||
import { Integration, IntegrationLogo } from './widgets/integration.js'
|
||||
import { Logos, Colors, Patterns } from './widgets/styleguide'
|
||||
|
@ -90,6 +90,8 @@ export const remarkComponents = {
|
|||
* For regular img elements it is not possible to pass properties
|
||||
*/
|
||||
Image,
|
||||
ImageScrollable,
|
||||
Standalone,
|
||||
|
||||
Label,
|
||||
Logos,
|
||||
|
|
|
@ -26,12 +26,20 @@
|
|||
padding: var(--spacing-xs)
|
||||
margin-bottom: var(--spacing-md)
|
||||
|
||||
.scrollable
|
||||
max-width: 100%
|
||||
overflow: auto
|
||||
|
||||
.image
|
||||
position: relative
|
||||
display: block
|
||||
max-width: 100%
|
||||
margin: 0 auto
|
||||
|
||||
.image-scrollable
|
||||
display: block
|
||||
max-width: fit-content
|
||||
|
||||
.figure-fill
|
||||
display: block
|
||||
position: relative
|
||||
|
|