thinkwee commited on
Commit
2254920
·
1 Parent(s): a8df6b3
assets/alan.png ADDED

Git LFS Details

  • SHA256: a30b24682e56349325af8b7958599724ea8845978e10cdcd61f407fbfd554703
  • Pointer size: 130 Bytes
  • Size of remote file: 13 kB
assets/arxiv-logomark-small.svg ADDED
assets/framework_pipeline.png CHANGED

Git LFS Details

  • SHA256: d0131b96b0130149101127f4bff59ba15134b7fff2770d81fcf3ac158a20288d
  • Pointer size: 131 Bytes
  • Size of remote file: 270 kB

Git LFS Details

  • SHA256: 242f9a36256527550e0eb996e2cbcc82b192ce6ef43986cfcefc1a7f809309cd
  • Pointer size: 132 Bytes
  • Size of remote file: 8.93 MB
assets/framework_task.png CHANGED

Git LFS Details

  • SHA256: bfb35c2b2b1ff7aa44d04beee25a6f4299622e49882985bcbb4f639fd765bf33
  • Pointer size: 131 Bytes
  • Size of remote file: 491 kB

Git LFS Details

  • SHA256: 5af965ccd0c06c90e5c20d05b678f78f7fe9ceb587708cd8388eaec69259377c
  • Pointer size: 132 Bytes
  • Size of remote file: 4.67 MB
assets/hallu_acc_corr.png ADDED

Git LFS Details

  • SHA256: 70d918ed4762f7efd4f1bb6ead9d8802063a3344bd77a9b3e6a5cd64c7477fd0
  • Pointer size: 132 Bytes
  • Size of remote file: 2.74 MB
assets/hf-logo-pirate.svg ADDED
assets/hf-logo.svg ADDED
assets/kcl.svg ADDED
assets/logo.png ADDED

Git LFS Details

  • SHA256: 8000253b79c05f87b03bfb2df1f48b4dc267074a64d7200596b2af1ee090cf2d
  • Pointer size: 131 Bytes
  • Size of remote file: 134 kB
assets/qwenfamily.png CHANGED

Git LFS Details

  • SHA256: ebd95f453ba7595fd08d471d5c0134926e7bb08d100c545bc7e02f8aa8637938
  • Pointer size: 131 Bytes
  • Size of remote file: 214 kB

Git LFS Details

  • SHA256: c04397bd32527ba5939814b3c10da3e5ba4799873a124f1c9e807132b6b249f5
  • Pointer size: 132 Bytes
  • Size of remote file: 6.13 MB
assets/tencent.png ADDED

Git LFS Details

  • SHA256: 47ae94130f7ae75c0949056e1046db9b0490eda36cd1cf2f6961427a74f1a7a3
  • Pointer size: 129 Bytes
  • Size of remote file: 7.72 kB
index.html CHANGED
@@ -19,7 +19,7 @@
19
  <script src="trajectory_data.js" defer></script>
20
  <script src="trajectory.js" defer></script>
21
  <script src="charts.js" defer></script>
22
- <link rel="stylesheet" href="styles.css">
23
  <style>
24
  /* Inline critical CSS for chart loading states */
