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