Hugging Face's logo

Spaces:
yoeldcd
/
COBY
Running

App Files Community
yoeldcd commited on
Commit
6c4099c
·
1 Parent(s): 3941569

Upload 12 files

Browse files
Files changed (12) hide show
  1. img/avatar.jpg +0 -0
  2. img/check.svg +4 -0
  3. img/clock.svg +13 -0
  4. img/delete-blank.png +0 -0
  5. img/delete-dark.png +0 -0
  6. img/delete-message.svg +9 -0
  7. img/error.svg +2 -0
  8. img/icons8-basura.svg +3 -0
  9. img/message-ligth.svg +1 -0
  10. index.html +44 -16
  11. main.js +143 -0
  12. style.css +403 -18
img/avatar.jpg ADDED
img/check.svg ADDED
img/clock.svg ADDED
img/delete-blank.png ADDED
img/delete-dark.png ADDED
img/delete-message.svg ADDED
img/error.svg ADDED
img/icons8-basura.svg ADDED
img/message-ligth.svg ADDED
index.html CHANGED
@@ -1,19 +1,47 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <title>COBY-1</title>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+
8
+ <script src="./main.js"></script>
9
+ <link rel="stylesheet" href="./style.css"/>
10
+
11
+ </head>
12
+ <body onload="main();">
13
+
14
+ <div id="container">
15
+
16
+ <div id="headerArea">
17
+ <span id="headIcon">
18
+ <!-- Chat avatar icon has here -->
19
+ </span>
20
+ COBY
21
+ </div>
22
+
23
+ <div id="outputArea">
24
+ <!-- Here are put all chat bubbles -->
25
+ </div>
26
+
27
+ <div id="inputArea">
28
+ <button id="clearButton">
29
+ <svg class="svg-icon" viewBox="0 0 128 128">
30
+ <path class="svg-icon-path" d="M 49 1 C 47.34 1 46 2.34 46 4 C 46 5.66 47.34 7 49 7 L 79 7 C 80.66 7 82 5.66 82 4 C 82 2.34 80.66 1 79 1 L 49 1 z M 24 15 C 16.83 15 11 20.83 11 28 C 11 35.17 16.83 41 24 41 L 101 41 L 101 104 C 101 113.37 93.37 121 84 121 L 44 121 C 34.63 121 27 113.37 27 104 L 27 52 C 27 50.34 25.66 49 24 49 C 22.34 49 21 50.34 21 52 L 21 104 C 21 116.68 31.32 127 44 127 L 84 127 C 96.68 127 107 116.68 107 104 L 107 40.640625 C 112.72 39.280625 117 34.14 117 28 C 117 20.83 111.17 15 104 15 L 24 15 z M 24 21 L 104 21 C 107.86 21 111 24.14 111 28 C 111 31.86 107.86 35 104 35 L 24 35 C 20.14 35 17 31.86 17 28 C 17 24.14 20.14 21 24 21 z M 50 55 C 48.34 55 47 56.34 47 58 L 47 104 C 47 105.66 48.34 107 50 107 C 51.66 107 53 105.66 53 104 L 53 58 C 53 56.34 51.66 55 50 55 z M 78 55 C 76.34 55 75 56.34 75 58 L 75 104 C 75 105.66 76.34 107 78 107 C 79.66 107 81 105.66 81 104 L 81 58 C 81 56.34 79.66 55 78 55 z"/>
31
+ </svg>
32
+ </button>
33
+ <textarea id="inputComand" maxlength="2000"></textarea>
34
+ <button id="sendButton">
35
+ <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
36
+ <path class="svg-icon-path" d="M511.913993 928.016126c-8.256677 0-16.341341-3.096254-22.705863-9.460776l-95.983874-95.983874c-12.55703-12.55703-12.55703-32.682681 0-45.239711s32.682681-12.55703 45.239711 0l73.450025 73.450025 73.450025-73.450025c6.020494-6.020494 14.105157-9.460776 22.705863-9.460776l223.962372 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L864.026877 223.962372c0-17.545439-14.277171-31.994625-31.994625-31.994625l-639.892491 0c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 511.913993c0 17.717453 14.449185 31.994625 31.994625 31.994625l95.983874 0c17.717453 0 31.994625 14.277171 31.994625 31.994625s-14.277171 31.994625-31.994625 31.994625l-95.983874 0c-52.980346 0-95.983874-43.003528-95.983874-95.983874L96.155888 223.962372c0-52.980346 43.003528-95.983874 95.983874-95.983874l639.892491 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 511.913993c0 52.980346-43.003528 95.983874-95.983874 95.983874L621.142953 831.860239 534.619856 918.55535C528.427348 924.747858 520.17067 928.016126 511.913993 928.016126z" />
37
+ <path class="svg-icon-path" d="M335.943558 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937 47.991937 21.501764 47.991937 47.991937S362.433731 511.913993 335.943558 511.913993z" />
38
+ <path class="svg-icon-path" d="M527.911305 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937 47.991937 21.501764 47.991937 47.991937S554.401478 511.913993 527.911305 511.913993z" />
39
+ <path class="svg-icon-path" d="M720.051067 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937c26.490173 0 47.991937 21.501764 47.991937 47.991937S746.369226 511.913993 720.051067 511.913993z" />
40
+ </svg>
41
+ </button>
42
+ </div>
43
+
44
+ </div>
45
+
46
+ </body>
47
  </html>
