Sergidev commited on
Commit
a30aa8d
1 Parent(s): d40b0b4

Upload index.html

Browse files
Files changed (1) hide show
  1. static/index.html +215 -0
static/index.html ADDED
@@ -0,0 +1,215 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Persistent Memory Bot</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
7
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ margin: 0;
12
+ padding: 20px;
13
+ background: linear-gradient(to bottom right, #222222, #333333);
14
+ height: calc(100vh - 40px);
15
+ display: flex;
16
+ flex-direction: column;
17
+ }
18
+
19
+ h1 {
20
+ text-align: center;
21
+ margin-bottom: 20px;
22
+ color: #f0f8ff;
23
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
24
+ }
25
+
26
+ #chat-container {
27
+ border: 1px solid #ccc;
28
+ border-radius: 5px;
29
+ padding: 10px;
30
+ margin-bottom: 20px;
31
+ flex: 1;
32
+ overflow-y: scroll;
33
+ background-color: #1e1e1e;
34
+ color: #f0f8ff;
35
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
36
+ }
37
+
38
+ .message {
39
+ margin: 5px 0;
40
+ padding: 8px;
41
+ border-radius: 5px;
42
+ max-width: 80%;
43
+ white-space: pre-wrap;
44
+ }
45
+
46
+ .user-message {
47
+ background-color: #59788E;
48
+ color: white;
49
+ align-self: flex-end;
50
+ margin-left: auto;
51
+ margin-right: 10px;
52
+ }
53
+
54
+ .bot-message {
55
+ background-color: #2c3e4c;
56
+ color: white;
57
+ align-self: flex-start;
58
+ margin-right: auto;
59
+ }
60
+
61
+ #chat-form {
62
+ display: flex;
63
+ margin-top: auto;
64
+ margin-bottom: 20px;
65
+ }
66
+
67
+ #user-input {
68
+ flex-grow: 1;
69
+ padding: 10px;
70
+ font-size: 16px;
71
+ border: none;
72
+ border-radius: 5px;
73
+ }
74
+
75
+ button {
76
+ padding: 10px;
77
+ font-size: 16px;
78
+ background-color: #59788E;
79
+ color: white;
80
+ border: none;
81
+ border-radius: 5px;
82
+ cursor: pointer;
83
+ margin-left: 10px;
84
+ }
85
+
86
+ button:hover {
87
+ background-color: #45a049;
88
+ }
89
+
90
+ .icon {
91
+ margin-right: 5px;
92
+ }
93
+
94
+ #loading-message {
95
+ margin-top: 10px;
96
+ color: #00ff00;
97
+ font-style: italic;
98
+ }
99
+
100
+ .switch {
101
+ position: relative;
102
+ display: inline-block;
103
+ width: 60px;
104
+ height: 34px;
105
+ margin-bottom: 10px;
106
+ }
107
+
108
+ .switch input {
109
+ opacity: 0;
110
+ width: 0;
111
+ height: 0;
112
+ }
113
+
114
+ .slider {
115
+ position: absolute;
116
+ cursor: pointer;
117
+ top: 0;
118
+ left: 0;
119
+ right: 0;
120
+ bottom: 0;
121
+ background-color: #ccc;
122
+ transition: .4s;
123
+ border-radius: 34px;
124
+ }
125
+
126
+ .slider:before {
127
+ position: absolute;
128
+ content: "";
129
+ height: 26px;
130
+ width: 26px;
131
+ left: 4px;
132
+ bottom: 4px;
133
+ background-color: white;
134
+ transition: .4s;
135
+ border-radius: 50%;
136
+ }
137
+
138
+ input:checked + .slider {
139
+ background-color: #59788E;
140
+ }
141
+
142
+ input:checked + .slider:before {
143
+ transform: translateX(26px);
144
+ }
145
+
146
+ .mode-label {
147
+ margin-left: 10px;
148
+ color: #f0f8ff;
149
+ }
150
+ </style>
151
+ <script>
152
+ $(document).ready(function() {
153
+ var memoryMode = 'full';
154
+
155
+ $('#memory-toggle').change(function() {
156
+ memoryMode = $(this).is(':checked') ? 'smart' : 'full';
157
+ });
158
+
159
+ $('#chat-form').submit(function(event) {
160
+ event.preventDefault();
161
+ var userInput = $('#user-input').val();
162
+ $('#chat-container').append('<div class="message user-message"><i class="fas fa-user icon"></i>' + userInput + '</div>');
163
+ $('#user-input').val('');
164
+ $('#send-button').prop('disabled', true);
165
+ $('#loading-message').show();
166
+ var $botMessage = $('<div class="message bot-message"><i class="fas fa-robot icon"></i></div>');
167
+ $('#chat-container').append($botMessage);
168
+ var botResponse = '';
169
+ $.ajax({
170
+ url: '/chat',
171
+ method: 'POST',
172
+ data: JSON.stringify({ user_input: userInput, mode: memoryMode }),
173
+ contentType: 'application/json',
174
+ dataType: 'text', // Add this line to handle the response as text
175
+ xhrFields: {
176
+ onprogress: function(e) {
177
+ var chunk = e.currentTarget.response.slice(botResponse.length);
178
+ botResponse += chunk;
179
+ $botMessage.html('<i class="fas fa-robot icon"></i>' + botResponse.replace(/\n/g, '<br>'));
180
+ $('#chat-container').scrollTop($('#chat-container')[0].scrollHeight);
181
+ }
182
+ },
183
+ success: function() {
184
+ $('#send-button').prop('disabled', false);
185
+ $('#loading-message').hide();
186
+ },
187
+ error: function(xhr, status, error) {
188
+ $('#send-button').prop('disabled', false);
189
+ $('#loading-message').hide();
190
+ var errorMessage = '<div class="message error-message"><i class="fas fa-exclamation-triangle icon"></i>Error: ' + error + '</div>';
191
+ $('#chat-container').append(errorMessage);
192
+ }
193
+ });
194
+ });
195
+
196
+ setInterval(function() {
197
+ $.post('/sleep');
198
+ }, 20000); // set to 50 seconds, usually 2 minutes in milliseconds
199
+ });
200
+ </script>
201
+ </head>
202
+ <body>
203
+ <h1>Persistent Memory Bot</h1>
204
+ <div id="chat-container"></div>
205
+ <form id="chat-form">
206
+ <label class="switch">
207
+ <input type="checkbox" id="memory-toggle">
208
+ <span class="slider"></span>
209
+ </label>
210
+ <input type="text" id="user-input" name="user_input" placeholder="Enter your message, use the switch to toggle smart mode for faster responses but less memory. Cannot provide financial/legal advice.">
211
+ <button type="submit" id="send-button"><i class="fas fa-paper-plane"></i> Send</button>
212
+ </form>
213
+ <div id="loading-message" style="display: none;">Prompt received. Generating response...</div>
214
+ </body>
215
+ </html>