25
  .chart-loading {
@@ -53,23 +53,54 @@
53
  <body>
54
  <header class="hero">
55
  <div class="hero-content">
56
- <h1>DDR-Bench: Hunt Instead of Wait: Evaluating Deep Data Research on Large Language Models</h1>
 
57
  <p class="description">
58
- An open-ended task requiring LLMs to delve into databases, proactively exploring data and
59
- identifying insights without predefined questions or objectives. Evaluating investigatory intelligence
60
- across medical records (MIMIC), financial filings (10-K), and behavioral data (GLOBEM).
 
 
 
 
 
 
 
 
61
  </p>
62
  <div class="meta-info">
63
  <div class="meta-row authors">
64
  <span class="meta-item">Wei Liu, Peijie Yu, Michele Orini, Yali Du, Yulan He</span>
65
  </div>
66
  <div class="meta-row affiliations">
67
- <span class="meta-item">King's College London · Tencent · The Alan Turing Institute</span>
 
 
 
 
 
 
 
 
68
  </div>
69
  <div class="meta-row links">
70
- <span class="meta-item"><a href="https://huggingface.co/spaces/DDR-Bench">🤗 Data</a></span>
71
- <span class="meta-item"><a href="https://github.com/DDR-Bench">💻 Code</a></span>
72
- <span class="meta-item"><a href="https://arxiv.org/abs/xxx">📄 Paper</a></span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
73
  </div>
74
  </div>
75
  </div>
@@ -97,11 +128,17 @@
97
  <img src="assets/framework_task.png" alt="Task Formulation Framework"
98
  style="border-radius: var(--radius-md);">
99
  <h3>Task Formulation</h3>
 
 
 
100
  </div>
101
  <div class="framework-card">
102
  <img src="assets/framework_pipeline.png" alt="Evaluation Pipeline Framework"
103
  style="border-radius: var(--radius-md);">
104
  <h3>Evaluation Pipeline</h3>
 
 
 
105
  </div>
106
  </div>
107
  </section>
@@ -132,7 +169,17 @@
132
  <!-- Messages will be injected here via JS -->
133
  <div class="loading-message">Loading trajectory data...</div>
134
  </div>
 
 
 
 
 
 
 
135
  </div>
 
 
 
136
  </section>
137
 
138
  <!-- 2. Experiment Results Section -->
@@ -206,6 +253,13 @@
206
  <div class="carousel-card">
207
  <img src="assets/hallucination.png" alt="Hallucination Analysis">
208
  <h4>Hallucination Analysis</h4>
 
 
 
 
 
 
 
209
  <p class="card-caption">Hallucination rates show almost no correlation with final accuracy,
210
  indicating
211
  robustness against metric inflation via memorization.</p>
@@ -267,6 +321,9 @@
267
  <div id="scaling-globem" class="chart-container"></div>
268
  </div>
269
  </div>
 
 
 
270
  </section>
271
 
272
  <!-- 2. Ranking Comparison Section -->
@@ -313,6 +370,9 @@
313
 
314
  </div>
315
  </div>
 
 
 
316
  </section>
317
 
318
  <!-- 3. Turn Distribution Section -->
@@ -342,6 +402,9 @@
342
  <div id="turn-globem" class="chart-container-tall"></div>
343
  </div>
344
  </div>
 
 
 
345
  </section>
346
 
347
  <!-- 4. Entropy Analysis Section -->
@@ -391,6 +454,9 @@
391
  <div id="entropy-model-5" class="chart-container-tall"></div>
392
  </div>
393
  </div>
 
 
 
394
  </section>
395
 
396
  <!-- 5. Error Analysis Section -->
@@ -412,6 +478,9 @@
412
  <div id="error-chart" class="chart-container-double"></div>
413
  </div>
414
  </div>
 
 
 
415
  </section>
416
 
417
  <!-- 6. Probing Results Section -->
@@ -442,6 +511,9 @@
442
  <div id="probing-10k" class="chart-container-tall"></div>
443
  </div>
444
  </div>
 
 
 
445
  </section>
446
  </main>
447
 
@@ -563,6 +635,28 @@
563
  startAutoPlay();
564
  });
565
  </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
566
  </body>
567
 
568
  </html>
 
19
  <script src="trajectory_data.js" defer></script>
20
  <script src="trajectory.js" defer></script>
21
  <script src="charts.js" defer></script>
22
+ <link rel="stylesheet" href="styles.css?v=3">
23
  <style>
24
  /* Inline critical CSS for chart loading states */
