Spaces:

yangkaiSIGS
/

entropic

Running

App Files Files Community

yangkaiSIGS commited on 23 days ago

Commit

ac10c68

verified ·

1 Parent(s): 55776ea

Upload 8 files

Browse files

Files changed (9) hide show

.gitattributes +1 -0
figures/alpha_diff_target.svg +2554 -0
figures/entropy_diff_target.svg +2981 -0
figures/entropy_quadrant.svg +0 -0
figures/exp_entropy.svg +0 -0
figures/exp_reward.svg +0 -0
figures/exp_val.svg +1797 -0
figures/overview.png +3 -0
index.html +573 -19

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+figures/overview.png filter=lfs diff=lfs merge=lfs -text

figures/alpha_diff_target.svg ADDED Viewed

figures/entropy_diff_target.svg ADDED Viewed

figures/entropy_quadrant.svg ADDED Viewed

figures/exp_entropy.svg ADDED Viewed

figures/exp_reward.svg ADDED Viewed

figures/exp_val.svg ADDED Viewed

figures/overview.png ADDED Viewed

Git LFS Details

SHA256: 3670e1d080106effbaa03b08b41d36b966c2bad48ecae32a838f37e8af72b0a1
Pointer size: 131 Bytes
Size of remote file: 321 kB

index.html CHANGED Viewed