main.js ADDED
@@ -0,0 +1,143 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ var xhr;
3
+ var outputArea;
4
+ var inputComand;
5
+
6
+ var bubleId = 0;
7
+ var reqId = 0;
8
+
9
+ const bubbleTypes = {"message": "message", "sended": "sended", "received": "received", "error": "error"};
10
+
11
+ function main() {
12
+
13
+ xhr = new XMLHttpRequest();
14
+ outputArea = document.getElementById('outputArea');
15
+ inputComand = document.getElementById('inputComand');
16
+
17
+ // add keyboard listener
18
+ window.addEventListener('keyup', function (e) {
19
+ (e.key === 'Enter') && send(inputComand.value);
20
+ });
21
+
22
+ // add button action listeners
23
+ document.querySelector('#sendButton').addEventListener('click', send);
24
+ document.querySelector('#clearButton').addEventListener('click', clearChat);
25
+
26
+ addChatBuble("EMPECEMOS", "message");
27
+ }
28
+
29
+ function makeSendHandler(chatBubble) {
30
+
31
+ xhr.onload = function (e) {
32
+ let response = xhr.responseText;
33
+
34
+ chatBubble.getElementsByClassName('statusIcon')[0].className = 'statusIcon statusChecked';
35
+
36
+ if (response.length < 1) {
37
+ send();
38
+ return;
39
+ } else {
40
+ addChatBuble(xhr.responseText, bubbleTypes.received);
41
+ }
42
+
43
+ };
44
+
45
+ xhr.onerror = function (e) {
46
+
47
+ chatBubble.getElementsByClassName('statusIcon')[0].className = 'statusIcon statusError';
48
+ addChatBuble(e.type + "", bubbleTypes.error);
49
+ };
50
+
51
+ }
52
+
53
+ function send(inputComandText) {
54
+
55
+ inputComandText || (inputComandText = inputComand.value);
56
+ inputComand.value = "";
57
+
58
+ let chatBubble;
59
+
60
+ // predict next's
61
+ if (inputComandText.length === 0) {
62
+ sendRequest("n 200");
63
+ return;
64
+ }
65
+
66
+ // delete all bubbles
67
+ if (inputComandText.includes("cls")) {
68
+ clearChat();
69
+ return;
70
+ }
71
+
72
+ // send input context
73
+ chatBubble = addChatBuble(inputComandText, bubbleTypes.sended);
74
+ makeSendHandler(chatBubble);
75
+ sendRequest(inputComandText);
76
+
77
+ }
78
+
79
+ function sendRequest(requestComandText) {
80
+
81
+ reqId = new Date().getTime();
82
+ xhr.open("GET", document.location.origin + "?cmd=\"" + requestComandText + "\"&reqId=" + reqId);
83
+ xhr.send();
84
+
85
+ }
86
+
87
+ function addChatBuble(message, type) {
88
+
89
+ let chatBubble;
90
+ let messageBox;
91
+ let controlBox;
92
+ let deleteBtn;
93
+ let statusIcon;
94
+
95
+
96
+ type = (type || bubbleTypes.sended);
97
+
98
+ // initializes chatBubble DOM elements
99
+ chatBubble = document.createElement('div');
100
+ chatBubble.className = "chatBubble " + bubbleTypes[type];
101
+ chatBubble.id = "bubble" + bubleId++;
102
+
103
+ messageBox = document.createElement('spam');
104
+ messageBox.innerText = message;
105
+ messageBox.className = "messageBox";
106
+
107
+ controlBox = document.createElement('spam');
108
+ controlBox.className = 'controlBox';
109
+
110
+ // make chatbuble control DOM elements
111
+ deleteBtn = document.createElement('spam');
112
+ deleteBtn.className = "deleteButton";
113
+ deleteBtn.onclick = function () {
114
+ outputArea.removeChild(chatBubble);
115
+ };
116
+
117
+ controlBox.appendChild(deleteBtn);
118
+
119
+ if (type === bubbleTypes.sended) {
120
+ // add message status icon
121
+ statusIcon = document.createElement('spam');
122
+ statusIcon.className = 'statusIcon statusSended';
123
+ controlBox.appendChild(statusIcon);
124
+ }
125
+
126
+ // make chatBubble DOM
127
+ chatBubble.appendChild(messageBox);
128
+ chatBubble.appendChild(controlBox);
129
+
130
+ outputArea.appendChild(chatBubble);
131
+
132
+ // slide to lats bubble
133
+ document.location = "#" + chatBubble.id;
134
+ inputComand.focus();
135
+
136
+ return chatBubble;
137
+ }
138
+
139
+ function clearChat() {
140
+ outputArea.innerHTML = "";
141
+ sendRequest("cls");
142
+ addChatBuble("EMPECEMOS\n DE NUEVO", "message");
143
+ }
style.css CHANGED
@@ -1,28 +1,413 @@
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ }
6
+
7
  body {
8
+ max-width: 100vw;
9
+ max-height: 100vh;
10
+ color: white;
11
+ }
12
+
13
+ #container {
14
+
15
+ position: absolute;
16
+ z-index: 0;
17
+
18
+ width: 100vw;
19
+ height: 100vh;
20
+
21
+ background: darkblue
22
+
23
+ }
24
+
25
+ #headerArea {
26
+
27
+ width: 95vw;
28
+ height: 13vh;
29
+
30
+ position: absolute;
31
+ top: 2vh;
32
+ left: 2vw;
33
+
34
+ border-radius: 1vh;
35
+
36
+ overflow-wrap: unset;
37
+ overflow-y: auto;
38
+
39
+ display: flex;
40
+ justify-content: center;
41
+ align-items: center;
42
+
43
+ background: rgb(100,100,100);
44
+ font-size: 1.5rem;
45
+
46
+ }
47
+
48
+ #headIcon {
49
+ display: block;
50
+
51
+ width: 8vh;
52
+ height: 8vh;
53
+ border-radius: 50%;
54
+
55
+ margin-right: 2vh;
56
+
57
+ background-color: blue;
58
+ background-image: url('./img/avatar.jpg');
59
+ background-position: 50% 50%;
60
+ background-size: 100% 100%;
61
+ background-repeat: no-repeat;
62
+
63
+ border: solid rgb(200,150,250) 0.5vh;
64
+
65
+ display: flex;
66
+ justify-content: center;
67
+ align-items: center;
68
+
69
+ }
70
+
71
+
72
+
73
+ /* output area elements style beging here */
74
+
75
+ #outputArea {
76
+
77
+ width: 95vw;
78
+ height: 60vh;
79
+
80
+ position: absolute;
81
+ top: 20vh;
82
+ left: 2vw;
83
+
84
+ background: none;
85
+
86
+ overflow-wrap: unset;
87
+ overflow-y: auto;
88
+
89
+ }
90
+
91
+ /***/
92
+ .chatBubble {
93
+
94
+ min-height: 6vh;
95
+ width: 70vw;
96
+
97
+ padding: 0.5em;
98
+ margin: 1vh;
99
+
100
+ border: solid 2px grey;
101
+
102
+ overflow-wrap: break-word;
103
+
104
+ display: flex;
105
+ flex-direction: column;
106
+ }
107
+
108
+ .sended {
109
+ margin-left: 7vw;
110
+ background: rgb(50,70,200);
111
+ ;
112
+ border-radius: 15px 15px 0px 15px;
113
+
114
+ border-right-color: darkblue;
115
+ border-bottom-color: darkblue;
116
+
117
+ }
118
+
119
+ .received {
120
+ margin-left: 3vw;
121
+ background: rgb(20,100,230);
122
+ border-radius: 15px 15px 15px 0px;
123
+
124
+ border-left-color: darkblue;
125
+ border-bottom-color: darkblue;
126
+
127
+ }
128
+
129
+ .error {
130
+
131
+ width: 80vw;
132
+
133
+ margin-left: 4vw;
134
+ background: rgb(200,30,30);
135
+ border-radius: 5px 5px 5px 5px;
136
+
137
+ border-left-color: darkred;
138
+ border-bottom-color: darkred;
139
+
140
+ }
141
+
142
+ .message {
143
+
144
+ width: 80vw;
145
+
146
+ margin-left: 4vw;
147
+ background: rgb(100,100,130);
148
+ border-radius: 5px 5px 5px 5px;
149
+
150
+ border-color: white;
151
+ text-align: center;
152
+
153
+ }
154
+
155
+ .messageBox {
156
+ display: block;
157
+ }
158
+
159
+ .controlBox {
160
+
161
+ width: 100%;
162
+ height: 4vh;
163
+
164
+ display: flex;
165
+ justify-content: end;
166
+ align-items: stretch;
167
+
168
+ }
169
+
170
+ .message .controlBox {
171
+ display: none;
172
+ }
173
+
174
+ .deleteButton {
175
+
176
+ display: block;
177
+ width: 1.2rem;
178
+ height: 1.2rem;
179
+
180
+ margin-right: 1vw;
181
+
182
+ background: none;
183
+ background-repeat: no-repeat;
184
+ background-size: 80% 80%;
185
+ background-position: 50% 50%;
186
+
187
+ background-image: url('img/delete-blank.png');
188
+
189
+ border-radius: 0.3rem;
190
+ border: none;
191
+
192
+ }
193
+
194
+ .deleteButton:hover {
195
+ background-color: #307;
196
+ border: solid white 1px;
197
+ }
198
+
199
+ .statusIcon {
200
+
201
+ display: block;
202
+ width: 1.2rem;
203
+ height: 1.2rem;
204
+
205
+ margin-right: 1vw;
206
+
207
+ background: none;
208
+ background-repeat: no-repeat;
209
+ background-image: url('img/delete-message.svg');
210
+ background-size: 80% 80%;
211
+ background-position: 50% 50%;
212
+
213
+ border: none;
214
+ }
215
+
216
+ .statusSended {
217
+ background-image: url('img/clock.svg');
218
+ }
219
+
220
+ .statusChecked {
221
+ background-image: url('img/check.svg');
222
+ }
223
+
224
+ .satusError {
225
+ background-image: url('img/error.svg');
226
+ }
227
+
228
+ /** Input area elements style begin here **/
229
+
230
+ #inputArea {
231
+
232
+ width: 95vw;
233
+ height: 15vh;
234
+
235
+ position: absolute;
236
+ bottom: 2vh;
237
+ left: 2vw;
238
+
239
+ display: flex;
240
+ justify-content: center;
241
+ align-items: center;
242
+
243
+ border: solid 2px grey;
244
+ border-radius: 5vh;
245
+
246
+ background: gray;
247
+
248
+ }
249
+
250
+ #inputComand {
251
+
252
+ width: 75vw;
253
+ height: 11vh;
254
+
255
+ margin: 1vh;
256
+
257
+ font-size: 1.5em;
258
+ text-align: start;
259
+ vertical-align: top;
260
+
261
+ border: solid 2px grey;
262
+ border-radius: 2vh;
263
+
264
+ background-color: rgb(0,0,100);
265
+ color: white;
266
+
267
+ }
268
+
269
+ #clearButton {
270
+
271
+ width: 7vh;
272
+ height: 7vh;
273
+
274
+ margin: 1vh;
275
+
276
+ font-size: 0.7em;
277
+ text-align: center;
278
+
279
+ background-color: white;
280
+
281
+ border: solid 2px rgb(150, 100, 100);
282
+ border-radius: 1vh;
283
+
284
+ display: flex;
285
+ align-items: center;
286
+ justify-content: center;
287
+
288
  }