25
  .chart-loading {
 
53
  <body>
54
  <header class="hero">
55
  <div class="hero-content">
56
+ <h1><img src="assets/logo.png" alt="DDR-Bench Logo" class="title-logo">DDR-Bench</h1>
57
+ <h2>Hunt Instead of Wait: Evaluating Deep Data Research on Large Language Models</h2>
58
  <p class="description">
59
+ We distinguish <em>investigatory intelligence</em> (autonomously setting goals and exploring) from
60
+ <em>executional intelligence</em> (completing assigned tasks), arguing that true agency requires the
61
+ former.
62
+ <br>
63
+ To evaluate this, we introduce <strong>Deep Data Research (DDR)</strong>, an open-ended task where LLMs
64
+ autonomously extract insights from databases, and <strong>DDR-Bench</strong>, a large-scale,
65
+ checklist-based benchmark enabling verifiable evaluation.
66
+ <br>
67
+ Results show that while frontier models display emerging agency, long-horizon exploration remains
68
+ challenging, with effective investigatory intelligence depending on intrinsic agentic strategies beyond
69
+ mere scaffolding or scaling.
70
  </p>
71
  <div class="meta-info">
72
  <div class="meta-row authors">
73
  <span class="meta-item">Wei Liu, Peijie Yu, Michele Orini, Yali Du, Yulan He</span>
74
  </div>
75
  <div class="meta-row affiliations">
76
+ <a href="https://kclnlp.github.io/" target="_blank" rel="noopener noreferrer">
77
+ <img src="assets/kcl.svg" alt="King's College London" class="affiliation-logo kcl-logo">
78
+ </a>
79
+ <a href="https://www.tencent.com/en-us/" target="_blank" rel="noopener noreferrer">
80
+ <img src="assets/tencent.png" alt="Tencent" class="affiliation-logo">
81
+ </a>
82
+ <a href="https://www.turing.ac.uk/" target="_blank" rel="noopener noreferrer">
83
+ <img src="assets/alan.png" alt="The Alan Turing Institute" class="affiliation-logo">
84
+ </a>
85
  </div>
86
  <div class="meta-row links">
87
+ <a href="https://huggingface.co/spaces/DDR-Bench" class="platform-btn huggingface-btn">
88
+ <img src="assets/hf-logo-pirate.svg" alt="HuggingFace" width="30" height="30"
89
+ class="platform-icon">
90
+ Data
91
+ </a>
92
+ <a href="https://github.com/DDR-Bench" class="platform-btn github-btn">
93
+ <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor">
94
+ <path
95
+ d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
96
+ </svg>
97
+ Code
98
+ </a>
99
+ <a href="https://arxiv.org/abs/xxx" class="platform-btn arxiv-btn">
100
+ <img src="assets/arxiv-logomark-small.svg" alt="arXiv" width="30" height="30"
101
+ class="platform-icon">
102
+ Paper
103
+ </a>
104
  </div>
105
  </div>
106
  </div>
 
128
  <img src="assets/framework_task.png" alt="Task Formulation Framework"
129
  style="border-radius: var(--radius-md);">
130
  <h3>Task Formulation</h3>
131
+ <p class="framework-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
132
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
133
+ nostrud exercitation ullamco laboris.</p>
134
  </div>
135
  <div class="framework-card">
136
  <img src="assets/framework_pipeline.png" alt="Evaluation Pipeline Framework"
137
  style="border-radius: var(--radius-md);">
138
  <h3>Evaluation Pipeline</h3>
139
+ <p class="framework-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
140
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
141
+ nostrud exercitation ullamco laboris.</p>
142
  </div>
143
  </div>
144
  </section>
 
169
  <!-- Messages will be injected here via JS -->
170
  <div class="loading-message">Loading trajectory data...</div>
171
  </div>
172
+ <div class="scroll-hint" id="scroll-hint">
173
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
174
+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
175
+ <path d="M12 5v14M19 12l-7 7-7-7" />
176
+ </svg>
177
+ <span>Scroll to see more</span>
178
+ </div>
179
  </div>
180
+ <p class="trajectory-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
181
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
182
+ ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
183
  </section>
184
 
185
  <!-- 2. Experiment Results Section -->
 
253
  <div class="carousel-card">
254
  <img src="assets/hallucination.png" alt="Hallucination Analysis">
255
  <h4>Hallucination Analysis</h4>
256
+ <p class="card-caption">Hallucination rates is low.</p>
257
+ </div>
258
+
259
+ <!-- 6.5 Hallucination-Accuracy Correlation -->
260
+ <div class="carousel-card">
261
+ <img src="assets/hallu_acc_corr.png" alt="Hallucination-Accuracy Correlation">
262
+ <h4>Hallucination-Accuracy Correlation</h4>
263
  <p class="card-caption">Hallucination rates show almost no correlation with final accuracy,
264
  indicating
265
  robustness against metric inflation via memorization.</p>
 
321
  <div id="scaling-globem" class="chart-container"></div>
322
  </div>
323
  </div>
324
+ <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
325
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
326
+ ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
327
  </section>
328
 
329
  <!-- 2. Ranking Comparison Section -->
 
370
 
371
  </div>
372
  </div>
373
+ <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
374
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
375
+ ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
376
  </section>
377
 
378
  <!-- 3. Turn Distribution Section -->
 
402
  <div id="turn-globem" class="chart-container-tall"></div>
403
  </div>
404
  </div>
405
+ <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
406
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
407
+ ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
408
  </section>
409
 
410
  <!-- 4. Entropy Analysis Section -->
 
454
  <div id="entropy-model-5" class="chart-container-tall"></div>
455
  </div>
456
  </div>
457
+ <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
458
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
459
+ ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
460
  </section>
461
 
462
  <!-- 5. Error Analysis Section -->
 
478
  <div id="error-chart" class="chart-container-double"></div>
479
  </div>
480
  </div>
481
+ <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
482
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
483
+ ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
484
  </section>
485
 
486
  <!-- 6. Probing Results Section -->
 
511
  <div id="probing-10k" class="chart-container-tall"></div>
512
  </div>
513
  </div>
514
+ <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
515
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
516
+ ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
517
  </section>
518
  </main>
519
 
 
635
  startAutoPlay();
636
  });
