MGLDZM commited on
Commit
ec8894f
1 Parent(s): fba3a35

Carga archivos iniciales

Browse files
.gitignore ADDED
@@ -0,0 +1 @@
 
 
1
+ .history/
Dockerfile ADDED
@@ -0,0 +1,20 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ FROM python:3.9
2
+
3
+ WORKDIR /code
4
+
5
+ COPY ./requirements.txt /code/requirements.txt
6
+
7
+ RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
8
+
9
+ RUN useradd -m -u 1000 user
10
+
11
+ USER user
12
+
13
+ ENV HOME=/home/user \
14
+ PATH=/home/user/.local/bin:$PATH
15
+
16
+ WORKDIR $HOME/app
17
+
18
+ COPY --chown=user . $HOME/app
19
+
20
+ CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]
main.py ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ from fastapi import FastAPI, Request, staticfiles
2
+ from fastapi.responses import HTMLResponse
3
+ import os
4
+ import openai
5
+
6
+ app = FastAPI()
7
+
8
+ app.mount("/static", staticfiles.StaticFiles(directory="static"), name="static")
9
+
10
+ @app.get("/", response_class=HTMLResponse)
11
+ async def root(request: Request):
12
+ with open(os.path.join("static", "main.html")) as f:
13
+ return HTMLResponse(f.read())
14
+
15
+ @app.post("/chat")
16
+ async def chat(request: Request):
17
+ data = await request.json()
18
+ message = data["message"]
19
+ openai.api_key = str(os.getenv("OPENAI_API_KEY"))
20
+ model_engine = "gpt-3.5-turbo"
21
+ response = openai.Completion.create(
22
+ engine=model_engine,
23
+ prompt=message,
24
+ max_tokens=3000,
25
+ n=1,
26
+ temperature=1,
27
+ frequency_penalty=0,
28
+ presence_penalty=0
29
+ )
30
+ return response.choices[0]
requirements.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ fastapi==0.74.*
2
+ requests==2.27.*
3
+ openai==0.27.*
4
+ uvicorn[standard]==0.17.*
static/conversation.svg ADDED
static/css/app.css ADDED
@@ -0,0 +1,457 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ -webkit-box-sizing: border-box;
3
+ -moz-box-sizing: border-box;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: Helvetica Neue for IBM, Helvetica Neue, Helvetica, Arial, sans-serif;
9
+ margin: 0;
10
+ padding: 0;
11
+ }
12
+
13
+ div {
14
+ word-wrap: break-word;
15
+ line-height: 1.25rem;
16
+ }
17
+
18
+ .disclaimer {
19
+ font-size: 0.75rem;
20
+ padding: 0.5rem;
21
+ }
22
+
23
+ #view-change-button {
24
+ display: inline-block;
25
+ position: absolute;
26
+ width: 3.125rem;
27
+ height: 3.125rem;
28
+ border-radius: 1.5625rem;
29
+ background: #AB72F8;
30
+ top: 0.3125rem;
31
+ right: 0.3125rem;
32
+ line-height: 3.125rem;
33
+ vertical-align: middle;
34
+ }
35
+
36
+ #view-change-button img {
37
+ display: none;
38
+ width: 100%;
39
+ height: 100%;
40
+ vertical-align: middle;
41
+ }
42
+
43
+ #view-change-button:not(.full) .not-full {
44
+ display: inline-block;
45
+ }
46
+
47
+ #view-change-button.full .full {
48
+ display: inline-block;
49
+ }
50
+
51
+ #contentParent {
52
+ height: 100%;
53
+ }
54
+
55
+ .responsive-columns-wrapper {
56
+ display: -ms-flexbox;
57
+ display: -webkit-flex;
58
+ display: flex;
59
+ flex-direction: row;
60
+ -ms-display: flex;
61
+ -ms-flex-direction: row;
62
+ }
63
+
64
+ .responsive-column {
65
+ -webkit-flex: 1;
66
+ -ms-flex: 1;
67
+ flex: 1;
68
+ overflow: auto;
69
+ }
70
+
71
+ #chat-column-holder {
72
+ text-align: center;
73
+ }
74
+
75
+ .chat-column {
76
+ display: flex;
77
+ flex-direction: column;
78
+ height: 90%;
79
+ padding: 0.9375rem 2rem 0.625rem 2rem;
80
+ margin: auto;
81
+ text-align: left;
82
+ /*max-width: 25rem;*/
83
+ min-width: 9.375rem;
84
+ }
85
+
86
+ .user-typing {
87
+ flex: 0;
88
+ border: none;
89
+ color: #8d25e8;
90
+ margin: 0.75rem;
91
+ font-size: 15;
92
+ font-family: Helvetica Neue for IBM, Helvetica Neue, Helvetica, Arial, sans-serif;
93
+ }
94
+
95
+ #scrollingChat {
96
+ margin: 0.75rem;
97
+ overflow-y: auto;
98
+ overflow-x: hidden;
99
+ flex: 1;
100
+ }
101
+
102
+ .message-inner {
103
+ opacity: 0;
104
+ margin-top: 0.9375rem;
105
+ -webkit-transition-property: opacity, margin-top;
106
+ -webkit-transition-duration: 0.75s;
107
+ -webkit-transition-timing-function: ease-in;
108
+ -moz-transition-property: opacity, margin-top;
109
+ -moz-transition-duration: 0.75s;
110
+ -moz-transition-timing-function: ease-in;
111
+ -o-transition-property: opacity, margin-top;
112
+ -o-transition-duration: 0.75s;
113
+ -o-transition-timing-function: ease-in;
114
+ -ms-transition-property: opacity, margin-top;
115
+ -ms-transition-duration: 0.75s;
116
+ -ms-transition-timing-function: ease-in;
117
+ transition-property: opacity, margin-top;
118
+ transition-duration: 0.75s;
119
+ transition-timing-function: ease-in;
120
+ }
121
+
122
+ .load .message-inner {
123
+ opacity: 1;
124
+ margin-top: 0.3125rem;
125
+ }
126
+
127
+ .from-user {
128
+ text-align: right;
129
+ }
130
+
131
+ .from-user .message-inner {
132
+ position: relative;
133
+ font-size: 1rem;
134
+ color: #fff;
135
+ letter-spacing: 0.015rem;
136
+ line-height: 1.3125rem;
137
+ background: #00B4A0;
138
+ border-radius: 1.25rem;
139
+ border-bottom-right-radius: 0;
140
+ text-align: left;
141
+ display: inline-block;
142
+ margin-left: 2.5rem;
143
+ min-width: 2.5rem;
144
+ }
145
+
146
+ .from-user .message-inner p {
147
+ margin: 0.3125rem;
148
+ padding: 0 0.9375rem;
149
+ }
150
+
151
+ .from-user .message-inner:before,
152
+ .from-user .message-inner:after {
153
+ content: "";
154
+ position: absolute;
155
+ }
156
+
157
+ .from-user .message-inner:before {
158
+ z-index: -2;
159
+ bottom: -0.375rem;
160
+ right: 0;
161
+ height: 0.375rem;
162
+ width: 0.5rem;
163
+ background: #1cb3a0;
164
+ }
165
+
166
+ .from-user .message-inner:after {
167
+ z-index: -1;
168
+ bottom: -0.5rem;
169
+ right: 0;
170
+ height: 0.5rem;
171
+ width: 0.5rem;
172
+ background: #fff;
173
+ border-top-right-radius: 1.25rem;
174
+ }
175
+
176
+ .from-watson,
177
+ .message-inner {
178
+ position: relative;
179
+ border-radius: 1.5625rem;
180
+ font-size: 1rem;
181
+ color: #B5B5B5;
182
+ letter-spacing: 0.015rem;
183
+ line-height: 1.3125rem;
184
+ }
185
+
186
+ .from-watson.latest .message-inner {
187
+ color: #323232;
188
+ }
189
+
190
+ .from-watson p {
191
+ margin: 0.3125rem;
192
+ padding: 0 1.25rem;
193
+ }
194
+
195
+ .from-watson.latest.top p:before {
196
+ content: ".";
197
+ color: #9855D4;
198
+ background-image: url("../img/marker_image.png");
199
+ background-size: 0.3125rem 1.3125rem;
200
+ position: absolute;
201
+ z-index: 2;
202
+ left: 0.4375rem;
203
+ width: 0.3125rem;
204
+ height: 1.3125rem;
205
+ line-height: 1.3125rem;
206
+ }
207
+
208
+ #textInput {
209
+ border: none;
210
+ outline: none;
211
+ background: transparent;
212
+ font-size: 1rem;
213
+ color: #323232;
214
+ letter-spacing: 0.015rem;
215
+ line-height: 1.3125rem;
216
+ height: 2.5rem;
217
+ max-width: 100%;
218
+ padding-left: 0.125rem;
219
+ margin-bottom: -0.125rem;
220
+ font-family: Helvetica Neue for IBM, Helvetica Neue, Helvetica, Arial, sans-serif;
221
+ }
222
+
223
+ #textInput.underline {
224
+ border-bottom: 2px solid #00B4A0;
225
+ }
226
+
227
+ ::-webkit-input-placeholder {
228
+ color: #B5B5B5;
229
+ }
230
+
231
+ ::-moz-placeholder {
232
+ color: #B5B5B5;
233
+ opacity: 1;
234
+ }
235
+
236
+ input:-moz-placeholder {
237
+ color: #B5B5B5;
238
+ opacity: 1;
239
+ }
240
+
241
+ :-ms-input-placeholder {
242
+ color: #B5B5B5;
243
+ }
244
+
245
+ ::-ms-clear {
246
+ display: none;
247
+ }
248
+
249
+ .inputOutline {
250
+ display: block;
251
+ border-bottom: 0.0625rem solid #aeaeae;
252
+ margin-left: 0.5rem;
253
+ margin-right: 0.5rem;
254
+ }
255
+
256
+ #textInputDummy {
257
+ position: absolute;
258
+ white-space: pre;
259
+ top: 0;
260
+ left: -1000%;
261
+ opacity: 0;
262
+ }
263
+
264
+ .payload-column {
265
+ font-family: Monaco, monospace;
266
+ font-size: 0.75rem;
267
+ letter-spacing: 0;
268
+ line-height: 1.125rem;
269
+ background-color: #23292A;
270
+ color: #fff;
271
+ overflow-x: auto;
272
+ width: 20%;
273
+ max-width: 32.0625rem;
274
+ min-width: 29.6875rem;
275
+ }
276
+
277
+ #payload-column.full {
278
+ width: 100%;
279
+ max-width: none;
280
+ min-width: initial;
281
+ }
282
+
283
+ #payload-column .header-text,
284
+ #payload-column #payload-initial-message {
285
+ font-family: Helvetica Neue for IBM, Helvetica Neue, Helvetica, Arial, sans-serif;
286
+ font-size: 1.125rem;
287
+ color: #9E9E9E;
288
+ letter-spacing: 0.01875rem;
289
+ padding: 0.5rem;
290
+ padding-left: 2.5rem;
291
+ background: #383D3E;
292
+ }
293
+
294
+ .hide {
295
+ display: none;
296
+ }
297
+
298
+ .payload .line-numbers,
299
+ .payload .payload-text {
300
+ padding: 0.5rem;
301
+ }
302
+
303
+ .line-numbers {
304
+ width: 2rem;
305
+ color: #898989;
306
+ text-align: right;
307
+ }
308
+
309
+ pre {
310
+ margin: 0;
311
+ word-wrap: normal;
312
+ }
313
+
314
+ .string {
315
+ color: #54EED0;
316
+ }
317
+
318
+ .boolean,
319
+ .null,
320
+ .number {
321
+ color: #CE8EFF;
322
+ }
323
+
324
+ .key {
325
+ color: #66B7FF;
326
+ }
327
+
328
+ html {
329
+ font-size: 16px;
330
+ }
331
+
332
+ @media only screen and (max-width: 1000px) {
333
+ html {
334
+ font-size: 15px;
335
+ }
336
+ }
337
+
338
+ @media only screen and (max-width: 600px) {
339
+ html {
340
+ font-size: 14px;
341
+ }
342
+ .chat-column {
343
+ padding-top: 4rem;
344
+ }
345
+ #payload-column {
346
+ width: 0;
347
+ max-width: none;
348
+ min-width: initial;
349
+ }
350
+ }
351
+
352
+
353
+ /* IBM Design fonts https://github.ibm.com/Design/fonts */
354
+
355
+ @font-face {
356
+ font-family: 'Helvetica Neue for IBM';
357
+ src: url('../fonts/light/h-n-light.eot?') format('eot'), url('../fonts/light/h-n-light.woff2') format('woff2'), url('../fonts/light/h-n-light.woff') format('woff'), url('../fonts/light/h-n-light.ttf') format('truetype');
358
+ font-weight: 300;
359
+ font-style: normal;
360
+ }
361
+
362
+ @font-face {
363
+ font-family: 'Helvetica Neue for IBM';
364
+ src: url('../fonts/light-italic/h-n-light-italic.eot?') format('eot'), url('../fonts/light-italic/h-n-light-italic.woff2') format('woff2'), url('../fonts/light-italic/h-n-light-italic.woff') format('woff'), url('../fonts/light-italic/h-n-light-italic.ttf') format('truetype');
365
+ font-weight: 300;
366
+ font-style: italic;
367
+ }
368
+
369
+ @font-face {
370
+ font-family: 'Helvetica Neue for IBM';
371
+ src: url('../fonts/roman/h-n-roman.eot?') format('eot'), url('../fonts/roman/h-n-roman.woff2') format('woff2'), url('../fonts/roman/h-n-roman.woff') format('woff'), url('../fonts/roman/h-n-roman.ttf') format('truetype');
372
+ font-weight: 400;
373
+ font-style: normal;
374
+ }
375
+
376
+ @font-face {
377
+ font-family: 'Helvetica Neue for IBM';
378
+ src: url('../fonts/roman-italic/h-n-roman-italic.eot?') format('eot'), url('../fonts/roman-italic/h-n-roman-italic.woff2') format('woff2'), url('../fonts/roman-italic/h-n-roman-italic.woff') format('woff'), url('../fonts/roman-italic/h-n-roman-italic.ttf') format('truetype');
379
+ font-weight: 400;
380
+ font-style: italic;
381
+ }
382
+
383
+ @font-face {
384
+ font-family: 'Helvetica Neue for IBM';
385
+ src: url('../fonts/medium/h-n-medium.eot?') format('eot'), url('../fonts/medium/h-n-medium.woff2') format('woff2'), url('../fonts/medium/h-n-medium.woff') format('woff'), url('../fonts/medium/h-n-medium.ttf') format('truetype');
386
+ font-weight: 500;
387
+ font-style: normal;
388
+ }
389
+
390
+ @font-face {
391
+ font-family: 'Helvetica Neue for IBM';
392
+ src: url('../fonts/medium-italic/h-n-medium-italic.eot?') format('eot'), url('../fonts/medium-italic/h-n-medium-italic.woff2') format('woff2'), url('../fonts/medium-italic/h-n-medium-italic.woff') format('woff'), url('../fonts/medium-italic/h-n-medium-italic.ttf') format('truetype');
393
+ font-weight: 500;
394
+ font-style: italic;
395
+ }
396
+
397
+ @font-face {
398
+ font-family: 'Helvetica Neue for IBM';
399
+ src: url('../fonts/bold/h-n-bold.eot?') format('eot'), url('../fonts/bold/h-n-bold.woff2') format('woff2'), url('../fonts/bold/h-n-bold.woff') format('woff'), url('../fonts/bold/h-n-bold.ttf') format('truetype');
400
+ font-weight: 700;
401
+ font-style: normal;
402
+ }
403
+
404
+ @font-face {
405
+ font-family: 'Helvetica Neue for IBM';
406
+ src: url('../fonts/bold-italic/h-n-bold-italic.eot?') format('eot'), url('../fonts/bold-italic/h-n-bold-italic.woff2') format('woff2'), url('../fonts/bold-italic/h-n-bold-italic.woff') format('woff'), url('../fonts/bold-italic/h-n-bold-italic.ttf') format('truetype');
407
+ font-weight: 700;
408
+ font-style: italic;
409
+ }
410
+
411
+
412
+ /* IBM Icons */
413
+
414
+ @font-face {
415
+ font-family: 'ibm-icons';
416
+ src: url('../fonts/ibm-icons.eot?ytcz1z') format('eot'), url('../fonts/ibm-icons.eot?ytcz1z#iefix') format('embedded-opentype'), url('../fonts/ibm-icons.ttf?ytcz1z') format('truetype'), url('../fonts/ibm-icons.woff?ytcz1z') format('woff'), url('../fonts/ibm-icons.svg?ytcz1z#ibm-icons') format('svg');
417
+ font-weight: normal;
418
+ font-style: normal;
419
+ }
420
+
421
+
422
+ /* IBM glyphs */
423
+
424
+ @font-face {
425
+ font-family: 'ibm-glyph';
426
+ src: url('../fonts/ibm-glyphs.eot?1b8643') format('eot'), url('../fonts/ibm-glyphs.eot?1b8643#iefix') format('embedded-opentype'), url('../fonts/ibm-glyphs.ttf?1b8643') format('truetype'), url('../fonts/ibm-glyphs.woff?1b8643') format('woff'), url('../fonts/ibm-glyphs.svg?1b8643#ibm-glyph') format('svg');
427
+ font-weight: normal;
428
+ font-style: normal;
429
+ }
430
+
431
+ .options-list {
432
+ color: #8d25e8;
433
+ cursor: pointer;
434
+ }
435
+
436
+ .options-button {
437
+ color: white;
438
+ background-color: #8d25e8;
439
+ border-radius: 6px;
440
+ padding-bottom: 4px;
441
+ padding-top: 4px;
442
+ padding-left: 6px;
443
+ padding-right: 6px;
444
+ margin: 3px;
445
+ cursor: pointer;
446
+ display: inline-block;
447
+ }
448
+
449
+ .ultotal {
450
+ font-size: 12px;
451
+ padding-left: 10px;
452
+ }
453
+
454
+ .from-watson {
455
+ border-bottom: solid 1px #bbb;
456
+ padding-bottom: 0.5rem;
457
+ }
static/css/app2.css ADDED
@@ -0,0 +1,254 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ html,
2
+ body {
3
+ margin: 0;
4
+ padding: 0;
5
+ width: 100%;
6
+ height: 100%;
7
+ font-family: Monospace;
8
+ font-size: 15px;
9
+ }
10
+
11
+ body {
12
+ display: flex;
13
+ }
14
+
15
+ .wrapper {
16
+ padding: 20px 20px 80px 20px;
17
+ height: 80vh;
18
+ border-radius: 10px;
19
+ border-bottom: 5px solid #222f3d;
20
+ background: #34495e;
21
+ margin: auto;
22
+ min-width: 400px;
23
+ max-width: 650px;
24
+ width: 80%;
25
+ }
26
+
27
+ .chat {
28
+ border-radius: 5px;
29
+ display: block;
30
+ width: 100%;
31
+ height: 100%;
32
+ overflow-y: scroll;
33
+ overflow-x: hidden;
34
+ background: rgb(161, 161, 161);
35
+ padding: 10px 0;
36
+ }
37
+
38
+ .chat .message {
39
+ display: flex;
40
+ margin: 10px 0 0 10px;
41
+ filter: opacity(0.5);
42
+ }
43
+
44
+ .chat .message:last-child {
45
+ display: flex;
46
+ margin: 10px 0 0 10px;
47
+ filter: opacity(1);
48
+ }
49
+
50
+ .chat .message.no-opacity {
51
+ display: flex;
52
+ margin: 10px 0 0 10px;
53
+ filter: opacity(1);
54
+ }
55
+
56
+ .chat .message img {
57
+ margin: 0 10px 0 0;
58
+ height: 30px;
59
+ border-radius: 50%;
60
+ }
61
+
62
+ .chat .message.me img {
63
+ order: 2;
64
+ margin: 0 0 0 3px;
65
+ }
66
+
67
+ .chat .message div {
68
+ flex: 1;
69
+ }
70
+
71
+ .chat .message.me div {
72
+ padding: 0 8px 0 0;
73
+ }
74
+
75
+ .chat .message div:before {
76
+ position: relative;
77
+ float: left;
78
+ content: '';
79
+ margin: 7px 0 0 -8px;
80
+ border-style: solid;
81
+ border-width: 8px 8px 8px 0;
82
+ border-color: transparent #fff transparent transparent;
83
+ }
84
+
85
+ .chat .message.me div:before {
86
+ float: right;
87
+ margin: 7px -8px 0 0;
88
+ border-width: 8px 0 8px 8px;
89
+ border-color: transparent transparent transparent #fff;
90
+ }
91
+
92
+ .chat .message div p {
93
+ display: inline-block;
94
+ margin: 0;
95
+ padding: 8px 10px 8px 10px;
96
+ background: #fff;
97
+ border-radius: 3px;
98
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
99
+ min-width: 40%;
100
+ }
101
+
102
+ .chat .message.me div p {
103
+ float: right;
104
+ }
105
+
106
+ .chat .message div p ul {
107
+ list-style: none;
108
+ color: #555;
109
+ padding-right: 10px;
110
+ }
111
+
112
+ .chat .message:last-child div p ul {
113
+ list-style: none;
114
+ color: blue;
115
+ }
116
+
117
+ .chat .message div p ul.ultotal {
118
+ list-style: none;
119
+ color: #34495e;
120
+ font-size: 12px;
121
+ }
122
+
123
+ .input-box {
124
+ background: #222f3d;
125
+ margin: 10px 0;
126
+ height: 30px;
127
+ display: flex;
128
+ border-radius: 5px;
129
+ }
130
+
131
+ .input-box input,
132
+ .input-box button {
133
+ height: 100%;
134
+ margin: 0;
135
+ border: none;
136
+ padding: 0 15px;
137
+ }
138
+
139
+ .input-box input:focus {
140
+ outline: none;
141
+ }
142
+
143
+ .input-box .input-text {
144
+ width: 100%;
145
+ border-radius: 5px 0 0 5px;
146
+ }
147
+
148
+ .input-box .input-context {
149
+ border-radius: 0 5px 5px 0;
150
+ width: 30px;
151
+ border-left: solid 1px #777;
152
+ background-image: url(/static/chatbot_client/img/collapse-up.svg);
153
+ background-color: #555;
154
+ }
155
+
156
+ .input-box .input-context.open {
157
+ border-radius: 0 5px 5px 0;
158
+ width: 30px;
159
+ border-left: solid 1px #777;
160
+ background-image: url(/static/chatbot_client/img/expand-down.svg);
161
+ background-color: #555;
162
+ }
163
+
164
+
165
+ /* payload */
166
+
167
+ .payload-column {
168
+ font-family: Monaco, monospace;
169
+ font-size: 0.75rem;
170
+ letter-spacing: 0;
171
+ line-height: 1.125rem;
172
+ background-color: #23292A;
173
+ color: #fff;
174
+ overflow-x: auto;
175
+ width: 20%;
176
+ width: 100%;
177
+ height: 100%;
178
+ }
179
+
180
+ #payload-column.full {
181
+ width: 100%;
182
+ max-width: none;
183
+ min-width: initial;
184
+ }
185
+
186
+ #payload-column .header-text,
187
+ #payload-column #payload-initial-message {
188
+ font-family: Helvetica Neue for IBM, Helvetica Neue, Helvetica, Arial, sans-serif;
189
+ font-size: 1.125rem;
190
+ color: #9E9E9E;
191
+ letter-spacing: 0.01875rem;
192
+ padding: 0.5rem;
193
+ padding-left: 2.5rem;
194
+ background: #383D3E;
195
+ }
196
+
197
+ .hide {
198
+ display: none;
199
+ }
200
+
201
+ .payload .line-numbers,
202
+ .payload .payload-text {
203
+ padding: 0.5rem;
204
+ }
205
+
206
+ .line-numbers {
207
+ width: 2rem;
208
+ color: #898989;
209
+ text-align: right;
210
+ }
211
+
212
+ pre {
213
+ margin: 0;
214
+ word-wrap: normal;
215
+ }
216
+
217
+ .string {
218
+ color: #54EED0;
219
+ }
220
+
221
+ .boolean,
222
+ .null,
223
+ .number {
224
+ color: #CE8EFF;
225
+ }
226
+
227
+ .key {
228
+ color: #66B7FF;
229
+ }
230
+
231
+ .responsive-columns-wrapper {
232
+ display: -ms-flexbox;
233
+ display: -webkit-flex;
234
+ display: flex;
235
+ flex-direction: row;
236
+ -ms-display: flex;
237
+ -ms-flex-direction: row;
238
+ }
239
+
240
+ .options-list.active {
241
+ cursor: pointer;
242
+ }
243
+
244
+ @media all and (max-width: 440px) {
245
+ body {
246
+ height: calc(var(--windowHeight));
247
+ }
248
+ .wrapper {
249
+ height: calc(100% - 105px);
250
+ }
251
+ .chat {
252
+ border-radius: 0px
253
+ }
254
+ }
static/favicon.png ADDED
static/fonts/roman/h-n-roman.woff ADDED
Binary file (44.7 kB). View file
 
