Hugging Face's logo

Spaces:
Sergidev
/
PMAlpha
Sleeping

App Files Community
Sergidev commited on
Commit
6b3d6fc
•
1 Parent(s): 61cd40a

Upload static v1

Browse files
Files changed (3) hide show
  1. static/index.html +24 -0
  2. static/index.js +48 -0
  3. static/style.css +141 -0
static/index.html ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
9
+ </head>
10
+ <body>
11
+ <h1>Persistent Memory Bot</h1>
12
+ <div id="chat-container"></div>
13
+ <form id="chat-form">
14
+ <label class="switch">
15
+ <input type="checkbox" id="memory-toggle">
16
+ <span class="slider"></span>
17
+ </label>
18
+ <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.">
19
+ <button type="submit" id="send-button"><i class="fas fa-paper-plane"></i> Send</button>
20
+ </form>
21
+ <div id="loading-message" style="display: none;">Prompt received. Generating response...</div>
22
+ <script src="index.js"></script>
23
+ </body>
24
+ </html>
static/index.js ADDED
@@ -0,0 +1,48 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ $(document).ready(function() {
2
+ var memoryMode = 'full';
3
+
4
+ $('#memory-toggle').change(function() {
5
+ memoryMode = $(this).is(':checked') ? 'smart' : 'full';
6
+ });
7
+
8
+ $('#chat-form').submit(function(event) {
9
+ event.preventDefault();
10
+ var userInput = $('#user-input').val();
11
+ $('#chat-container').append('<div class="message user-message"><i class="fas fa-user icon"></i>' + userInput + '</div>');
12
+ $('#user-input').val('');
13
+ $('#send-button').prop('disabled', true);
14
+ $('#loading-message').show();
15
+ var $botMessage = $('<div class="message bot-message"><i class="fas fa-robot icon"></i></div>');
16
+ $('#chat-container').append($botMessage);
17
+ var botResponse = '';
18
+ $.ajax({
19
+ url: '/chat',
20
+ method: 'POST',
21
+ data: JSON.stringify({ user_input: userInput, mode: memoryMode }),
22
+ contentType: 'application/json',
23
+ dataType: 'text', // Add this line to handle the response as text
24
+ xhrFields: {
25
+ onprogress: function(e) {
26
+ var chunk = e.currentTarget.response.slice(botResponse.length);
27
+ botResponse += chunk;
28
+ $botMessage.html('<i class="fas fa-robot icon"></i>' + botResponse.replace(/\n/g, '<br>'));
29
+ $('#chat-container').scrollTop($('#chat-container')[0].scrollHeight);
30
+ }
31
+ },
32
+ success: function() {
33
+ $('#send-button').prop('disabled', false);
34
+ $('#loading-message').hide();
35
+ },
36
+ error: function(xhr, status, error) {
37
+ $('#send-button').prop('disabled', false);
38
+ $('#loading-message').hide();
39
+ var errorMessage = '<div class="message error-message"><i class="fas fa-exclamation-triangle icon"></i>Error: ' + error + '</div>';
40
+ $('#chat-container').append(errorMessage);
41
+ }
42
+ });
43
+ });
44
+
45
+ setInterval(function() {
46
+ $.post('/sleep');
47
+ }, 20000); // set to 50 seconds, usually 2 minutes in milliseconds
48
+ });
static/style.css ADDED
@@ -0,0 +1,141 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ margin: 0;
4
+ padding: 20px;
5
+ background: linear-gradient(to bottom right, #222222, #333333);
6
+ height: calc(100vh - 40px);
7
+ display: flex;
8
+ flex-direction: column;
9
+ }
10
+
11
+ h1 {
12
+ text-align: center;
13
+ margin-bottom: 20px;
14
+ color: #f0f8ff;
15
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
16
+ }
17
+
18
+ #chat-container {
19
+ border: 1px solid #ccc;
20
+ border-radius: 5px;
21
+ padding: 10px;
22
+ margin-bottom: 20px;
23
+ flex: 1;
24
+ overflow-y: scroll;
25
+ background-color: #1e1e1e;
26
+ color: #f0f8ff;
27
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
28
+ }
29
+
30
+ .message {
31
+ margin: 5px 0;
32
+ padding: 8px;
33
+ border-radius: 5px;
34
+ max-width: 80%;
35
+ white-space: pre-wrap;
36
+ }
37
+
38
+ .user-message {
39
+ background-color: #59788E;
40
+ color: white;
41
+ align-self: flex-end;
42
+ margin-left: auto;
43
+ margin-right: 10px;
44
+ }
45
+
46
+ .bot-message {
47
+ background-color: #2c3e4c;
48
+ color: white;
49
+ align-self: flex-start;
50
+ margin-right: auto;
51
+ }
52
+
53
+ #chat-form {
54
+ display: flex;
55
+ margin-top: auto;
56
+ margin-bottom: 20px;
57
+ }
58
+
59
+ #user-input {
60
+ flex-grow: 1;
61
+ padding: 10px;
62
+ font-size: 16px;
63
+ border: none;
64
+ border-radius: 5px;
65
+ }
66
+
67
+ button {
68
+ padding: 10px;
69
+ font-size: 16px;
70
+ background-color: #59788E;
71
+ color: white;
72
+ border: none;
73
+ border-radius: 5px;
74
+ cursor: pointer;
75
+ margin-left: 10px;
76
+ }
77
+
78
+ button:hover {
79
+ background-color: #45a049;
80
+ }
81
+
82
+ .icon {
83
+ margin-right: 5px;
84
+ }
85
+
86
+ #loading-message {
87
+ margin-top: 10px;
88
+ color: #00ff00;
89
+ font-style: italic;
90
+ }
91
+
92
+ .switch {
93
+ position: relative;
94
+ display: inline-block;
95
+ width: 60px;
96
+ height: 34px;
97
+ margin-bottom: 10px;
98
+ }
99
+
100
+ .switch input {
101
+ opacity: 0;
102
+ width: 0;
103
+ height: 0;
104
+ }
105
+
106
+ .slider {
107
+ position: absolute;
108
+ cursor: pointer;
109
+ top: 0;
110
+ left: 0;
111
+ right: 0;
112
+ bottom: 0;
113
+ background-color: #ccc;
114
+ transition: .4s;
115
+ border-radius: 34px;
116
+ }
117
+
118
+ .slider:before {
119
+ position: absolute;
120
+ content: "";
121
+ height: 26px;
122
+ width: 26px;
123
+ left: 4px;
124
+ bottom: 4px;
125
+ background-color: white;
126
+ transition: .4s;
127
+ border-radius: 50%;
128
+ }
129
+
130
+ input:checked + .slider {
131
+ background-color: #59788E;
132
+ }
133
+
134
+ input:checked + .slider:before {
135
+ transform: translateX(26px);
136
+ }
137
+
138
+ .mode-label {
139
+ margin-left: 10px;
140
+ color: #f0f8ff;
141
+ }