Spaces:

banana-projects
/

convai

Running

App Files Files Community

Julien Chaumond commited on May 8, 2019

Commit

e246102

1 Parent(s): 1909611

Feedback from @thomwolf , @victorsanh et. al.

Browse files

Files changed (6) hide show

front/assets/Icon-info.svg +9 -0
front/assets/thumbnail-large.png +0 -0
front/favicon.ico +0 -0
front/index.html +15 -8
front/js-src/controller.ts +41 -6
front/less/style.less +31 -2

front/assets/Icon-info.svg ADDED Viewed

front/assets/thumbnail-large.png ADDED Viewed

front/favicon.ico ADDED Viewed

front/index.html CHANGED Viewed

@@ -2,10 +2,14 @@
 <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">
@@ -14,7 +18,7 @@
 				🦄 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>
@@ -34,10 +38,10 @@
 			</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">
@@ -76,24 +80,27 @@
 	<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>

 <html>
 <head>
 	<meta charset="utf-8">
+	<title>Hugging Face – ConvAI</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">
+	<meta property="og:url"    content="https://convai.huggingface.co/">
+	<meta property="og:image"  content="https://convai.huggingface.co/assets/thumbnail-large.png">
+	<meta property="fb:app_id" content="1321688464574422">
+	<meta name="description"   content="🦄 How to build a State-of-the-Art Conversational AI with Transfer Learning">
 </head>
 <body>
 	<div class="header">
 				🦄 How to build a State-of-the-Art Conversational AI with Transfer Learning
 			</div>
 			<div class="links">
+				<a target="_blank" href="https://medium.com/huggingface/how-to-build-a-state-of-the-art-conversational-ai-with-transfer-learning-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="box box1">
 				<div class="clearfix">
+					<div class="title">Start chatting</div>
 				</div>
 				<div class="description">
+					The machine learning model created a consistent persona based on
 					these few lines of bio. You can now chat with this persona below.
 				</div>
 				<div class="gauge">
 	<div class="decoder-settings">
+		<div class="title">
+			Decoder settings
+			<a target="_blank" href="https://medium.com/huggingface/how-to-build-a-state-of-the-art-conversational-ai-with-transfer-learning-2d818ac26313#79c5"><img src="/assets/Icon-info.svg"></a>
+		</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="200" step="1" value="0">
 		</div>
 		<div class="setting">
 			<div class="desc">
 				<span>Top-p</span><span class="js-val"></span>
 			</div>
+			<input class="slider js-inverted" 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="2" step="any" value="0.6">
 		</div>
 	</div>

front/js-src/controller.ts CHANGED Viewed

