singleScores

index.html

@@ -25,11 +25,17 @@
 				</div>
 			</form>
 		</div>
-		<!--<a role="button" aria-label="Download" data-tooltip="Download" class="c-input" id="download" download="displacy.svg">
-			<svg aria-hidden="true" viewBox="0 0 20 20" width="20" height="20" fill="currentColor" class="o-icon c-input__button">
-				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/img/icons.svg#icon-download"></use>
-			</svg>
-		</a>-->
+		<div class="menu-button js-checkbox">
+			Debug 
+			<img class="svg-checkbox js-checkbox-off" src="/assets/checkbox-off.svg">
+			<img class="svg-checkbox js-checkbox-on hide" src="/assets/checkbox-on.svg">
+		</div>
+		
+		<div class="menu-button logo">
+			<a target="_blank" href="https://huggingface.co">
+				<img class="svg-logo" src="/assets/icon.svg">
+			</a>
+		</div>
 	</div>
 	
 	<div class="container">

js-src/Displacy.ts

@@ -29,7 +29,7 @@ class Displacy {
 			if (i < spans.length - 1) {
 				const sNext = spans[i+1];
 				if (s.start < sNext.start && s.end > sNext.start) {
-					alert("Spans: strict overlapping");
+					console.log("ERROR", "Spans: strict overlapping");
 				}
 			}
 		});
