Spaces:

banana-projects
/

convai

Running

App Files Files Community

Julien Chaumond commited on May 8, 2019

Commit

2d2e027

1 Parent(s): 30358b4

Front

Browse files

Files changed (19) hide show

front/assets/iconmonstr-github-1.svg +1 -0
front/assets/iconmonstr-media-control-55.svg +3 -0
front/assets/iconmonstr-medium-1.svg +1 -0
front/assets/iconmonstr-share-11.svg +3 -0
front/index.html +123 -0
front/js-src/Api.ts +71 -0
front/js-src/Markup.ts +34 -0
front/js-src/controller.ts +177 -0
front/js-src/lib/Log.ts +1 -0
front/js-src/lib/Utils.ts +69 -0
front/less/mixins/bfc.less +3 -0
front/less/mixins/clearfix.less +10 -0
front/less/mixins/user-select.less +6 -0
front/less/style.less +271 -0
front/less/variables.less +3 -0
front/less/zGeneral.less +21 -0
front/package-lock.json +13 -0
front/package.json +15 -0
front/tsconfig.json +10 -0

front/assets/iconmonstr-github-1.svg ADDED Viewed

front/assets/iconmonstr-media-control-55.svg ADDED Viewed

front/assets/iconmonstr-medium-1.svg ADDED Viewed

front/assets/iconmonstr-share-11.svg ADDED Viewed

front/index.html ADDED Viewed

	@@ -0,0 +1,123 @@

+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Hugging Face – Convo</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<link rel="stylesheet" href="/dist/style.css">
+	<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans:400,700" rel="stylesheet">
+</head>
+<body>
+	<div class="header">
+		<div class="header-container">
+			<div class="title">
+				🦄 How to build a State-of-the-Art Conversational AI with Transfer Learning
+			</div>
+			<div class="links">
+				<a target="_blank" href="https://medium.com/@Thomwolf/2d818ac26313"><img src="/assets/iconmonstr-medium-1.svg"></a>
+				<a target="_blank" href="https://github.com/huggingface/transfer-learning-conv-ai"><img src="/assets/iconmonstr-github-1.svg"></a>
+			</div>
+		</div>
+	</div>
+	<div class="subheader">
+		<div class="container">
+			<div class="box box0">
+				<div class="clearfix">
+					<div class="title">Random personality</div>
+					<div class="links">
+						<a href="#" class="js-shuffle">Shuffle <img src="/assets/iconmonstr-media-control-55.svg"></a>
+						<a href="#" class="js-share"  >Share <img src="/assets/iconmonstr-share-11.svg"></a>
+					</div>
+				</div>
+				<div class="persona"><!-- p --></div>
+			</div>
+			<div class="box box1">
+				<div class="clearfix">
+					<div class="title"><!--Attention: How it works-->Start chatting</div>
+				</div>
+				<div class="description">
+					The machine learning model created a comprehensive consistent persona based on
+					these few lines of bio. You can now chat with this persona below.
+				</div>
+				<div class="gauge">
+					<div class="gauge-el-wrapper"><div class="gauge-el"><span class="legend">Decoder settings: Low</span></div></div>
+					<div class="gauge-el-wrapper"><div class="gauge-el"><span class="legend">Medium</span></div></div>
+					<div class="gauge-el-wrapper"><div class="gauge-el"><span class="legend">High</span></div></div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="container">
+		<div class="chat-container">
+			<div class="messages-gradient"></div>
+			<div class="placeholder-start">
+				<div class="inner">
+					Start chatting with this model, or tweak the decoder settings in the bottom-left corner.
+				</div>
+			</div>
+			<div class="messages"></div>
+		</div>
+		<div class="chat-input">
+			<div class="input-wrapper">
+				<form class="js-form">
+					<div class="input-message-wrapper">
+						<input class="input-message" type="text" name="q" placeholder="Type a message..." autocomplete="off" autofocus>
+					</div>
+					<button class="input-button">Send</button>
+				</form>
+			</div>
+		</div>
+		<div class="chat-suggestion">
+			Suggestion: <span class="js-loading">Loading…</span> <a class="js-suggestion hide" href="#">Why are you so stressed out?</a>
+		</div>
+	</div>
+	<div class="decoder-settings">
+		<div class="title">Decoder settings</div>
+		<div class="setting">
+			<div class="desc">
+				<span>Top-k</span><span class="js-val"></span>
+			</div>
+			<input class="slider" type="range" min="0" max="1000" step="1" value="0">
+		</div>
+		<div class="setting">
+			<div class="desc">
+				<span>Top-p</span><span class="js-val"></span>
+			</div>
+			<input class="slider" type="range" min="0" max="1" step="any" value="0.9">
+		</div>
+		<div class="setting">
+			<div class="desc">
+				<span>Temperature</span><span class="js-val"></span>
+			</div>
+			<input class="slider" type="range" min="0" max="100" step="any" value="0.7">
+		</div>
+	</div>
+	<script>/*  //u */</script>
+	<script src="/dist/script.js"></script>
+	<script>
+	(function() {
+		if (window.location.hostname === 'localhost') {
+			c.log('[livereload]', 'on');
+			const s = document.createElement('script');
+			s.setAttribute('src', '//localhost:35729/livereload.js');
+			document.body.appendChild(s);
+		}
+	})();
+	</script>
+	<script>
+	if (! ['localhost', 'huggingface.test'].includes(window.location.hostname)) {
+		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+		ga('create', 'UA-83738774-2', 'auto');
+		ga('send', 'pageview');
+	}
+	</script>
+</body>
+</html>

