Spaces:
Running
Running
Priyanshi Saxena
commited on
Commit
·
254afdc
1
Parent(s):
4aa0bed
last
Browse files
app.py
CHANGED
@@ -394,6 +394,9 @@ async def get_homepage(request: Request):
|
|
394 |
<title>Web3 Research Co-Pilot</title>
|
395 |
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path fill=%22%2300d4aa%22 d=%22M12 2L2 7v10c0 5.5 3.8 7.7 9 9 5.2-1.3 9-3.5 9-9V7l-10-5z%22/></svg>">
|
396 |
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
|
|
|
|
|
397 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
398 |
|
399 |
<style>
|
@@ -612,60 +615,197 @@ async def get_homepage(request: Request):
|
|
612 |
border-bottom-left-radius: 8px;
|
613 |
border: 1px solid var(--border);
|
614 |
}
|
615 |
-
|
|
|
616 |
color: var(--accent);
|
617 |
-
margin:
|
618 |
font-weight: 600;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
619 |
}
|
620 |
-
.message-content
|
621 |
-
|
622 |
-
|
623 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
624 |
.message-content p {
|
625 |
-
margin: 0.
|
626 |
-
line-height: 1.
|
|
|
|
|
627 |
}
|
|
|
628 |
.message-content ul, .message-content ol {
|
629 |
-
margin:
|
630 |
-
padding-left: 1.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
631 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
632 |
.message-content li {
|
633 |
-
margin: 0.
|
634 |
-
line-height: 1.
|
|
|
635 |
}
|
636 |
-
|
|
|
637 |
color: var(--accent);
|
638 |
-
font-weight:
|
|
|
639 |
}
|
640 |
-
|
|
|
641 |
color: var(--text-secondary);
|
642 |
font-style: italic;
|
|
|
643 |
}
|
|
|
644 |
.message-content code {
|
645 |
-
background: rgba(0, 102, 255, 0.
|
646 |
-
border: 1px solid rgba(0, 102, 255, 0.
|
647 |
-
padding: 0.
|
648 |
-
border-radius:
|
649 |
-
font-family: 'SF Mono', Consolas, monospace;
|
650 |
-
font-size: 0.
|
651 |
color: var(--accent);
|
|
|
|
|
|
|
652 |
}
|
|
|
653 |
.message-content pre {
|
654 |
-
background: var(--background);
|
655 |
border: 1px solid var(--border);
|
656 |
-
border-radius:
|
657 |
-
padding:
|
658 |
-
margin:
|
659 |
overflow-x: auto;
|
660 |
-
font-family: 'SF Mono', Consolas, monospace;
|
661 |
-
font-size: 0.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
662 |
}
|
|
|
663 |
.message-content blockquote {
|
664 |
-
border-left:
|
665 |
-
|
666 |
-
|
|
|
667 |
color: var(--text-secondary);
|
668 |
font-style: italic;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
669 |
}
|
670 |
|
671 |
.message-meta {
|
@@ -1038,6 +1178,23 @@ async def get_homepage(request: Request):
|
|
1038 |
</div>
|
1039 |
|
1040 |
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1041 |
let chatHistory = [];
|
1042 |
let messageCount = 0;
|
1043 |
|
@@ -1171,24 +1328,64 @@ async def get_homepage(request: Request):
|
|
1171 |
}).join('');
|
1172 |
}
|
1173 |
|
1174 |
-
// Format content based on sender
|
1175 |
let formattedContent = content;
|
1176 |
if (sender === 'assistant') {
|
1177 |
-
//
|
1178 |
try {
|
1179 |
-
|
|
|
|
|
|
|
|
|
|
|
1180 |
} catch (error) {
|
1181 |
-
//
|
1182 |
-
console.warn('Markdown parsing failed, using fallback:', error);
|
1183 |
formattedContent = content
|
1184 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1185 |
.replace(/\\*\\*(.*?)\\*\\*/g, '<strong>$1</strong>')
|
1186 |
.replace(/\\*(.*?)\\*/g, '<em>$1</em>')
|
1187 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1188 |
}
|
1189 |
} else {
|
1190 |
-
//
|
1191 |
-
formattedContent = content
|
|
|
|
|
|
|
|
|
1192 |
}
|
1193 |
|
1194 |
messageDiv.innerHTML = `
|
@@ -1203,6 +1400,11 @@ async def get_homepage(request: Request):
|
|
1203 |
messagesDiv.appendChild(messageDiv);
|
1204 |
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
1205 |
|
|
|
|
|
|
|
|
|
|
|
1206 |
// Execute any scripts in the visualizations after DOM insertion
|
1207 |
if (visualizations && visualizations.length > 0) {
|
1208 |
console.log('Executing visualization scripts...');
|
|
|
394 |
<title>Web3 Research Co-Pilot</title>
|
395 |
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path fill=%22%2300d4aa%22 d=%22M12 2L2 7v10c0 5.5 3.8 7.7 9 9 5.2-1.3 9-3.5 9-9V7l-10-5z%22/></svg>">
|
396 |
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
397 |
+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js"></script>
|
398 |
+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>
|
399 |
+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css" rel="stylesheet">
|
400 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
401 |
|
402 |
<style>
|
|
|
615 |
border-bottom-left-radius: 8px;
|
616 |
border: 1px solid var(--border);
|
617 |
}
|
618 |
+
/* Enhanced text formatting for better UX */
|
619 |
+
.message-content h1, .message-content h2, .message-content h3, .message-content h4, .message-content h5, .message-content h6 {
|
620 |
color: var(--accent);
|
621 |
+
margin: 1.5rem 0 0.75rem 0;
|
622 |
font-weight: 600;
|
623 |
+
line-height: 1.3;
|
624 |
+
letter-spacing: -0.025em;
|
625 |
+
}
|
626 |
+
.message-content h1 {
|
627 |
+
font-size: 1.35rem;
|
628 |
+
border-bottom: 2px solid var(--accent);
|
629 |
+
padding-bottom: 0.5rem;
|
630 |
}
|
631 |
+
.message-content h2 {
|
632 |
+
font-size: 1.2rem;
|
633 |
+
border-bottom: 1px solid var(--border);
|
634 |
+
padding-bottom: 0.25rem;
|
635 |
+
}
|
636 |
+
.message-content h3 { font-size: 1.1rem; }
|
637 |
+
.message-content h4 { font-size: 1rem; }
|
638 |
+
.message-content h5 { font-size: 0.95rem; }
|
639 |
+
.message-content h6 { font-size: 0.9rem; opacity: 0.9; }
|
640 |
+
|
641 |
.message-content p {
|
642 |
+
margin: 0.875rem 0;
|
643 |
+
line-height: 1.65;
|
644 |
+
text-align: justify;
|
645 |
+
text-justify: inter-word;
|
646 |
}
|
647 |
+
|
648 |
.message-content ul, .message-content ol {
|
649 |
+
margin: 1rem 0;
|
650 |
+
padding-left: 1.75rem;
|
651 |
+
}
|
652 |
+
|
653 |
+
.message-content ul {
|
654 |
+
list-style-type: none;
|
655 |
+
}
|
656 |
+
|
657 |
+
.message-content ul li::before {
|
658 |
+
content: '•';
|
659 |
+
color: var(--accent);
|
660 |
+
font-weight: bold;
|
661 |
+
position: absolute;
|
662 |
+
margin-left: -1.25rem;
|
663 |
}
|
664 |
+
|
665 |
+
.message-content ol li {
|
666 |
+
list-style-type: decimal;
|
667 |
+
color: var(--text);
|
668 |
+
}
|
669 |
+
|
670 |
.message-content li {
|
671 |
+
margin: 0.5rem 0;
|
672 |
+
line-height: 1.6;
|
673 |
+
position: relative;
|
674 |
}
|
675 |
+
|
676 |
+
.message-content strong, .message-content b {
|
677 |
color: var(--accent);
|
678 |
+
font-weight: 650;
|
679 |
+
text-shadow: 0 0 2px rgba(0, 212, 170, 0.3);
|
680 |
}
|
681 |
+
|
682 |
+
.message-content em, .message-content i {
|
683 |
color: var(--text-secondary);
|
684 |
font-style: italic;
|
685 |
+
font-weight: 450;
|
686 |
}
|
687 |
+
|
688 |
.message-content code {
|
689 |
+
background: linear-gradient(135deg, rgba(0, 102, 255, 0.12), rgba(0, 212, 170, 0.08));
|
690 |
+
border: 1px solid rgba(0, 102, 255, 0.25);
|
691 |
+
padding: 0.2rem 0.5rem;
|
692 |
+
border-radius: 6px;
|
693 |
+
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
|
694 |
+
font-size: 0.875rem;
|
695 |
color: var(--accent);
|
696 |
+
font-weight: 500;
|
697 |
+
letter-spacing: 0.025em;
|
698 |
+
box-shadow: 0 1px 3px rgba(0, 102, 255, 0.1);
|
699 |
}
|
700 |
+
|
701 |
.message-content pre {
|
702 |
+
background: linear-gradient(135deg, var(--background), var(--surface));
|
703 |
border: 1px solid var(--border);
|
704 |
+
border-radius: 10px;
|
705 |
+
padding: 1.25rem;
|
706 |
+
margin: 1.5rem 0;
|
707 |
overflow-x: auto;
|
708 |
+
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
|
709 |
+
font-size: 0.875rem;
|
710 |
+
line-height: 1.5;
|
711 |
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
712 |
+
position: relative;
|
713 |
+
}
|
714 |
+
|
715 |
+
.message-content pre code {
|
716 |
+
background: none;
|
717 |
+
border: none;
|
718 |
+
padding: 0;
|
719 |
+
border-radius: 0;
|
720 |
+
box-shadow: none;
|
721 |
+
color: var(--text);
|
722 |
}
|
723 |
+
|
724 |
.message-content blockquote {
|
725 |
+
border-left: 4px solid var(--accent);
|
726 |
+
background: rgba(0, 212, 170, 0.05);
|
727 |
+
padding: 1rem 1.5rem;
|
728 |
+
margin: 1.5rem 0;
|
729 |
color: var(--text-secondary);
|
730 |
font-style: italic;
|
731 |
+
border-radius: 0 8px 8px 0;
|
732 |
+
position: relative;
|
733 |
+
}
|
734 |
+
|
735 |
+
.message-content blockquote::before {
|
736 |
+
content: '"';
|
737 |
+
font-size: 3rem;
|
738 |
+
color: var(--accent);
|
739 |
+
position: absolute;
|
740 |
+
top: -0.5rem;
|
741 |
+
left: 0.5rem;
|
742 |
+
opacity: 0.3;
|
743 |
+
font-family: Georgia, serif;
|
744 |
+
}
|
745 |
+
|
746 |
+
.message-content a {
|
747 |
+
color: var(--primary);
|
748 |
+
text-decoration: none;
|
749 |
+
font-weight: 500;
|
750 |
+
border-bottom: 1px solid transparent;
|
751 |
+
transition: all 0.2s ease;
|
752 |
+
}
|
753 |
+
|
754 |
+
.message-content a:hover {
|
755 |
+
color: var(--accent);
|
756 |
+
border-bottom-color: var(--accent);
|
757 |
+
}
|
758 |
+
|
759 |
+
.message-content table {
|
760 |
+
width: 100%;
|
761 |
+
border-collapse: collapse;
|
762 |
+
margin: 1.5rem 0;
|
763 |
+
background: var(--surface-elevated);
|
764 |
+
border-radius: 8px;
|
765 |
+
overflow: hidden;
|
766 |
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
767 |
+
}
|
768 |
+
|
769 |
+
.message-content th, .message-content td {
|
770 |
+
padding: 0.875rem;
|
771 |
+
text-align: left;
|
772 |
+
border-bottom: 1px solid var(--border);
|
773 |
+
}
|
774 |
+
|
775 |
+
.message-content th {
|
776 |
+
background: var(--surface);
|
777 |
+
font-weight: 600;
|
778 |
+
color: var(--accent);
|
779 |
+
}
|
780 |
+
|
781 |
+
.message-content tr:last-child td {
|
782 |
+
border-bottom: none;
|
783 |
+
}
|
784 |
+
|
785 |
+
.message-content hr {
|
786 |
+
border: none;
|
787 |
+
height: 2px;
|
788 |
+
background: linear-gradient(90deg, transparent, var(--border), transparent);
|
789 |
+
margin: 2rem 0;
|
790 |
+
}
|
791 |
+
|
792 |
+
/* Number formatting for crypto values */
|
793 |
+
.message-content .crypto-value {
|
794 |
+
font-family: 'SF Mono', monospace;
|
795 |
+
font-weight: 600;
|
796 |
+
color: var(--accent);
|
797 |
+
background: rgba(0, 212, 170, 0.1);
|
798 |
+
padding: 0.1rem 0.3rem;
|
799 |
+
border-radius: 4px;
|
800 |
+
}
|
801 |
+
|
802 |
+
/* Highlight important information */
|
803 |
+
.message-content .highlight {
|
804 |
+
background: linear-gradient(135deg, rgba(0, 102, 255, 0.15), rgba(0, 212, 170, 0.1));
|
805 |
+
padding: 0.75rem 1rem;
|
806 |
+
border-radius: 8px;
|
807 |
+
border-left: 3px solid var(--accent);
|
808 |
+
margin: 1rem 0;
|
809 |
}
|
810 |
|
811 |
.message-meta {
|
|
|
1178 |
</div>
|
1179 |
|
1180 |
<script>
|
1181 |
+
// Configure marked.js for better markdown rendering
|
1182 |
+
if (typeof marked !== 'undefined') {
|
1183 |
+
marked.setOptions({
|
1184 |
+
breaks: true,
|
1185 |
+
gfm: true,
|
1186 |
+
highlight: function(code, lang) {
|
1187 |
+
if (typeof Prism !== 'undefined' && lang && Prism.languages[lang]) {
|
1188 |
+
return Prism.highlight(code, Prism.languages[lang], lang);
|
1189 |
+
}
|
1190 |
+
return code;
|
1191 |
+
},
|
1192 |
+
sanitize: false,
|
1193 |
+
smartLists: true,
|
1194 |
+
smartypants: true
|
1195 |
+
});
|
1196 |
+
}
|
1197 |
+
|
1198 |
let chatHistory = [];
|
1199 |
let messageCount = 0;
|
1200 |
|
|
|
1328 |
}).join('');
|
1329 |
}
|
1330 |
|
1331 |
+
// Format content based on sender with enhanced markdown processing
|
1332 |
let formattedContent = content;
|
1333 |
if (sender === 'assistant') {
|
1334 |
+
// Enhanced markdown to HTML conversion for assistant responses
|
1335 |
try {
|
1336 |
+
// Use marked.js if available
|
1337 |
+
if (typeof marked !== 'undefined') {
|
1338 |
+
formattedContent = marked.parse(content);
|
1339 |
+
} else {
|
1340 |
+
throw new Error('marked.js not available');
|
1341 |
+
}
|
1342 |
} catch (error) {
|
1343 |
+
// Enhanced fallback formatting if marked.js fails
|
1344 |
+
console.warn('Markdown parsing failed, using enhanced fallback:', error);
|
1345 |
formattedContent = content
|
1346 |
+
// Convert line breaks
|
1347 |
+
.replace(/\n\n/g, '</p><p>')
|
1348 |
+
.replace(/\n/g, '<br>')
|
1349 |
+
// Headers
|
1350 |
+
.replace(/^### (.*$)/gm, '<h3>$1</h3>')
|
1351 |
+
.replace(/^## (.*$)/gm, '<h2>$1</h2>')
|
1352 |
+
.replace(/^# (.*$)/gm, '<h1>$1</h1>')
|
1353 |
+
// Bold and italic
|
1354 |
.replace(/\\*\\*(.*?)\\*\\*/g, '<strong>$1</strong>')
|
1355 |
.replace(/\\*(.*?)\\*/g, '<em>$1</em>')
|
1356 |
+
// Code blocks
|
1357 |
+
.replace(/```([\\s\\S]*?)```/g, '<pre><code>$1</code></pre>')
|
1358 |
+
.replace(/`(.*?)`/g, '<code>$1</code>')
|
1359 |
+
// Lists
|
1360 |
+
.replace(/^\\* (.*$)/gm, '<li>$1</li>')
|
1361 |
+
.replace(/^\\- (.*$)/gm, '<li>$1</li>')
|
1362 |
+
.replace(/^(\\d+)\\. (.*$)/gm, '<li>$1. $2</li>')
|
1363 |
+
// Links
|
1364 |
+
.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, '<a href="$2" target="_blank">$1</a>')
|
1365 |
+
// Blockquotes
|
1366 |
+
.replace(/^> (.*$)/gm, '<blockquote>$1</blockquote>')
|
1367 |
+
// Highlight crypto values (numbers with $ or crypto symbols)
|
1368 |
+
.replace(/(\\$[\\d,]+\\.?\\d*)/g, '<span class="crypto-value">$1</span>')
|
1369 |
+
.replace(/(\\d+\\.?\\d*\\s*(BTC|ETH|USD|USDC|USDT|SOL|ADA|DOT|LINK|UNI))/gi, '<span class="crypto-value">$1</span>')
|
1370 |
+
// Wrap in paragraph tags
|
1371 |
+
.replace(/^(?!<[^>]+>)(.+)$/gm, '<p>$1</p>')
|
1372 |
+
// Clean up empty paragraphs and fix list formatting
|
1373 |
+
.replace(/<p><\\/p>/g, '')
|
1374 |
+
.replace(/<p>(<li>.*<\\/li>)<\\/p>/g, '<ul>$1</ul>')
|
1375 |
+
.replace(/<\\/li><li>/g, '</li><li>')
|
1376 |
+
.replace(/<ul>(<li>.*)<\\/ul>/g, '<ul>$1</ul>');
|
1377 |
+
|
1378 |
+
// Post-process to add highlighting for important sections
|
1379 |
+
formattedContent = formattedContent
|
1380 |
+
.replace(/(Key.*?:|Important.*?:|Note.*?:|Summary.*?:|Conclusion.*?:)/gi, '<span class="highlight">$1</span>');
|
1381 |
}
|
1382 |
} else {
|
1383 |
+
// Enhanced user message formatting
|
1384 |
+
formattedContent = content
|
1385 |
+
.replace(/\\n/g, '<br>')
|
1386 |
+
.replace(/\\*\\*(.*?)\\*\\*/g, '<strong>$1</strong>')
|
1387 |
+
.replace(/\\*(.*?)\\*/g, '<em>$1</em>')
|
1388 |
+
.replace(/`(.*?)`/g, '<code>$1</code>');
|
1389 |
}
|
1390 |
|
1391 |
messageDiv.innerHTML = `
|
|
|
1400 |
messagesDiv.appendChild(messageDiv);
|
1401 |
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
1402 |
|
1403 |
+
// Apply syntax highlighting to code blocks
|
1404 |
+
if (typeof Prism !== 'undefined') {
|
1405 |
+
Prism.highlightAllUnder(messageDiv);
|
1406 |
+
}
|
1407 |
+
|
1408 |
// Execute any scripts in the visualizations after DOM insertion
|
1409 |
if (visualizations && visualizations.length > 0) {
|
1410 |
console.log('Executing visualization scripts...');
|