WebashalarForML commited on
Commit
fa2eb40
·
verified ·
1 Parent(s): 34d17cd

Upload 3 files

Browse files
Files changed (3) hide show
  1. requirements.txt +254 -0
  2. templates/index.html +204 -0
  3. 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>