637
  </script>
638
+
639
+ <!-- Scroll Hint Script -->
640
+ <script>
641
+ document.addEventListener('DOMContentLoaded', function () {
642
+ const chatWindow = document.getElementById('chat-window');
643
+ const scrollHint = document.getElementById('scroll-hint');
644
+
645
+ if (chatWindow && scrollHint) {
646
+ // Hide hint when user scrolls
647
+ chatWindow.addEventListener('scroll', function () {
648
+ if (chatWindow.scrollTop > 50) {
649
+ scrollHint.classList.add('hidden');
650
+ }
651
+ });
652
+
653
+ // Show hint initially after a short delay
654
+ setTimeout(() => {
655
+ scrollHint.style.opacity = '1';
656
+ }, 1000);
657
+ }
658
+ });
659
+ </script>
660
  </body>
661
 
662
  </html>
styles.css CHANGED
@@ -79,6 +79,15 @@ body {
79
  min-height: 100vh;
80
  }
81
 
 
 
 
 
 
 
 
 
 
82
  /* ========================= */
83
  /* HERO SECTION */
84
  /* ========================= */
@@ -89,7 +98,7 @@ body {
89
  }
90
 
91
  .hero-content {
92
- max-width: 980px;
93
  margin: 0 auto;
94
  }
95
 
@@ -111,16 +120,26 @@ body {
111
  }
112
 
113
  .hero h1 {
114
- font-size: 56px;
115
  font-weight: 700;
116
  letter-spacing: -0.035em;
117
  line-height: 1.05;
118
  margin-bottom: var(--space-sm);
119
  color: var(--color-text);
 
 
 
 
 
 
 
 
 
 
120
  }
121
 