static/fonts/roman/h-n-roman.woff2 ADDED
Binary file (30.3 kB). View file
 
static/img/Chat Button.png ADDED
static/img/Code Button.png ADDED
static/img/collapse-up.svg ADDED
static/img/expand-down.svg ADDED
static/img/map-bank.png ADDED
static/img/map-cuisine.png ADDED
static/img/map-gas.png ADDED
static/img/map-restaurant.png ADDED
static/img/map-restrooms.png ADDED
static/img/marker_image.png ADDED
static/js/main.js ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ $(document).ready(function() {
2
+ // Función para enviar el mensaje al servidor al presionar enter en el input
3
+ $("#input-text").keypress(function(event) {
4
+ if (event.which == 13) {
5
+ event.preventDefault();
6
+ var message = $("#input-text").val();
7
+ $("#input-text").prop("disabled", true);
8
+ $("#input-text").val("");
9
+ sendMessage(message);
10
+ }
11
+ });
12
+
13
+ // Función para enviar el mensaje al servidor mediante POST y mostrar la respuesta
14
+ function sendMessage(message) {
15
+ // Agregar el mensaje enviado al elemento con id "payload-request"
16
+ var request_clone = $("#payload-request").clone();
17
+ request_clone.text(message);
18
+ request_clone.removeAttr("id")
19
+ $("#chat").append(request_clone);
20
+ // Realizar la petición POST al endpoint /chat
21
+ $.ajax({
22
+ url: "/chat",
23
+ type: "POST",
24
+ data: JSON.stringify({message: message}),
25
+ success: function(data) {
26
+
27
+ // Clonar el elemento con id "payload-response" y agregarlo al elemento con id "chat"
28
+ var response_clone = $("#payload-response").clone();
29
+ response_clone.text(data);
30
+ response_clone.removeAttr("id")
31
+ $("#chat").append(response_clone);
32
+
33
+ // Hacer scroll al fondo del elemento con id "chat"
34
+ $("#chat").scrollTop($("#chat")[0].scrollHeight);
35
+
36
+ $("#input-text").prop("disabled", false);
37
+ },
38
+
39
+ });
40
+ }
41
+ });
static/main.html ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html>
2
+ <head>
3
+ <title> Chatbot </title>
4
+ <meta name="viewport" content="width=device-width">
5
+ <link rel="shortcut icon" href="static/favicon.png" type="image/png">
6
+ <link rel="stylesheet" href="static/css/app2.css">
7
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
8
+ <script src="static/js/main.js"></script>
9
+ </head>
10
+ <body>
11
+
12
+ <div class="wrapper">
13
+ <div class="chat" id="chat">
14
+
15
+ </div>
16
+
17
+ <div class='input-box'>
18
+ <input class='input-text' id='input-text' placeholder="Type something" type="text" autofocus="">
19
+ <button class='input-context' id='input-context' ></button>
20
+ </div>
21
+
22
+ <div id="payload-request" class="payload user"></div>
23
+ <div id="payload-response" class="payload assist"></div>
24
+ </div>
25
+
26
+ </body>
27
+ </html>