front/js-src/Api.ts ADDED Viewed

	@@ -0,0 +1,71 @@

+interface Message {
+	incoming: boolean;
+	content:  string;
+}
+interface MessageOutput {
+	text: string;
+	attention: [string, number][][]; /// <- [persona, context, user message]
+}
+class Api {
+	static ENDPOINT = `http://pouet.eastus.cloudapp.azure.com:8080`;
+	static shared = new Api();
+	path(p: string): string {
+		return `${Api.ENDPOINT}/${p}`;
+	}
+	async getShuffle(): Promise<{slug: string, text: string}> {
+		const response = await fetch('/shuffle');
+		return response.json();
+	}
+	private async postMessage(
+		user: string,
+		query: { text: string } | { completion: string },
+		params: {
+			context?:     Message[];
+			persona?:     string;
+			top_k?:       number; /// int between 0 and 1k
+			top_p?:       number; /// float between 0 and 1
+			temperature?: number; /// float between 0 and 100
+		}
+	): Promise<MessageOutput> {
+		const qs = new URLSearchParams(query);
+		const path = this.path(`messages/${user}?${ qs.toString() }`);
+		const response = await fetch(path, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(params),
+		});
+		return await response.json() as MessageOutput;
+	}
+	/**
+	 * Demo-specific helpers
+	 */
+	async postWithSettings(
+		query: { text: string } | { completion: string },
+		params: {
+			context?:     Message[];
+			persona?:     string;
+		}
+	): Promise<MessageOutput> {
+		/// Retrieve all settings params then launch the request.
+		const top_k = Number(
+			document.querySelector('.decoder-settings .setting:nth-child(2) .js-val')!.textContent
+		);
+		const top_p = Number(
+			document.querySelector('.decoder-settings .setting:nth-child(3) .js-val')!.textContent
+		);
+		const temperature = Number(
+			document.querySelector('.decoder-settings .setting:nth-child(4) .js-val')!.textContent
+		);
+		return this.postMessage(`toto`, query, { ...params, top_k, top_p, temperature });
+	}
+}

front/js-src/Markup.ts ADDED Viewed

	@@ -0,0 +1,34 @@

+class Markup {
+	private static scrollToBottom(opts: { animate?: boolean } = {}) {
+		App.messagesRoot.scrollTop = App.messagesRoot.scrollHeight;
+	}
+	private static messageMarkup(m: Message): string {
+		const incomingStr = m.incoming ? 'incoming' : 'outgoing';
+		return `<div class="message ${incomingStr}">
+			<div class="message-inner">${Utils.escape(m.content)}</div>
+		</div>`;
+	}
+	static append(m: Message) {
+		const s = this.messageMarkup(m);
+		App.messagesRoot.insertAdjacentHTML('beforeend', s);
+		this.scrollToBottom();
+	}
+	/**
+	 * Bucketize a float into a level
+	 * according to a set of thresholds.
+	 */
+	static attentionThreshold(att: number): number {
+		const thresholds = [2, 4.5, 10, 30];
+		for (const [i, x] of thresholds.entries()) {
+			if (x > att) {
+				return i;
+			}
+		}
+		return thresholds.length;
+	}
+}

