explosion/spaCy
1
1
Fork 0
mirror of https://github.com/explosion/spaCy.git synced 2025-02-03 13:14:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve style/accessibility of yes/no/neutral icons (see #1471)

Browse Source 
Use distinctive icons instead of only colour, add proper handling of labels (hidden or visible, but always present) with optional custom text.
This commit is contained in:
ines 2017-10-29 01:14:30 +02:00
parent 4b78c1762b
commit 4a4f9666b2
8 changed files with 67 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
website/_includes/_mixins-base.jade
View File

@ -45,10 +45,11 @@ mixin icon(name, width, height)
icon - [string] "pro", "con" or "neutral" (default: "neutral")
size - [integer] icon size (optional)
mixin procon(icon, size)
- colors = { pro: "green", con: "red", neutral: "subtle" }
+icon("circle", size || 16)(class="u-color-#{colors[icon] || 'subtle'}" aria-label=icon)&attributes(attributes)
mixin procon(icon, label, show_label, size)
- var colors = { yes: "green", no: "red", neutral: "subtle" }
span.u-nowrap
+icon(icon, size || 20)(class="u-color-#{colors[icon] || 'subtle'}").o-icon--inline&attributes(attributes)
span.u-text-small(class=show_label ? null : "u-hidden")=(label || icon)
//- Headlines Helper Mixin
level - [integer] 1, 2, 3, 4, or 5

10
website/_includes/_svg.jade
View File

