Hugging Face's logo

Spaces:
cahya
/
persona-chatbot
Runtime error

App Files Community
cahya commited on
Commit
592e78e
·
1 Parent(s): fbdd967

added chatbot

Browse files
Files changed (17) hide show
  1. README.md +2 -2
  2. app/SessionState.py +107 -0
  3. app/chatbot.html +147 -0
  4. app/css/chatbot.css +629 -0
  5. app/css/main.css +109 -0
  6. app/images/bubble-corner.png +0 -0
  7. app/images/bubble-cornerR.png +0 -0
  8. app/images/flower.jpg +0 -0
  9. app/images/generated_photos_m_001.jpg +0 -0
  10. app/images/generated_photos_m_002.jpg +0 -0
  11. app/images/generated_photos_m_003.jpg +0 -0
  12. app/images/generated_photos_m_004.jpg +0 -0
  13. app/images/generated_photos_w_001.jpg +0 -0
  14. app/images/generated_photos_w_002.jpg +0 -0
  15. app/images/generated_photos_w_003.jpg +0 -0
  16. app/js/chatbot.js +403 -0
  17. app/js/main.js +122 -0
README.md CHANGED
@@ -1,10 +1,10 @@
1
  ---
2
  title: Persona Chatbot
3
- emoji: 🏃
4
  colorFrom: green
5
  colorTo: gray
6
  sdk: streamlit
7
- app_file: app.py
8
  pinned: false
9
  ---
10
 
 
1
  ---
2
  title: Persona Chatbot
3
+ emoji: 💬
4
  colorFrom: green
5
  colorTo: gray
6
  sdk: streamlit
7
+ app_file: app/app.py
8
  pinned: false
9
  ---
10
 
