Priyanshi Saxena commited on
Commit
254afdc
·
1 Parent(s): 4aa0bed
Files changed (1) hide show
  1. app.py +241 -39
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
- .message-content h1, .message-content h2, .message-content h3, .message-content h4 {
 
616
  color: var(--accent);
617
- margin: 1rem 0 0.5rem 0;
618
  font-weight: 600;
 
 
 
 
 
 
 
619
  }
620
- .message-content h1 { font-size: 1.25rem; }
621
- .message-content h2 { font-size: 1.1rem; }
622
- .message-content h3 { font-size: 1rem; }
623
- .message-content h4 { font-size: 0.95rem; }
 
 
 
 
 
 
624
  .message-content p {
625
- margin: 0.75rem 0;
626
- line-height: 1.6;
 
 
627
  }
 
628
  .message-content ul, .message-content ol {
629
- margin: 0.75rem 0;
630
- padding-left: 1.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
631
  }
 
 
 
 
 
 
632
  .message-content li {
633
- margin: 0.25rem 0;
634
- line-height: 1.5;
 
635
  }
636
- .message-content strong {
 
637
  color: var(--accent);
638
- font-weight: 600;
 
639
  }
640
- .message-content em {
 
641
  color: var(--text-secondary);
642
  font-style: italic;
 
643
  }
 
644
  .message-content code {
645
- background: rgba(0, 102, 255, 0.1);
646
- border: 1px solid rgba(0, 102, 255, 0.2);
647
- padding: 0.15rem 0.4rem;
648
- border-radius: 4px;
649
- font-family: 'SF Mono', Consolas, monospace;
650
- font-size: 0.85rem;
651
  color: var(--accent);
 
 
 
652
  }
 
653
  .message-content pre {
654
- background: var(--background);
655
  border: 1px solid var(--border);
656
- border-radius: 8px;
657
- padding: 1rem;
658
- margin: 1rem 0;
659
  overflow-x: auto;
660
- font-family: 'SF Mono', Consolas, monospace;
661
- font-size: 0.85rem;
 
 
 
 
 
 
 
 
 
 
 
 
662
  }
 
663
  .message-content blockquote {
664
- border-left: 3px solid var(--accent);
665
- padding-left: 1rem;
666
- margin: 1rem 0;
 
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
- // Convert markdown to HTML for assistant responses
1178
  try {
1179
- formattedContent = marked.parse(content);
 
 
 
 
 
1180
  } catch (error) {
1181
- // Fallback to basic formatting if marked.js fails
1182
- console.warn('Markdown parsing failed, using fallback:', error);
1183
  formattedContent = content
1184
- .replace(/\\n/g, '<br>')
 
 
 
 
 
 
 
1185
  .replace(/\\*\\*(.*?)\\*\\*/g, '<strong>$1</strong>')
1186
  .replace(/\\*(.*?)\\*/g, '<em>$1</em>')
1187
- .replace(/`(.*?)`/g, '<code>$1</code>');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1188
  }
1189
  } else {
1190
- // Simple line breaks for user messages
1191
- formattedContent = content.replace(/\\n/g, '<br>');
 
 
 
 
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...');