Spaces:
Running
Running
Carga archivos iniciales
Browse files- .gitignore +1 -0
- Dockerfile +20 -0
- main.py +30 -0
- requirements.txt +4 -0
- static/conversation.svg +1 -0
- static/css/app.css +457 -0
- static/css/app2.css +254 -0
- static/favicon.png +0 -0
- static/fonts/roman/h-n-roman.woff +0 -0
- static/fonts/roman/h-n-roman.woff2 +0 -0
- static/img/Chat Button.png +0 -0
- static/img/Code Button.png +0 -0
- static/img/collapse-up.svg +1 -0
- static/img/expand-down.svg +1 -0
- static/img/map-bank.png +0 -0
- static/img/map-cuisine.png +0 -0
- static/img/map-gas.png +0 -0
- static/img/map-restaurant.png +0 -0
- static/img/map-restrooms.png +0 -0
- static/img/marker_image.png +0 -0
- static/js/main.js +41 -0
- static/main.html +27 -0
.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>
|