@@ -4,9 +4,13 @@ const App = {
 		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', () => {
@@ -45,7 +49,7 @@ document.addEventListener('DOMContentLoaded', () => {
 		App.persona = await Api.shared.getShuffle();
 		tokenizePersona();
 		history.replaceState(null, "", `/persona/${App.persona.slug}`);
-		/// Also reset messages.
 		App.messages = [];
 		App.messagesRoot.innerHTML = "";
 		loadSuggestion();
@@ -77,11 +81,18 @@ document.addEventListener('DOMContentLoaded', () => {
 		} 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);
@@ -90,8 +101,32 @@ document.addEventListener('DOMContentLoaded', () => {
 	const gauge = document.querySelector('div.gauge') as HTMLDivElement;
 	gauge.addEventListener('click', () => {
-		gauge.classList.toggle('active');
 	});
 	/**
 	 * Chat input

 		text: "",
 	},
 	messages: [] as Message[],
+	/// HTMLElements
 	messagesRoot: document.querySelector('div.messages') as HTMLDivElement,
 	divPersona:   document.querySelector('div.persona') as HTMLDivElement,
 	linkSuggest:  document.querySelector('.chat-suggestion .js-suggestion') as HTMLLinkElement,
+	sliders:      Array.from(
+		document.querySelectorAll('.decoder-settings input.slider')
+	) as HTMLInputElement[],
 };
 document.addEventListener('DOMContentLoaded', () => {
 		App.persona = await Api.shared.getShuffle();
 		tokenizePersona();
 		history.replaceState(null, "", `/persona/${App.persona.slug}`);
+		/// Also reset messages and reload suggestion.
 		App.messages = [];
 		App.messagesRoot.innerHTML = "";
 		loadSuggestion();
 		} else {
 			spanVal.className = "js-val red";
 		}
+		const isInverted = slider.classList.contains('js-inverted');
+		if (isInverted) {
+			if (spanVal.classList.contains('green')) {
+				spanVal.classList.remove('green');
+				spanVal.classList.add('red');
+			} else if (spanVal.classList.contains('red')) {
+				spanVal.classList.remove('red');
+				spanVal.classList.add('green');
+			}
+		}
 	};
+	for (const slider of App.sliders) {
 		handleSliderChange(slider);
 		slider.addEventListener('input', () => {
 			handleSliderChange(slider);
 	const gauge = document.querySelector('div.gauge') as HTMLDivElement;
 	gauge.addEventListener('click', () => {
+		gauge.classList.add('active');
 	});
+	const gaugeEls = Array.from(
+		document.querySelectorAll('.gauge .gauge-el-wrapper')
+	);
+	for (const gaugeEl of gaugeEls) {
+		gaugeEl.addEventListener('click', () => {
+			const i = gaugeEls.indexOf(gaugeEl);
+			if (i === 0) {
+				App.sliders[0].value = `180`;
+				App.sliders[1].value = `0.1`;
+				App.sliders[2].value = `1.9`;
+			} else if (i === 1) {
+				App.sliders[0].value = `70`;
+				App.sliders[1].value = `0.5`;
+				App.sliders[2].value = `1.2`;
+			} else {
+				App.sliders[0].value = `0`;
+				App.sliders[1].value = `0.9`;
+				App.sliders[2].value = `0.6`;
+			}
+			for (const slider of App.sliders) {
+				handleSliderChange(slider);
+			}
+		});
+	}
 	/**
 	 * Chat input

front/less/style.less CHANGED Viewed

@@ -106,8 +106,8 @@ div.subheader {
 	.gauge {
 		.clearfix();
 		padding: 14px 0;
-		cursor: pointer;
 		.gauge-el-wrapper {
 			position: relative;
 			box-sizing: border-box;
 			float: left;
@@ -129,6 +129,7 @@ div.subheader {
 			background-color: red;
 		}
 		.legend {
 			font-size: 11px;
 			font-weight: bold;
 			position: absolute;
@@ -153,6 +154,14 @@ div.decoder-settings {
 	padding: 2px 6px;
 	.title {
 		font-size: 11px;
 	}
 	.setting {
 		.desc {
@@ -183,7 +192,7 @@ div.chat-container {
 	}
 	.placeholder-start {
 		position: absolute;
-		top: 100px;
 		left: 0; right: 0;
 		.inner {
 			width: 260px;
@@ -269,3 +278,23 @@ span.attention-level {
 	&.level3 { background-color: #FFCF00; }
 	&.level4 { background-color: #BEFF00; }
 }

 	.gauge {
 		.clearfix();
 		padding: 14px 0;
 		.gauge-el-wrapper {
+			cursor: pointer;
 			position: relative;
 			box-sizing: border-box;
 			float: left;
 			background-color: red;
 		}
 		.legend {
+			.user-select(none);
 			font-size: 11px;
 			font-weight: bold;
 			position: absolute;
 	padding: 2px 6px;
 	.title {
 		font-size: 11px;
+		img {
+			margin-left: 4px;
+			vertical-align: middle;
+			opacity: 0.5;
+			&:hover {
+				opacity: 0.8;
+			}
+		}
 	}
 	.setting {
 		.desc {
 	}
 	.placeholder-start {
 		position: absolute;
+		top: 45%;
 		left: 0; right: 0;
 		.inner {
 			width: 260px;
 	&.level3 { background-color: #FFCF00; }
 	&.level4 { background-color: #BEFF00; }
 }
+/**
+ * Media queries
+ */
+@media (max-width: 630px) {
+	div.decoder-settings {
+		position: static;
+		margin-top: 32px;
+		width: initial;
+	}
+}
+@media (min-height: 800px) {
+	/// would probably be way better with css variables
+	div.chat-container .messages {
+		height: 300px;
+	}
+}