add first commit

.gitattributes

@@ -32,3 +32,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,27 @@
+# Use the official Python 3.9 image
+FROM python:3.9
+
+# Set the working directory to /code
+WORKDIR /code
+
+# Copy the current directory contents into the container at /code
+COPY ./requirements.txt /code/requirements.txt
+
+# Install requirements.txt 
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+# Switch to the "user" user
+USER user
+# Set home to the user's home directory
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . $HOME/app
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

main.py

@@ -0,0 +1,13 @@
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+
+
+app = FastAPI()
+
+
+app.mount("/", StaticFiles(directory="static", html=True), name="static")
+
+@app.get("/")
+def index() -> FileResponse:
+    return FileResponse(path="/app/static/index.html", media_type="text/html")

requirements.txt

@@ -0,0 +1,4 @@
+fastapi==0.74.*
+requests==2.27.*
+uvicorn[standard]==0.17.*
+

static/css/chatbot.css

@@ -0,0 +1,629 @@
+* { margin: 0; padding: 0; }
+body {
+	background: #f0f1f2;
+	font:12px "Helvetica Neue", Impact, sans-serif;
+}
+#view-code{
+  color:#89a2b5;
+  opacity:0.7;
+  font-size:14px;
+  text-transform:uppercase;
+  font-weight:700;
+  text-decoration:none;
+  position:absolute;top:660px;
+  left:50%;margin-left:-50px;
+  z-index:200;
+}
+#view-code:hover{opacity:1;}
+#chatbox{
+	width:290px;
+	background:#fff;
+	border-radius:6px;
+	overflow:hidden;
+	height:484px;
+	position:absolute;
+	top:100px;
+	left:50%;
+	margin-left:-155px;
+	box-shadow: 2px 2px 15px rgb(50 50 50 / 10%)
+}
+
+#friendslist{
+	position:absolute;
+	top:0;
+	left:0;
+	width:290px;
+	height:484px;
+	display: block;
+}
+#topmenu{
+	height:69px;
+	width:290px;
+	border-bottom:1px solid #d8dfe3;
+}
+#topmenu span{
+	float:left;
+	width: 96px;
+    height: 70px;
+    background: url("https://static.ai-research.id/images/top-menu.png") -3px -118px no-repeat;
+}
+#topmenu span.friends{margin-bottom:-1px;}
+#topmenu span.chats{background-position:-95px 25px; cursor:pointer;}
+#topmenu span.chats:hover{background-position:-95px -46px; cursor:pointer;}
+#topmenu span.history{background-position:-190px 24px; cursor:pointer;}
+#topmenu span.history:hover{background-position:-190px -47px; cursor:pointer;}
+.friend{
+	height:70px;
+	border-bottom:1px solid #e7ebee;
+	position:relative;
+}
+.friend:hover{
+	background:#f1f4f6;
+	cursor:pointer;
+}
+.friend img{
+	width:40px;
+	border-radius:50%;
+	margin:15px;
+	float:left;
+}
+.floatingImg{
+	width:40px;
+	border-radius:50%;
+	position:absolute;
+	top:0;
+	left:12px;
+	border:3px solid #fff;
+}
+.friend p{
+	padding:15px 0 0 0;
+	float:left;
+	width:220px;
+}
+.friend p strong{
+	display: block;
+	font-weight:600;
+	font-size:15px;
+	color:#597a96;
+
+}
+.friend p span{
+	display: block;
+	font-size:13px;
+	font-weight:400;
+	color:#aab8c2;
+}
+.friend .status{
+	background:#26c281;
+	border-radius:50%;
+	width:9px;
+	height:9px;
+	position:absolute;
+	top:31px;
+	right:17px;
+}
+.friend .status.away{background:#ffce54;}
+.friend .status.inactive{background:#eaeef0;}
+#search{
+	background:#e3e9ed url("https://static.ai-research.id/images/search.png") -11px 0 no-repeat;
+	height:60px;
+	width:290px;
+	position:absolute;
+	bottom:0;
+	left:0;
+}
+#searchfield{
+	background:#e3e9ed;
+	margin:21px 0 0 55px;
+	border:none;
+	padding:0;
+	font-size:14px;
+	font-family:"Helvetica Neue", Impact, sans-serif;
+	font-weight:normal;
+	color:#8198ac;
+}
+#searchfield:focus{
+	 outline: 0;
+}
+#chatview{
+	width:290px;
+	height:484px;
+	position:absolute;
+	top:0;
+	left:0;
+	display:none;
+	background:#fff;
+}
+#profile{
+	height:153px;
+	overflow:hidden;
+	text-align:left;
+	color:#fff;
+}
+.p1 #profile{
+	background:#fff url("https://static.ai-research.id/images/flower.jpg") 0 0 no-repeat;
+	background-size: 300px 210px;
+}
+#profile .avatar{
+	width:68px;
+	border:3px solid #fff;
+	margin:23px 0 0;
+	border-radius:50%;
+}
+#profile  p{
+	font-weight:600;
+	font-size:15px;
+	margin:118px 0 -1px 15px;
+	opacity:0;
+	-webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+	   -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+	     -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+	        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+}
+#profile  p.animate{
+	margin-top:97px;
+	opacity:1;
+	-webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+	   -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+	     -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+	        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+}
+#profile  span{
+	font-weight:400;
+	font-size:11px;
+	margin: 0 0 0 15px;
+}
+#friends .persona_id {
+	display: none;
+}
+#chat-block {
+	height: 290px;
+	overflow: auto;
+	background: rgb(248,251,255);
+}
+.chat_messages{
+	opacity:0;
+	margin-top:30px;
+	width:290px;
+	overflow-y:scroll;
+	overflow-x:hidden;
+	padding-right: 20px;
+	-webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+	   -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+	     -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+	        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
+}
+#chat-block .animate{
+	opacity:1;
+	margin-top:0;
+}
+#chat-block label{
+	color:#aab8c2;
+	font-weight:600;
+	font-size:12px;
+	text-align:center;
+	margin:15px 0;
+	width:290px;
+	display:block;
+}
+#chat-block div.message{
+	padding:10px 0 10px 48px;
+	clear:both;
+	margin:0 10px 0 0;
+}
+#chat-block div.message.right{
+	  padding: 10px 65px 10px 0;
+	  margin-right: -19px;
+	  margin-left: 19px;
+}
+#chat-block .message img{
+	  float: left;
+	  margin-left: -38px;
+	  border-radius: 50%;
+	  width: 30px;
+	  margin-top: 10px;
+}
+#chat-block div.message.right img{
+	float: right;
+    margin-left: 0;
+	margin-right: -38px;
+}
+.message .bubble{
+	background:#e0e7f4;
+	font-size:13px;
+	font-weight:600;
+	padding:8px 8px;
+	border-radius:5px 5px 5px 0;
+	color:#8495a3;
+	position:relative;
+	float:left;
+}
+#chat-block div.message.right .bubble{
+	float:right;
+	border-radius:5px 5px 0 5px ;
+	background: #e0f4e7;
+}
+.bubble .corner{
+	background:url("https://static.ai-research.id/images/bubble-corner.png") 0 0 no-repeat;
+	position:absolute;
+	width:7px;
+	height:7px;
+	left:-5px;
+	bottom:0;
+}
+div.message.right .corner{
+	background:url("https://static.ai-research.id/images/bubble-cornerR.png") 0 0 no-repeat;
+	left:auto;
+	right:-5px;
+}
+.bubble span{
+	  color: #aab8c2;
+	  font-size: 11px;
+	  position: absolute;
+	  right: 0;
+	  bottom: -22px;
+}
+#sendmessage{
+	height:40px;
+	border-top:1px solid #e7ebee;
+	position:absolute;
+	bottom:0;
+	right:0;
+	width:290px;
+	background:#fff;
+	padding-bottom:0;
+}
+#sendmessage input{
+	background:#fff;
+	margin:8px 0 0 10px;
+	border:none;
+	padding:0;
+	font-size:14px;
+	font-family:"Helvetica Neue", Impact, sans-serif;
+	font-weight:normal;
+	color:#aab8c2;
+	width: 250px;
+}
+#sendmessage input:focus{
+	 outline: 0;
+}
+#sendmessage button{
+	background:#fff url("https://static.ai-research.id/images/send.png") 0 -41px no-repeat;
+	width:30px;
+	height:30px;
+	position:absolute;
+	right: 0;
+	top: 14px;
+	border:none;
+}
+#sendmessage button:hover{
+	cursor:pointer;
+	background-position: 0 0 ;
+}
+#sendmessage button:focus{
+	 outline: 0;
+}
+
+#close{
+	position:absolute;
+	top: 8px;
+	opacity:0.8;
+	right: 15px;
+	width:20px;
+	height:20px;
+	cursor:pointer;
+	display: block;
+}
+#close:hover{
+	opacity:1;
+}
+#personalities{
+	position:absolute;
+	top: 110px;
+	opacity:0.8;
+	right: 95px;
+	width:20px;
+	height:20px;
+	cursor:pointer;
+	display: block;
+}
+#personalities:hover{
+	opacity:1;
+}
+#parameters{
+	position:absolute;
+	top: 110px;
+	opacity:0.8;
+	right: 55px;
+	width:20px;
+	height:20px;
+	cursor:pointer;
+	display: block;
+}
+#parameters:hover{
+	opacity:1;
+}
+#about{
+	position:absolute;
+	top: 110px;
+	opacity:0.8;
+	right: 15px;
+	width:20px;
+	height:20px;
+	cursor:pointer;
+	display: block;
+}
+#about:hover{
+	opacity:1;
+}
+.cx, .cy{
+	background:#fff;
+	position:absolute;
+	width:0;
+	top:15px;
+	right:15px;
+	height:3px;
+	-webkit-transition: all 250ms ease-in-out;
+	   -moz-transition: all 250ms ease-in-out;
+		 -o-transition: all 250ms ease-in-out;
+			transition: all 250ms ease-in-out;
+}
+.cx.s1, .cy.s1{
+	right:0;
+	width:20px;
+	-webkit-transition: all 100ms ease-out;
+	   -moz-transition: all 100ms ease-out;
+		 -o-transition: all 100ms ease-out;
+			transition: all 100ms ease-out;
+}
+.cy.s2{
+	-ms-transform: rotate(50deg);
+	-webkit-transform: rotate(50deg);
+	transform: rotate(50deg);
+	-webkit-transition: all 100ms ease-out;
+	   -moz-transition: all 100ms ease-out;
+		 -o-transition: all 100ms ease-out;
+			transition: all 100ms ease-out;
+}
+.cy.s3{
+	-ms-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	transform: rotate(45deg);
+	-webkit-transition: all 100ms ease-out;
+	   -moz-transition: all 100ms ease-out;
+		 -o-transition: all 100ms ease-out;
+			transition: all 100ms ease-out;
+}
+.cx.s1{
+	right:0;
+	width:20px;
+	-webkit-transition: all 100ms ease-out;
+	   -moz-transition: all 100ms ease-out;
+		 -o-transition: all 100ms ease-out;
+			transition: all 100ms ease-out;
+}
+.cx.s2{
+	-ms-transform: rotate(140deg);
+	-webkit-transform: rotate(140deg);
+	transform: rotate(140deg);
+	-webkit-transition: all 100ms ease-out;
+	   -moz-transition: all 100ms ease-out;
+		 -o-transition: all 100ms ease-out;
+			transition: all 100ms ease-out;
+}
+.cx.s3{
+	-ms-transform: rotate(135deg);
+	-webkit-transform: rotate(135deg);
+	transform: rotate(135deg);
+	-webkit-transition: all 100ms ease-out;
+	   -moz-transition: all 100ms ease-out;
+		 -o-transition: all 100ms ease-out;
+			transition: all 100ms ease-out;
+}
+#chatview, #sendmessage {
+overflow:hidden;
+border-radius:6px;
+}
+
+.col-3 {
+	float: left;
+	position: relative;
+	margin: 10px;
+}
+input[type="text"] {
+	font: 15px/24px "Helvetica Neue", Impact, sans-serif;
+	color: #333;
+	width: 100%;
+	box-sizing: border-box;
+	letter-spacing: 1px;
+}
+
+#config-block {
+	color: rgb(50, 100, 50);
+	height: 100%;
+	/*background: linear-gradient(0deg, rgba(186,183,226,1) 1%, rgba(255,213,198,1) 100%);*/
+	/*
+	background: rgb(251,255,248);
+	background: linear-gradient(135deg, rgba(251,255,248,1) 1%, rgba(107,235,131,1) 100%);
+	*/
+	background: rgb(248,251,255);
+	background: linear-gradient(135deg, rgba(248,251,255,1) 1%, rgba(107,160,235,1) 100%);
+}
+
+#config-block input {
+	color: rgb(50, 100, 50);
+	font: 14px/24px "Helvetica Neue", Impact, sans-serif;
+	padding: 0 5px 0 5px;
+}
+
+#config-block button {
+	color: rgb(50, 100, 50);
+	padding: 4px 8px;
+}
+
+#config-block > div {
+	display: none;
+}
+
+#photo-block {
+	display: none;
+}
+
+#photo-block img {
+	position:absolute;
+	top: 80px;
+	width: 210px;
+	left: 35px;
+	z-index: 10;
+	border-radius:50%;
+	border:5px solid #fff;
+}
+#personalities_view, #parameters_view, #about_view {
+	padding: 10px 10px 0 10px;
+}
+
+#server_view {
+	position: absolute;
+	bottom: 8px;
+	padding: 0 10px;
+}
+
+#personalities_view div, #personalities_view h3, #parameters_view div, #parameters_view h3 {
+	margin-bottom: 5px;
+}
+#personalities_view .input {
+	 -webkit-box-shadow: 2px 2px 10px 2px rgba(100,100,100,0.45);
+	 box-shadow: 2px 2px 2px 2px rgba(100,100,100,0.2);
+ }
+
+#personalities_button, #parameters_button{
+	margin: 10px 0;
+}
+
+#parameters_view #doSample {
+	display: inline;
+	width: 30px;
+}
+
+#parameters_view input {
+	display: block;
+	margin-left: 10px;
+	width: 95%;
+}
+
+#about_button {
+	position:absolute;
+	bottom:20px;
+	left:42%;
+}
+#about_view {
+	font-family: "Helvetica Neue", Impact, sans-serif;
+	font-size: 1.1em;
+	text-align: center;
+	margin: 0 0 0 0;
+	clear: both;
+	height: 100%;
+}
+
+#about_view h3 {
+	text-shadow: 3px 3px 5px rgb(150, 150, 150);
+	letter-spacing: 0.02em;
+	text-transform: uppercase;
+	text-align: center;
+	font-size: 1.5em;
+	margin: 0 0 20px 0;
+}
+
+#about_view div {
+	margin: 0 0 5px 0;
+}
+
+#about_view div div {
+	margin: 0 0 15px 0;
+}
+#about_view a {
+	color: rgb(50, 100, 50);
+	font-weight: bold;
+}
+#about_view span {
+	display: block;
+}
+/** Fontawesome **/
+
+.list-unstyled {
+	padding-left: 0;
+	list-style: none;
+}
+.list-inline li {
+	display: inline-block;
+	padding-right: 5px;
+	padding-left: 5px;
+	margin-bottom: 10px;
+}
+/*---- Genral classes end -------*/
+
+/*Change icons size here*/
+.social-icons .fas {
+	font-size: 1.5em;
+}
+/*Change icons circle size and color here*/
+.social-icons .fas {
+	width: 35px;
+	height: 35px;
+	line-height: 35px;
+	text-align: center;
+	color: rgba(100, 255, 100, 0.99);
+	-webkit-transition: all 0.3s ease-in-out;
+	-moz-transition: all 0.3s ease-in-out;
+	-ms-transition: all 0.3s ease-in-out;
+	-o-transition: all 0.3s ease-in-out;
+	transition: all 0.3s ease-in-out;
+}
+
+.social-icons.icon-circle .fas {
+	border-radius: 50%;
+}
+.social-icons.icon-rounded .fas {
+	border-radius:5px;
+}
+.social-icons.icon-flat .fas {
+	border-radius: 0;
+}
+
+.social-icons .fas:hover, .social-icons .fas:active {
+	color: rgba(250, 250, 120, 0.99);
+	-webkit-box-shadow: 1px 1px 3px #333;
+	-moz-box-shadow: 1px 1px 3px #333;
+	box-shadow: 1px 1px 3px #333;
+}
+.social-icons.icon-zoom .fas:hover, .social-icons.icon-zoom .fas:active {
+	-webkit-transform: scale(1.5);
+	-moz-transform: scale(1.5);
+	-ms-transform: scale(1.5);
+	-o-transform: scale(1.5);
+	transform: scale(1.5);
+}
+.social-icons.icon-rotate .fas:hover, .social-icons.icon-rotate .fas:active {
+	-webkit-transform: scale(1.1) rotateY(180deg);
+	-moz-transform: scale(1.1) rotateY(180deg);
+	-ms-transform: scale(1.1) rotateY(180deg);
+	-o-transform: scale(1.1) rotateY(180deg);
+	transform: scale(1.1) rotateY(180deg);
+}
+
+.social-icons .fa-address-card {
+	color: rgba(250, 250, 250, 0.99);
+	background-color:#aeb5c5;
+}
+.social-icons .fa-sliders {
+	color: rgba(250, 250, 250, 0.99);
+	background-color:#aeb5c5;
+}
+.social-icons .fa-info {
+	color: rgba(250, 250, 250, 0.99);
+	background-color:#aeb5c5;
+}
+.social-icons .fa-house-chimney {
+	color: rgba(250, 250, 250, 0.99);
+	background-color:#aeb5c5;
+}

