Spaces:
Sleeping
Sleeping
Upload 3 files
Browse files- requirements.txt +254 -0
- templates/index.html +204 -0
- templates/index2.html +289 -0
requirements.txt
ADDED
@@ -0,0 +1,254 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
aiohappyeyeballs==2.4.6
|
2 |
+
aiohttp==3.11.12
|
3 |
+
aiosignal==1.3.2
|
4 |
+
alembic==1.14.1
|
5 |
+
annotated-types==0.7.0
|
6 |
+
anyio==4.8.0
|
7 |
+
appdirs==1.4.4
|
8 |
+
asgiref==3.8.1
|
9 |
+
asttokens==3.0.0
|
10 |
+
attrs==25.1.0
|
11 |
+
auth0-python==4.8.0
|
12 |
+
backoff==2.2.1
|
13 |
+
bcrypt==4.2.1
|
14 |
+
beautifulsoup4==4.13.3
|
15 |
+
bidict==0.23.1
|
16 |
+
blinker==1.9.0
|
17 |
+
build==1.2.2.post1
|
18 |
+
cachetools==5.5.1
|
19 |
+
certifi==2025.1.31
|
20 |
+
cffi==1.17.1
|
21 |
+
charset-normalizer==3.4.1
|
22 |
+
chroma-hnswlib==0.7.6
|
23 |
+
chromadb==0.5.23
|
24 |
+
click==8.1.8
|
25 |
+
cohere==5.13.12
|
26 |
+
colorama==0.4.6
|
27 |
+
coloredlogs==15.0.1
|
28 |
+
comm==0.2.2
|
29 |
+
contourpy==1.3.1
|
30 |
+
crewai==0.102.0
|
31 |
+
crewai-tools==0.36.0
|
32 |
+
cryptography==44.0.1
|
33 |
+
cycler==0.12.1
|
34 |
+
dataclasses-json==0.6.7
|
35 |
+
debugpy==1.8.12
|
36 |
+
decorator==5.1.1
|
37 |
+
Deprecated==1.2.18
|
38 |
+
deprecation==2.1.0
|
39 |
+
distro==1.9.0
|
40 |
+
docker==7.1.0
|
41 |
+
docstring_parser==0.16
|
42 |
+
duckduckgo_search==7.3.2
|
43 |
+
durationpy==0.9
|
44 |
+
embedchain==0.1.126
|
45 |
+
et_xmlfile==2.0.0
|
46 |
+
executing==2.2.0
|
47 |
+
fastapi==0.115.8
|
48 |
+
fastavro==1.10.0
|
49 |
+
filelock==3.17.0
|
50 |
+
Flask==3.1.0
|
51 |
+
Flask-SocketIO==5.5.1
|
52 |
+
flatbuffers==25.2.10
|
53 |
+
fonttools==4.56.0
|
54 |
+
frozenlist==1.5.0
|
55 |
+
fsspec==2025.2.0
|
56 |
+
google-api-core==2.24.1
|
57 |
+
google-auth==2.38.0
|
58 |
+
google-cloud-aiplatform==1.80.0
|
59 |
+
google-cloud-bigquery==3.29.0
|
60 |
+
google-cloud-core==2.4.1
|
61 |
+
google-cloud-resource-manager==1.14.0
|
62 |
+
google-cloud-storage==2.19.0
|
63 |
+
google-crc32c==1.6.0
|
64 |
+
google-resumable-media==2.7.2
|
65 |
+
google_search_results==2.4.2
|
66 |
+
googleapis-common-protos==1.67.0
|
67 |
+
gptcache==0.1.44
|
68 |
+
greenlet==3.1.1
|
69 |
+
grpc-google-iam-v1==0.14.0
|
70 |
+
grpcio==1.70.0
|
71 |
+
grpcio-status==1.70.0
|
72 |
+
grpcio-tools==1.70.0
|
73 |
+
h11==0.14.0
|
74 |
+
h2==4.2.0
|
75 |
+
hpack==4.1.0
|
76 |
+
httpcore==1.0.7
|
77 |
+
httptools==0.6.4
|
78 |
+
httpx==0.27.2
|
79 |
+
httpx-sse==0.4.0
|
80 |
+
huggingface-hub==0.28.1
|
81 |
+
humanfriendly==10.0
|
82 |
+
hyperframe==6.1.0
|
83 |
+
idna==3.10
|
84 |
+
importlib_metadata==8.5.0
|
85 |
+
importlib_resources==6.5.2
|
86 |
+
instructor==1.7.2
|
87 |
+
ipykernel==6.29.5
|
88 |
+
ipython==8.32.0
|
89 |
+
itsdangerous==2.2.0
|
90 |
+
jedi==0.19.2
|
91 |
+
Jinja2==3.1.5
|
92 |
+
jiter==0.8.2
|
93 |
+
joblib==1.4.2
|
94 |
+
json5==0.10.0
|
95 |
+
json_repair==0.36.1
|
96 |
+
jsonpatch==1.33
|
97 |
+
jsonpickle==4.0.1
|
98 |
+
jsonpointer==3.0.0
|
99 |
+
jsonref==1.1.0
|
100 |
+
jsonschema==4.23.0
|
101 |
+
jsonschema-specifications==2024.10.1
|
102 |
+
jupyter_client==8.6.3
|
103 |
+
jupyter_core==5.7.2
|
104 |
+
kiwisolver==1.4.8
|
105 |
+
kubernetes==32.0.0
|
106 |
+
lancedb==0.19.0
|
107 |
+
langchain==0.3.18
|
108 |
+
langchain-cohere==0.3.5
|
109 |
+
langchain-community==0.3.17
|
110 |
+
langchain-core==0.3.35
|
111 |
+
langchain-experimental==0.3.4
|
112 |
+
langchain-huggingface==0.1.2
|
113 |
+
langchain-openai==0.2.14
|
114 |
+
langchain-text-splitters==0.3.6
|
115 |
+
langsmith==0.1.147
|
116 |
+
litellm==1.61.8
|
117 |
+
lxml==5.3.1
|
118 |
+
Mako==1.3.9
|
119 |
+
markdown-it-py==3.0.0
|
120 |
+
markdown2==2.5.3
|
121 |
+
MarkupSafe==3.0.2
|
122 |
+
marshmallow==3.26.1
|
123 |
+
matplotlib==3.10.0
|
124 |
+
matplotlib-inline==0.1.7
|
125 |
+
mdurl==0.1.2
|
126 |
+
mem0ai==0.1.49
|
127 |
+
mmh3==5.1.0
|
128 |
+
monotonic==1.6
|
129 |
+
mpmath==1.3.0
|
130 |
+
multidict==6.1.0
|
131 |
+
mypy-extensions==1.0.0
|
132 |
+
nest-asyncio==1.6.0
|
133 |
+
networkx==3.4.2
|
134 |
+
nodeenv==1.9.1
|
135 |
+
numexpr==2.10.2
|
136 |
+
numpy==2.2.3
|
137 |
+
oauthlib==3.2.2
|
138 |
+
onnxruntime==1.20.1
|
139 |
+
openai==1.63.0
|
140 |
+
openpyxl==3.1.5
|
141 |
+
opentelemetry-api==1.30.0
|
142 |
+
opentelemetry-exporter-otlp-proto-common==1.30.0
|
143 |
+
opentelemetry-exporter-otlp-proto-grpc==1.30.0
|
144 |
+
opentelemetry-exporter-otlp-proto-http==1.30.0
|
145 |
+
opentelemetry-instrumentation==0.51b0
|
146 |
+
opentelemetry-instrumentation-asgi==0.51b0
|
147 |
+
opentelemetry-instrumentation-fastapi==0.51b0
|
148 |
+
opentelemetry-proto==1.30.0
|
149 |
+
opentelemetry-sdk==1.30.0
|
150 |
+
opentelemetry-semantic-conventions==0.51b0
|
151 |
+
opentelemetry-util-http==0.51b0
|
152 |
+
orjson==3.10.15
|
153 |
+
overrides==7.7.0
|
154 |
+
packaging==24.2
|
155 |
+
pandas==2.2.3
|
156 |
+
parso==0.8.4
|
157 |
+
pdfminer.six==20231228
|
158 |
+
pdfplumber==0.11.5
|
159 |
+
pillow==11.1.0
|
160 |
+
platformdirs==4.3.6
|
161 |
+
portalocker==2.10.1
|
162 |
+
posthog==3.13.0
|
163 |
+
primp==0.12.1
|
164 |
+
prompt_toolkit==3.0.50
|
165 |
+
propcache==0.2.1
|
166 |
+
proto-plus==1.26.0
|
167 |
+
protobuf==5.29.3
|
168 |
+
psutil==7.0.0
|
169 |
+
pure_eval==0.2.3
|
170 |
+
pyarrow==19.0.0
|
171 |
+
pyasn1==0.6.1
|
172 |
+
pyasn1_modules==0.4.1
|
173 |
+
pycparser==2.22
|
174 |
+
pydantic==2.10.6
|
175 |
+
pydantic-settings==2.7.1
|
176 |
+
pydantic_core==2.27.2
|
177 |
+
Pygments==2.19.1
|
178 |
+
PyJWT==2.10.1
|
179 |
+
pylance==0.23.0
|
180 |
+
pyparsing==3.2.1
|
181 |
+
pypdf==5.3.0
|
182 |
+
pypdfium2==4.30.1
|
183 |
+
PyPika==0.48.9
|
184 |
+
pyproject_hooks==1.2.0
|
185 |
+
pyreadline3==3.5.4
|
186 |
+
pyright==1.1.394
|
187 |
+
pysbd==0.3.4
|
188 |
+
python-dateutil==2.9.0.post0
|
189 |
+
python-dotenv==1.0.1
|
190 |
+
python-engineio==4.11.2
|
191 |
+
python-socketio==5.12.1
|
192 |
+
pytube==15.0.0
|
193 |
+
pytz==2024.2
|
194 |
+
pyvis==0.3.2
|
195 |
+
pywin32==308
|
196 |
+
PyYAML==6.0.2
|
197 |
+
pyzmq==26.2.1
|
198 |
+
qdrant-client==1.13.2
|
199 |
+
referencing==0.36.2
|
200 |
+
regex==2024.11.6
|
201 |
+
requests==2.32.3
|
202 |
+
requests-oauthlib==2.0.0
|
203 |
+
requests-toolbelt==1.0.0
|
204 |
+
rich==13.9.4
|
205 |
+
rpds-py==0.22.3
|
206 |
+
rsa==4.9
|
207 |
+
safetensors==0.5.2
|
208 |
+
schema==0.7.7
|
209 |
+
scikit-learn==1.6.1
|
210 |
+
scipy==1.15.1
|
211 |
+
seaborn==0.13.2
|
212 |
+
sentence-transformers==3.4.1
|
213 |
+
sentencepiece==0.2.0
|
214 |
+
setuptools==75.8.0
|
215 |
+
shapely==2.0.7
|
216 |
+
shellingham==1.5.4
|
217 |
+
simple-websocket==1.1.0
|
218 |
+
six==1.17.0
|
219 |
+
sniffio==1.3.1
|
220 |
+
soupsieve==2.6
|
221 |
+
SQLAlchemy==2.0.38
|
222 |
+
stack-data==0.6.3
|
223 |
+
starlette==0.45.3
|
224 |
+
sympy==1.13.1
|
225 |
+
tabulate==0.9.0
|
226 |
+
tenacity==9.0.0
|
227 |
+
threadpoolctl==3.5.0
|
228 |
+
tiktoken==0.7.0
|
229 |
+
tokenizers==0.21.0
|
230 |
+
tomli==2.2.1
|
231 |
+
tomli_w==1.2.0
|
232 |
+
torch==2.6.0
|
233 |
+
tornado==6.4.2
|
234 |
+
tqdm==4.67.1
|
235 |
+
traitlets==5.14.3
|
236 |
+
transformers==4.48.3
|
237 |
+
typer==0.15.1
|
238 |
+
types-requests==2.32.0.20241016
|
239 |
+
typing-inspect==0.9.0
|
240 |
+
typing_extensions==4.12.2
|
241 |
+
tzdata==2025.1
|
242 |
+
urllib3==2.3.0
|
243 |
+
uv==0.5.31
|
244 |
+
uvicorn==0.34.0
|
245 |
+
watchfiles==1.0.4
|
246 |
+
wcwidth==0.2.13
|
247 |
+
websocket-client==1.8.0
|
248 |
+
websockets==14.2
|
249 |
+
Werkzeug==3.1.3
|
250 |
+
wrapt==1.17.2
|
251 |
+
wsproto==1.2.0
|
252 |
+
xgboost==2.1.4
|
253 |
+
yarl==1.18.3
|
254 |
+
zipp==3.21.0
|
templates/index.html
ADDED
@@ -0,0 +1,204 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8" />
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
6 |
+
<title>Agent Chat</title>
|
7 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
|
8 |
+
<style>
|
9 |
+
/* Overall dark theme background */
|
10 |
+
body {
|
11 |
+
background-color: #1a1a2e;
|
12 |
+
color: #eaeaea;
|
13 |
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
14 |
+
margin: 0;
|
15 |
+
padding: 0;
|
16 |
+
}
|
17 |
+
.container {
|
18 |
+
max-width: 800px;
|
19 |
+
margin: 0 auto;
|
20 |
+
padding: 20px;
|
21 |
+
}
|
22 |
+
h1 {
|
23 |
+
text-align: center;
|
24 |
+
margin-bottom: 20px;
|
25 |
+
color: #eaeaea;
|
26 |
+
}
|
27 |
+
/* Chat conversation container */
|
28 |
+
.chat-container {
|
29 |
+
background-color: #16213e;
|
30 |
+
border-radius: 8px;
|
31 |
+
padding: 20px;
|
32 |
+
height: 400px;
|
33 |
+
overflow-y: auto;
|
34 |
+
margin-bottom: 20px;
|
35 |
+
}
|
36 |
+
/* Logs container */
|
37 |
+
.logs-container {
|
38 |
+
background-color: #0f3460;
|
39 |
+
border-radius: 8px;
|
40 |
+
padding: 20px;
|
41 |
+
height: 150px;
|
42 |
+
overflow-y: auto;
|
43 |
+
margin-bottom: 20px;
|
44 |
+
}
|
45 |
+
/* Message styling */
|
46 |
+
.message {
|
47 |
+
margin-bottom: 10px;
|
48 |
+
display: flex;
|
49 |
+
align-items: flex-start;
|
50 |
+
}
|
51 |
+
.message.user {
|
52 |
+
justify-content: flex-end;
|
53 |
+
}
|
54 |
+
.message.agent {
|
55 |
+
justify-content: flex-start;
|
56 |
+
}
|
57 |
+
.bubble {
|
58 |
+
max-width: 70%;
|
59 |
+
padding: 10px 15px;
|
60 |
+
border-radius: 15px;
|
61 |
+
line-height: 1.4;
|
62 |
+
word-wrap: break-word;
|
63 |
+
}
|
64 |
+
/* User message bubble style */
|
65 |
+
.bubble.user {
|
66 |
+
background-color: #007bff;
|
67 |
+
color: #fff;
|
68 |
+
border-bottom-right-radius: 0;
|
69 |
+
}
|
70 |
+
/* Agent message bubble style */
|
71 |
+
.bubble.agent {
|
72 |
+
background-color: #2d3a55;
|
73 |
+
color: #fff;
|
74 |
+
border-bottom-left-radius: 0;
|
75 |
+
}
|
76 |
+
/* Log message bubble style */
|
77 |
+
.bubble.log {
|
78 |
+
background-color: #444;
|
79 |
+
color: #ccc;
|
80 |
+
font-size: 0.85rem;
|
81 |
+
border-radius: 5px;
|
82 |
+
padding: 5px 10px;
|
83 |
+
margin: 2px 0;
|
84 |
+
}
|
85 |
+
/* Input area styling */
|
86 |
+
.input-area {
|
87 |
+
display: flex;
|
88 |
+
gap: 10px;
|
89 |
+
}
|
90 |
+
.input-area textarea {
|
91 |
+
flex: 1;
|
92 |
+
padding: 10px;
|
93 |
+
border-radius: 5px;
|
94 |
+
border: none;
|
95 |
+
resize: none;
|
96 |
+
font-size: 1rem;
|
97 |
+
}
|
98 |
+
.input-area button {
|
99 |
+
padding: 10px 20px;
|
100 |
+
border-radius: 5px;
|
101 |
+
border: none;
|
102 |
+
background-color: #007bff;
|
103 |
+
color: #fff;
|
104 |
+
cursor: pointer;
|
105 |
+
}
|
106 |
+
.input-area button:hover {
|
107 |
+
background-color: #0056b3;
|
108 |
+
}
|
109 |
+
</style>
|
110 |
+
</head>
|
111 |
+
<body>
|
112 |
+
<div class="container">
|
113 |
+
<h1>Agent Chat</h1>
|
114 |
+
<!-- Chat conversation container -->
|
115 |
+
<div class="chat-container" id="chat">
|
116 |
+
<!-- Conversation messages will appear here -->
|
117 |
+
</div>
|
118 |
+
<!-- Logs container -->
|
119 |
+
<div class="logs-container" id="logs">
|
120 |
+
<!-- Log messages will appear here -->
|
121 |
+
</div>
|
122 |
+
<!-- Input area -->
|
123 |
+
<div class="input-area">
|
124 |
+
<textarea id="prompt" rows="2" placeholder="Type your message here..."></textarea>
|
125 |
+
<button id="send">Send</button>
|
126 |
+
</div>
|
127 |
+
</div>
|
128 |
+
|
129 |
+
<script>
|
130 |
+
const socket = io();
|
131 |
+
const chatContainer = document.getElementById("chat");
|
132 |
+
const logsContainer = document.getElementById("logs");
|
133 |
+
const sendButton = document.getElementById("send");
|
134 |
+
const promptTextarea = document.getElementById("prompt");
|
135 |
+
|
136 |
+
// Function to add a chat message bubble
|
137 |
+
function addMessage(sender, text) {
|
138 |
+
const messageDiv = document.createElement("div");
|
139 |
+
messageDiv.classList.add("message", sender);
|
140 |
+
const bubbleDiv = document.createElement("div");
|
141 |
+
bubbleDiv.classList.add("bubble", sender);
|
142 |
+
bubbleDiv.textContent = text;
|
143 |
+
messageDiv.appendChild(bubbleDiv);
|
144 |
+
chatContainer.appendChild(messageDiv);
|
145 |
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
146 |
+
}
|
147 |
+
|
148 |
+
// Function to add a log message bubble
|
149 |
+
function addLogMessage(text) {
|
150 |
+
const logDiv = document.createElement("div");
|
151 |
+
logDiv.classList.add("bubble", "log");
|
152 |
+
logDiv.textContent = text;
|
153 |
+
logsContainer.appendChild(logDiv);
|
154 |
+
logsContainer.scrollTop = logsContainer.scrollHeight;
|
155 |
+
}
|
156 |
+
|
157 |
+
// Send user's message when "Send" button is clicked
|
158 |
+
sendButton.addEventListener("click", () => {
|
159 |
+
const prompt = promptTextarea.value.trim();
|
160 |
+
if (!prompt) return;
|
161 |
+
addMessage("user", prompt);
|
162 |
+
promptTextarea.value = "";
|
163 |
+
// Send prompt to the server
|
164 |
+
fetch("/generate", {
|
165 |
+
method: "POST",
|
166 |
+
headers: { "Content-Type": "application/json" },
|
167 |
+
body: JSON.stringify({ prompt: prompt })
|
168 |
+
});
|
169 |
+
});
|
170 |
+
|
171 |
+
// Handle streaming tokens for the agent's reply.
|
172 |
+
let agentMessageBubble = null;
|
173 |
+
socket.on("final_stream", (data) => {
|
174 |
+
if (!agentMessageBubble) {
|
175 |
+
// Create agent message bubble if it doesn't exist.
|
176 |
+
const messageDiv = document.createElement("div");
|
177 |
+
messageDiv.classList.add("message", "agent");
|
178 |
+
agentMessageBubble = document.createElement("div");
|
179 |
+
agentMessageBubble.classList.add("bubble", "agent");
|
180 |
+
messageDiv.appendChild(agentMessageBubble);
|
181 |
+
chatContainer.appendChild(messageDiv);
|
182 |
+
}
|
183 |
+
// Append the token to the agent's bubble.
|
184 |
+
agentMessageBubble.textContent += data.message;
|
185 |
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
186 |
+
});
|
187 |
+
|
188 |
+
// When final answer is complete, ensure the bubble is finalized.
|
189 |
+
socket.on("final", (data) => {
|
190 |
+
if (!agentMessageBubble) {
|
191 |
+
addMessage("agent", data.message);
|
192 |
+
} else {
|
193 |
+
agentMessageBubble.textContent = data.message;
|
194 |
+
agentMessageBubble = null;
|
195 |
+
}
|
196 |
+
});
|
197 |
+
|
198 |
+
// Append log messages as they arrive.
|
199 |
+
socket.on("log", (data) => {
|
200 |
+
addLogMessage(data.message);
|
201 |
+
});
|
202 |
+
</script>
|
203 |
+
</body>
|
204 |
+
</html>
|
templates/index2.html
ADDED
@@ -0,0 +1,289 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8" />
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
6 |
+
<title>Agent Chat - Idea Generator</title>
|
7 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
|
8 |
+
<style>
|
9 |
+
/* Overall dark theme */
|
10 |
+
body {
|
11 |
+
background-color: #1a1a2e;
|
12 |
+
color: #eaeaea;
|
13 |
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
14 |
+
margin: 0;
|
15 |
+
padding: 0;
|
16 |
+
}
|
17 |
+
.container {
|
18 |
+
max-width: 800px;
|
19 |
+
margin: 0 auto;
|
20 |
+
padding: 20px;
|
21 |
+
display: flex;
|
22 |
+
flex-direction: column;
|
23 |
+
gap: 20px;
|
24 |
+
}
|
25 |
+
h1 {
|
26 |
+
text-align: center;
|
27 |
+
margin-bottom: 10px;
|
28 |
+
color: #eaeaea;
|
29 |
+
}
|
30 |
+
/* Wrapper for chat area, logs, and input */
|
31 |
+
.chat-section {
|
32 |
+
display: flex;
|
33 |
+
flex-direction: column;
|
34 |
+
border: 1px solid #0f3460;
|
35 |
+
border-radius: 8px;
|
36 |
+
overflow: hidden;
|
37 |
+
}
|
38 |
+
/* Chat container */
|
39 |
+
.chat-container {
|
40 |
+
background-color: #16213e;
|
41 |
+
padding: 20px;
|
42 |
+
height: 400px;
|
43 |
+
overflow-y: auto;
|
44 |
+
}
|
45 |
+
/* Logs container with a flash (fade-in) effect */
|
46 |
+
.logs-container {
|
47 |
+
background-color: #0f3460;
|
48 |
+
padding: 10px 20px;
|
49 |
+
height: 80px;
|
50 |
+
overflow-y: auto;
|
51 |
+
}
|
52 |
+
.bubble.log {
|
53 |
+
background-color: #444;
|
54 |
+
color: #ccc;
|
55 |
+
font-size: 0.85rem;
|
56 |
+
border-radius: 5px;
|
57 |
+
padding: 5px 10px;
|
58 |
+
margin: 2px 0;
|
59 |
+
animation: flash 0.5s ease-in-out;
|
60 |
+
}
|
61 |
+
@keyframes flash {
|
62 |
+
0% { opacity: 0; }
|
63 |
+
100% { opacity: 1; }
|
64 |
+
}
|
65 |
+
/* Chat message styles */
|
66 |
+
.message {
|
67 |
+
margin-bottom: 10px;
|
68 |
+
display: flex;
|
69 |
+
align-items: flex-start;
|
70 |
+
}
|
71 |
+
.message.user {
|
72 |
+
justify-content: flex-end;
|
73 |
+
}
|
74 |
+
.message.agent {
|
75 |
+
justify-content: flex-start;
|
76 |
+
}
|
77 |
+
.bubble {
|
78 |
+
max-width: 70%;
|
79 |
+
padding: 10px 15px;
|
80 |
+
border-radius: 15px;
|
81 |
+
line-height: 1.4;
|
82 |
+
word-wrap: break-word;
|
83 |
+
}
|
84 |
+
.bubble.user {
|
85 |
+
background-color: #007bff;
|
86 |
+
color: #fff;
|
87 |
+
border-bottom-right-radius: 0;
|
88 |
+
}
|
89 |
+
.bubble.agent {
|
90 |
+
background-color: #2d3a55;
|
91 |
+
color: #fff;
|
92 |
+
border-bottom-left-radius: 0;
|
93 |
+
position: relative;
|
94 |
+
}
|
95 |
+
/* Input area styles */
|
96 |
+
.input-area {
|
97 |
+
display: flex;
|
98 |
+
flex-direction: column;
|
99 |
+
gap: 10px;
|
100 |
+
padding: 10px; /* Reduced padding */
|
101 |
+
background-color: #16213e;
|
102 |
+
box-sizing: border-box; /* Ensure padding counts toward total width/height */
|
103 |
+
}
|
104 |
+
|
105 |
+
.input-area input,
|
106 |
+
.input-area textarea {
|
107 |
+
width: 100%;
|
108 |
+
padding: 10px;
|
109 |
+
border-radius: 5px;
|
110 |
+
border: none;
|
111 |
+
resize: none;
|
112 |
+
font-size: 1rem;
|
113 |
+
box-sizing: border-box; /* Prevents overflow when combined with padding */
|
114 |
+
}
|
115 |
+
|
116 |
+
.input-area button {
|
117 |
+
padding: 10px 20px;
|
118 |
+
border-radius: 5px;
|
119 |
+
border: none;
|
120 |
+
background-color: #007bff;
|
121 |
+
color: #fff;
|
122 |
+
cursor: pointer;
|
123 |
+
align-self: flex-end;
|
124 |
+
}
|
125 |
+
|
126 |
+
.input-area button:hover {
|
127 |
+
background-color: #0056b3;
|
128 |
+
}
|
129 |
+
/* Loader spinner styling */
|
130 |
+
.loader {
|
131 |
+
border: 3px solid #f3f3f3;
|
132 |
+
border-top: 3px solid #007bff;
|
133 |
+
border-radius: 50%;
|
134 |
+
width: 16px;
|
135 |
+
height: 16px;
|
136 |
+
animation: spin 1s linear infinite;
|
137 |
+
margin-right: 10px;
|
138 |
+
display: inline-block;
|
139 |
+
vertical-align: middle;
|
140 |
+
}
|
141 |
+
@keyframes spin {
|
142 |
+
0% { transform: rotate(0deg); }
|
143 |
+
100% { transform: rotate(360deg); }
|
144 |
+
}
|
145 |
+
</style>
|
146 |
+
</head>
|
147 |
+
<body>
|
148 |
+
<div class="container">
|
149 |
+
<h1>Agent Chat - Idea Generator</h1>
|
150 |
+
<div class="chat-section">
|
151 |
+
<!-- Chat conversation container -->
|
152 |
+
<div class="chat-container" id="chat">
|
153 |
+
<!-- Conversation messages will appear here -->
|
154 |
+
</div>
|
155 |
+
<!-- Logs container -->
|
156 |
+
<div class="logs-container" id="logs">
|
157 |
+
<!-- Log messages will appear here -->
|
158 |
+
</div>
|
159 |
+
<!-- Input area -->
|
160 |
+
<div class="input-area">
|
161 |
+
<input type="text" id="title" placeholder="Title of Idea (optional)" />
|
162 |
+
<textarea id="roughIdea" rows="2" placeholder="Rough Idea (optional)"></textarea>
|
163 |
+
<input type="text" id="category" placeholder="Category (optional)" />
|
164 |
+
<textarea id="query" rows="3" placeholder="User Query (mandatory)"></textarea>
|
165 |
+
<button id="send">Send</button>
|
166 |
+
</div>
|
167 |
+
</div>
|
168 |
+
</div>
|
169 |
+
|
170 |
+
<script>
|
171 |
+
const socket = io();
|
172 |
+
const chatContainer = document.getElementById("chat");
|
173 |
+
const logsContainer = document.getElementById("logs");
|
174 |
+
const sendButton = document.getElementById("send");
|
175 |
+
|
176 |
+
// Function to add a chat message bubble
|
177 |
+
function addMessage(sender, text) {
|
178 |
+
const messageDiv = document.createElement("div");
|
179 |
+
messageDiv.classList.add("message", sender);
|
180 |
+
const bubbleDiv = document.createElement("div");
|
181 |
+
bubbleDiv.classList.add("bubble", sender);
|
182 |
+
bubbleDiv.textContent = text;
|
183 |
+
messageDiv.appendChild(bubbleDiv);
|
184 |
+
chatContainer.appendChild(messageDiv);
|
185 |
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
186 |
+
}
|
187 |
+
|
188 |
+
// Function to add a log message bubble with flash effect
|
189 |
+
function addLogMessage(text) {
|
190 |
+
const logDiv = document.createElement("div");
|
191 |
+
logDiv.classList.add("bubble", "log");
|
192 |
+
logDiv.textContent = text;
|
193 |
+
logsContainer.appendChild(logDiv);
|
194 |
+
logsContainer.scrollTop = logsContainer.scrollHeight;
|
195 |
+
}
|
196 |
+
|
197 |
+
// Variable to hold the agent's message bubble (with loader)
|
198 |
+
let agentMessageBubble = null;
|
199 |
+
|
200 |
+
// When the user clicks Send
|
201 |
+
sendButton.addEventListener("click", () => {
|
202 |
+
const title = document.getElementById("title").value.trim();
|
203 |
+
const roughIdea = document.getElementById("roughIdea").value.trim();
|
204 |
+
const category = document.getElementById("category").value.trim();
|
205 |
+
const query = document.getElementById("query").value.trim();
|
206 |
+
|
207 |
+
if (!query) {
|
208 |
+
alert("User Query is required.");
|
209 |
+
return;
|
210 |
+
}
|
211 |
+
|
212 |
+
// Display the user's message in chat.
|
213 |
+
addMessage("user", query);
|
214 |
+
|
215 |
+
// Clear input fields.
|
216 |
+
document.getElementById("title").value = "";
|
217 |
+
document.getElementById("roughIdea").value = "";
|
218 |
+
document.getElementById("category").value = "";
|
219 |
+
document.getElementById("query").value = "";
|
220 |
+
|
221 |
+
// Create an agent bubble with a loader to indicate AI is processing.
|
222 |
+
if (!agentMessageBubble) {
|
223 |
+
const messageDiv = document.createElement("div");
|
224 |
+
messageDiv.classList.add("message", "agent");
|
225 |
+
agentMessageBubble = document.createElement("div");
|
226 |
+
agentMessageBubble.classList.add("bubble", "agent");
|
227 |
+
|
228 |
+
// Create and add loader element.
|
229 |
+
const loader = document.createElement("div");
|
230 |
+
loader.classList.add("loader");
|
231 |
+
agentMessageBubble.appendChild(loader);
|
232 |
+
|
233 |
+
messageDiv.appendChild(agentMessageBubble);
|
234 |
+
chatContainer.appendChild(messageDiv);
|
235 |
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
236 |
+
}
|
237 |
+
|
238 |
+
// Send the collected fields to the server.
|
239 |
+
fetch("/generate", {
|
240 |
+
method: "POST",
|
241 |
+
headers: { "Content-Type": "application/json" },
|
242 |
+
body: JSON.stringify({
|
243 |
+
title: title,
|
244 |
+
rough_idea: roughIdea,
|
245 |
+
category: category,
|
246 |
+
query: query
|
247 |
+
})
|
248 |
+
});
|
249 |
+
});
|
250 |
+
|
251 |
+
// Handle streaming tokens from the agent.
|
252 |
+
socket.on("final_stream", (data) => {
|
253 |
+
if (agentMessageBubble) {
|
254 |
+
// Remove loader if still present.
|
255 |
+
const loader = agentMessageBubble.querySelector(".loader");
|
256 |
+
if (loader) {
|
257 |
+
loader.remove();
|
258 |
+
// Clear any leftover content.
|
259 |
+
agentMessageBubble.textContent = "";
|
260 |
+
}
|
261 |
+
// Append the streaming token.
|
262 |
+
agentMessageBubble.textContent += data.message;
|
263 |
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
264 |
+
} else {
|
265 |
+
// Fallback: create a new agent message if needed.
|
266 |
+
addMessage("agent", data.message);
|
267 |
+
}
|
268 |
+
});
|
269 |
+
|
270 |
+
// When the final answer is complete.
|
271 |
+
// When the final answer is complete.
|
272 |
+
socket.on("final", (data) => {
|
273 |
+
// If there's no existing agent bubble, create one.
|
274 |
+
if (!agentMessageBubble) {
|
275 |
+
addMessage("agent", "");
|
276 |
+
}
|
277 |
+
// Use innerHTML to preserve any HTML tags or Markdown-converted HTML
|
278 |
+
agentMessageBubble.innerHTML = data.message;
|
279 |
+
// Reset agentMessageBubble for next time
|
280 |
+
agentMessageBubble = null;
|
281 |
+
});
|
282 |
+
|
283 |
+
// Append log messages as they arrive.
|
284 |
+
socket.on("log", (data) => {
|
285 |
+
addLogMessage(data.message);
|
286 |
+
});
|
287 |
+
</script>
|
288 |
+
</body>
|
289 |
+
</html>
|