diff --git a/website/_includes/_page_models.jade b/website/_includes/_page_models.jade
index c7742fa38..fd413b66a 100644
--- a/website/_includes/_page_models.jade
+++ b/website/_includes/_page_models.jade
@@ -50,7 +50,7 @@ for id in CURRENT_MODELS
+cell
span(data-tpl=id data-tpl-key=field) #[em n/a]
- +row(data-tpl=id data-tpl-key="compat-wrapper" style="display: none")
+ +row(data-tpl=id data-tpl-key="compat-wrapper" hidden="")
+cell
+label Compat #[+help("Latest compatible model version for your spaCy installation").u-color-subtle]
+cell
@@ -58,15 +58,15 @@ for id in CURRENT_MODELS
select.o-field__select.u-text-small(data-tpl=id data-tpl-key="compat")
div(data-tpl=id data-tpl-key="compat-versions")
- section(data-tpl=id data-tpl-key="benchmarks" style="display: none")
+ section(data-tpl=id data-tpl-key="benchmarks" hidden="")
+grid.o-block-small
for keys, label in MODEL_BENCHMARKS
- .u-flex-full.u-padding-small(data-tpl=id data-tpl-key=label.toLowerCase() style="display: none")
+ .u-flex-full.u-padding-small(data-tpl=id data-tpl-key=label.toLowerCase() hidden="")
+table.o-block-small
+row("head")
+head-cell(colspan="2")=(MODEL_META["benchmark_" + label] || label)
for label, field in keys
- +row(style="display: none")
+ +row(hidden="")
+cell.u-nowrap
+label=label
if MODEL_META[field]
diff --git a/website/assets/js/models.js b/website/assets/js/models.js
index 134a0e66c..57e8f84ae 100644
--- a/website/assets/js/models.js
+++ b/website/assets/js/models.js
@@ -101,9 +101,9 @@ export class ModelLoader {
showError(modelId) {
const tpl = new Templater(modelId);
tpl.get('table').removeAttribute('data-loading');
- tpl.get('error').style.display = 'block';
+ tpl.get('error').hidden = false;
for (let key of ['sources', 'pipeline', 'vecs', 'author', 'license']) {
- tpl.get(key).parentElement.parentElement.style.display = 'none';
+ tpl.get(key).parentElement.parentElement.hidden = true;
}
}
@@ -114,13 +114,12 @@ export class ModelLoader {
const modelId = `${data.lang}_${data.name}`;
const model = `${modelId}-${data.version}`;
const tpl = new Templater(modelId);
- tpl.get('error').style.display = 'none';
this.renderDetails(tpl, data)
this.renderBenchmarks(tpl, data.accuracy, data.speed);
this.renderCompat(tpl, modelId);
tpl.get('download').setAttribute('href', `${this.repo}/releases/tag/${model}`);
tpl.get('table').removeAttribute('data-loading');
- tpl.get('error').style.display = 'none';
+ tpl.get('error').hidden = true;
}
renderDetails(tpl, { version, size, description, notes, author, url,
@@ -133,9 +132,9 @@ export class ModelLoader {
if (license) tpl.fill('license', formats.license(license, this.licenses[license]), true);
if (sources) tpl.fill('sources', formats.sources(sources));
if (vectors) tpl.fill('vecs', formats.vectors(vectors));
- else tpl.get('vecs').parentElement.parentElement.style.display = 'none';
+ else tpl.get('vecs').parentElement.parentElement.hidden = true;
if (pipeline && pipeline.length) tpl.fill('pipeline', formats.pipeline(pipeline), true);
- else tpl.get('pipeline').parentElement.parentElement.style.display = 'none';
+ else tpl.get('pipeline').parentElement.parentElement.hidden = true;
}
renderBenchmarks(tpl, accuracy = {}, speed = {}) {
@@ -143,7 +142,7 @@ export class ModelLoader {
this.renderTable(tpl, 'parser', accuracy, val => val.toFixed(2));
this.renderTable(tpl, 'ner', accuracy, val => val.toFixed(2));
this.renderTable(tpl, 'speed', speed, Math.round);
- tpl.get('benchmarks').style.display = 'block';
+ tpl.get('benchmarks').hidden = false;
}
renderTable(tpl, id, benchmarks, converter = val => val) {
@@ -151,13 +150,13 @@ export class ModelLoader {
for (let key of Object.keys(this.benchKeys[id])) {
if (benchmarks[key]) tpl
.fill(key, convertNumber(converter(benchmarks[key])))
- .parentElement.style.display = 'table-row';
+ .parentElement.hidden = false;
}
- tpl.get(id).style.display = 'block';
+ tpl.get(id).hidden = false;
}
renderCompat(tpl, modelId) {
- tpl.get('compat-wrapper').style.display = 'table-row';
+ tpl.get('compat-wrapper').hidden = false;
const header = '';
const options = Object.keys(this.compat)
.map(v => ``)
@@ -197,8 +196,8 @@ export class ModelComparer {
this.colors = CHART_COLORS;
this.fonts = CHART_FONTS;
this.defaultModels = defaultModels;
- this.tpl.get('result').style.display = 'block';
- this.tpl.get('error').style.display = 'none';
+ this.tpl.get('result').hidden = false;
+ this.tpl.get('error').hidden = true;
this.fetchCompat()
.then(compat => this.init(compat))
.catch(this.showError.bind(this))
@@ -257,8 +256,8 @@ export class ModelComparer {
showError(err) {
console.error(err || 'Error');
- this.tpl.get('result').style.display = 'none';
- this.tpl.get('error').style.display = 'block';
+ this.tpl.get('result').hidden = true;
+ this.tpl.get('error').hidden = false;
}
onSelect(ev) {
@@ -301,8 +300,8 @@ export class ModelComparer {
this.chart.update();
[model1, model2].forEach((model, i) => this.renderTable(metaKeys, i + 1, model));
this.tpl.get('result').removeAttribute('data-loading');
- this.tpl.get('error').style.display = 'none';
- this.tpl.get('result').style.display = 'block';
+ this.tpl.get('error').hidden = true;
+ this.tpl.get('result').hidden = false;
}
renderTable(metaKeys, i, { lang, name, version, size, description,
diff --git a/website/models/comparison.jade b/website/models/comparison.jade
index b0ab61efe..81eeb6fd1 100644
--- a/website/models/comparison.jade
+++ b/website/models/comparison.jade
@@ -30,7 +30,7 @@ div(data-tpl=TPL data-tpl-key="error")
| overview of the
| #[+a(gh("spacy-models") + "/releases") latest model releases].
-div(data-tpl=TPL data-tpl-key="result" style="display: none")
+div(data-tpl=TPL data-tpl-key="result" hidden="")
+chart("compare_accuracy", 350)
+aside-code("Download", "text")