cahya/chatbot
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <title>GPT2 Persona Chatbot</title>5 <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>6 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css">7 <link rel="stylesheet" href="css/chatbot.css">8</head>9 10<body onload="pageSetup();">11 <div id="chatbox">12 <div id="friendslist">13 <div id="topmenu">14 <span class="friends"></span>15 <span class="chats"></span>16 <span class="history"></span>17 </div>18 19 <div id="friends">20 </div>21 22 <div id="search">23 <input type="text" id="searchfield" value="Search contacts..." />24 </div>25 26 </div>27 28 <div id="chatview" class="p1">29 <div id="profile">30 <ul class="social-icons icon-circle icon-rotate list-unstyled list-inline">31 <li id="close"><i class="fas fa-solid fa-house-chimney"></i></li>32 <li id="personalities"><i class="fas fa-solid fa-address-card"></i></li>33 <li id="parameters"><i class="fas fa-solid fa-sliders"></i></li>34 <li id="about"><i class="fas fa-solid fa-info"></i></li>35 </ul>36 37 <p>Miro Badev</p>38 <span>miro@badev@gmail.com</span>39 </div>40 41 <div id="chat-block">42 <div></div>43 44 <div id="sendmessage">45 <input type="text" value="Send message..." class="user-input"/>46 <button id="send" class="user-input-button"></button>47 </div>48 </div>49 <div id="config-block">50 <div id="personalities_view" class="bot-personality">51 <h3>Personalities</h3>52 <div>53 <label for="inputPersonality1" class="col-form-label"></label>54 <input type="text" class="effect-10" id="inputPersonality1">55 <span class="focus-bg"></span>56 </div>57 <div>58 <label for="inputPersonality2" class="col-form-label"></label>59 <input type="text" class="form-control" id="inputPersonality2">60 </div>61 <div>62 <label for="inputPersonality3" class="col-form-label"></label>63 <input type="text" class="form-control" id="inputPersonality3">64 </div>65 <div>66 <label for="inputPersonality4" class="col-form-label"></label>67 <input type="text" class="form-control" id="inputPersonality4">68 </div>69 <div>70 <label for="inputPersonality5" class="col-form-label"></label>71 <input type="text" class="form-control" id="inputPersonality5">72 </div>73 <div id="personalities_button">74 <button id="personalities_cancel">Cancel</button>75 <button id="personalities_update">Update</button>76 </div>77 </div>78 79 <div id="parameters_view" class="">80 <h3>Parameters</h3>81 <div class="form-check">82 <label class="form-check-label" for="doSample">83 Do Sample84 </label>85 <input class="form-check-input" type="checkbox" value="" id="doSample" checked>86 </div>87 <div>88 <label for="minLength" class="form-label">Minimal Length: <span id="minLengthValue">1</span></label>89 <input type="range" class="form-range" min="1" max="10" value="1" id="minLength" onmousemove="updateValue('minLengthValue', this.value);">90 </div>91 <div>92 <label for="maxLength" class="form-label">Maximal Length: <span id="maxLengthValue">20</span></label>93 <input type="range" class="form-range" min="20" max="50" value="20" id="maxLength" onmousemove="updateValue('maxLengthValue', this.value);">94 </div>95 <div>96 <label for="temperature" class="form-label">Temperature: <span id="temperatureValue">0.7</span></label>97 <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);">98 </div>99 <div>100 <label for="topK" class="form-label">Top k: <span id="topKValue">20</span></label>101 <input type="range" class="form-range" min="0" max="50" value="20" id="topK" onmousemove="updateValue('topKValue', this.value);">102 </div>103 <div>104 <label for="topP" class="form-label">Top p: <span id="topPValue">0.9</span></label>105 <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);">106 </div>107 <div id="parameters_button">108 <button id="parameters_ok">Ok</button>109 </div>110 </div>111 112 <div id="about_view" class="">113 <div class="">114 <h3>Persona Chatbot</h3>115 <div>116 <span>Created by <a href="https://www.linkedin.com/in/cahyawirawan/">Cahya Wirawan</a></span>117 </div>118 <div>119 <span>The Model is based on Huggingface's</span>120 <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>121 </div>122 <div>123 <span>UI Design is based on</span>124 <span><a href="https://codepen.io/virgilpana/pen/ZYZXgP">"A Pen by Virgin Pana"</a></span>125 </div>126 <div>127 <span>The personal photos were generated by </span>128 <span><a href="https://generated.photos/">Generated Photos</a></span>129 </div>130 <div id="about_button">131 <button id="about_close">Close</button>132 </div>133 </div>134 </div>135 <div id="server_view">136 <span class="server-message-value">Server</span>137 </div>138 </div>139 <div id="photo-block">140 <img src=""/>141 </div>142 </div>143 </div>144 145 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>146 <script src="js/chatbot.js"></script>147</body>