Hugging Face's logo

Spaces:
pvanand
/
code-chat-api
Sleeping

App Files Community
pvanand commited on
Commit
6bb98fe
·
verified ·
1 Parent(s): f47e966

Upload index.html

Browse files
Files changed (1) hide show
  1. static/chatui/index.html +357 -0
static/chatui/index.html ADDED
@@ -0,0 +1,357 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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.0">
6
+ <title>Agent Chat Interface</title>
7
+ <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
8
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
9
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
10
+ <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
12
+ <style>
13
+ .chat-message {
14
+ transition: opacity 0.3s ease, transform 0.3s ease;
15
+ }
16
+ .chat-message-enter {
17
+ opacity: 0;
18
+ transform: translateY(10px);
19
+ }
20
+ .chat-message-enter-active {
21
+ opacity: 1;
22
+ transform: translateY(0);
23
+ }
24
+ .tool-section {
25
+ transition: max-height 0.3s ease, opacity 0.3s ease;
26
+ }
27
+ .tool-section.collapsed {
28
+ max-height: 0;
29
+ opacity: 0;
30
+ overflow: hidden;
31
+ }
32
+ .tool-section.expanded {
33
+ max-height: 1000px;
34
+ opacity: 1;
35
+ }
36
+ pre code {
37
+ display: block;
38
+ background: #f5f5f5;
39
+ padding: 1rem;
40
+ border-radius: 0.5rem;
41
+ overflow-x: auto;
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-50 font-inter">
46
+ <div id="app" class="min-h-screen flex flex-col">
47
+ <div class="max-w-4xl mx-auto p-4 flex-1 flex flex-col w-full">
48
+ <!-- Chat Messages -->
49
+ <div class="bg-white rounded-lg shadow-lg p-6 mb-4 flex-1 overflow-y-auto w-full">
50
+ <div v-for="(message, index) in messages" :key="index" class="chat-message mb-4">
51
+ <!-- User Message -->
52
+ <div v-if="message.role === 'user'" class="flex justify-end">
53
+ <div class="bg-blue-500 text-white rounded-lg py-2 px-4 max-w-[80%] shadow-sm">
54
+ {{ message.content }}
55
+ </div>
56
+ </div>
57
+
58
+ <!-- Assistant Message -->
59
+ <div v-else class="flex flex-col space-y-2">
60
+ <!-- Regular Message -->
61
+ <div v-if="message.content" class="bg-gray-100 rounded-lg py-2 px-4 max-w-[80%] shadow-sm">
62
+ <div v-html="formatMarkdown(message.content)"></div>
63
+ </div>
64
+
65
+ <!-- Tool Execution -->
66
+ <div v-if="message.tool_data" class="border border-gray-200 rounded-lg p-4 max-w-[80%] shadow-sm">
67
+ <div class="flex items-center justify-between cursor-pointer"
68
+ @click="toggleTool(index)">
69
+ <h3 class="font-semibold text-gray-700">
70
+ Tool: {{ message.tool_data.tool }}
71
+ </h3>
72
+ <span class="text-gray-500">
73
+ {{ isToolExpanded(index) ? '▼' : '▶' }}
74
+ </span>
75
+ </div>
76
+
77
+ <div :class="['tool-section', isToolExpanded(index) ? 'expanded' : 'collapsed']">
78
+ <!-- Tool Input -->
79
+ <div v-if="message.tool_data.input" class="mt-2">
80
+ <div class="text-sm text-gray-600">Input:</div>
81
+ <pre v-if="message.tool_data.tool === 'execute_python'"><code>{{ message.tool_data.input.code }}</code></pre>
82
+ <pre v-else class="bg-gray-50 p-2 rounded mt-1 text-sm overflow-x-auto">{{ JSON.stringify(message.tool_data.input, null, 2) }}</pre>
83
+ </div>
84
+
85
+ <!-- Tool Output -->
86
+ <div v-if="message.tool_data.output" class="mt-2">
87
+ <div class="text-sm text-gray-600">Output:</div>
88
+ <div v-if="message.tool_data.output.artifacts" class="space-y-4">
89
+ <div v-for="(artifact, artifactIndex) in message.tool_data.output.artifacts"
90
+ :key="artifact.artifact_id"
91
+ class="mt-4">
92
+ <!-- Image Artifact -->
93
+ <img v-if="artifact.artifact_type.startsWith('image/')"
94
+ :src="artifact.imageData ? `data:${artifact.artifact_type};base64,${artifact.imageData}` : ''"
95
+ class="max-w-full h-auto rounded shadow-sm"
96
+ :alt="artifact.artifact_id">
97
+
98
+ <!-- Plotly Artifact -->
99
+ <div v-else-if="artifact.artifact_type === 'application/vnd.plotly.v1+json'"
100
+ :id="'plot-' + index + '-' + artifactIndex"
101
+ class="w-full h-96">
102
+ </div>
103
+
104
+ <!-- HTML Artifact -->
105
+ <div v-else-if="artifact.artifact_type === 'text/html'"
106
+ class="border rounded p-2 bg-gray-50 shadow-sm"
107
+ v-html="artifact.content">
108
+ </div>
109
+ </div>
110
+ </div>
111
+ <pre v-if="message.tool_data.output.text"
112
+ class="bg-gray-50 p-2 rounded mt-1 text-sm overflow-x-auto shadow-sm">{{ message.tool_data.output.text }}</pre>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Input Area -->
121
+ <div class="flex space-x-4">
122
+ <input v-model="userInput"
123
+ @keyup.enter="sendMessage"
124
+ type="text"
125
+ class="flex-1 rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
126
+ placeholder="Type your message...">
127
+ <button @click="sendMessage"
128
+ class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm">
129
+ Send
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <script>
136
+ const { createApp } = Vue
137
+
138
+ createApp({
139
+ data() {
140
+ return {
141
+ messages: [],
142
+ userInput: '',
143
+ expandedTools: new Set(),
144
+ currentAssistantMessage: '',
145
+ session_token: crypto.randomUUID()
146
+ }
147
+ },
148
+ methods: {
149
+ formatMarkdown(text) {
150
+ return marked.parse(text)
151
+ },
152
+ toggleTool(index) {
153
+ if (this.expandedTools.has(index)) {
154
+ this.expandedTools.delete(index)
155
+ } else {
156
+ this.expandedTools.add(index)
157
+ // Re-render Plotly charts when expanding, only if they haven't been rendered
158
+ this.$nextTick(() => {
159
+ const message = this.messages[index]
160
+ if (message?.tool_data?.output?.artifacts) {
161
+ const needsRendering = message.tool_data.output.artifacts.some(artifact => {
162
+ if (artifact.artifact_type === 'application/vnd.plotly.v1+json') {
163
+ const elementId = `plot-${index}-${message.tool_data.output.artifacts.indexOf(artifact)}`
164
+ const element = document.getElementById(elementId)
165
+ return element && !element._fullData
166
+ }
167
+ return false
168
+ })
169
+ if (needsRendering) {
170
+ this.renderPlotlyCharts(index)
171
+ }
172
+ }
173
+ })
174
+ }
175
+ },
176
+ isToolExpanded(index) {
177
+ return this.expandedTools.has(index)
178
+ },
179
+ async fetchArtifact(artifactId) {
180
+ try {
181
+ const response = await fetch(`https://pvanand-code-execution-files-v4.hf.space/artifacts/${artifactId}`)
182
+ if (!response.ok) throw new Error('Failed to fetch artifact')
183
+ const data = await response.json()
184
+ return data
185
+ } catch (error) {
186
+ console.error('Error fetching artifact:', error)
187
+ return null
188
+ }
189
+ },
190
+ renderPlotlyCharts(messageIndex) {
191
+ const message = this.messages[messageIndex]
192
+ if (!message?.tool_data?.output?.artifacts) return
193
+
194
+ message.tool_data.output.artifacts.forEach((artifact, artifactIndex) => {
195
+ if (artifact.artifact_type === 'application/vnd.plotly.v1+json' && artifact.plotData) {
196
+ const elementId = `plot-${messageIndex}-${artifactIndex}`
197
+ const element = document.getElementById(elementId)
198
+ if (element) {
199
+ // Check if a plot already exists in this element
200
+ if (element._fullData) {
201
+ // Update existing plot
202
+ Plotly.react(elementId, artifact.plotData)
203
+ } else {
204
+ // Create new plot
205
+ Plotly.newPlot(elementId, artifact.plotData)
206
+ }
207
+ }
208
+ }
209
+ })
210
+ },
211
+ async handleToolEnd(eventData) {
212
+ // Create a new message for each tool output
213
+ const newMessage = {
214
+ role: 'assistant',
215
+ tool_data: {
216
+ tool: eventData.tool,
217
+ output: {
218
+ text: eventData.output.text,
219
+ artifacts: []
220
+ }
221
+ }
222
+ }
223
+
224
+ if (eventData.output?.artifacts) {
225
+ for (const artifact of eventData.output.artifacts) {
226
+ const data = await this.fetchArtifact(artifact.artifact_id)
227
+
228
+ if (artifact.artifact_type.startsWith('image/')) {
229
+ artifact.imageData = data.data
230
+ }
231
+ else if (artifact.artifact_type === 'application/vnd.plotly.v1+json') {
232
+ artifact.plotData = JSON.parse(data.data)
233
+ }
234
+ else if (artifact.artifact_type === 'text/html') {
235
+ artifact.content = data.data
236
+ }
237
+ newMessage.tool_data.output.artifacts.push(artifact)
238
+ }
239
+ }
240
+
241
+ this.messages.push(newMessage)
242
+ // Expand the tool section automatically
243
+ this.expandedTools.add(this.messages.length - 1)
244
+ // Render Plotly charts after the DOM updates
245
+ this.$nextTick(() => {
246
+ this.renderPlotlyCharts(this.messages.length - 1)
247
+ })
248
+ },
249
+ async sendMessage() {
250
+ if (!this.userInput.trim()) return
251
+
252
+ // Add user message
253
+ this.messages.push({
254
+ role: 'user',
255
+ content: this.userInput
256
+ })
257
+
258
+ const data = {
259
+ message: this.userInput,
260
+ thread_id: this.session_token
261
+ }
262
+
263
+ this.userInput = ''
264
+ this.currentAssistantMessage = ''
265
+
266
+ try {
267
+ const response = await fetch('https://pvanand-code-chat-api.hf.space/chat', {
268
+ method: 'POST',
269
+ headers: {
270
+ 'Content-Type': 'application/json',
271
+ 'Accept': 'text/event-stream'
272
+ },
273
+ body: JSON.stringify(data)
274
+ })
275
+
276
+ const reader = response.body.getReader()
277
+
278
+ while (true) {
279
+ const { done, value } = await reader.read()
280
+ if (done) break
281
+
282
+ const chunk = new TextDecoder().decode(value)
283
+ const lines = chunk.split('\n')
284
+
285
+ for (const line of lines) {
286
+ if (!line.startsWith('data: ')) continue
287
+
288
+ try {
289
+ const eventData = JSON.parse(line.substring(6))
290
+
291
+ switch (eventData.type) {
292
+ case 'token':
293
+ this.handleToken(eventData)
294
+ break
295
+ case 'tool_start':
296
+ this.handleToolStart(eventData)
297
+ break
298
+ case 'tool_end':
299
+ await this.handleToolEnd(eventData)
300
+ break
301
+ }
302
+ } catch (e) {
303
+ console.error('Error parsing event:', e)
304
+ }
305
+ }
306
+ }
307
+ } catch (error) {
308
+ console.error('Error:', error)
309
+ }
310
+ },
311
+ handleToken(eventData) {
312
+ this.currentAssistantMessage += eventData.content
313
+ this.updateAssistantMessage(this.currentAssistantMessage)
314
+ },
315
+ handleToolStart(eventData) {
316
+ // Only create a new message if it's a new tool execution
317
+ if (!this.messages.length ||
318
+ this.messages[this.messages.length - 1].role !== 'assistant' ||
319
+ this.messages[this.messages.length - 1].tool_data?.output) {
320
+ this.messages.push({
321
+ role: 'assistant',
322
+ tool_data: {
323
+ tool: eventData.tool,
324
+ input: eventData.input
325
+ }
326
+ })
327
+ }
328
+ },
329
+ updateAssistantMessage(content) {
330
+ const lastMessage = this.messages[this.messages.length - 1]
331
+ if (lastMessage?.role === 'assistant' && !lastMessage.tool_data) {
332
+ lastMessage.content = content
333
+ } else {
334
+ this.messages.push({
335
+ role: 'assistant',
336
+ content: content
337
+ })
338
+ }
339
+ }
340
+ },
341
+ beforeUnmount() {
342
+ // Clean up all Plotly charts when component is destroyed
343
+ this.messages.forEach((message, index) => {
344
+ if (message?.tool_data?.output?.artifacts) {
345
+ message.tool_data.output.artifacts.forEach((artifact, artifactIndex) => {
346
+ if (artifact.artifact_type === 'application/vnd.plotly.v1+json') {
347
+ const elementId = `plot-${index}-${artifactIndex}`
348
+ Plotly.purge(elementId)
349
+ }
350
+ })
351
+ }
352
+ })
353
+ }
354
+ }).mount('#app')
355
+ </script>
356
+ </body>
357
+ </html>