Checkpoint 2

index.html

@@ -32,15 +32,7 @@
 		</a>-->
 	</div>
 	
-	<div class="result">
-		displaCy uses JavaScript, SVG and CSS to show you how computers understand language
-		
-		<br>
-		<br>
-		<br>
-		<br>
-		
-		<div class="displacy-google">'<mark data-entity="work_of_art">Lawrence of Arabia</mark>' is a highly rated <mark data-entity="work_of_art">film biography</mark> about <mark data-entity="location">British</mark> <mark data-entity="person">Lieutenant</mark> <mark data-entity="person">T. E. Lawrence</mark>. <mark data-entity="person">Peter O'Toole</mark> plays <mark data-entity="person">Lawrence</mark> in the <mark data-entity="work_of_art">film</mark>.</div>
+	<div class="container">
 	</div>
 	
 	<script src="/dist/script.js"></script>

js-src/Displacy.ts

@@ -0,0 +1,50 @@
+
+
+/**
+ * Indicates position of spans of text inside the string. 
+ * (for visual applications only, no semantic sense here.)
+ */
+interface Span {
+	type:  string;
+	start: number;
+	end:   number;
+}
+
+class Displacy {
+	
+	/**
+	 * Render a text string and its entity spans
+	 * 
+	 * *see displacy-ent.js*
+	 */
+	static render(text: string, spans: Span[]): string {
+		let out = {
+			__content: "",
+			append(s: string) {
+				this.__content += s;
+			}
+		};
+		let offset = 0;
+		
+		spans.forEach(({ type, start, end }) => {
+			const entity = text.slice(start, end);
+			const fragments = text.slice(offset, start).split('\n');
+			
+			fragments.forEach((fragment, i) => {
+				out.append(fragment);
+				if (fragments.length > 1 && i !== fragments.length - 1) {
+					out.append('<br>');
+				}
+			});
+			
+			// Breaking change from displacy-ent.js:
+			// We do not filter any entity type out.
+			out.append(`<mark data-entity=${ type.toLowerCase() }>${ entity }</mark>`);
+			
+			offset = end;
+		});
+		
+		out.append(text.slice(offset, text.length));
+		return out.__content;
+	}
+}

js-src/coref.ts

@@ -31,6 +31,7 @@ class Coref {
 	endpoint: string;
 	onStart =   () => {};
 	onSuccess = () => {};
+	container?: HTMLElement;
 	
 	constructor(endpoint: string, opts: any) {
 		this.endpoint = endpoint;
@@ -55,13 +56,16 @@ class Coref {
 				this.render(res);
 			}
 			else {
-				console.log('Error', request);
+				console.error('Error', request);
 			}
 		};
 		request.send();
 	}
 	
 	render(res: Response) {
-		console.log(res);
+		const markup = Displacy.render(res.cleanedText, (<any>res).entities);
+		if (!this.container) { return ; }
+		console.log(markup);
+		this.container.innerHTML = `<div class="text">${markup}</div>`;
 	}
 }

js-src/zController.ts

@@ -27,6 +27,7 @@ const updateURL = (text) => {
 document.addEventListener('DOMContentLoaded', () => {
 	const $input = document.querySelector('input.input-message') as HTMLInputElement;
 	const $form  = document.querySelector('form.js-form') as HTMLFormElement;
+	coref.container = document.querySelector('.container') as HTMLElement;
 	
 	{
 		// Initial text

less/style.less

@@ -55,7 +55,12 @@ code, pre {
 	}
 }
 
-
+.container {
+	font-size: 20px;
+	overflow-x: auto;
+	white-space: nowrap;
+	padding: 180px 40px;
+}
 
 
 /**

less/zDisplacy.less

@@ -0,0 +1,143 @@
+
+.entities {
+	line-height: 2
+}
+[data-entity] {
+	padding: 0.25em 0.35em;
+	margin: 0 0.25em;
+	line-height: 1;
+	display: inline-block;
+	border-radius: 0.25em;
+	border: 1px solid
+}
+[data-entity]:after {
+	box-sizing: border-box;
+	content: attr(data-entity);
+	font-size: 0.6em;
+	line-height: 1;
+	padding: 0.35em 0.35em;
+	border-radius: 0.35em;
+	text-transform: uppercase;
+	display: inline-block;
+	vertical-align: middle;
+	margin: 0 0 0.1rem 0.5rem
+}
+[data-entity][data-entity="person"] {
+	background: rgba(166, 226, 45, 0.2);
+	border-color: #a6e22d
+}
+[data-entity][data-entity="person"]:after {
+	background: #a6e22d
+}
+[data-entity][data-entity="norp"] {
+	background: rgba(224, 0, 132, 0.2);
+	border-color: #e00084
+}
+[data-entity][data-entity="norp"]:after {
+	background: #e00084
+}
+[data-entity][data-entity="facility"] {
+	background: rgba(67, 198, 252, 0.2);
+	border-color: #43c6fc
+}
+[data-entity][data-entity="facility"]: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="gpe"] {
+	background: rgba(253, 151, 32, 0.2);
+	border-color: #fd9720
+}
+[data-entity][data-entity="gpe"]: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
+}
+[data-entity][data-entity="cardinal"]:after {
+	background: #999
+}