@@ -1,19 +1,573 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EntroPIC: Stable Long-Term Training of LLMs</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- MathJax -->
+    <script>
+    MathJax = {
+      tex: {
+          inlineMath: [['$', '$'], ['\\(', '\\)']],
+          displayMath: [['$$', '$$'], ['\\[', '\\]']],
+          processEscapes: true
+      },
+      options: {
+        ignoreHtmlClass: 'tex2jax_ignore',
+        processHtmlClass: 'tex2jax_process'
+      }
+    };
+    </script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+    <!-- Plotly.js -->
+    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
+    <!-- Fonts & Icons -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                        mono: ['JetBrains Mono', 'monospace'],
+                    },
+                    colors: {
+                        tencent: '#0052D9',
+                        primary: '#2c3e50',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            /* 柔和的背景纹理 */
+            background-color: #f8fafc;
+            background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
+            background-size: 24px 24px;
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, #0052D9 0%, #0ea5e9 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        /* 标题强调部分的高亮色 */
+        .highlight-acronym {
+            color: #0052D9;
+            font-weight: 700;
+        }
+        .math-scroll {
+            overflow-x: auto;
+            overflow-y: hidden;
+            max-width: 100%;
+            padding: 8px 0;
+        }
+        .math-scroll::-webkit-scrollbar {
+            height: 6px;
+        }
+        .math-scroll::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 3px;
+        }
+        .reflection-highlight {
+            background-color: #f0fdf4; border-left: 4px solid #22c55e; padding: 0.75rem; margin: 0.5rem 0; border-radius: 0 0.5rem 0.5rem 0;
+        }
+        .correction-highlight {
+            background-color: #f5f3ff; border-left: 4px solid #8b5cf6; padding: 0.75rem; margin: 0.5rem 0; border-radius: 0 0.5rem 0.5rem 0;
+        }
+        /* 作者链接样式 */
+        .author-link {
+            color: #0052D9;
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+        .author-link:hover {
+            color: #00308F;
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body class="text-slate-800 antialiased">
+    <!-- Decorative Background Blur -->
+    <div class="fixed top-0 left-0 right-0 h-96 bg-gradient-to-b from-blue-50/80 to-transparent -z-10 pointer-events-none"></div>
+    <!-- Header -->
+    <header class="pt-24 pb-12">
+        <div class="max-w-6xl mx-auto px-4 text-center">
+            <!-- Title -->
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-tight">
+                <span class="gradient-text">EntroPIC</span>: Towards Stable Long-Term Training of LLMs via
+                <span class="highlight-acronym">Entro</span>py Stabilization with <br class="hidden lg:block">
+                <span class="highlight-acronym">P</span>roportional-<span class="highlight-acronym">I</span>ntegral <span class="highlight-acronym">C</span>ontrol
+            </h1>
+            <!-- Authors -->
+            <div class="text-lg mb-6 text-slate-700 font-medium leading-relaxed">
+                <div class="flex flex-wrap justify-center items-center gap-x-4 gap-y-2">
+                    <span><a href="https://yk7333.github.io/" target="_blank" class="author-link">Kai Yang</a><sup>1</sup>,</span>
+                    <span><a href="https://xinxu-ustc.github.io/" target="_blank" class="author-link">Xin Xu</a><sup>1,2</sup>,</span>
+                    <span><a href="" target="_blank" class="author-link">Yangkun Chen</a><sup>1</sup>,</span>
+                    <span><a href="https://github.com/autoliuweijie" target="_blank" class="author-link">Weijie Liu</a><sup>1</sup>,</span>
+                    <span><a href="https://dmksjfl.github.io/" target="_blank" class="author-link">Jiafei Lyu</a><sup>1</sup>,</span><br class="hidden md:block">
+                    <span><a href="" target="_blank" class="author-link">Zichuan Lin</a><sup>1</sup>,</span>
+                    <span><a href="" target="_blank" class="author-link">Deheng Ye</a><sup>1</sup>,</span>
+                    <span><a href="https://github.com/yangsaiyong" target="_blank" class="author-link">Saiyong Yang</a><sup>1†</sup></span>
+                </div>
+                <div class="mt-4 text-base text-slate-500">
+                    <span class="mr-4">Tencent Hunyuan</span>
+                    <span>HKUST</span>
+                </div>
+                <div class="mt-1 text-xs text-slate-400">† Corresponding Author</div>
+            </div>
+            <!-- Action Buttons -->
+            <div class="flex justify-center gap-4 mt-8">
+                <a href="#" class="flex items-center gap-2 px-8 py-3 bg-slate-900 text-white rounded-full hover:bg-slate-800 transition shadow-xl hover:shadow-2xl transform hover:-translate-y-0.5 duration-200">
+                    <i class="fas fa-file-pdf"></i> Paper
+                </a>
+                <a href="#" class="flex items-center gap-2 px-8 py-3 bg-white border border-slate-200 text-slate-800 rounded-full hover:bg-slate-50 transition shadow-md hover:shadow-lg transform hover:-translate-y-0.5 duration-200">
+                    <i class="fab fa-github text-xl"></i> Code
+                </a>
+            </div>
+        </div>
+    </header>
+    <main class="max-w-6xl mx-auto px-4 py-10 space-y-24">
+        <!-- Abstract -->
+        <section>
+            <div class="bg-white/80 backdrop-blur-sm p-8 md:p-10 rounded-3xl shadow-lg border border-white/50 text-justify text-slate-600 leading-relaxed">
+                <h2 class="text-2xl font-bold mb-4 text-slate-800">Abstract</h2>
+                Long-term training of large language models (LLMs) requires maintaining stable exploration to prevent the model from collapsing into sub-optimal behaviors. Entropy is crucial in this context. However, existing RL methods struggle to maintain an appropriate level of entropy as positive samples reduce it while negative samples increase it.
+                <br><br>
+                We propose <strong>EntroPIC</strong>, a novel method that uses Proportional-Integral (PI) control to adaptively adjust the loss coefficients of positive and negative samples. This stabilizes entropy throughout training, ensuring efficient exploration and steady progress.
+            </div>
+            <div class="mt-10 transform hover:scale-[1.01] transition duration-500">
+                <img src="figures/overview.svg" alt="EntroPIC Overview" class="w-full rounded-2xl shadow-xl border border-slate-200/60" onerror="this.src='https://placehold.co/1200x400?text=Overview+Figure+(Ensure+figures/overview.png+exists)'">
+                <p class="text-center text-sm text-slate-400 mt-3">Figure 1: EntroPIC uses PI control to dynamically adjust sample weights based on entropy error.</p>
+            </div>
+        </section>
+        <!-- Method Section -->
+        <section id="method">
+            <h2 class="text-3xl font-bold mb-12 text-center text-slate-800">Methodology</h2>
+            <!-- 1. Quadrant Analysis -->
+            <div class="mb-16 bg-white rounded-3xl shadow-sm border border-slate-100 p-8">
+                <div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
+                    <div class="md:col-span-5">
+                        <h3 class="text-xl font-bold mb-4 text-slate-800 flex items-center gap-2">
+                            <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-sm">01</span>
+                            High-Probability Tokens Matter
+                        </h3>
+                        <p class="text-slate-600 leading-relaxed mb-6">
+                            Not all tokens affect entropy equally. Our analysis reveals distinct impacts based on token probability and advantage. EntroPIC focuses control where it matters most:
+                        </p>
+                        <ul class="space-y-3">
+                            <li class="flex items-start gap-3 p-3 bg-green-50 rounded-xl border border-green-100">
+                                <i class="fas fa-arrow-trend-down text-green-600 mt-1"></i>
+                                <span class="text-sm text-slate-700"><strong class="text-green-700">Positive High-Prob:</strong> Standard RL drops entropy too fast. We reduce their weight to maintain exploration.</span>
+                            </li>
+                            <li class="flex items-start gap-3 p-3 bg-red-50 rounded-xl border border-red-100">
+                                <i class="fas fa-shield-alt text-red-500 mt-1"></i>
+                                <span class="text-sm text-slate-700"><strong class="text-red-700">Negative Low-Prob:</strong> We avoid suppressing rare explorations to prevent degradation.</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="md:col-span-7">
+                        <div class="rounded-xl overflow-hidden">
+                            <img src="figures/entropy_quadrant.svg" alt="Entropy Quadrant Analysis" class="w-full" onerror="this.src='https://placehold.co/600x400?text=Entropy+Quadrant+Analysis'">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 2. PI Control Dynamics -->
+            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-8">
+                <div class="text-center max-w-3xl mx-auto mb-10">
+                    <h3 class="text-xl font-bold mb-4 flex items-center justify-center gap-2">
+                        <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-sm">02</span>
+                        Precise Control at Any Target
+                    </h3>
+                    <p class="text-slate-600">
+                        Unlike static coefficients, EntroPIC's PI controller dynamically adjusts $\alpha$ to lock entropy to <strong>any arbitrary target value</strong>.
+                    </p>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div class="bg-slate-50 p-4 rounded-2xl border border-slate-100">
+                        <img src="figures/entropy_diff_target.svg" alt="Entropy at Different Targets" class="w-full" onerror="this.src='https://placehold.co/600x400?text=Entropy+Convergence'">
+                        <p class="text-center text-sm font-bold text-slate-700 mt-3">Entropy Convergence</p>
+                    </div>
+                    <div class="bg-slate-50 p-4 rounded-2xl border border-slate-100">
+                        <img src="figures/alpha_diff_target.svg" alt="Alpha Dynamics" class="w-full" onerror="this.src='https://placehold.co/600x400?text=Alpha+Coefficient+Dynamics'">
+                        <p class="text-center text-sm font-bold text-slate-700 mt-3">Adaptive Coefficient ($\alpha$)</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Experimental Results -->
+        <section id="results">
+            <h2 class="text-3xl font-bold mb-12 text-center text-slate-800">Experimental Results</h2>
+            <!-- Training Curves -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+                <div class="bg-white p-2 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition">
+                    <img src="figures/exp_entropy.svg" class="w-full rounded-xl" onerror="this.src='https://placehold.co/400x300?text=Entropy+Curve'">
+                    <p class="text-center text-sm font-bold mt-3 text-slate-600">Entropy Stability</p>
+                </div>
+                <div class="bg-white p-2 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition">
+                    <img src="figures/exp_reward.svg" class="w-full rounded-xl" onerror="this.src='https://placehold.co/400x300?text=Reward+Curve'">
+                    <p class="text-center text-sm font-bold mt-3 text-slate-600">Training Reward</p>
+                </div>
+                <div class="bg-white p-2 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition">
+                    <img src="figures/exp_val.svg" class="w-full rounded-xl" onerror="this.src='https://placehold.co/400x300?text=Validation+Accuracy'">
+                    <p class="text-center text-sm font-bold mt-3 text-slate-600">Validation Accuracy</p>
+                </div>
+            </div>
+            <!-- Main Results Bar Chart -->
+            <div class="bg-white p-8 rounded-3xl shadow-lg border border-slate-100 mb-12">
+                <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 gap-4">
+                    <div>
+                        <h3 class="text-2xl font-bold text-slate-800">Main Performance Comparison (On-Policy)</h3>
+                        <p class="text-slate-500 mt-1">Comparing Pass@N rates across mathematical datasets. EntroPIC achieves SOTA.</p>
+                    </div>
+                    <div class="px-3 py-1 bg-blue-50 text-blue-700 rounded-lg text-sm font-medium border border-blue-100">
+                        Metric: Pass@N
+                    </div>
+                </div>
+                <div id="chart-main-results" class="w-full h-[500px]"></div>
+            </div>
+            <!-- Smaller Charts -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white p-6 rounded-3xl shadow-sm border border-slate-100">
+                    <h3 class="font-bold text-slate-700 mb-6 text-center">Off-Policy Training</h3>
+                    <div id="chart-off-policy" class="w-full h-72"></div>
+                </div>
+                <div class="bg-white p-6 rounded-3xl shadow-sm border border-slate-100">
+                    <h3 class="font-bold text-slate-700 mb-6 text-center">High Temperature (T=1.0)</h3>
+                    <div id="chart-temp" class="w-full h-72"></div>
+                </div>
+            </div>
+        </section>
+        <!-- Interactive Case Study -->
+        <section id="case-study" class="scroll-mt-24">
+            <div class="bg-slate-900 text-white rounded-3xl p-1 overflow-hidden shadow-2xl ring-1 ring-white/10">
+                <div class="p-10 text-center">
+                    <h2 class="text-3xl font-bold mb-3">Case Study: Reasoning Dynamics</h2>
+                    <p class="text-slate-400">Witness how high entropy enables <span class="text-green-400 font-semibold">Reflection</span> and <span class="text-purple-400 font-semibold">Self-Correction</span>.</p>
+                </div>
+                <div class="bg-white text-slate-800 rounded-2xl m-1 grid grid-cols-1 lg:grid-cols-12 overflow-hidden h-[800px]">
+                    <!-- Sidebar -->
+                    <div class="lg:col-span-4 bg-slate-50 border-r border-slate-200 p-6 flex flex-col gap-4 overflow-y-auto">
+                        <div class="text-sm font-mono bg-white p-5 rounded-xl border border-slate-200 shadow-sm mb-4">
+                            <strong class="text-slate-400 text-xs uppercase block mb-2 tracking-wider">Problem</strong>
+                            Let
+                            $$f(x)=\frac{(x-18)(x-72)(x-98)(x-k)}{x}.$$
+                            There exist exactly three positive real values of $k$ such that $f$ has a minimum at exactly two real values of $x$. Find the sum of these three values of $k$.
+                        </div>
+                        <div class="space-y-4">
+                            <button onclick="setCase('entropic')" id="btn-entropic" class="group w-full p-5 rounded-xl border-2 text-left transition-all shadow-md bg-white border-tencent transform scale-[1.02]">
+                                <div class="font-bold flex justify-between items-center text-lg">
+                                    <span>EntroPIC</span>
+                                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
+                                </div>
+                                <div class="text-xs font-bold text-green-600 mt-1 mb-3 uppercase tracking-wide">Correct Answer (240)</div>
+                                <div class="text-xs text-slate-500 flex flex-wrap gap-2">
+                                    <span class="px-2 py-1 bg-green-100 rounded text-green-700 font-medium">Reflection</span>
+                                    <span class="px-2 py-1 bg-purple-100 rounded text-purple-700 font-medium">Self-Correction</span>
+                                </div>
+                            </button>
+                            <button onclick="setCase('grpo')" id="btn-grpo" class="group w-full p-5 rounded-xl border-2 text-left transition-all bg-white border-transparent hover:border-slate-200 opacity-60 hover:opacity-100">
+                                <div class="font-bold flex justify-between items-center text-lg">
+                                    <span>GRPO (Baseline)</span>
+                                    <i class="fas fa-times-circle text-red-400 text-xl"></i>
+                                </div>
+                                <div class="text-xs font-bold text-red-500 mt-1 mb-3 uppercase tracking-wide">Incorrect Answer (188)</div>
+                                <div class="text-xs text-slate-400">
+                                    Linear reasoning, missing edge cases.
+                                </div>
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Content Area -->
+                    <div class="lg:col-span-8 p-10 bg-white overflow-y-auto relative">
+                        <div id="case-content" class="prose prose-slate prose-lg max-w-none pb-12">
+                            <!-- JS Injected -->
+                        </div>
+                        <!-- Fade overlay -->
+                        <div class="absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-white to-transparent pointer-events-none"></div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Citation -->
+        <section class="max-w-4xl mx-auto">
+            <div class="bg-slate-100 text-slate-700 p-8 rounded-3xl border border-slate-200/60">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-bold text-slate-900">Citation</h2>
+                    <button onclick="navigator.clipboard.writeText(document.querySelector('pre').innerText); alert('Copied!')" class="text-xs bg-white border border-slate-300 px-3 py-1 rounded hover:bg-slate-50 transition">
+                        Copy BibTeX
+                    </button>
+                </div>
+                <pre class="font-mono text-xs md:text-sm overflow-x-auto p-4 bg-white border border-slate-200 rounded-xl text-slate-600 shadow-sm selection:bg-blue-100">
+@article{yang2025entropic,
+  title={EntroPIC: Towards Stable Long-Term Training of LLMs via Entropy Stabilization with Proportional-Integral Control},
+  author={Yang, Kai and Xu, Xin and Chen, Yangkun and Liu, Weijie and Lyu, Jiafei and Lin, Zichuan and Ye, Deheng and Yang, Saiyong},
+  journal={arXiv preprint},
+  year={2025}
+}</pre>
+            </div>
+        </section>
+    </main>
+    <footer class="bg-white border-t border-slate-200 py-12 mt-12">
+        <div class="max-w-6xl mx-auto px-4 text-center text-slate-500 text-sm">
+            <p class="mb-2">Project page based on EntroPIC.</p>
+            <p>© 2025 Tencent Hunyuan. All rights reserved.</p>
+        </div>
+    </footer>
+    <script>
+        // --- Data for Charts ---
+        // 1. Main Results (5 Models)
+        const datasets = ['Math', 'AMC', 'AIME24', 'AIME25', 'Olympic', 'Omni-math', 'Overall'];
+        const dataInitial = [97.0, 81.6, 60.0, 53.0, 68.7, 49.3, 68.3];
+        const dataGRPO =    [97.4, 88.0, 70.0, 53.3, 72.7, 57.6, 73.2];
+        const dataNSR =     [96.4, 89.2, 63.3, 46.7, 71.3, 56.2, 70.5];
+        const dataAEC =     [97.8, 89.2, 73.3, 60.0, 72.5, 58.5, 75.2];
+        const dataEntroPIC =[97.2, 91.6, 76.7, 66.7, 71.3, 58.4, 77.0];
+        const traceInitial = { x: datasets, y: dataInitial, name: 'Initial', type: 'bar', marker: { color: '#e2e8f0' } };
+        const traceGRPO = { x: datasets, y: dataGRPO, name: 'GRPO', type: 'bar', marker: { color: '#94a3b8' } };
+        const traceNSR = { x: datasets, y: dataNSR, name: 'NSR', type: 'bar', marker: { color: '#facc15' } };
+        const traceAEC = { x: datasets, y: dataAEC, name: 'AEC', type: 'bar', marker: { color: '#4ade80' } };
+        const traceEntroPIC = { x: datasets, y: dataEntroPIC, name: 'EntroPIC', type: 'bar', marker: { color: '#0052D9' } };
+        const mainLayout = {
+            barmode: 'group',
+            bargap: 0.15,
+            bargroupgap: 0.05,
+            margin: { t: 20, b: 40, l: 50, r: 20 },
+            legend: { orientation: 'h', y: 1.1, x: 0.5, xanchor: 'center' },
+            yaxis: { title: 'Pass@N (%)', range: [40, 100], gridcolor: '#f1f5f9' },
+            xaxis: { title: '', tickfont: { size: 13 } },
+            plot_bgcolor: 'rgba(0,0,0,0)',
+            paper_bgcolor: 'rgba(0,0,0,0)'
+        };
+        // 2. Off-Policy
+        const offModels = ['GRPO', 'EntroPIC(P)', 'EntroPIC(PI)'];
+        const offAvg = [69.4, 72.2, 73.2];
+        const offTrace = {
+            x: offModels, y: offAvg, type: 'bar',
+            marker: { color: ['#cbd5e1', '#60a5fa', '#2563eb'] },
+            text: offAvg.map(String), textposition: 'auto'
+        };
+        // 3. High Temp
+        const tempModels = ['GRPO (T=1)', 'EntroPIC (T=1)'];
+        const tempAvg = [71.0, 74.7];
+        const tempTrace = {
+            x: tempModels, y: tempAvg, type: 'bar',
+            marker: { color: ['#f87171', '#10b981'] },
+            width: [0.4, 0.4],
+            text: tempAvg.map(String), textposition: 'auto'
+        };
+        const subLayout = {
+            margin: { t: 10, b: 30, l: 40, r: 10 },
+            yaxis: { range: [60, 80], title: 'Pass@N (%)', gridcolor: '#f1f5f9' },
+            plot_bgcolor: 'rgba(0,0,0,0)',
+            paper_bgcolor: 'rgba(0,0,0,0)'
+        };
+        // --- Case Study Content ---
+        const caseData = {
+            grpo: {
+                btnId: 'btn-grpo',
+                content: `
+                <h3 class="font-bold text-2xl mb-6 text-slate-900 border-b pb-2">GRPO Response</h3>
+                <div class="space-y-8 text-slate-600">
+                    <div>
+                        <p class="mb-2">Alright, I have this problem:</p>
+                        <div class="bg-slate-50 p-4 rounded-lg border border-slate-200">
+                            <strong class="text-slate-800 block mb-2">Problem Statement:</strong>
+                            Let $$f(x) = \\frac{(x-18)(x-72)(x-98)(x-k)}{x}$$
+                            There exist exactly three positive real values of $k$ such that $f$ has a minimum at exactly two real values of $x$. Find the sum of these three values of $k$.
+                        </div>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-slate-900 text-lg mb-2">Step 1: Critical Points</h4>
+                        <p>Let $N(x) = (x-18)(x-72)(x-98)(x-k)$. Derivative:</p>
+                        <div class="math-scroll">$$f'(x) = \\frac{N'(x) \\cdot x - N(x)}{x^2}$$</div>
+                        <p>Set numerator to zero: $N'(x) \\cdot x = N(x)$.</p>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-slate-900 text-lg mb-2">Step 2: Roots of N(x)</h4>
+                        <p>If $x$ is a root of $N(x)$ (i.e., $x \\in \\{18,72,98,k\\}$), then $N(x) = 0$. Equation reduces to $N'(x) \\cdot x = 0 \\implies N'(x) = 0$.</p>
+                        <ul class="list-disc list-inside ml-4 font-mono text-sm bg-slate-50 p-4 rounded border border-slate-100">
+                            <li>$x = 18 \\implies k = 18$</li>
+                            <li>$x = 72 \\implies k = 72$</li>
+                            <li>$x = 98 \\implies k = 98$</li>
+                        </ul>
+                        <p class="text-sm italic text-slate-400 mt-2">Note: The model assumes these are valid candidates without verifying the "exactly two minima" condition.</p>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-slate-900 text-lg mb-2">Step 3: Alternative Form</h4>
+                        <p>Let $g(x) = (x-18)(x-72)(x-98)$:</p>
+                        <div class="math-scroll">$$f(x) = g(x) \\left(1 - \\frac{k}{x}\\right)$$</div>
+                        <p>Critical points satisfy:</p>
+                        <div class="math-scroll">$$g'(x) \\left(1 - \\frac{k}{x}\\right) + g(x) \\frac{k}{x^2} = 0 \\quad \\Rightarrow \\quad g'(x)x(x-k) + g(x)k = 0$$</div>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-slate-900 text-lg mb-2">Step 4-5: Valid k Values</h4>
+                        <p>The condition "exactly two minima" implies the derivative must have a double root. Observing the roots 18, 72, 98, the polynomial structure suggests the valid $k$ are related to these numbers.</p>
+                        <p>Through analysis:</p>
+                        <div class="math-scroll">$$k_1 = 18, \\quad k_2 = 72, \\quad k_3 = 98$$</div>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-slate-900 text-lg mb-2">Step 6: Sum of k</h4>
+                        <div class="math-scroll text-xl">$$18 + 72 + 98 = 188$$</div>
+                    </div>
+                    <div class="p-6 bg-red-50 border border-red-200 rounded-xl text-center">
+                        <p class="text-red-500 font-bold uppercase text-xs tracking-wider mb-2">Final Answer</p>
+                        <span class="font-mono text-1xl font-bold text-red-700">188</span>
+                    </div>
+                </div>`
+            },
+            entropic: {
+                btnId: 'btn-entropic',
+                content: `
+                <h3 class="font-bold text-2xl mb-6 text-slate-900 border-b pb-2">EntroPIC Response</h3>
+                <div class="space-y-8 text-slate-600">
+                    <p>Alright, let's tackle this problem step by step.</p>
+                    <div>
+                        <h4 class="font-bold text-slate-900 text-lg mb-2">Finding Critical Points $f'(x)=0$</h4>
+                        <p>Let $N(x) = (x - 18)(x - 72)(x - 98)(x - k)$. The critical points are where $f'(x) = 0$. Using the quotient rule, we set the numerator to zero:</p>
+                        <div class="math-scroll">$$N'(x) \\cdot x = N(x)$$</div>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-slate-900 text-lg mb-2">Checking Roots of N(x)</h4>
+                        <p>If $x$ is a root of $N(x)$ (i.e., $x \\in \\{18, 72, 98, k\\}$), then $N(x) = 0$. The condition $N'(x) \\cdot x = N(x)$ becomes $N'(x) \\cdot x = 0$. Since $x \\neq 0$, we require $N'(x) = 0$.</p>
+                        <!-- REFLECTION POINT -->
+                        <div class="reflection-highlight shadow-sm">
+                            <div class="flex items-center gap-2 mb-2">
+                                <span class="w-2 h-2 bg-green-500 rounded-full"></span>
+                                <p class="font-bold text-green-700 text-xs uppercase">Reflection</p>
+                            </div>
+                            <p class="text-slate-800 italic">Wait, so $x = 18$ is a critical point of $f$ if and only if $N'(18) = 0$. Let's compute $N'(x)$ and check:</p>
+                            <div class="math-scroll text-slate-800 mt-2">$$N'(x) = \\frac{d}{dx} \\left[ (x-18)(x-72)(x-98)(x-k) \\right]$$</div>
+                            <p class="text-sm mt-1">Set $x=18$: $N'(18) = (18-72)(18-98)(18-k)$. $N'(18)=0 \\implies k=18$. Similarly for $x=72$ and $x=98$.</p>
+                        </div>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-slate-900 text-lg mb-2">Alternative Approach: Rewriting f(x)</h4>
+                        <p>Alternatively, let $g(x) = (x-18)(x-72)(x-98)$.</p>
+                        <div class="math-scroll">$$f(x) = g(x) \\left(1 - \\frac{k}{x}\\right)$$</div>
+                        <p>The critical points satisfy $f'(x) = 0$, which rearranges to: $g'(x) x (x - k) + g(x) k = 0$.</p>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-slate-900 text-lg mb-2">Exploring Symmetry</h4>
+                        <p>The condition "exactly two real values of $x$ where $f$ has a minimum" implies the quartic $N'(x) \\cdot x - N(x) = 0$ must have a specific root structure. This usually means that two critical points must coincide, leading to a double root.</p>
+                        <!-- SELF-CORRECTION POINT -->
+                        <div class="correction-highlight shadow-sm mt-4">
+                            <div class="flex items-center gap-2 mb-2">
+                                <span class="w-2 h-2 bg-purple-500 rounded-full"></span>
+                                <p class="font-bold text-purple-700 text-xs uppercase">Self-Correction / Deep Check</p>
+                            </div>
+                            <p class="text-slate-800">Testing $k = 72$: If $k = 72$, $N(x)$ has a repeated root. This is a potential candidate.</p>
+                            <p class="text-slate-800 mt-1">The analysis shows that for exactly two minima, the critical point equation must possess a double root for certain $k$.</p>
+                        </div>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-slate-900 text-lg mb-2">Correct Insight: Valid k Values</h4>
+                        <p>Through systematic polynomial analysis, the three positive real values of $k$ are:</p>
+                        <div class="math-scroll text-lg">$$k_1 = 46, \\quad k_2 = 72, \\quad k_3 = 122$$</div>
+                        <p class="text-sm bg-slate-50 p-2 rounded mt-2 border border-slate-100">
+                            These values are consistent with symmetry properties:
+                            <br>• $k = 72$ is the middle root.
+                            <br>• $k = 46$ and $k = 122$ are symmetric counterparts (average of 18 and 98 is 58; $72 - (72-46) = 46$).
+                        </p>
+                    </div>
+                    <div>
+                        <p class="font-bold text-lg">The sum of these three values of $k$ is:</p>
+                        <div class="math-scroll text-xl">$$46 + 72 + 122 = 240$$</div>
+                        <div class="p-6 bg-green-50 border border-green-200 rounded-xl text-center mt-4">
+                            <p class="text-green-600 font-bold uppercase text-xs tracking-wider mb-2">Final Answer</p>
+                            <span class="font-mono text-1xl font-bold text-green-700">240</span>
+                        </div>
+                    </div>
+                </div>`
+            }
+        };
+        function setCase(key) {
+            const data = caseData[key];
+            // Reset Buttons
+            document.getElementById('btn-entropic').className = "w-full p-5 rounded-xl border-2 text-left transition-all shadow-sm bg-white border-transparent hover:border-slate-200 opacity-60";
+            document.getElementById('btn-grpo').className = "w-full p-5 rounded-xl border-2 text-left transition-all shadow-sm bg-white border-transparent hover:border-slate-200 opacity-60";
+            // Activate Button
+            const activeBtn = document.getElementById(data.btnId);
+            activeBtn.className = "w-full p-5 rounded-xl border-2 text-left transition-all shadow-lg bg-white border-tencent transform scale-[1.02] opacity-100 ring-4 ring-blue-50";
+            // Inject Content
+            document.getElementById('case-content').innerHTML = data.content;
+            // Rerender Math
+            if(window.MathJax) {
+                MathJax.typesetPromise([document.getElementById('case-content')]);
+            }
+        }
+        // Init
+        document.addEventListener("DOMContentLoaded", function() {
+            Plotly.newPlot('chart-main-results', [traceInitial, traceGRPO, traceNSR, traceAEC, traceEntroPIC], mainLayout, {responsive: true, displayModeBar: false});
+            Plotly.newPlot('chart-off-policy', [offTrace], subLayout, {responsive: true, displayModeBar: false});
+            Plotly.newPlot('chart-temp', [tempTrace], subLayout, {responsive: true, displayModeBar: false});
+            setCase('entropic');
+        });
+    </script>
+</body>
+</html>