289
 
290
+ #clearButton .svg-icon {
291
+ width: 5vh;
292
+ height: 5vh;
293
  }
294
 
295
+ #clearButton .svg-icon-path {
296
+ fill: rgb(150, 100, 100);
 
 
 
297
  }
298
 
299
+ #clearButton:hover .svg-icon-path {
300
+ fill: red;
 
 
 
 
301
  }
302
 
303
+
304
+ #sendButton {
305
+
306
+ width: 10vh;
307
+ height: 10vh;
308
+
309
+ margin: 1vh;
310
+
311
+ font-size: 0.7em;
312
+ text-align: center;
313
+
314
+ background-color: rgb(0,0,100);
315
+ background-image: linear-gradient(135deg, fuchsia, blue, cyan);
316
+ background-size: 300% 100%;
317
+
318
+ animation: background-default 5s ease infinite;
319
+
320
+ border: solid 5px;
321
+ border-radius: 50%;
322
+
323
+ display: flex;
324
+ align-items: center;
325
+ justify-content: center;
326
+
327
+ color: white;
328
+
329
+ }
330
+
331
+ #sendButton:hover {
332
+
333
+ background-color: rgb(0,0,50);
334
+ background-image: linear-gradient(45deg, blue, cyan);
335
+
336
+ animation: background-hover 5s ease infinite;
337
+
338
+ border: solid 5px cyan;
339
+ }
340
+
341
+ #sendButton .svg-icon {
342
+ width: 7vh;
343
+ height: 7vh;
344
+ }
345
+
346
+ #sendButton .svg-icon-path {
347
+ fill: white;
348
  }