front/js-src/controller.ts ADDED Viewed

	@@ -0,0 +1,177 @@

+const App = {
+	persona: {
+		slug: "",
+		text: "",
+	},
+	messages: [] as Message[],
+	messagesRoot: document.querySelector('div.messages') as HTMLDivElement,
+	divPersona:   document.querySelector('div.persona') as HTMLDivElement,
+	linkSuggest:  document.querySelector('.chat-suggestion .js-suggestion') as HTMLLinkElement,
+};
+document.addEventListener('DOMContentLoaded', () => {
+	/**
+	 * Persona
+	 * - in simple mode, we just re-format the text slightly to make it prettier.
+	 * - in attention mode, we tokenize and add spans around every token.
+	 */
+	const simplePersona = () => {
+		const text = App.persona.text;
+		const html = text.split('.').map(x => Utils.capitalize(x)).join(`.<br>`);
+		App.divPersona.innerHTML = html;
+	};
+	const tokenizePersona = () => {
+		const text = App.persona.text;
+		const tokens = text.split(/\b/).filter(x => ! /\s/.test(x));
+		let html = ``;
+		for (let [i, tok] of tokens.entries()) {
+			if (i === 0) {
+				html += `<span data-idx="${i}">${ Utils.capitalize(tok) }</span>`;
+			} else if (i > 0 && tokens[i-1] === '.') {
+				html += `<br><span data-idx="${i}">${ Utils.capitalize(tok) }</span>`;
+			} else if (/[.,']/.test(tok)) {
+				html += `<span data-idx="${i}">${ tok }</span>`;
+			} else {
+				html += ` <span data-idx="${i}">${ tok }</span>`;
+			}
+		}
+		App.divPersona.innerHTML = html;
+	};
+	App.persona = (<any>window).PERSONA_ATLOAD;
+	// ^^ tokenizePersona();
+	simplePersona();
+	document.querySelector('.js-shuffle')!.addEventListener('click', async (evt) => {
+		evt.preventDefault();
+		App.persona = await Api.shared.getShuffle();
+		tokenizePersona();
+		history.replaceState(null, "", `/persona/${App.persona.slug}`);
+		/// Also reset messages.
+		App.messages = [];
+		App.messagesRoot.innerHTML = "";
+		loadSuggestion();
+	});
+	document.querySelector('.js-share')!.addEventListener('click', async (evt) => {
+		evt.preventDefault();
+		history.replaceState(null, "", `/persona/${App.persona.slug}`);
+		const text = `Chat with me: ${ App.divPersona.innerText.replace(/\n/g, " ") }`;
+		window.open(`https://twitter.com/share?url=${ encodeURIComponent(window.location.href) }&text=${ encodeURIComponent(text) }`);
+	});
+	/**
+	 * Settings
+	 */
+	const handleSliderChange = (slider: HTMLInputElement) => {
+		const div = slider.parentNode as HTMLDivElement;
+		const spanVal = div.querySelector('.js-val') as HTMLSpanElement;
+		const value = Number.isInteger(slider.valueAsNumber)
+			? slider.valueAsNumber
+			: Number(slider.valueAsNumber.toFixed(2))
+		;
+		spanVal.innerText = value.toString();
+		const min = Number(slider.getAttribute('min'));
+		const max = Number(slider.getAttribute('max'));
+		if (value < min + (max - min) / 3) {
+			spanVal.className = "js-val green";
+		} else if (value < min + 2 * (max - min) / 3) {
+			spanVal.className = "js-val orange";
+		} else {
+			spanVal.className = "js-val red";
+		}
+	};
+	const sliders = Array.from(
+		document.querySelectorAll('.decoder-settings input.slider')
+	) as HTMLInputElement[];
+	for (const slider of sliders) {
+		handleSliderChange(slider);
+		slider.addEventListener('input', () => {
+			handleSliderChange(slider);
+		});
+	}
+	const gauge = document.querySelector('div.gauge') as HTMLDivElement;
+	gauge.addEventListener('click', () => {
+		gauge.classList.toggle('active');
+	});
+	/**
+	 * Chat input
+	 */
+	const form  = document.querySelector('form.js-form') as HTMLFormElement;
+	const input = document.querySelector('input.input-message') as HTMLInputElement;
+	form.addEventListener('submit', async (evt) => {
+		evt.preventDefault();
+		document.querySelector<HTMLDivElement>('.placeholder-start')!.style.display = 'none';
+		const content = input.value;
+		if (content.trim() === "") {
+			c.debug(`Empty input`);
+			return ;
+		}
+		input.value = "";
+		const um: Message = {
+			incoming: false,
+			content: content,
+		};
+		Markup.append(um);
+		const o = await Api.shared.postWithSettings({ text: content }, {
+			context: App.messages,
+			persona: App.persona.text,
+		});
+		c.log(o);
+		// c.log(o.attention[0]);
+		// c.log(o.attention[1]);
+		// c.log(o.attention[2]);
+		App.messages.push(um);
+		/// ^^ not before the API call because it shouldn't be included in context.
+		/**
+		 * Visualize Attention
+		 */
+		// for (const [idx, [token, att]] of o.attention[0].entries()) {
+		// 	if (att === 0) {
+		// 		continue;
+		// 	}
+		// 	const span = document.querySelector(`.persona span[data-idx="${idx}"]`);
+		// 	if (!span) {
+		// 		c.error(`span not found`);
+		// 		return ;
+		// 	}
+		// 	span.className = `attention-level level${ Markup.attentionThreshold(att) }`;
+		// }
+		//////
+		const m: Message = {
+			incoming: true,
+			content: o.text,
+		};
+		App.messages.push(m);
+		Markup.append(m);
+		/// Finally, launch an auto-complete:
+		loadSuggestion();
+	});
+	/**
+	 * Suggestion box
+	 */
+	const loadSuggestion = async () => {
+		const spanLoading = document.querySelector('.chat-suggestion .js-loading') as HTMLSpanElement;
+		spanLoading.classList.remove('hide');
+		App.linkSuggest.classList.add('hide');
+		const o = await Api.shared.postWithSettings({ completion: "" }, {
+			context: App.messages,
+			persona: App.persona.text,
+		});
+		c.log(o);
+		App.linkSuggest.innerText = o.text;
+		spanLoading.classList.add('hide');
+		App.linkSuggest.classList.remove('hide');
+	};
+	loadSuggestion();
+	App.linkSuggest.addEventListener('click', async (evt) => {
+		evt.preventDefault();
+		App.linkSuggest.classList.add('hide');
+		input.value = App.linkSuggest.innerText;
+		await Utils.delay(500);
+		const sendBtn = form.querySelector('button.input-button') as HTMLButtonElement;
+		sendBtn.click();
+		/// ^^ do not do `form.submit()` as we want to trigger our handler.
+	});
+});

front/js-src/lib/Log.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ const c = console;

front/js-src/lib/Utils.ts ADDED Viewed

	@@ -0,0 +1,69 @@

+class Utils {
+	private static escapeMap = {
+		/// From underscore.js
+		'&': '&amp;',
+		'<': '&lt;',
+		'>': '&gt;',
+		'"': '&quot;',
+		"'": '&#x27;',
+		'`': '&#x60;'
+	};
+	/**
+	 * Escape a message's content for insertion into html.
+	 */
+	static escape(s: string): string {
+		let x = s;
+		for (const [k, v] of Object.entries(this.escapeMap)) {
+			x = x.replace(new RegExp(k, 'g'), v);
+		}
+		return x.replace(/\n/g, '<br>');
+	}
+	/**
+	 * Opposite of escape.
+	 */
+	static unescape(s: string): string {
+		let x = s.replace(/<br>/g, '\n');
+		for (const [k, v] of Object.entries(this.escapeMap)) {
+			x = x.replace(new RegExp(v, 'g'), k);
+		}
+		return x;
+	}
+	/**
+	 * "Real" modulo (always >= 0), not remainder.
+	 */
+	static mod(a: number, n: number): number {
+		return ((a % n) + n) % n;
+	}
+	/**
+	 * Noop object with arbitrary number of nested attributes that are also noop.
+	 */
+	static deepNoop() {
+		const noop = new Proxy(() => {}, {
+			get: () => noop
+		});
+		return noop;
+	}
+	/**
+	 * Capitalize
+	 */
+	static capitalize(s: string): string {
+		return s.charAt(0).toUpperCase() + s.slice(1);
+	}
+	/**
+	 * Returns a promise that will resolve after the specified time
+	 * @param ms Number of ms to wait
+	 */
+	static delay(ms: number): Promise<void> {
+		return new Promise((resolve, reject) => {
+			setTimeout(() => resolve(), ms);
+		});
+	}
+}

front/less/mixins/bfc.less ADDED Viewed

	@@ -0,0 +1,3 @@

+.bfc {
+	overflow: hidden;
+}

front/less/mixins/clearfix.less ADDED Viewed

	@@ -0,0 +1,10 @@

+.clearfix {
+	&:before,
+	&:after {
+		content: " ";
+		display: table;
+	}
+	&:after {
+		clear: both;
+	}
+}

front/less/mixins/user-select.less ADDED Viewed

	@@ -0,0 +1,6 @@

+.user-select(@select) {
+  -webkit-user-select: @select;
+     -moz-user-select: @select;
+      -ms-user-select: @select; // IE10+
+          user-select: @select;
+}

front/less/style.less ADDED Viewed

	@@ -0,0 +1,271 @@

+@import (less) "../node_modules/normalize.css/normalize.css";
+@import "mixins/bfc.less";
+@import "mixins/clearfix.less";
+@import "mixins/user-select.less";
+@import "variables.less";
+@blueText:        #3B48F6;
+@containerWidth:  600px;
+.clearfix {
+	.clearfix();
+}
+.hide { display: none !important; }
+body {
+	font-family: @fontSans;
+	font-size: 16px;
+	line-height: 1.4;
+	color: #333;
+	-webkit-font-smoothing: antialiased;
+}
+input {
+	color: #333;
+}
+a:link {
+	color: @blueText;
+}
+button.input-button {
+	color: @blueText;
+	outline: none;
+	background: transparent;
+	border: none;
+	height: 32px;
+	cursor: pointer;
+	.user-select(none);
+}
+.container {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: @containerWidth;
+}
+div.header {
+	background-image: linear-gradient(270deg, #BEFF00 0%, #FFCF00 100%);
+	padding: 16px 0;
+	.header-container {
+		.clearfix();
+		max-width: 80%;
+		margin: auto;
+		.title {
+			font-weight: bold;
+			font-size: 20px;
+			line-height: 24px;
+			float: left;
+		}
+		.links {
+			float: right;
+			img {
+				margin-left: 14px;
+			}
+			a:hover {
+				opacity: 0.8;
+			}
+		}
+	}
+}
+div.subheader {
+	background-color: #F6F6F6;
+	padding-top: 10px;
+	padding-bottom: 2px;
+	.box {
+		.clearfix();
+		margin: 18px 0;
+	}
+	.box1 {
+		margin-bottom: 8px;
+	}
+	.title {
+		float: left;
+		font-weight: bold;
+		margin-bottom: 10px;
+	}
+	div.links {
+		float: left;
+		a {
+			margin-left: 28px;
+			text-decoration: none;
+			color: @blueText;
+			img {
+				vertical-align: sub;
+				height: 20px;
+				margin-left: 4px;
+			}
+			&:hover {
+				opacity: 0.8;
+			}
+		}
+	}
+	.gauge {
+		.clearfix();
+		padding: 14px 0;
+		cursor: pointer;
+		.gauge-el-wrapper {
+			position: relative;
+			box-sizing: border-box;
+			float: left;
+			width: 33.33%;
+			padding-right: 6px;
+			&:nth-child(1) .gauge-el {
+				background-image: linear-gradient(90deg, #FF2300 0%, #FF7E00 100%);
+			}
+			&:nth-child(2) .gauge-el {
+				background-color: orange;
+			}
+			&:nth-child(3) .gauge-el {
+				background-image: linear-gradient(90deg, #FFCF00 0%, #BEFF00 100%);
+			}
+		}
+		.gauge-el {
+			height: 5px;
+			border-radius: 10px;
+			background-color: red;
+		}
+		.legend {
+			font-size: 11px;
+			font-weight: bold;
+			position: absolute;
+			transition: all 0.2s ease;
+			top: 0px;
+			opacity: 0;
+		}
+		&:hover, &.active {
+			.legend {
+				top: 10px;
+				opacity: 1;
+			}
+		}
+	}
+}
+div.decoder-settings {
+	background-color: #ececec;
+	position: fixed;
+	bottom: 0;
+	width: 140px;
+	padding: 2px 6px;
+	.title {
+		font-size: 11px;
+	}
+	.setting {
+		.desc {
+			font-size: 11px;
+			font-weight: bold;
+		}
+		.js-val {
+			margin-left: 3px;
+			&.green  { color: rgb(109, 144, 6); }
+			&.orange { color: #FF7E00; }
+			&.red    { color: red; }
+		}
+	}
+	.slider {
+		width: 100%;
+	}
+}
+div.chat-container {
+	position: relative;
+	.messages-gradient {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 30px;
+		background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%);
+	}
+	.placeholder-start {
+		position: absolute;
+		top: 100px;
+		left: 0; right: 0;
+		.inner {
+			width: 260px;
+			margin: auto;
+			text-align: center;
+			font-size: 14px;
+			color: #777777;
+		}
+	}
+	.messages {
+		height: 200px;
+		overflow: auto;
+		.message {
+			.clearfix();
+			margin-top: 12px;
+			&.incoming .message-inner {
+				background-color: white;
+				border: 1px solid #ccc;
+				float: left;
+			}
+			&.outgoing .message-inner {
+				background-color: #f1f0f0;
+				float: right;
+			}
+		}
+		.message-inner {
+			border-radius: 14px;
+			padding: 6px 14px;
+			&.typing-indicator {
+				padding: 8px;
+			}
+			img.typing-indicator {
+				width: 32px;
+			}
+		}
+	}
+}
+div.chat-input {
+	margin-top: 20px;
+	padding: 12px 20px;
+	border: 1px solid #a7a7a7;
+	border-radius: 6px;
+	box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.2);
+	.input-wrapper {
+		.clearfix();
+		position: relative;
+		width: 100%;
+		.input-message-wrapper {
+			position: absolute;
+			left: 0;
+			right: 50px;
+			input.input-message {
+				width: 100%;
+				outline: none;
+				border: none;
+				height: 32px;
+				padding: 0;
+				background-color: transparent;
+			}
+		}
+		button.input-button {
+			float: right;
+		}
+	}
+}
+div.chat-suggestion {
+	margin-top: 8px;
+	margin-bottom: 10px;
+	font-size: 14px;
+	color: #777777;
+	.js-loading {
+		font-size: 12px;
+	}
+}
+span.attention-level {
+	background-color: rgba(0, 0, 0, 0.4);
+	&.level0 { background-color: #FF2300; }
+	&.level1 { background-color: #FF7E00; }
+	&.level2 { background-color: orange; }
+	&.level3 { background-color: #FFCF00; }
+	&.level4 { background-color: #BEFF00; }
+}

front/less/variables.less ADDED Viewed

	@@ -0,0 +1,3 @@


1	+
2	+ @fontSans: 'IBM Plex Sans', sans-serif;
3	+ @fontMonospace: 'IBM Plex Mono', monospace;

front/less/zGeneral.less ADDED Viewed

	@@ -0,0 +1,21 @@

+// Filename starts with a z to keep things in order.
+@import "variables.less";
+code, pre, div.pre {
+	background-color: rgba(0,0,0,0.04);
+	border-radius: 3px;
+	padding: 2px 6px;
+	font-family: @fontMonospace;
+	font-size: 12px;
+}
+div.pre {
+	span.value {
+		white-space: pre;
+		color: #840a6e;
+		&.string  { color: #000; }
+		&.boolean { color: #0086b3; }
+		&.number  { color: #40a070; }
+	}
+}

front/package-lock.json ADDED Viewed

	@@ -0,0 +1,13 @@

+{
+  "name": "foobar-front",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    }
+  }
+}

front/package.json ADDED Viewed

	@@ -0,0 +1,15 @@

+{
+  "name": "foobar-front",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "normalize.css": "^8.0.1"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

front/tsconfig.json ADDED Viewed

	@@ -0,0 +1,10 @@

+{
+	"compilerOptions": {
+		"target": "es2018",
+		"outFile": "dist/script.js",
+		"sourceMap": false,
+		"strictNullChecks": true,
+		"strictBindCallApply": true,
+		"lib": ["dom", "es6", "es2016", "es2017", "es2018", "esnext"]
+	}
+}