static/index.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>GPT2 Persona Chatbot</title>
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css">
+  <link rel="stylesheet" href="css/chatbot.css">
+</head>
+
+<body onload="pageSetup();">
+  <div id="chatbox">
+    <div id="friendslist">
+      <div id="topmenu">
+        <span class="friends"></span>
+        <span class="chats"></span>
+        <span class="history"></span>
+      </div>
+
+      <div id="friends">
+      </div>
+
+      <div id="search">
+        <input type="text" id="searchfield" value="Search contacts..." />
+      </div>
+
+    </div>
+
+    <div id="chatview" class="p1">
+      <div id="profile">
+        <ul class="social-icons icon-circle icon-rotate list-unstyled list-inline">
+          <li id="close"><i class="fas fa-solid fa-house-chimney"></i></li>
+          <li id="personalities"><i class="fas fa-solid fa-address-card"></i></li>
+          <li id="parameters"><i class="fas fa-solid fa-sliders"></i></li>
+          <li id="about"><i class="fas fa-solid fa-info"></i></li>
+        </ul>
+
+        <p>Miro Badev</p>
+        <span>miro@badev@gmail.com</span>
+      </div>
+
+      <div id="chat-block">
+        <div></div>
+
+        <div id="sendmessage">
+          <input type="text" value="Send message..." class="user-input"/>
+          <button id="send" class="user-input-button"></button>
+        </div>
+      </div>
+      <div id="config-block">
+        <div id="personalities_view" class="bot-personality">
+          <h3>Personalities</h3>
+          <div>
+            <label for="inputPersonality1" class="col-form-label"></label>
+            <input type="text" class="effect-10" id="inputPersonality1">
+            <span class="focus-bg"></span>
+          </div>
+          <div>
+            <label for="inputPersonality2" class="col-form-label"></label>
+            <input type="text" class="form-control" id="inputPersonality2">
+          </div>
+          <div>
+            <label for="inputPersonality3" class="col-form-label"></label>
+            <input type="text" class="form-control" id="inputPersonality3">
+          </div>
+          <div>
+            <label for="inputPersonality4" class="col-form-label"></label>
+            <input type="text" class="form-control" id="inputPersonality4">
+          </div>
+          <div>
+            <label for="inputPersonality5" class="col-form-label"></label>
+            <input type="text" class="form-control" id="inputPersonality5">
+          </div>
+          <div id="personalities_button">
+            <button id="personalities_cancel">Cancel</button>
+            <button id="personalities_update">Update</button>
+          </div>
+        </div>
+
+        <div id="parameters_view" class="">
+          <h3>Parameters</h3>
+          <div class="form-check">
+            <label class="form-check-label" for="doSample">
+              Do Sample
+            </label>
+            <input class="form-check-input" type="checkbox" value="" id="doSample" checked>
+          </div>
+          <div>
+            <label for="minLength" class="form-label">Minimal Length: <span id="minLengthValue">1</span></label>
+            <input type="range" class="form-range" min="1" max="10" value="1" id="minLength" onmousemove="updateValue('minLengthValue', this.value);">
+          </div>
+          <div>
+            <label for="maxLength" class="form-label">Maximal Length: <span id="maxLengthValue">20</span></label>
+            <input type="range" class="form-range" min="20" max="50" value="20" id="maxLength" onmousemove="updateValue('maxLengthValue', this.value);">
+          </div>
+          <div>
+            <label for="temperature" class="form-label">Temperature: <span id="temperatureValue">0.7</span></label>
+            <input type="range" class="form-range" min="0.1" max="1.0" value="0.7" step="0.1" id="temperature" onmousemove="updateValue('temperatureValue', this.value);">
+          </div>
+          <div>
+            <label for="topK" class="form-label">Top k: <span id="topKValue">20</span></label>
+            <input type="range" class="form-range" min="0" max="50" value="20" id="topK" onmousemove="updateValue('topKValue', this.value);">
+          </div>
+          <div>
+            <label for="topP" class="form-label">Top p: <span id="topPValue">0.9</span></label>
+            <input type="range" class="form-range" min="0.1" max="1.0" value="0.9" step="0.01" id="topP" onmousemove="updateValue('topPValue', this.value);">
+          </div>
+          <div id="parameters_button">
+            <button id="parameters_ok">Ok</button>
+          </div>
+        </div>
+
+        <div id="about_view" class="">
+          <div class="">
+            <h3>Persona Chatbot</h3>
+            <div>
+              <span>Created by <a href="https://www.linkedin.com/in/cahyawirawan/">Cahya Wirawan</a></span>
+            </div>
+            <div>
+              <span>The Model is based on Huggingface's</span>
+              <span><a href="https://medium.com/huggingface/how-to-build-a-state-of-the-art-conversational-ai-with-transfer-learning-2d818ac26313">Conversational AI with Transfer Learning</a></span>
+            </div>
+            <div>
+              <span>UI Design is based on</span>
+              <span><a href="https://codepen.io/virgilpana/pen/ZYZXgP">"A Pen by Virgin Pana"</a></span>
+            </div>
+            <div>
+              <span>The personal photos were generated by </span>
+              <span><a href="https://generated.photos/">Generated Photos</a></span>
+            </div>
+            <div id="about_button">
+              <button id="about_close">Close</button>
+            </div>
+          </div>
+        </div>
+        <div id="server_view">
+          <span class="server-message-value">Server</span>
+        </div>
+      </div>
+      <div id="photo-block">
+        <img src=""/>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+  <script src="js/chatbot.js"></script>
+</body>