349
+
350
+ #sendButton:hover .svg-icon-path {
351
+ fill: white;
352
+ }
353
+
354
+ /** animations keyfraes desriptors begin here **/
355
+
356
+ @keyframes background-default {
357
+ 0% {
358
+ background-position: 0% 50%;
359
+ border-color: cyan;
360
+
361
+ }
362
+ 50% {
363
+ background-position: 100% 50%;
364
+ border-color: fuchsia;
365
+
366
+ }
367
+ 100% {
368
+ background-position: 0% 50%;
369
+ border-color: cyan;
370
+
371
+ }
372
+ }
373
+
374
+ @keyframes background-hover {
375
+ 0% {
376
+ background-position: 0% 50%;
377
+ border-color: cyan;
378
+
379
+ }
380
+ 50% {
381
+ background-position: 100% 50%;
382
+ border-color: blue;
383
+
384
+ }
385
+ 100% {
386
+ background-position: 0% 50%;
387
+ border-color: cyan;
388
+
389
+ }
390
+ }
391
+
392
+
393
+ @keyframes icon-gradient {
394
+ 0% {
395
+ fill: #FFFFAB;
396
+ }
397
+ 50% {
398
+ fill: white;
399
+ }
400
+ 100% {
401
+ fill: #FFFFAB;
402
+ }
403
+ }
404
+
405
+ @keyframes vibrate {
406
+ 0%{
407
+ rotation: 45deg;
408
+ }
409
+
410
+ 100% {
411
+ rotation: 360deg;
412
+ }
413
+ }