|
|
<!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> |
