explosion/spaCy
1
1
Fork 0
mirror of https://github.com/explosion/spaCy.git synced 2024-09-20 19:09:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

Inline displaCy visualizations in docs (#13050) [ci skip]

Browse Source
This commit is contained in:
Ines Montani 2023-10-06 14:22:43 +02:00 committed by GitHub
parent be29216fe2
commit b83f1e3724
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 273 additions and 570 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
website/public/images/displacy-long2.html → website/docs/images/displacy-long2.html
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

8
website/docs/usage/101/_named-entities.mdx
View File

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

7
website/docs/usage/101/_pos-deps.mdx
View File

@ -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}
/>

15
website/docs/usage/linguistic-features.mdx
View File

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

7
website/docs/usage/rule-based-matching.mdx
View File

@ -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:

8
website/docs/usage/saving-loading.mdx
View File

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

8
website/docs/usage/v3-3.mdx
View File

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

32
website/docs/usage/visualizers.mdx
View File

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

0
website/public/images/displacy-dep-founded.html → website/public/images/displacy-dep-founded.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

80
website/public/images/displacy-ent-custom.html
View File

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

59
website/public/images/displacy-ent-snek.html
View File

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

84
website/public/images/displacy-ent1.html
View File

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

86
website/public/images/displacy-ent2.html
View File

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

0
website/public/images/displacy-long.html → website/public/images/displacy-long.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

212
website/public/images/displacy-long2.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

84
website/public/images/displacy-span-custom.html
View File

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

123
website/public/images/displacy-span.html
View File

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

18
website/src/components/embed.js
View File

@ -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 }

4
website/src/remark.js
View File

@ -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,

8
website/src/styles/embed.module.sass
View File

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