122
- .hero .subtitle {
123
- font-size: 24px;
124
  font-weight: 500;
125
  color: var(--color-text-secondary);
126
  letter-spacing: -0.02em;
@@ -128,11 +147,12 @@ body {
128
  }
129
 
130
  .hero .description {
131
- font-size: 17px;
132
- line-height: 1.5;
133
  color: var(--color-text-muted);
134
- max-width: 720px;
135
  margin: 0 auto var(--space-lg);
 
136
  }
137
 
138
  /* Meta Information */
@@ -156,18 +176,38 @@ body {
156
  }
157
 
158
  .meta-row.authors {
159
- font-size: 16px;
160
  font-weight: 500;
161
  color: var(--color-text);
162
  }
163
 
164
  .meta-row.affiliations {
165
- font-size: 15px;
166
  color: var(--color-text-secondary);
167
  }
168
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
169
  .meta-row.links {
170
- margin-top: var(--space-xs);
 
 
 
171
  }
172
 
173
  .meta-item {
@@ -176,21 +216,62 @@ body {
176
  color: inherit;
177
  }
178
 
179
- .meta-item a {
180
- color: var(--color-primary);
 
 
 
 
 
 
 
181
  text-decoration: none;
 
 
182
  }
183
 
184
- .meta-item a:hover {
185
- text-decoration: underline;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
186
  }
187
 
188
  /* ========================= */
189
  /* MAIN CONTENT */
190
  /* ========================= */
191
  .content {
192
- max-width: 1600px;
193
- width: 95%;
194
  margin: 0 auto;
195
  padding: 0 var(--space-md) var(--space-2xl);
196
  }
@@ -228,9 +309,9 @@ body {
228
  }
229
 
230
  .section-header p {
231
- font-size: 17px;
232
  color: var(--color-text-muted);
233
- max-width: 680px;
234
  margin: 0 auto;
235
  line-height: 1.5;
236
  }
@@ -417,12 +498,12 @@ body {
417
  flex-direction: column;
418
  align-items: center;
419
  width: 100%;
420
- max-width: 1000px;
421
  }
422
 
423
  .framework-card .placeholder {
424
  width: 100%;
425
- height: 640px;
426
  background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ed 100%);
427
  border-radius: var(--radius-md);
428
  display: flex;
@@ -435,7 +516,7 @@ body {
435
  }
436
 
437
  .framework-card h3 {
438
- font-size: 15px;
439
  font-weight: 600;
440
  color: var(--color-text);
441
  margin-top: var(--space-sm);
@@ -448,6 +529,59 @@ body {
448
  height: auto;
449
  object-fit: contain;
450
  border-radius: var(--radius-md);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
451
  }
452
 
453
  /* ========================= */
@@ -517,13 +651,13 @@ body {
517
  align-items: center;
518
  justify-content: center;
519
  color: var(--color-text-muted);
520
- font-size: 14px;
521
  font-weight: 500;
522
  border: 2px dashed var(--color-border);
523
  }
524
 
525
  .carousel-card h4 {
526
- font-size: 15px;
527
  font-weight: 600;
528
  color: var(--color-text);
529
  margin-top: var(--space-sm);
@@ -535,6 +669,21 @@ body {
535
  height: 420px;
536
  object-fit: contain;
537
  border-radius: var(--radius-md);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
538
  }
539
 
540
  /* Carousel Navigation Buttons */
@@ -696,7 +845,7 @@ footer a:hover {
696
  /* TRAJECTORY / CHAT */
697
  /* ========================= */
698
  .trajectory-container {
699
- max-width: 1000px;
700
  margin: 0 auto;
701
  background: var(--color-surface);
702
  border-radius: var(--radius-lg);
@@ -705,17 +854,62 @@ footer a:hover {
705
  /* Subtle border */
706
  overflow: hidden;
707
  /* Ensure rounded corners */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
708
  }
709
 
710
  .chat-window {
711
- height: 600px;
712
  /* Fixed height for scrolling */
713
  overflow-y: auto;
714
  /* Enable vertical scroll */
715
  padding: var(--space-md);
716
  background: #f5f5f7;
717
  /* Chat background */
718
- font-size: 14px;
719
  }
720
 
721
  .chat-message {
@@ -743,7 +937,7 @@ footer a:hover {
743
  }
744
 
745
  .message-role-label {
746
- font-size: 11px;
747
  color: var(--color-text-muted);
748
  margin-bottom: 4px;
749
  font-weight: 500;
@@ -753,7 +947,7 @@ footer a:hover {
753
  }
754
 
755
  .message-bubble {
756
- padding: 12px 16px;
757
  border-radius: 12px;
758
  line-height: 1.5;
759
  position: relative;
@@ -761,6 +955,7 @@ footer a:hover {
761
  overflow-wrap: break-word;
762
  max-width: 100%;
763
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
764
  }
765
 
766
  .role-agent .message-bubble {
 
79
  min-height: 100vh;
80
  }
81
 
82
+ /* Global Image Optimization */
83
+ img {
84
+ image-rendering: -webkit-optimize-contrast;
85
+ image-rendering: crisp-edges;
86
+ transform: translateZ(0);
87
+ backface-visibility: hidden;
88
+ -webkit-backface-visibility: hidden;
89
+ }
90
+
91
  /* ========================= */
92
  /* HERO SECTION */
93
  /* ========================= */
 
98
  }
99
 
100
  .hero-content {
101
+ max-width: 1200px;
102
  margin: 0 auto;
103
  }
104
 
 
120
  }
121
 
122
  .hero h1 {
123
+ font-size: 72px;
124
  font-weight: 700;
125
  letter-spacing: -0.035em;
126
  line-height: 1.05;
127
  margin-bottom: var(--space-sm);
128
  color: var(--color-text);
129
+ display: flex;
130
+ align-items: center;
131
+ justify-content: center;
132
+ gap: var(--space-md);
133
+ }
134
+
135
+ .title-logo {
136
+ height: 1em;
137
+ width: auto;
138
+ vertical-align: middle;
139
  }
140
 
141
+ .hero h2 {
142
+ font-size: 32px;
143
  font-weight: 500;
144
  color: var(--color-text-secondary);
145
  letter-spacing: -0.02em;
 
147
  }
148
 
149
  .hero .description {
150
+ font-size: 21px;
151
+ line-height: 1.7;
152
  color: var(--color-text-muted);
153
+ max-width: 900px;
154
  margin: 0 auto var(--space-lg);
155
+ text-align: left;
156
  }
157
 
158
  /* Meta Information */
 
176
  }
177
 
178
  .meta-row.authors {
179
+ font-size: 22px;
180
  font-weight: 500;
181
  color: var(--color-text);
182
  }
183
 
184
  .meta-row.affiliations {
185
+ font-size: 17px;
186
  color: var(--color-text-secondary);
187
  }
188
 
189
+ .affiliation-logo {
190
+ height: 48px;
191
+ width: auto;
192
+ object-fit: contain;
193
+ transition: transform 0.2s ease, opacity 0.2s ease;
194
+ opacity: 0.85;
195
+ }
196
+
197
+ .affiliation-logo:hover {
198
+ transform: scale(1.1);
199
+ opacity: 1;
200
+ }
201
+
202
+ .kcl-logo {
203
+ height: 60px;
204
+ }
205
+
206
  .meta-row.links {
207
+ margin-top: var(--space-md);
208
+ padding-top: var(--space-md);
209
+ border-top: 1px solid var(--color-border);
210
+ gap: var(--space-md);
211
  }
212
 
213
  .meta-item {
 
216
  color: inherit;
217
  }
218
 
219
+ /* Platform Buttons */
220
+ .platform-btn {
221
+ display: inline-flex;
222
+ align-items: center;
223
+ gap: 10px;
224
+ padding: 12px 24px;
225
+ font-size: 18px;
226
+ font-weight: 600;
227
+ border-radius: var(--radius-pill);
228
  text-decoration: none;
229
+ transition: all 0.3s ease;
230
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
231
  }
232
 
233
+ .platform-btn:hover {
234
+ transform: translateY(-2px);
235
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
236
+ }
237
+
238
+ .platform-btn svg {
239
+ flex-shrink: 0;
240
+ }
241
+
242
+ .huggingface-btn {
243
+ background: linear-gradient(135deg, #FFD21E 0%, #FFA500 100%);
244
+ color: #000000;
245
+ }
246
+
247
+ .huggingface-btn:hover {
248
+ background: linear-gradient(135deg, #FFA500 0%, #FFD21E 100%);
249
+ }
250
+
251
+ .github-btn {
252
+ background: linear-gradient(135deg, #24292e 0%, #000000 100%);
253
+ color: #ffffff;
254
+ }
255
+
256
+ .github-btn:hover {
257
+ background: linear-gradient(135deg, #000000 0%, #24292e 100%);
258
+ }
259
+
260
+ .arxiv-btn {
261
+ background: linear-gradient(135deg, #B31B1B 0%, #8B0000 100%);
262
+ color: #ffffff;
263
+ }
264
+
265
+ .arxiv-btn:hover {
266
+ background: linear-gradient(135deg, #8B0000 0%, #B31B1B 100%);
267
  }
268
 
269
  /* ========================= */
270
  /* MAIN CONTENT */
271
  /* ========================= */
272
  .content {
273
+ max-width: 1800px;
274
+ width: 98%;
275
  margin: 0 auto;
276
  padding: 0 var(--space-md) var(--space-2xl);
277
  }
 
309
  }
310
 
311
  .section-header p {
312
+ font-size: 19px;
313
  color: var(--color-text-muted);
314
+ max-width: 900px;
315
  margin: 0 auto;
316
  line-height: 1.5;
317
  }
 
498
  flex-direction: column;
499
  align-items: center;
500
  width: 100%;
501
+ max-width: 1400px;
502
  }
503
 
504
  .framework-card .placeholder {
505
  width: 100%;
506
+ height: 800px;
507
  background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ed 100%);
508
  border-radius: var(--radius-md);
509
  display: flex;
 
516
  }
517
 
518
  .framework-card h3 {
519
+ font-size: 20px;
520
  font-weight: 600;
521
  color: var(--color-text);
522
  margin-top: var(--space-sm);
 
529
  height: auto;
530
  object-fit: contain;
531
  border-radius: var(--radius-md);
532
+ background: var(--color-background);
533
+ mix-blend-mode: multiply;
534
+ /* This will blend white backgrounds with the page background */
535
+ image-rendering: -webkit-optimize-contrast;
536
+ image-rendering: crisp-edges;
537
+ transform: translateZ(0);
538
+ backface-visibility: hidden;
539
+ }
540
+
541
+ .framework-description {
542
+ font-size: 16px;
543
+ line-height: 1.6;
544
+ color: var(--color-text-muted);
545
+ text-align: center;
546
+ margin-top: var(--space-sm);
547
+ padding: 0 var(--space-sm);
548
+ }
549
+
550
+ .trajectory-description {
551
+ font-size: 16px;
552
+ line-height: 1.6;
553
+ color: var(--color-text-muted);
554
+ text-align: center;
555
+ margin-top: var(--space-md);
556
+ max-width: 1400px;
557
+ margin-left: auto;
558
+ margin-right: auto;
559
+ padding: 0 var(--space-md);
560
+ }
561
+
562
+ .section-description {
563
+ font-size: 16px;
564
+ line-height: 1.6;
565
+ color: var(--color-text-muted);
566
+ text-align: center;
567
+ margin-top: var(--space-md);
568
+ max-width: 1200px;
569
+ margin-left: auto;
570
+ margin-right: auto;
571
+ padding: 0 var(--space-md);
572
+ }
573
+
574
+ .platform-icon {
575
+ flex-shrink: 0;
576
+ }
577
+
578
+ .github-btn .platform-icon,
579
+ .arxiv-btn .platform-icon {
580
+ filter: brightness(0) invert(1);
581
+ }
582
+
583
+ .huggingface-btn .platform-icon {
584
+ filter: none;
585
  }
586
 
587
  /* ========================= */
 
651
  align-items: center;
652
  justify-content: center;
653
  color: var(--color-text-muted);
654
+ font-size: 16px;
655
  font-weight: 500;
656
  border: 2px dashed var(--color-border);
657
  }
658
 
659
  .carousel-card h4 {
660
+ font-size: 18px;
661
  font-weight: 600;
662
  color: var(--color-text);
663
  margin-top: var(--space-sm);
 
669
  height: 420px;
670
  object-fit: contain;
671
  border-radius: var(--radius-md);
672
+ image-rendering: -webkit-optimize-contrast;
673
+ image-rendering: crisp-edges;
674
+ transform: translateZ(0);
675
+ backface-visibility: hidden;
676
+ }
677
+
678
+ .card-caption {
679
+ font-size: 17px;
680
+ line-height: 1.6;
681
+ color: var(--color-text-muted);
682
+ margin-top: var(--space-md);
683
+ padding: var(--space-sm);
684
+ background: rgba(0, 0, 0, 0.02);
685
+ border-radius: var(--radius-sm);
686
+ text-align: center;
687
  }
688
 
689
  /* Carousel Navigation Buttons */
 
845
  /* TRAJECTORY / CHAT */
846
  /* ========================= */
847
  .trajectory-container {
848
+ max-width: 1400px;
849
  margin: 0 auto;
850
  background: var(--color-surface);
851
  border-radius: var(--radius-lg);
 
854
  /* Subtle border */
855
  overflow: hidden;
856
  /* Ensure rounded corners */
857
+ position: relative;
858
+ /* For scroll hint positioning */
859
+ }
860
+
861
+ /* Scroll Hint Bubble */
862
+ .scroll-hint {
863
+ position: absolute;
864
+ bottom: 20px;
865
+ right: 20px;
866
+ display: flex;
867
+ align-items: center;
868
+ gap: 8px;
869
+ padding: 10px 16px;
870
+ background: rgba(255, 255, 255, 0.95);
871
+ backdrop-filter: blur(10px);
872
+ border-radius: var(--radius-pill);
873
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
874
+ font-size: 13px;
875
+ font-weight: 500;
876
+ color: var(--color-text);
877
+ pointer-events: none;
878
+ z-index: 10;
879
+ transition: opacity 0.3s ease, transform 0.3s ease;
880
+ border: 1px solid rgba(0, 0, 0, 0.1);
881
+ }
882
+
883
+ .scroll-hint.hidden {
884
+ opacity: 0;
885
+ transform: translateY(10px);
886
+ }
887
+
888
+ .scroll-hint svg {
889
+ animation: bounce 2s ease-in-out infinite;
890
+ }
891
+
892
+ @keyframes bounce {
893
+
894
+ 0%,
895
+ 100% {
896
+ transform: translateY(0);
897
+ }
898
+
899
+ 50% {
900
+ transform: translateY(4px);
901
+ }
902
  }
903
 
904
  .chat-window {
905
+ height: 750px;
906
  /* Fixed height for scrolling */
907
  overflow-y: auto;
908
  /* Enable vertical scroll */
909
  padding: var(--space-md);
910
  background: #f5f5f7;
911
  /* Chat background */
912
+ font-size: 16px;
913
  }
914
 
915
  .chat-message {
 
937
  }
938
 
939
  .message-role-label {
940
+ font-size: 13px;
941
  color: var(--color-text-muted);
942
  margin-bottom: 4px;
943
  font-weight: 500;
 
947
  }
948
 
949
  .message-bubble {
950
+ padding: 14px 18px;
951
  border-radius: 12px;
952
  line-height: 1.5;
953
  position: relative;
 
955
  overflow-wrap: break-word;
956
  max-width: 100%;
957
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
958
+ font-size: 15px;
959
  }
960
 
961
  .role-agent .message-bubble {
trajectory.js CHANGED
@@ -57,7 +57,7 @@ function renderTrajectory(scenario) {
57
 
58
  container.innerHTML = '';
59
 
60
- messages.forEach(msg => {
61
  const msgDiv = document.createElement('div');
62
  msgDiv.className = `chat-message role-${msg.role}`;
63
 
@@ -91,8 +91,10 @@ function renderTrajectory(scenario) {
91
  // Height Check (Post-render)
92
  // 3 lines is approx 80-100px.
93
  const COLLAPSE_HEIGHT = 200;
 
94
 
95
- if (contentDiv.scrollHeight > COLLAPSE_HEIGHT + 20) {
 
96
  contentDiv.style.cssText = `max-height: ${COLLAPSE_HEIGHT}px; overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);`;
97
 
98
  const btn = document.createElement('button');
 
57
 
58
  container.innerHTML = '';
59
 
60
+ messages.forEach((msg, index) => {
61
  const msgDiv = document.createElement('div');
62
  msgDiv.className = `chat-message role-${msg.role}`;
63
 
 
91
  // Height Check (Post-render)
92
  // 3 lines is approx 80-100px.
93
  const COLLAPSE_HEIGHT = 200;
94
+ const isLastMessage = (index === messages.length - 1);
95
 
96
+ // Only apply collapse logic if NOT the last message
97
+ if (!isLastMessage && contentDiv.scrollHeight > COLLAPSE_HEIGHT + 20) {
98
  contentDiv.style.cssText = `max-height: ${COLLAPSE_HEIGHT}px; overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);`;
99
 
100
  const btn = document.createElement('button');