static/js/chatbot.js

@@ -0,0 +1,403 @@
+updateValue = function(id, value) {
+	document.getElementById(id).innerText = value;
+}
+
+htmlToElement = function(html) {
+	let template = document.createElement('template');
+	html = html.trim(); // Never return a text node of whitespace as the result
+	template.innerHTML = html;
+	return template.content;
+}
+
+let websocket = null;
+let currentPersonaID = null;
+let persona_ids = {};
+
+pageSetup = function() {
+	// const users = document.querySelector('.users');
+	const userInput = document.querySelector('.user-input');
+	const userInputButton = document.querySelector('.user-input-button');
+	const serverMessageValue = document.querySelector('.server-message-value');
+	const messages = document.getElementById('chat-messages');
+	const friends = document.getElementById('friends');
+	websocket = new WebSocket("wss://gpt2-chat.ai-research.id/");
+	//websocket = new WebSocket("ws://localhost:8502/");
+	let persona_list;
+
+	let getParameters = function() {
+		return {
+			"do_sample": document.getElementById("doSample").checked,
+			"min_length": parseInt(document.getElementById("minLength").value),
+			"max_length": parseInt(document.getElementById("maxLength").value),
+			"temperature": parseFloat(document.getElementById("temperature").value),
+			"top_k": parseInt(document.getElementById("topK").value),
+			"top_p": parseFloat(document.getElementById("topP").value),
+		};
+	}
+
+	let createMessage = function (message, image, bot) {
+		let message_template = "";
+		if(bot) {
+			message_template += '<div class="message">';
+			message_template += '  <img alt="" src="' + image + '" />';
+		}
+		else {
+			message_template += '<div class="message right">';
+			message_template += '  <img alt="" src="https://static.ai-research.id/images/generated_photos_m_001.jpg" />';
+		}
+		message_template += '  <div class="bubble">' + message;
+		message_template += '    <div class="corner"></div>';
+		message_template += '  </div>';
+		message_template += '</div>';
+		return message_template;
+	}
+
+	let createFriends = function (persona_list) {
+		html_template = '';
+		for (let i=0; i<persona_list.length;  i++) {
+			html_template += '<div class="friend">';
+			html_template += '  <img alt="" src="' + persona_list[i]["image"] + '" />';
+			html_template += '  <p>';
+			html_template += '    <strong>' + persona_list[i]["name"] + '</strong>';
+			html_template += '    <span>' + persona_list[i]["email"]+ '</span>';
+			html_template += '    <span class="persona_id">' + persona_list[i]["id"]+ '</span>';
+			html_template += '  </p>';
+			html_template += '  <div class="status available"></div>';
+			html_template += '</div>';
+		}
+		return html_template;
+	}
+
+	let hoverMesssagePhoto = function (persona_id) {
+		let id = '#chat_message_' + persona_id;
+		let message_photo = $(id + ' .message:last-child img');
+		message_photo.hover(function () {
+			let profile_photo_zoom = $('#photo-block img');
+			profile_photo_zoom[0].src = message_photo[0].src;
+			$('#photo-block').fadeIn();
+		}, function () {
+			$('#photo-block').fadeOut(800);
+		})
+	}
+
+	let processUserInput = function (userInput) {
+		let parameters = getParameters();
+		parameters["action"] = "talk";
+		parameters["persona_id"] = currentPersonaID;
+		parameters["utterance"] = userInput.value;
+		websocket.send(JSON.stringify(parameters));
+		let message = createMessage(userInput.value, persona_ids[currentPersonaID]["image"], false);
+		const element = htmlToElement(message).firstChild;
+		userInput.value = "";
+		let chat_message = $('#chat_message_' + currentPersonaID)[0];
+		chat_message.appendChild(element);
+		const margin_top = element.childNodes[3].offsetHeight - 25;
+		element.childNodes[1].style = "margin-top:" + margin_top + "px";
+		chat_message.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
+		hoverMesssagePhoto(currentPersonaID);
+	}
+
+	userInputButton.onclick = function () {
+		processUserInput(userInput);
+	}
+
+	userInput.addEventListener("keyup", function(event) {
+		if (event.keyCode === 13) {
+			// Cancel the default action, if needed
+			event.preventDefault();
+			processUserInput(userInput);
+		}
+	});
+
+	websocket.onmessage = function (event) {
+		let data = JSON.parse(event.data);
+		switch (data.type) {
+			case 'connection':
+				console.log(data.value)
+				websocket.send(JSON.stringify({action: 'dialog', personality: []}));
+				break;
+			case 'state':
+				console.log("stat: " + data.value)
+				break;
+			case 'users':
+				serverMessageValue.textContent = (
+					data.count.toString() + " user" +
+					(data.count === 1 ? "" : "s") + " online");
+				break;
+			case 'dialog':
+				console.log(data.message)
+				break;
+			case 'talk':
+			case 'persona_greeting':
+				let message = createMessage(data.message, persona_ids[currentPersonaID]["image"], true);
+				const element = htmlToElement(message).firstChild;
+				let chat_message = $('#chat_message_' + currentPersonaID)[0];
+				chat_message.appendChild(element);
+				margin_top = element.childNodes[3].offsetHeight - 25;
+				element.childNodes[1].style = "margin-top:" + margin_top + "px";
+				chat_message.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
+				hoverMesssagePhoto(currentPersonaID);
+				break;
+			case 'personality':
+				const elements = document.querySelectorAll(".bot-personality input")
+				for (let i = 0; i < Math.min(elements.length, data.message.length); i++) {
+					elements[i].value = data.message[i];
+				}
+				break;
+			case 'persona_list':
+				persona_list = data.message;
+				for(i=0; i<persona_list.length; i++) {
+					persona_ids[persona_list[i]["id"]] = persona_list[i];
+				}
+				html_template = createFriends(persona_list);
+				friends.appendChild(htmlToElement(html_template));
+				document_ready();
+				break;
+			case 'personality_reply':
+				serverMessageValue.textContent = data.message
+				setTimeout(function() {
+					websocket.send(JSON.stringify({action: 'get_users'}));
+				}, 3000);
+				break;
+			default:
+				console.error(
+					"unsupported event", data);
+		}
+	};
+}
+
+let document_ready = function () {
+	$("#searchfield").focus(function(){
+		if($(this).val() == "Search contacts..."){
+			$(this).val("");
+		}
+	});
+	$("#searchfield").focusout(function(){
+		if($(this).val() == ""){
+			$(this).val("Search contacts...");
+
+		}
+	});
+
+	$("#sendmessage input").focus(function(){
+		if($(this).val() == "Send message..."){
+			$(this).val("");
+		}
+	});
+	$("#sendmessage input").focusout(function(){
+		if($(this).val() == ""){
+			$(this).val("Send message...");
+
+		}
+	});
+	$("#searchfield").keyup(function(){
+		if($(this).val() === ""){
+			$('.friend').each(function(index){
+				$( this ).fadeIn();
+			})
+		}
+		else {
+			const searchtext = $(this).val().toLowerCase();
+			$('.friend strong').each(function(index){
+				console.log(index + ": " + $( this ).parent().parent().text());
+				if($(this).text().toLowerCase().search(searchtext) !== -1)
+					$( this ).parent().parent().fadeIn();
+				else
+					$( this ).parent().parent().fadeOut();
+			})
+		}
+	});
+
+	$(".friend").each(function(){
+		$(this).click(function(){
+			let childOffset = $(this).offset();
+			let parentOffset = $(this).parent().parent().offset();
+			let childTop = childOffset.top - parentOffset.top;
+			let clone = $(this).find('img').eq(0).clone();
+			let top = childTop+12+"px";
+			currentPersonaID = this.children[1].children[2].innerHTML;
+
+			let chat_message = $('#chat_message_' + currentPersonaID);
+			if(chat_message.length === 0) {
+				html_template = '<div id="' + 'chat_message_' + currentPersonaID + '" class="chat_messages"></div>';
+				$('#chat-block').children().first().append(html_template)
+				chat_message = $('#chat_message_' + currentPersonaID);
+				websocket.send(JSON.stringify({action: 'persona_chosen', persona_id: currentPersonaID}));
+			}
+			else {
+				chat_message.show(400, function () {
+					chat_message[0].scrollIntoView({behavior: "auto", block: "end", inline: "nearest"});
+				});
+			}
+
+			$(clone).css({'top': top}).addClass("floatingImg").appendTo("#chatbox");
+
+			setTimeout(function(){$("#profile p").addClass("animate");$("#profile").addClass("animate");}, 100);
+			setTimeout(function(){
+				chat_message.addClass("animate");
+				$('.cx, .cy').addClass('s1');
+				setTimeout(function(){$('.cx, .cy').addClass('s2');}, 100);
+				setTimeout(function(){$('.cx, .cy').addClass('s3');}, 200);
+			}, 150);
+
+			let profile_photo = $('.floatingImg');
+			profile_photo.animate({
+				'width': "68px",
+				'left':'15px',
+				'top':'20px'
+			}, 200);
+
+			profile_photo.hover(function () {
+				var profile_photo_zoom = $('#photo-block img');
+				console.log(profile_photo_zoom);
+				profile_photo_zoom[0].src = profile_photo[0].src;
+				$('#photo-block').fadeIn();
+			}, function () {
+				$('#photo-block').fadeOut(800);
+			});
+
+			var name = $(this).find("p strong").html();
+			var email = $(this).find("p span").html();
+			$("#profile p").html(name);
+			$("#profile span").html(email);
+
+			$(".message").not(".right").find("img").attr("src", $(clone).attr("src"));
+			$('#friendslist').fadeOut();
+			$('#chat-block').show();
+			$('#config-block').hide();
+			$('#chatview').fadeIn();
+
+
+			$('#close').unbind("click").click(function(){
+				chat_message.removeClass("animate");
+				chat_message.hide();
+				$("#profile, #profile p").removeClass("animate");
+				$('.cx, .cy').removeClass("s1 s2 s3");
+				$('.floatingImg').animate({
+					'width': "40px",
+					'top':top,
+					'left': '12px'
+				}, 200, function(){$('.floatingImg').remove()});
+
+				setTimeout(function(){
+					$('#chatview').fadeOut();
+					$('#friendslist').fadeIn();
+				}, 50);
+			});
+
+			personalities = ["", "", "", "", ""];
+
+			$('#personalities').unbind("click").click(function(){
+				personality_input = document.querySelectorAll(".bot-personality input")
+				for (let i = 0; i < Math.min(personality_input.length, persona_ids[currentPersonaID]["personality"].length); i++) {
+					personality_input[i].value = persona_ids[currentPersonaID]["personality"][i+3];
+				}
+				setTimeout(function(){
+					$('#server_view').fadeOut(400, function () {
+						$('#server_view').fadeIn();
+					});
+					$('#parameters_view').fadeOut(400, function (){
+						$('#about_view').fadeOut(400, function () {
+							$('#personalities_view').fadeIn();
+						});
+					});
+					$('#about_view').fadeOut(400);
+					$('#chat-block').fadeOut(400, function (){
+						$('#config-block').fadeIn();
+					});
+
+				}, 50);
+				const elements = document.querySelectorAll(".bot-personality input")
+				for (let i = 0; i < Math.min(elements.length, 5); i++) {
+					personalities[i] = elements[i].value;
+				}
+			});
+
+			$('#personalities_cancel').unbind("click").click(function(){
+				const elements = document.querySelectorAll(".bot-personality input")
+				for (let i = 0; i < Math.min(elements.length, 5); i++) {
+					elements[i].value = personalities[i];
+				}
+				setTimeout(function(){
+					$('#config-block').fadeOut(400, function (){
+						$('#chat-block').fadeIn();
+					});
+				}, 50);
+			});
+
+			$('#personalities_update').unbind("click").click(function(){
+				const elements = document.querySelectorAll(".bot-personality input")
+				let data = {
+					"action": "personality",
+					"persona_id": currentPersonaID,
+					"message": []
+				}
+				// persona_ids[currentPersonaID]["personality"]
+				for (let i = 0; i < Math.min(elements.length, 5); i++) {
+					if(elements[i].value.length >0)
+						persona_ids[currentPersonaID]["personality"][i+3] = elements[i].value;
+						data.message.push(elements[i].value);
+				}
+				websocket.send(JSON.stringify(data));
+				setTimeout(function(){
+					$('#config-block').fadeOut(400, function (){
+						$('#chat-block').fadeIn();
+					});
+				}, 500);
+			});
+
+			$('#parameters').unbind("click").click(function(){
+				setTimeout(function(){
+					$('#server_view').fadeOut(400, function () {
+						$('#server_view').fadeIn();
+					});
+					$('#personalities_view').fadeOut(400, function (){
+						$('#about_view').fadeOut(400, function () {
+							$('#parameters_view').fadeIn();
+						});
+					});
+					$('#chat-block').fadeOut(400, function () {
+						$('#config-block').fadeIn();
+					});
+				}, 50);
+			});
+
+			$('#parameters_ok').unbind("click").click(function(){
+				setTimeout(function(){
+					$('#config-block').fadeOut(400, function (){
+						$('#chat-block').fadeIn();
+					});
+
+				}, 50);
+			});
+
+			$('#about').unbind("click").click(function(){
+				setTimeout(function(){
+					$('#server_view').fadeOut(400, function () {
+						$('#server_view').fadeIn();
+					});
+					$('#personalities_view').fadeOut(400, function (){
+						$('#parameters_view').fadeOut(400, function (){
+							$('#about_view').fadeIn();
+						});
+					});
+					$('#chat-block').fadeOut(400, function () {
+						$('#config-block').fadeIn();
+					});
+				}, 50);
+			});
+
+			$('#about_close').unbind("click").click(function(){
+				setTimeout(function(){
+					$('#config-block').fadeOut(400, function (){
+						$('#chat-block').fadeIn();
+					});
+
+				}, 50);
+			});
+
+		});
+	});
+
+	// $("#friends")[0].firstElementChild.click()
+};