@ -16,8 +16,14 @@ svg(style="position: absolute; visibility: hidden; width: 0; height: 0;" width="
symbol#svg_book(viewBox="0 0 20 20")
path(d="M15.5 11h-11c-0.275 0-0.5 0.225-0.5 0.5v1c0 0.276 0.225 0.5 0.5 0.5h11c0.276 0 0.5-0.224 0.5-0.5v-1c0-0.275-0.224-0.5-0.5-0.5zM15.5 7h-11c-0.275 0-0.5 0.225-0.5 0.5v1c0 0.276 0.225 0.5 0.5 0.5h11c0.276 0 0.5-0.224 0.5-0.5v-1c0-0.275-0.224-0.5-0.5-0.5zM10.5 15h-6c-0.275 0-0.5 0.225-0.5 0.5v1c0 0.276 0.225 0.5 0.5 0.5h6c0.276 0 0.5-0.224 0.5-0.5v-1c0-0.275-0.224-0.5-0.5-0.5zM15.5 3h-11c-0.275 0-0.5 0.225-0.5 0.5v1c0 0.276 0.225 0.5 0.5 0.5h11c0.276 0 0.5-0.224 0.5-0.5v-1c0-0.275-0.224-0.5-0.5-0.5z")
symbol#svg_circle(viewBox="0 0 18 18")
ellipse(rx="9" ry="9" cx="9" cy="9")
symbol#svg_yes(viewBox="0 0 24 24")
path(d="M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563-1.406 1.406zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984z")
symbol#svg_no(viewBox="0 0 24 24")
path(d="M17.016 15.609l-3.609-3.609 3.609-3.609-1.406-1.406-3.609 3.609-3.609-3.609-1.406 1.406 3.609 3.609-3.609 3.609 1.406 1.406 3.609-3.609 3.609 3.609zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984z")
symbol#svg_neutral(viewBox="0 0 24 24")
path(d="M12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984z")
symbol#svg_chat(viewBox="0 0 30 30")
path(d="M28.74 25.2c-1.73-.3-3.77-1.46-4.74-3.6 3.64-2.2 6-5.68 6-9.6 0-6.63-6.72-12-15-12S0 5.37 0 12s6.72 12 15 12c1.1 0 2.2-.1 3.23-.3 2.86 2 6.25 2.62 10.4 2.15.26-.02.37-.15.37-.32 0-.16-.1-.3-.26-.32zM23 14c0 .55-.45 1-1 1H8c-.55 0-1-.45-1-1s.45-1 1-1h14c.55 0 1 .45 1 1zm0-4c0 .55-.45 1-1 1H8c-.55 0-1-.45-1-1s.45-1 1-1h14c.55 0 1 .45 1 1z")

2
website/styleguide.jade
View File

@ -145,7 +145,7 @@ include _includes/_mixins
| mixin, using their name and an optional size value in #[code px].
+infobox.u-text-center
each icon in ["code", "arrow-right", "book", "circle", "chat", "star", "help", "accept", "reject", "markdown", "course", "github", "jupyter"]
each icon in ["code", "arrow-right", "book", "chat", "star", "help_o", "help", "yes", "no", "neutral", "accept", "reject", "markdown", "course", "github", "jupyter"]
.u-inline-block.u-padding-small.u-color-dark(data-tooltip=icon data-tooltip-style="code" aria-label=icon)
+icon(icon, 20)

36
website/usage/_facts-figures/_feature-comparison.jade
View File

@ -14,45 +14,45 @@ p
+row
+cell Neural network models
each icon in ["pro", "pro", "con", "pro"]
+cell.u-text-center #[+procon(icon)]
each answer in ["yes", "yes", "no", "yes"]
+cell.u-text-center #[+procon(answer)]
+row
+cell Integrated word vectors
each icon in ["pro", "con", "con", "con"]
+cell.u-text-center #[+procon(icon)]
each answer in ["yes", "no", "no", "no"]
+cell.u-text-center #[+procon(answer)]
+row
+cell Multi-language support
each icon in ["pro", "pro", "pro", "pro"]
+cell.u-text-center #[+procon(icon)]
each answer in ["yes", "yes", "yes", "yes"]
+cell.u-text-center #[+procon(answer)]
+row
+cell Tokenization
each icon in ["pro", "pro", "pro", "pro"]
+cell.u-text-center #[+procon(icon)]
each answer in ["yes", "yes", "yes", "yes"]
+cell.u-text-center #[+procon(answer)]
+row
+cell Part-of-speech tagging
each icon in ["pro", "pro", "pro", "pro"]
+cell.u-text-center #[+procon(icon)]
each answer in ["yes", "yes", "yes", "yes"]
+cell.u-text-center #[+procon(answer)]
+row
+cell Sentence segmentation
each icon in ["pro", "pro", "pro", "pro"]
+cell.u-text-center #[+procon(icon)]
each answer in ["yes", "yes", "yes", "yes"]
+cell.u-text-center #[+procon(answer)]
+row
+cell Dependency parsing
each icon in ["pro", "pro", "con", "pro"]
+cell.u-text-center #[+procon(icon)]
each answer in ["yes", "yes", "no", "yes"]
+cell.u-text-center #[+procon(answer)]
+row
+cell Entity recognition
each icon in ["pro", "con", "pro", "pro"]
+cell.u-text-center #[+procon(icon)]
each answer in ["yes", "no", "yes", "yes"]
+cell.u-text-center #[+procon(answer)]
+row
+cell Coreference resolution
each icon in ["con", "con", "con", "pro"]
+cell.u-text-center #[+procon(icon)]
each answer in ["no", "no", "no", "yes"]
+cell.u-text-center #[+procon(answer)]

11
website/usage/_spacy-101/_similarity.jade
View File

@ -24,17 +24,18 @@ p
print(token1.similarity(token2))
+aside
| #[strong #[+procon("neutral", 16)] similarity:] identical#[br]
| #[strong #[+procon("pro", 16)] similarity:] similar (higher is more similar) #[br]
| #[strong #[+procon("con", 16)] similarity:] dissimilar (lower is less similar)
| #[strong #[+procon("neutral", "identical", false, 16)] similarity:] identical#[br]
| #[strong #[+procon("yes", "similar", false, 16)] similarity:] similar (higher is more similar) #[br]
| #[strong #[+procon("no", "dissimilar", false, 16)] similarity:] dissimilar (lower is less similar)
+table(["", "dog", "cat", "banana"])
each cells, label in {"dog": [1, 0.8, 0.24], "cat": [0.8, 1, 0.28], "banana": [0.24, 0.28, 1]}
+row
+cell.u-text-label.u-color-theme=label
for cell in cells
+cell.u-text-center #[code=cell.toFixed(2)]
| #[+procon(cell < 0.5 ? "con" : cell != 1 ? "pro" : "neutral")]
+cell.u-text-center
- var result = cell < 0.5 ? ["yes", "similar"] : cell != 1 ? ["no", "dissimilar"] : ["neutral", "identical"]
| #[code=cell.toFixed(2)] #[+procon(...result)]
p
| In this case, the model's predictions are pretty on point. A dog is very

18
website/usage/_training/_basics.jade
View File

@ -30,15 +30,15 @@ p
+table(["Text", "Entity", "Start", "End", "Label", ""])
- var style = [0, 0, 1, 1, 1]
+annotation-row(["Uber blew through $1 million a week", "Uber", 0, 4, "ORG"], style)
+cell #[+procon("pro")]
+cell #[+procon("yes", "right", true)]
+annotation-row(["Android Pay expands to Canada", "Android", 0, 7, "PERSON"], style)
+cell #[+procon("con")]
+cell #[+procon("no", "wrong", true)]
+annotation-row(["Android Pay expands to Canada", "Canada", 23, 30, "GPE"], style)
+cell #[+procon("pro")]
+cell #[+procon("yes", "right", true)]
+annotation-row(["Spotify steps up Asia expansion", "Spotify", 0, 8, "ORG"], style)
+cell #[+procon("pro")]
+cell #[+procon("yes", "right", true)]
+annotation-row(["Spotify steps up Asia expansion", "Asia", 17, 21, "NORP"], style)
+cell #[+procon("con")]
+cell #[+procon("no", "wrong", true)]
p
| Alternatively, the
@ -50,13 +50,13 @@ p
+table(["Text", "Entity", "Start", "End", "Label", ""])
- var style = [0, 0, 1, 1, 1]
+annotation-row(["let me google this for you", "google", 7, 13, "ORG"], style)
+cell #[+procon("con")]
+cell #[+procon("no", "wrong", true)]
+annotation-row(["Google Maps launches location sharing", "Google", 0, 6, "ORG"], style)
+cell #[+procon("con")]
+cell #[+procon("no", "wrong", true)]
+annotation-row(["Google rebrands its business apps", "Google", 0, 6, "ORG"], style)
+cell #[+procon("pro")]
+cell #[+procon("yes", "right", true)]
+annotation-row(["look what i found on google! 😂", "google", 21, 27, "ORG"], style)
+cell #[+procon("con")]
+cell #[+procon("no", "wrong", true)]
p
| Based on the few examples above, you can already create six training

16
website/usage/_vectors-similarity/_in-context.jade
View File

@ -36,15 +36,15 @@ p
+table(["Context", "labrador.similarity(dog)"])
+row
+cell The #[strong labrador] barked.
+cell #[code 0.56] #[+procon("pro")]
+cell #[code 0.56] #[+procon("yes", "similar")]
+row
+cell The #[strong labrador] swam.
+cell #[code 0.48] #[+procon("con")]
+cell #[code 0.48] #[+procon("no", "dissimilar")]
+row
+cell the #[strong labrador] people live in canada.
+cell #[code 0.39] #[+procon("con")]
+cell #[code 0.39] #[+procon("no", "dissimilar")]
p
| The same also works for whole documents. Here, the variance of the
@ -81,8 +81,9 @@ p
+row(counter ? null : "divider")
+cell=label
for cell in cells
+cell.u-text-center #[code=cell.toFixed(2)]
| #[+procon(cell < 0.7 ? "con" : cell != 1 ? "pro" : "neutral")]
+cell.u-text-center
- var result = cell < 0.7 ? ["no", "dissimilar"] : cell != 1 ? ["yes", "similar"] : ["neutral", "identical"]
| #[code=cell.toFixed(2)] #[+procon(...result)]
- counter++
p
@ -117,6 +118,7 @@ p
+row(counter ? null : "divider")
+cell=label
for cell in cells
+cell.u-text-center #[code=cell.toFixed(2)]
| #[+procon(cell < 0.7 ? "con" : cell != 1 ? "pro" : "neutral")]
+cell.u-text-center
- var result = cell < 0.7 ? ["no", "dissimilar"] : cell != 1 ? ["yes", "similar"] : ["neutral", "identical"]
| #[code=cell.toFixed(2)] #[+procon(...result)]
- counter++

22
website/usage/spacy-101.jade
View File

@ -99,69 +99,69 @@ p
+row
+cell #[strong Tokenization]
+cell Segmenting text into words, punctuations marks etc.
+cell #[+procon("con")]
+cell #[+procon("no", "no", true)]
+row
+cell #[strong Part-of-speech] (POS) #[strong Tagging]
+cell Assigning word types to tokens, like verb or noun.
+cell #[+procon("pro")]
+cell #[+procon("yes", "yes", true)]
+row
+cell #[strong Dependency Parsing]
+cell
| Assigning syntactic dependency labels, describing the
| relations between individual tokens, like subject or object.
+cell #[+procon("pro")]
+cell #[+procon("yes", "yes", true)]
+row
+cell #[strong Lemmatization]
+cell
| Assigning the base forms of words. For example, the lemma of
| "was" is "be", and the lemma of "rats" is "rat".
+cell #[+procon("pro")]
+cell #[+procon("no", "no", true)]
+row
+cell #[strong Sentence Boundary Detection] (SBD)
+cell Finding and segmenting individual sentences.
+cell #[+procon("pro")]
+cell #[+procon("yes", "yes", true)]
+row
+cell #[strong Named Entity Recongition] (NER)
+cell
| Labelling named "real-world" objects, like persons, companies
| or locations.
+cell #[+procon("pro")]
+cell #[+procon("yes", "yes", true)]
+row
+cell #[strong Similarity]
+cell
| Comparing words, text spans and documents and how similar
| they are to each other.
+cell #[+procon("pro")]
+cell #[+procon("yes", "yes", true)]
+row
+cell #[strong Text Classification]
+cell
| Assigning categories or labels to a whole document, or parts
| of a document.
+cell #[+procon("pro")]
+cell #[+procon("yes", "yes", true)]
+row
+cell #[strong Rule-based Matching]
+cell
| Finding sequences of tokens based on their texts and
| linguistic annotations, similar to regular expressions.
+cell #[+procon("con")]
+cell #[+procon("no", "no", true)]
+row
+cell #[strong Training]
+cell Updating and improving a statistical model's predictions.
+cell #[+procon("neutral")]
+cell #[+procon("no", "no", true)]
+row
+cell #[strong Serialization]
+cell Saving objects to files or byte strings.
+cell #[+procon("neutral")]
+cell #[+procon("no", "no", true)]
+h(2, "annotations") Linguistic annotations