Spaces:
Sleeping
Sleeping
Update static/multi-agent.html
Browse files- static/multi-agent.html +69 -1
static/multi-agent.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
| 6 |
-
<title>
|
| 7 |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
|
| 8 |
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
| 9 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
|
|
@@ -294,6 +294,24 @@ img, video {
|
|
| 294 |
max-width: 100%;
|
| 295 |
height: auto;
|
| 296 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 297 |
@media (max-width: 600px) {
|
| 298 |
body {
|
| 299 |
font-size: 14px;
|
|
@@ -366,6 +384,13 @@ img, video {
|
|
| 366 |
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
| 367 |
</svg>
|
| 368 |
</button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 369 |
</div>
|
| 370 |
</div>
|
| 371 |
<div class="input-area" :class="{ 'input-hidden': isScrollingUp }">
|
|
@@ -389,6 +414,7 @@ img, video {
|
|
| 389 |
</div>
|
| 390 |
</div>
|
| 391 |
</div>
|
|
|
|
| 392 |
<script>
|
| 393 |
marked.setOptions({
|
| 394 |
highlight: function (code, lang) {
|
|
@@ -409,6 +435,39 @@ img, video {
|
|
| 409 |
container.appendChild(dot);
|
| 410 |
}
|
| 411 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 412 |
const app = new Vue({
|
| 413 |
el: '#app',
|
| 414 |
data: {
|
|
@@ -663,6 +722,15 @@ img, video {
|
|
| 663 |
console.error('Failed to copy: ', err);
|
| 664 |
});
|
| 665 |
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 666 |
handleInput(event) {
|
| 667 |
console.log("Input event triggered", event.target.value); // For debugging
|
| 668 |
if (event.target.value === '/') {
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
| 6 |
+
<title>Multi Agent</title>
|
| 7 |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
|
| 8 |
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
| 9 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
|
|
|
|
| 294 |
max-width: 100%;
|
| 295 |
height: auto;
|
| 296 |
}
|
| 297 |
+
.download-buttons {
|
| 298 |
+
display: flex;
|
| 299 |
+
gap: 5px;
|
| 300 |
+
margin-top: 5px;
|
| 301 |
+
}
|
| 302 |
+
.download-button {
|
| 303 |
+
background-color: #f0f0f0;
|
| 304 |
+
border: 1px solid #ccc;
|
| 305 |
+
border-radius: 3px;
|
| 306 |
+
padding: 2px 5px;
|
| 307 |
+
font-size: 0.8em;
|
| 308 |
+
cursor: pointer;
|
| 309 |
+
transition: background-color 0.3s;
|
| 310 |
+
}
|
| 311 |
+
|
| 312 |
+
.download-button:hover {
|
| 313 |
+
background-color: #e0e0e0;
|
| 314 |
+
}
|
| 315 |
@media (max-width: 600px) {
|
| 316 |
body {
|
| 317 |
font-size: 14px;
|
|
|
|
| 384 |
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
| 385 |
</svg>
|
| 386 |
</button>
|
| 387 |
+
<div v-if="message.type === 'bot' && message.rawResponse" class="option-buttons">
|
| 388 |
+
<div style="display: flex; align-items: center; gap: 10px;">
|
| 389 |
+
<span>Would you like to download this chat as</span>
|
| 390 |
+
<button @click="downloadResponse(message.rawResponse, 'pdf')" class="option-button">PDF</button>
|
| 391 |
+
<button @click="downloadResponse(message.rawResponse, 'docx')" class="option-button">DOCX</button>
|
| 392 |
+
</div>
|
| 393 |
+
</div>
|
| 394 |
</div>
|
| 395 |
</div>
|
| 396 |
<div class="input-area" :class="{ 'input-hidden': isScrollingUp }">
|
|
|
|
| 414 |
</div>
|
| 415 |
</div>
|
| 416 |
</div>
|
| 417 |
+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
| 418 |
<script>
|
| 419 |
marked.setOptions({
|
| 420 |
highlight: function (code, lang) {
|
|
|
|
| 435 |
container.appendChild(dot);
|
| 436 |
}
|
| 437 |
}
|
| 438 |
+
|
| 439 |
+
async function convertHtmlToFile(html, fileType, customFileName = '') {
|
| 440 |
+
const url = 'https://pvanand-web-scraping.hf.space/html_to_' + fileType;
|
| 441 |
+
function sanitizeFileName(name) {
|
| 442 |
+
return (name.replace(/[^a-z0-9\s]/gi, '')
|
| 443 |
+
.toLowerCase()
|
| 444 |
+
.replace(/\s+/g, '_')
|
| 445 |
+
.substring(0, 50)) || 'generated_report';
|
| 446 |
+
}
|
| 447 |
+
const fileName = `${sanitizeFileName(customFileName || 'generated_report')}.${fileType}`;
|
| 448 |
+
try {
|
| 449 |
+
const response = await fetch(url, {
|
| 450 |
+
method: 'POST',
|
| 451 |
+
headers: {
|
| 452 |
+
'accept': 'application/json',
|
| 453 |
+
'Content-Type': 'application/json'
|
| 454 |
+
},
|
| 455 |
+
body: JSON.stringify({ html_content: html })
|
| 456 |
+
});
|
| 457 |
+
if (!response.ok) throw new Error('Conversion failed');
|
| 458 |
+
const blob = await response.blob();
|
| 459 |
+
const a = document.createElement('a');
|
| 460 |
+
a.href = window.URL.createObjectURL(blob);
|
| 461 |
+
a.download = fileName;
|
| 462 |
+
a.style.display = 'none';
|
| 463 |
+
document.body.appendChild(a);
|
| 464 |
+
a.click();
|
| 465 |
+
window.URL.revokeObjectURL(a.href);
|
| 466 |
+
} catch (error) {
|
| 467 |
+
throw new Error(`Failed to download ${fileName}. Please try again.`);
|
| 468 |
+
}
|
| 469 |
+
}
|
| 470 |
+
|
| 471 |
const app = new Vue({
|
| 472 |
el: '#app',
|
| 473 |
data: {
|
|
|
|
| 722 |
console.error('Failed to copy: ', err);
|
| 723 |
});
|
| 724 |
},
|
| 725 |
+
async downloadResponse(rawResponse, fileType) {
|
| 726 |
+
try {
|
| 727 |
+
const html = marked.parse(rawResponse);
|
| 728 |
+
await convertHtmlToFile(html, fileType);
|
| 729 |
+
} catch (error) {
|
| 730 |
+
console.error('Error downloading file:', error);
|
| 731 |
+
// You might want to show an error message to the user here
|
| 732 |
+
}
|
| 733 |
+
},
|
| 734 |
handleInput(event) {
|
| 735 |
console.log("Input event triggered", event.target.value); // For debugging
|
| 736 |
if (event.target.value === '/') {
|