@@ -79,6 +79,10 @@ class Displacy {
 			for (const sT of spanTags) {
 				if (sT.tag === "start") {
 					out.append(`<mark data-entity="${ sT.span.type.toLowerCase() }" data-index="${ (<any>sT.span).index }">`);
+					const singleScore = (<any>sT.span).singleScore;
+					if (singleScore) {
+						out.append(`<span class="single-score">${ singleScore.toFixed(3) }</span>`);
+					}
 				} else {
 					out.append(`</mark>`);
 				}

js-src/coref.ts

@@ -63,7 +63,12 @@ class Coref {
 	}
 	
 	render(res: Response) {
-		const markup = Displacy.render(res.cleanedText, (<any>res).mentions);  // We will sort the second param in Displacy
+		const mentions = (<any>res).mentions;  // We will sort them in Displacy
+		for (const m of mentions) {
+			// Let's add each mention's singleScore
+			m.singleScore = res.singleScores[m.index] || undefined;
+		}
+		const markup = Displacy.render(res.cleanedText, mentions);
 		if (!this.container) { return ; }
 		// console.log(markup);  // todo remove
 		this.container.innerHTML = `<div class="text">${markup}</div>`;

js-src/zController.ts

@@ -6,6 +6,14 @@ const loading = () => {
 	document.body.classList.toggle('loading');
 };
 
+const toggleDebug = () => {
+	document.body.classList.toggle('debug');
+	const icons = document.querySelectorAll('.svg-checkbox');
+	(<any>icons).forEach((icon) => {
+		icon.classList.toggle('hide');
+	});
+};
+
 const coref = new Coref(ENDPOINT, {
 	onStart: loading,
 	onSuccess: loading,
@@ -25,8 +33,9 @@ const updateURL = (text) => {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-	const $input = document.querySelector('input.input-message') as HTMLInputElement;
-	const $form  = document.querySelector('form.js-form') as HTMLFormElement;
+	const $input    = document.querySelector('input.input-message') as HTMLInputElement;
+	const $form     = document.querySelector('form.js-form') as HTMLFormElement;
+	const $checkbox = document.querySelector('.js-checkbox') as HTMLElement;
 	coref.container = document.querySelector('.container') as HTMLElement;
 	
 	{
@@ -54,6 +63,13 @@ document.addEventListener('DOMContentLoaded', () => {
 		updateURL(text);
 		coref.parse(text);
 	});
+	
+	$checkbox.addEventListener('click', () => {
+		toggleDebug();
+	});
+	
+	// Turn on debug mode by default:
+	toggleDebug();
 });
 
 

less/style.less

@@ -5,6 +5,8 @@
 @import "mixins/size.less";
 @import "mixins/user-select.less";
 
+@fontMonospace: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+
 body {
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 	-webkit-font-smoothing: antialiased;
@@ -14,19 +16,23 @@ code, pre {
 	background-color: rgba(0,0,0,0.04);
 	border-radius: 3px;
 	padding: 2px 6px;
-	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+	font-family: @fontMonospace;
 	font-size: 12px;
 	color: #2f2f2f;
 }
 
+.hide { display: none !important; }
+
+
 .header {
 	padding: 18px 18px;
+	.clearfix();
 	.input-wrapper {
 		background: #c5c5c5;
 		padding: 0.5rem 1rem;
 		margin: 0 0.75rem 0.75rem 0;
-		border-color: #181818;
 		border-radius: .5rem;
+		float: left;
 		width: 76%;
 		.wrapper-inner {
 			width: 100%;
@@ -53,6 +59,29 @@ code, pre {
 			}
 		}
 	}
+	div.menu-button {
+		background: #c5c5c5;
+		padding: 0.5rem 1rem;
+		margin: 0 0.75rem 0.75rem 0;
+		border-radius: .5rem;
+		float: left;
+		height: 29px;
+		line-height: 28px;
+		color: #444;
+		cursor: pointer;
+		.user-select(none);
+		&.logo {
+			background-color: #6779f7;
+			img.svg-logo {
+				height: 30px;
+			}
+		}
+		img.svg-checkbox {
+			position: relative;
+			top: 3px;
+			margin-left: 3px;
+		}
+	}
 }
 
 .container {
@@ -60,8 +89,30 @@ code, pre {
 	overflow-x: auto;
 	white-space: nowrap;
 	padding: 180px 40px;
+	mark {
+		position: relative;
+		span.single-score {
+			position: absolute;
+			bottom: -32px;
+			left: 0; right: 0;
+			text-align: center;
+			font-family: @fontMonospace;
+			font-size: 12px;
+			visibility: hidden;
+		}
+		&:hover {
+			span.single-score {
+				visibility: visible;
+			}
+		}
+	}
 }
 
+body.debug {
+	span.single-score {
+		visibility: visible !important;
+	}
+}
 
 /**
  * Elements from Displacy

less/zDisplacy.less

@@ -24,120 +24,29 @@
 }
 [data-entity][data-entity="proper"] {
 	background: rgba(166, 226, 45, 0.2);
-	border-color: #a6e22d
-}
-[data-entity][data-entity="proper"]:after {
-	background: #a6e22d
+	border-color: #a6e22d;
+	&:after {
+		background: #a6e22d;
+	}
 }
 [data-entity][data-entity="nominal"] {
 	background: rgba(224, 0, 132, 0.2);
-	border-color: #e00084
-}
-[data-entity][data-entity="nominal"]:after {
-	background: #e00084
+	border-color: #e00084;
+	&:after {
+		background: #e00084;
+	}
 }
 [data-entity][data-entity="pronominal"] {
 	background: rgba(67, 198, 252, 0.2);
-	border-color: #43c6fc
+	border-color: #43c6fc;
+	&:after {
+		background: #43c6fc;
+	}
 }
-[data-entity][data-entity="pronominal"]:after {
-	background: #43c6fc
-}
-// [data-entity][data-entity="org"] {
-// 	background: rgba(67, 198, 252, 0.2);
-// 	border-color: #43c6fc
-// }
-// [data-entity][data-entity="org"]:after {
-// 	background: #43c6fc
-// }
 [data-entity][data-entity="list"] {
 	background: rgba(253, 151, 32, 0.2);
-	border-color: #fd9720
-}
-[data-entity][data-entity="list"]:after {
-	background: #fd9720
-}
-[data-entity][data-entity="loc"] {
-	background: rgba(253, 151, 32, 0.2);
-	border-color: #fd9720
-}
-[data-entity][data-entity="loc"]:after {
-	background: #fd9720
-}
-[data-entity][data-entity="product"] {
-	background: rgba(142, 125, 255, 0.2);
-	border-color: #8e7dff
-}
-[data-entity][data-entity="product"]:after {
-	background: #8e7dff
-}
-[data-entity][data-entity="event"] {
-	background: rgba(255, 204, 0, 0.2);
-	border-color: #fc0
-}
-[data-entity][data-entity="event"]:after {
-	background: #fc0
-}
-[data-entity][data-entity="work_of_art"] {
-	background: rgba(255, 204, 0, 0.2);
-	border-color: #fc0
-}
-[data-entity][data-entity="work_of_art"]:after {
-	background: #fc0
-}
-[data-entity][data-entity="language"] {
-	background: rgba(255, 204, 0, 0.2);
-	border-color: #fc0
-}
-[data-entity][data-entity="language"]:after {
-	background: #fc0
-}
-[data-entity][data-entity="date"] {
-	background: rgba(47, 187, 171, 0.2);
-	border-color: #2fbbab
-}
-[data-entity][data-entity="date"]:after {
-	background: #2fbbab
-}
-[data-entity][data-entity="time"] {
-	background: rgba(47, 187, 171, 0.2);
-	border-color: #2fbbab
-}
-[data-entity][data-entity="time"]:after {
-	background: #2fbbab
-}
-[data-entity][data-entity="percent"] {
-	background: rgba(153, 153, 153, 0.2);
-	border-color: #999
-}
-[data-entity][data-entity="percent"]:after {
-	background: #999
-}
-[data-entity][data-entity="money"] {
-	background: rgba(153, 153, 153, 0.2);
-	border-color: #999
-}
-[data-entity][data-entity="money"]:after {
-	background: #999
-}
-[data-entity][data-entity="quantity"] {
-	background: rgba(153, 153, 153, 0.2);
-	border-color: #999
-}
-[data-entity][data-entity="quantity"]:after {
-	background: #999
-}
-[data-entity][data-entity="ordinal"] {
-	background: rgba(153, 153, 153, 0.2);
-	border-color: #999
-}
-[data-entity][data-entity="ordinal"]:after {
-	background: #999
-}
-[data-entity][data-entity="cardinal"] {
-	background: rgba(153, 153, 153, 0.2);
-	border-color: #999
+	border-color: #fd9720;
+	&:after {
+		background: #fd9720;
+	}
 }
-[data-entity][data-entity="cardinal"]:after {
-	background: #999
-}