app/SessionState.py ADDED
@@ -0,0 +1,107 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ """Hack to add per-session state to Streamlit.
2
+ Usage
3
+ -----
4
+ >>> import SessionState
5
+ >>>
6
+ >>> session_state = SessionState.get(user_name='', favorite_color='black')
7
+ >>> session_state.user_name
8
+ ''
9
+ >>> session_state.user_name = 'Mary'
10
+ >>> session_state.favorite_color
11
+ 'black'
12
+ Since you set user_name above, next time your script runs this will be the
13
+ result:
14
+ >>> session_state = get(user_name='', favorite_color='black')
15
+ >>> session_state.user_name
16
+ 'Mary'
17
+ """
18
+ try:
19
+ import streamlit.ReportThread as ReportThread
20
+ from streamlit.server.Server import Server
21
+ except Exception:
22
+ # Streamlit >= 0.65.0
23
+ import streamlit.report_thread as ReportThread
24
+ from streamlit.server.server import Server
25
+
26
+
27
+ class SessionState(object):
28
+ def __init__(self, **kwargs):
29
+ """A new SessionState object.
30
+ Parameters
31
+ ----------
32
+ **kwargs : any
33
+ Default values for the session state.
34
+ Example
35
+ -------
36
+ >>> session_state = SessionState(user_name='', favorite_color='black')
37
+ >>> session_state.user_name = 'Mary'
38
+ ''
39
+ >>> session_state.favorite_color
40
+ 'black'
41
+ """
42
+ for key, val in kwargs.items():
43
+ setattr(self, key, val)
44
+
45
+
46
+ def get(**kwargs):
47
+ """Gets a SessionState object for the current session.
48
+ Creates a new object if necessary.
49
+ Parameters
50
+ ----------
51
+ **kwargs : any
52
+ Default values you want to add to the session state, if we're creating a
53
+ new one.
54
+ Example
55
+ -------
56
+ >>> session_state = get(user_name='', favorite_color='black')
57
+ >>> session_state.user_name
58
+ ''
59
+ >>> session_state.user_name = 'Mary'
60
+ >>> session_state.favorite_color
61
+ 'black'
62
+ Since you set user_name above, next time your script runs this will be the
63
+ result:
64
+ >>> session_state = get(user_name='', favorite_color='black')
65
+ >>> session_state.user_name
66
+ 'Mary'
67
+ """
68
+ # Hack to get the session object from Streamlit.
69
+
70
+ ctx = ReportThread.get_report_ctx()
71
+
72
+ this_session = None
73
+
74
+ current_server = Server.get_current()
75
+ if hasattr(current_server, '_session_infos'):
76
+ # Streamlit < 0.56
77
+ session_infos = Server.get_current()._session_infos.values()
78
+ else:
79
+ session_infos = Server.get_current()._session_info_by_id.values()
80
+
81
+ for session_info in session_infos:
82
+ s = session_info.session
83
+ if (
84
+ # Streamlit < 0.54.0
85
+ (hasattr(s, '_main_dg') and s._main_dg == ctx.main_dg)
86
+ or
87
+ # Streamlit >= 0.54.0
88
+ (not hasattr(s, '_main_dg') and s.enqueue == ctx.enqueue)
89
+ or
90
+ # Streamlit >= 0.65.2
91
+ (not hasattr(s, '_main_dg') and s._uploaded_file_mgr == ctx.uploaded_file_mgr)
92
+ ):
93
+ this_session = s
94
+
95
+ if this_session is None:
96
+ raise RuntimeError(
97
+ "Oh noes. Couldn't get your Streamlit Session object. "
98
+ 'Are you doing something fancy with threads?')
99
+
100
+ # Got the session object! Now let's attach some state into it.
101
+
102
+ if not hasattr(this_session, '_custom_session_state'):
103
+ this_session._custom_session_state = SessionState(**kwargs)
104
+
105
+ return this_session._custom_session_state
106
+
107
+ __all__ = ['get']
app/chatbot.html ADDED
@@ -0,0 +1,147 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Sample
84
+ </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>
app/css/chatbot.css ADDED
@@ -0,0 +1,629 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * { margin: 0; padding: 0; }
2
+ body {
3
+ background: #f0f1f2;
4
+ font:12px "Helvetica Neue", Impact, sans-serif;
5
+ }
6
+ #view-code{
7
+ color:#89a2b5;
8
+ opacity:0.7;
9
+ font-size:14px;
10
+ text-transform:uppercase;
11
+ font-weight:700;
12
+ text-decoration:none;
13
+ position:absolute;top:660px;
14
+ left:50%;margin-left:-50px;
15
+ z-index:200;
16
+ }
17
+ #view-code:hover{opacity:1;}
18
+ #chatbox{
19
+ width:290px;
20
+ background:#fff;
21
+ border-radius:6px;
22
+ overflow:hidden;
23
+ height:484px;
24
+ position:absolute;
25
+ top:100px;
26
+ left:50%;
27
+ margin-left:-155px;
28
+ box-shadow: 2px 2px 15px rgb(50 50 50 / 10%)
29
+ }
30
+
31
+ #friendslist{
32
+ position:absolute;
33
+ top:0;
34
+ left:0;
35
+ width:290px;
36
+ height:484px;
37
+ display: block;
38
+ }
39
+ #topmenu{
40
+ height:69px;
41
+ width:290px;
42
+ border-bottom:1px solid #d8dfe3;
43
+ }
44
+ #topmenu span{
45
+ float:left;
46
+ width: 96px;
47
+ height: 70px;
48
+ background: url("https://static.ai-research.id/images/top-menu.png") -3px -118px no-repeat;
49
+ }
50
+ #topmenu span.friends{margin-bottom:-1px;}
51
+ #topmenu span.chats{background-position:-95px 25px; cursor:pointer;}
52
+ #topmenu span.chats:hover{background-position:-95px -46px; cursor:pointer;}
53
+ #topmenu span.history{background-position:-190px 24px; cursor:pointer;}
54
+ #topmenu span.history:hover{background-position:-190px -47px; cursor:pointer;}
55
+ .friend{
56
+ height:70px;
57
+ border-bottom:1px solid #e7ebee;
58
+ position:relative;
59
+ }
60
+ .friend:hover{
61
+ background:#f1f4f6;
62
+ cursor:pointer;
63
+ }
64
+ .friend img{
65
+ width:40px;
66
+ border-radius:50%;
67
+ margin:15px;
68
+ float:left;
69
+ }
70
+ .floatingImg{
71
+ width:40px;
72
+ border-radius:50%;
73
+ position:absolute;
74
+ top:0;
75
+ left:12px;
76
+ border:3px solid #fff;
77
+ }
78
+ .friend p{
79
+ padding:15px 0 0 0;
80
+ float:left;
81
+ width:220px;
82
+ }
83
+ .friend p strong{
84
+ display: block;
85
+ font-weight:600;
86
+ font-size:15px;
87
+ color:#597a96;
88
+
89
+ }
90
+ .friend p span{
91
+ display: block;
92
+ font-size:13px;
93
+ font-weight:400;
94
+ color:#aab8c2;
95
+ }
96
+ .friend .status{
97
+ background:#26c281;
98
+ border-radius:50%;
99
+ width:9px;
100
+ height:9px;
101
+ position:absolute;
102
+ top:31px;
103
+ right:17px;
104
+ }
105
+ .friend .status.away{background:#ffce54;}
106
+ .friend .status.inactive{background:#eaeef0;}
107
+ #search{
108
+ background:#e3e9ed url("https://static.ai-research.id/images/search.png") -11px 0 no-repeat;
109
+ height:60px;
110
+ width:290px;
111
+ position:absolute;
112
+ bottom:0;
113
+ left:0;
114
+ }
115
+ #searchfield{
116
+ background:#e3e9ed;
117
+ margin:21px 0 0 55px;
118
+ border:none;
119
+ padding:0;
120
+ font-size:14px;
121
+ font-family:"Helvetica Neue", Impact, sans-serif;
122
+ font-weight:normal;
123
+ color:#8198ac;
124
+ }
125
+ #searchfield:focus{
126
+ outline: 0;
127
+ }
128
+ #chatview{
129
+ width:290px;
130
+ height:484px;
131
+ position:absolute;
132
+ top:0;
133
+ left:0;
134
+ display:none;
135
+ background:#fff;
136
+ }
137
+ #profile{
138
+ height:153px;
139
+ overflow:hidden;
140
+ text-align:left;
141
+ color:#fff;
142
+ }
143
+ .p1 #profile{
144
+ background:#fff url("https://static.ai-research.id/images/flower.jpg") 0 0 no-repeat;
145
+ background-size: 300px 210px;
146
+ }
147
+ #profile .avatar{
148
+ width:68px;
149
+ border:3px solid #fff;
150
+ margin:23px 0 0;
151
+ border-radius:50%;
152
+ }
153
+ #profile p{
154
+ font-weight:600;
155
+ font-size:15px;
156
+ margin:118px 0 -1px 15px;
157
+ opacity:0;
158
+ -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
159
+ -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
160
+ -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
161
+ transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
162
+ }
163
+ #profile p.animate{
164
+ margin-top:97px;
165
+ opacity:1;
166
+ -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
167
+ -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
168
+ -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
169
+ transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
170
+ }
171
+ #profile span{
172
+ font-weight:400;
173
+ font-size:11px;
174
+ margin: 0 0 0 15px;
175
+ }
176
+ #friends .persona_id {
177
+ display: none;
178
+ }
179
+ #chat-block {
180
+ height: 290px;
181
+ overflow: auto;
182
+ background: rgb(248,251,255);
183
+ }
184
+ .chat_messages{
185
+ opacity:0;
186
+ margin-top:30px;
187
+ width:290px;
188
+ overflow-y:scroll;
189
+ overflow-x:hidden;
190
+ padding-right: 20px;
191
+ -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
192
+ -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
193
+ -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
194
+ transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
195
+ }
196
+ #chat-block .animate{
197
+ opacity:1;
198
+ margin-top:0;
199
+ }
200
+ #chat-block label{
201
+ color:#aab8c2;
202
+ font-weight:600;
203
+ font-size:12px;
204
+ text-align:center;
205
+ margin:15px 0;
206
+ width:290px;
207
+ display:block;
208
+ }
209
+ #chat-block div.message{
210
+ padding:10px 0 10px 48px;
211
+ clear:both;
212
+ margin:0 10px 0 0;
213
+ }
214
+ #chat-block div.message.right{
215
+ padding: 10px 65px 10px 0;
216
+ margin-right: -19px;
217
+ margin-left: 19px;
218
+ }
219
+ #chat-block .message img{
220
+ float: left;
221
+ margin-left: -38px;
222
+ border-radius: 50%;
223
+ width: 30px;
224
+ margin-top: 10px;
225
+ }
226
+ #chat-block div.message.right img{
227
+ float: right;
228
+ margin-left: 0;
229
+ margin-right: -38px;
230
+ }
231
+ .message .bubble{
232
+ background:#e0e7f4;
233
+ font-size:13px;
234
+ font-weight:600;
235
+ padding:8px 8px;
236
+ border-radius:5px 5px 5px 0;
237
+ color:#8495a3;
238
+ position:relative;
239
+ float:left;
240
+ }
241
+ #chat-block div.message.right .bubble{
242
+ float:right;
243
+ border-radius:5px 5px 0 5px ;
244
+ background: #e0f4e7;
245
+ }
246
+ .bubble .corner{
247
+ background:url("https://static.ai-research.id/images/bubble-corner.png") 0 0 no-repeat;
248
+ position:absolute;
249
+ width:7px;
250
+ height:7px;
251
+ left:-5px;
252
+ bottom:0;
253
+ }
254
+ div.message.right .corner{
255
+ background:url("https://static.ai-research.id/images/bubble-cornerR.png") 0 0 no-repeat;
256
+ left:auto;
257
+ right:-5px;
258
+ }
259
+ .bubble span{
260
+ color: #aab8c2;
261
+ font-size: 11px;
262
+ position: absolute;
263
+ right: 0;
264
+ bottom: -22px;
265
+ }
266
+ #sendmessage{
267
+ height:40px;
268
+ border-top:1px solid #e7ebee;
269
+ position:absolute;
270
+ bottom:0;
271
+ right:0;
272
+ width:290px;
273
+ background:#fff;
274
+ padding-bottom:0;
275
+ }
276
+ #sendmessage input{
277
+ background:#fff;
278
+ margin:8px 0 0 10px;
279
+ border:none;
280
+ padding:0;
281
+ font-size:14px;
282
+ font-family:"Helvetica Neue", Impact, sans-serif;
283
+ font-weight:normal;
284
+ color:#aab8c2;
285
+ width: 250px;
286
+ }
287
+ #sendmessage input:focus{
288
+ outline: 0;
289
+ }
290
+ #sendmessage button{
291
+ background:#fff url("https://static.ai-research.id/images/send.png") 0 -41px no-repeat;
292
+ width:30px;
293
+ height:30px;
294
+ position:absolute;
295
+ right: 0;
296
+ top: 14px;
297
+ border:none;
298
+ }
299
+ #sendmessage button:hover{
300
+ cursor:pointer;
301
+ background-position: 0 0 ;
302
+ }
303
+ #sendmessage button:focus{
304
+ outline: 0;
305
+ }
306
+
307
+ #close{
308
+ position:absolute;
309
+ top: 8px;
310
+ opacity:0.8;
311
+ right: 15px;
312
+ width:20px;
313
+ height:20px;
314
+ cursor:pointer;
315
+ display: block;
316
+ }
317
+ #close:hover{
318
+ opacity:1;
319
+ }
320
+ #personalities{
321
+ position:absolute;
322
+ top: 110px;
323
+ opacity:0.8;
324
+ right: 95px;
325
+ width:20px;
326
+ height:20px;
327
+ cursor:pointer;
328
+ display: block;
329
+ }
330
+ #personalities:hover{
331
+ opacity:1;
332
+ }
333
+ #parameters{
334
+ position:absolute;
335
+ top: 110px;
336
+ opacity:0.8;
337
+ right: 55px;
338
+ width:20px;
339
+ height:20px;
340
+ cursor:pointer;
341
+ display: block;
342
+ }
343
+ #parameters:hover{
344
+ opacity:1;
345
+ }
346
+ #about{
347
+ position:absolute;
348
+ top: 110px;
349
+ opacity:0.8;
350
+ right: 15px;
351
+ width:20px;
352
+ height:20px;
353
+ cursor:pointer;
354
+ display: block;
355
+ }
356
+ #about:hover{
357
+ opacity:1;
358
+ }
359
+ .cx, .cy{
360
+ background:#fff;
361
+ position:absolute;
362
+ width:0;
363
+ top:15px;
364
+ right:15px;
365
+ height:3px;
366
+ -webkit-transition: all 250ms ease-in-out;
367
+ -moz-transition: all 250ms ease-in-out;
368
+ -o-transition: all 250ms ease-in-out;
369
+ transition: all 250ms ease-in-out;
370
+ }
371
+ .cx.s1, .cy.s1{
372
+ right:0;
373
+ width:20px;
374
+ -webkit-transition: all 100ms ease-out;
375
+ -moz-transition: all 100ms ease-out;
376
+ -o-transition: all 100ms ease-out;
377
+ transition: all 100ms ease-out;
378
+ }
379
+ .cy.s2{
380
+ -ms-transform: rotate(50deg);
381
+ -webkit-transform: rotate(50deg);
382
+ transform: rotate(50deg);
383
+ -webkit-transition: all 100ms ease-out;
384
+ -moz-transition: all 100ms ease-out;
385
+ -o-transition: all 100ms ease-out;
386
+ transition: all 100ms ease-out;
387
+ }
388
+ .cy.s3{
389
+ -ms-transform: rotate(45deg);
390
+ -webkit-transform: rotate(45deg);
391
+ transform: rotate(45deg);
392
+ -webkit-transition: all 100ms ease-out;
393
+ -moz-transition: all 100ms ease-out;
394
+ -o-transition: all 100ms ease-out;
395
+ transition: all 100ms ease-out;
396
+ }
397
+ .cx.s1{
398
+ right:0;
399
+ width:20px;
400
+ -webkit-transition: all 100ms ease-out;
401
+ -moz-transition: all 100ms ease-out;
402
+ -o-transition: all 100ms ease-out;
403
+ transition: all 100ms ease-out;
404
+ }
405
+ .cx.s2{
406
+ -ms-transform: rotate(140deg);
407
+ -webkit-transform: rotate(140deg);
408
+ transform: rotate(140deg);
409
+ -webkit-transition: all 100ms ease-out;
410
+ -moz-transition: all 100ms ease-out;
411
+ -o-transition: all 100ms ease-out;
412
+ transition: all 100ms ease-out;
413
+ }
414
+ .cx.s3{
415
+ -ms-transform: rotate(135deg);
416
+ -webkit-transform: rotate(135deg);
417
+ transform: rotate(135deg);
418
+ -webkit-transition: all 100ms ease-out;
419
+ -moz-transition: all 100ms ease-out;
420
+ -o-transition: all 100ms ease-out;
421
+ transition: all 100ms ease-out;
422
+ }
423
+ #chatview, #sendmessage {
424
+ overflow:hidden;
425
+ border-radius:6px;
426
+ }
427
+
428
+ .col-3 {
429
+ float: left;
430
+ position: relative;
431
+ margin: 10px;
432
+ }
433
+ input[type="text"] {
434
+ font: 15px/24px "Helvetica Neue", Impact, sans-serif;
435
+ color: #333;
436
+ width: 100%;
437
+ box-sizing: border-box;
438
+ letter-spacing: 1px;
439
+ }
440
+
441
+ #config-block {
442
+ color: rgb(50, 100, 50);
443
+ height: 100%;
444
+ /*background: linear-gradient(0deg, rgba(186,183,226,1) 1%, rgba(255,213,198,1) 100%);*/
445
+ /*
446
+ background: rgb(251,255,248);
447
+ background: linear-gradient(135deg, rgba(251,255,248,1) 1%, rgba(107,235,131,1) 100%);
448
+ */
449
+ background: rgb(248,251,255);
450
+ background: linear-gradient(135deg, rgba(248,251,255,1) 1%, rgba(107,160,235,1) 100%);
451
+ }
452
+
453
+ #config-block input {
454
+ color: rgb(50, 100, 50);
455
+ font: 14px/24px "Helvetica Neue", Impact, sans-serif;
456
+ padding: 0 5px 0 5px;
457
+ }
458
+
459
+ #config-block button {
460
+ color: rgb(50, 100, 50);
461
+ padding: 4px 8px;
462
+ }
463
+
464
+ #config-block > div {
465
+ display: none;
466
+ }
467
+
468
+ #photo-block {
469
+ display: none;
470
+ }
471
+
472
+ #photo-block img {
473
+ position:absolute;
474
+ top: 80px;
475
+ width: 210px;
476
+ left: 35px;
477
+ z-index: 10;
478
+ border-radius:50%;
479
+ border:5px solid #fff;
480
+ }
481
+ #personalities_view, #parameters_view, #about_view {
482
+ padding: 10px 10px 0 10px;
483
+ }
484
+
485
+ #server_view {
486
+ position: absolute;
487
+ bottom: 8px;
488
+ padding: 0 10px;
489
+ }
490
+
491
+ #personalities_view div, #personalities_view h3, #parameters_view div, #parameters_view h3 {
492
+ margin-bottom: 5px;
493
+ }
494
+ #personalities_view .input {
495
+ -webkit-box-shadow: 2px 2px 10px 2px rgba(100,100,100,0.45);
496
+ box-shadow: 2px 2px 2px 2px rgba(100,100,100,0.2);
497
+ }
498
+
499
+ #personalities_button, #parameters_button{
500
+ margin: 10px 0;
501
+ }
502
+
503
+ #parameters_view #doSample {
504
+ display: inline;
505
+ width: 30px;
506
+ }
507
+
508
+ #parameters_view input {
509
+ display: block;
510
+ margin-left: 10px;
511
+ width: 95%;
512
+ }
513
+
514
+ #about_button {
515
+ position:absolute;
516
+ bottom:20px;
517
+ left:42%;
518
+ }
519
+ #about_view {
520
+ font-family: "Helvetica Neue", Impact, sans-serif;
521
+ font-size: 1.1em;
522
+ text-align: center;
523
+ margin: 0 0 0 0;
524
+ clear: both;
525
+ height: 100%;
526
+ }
527
+
528
+ #about_view h3 {
529
+ text-shadow: 3px 3px 5px rgb(150, 150, 150);
530
+ letter-spacing: 0.02em;
531
+ text-transform: uppercase;
532
+ text-align: center;
533
+ font-size: 1.5em;
534
+ margin: 0 0 20px 0;
535
+ }
536
+
537
+ #about_view div {
538
+ margin: 0 0 5px 0;
539
+ }
540
+
541
+ #about_view div div {
542
+ margin: 0 0 15px 0;
543
+ }
544
+ #about_view a {
545
+ color: rgb(50, 100, 50);
546
+ font-weight: bold;
547
+ }
548
+ #about_view span {
549
+ display: block;
550
+ }
551
+ /** Fontawesome **/
552
+
553
+ .list-unstyled {
554
+ padding-left: 0;
555
+ list-style: none;
556
+ }
557
+ .list-inline li {
558
+ display: inline-block;
559
+ padding-right: 5px;
560
+ padding-left: 5px;
561
+ margin-bottom: 10px;
562
+ }
563
+ /*---- Genral classes end -------*/
564
+
565
+ /*Change icons size here*/
566
+ .social-icons .fas {
567
+ font-size: 1.5em;
568
+ }
569
+ /*Change icons circle size and color here*/
570
+ .social-icons .fas {
571
+ width: 35px;
572
+ height: 35px;
573
+ line-height: 35px;
574
+ text-align: center;
575
+ color: rgba(100, 255, 100, 0.99);
576
+ -webkit-transition: all 0.3s ease-in-out;
577
+ -moz-transition: all 0.3s ease-in-out;
578
+ -ms-transition: all 0.3s ease-in-out;
579
+ -o-transition: all 0.3s ease-in-out;
580
+ transition: all 0.3s ease-in-out;
581
+ }
582
+
583
+ .social-icons.icon-circle .fas {
584
+ border-radius: 50%;
585
+ }
586
+ .social-icons.icon-rounded .fas {
587
+ border-radius:5px;
588
+ }
589
+ .social-icons.icon-flat .fas {
590
+ border-radius: 0;
591
+ }
592
+
593
+ .social-icons .fas:hover, .social-icons .fas:active {
594
+ color: rgba(250, 250, 120, 0.99);
595
+ -webkit-box-shadow: 1px 1px 3px #333;
596
+ -moz-box-shadow: 1px 1px 3px #333;
597
+ box-shadow: 1px 1px 3px #333;
598
+ }
599
+ .social-icons.icon-zoom .fas:hover, .social-icons.icon-zoom .fas:active {
600
+ -webkit-transform: scale(1.5);
601
+ -moz-transform: scale(1.5);
602
+ -ms-transform: scale(1.5);
603
+ -o-transform: scale(1.5);
604
+ transform: scale(1.5);
605
+ }
606
+ .social-icons.icon-rotate .fas:hover, .social-icons.icon-rotate .fas:active {
607
+ -webkit-transform: scale(1.1) rotateY(180deg);
608
+ -moz-transform: scale(1.1) rotateY(180deg);
609
+ -ms-transform: scale(1.1) rotateY(180deg);
610
+ -o-transform: scale(1.1) rotateY(180deg);
611
+ transform: scale(1.1) rotateY(180deg);
612
+ }
613
+
614
+ .social-icons .fa-address-card {
615
+ color: rgba(250, 250, 250, 0.99);
616
+ background-color:#aeb5c5;
617
+ }
618
+ .social-icons .fa-sliders {
619
+ color: rgba(250, 250, 250, 0.99);
620
+ background-color:#aeb5c5;
621
+ }
622
+ .social-icons .fa-info {
623
+ color: rgba(250, 250, 250, 0.99);
624
+ background-color:#aeb5c5;
625
+ }
626
+ .social-icons .fa-house-chimney {
627
+ color: rgba(250, 250, 250, 0.99);
628
+ background-color:#aeb5c5;
629
+ }
app/css/main.css ADDED
@@ -0,0 +1,109 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: "Arial, Courier New", sans-serif;
3
+ text-align: center;
4
+ }
5
+
6
+ h1 {
7
+ margin: 10px 10px;
8
+ }
9
+
10
+ .buttons {
11
+ font-size: 2em;
12
+ display: flex;
13
+ justify-content: center;
14
+ }
15
+
16
+ .button, .value {
17
+ line-height: 1;
18
+ padding: 1rem;
19
+ margin: 1rem;
20
+ border: medium solid;
21
+ min-height: 1em;
22
+ min-width: 1em;
23
+ }
24
+
25
+ .button {
26
+ cursor: pointer;
27
+ user-select: none;
28
+ }
29
+
30
+ .minus {
31
+ color: red;
32
+ }
33
+
34
+ .plus {
35
+ color: green;
36
+ }
37
+
38
+ .value {
39
+ min-width: 2em;
40
+ }
41
+
42
+ .state {
43
+ font-size: 2em;
44
+ }
45
+
46
+ .container {
47
+ min-width: 30em;
48
+ max-width: 40em;
49
+ }
50
+
51
+ .accordion-collapse {
52
+ padding: 5px 5px 0 5px;
53
+ }
54
+
55
+ .chat-container {
56
+ margin: 10px 0;
57
+ min-height: 300px;
58
+ max-height: 600px;
59
+ overflow: auto;
60
+ }
61
+
62
+ .bot-personality {
63
+ text-align: left;
64
+ margin: 0 0 5px 0;
65
+ }
66
+
67
+ .chat-parameter {
68
+ text-align: left;
69
+ margin: 5px 0 5px 0;
70
+ }
71
+
72
+ .bot-personality input {
73
+ margin: 5px 0 0 0;
74
+ min-width: 20em;
75
+ }
76
+
77
+ .message {
78
+ margin: 5px 0;
79
+ }
80
+
81
+ .message-inner {
82
+ font-size: 16px;
83
+ }
84
+
85
+ .outgoing {
86
+ text-align: right;
87
+ }
88
+
89
+ .outgoing .badge {
90
+ text-align: right;
91
+ }
92
+
93
+ .botPersonality, .incoming, .incoming .badge, .chat-suggestion, .server-message, .parameters {
94
+ text-align: left;
95
+ }
96
+
97
+ .chat-suggestion, .server-message
98
+ {
99
+ padding-left: 5px;
100
+ }
101
+
102
+ .server-message-value {
103
+ font-style: italic;
104
+ }
105
+
106
+ #collapseParameter {
107
+ width: 300px;
108
+ margin: 8px 0px;
109
+ }
app/images/bubble-corner.png ADDED
app/images/bubble-cornerR.png ADDED
app/images/flower.jpg ADDED
app/images/generated_photos_m_001.jpg ADDED
app/images/generated_photos_m_002.jpg ADDED
app/images/generated_photos_m_003.jpg ADDED
app/images/generated_photos_m_004.jpg ADDED
app/images/generated_photos_w_001.jpg ADDED
app/images/generated_photos_w_002.jpg ADDED
app/images/generated_photos_w_003.jpg ADDED
app/js/chatbot.js ADDED
@@ -0,0 +1,403 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ updateValue = function(id, value) {
2
+ document.getElementById(id).innerText = value;
3
+ }
4
+
5
+ htmlToElement = function(html) {
6
+ let template = document.createElement('template');
7
+ html = html.trim(); // Never return a text node of whitespace as the result
8
+ template.innerHTML = html;
9
+ return template.content;
10
+ }
11
+
12
+ let websocket = null;
13
+ let currentPersonaID = null;
14
+ let persona_ids = {};
15
+
16
+ pageSetup = function() {
17
+ // const users = document.querySelector('.users');
18
+ const userInput = document.querySelector('.user-input');
19
+ const userInputButton = document.querySelector('.user-input-button');
20
+ const serverMessageValue = document.querySelector('.server-message-value');
21
+ const messages = document.getElementById('chat-messages');
22
+ const friends = document.getElementById('friends');
23
+ websocket = new WebSocket("wss://gpt2-chat.ai-research.id/");
24
+ //websocket = new WebSocket("ws://localhost:8502/");
25
+ let persona_list;
26
+
27
+ let getParameters = function() {
28
+ return {
29
+ "do_sample": document.getElementById("doSample").checked,
30
+ "min_length": parseInt(document.getElementById("minLength").value),
31
+ "max_length": parseInt(document.getElementById("maxLength").value),
32
+ "temperature": parseFloat(document.getElementById("temperature").value),
33
+ "top_k": parseInt(document.getElementById("topK").value),
34
+ "top_p": parseFloat(document.getElementById("topP").value),
35
+ };
36
+ }
37
+
38
+ let createMessage = function (message, image, bot) {
39
+ let message_template = "";
40
+ if(bot) {
41
+ message_template += '<div class="message">';
42
+ message_template += ' <img alt="" src="' + image + '" />';
43
+ }
44
+ else {
45
+ message_template += '<div class="message right">';
46
+ message_template += ' <img alt="" src="images/generated_photos_m_001.jpg" />';
47
+ }
48
+ message_template += ' <div class="bubble">' + message;
49
+ message_template += ' <div class="corner"></div>';
50
+ message_template += ' </div>';
51
+ message_template += '</div>';
52
+ return message_template;
53
+ }
54
+
55
+ let createFriends = function (persona_list) {
56
+ html_template = '';
57
+ for (let i=0; i<persona_list.length; i++) {
58
+ html_template += '<div class="friend">';
59
+ html_template += ' <img alt="" src="' + persona_list[i]["image"] + '" />';
60
+ html_template += ' <p>';
61
+ html_template += ' <strong>' + persona_list[i]["name"] + '</strong>';
62
+ html_template += ' <span>' + persona_list[i]["email"]+ '</span>';
63
+ html_template += ' <span class="persona_id">' + persona_list[i]["id"]+ '</span>';
64
+ html_template += ' </p>';
65
+ html_template += ' <div class="status available"></div>';
66
+ html_template += '</div>';
67
+ }
68
+ return html_template;
69
+ }
70
+
71
+ let hoverMesssagePhoto = function (persona_id) {
72
+ let id = '#chat_message_' + persona_id;
73
+ let message_photo = $(id + ' .message:last-child img');
74
+ message_photo.hover(function () {
75
+ let profile_photo_zoom = $('#photo-block img');
76
+ profile_photo_zoom[0].src = message_photo[0].src;
77
+ $('#photo-block').fadeIn();
78
+ }, function () {
79
+ $('#photo-block').fadeOut(800);
80
+ })
81
+ }
82
+
83
+ let processUserInput = function (userInput) {
84
+ let parameters = getParameters();
85
+ parameters["action"] = "talk";
86
+ parameters["persona_id"] = currentPersonaID;
87
+ parameters["utterance"] = userInput.value;
88
+ websocket.send(JSON.stringify(parameters));
89
+ let message = createMessage(userInput.value, persona_ids[currentPersonaID]["image"], false);
90
+ const element = htmlToElement(message).firstChild;
91
+ userInput.value = "";
92
+ let chat_message = $('#chat_message_' + currentPersonaID)[0];
93
+ chat_message.appendChild(element);
94
+ const margin_top = element.childNodes[3].offsetHeight - 25;
95
+ element.childNodes[1].style = "margin-top:" + margin_top + "px";
96
+ chat_message.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
97
+ hoverMesssagePhoto(currentPersonaID);
98
+ }
99
+
100
+ userInputButton.onclick = function () {
101
+ processUserInput(userInput);
102
+ }
103
+
104
+ userInput.addEventListener("keyup", function(event) {
105
+ if (event.keyCode === 13) {
106
+ // Cancel the default action, if needed
107
+ event.preventDefault();
108
+ processUserInput(userInput);
109
+ }
110
+ });
111
+
112
+ websocket.onmessage = function (event) {
113
+ let data = JSON.parse(event.data);
114
+ switch (data.type) {
115
+ case 'connection':
116
+ console.log(data.value)
117
+ websocket.send(JSON.stringify({action: 'dialog', personality: []}));
118
+ break;
119
+ case 'state':
120
+ console.log("stat: " + data.value)
121
+ break;
122
+ case 'users':
123
+ serverMessageValue.textContent = (
124
+ data.count.toString() + " user" +
125
+ (data.count === 1 ? "" : "s") + " online");
126
+ break;
127
+ case 'dialog':
128
+ console.log(data.message)
129
+ break;
130
+ case 'talk':
131
+ case 'persona_greeting':
132
+ let message = createMessage(data.message, persona_ids[currentPersonaID]["image"], true);
133
+ const element = htmlToElement(message).firstChild;
134
+ let chat_message = $('#chat_message_' + currentPersonaID)[0];
135
+ chat_message.appendChild(element);
136
+ margin_top = element.childNodes[3].offsetHeight - 25;
137
+ element.childNodes[1].style = "margin-top:" + margin_top + "px";
138
+ chat_message.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
139
+ hoverMesssagePhoto(currentPersonaID);
140
+ break;
141
+ case 'personality':
142
+ const elements = document.querySelectorAll(".bot-personality input")
143
+ for (let i = 0; i < Math.min(elements.length, data.message.length); i++) {
144
+ elements[i].value = data.message[i];
145
+ }
146
+ break;
147
+ case 'persona_list':
148
+ persona_list = data.message;
149
+ for(i=0; i<persona_list.length; i++) {
150
+ persona_ids[persona_list[i]["id"]] = persona_list[i];
151
+ }
152
+ html_template = createFriends(persona_list);
153
+ friends.appendChild(htmlToElement(html_template));
154
+ document_ready();
155
+ break;
156
+ case 'personality_reply':
157
+ serverMessageValue.textContent = data.message
158
+ setTimeout(function() {
159
+ websocket.send(JSON.stringify({action: 'get_users'}));
160
+ }, 3000);
161
+ break;
162
+ default:
163
+ console.error(
164
+ "unsupported event", data);
165
+ }
166
+ };
167
+ }
168
+
169
+ let document_ready = function () {
170
+ $("#searchfield").focus(function(){
171
+ if($(this).val() == "Search contacts..."){
172
+ $(this).val("");
173
+ }
174
+ });
175
+ $("#searchfield").focusout(function(){
176
+ if($(this).val() == ""){
177
+ $(this).val("Search contacts...");
178
+
179
+ }
180
+ });
181
+
182
+ $("#sendmessage input").focus(function(){
183
+ if($(this).val() == "Send message..."){
184
+ $(this).val("");
185
+ }
186
+ });
187
+ $("#sendmessage input").focusout(function(){
188
+ if($(this).val() == ""){
189
+ $(this).val("Send message...");
190
+
191
+ }
192
+ });
193
+ $("#searchfield").keyup(function(){
194
+ if($(this).val() === ""){
195
+ $('.friend').each(function(index){
196
+ $( this ).fadeIn();
197
+ })
198
+ }
199
+ else {
200
+ const searchtext = $(this).val().toLowerCase();
201
+ $('.friend strong').each(function(index){
202
+ console.log(index + ": " + $( this ).parent().parent().text());
203
+ if($(this).text().toLowerCase().search(searchtext) !== -1)
204
+ $( this ).parent().parent().fadeIn();
205
+ else
206
+ $( this ).parent().parent().fadeOut();
207
+ })
208
+ }
209
+ });
210
+
211
+ $(".friend").each(function(){
212
+ $(this).click(function(){
213
+ let childOffset = $(this).offset();
214
+ let parentOffset = $(this).parent().parent().offset();
215
+ let childTop = childOffset.top - parentOffset.top;
216
+ let clone = $(this).find('img').eq(0).clone();
217
+ let top = childTop+12+"px";
218
+ currentPersonaID = this.children[1].children[2].innerHTML;
219
+
220
+ let chat_message = $('#chat_message_' + currentPersonaID);
221
+ if(chat_message.length === 0) {
222
+ html_template = '<div id="' + 'chat_message_' + currentPersonaID + '" class="chat_messages"></div>';
223
+ $('#chat-block').children().first().append(html_template)
224
+ chat_message = $('#chat_message_' + currentPersonaID);
225
+ websocket.send(JSON.stringify({action: 'persona_chosen', persona_id: currentPersonaID}));
226
+ }
227
+ else {
228
+ chat_message.show(400, function () {
229
+ chat_message[0].scrollIntoView({behavior: "auto", block: "end", inline: "nearest"});
230
+ });
231
+ }
232
+
233
+ $(clone).css({'top': top}).addClass("floatingImg").appendTo("#chatbox");
234
+
235
+ setTimeout(function(){$("#profile p").addClass("animate");$("#profile").addClass("animate");}, 100);
236
+ setTimeout(function(){
237
+ chat_message.addClass("animate");
238
+ $('.cx, .cy').addClass('s1');
239
+ setTimeout(function(){$('.cx, .cy').addClass('s2');}, 100);
240
+ setTimeout(function(){$('.cx, .cy').addClass('s3');}, 200);
241
+ }, 150);
242
+
243
+ let profile_photo = $('.floatingImg');
244
+ profile_photo.animate({
245
+ 'width': "68px",
246
+ 'left':'15px',
247
+ 'top':'20px'
248
+ }, 200);
249
+
250
+ profile_photo.hover(function () {
251
+ var profile_photo_zoom = $('#photo-block img');
252
+ console.log(profile_photo_zoom);
253
+ profile_photo_zoom[0].src = profile_photo[0].src;
254
+ $('#photo-block').fadeIn();
255
+ }, function () {
256
+ $('#photo-block').fadeOut(800);
257
+ });
258
+
259
+ var name = $(this).find("p strong").html();
260
+ var email = $(this).find("p span").html();
261
+ $("#profile p").html(name);
262
+ $("#profile span").html(email);
263
+
264
+ $(".message").not(".right").find("img").attr("src", $(clone).attr("src"));
265
+ $('#friendslist').fadeOut();
266
+ $('#chat-block').show();
267
+ $('#config-block').hide();
268
+ $('#chatview').fadeIn();
269
+
270
+
271
+ $('#close').unbind("click").click(function(){
272
+ chat_message.removeClass("animate");
273
+ chat_message.hide();
274
+ $("#profile, #profile p").removeClass("animate");
275
+ $('.cx, .cy').removeClass("s1 s2 s3");
276
+ $('.floatingImg').animate({
277
+ 'width': "40px",
278
+ 'top':top,
279
+ 'left': '12px'
280
+ }, 200, function(){$('.floatingImg').remove()});
281
+
282
+ setTimeout(function(){
283
+ $('#chatview').fadeOut();
284
+ $('#friendslist').fadeIn();
285
+ }, 50);
286
+ });
287
+
288
+ personalities = ["", "", "", "", ""];
289
+
290
+ $('#personalities').unbind("click").click(function(){
291
+ personality_input = document.querySelectorAll(".bot-personality input")
292
+ for (let i = 0; i < Math.min(personality_input.length, persona_ids[currentPersonaID]["personality"].length); i++) {
293
+ personality_input[i].value = persona_ids[currentPersonaID]["personality"][i+3];
294
+ }
295
+ setTimeout(function(){
296
+ $('#server_view').fadeOut(400, function () {
297
+ $('#server_view').fadeIn();
298
+ });
299
+ $('#parameters_view').fadeOut(400, function (){
300
+ $('#about_view').fadeOut(400, function () {
301
+ $('#personalities_view').fadeIn();
302
+ });
303
+ });
304
+ $('#about_view').fadeOut(400);
305
+ $('#chat-block').fadeOut(400, function (){
306
+ $('#config-block').fadeIn();
307
+ });
308
+
309
+ }, 50);
310
+ const elements = document.querySelectorAll(".bot-personality input")
311
+ for (let i = 0; i < Math.min(elements.length, 5); i++) {
312
+ personalities[i] = elements[i].value;
313
+ }
314
+ });
315
+
316
+ $('#personalities_cancel').unbind("click").click(function(){
317
+ const elements = document.querySelectorAll(".bot-personality input")
318
+ for (let i = 0; i < Math.min(elements.length, 5); i++) {
319
+ elements[i].value = personalities[i];
320
+ }
321
+ setTimeout(function(){
322
+ $('#config-block').fadeOut(400, function (){
323
+ $('#chat-block').fadeIn();
324
+ });
325
+ }, 50);
326
+ });
327
+
328
+ $('#personalities_update').unbind("click").click(function(){
329
+ const elements = document.querySelectorAll(".bot-personality input")
330
+ let data = {
331
+ "action": "personality",
332
+ "persona_id": currentPersonaID,
333
+ "message": []
334
+ }
335
+ // persona_ids[currentPersonaID]["personality"]
336
+ for (let i = 0; i < Math.min(elements.length, 5); i++) {
337
+ if(elements[i].value.length >0)
338
+ persona_ids[currentPersonaID]["personality"][i+3] = elements[i].value;
339
+ data.message.push(elements[i].value);
340
+ }
341
+ websocket.send(JSON.stringify(data));
342
+ setTimeout(function(){
343
+ $('#config-block').fadeOut(400, function (){
344
+ $('#chat-block').fadeIn();
345
+ });
346
+ }, 500);
347
+ });
348
+
349
+ $('#parameters').unbind("click").click(function(){
350
+ setTimeout(function(){
351
+ $('#server_view').fadeOut(400, function () {
352
+ $('#server_view').fadeIn();
353
+ });
354
+ $('#personalities_view').fadeOut(400, function (){
355
+ $('#about_view').fadeOut(400, function () {
356
+ $('#parameters_view').fadeIn();
357
+ });
358
+ });
359
+ $('#chat-block').fadeOut(400, function () {
360
+ $('#config-block').fadeIn();
361
+ });
362
+ }, 50);
363
+ });
364
+
365
+ $('#parameters_ok').unbind("click").click(function(){
366
+ setTimeout(function(){
367
+ $('#config-block').fadeOut(400, function (){
368
+ $('#chat-block').fadeIn();
369
+ });
370
+
371
+ }, 50);
372
+ });
373
+
374
+ $('#about').unbind("click").click(function(){
375
+ setTimeout(function(){
376
+ $('#server_view').fadeOut(400, function () {
377
+ $('#server_view').fadeIn();
378
+ });
379
+ $('#personalities_view').fadeOut(400, function (){
380
+ $('#parameters_view').fadeOut(400, function (){
381
+ $('#about_view').fadeIn();
382
+ });
383
+ });
384
+ $('#chat-block').fadeOut(400, function () {
385
+ $('#config-block').fadeIn();
386
+ });
387
+ }, 50);
388
+ });
389
+
390
+ $('#about_close').unbind("click").click(function(){
391
+ setTimeout(function(){
392
+ $('#config-block').fadeOut(400, function (){
393
+ $('#chat-block').fadeIn();
394
+ });
395
+
396
+ }, 50);
397
+ });
398
+
399
+ });
400
+ });
401
+
402
+ // $("#friends")[0].firstElementChild.click()
403
+ };
app/js/main.js ADDED
@@ -0,0 +1,122 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ updateValue = function(id, value) {
2
+ document.getElementById(id).innerText = value;
3
+ }
4
+
5
+ htmlToElement = function(html) {
6
+ let template = document.createElement('template');
7
+ html = html.trim(); // Never return a text node of whitespace as the result
8
+ template.innerHTML = html;
9
+ return template.content.firstChild;
10
+ }
11
+
12
+ pageSetup = function() {
13
+ const minus = document.querySelector('.minus');
14
+ const plus = document.querySelector('.plus');
15
+ const value = document.querySelector('.value');
16
+ // const users = document.querySelector('.users');
17
+ const userInput = document.querySelector('.user-input');
18
+ const userInputButton = document.querySelector('.user-input-button');
19
+ const serverMessageValue = document.querySelector('.server-message-value');
20
+ const messages = document.querySelector('.messages');
21
+ const updatePersonality = document.getElementById("updatePersonality")
22
+ const websocket = new WebSocket("wss://gpt2-chat.ai-research.id/");
23
+ //const websocket = new WebSocket("ws://localhost:8502/");
24
+
25
+ minus.onclick = function () {
26
+ websocket.send(JSON.stringify({action: 'minus'}));
27
+ }
28
+
29
+ plus.onclick = function () {
30
+ websocket.send(JSON.stringify({action: 'plus'}));
31
+ }
32
+
33
+ updatePersonality.onclick = function () {
34
+ const elements = document.querySelectorAll(".bot-personality input")
35
+ let data = {
36
+ "action": "personality",
37
+ "message": []
38
+ }
39
+ for (let i = 0; i < Math.min(elements.length, 5); i++) {
40
+ if(elements[i].value.length >0)
41
+ data.message.push(elements[i].value);
42
+ }
43
+ websocket.send(JSON.stringify(data));
44
+ }
45
+
46
+ let getParameters = function() {
47
+ return {
48
+ "do_sample": document.getElementById("doSample").checked,
49
+ "min_length": parseInt(document.getElementById("minLength").value),
50
+ "max_length": parseInt(document.getElementById("maxLength").value),
51
+ "temperature": parseFloat(document.getElementById("temperature").value),
52
+ "top_k": parseInt(document.getElementById("topK").value),
53
+ "top_p": parseFloat(document.getElementById("topP").value),
54
+ };
55
+ }
56
+
57
+ let processUserInput = function (userInput) {
58
+ let parameters = getParameters();
59
+ parameters["action"] = "talk";
60
+ parameters["utterance"] = userInput.value;
61
+ websocket.send(JSON.stringify(parameters));
62
+ const element = htmlToElement("<div class=\"message outgoing\"><div class=\"message-inner badge bg-primary text-wrap\">"
63
+ + userInput.value + "</div></div>");
64
+ userInput.value = "";
65
+ messages.appendChild(element);
66
+ messages.scrollIntoView(false)
67
+ }
68
+
69
+ userInputButton.onclick = function () {
70
+ processUserInput(userInput);
71
+ }
72
+
73
+ userInput.addEventListener("keyup", function(event) {
74
+ if (event.keyCode === 13) {
75
+ // Cancel the default action, if needed
76
+ event.preventDefault();
77
+ processUserInput(userInput);
78
+ }
79
+ });
80
+
81
+ websocket.onmessage = function (event) {
82
+ let data = JSON.parse(event.data);
83
+ switch (data.type) {
84
+ case 'connection':
85
+ console.log(data.value)
86
+ websocket.send(JSON.stringify({action: 'dialog', personality: []}));
87
+ break;
88
+ case 'state':
89
+ value.textContent = data.value;
90
+ break;
91
+ case 'users':
92
+ serverMessageValue.textContent = (
93
+ data.count.toString() + " user" +
94
+ (data.count === 1 ? "" : "s") + " online");
95
+ break;
96
+ case 'dialog':
97
+ console.log(data.message)
98
+ break;
99
+ case 'talk':
100
+ const element = htmlToElement("<div class=\"message incoming\"><div class=\"message-inner badge bg-success text-wrap\">"
101
+ + data.message+ "</div></div>");
102
+ messages.appendChild(element);
103
+ messages.scrollIntoView(false)
104
+ break;
105
+ case 'personality':
106
+ const elements = document.querySelectorAll(".bot-personality input")
107
+ for (let i = 0; i < Math.min(elements.length, data.message.length); i++) {
108
+ elements[i].value = data.message[i];
109
+ }
110
+ break;
111
+ case 'personality_reply':
112
+ serverMessageValue.textContent = data.message
113
+ setTimeout(function() {
114
+ websocket.send(JSON.stringify({action: 'get_users'}));
115
+ }, 3000);
116
+ break;
117
+ default:
118
+ console.error(
119
+ "unsupported event", data);
120
+ }
121
+ };
122
+ }