thinkwee commited on
Commit ·
2254920
1
Parent(s): a8df6b3
v1
Browse files- assets/alan.png +3 -0
- assets/arxiv-logomark-small.svg +1 -0
- assets/framework_pipeline.png +2 -2
- assets/framework_task.png +2 -2
- assets/hallu_acc_corr.png +3 -0
- assets/hf-logo-pirate.svg +15 -0
- assets/hf-logo.svg +8 -0
- assets/kcl.svg +1 -0
- assets/logo.png +3 -0
- assets/qwenfamily.png +2 -2
- assets/tencent.png +3 -0
- index.html +103 -9
- styles.css +223 -28
- trajectory.js +4 -2
assets/alan.png
ADDED
|
Git LFS Details
|
assets/arxiv-logomark-small.svg
ADDED
|
|
assets/framework_pipeline.png
CHANGED
|
Git LFS Details
|
|
Git LFS Details
|
assets/framework_task.png
CHANGED
|
Git LFS Details
|
|
Git LFS Details
|
assets/hallu_acc_corr.png
ADDED
|
Git LFS Details
|
assets/hf-logo-pirate.svg
ADDED
|
|
assets/hf-logo.svg
ADDED
|
|
assets/kcl.svg
ADDED
|
|
assets/logo.png
ADDED
|
Git LFS Details
|
assets/qwenfamily.png
CHANGED
|
Git LFS Details
|
|
Git LFS Details
|
assets/tencent.png
ADDED
|
Git LFS Details
|
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
|
|
|
|
| 57 |
<p class="description">
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 68 |
</div>
|
| 69 |
<div class="meta-row links">
|
| 70 |
-
<
|
| 71 |
-
|
| 72 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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:
|
| 93 |
margin: 0 auto;
|
| 94 |
}
|
| 95 |
|
|
@@ -111,16 +120,26 @@ body {
|
|
| 111 |
}
|
| 112 |
|
| 113 |
.hero h1 {
|
| 114 |
-
font-size:
|
| 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
|
| 123 |
-
font-size:
|
| 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:
|
| 132 |
-
line-height: 1.
|
| 133 |
color: var(--color-text-muted);
|
| 134 |
-
max-width:
|
| 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:
|
| 160 |
font-weight: 500;
|
| 161 |
color: var(--color-text);
|
| 162 |
}
|
| 163 |
|
| 164 |
.meta-row.affiliations {
|
| 165 |
-
font-size:
|
| 166 |
color: var(--color-text-secondary);
|
| 167 |
}
|
| 168 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 169 |
.meta-row.links {
|
| 170 |
-
margin-top: var(--space-
|
|
|
|
|
|
|
|
|
|
| 171 |
}
|
| 172 |
|
| 173 |
.meta-item {
|
|
@@ -176,21 +216,62 @@ body {
|
|
| 176 |
color: inherit;
|
| 177 |
}
|
| 178 |
|
| 179 |
-
|
| 180 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 181 |
text-decoration: none;
|
|
|
|
|
|
|
| 182 |
}
|
| 183 |
|
| 184 |
-
.
|
| 185 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 186 |
}
|
| 187 |
|
| 188 |
/* ========================= */
|
| 189 |
/* MAIN CONTENT */
|
| 190 |
/* ========================= */
|
| 191 |
.content {
|
| 192 |
-
max-width:
|
| 193 |
-
width:
|
| 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:
|
| 232 |
color: var(--color-text-muted);
|
| 233 |
-
max-width:
|
| 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:
|
| 421 |
}
|
| 422 |
|
| 423 |
.framework-card .placeholder {
|
| 424 |
width: 100%;
|
| 425 |
-
height:
|
| 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:
|
| 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:
|
| 521 |
font-weight: 500;
|
| 522 |
border: 2px dashed var(--color-border);
|
| 523 |
}
|
| 524 |
|
| 525 |
.carousel-card h4 {
|
| 526 |
-
font-size:
|
| 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:
|
| 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:
|
| 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:
|
| 719 |
}
|
| 720 |
|
| 721 |
.chat-message {
|
|
@@ -743,7 +937,7 @@ footer a:hover {
|
|
| 743 |
}
|
| 744 |
|
| 745 |
.message-role-label {
|
| 746 |
-
font-size:
|
| 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:
|
| 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 |
-
|
|
|
|
| 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');
|