Spaces:

Adhitya122
/

molforge

Running

App Files Files Community

Adhitya122 commited on 12 days ago

Commit

f3e2722

verified ·

1 Parent(s): 5511b8f

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +171 -396

index.html CHANGED Viewed

@@ -3,455 +3,230 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MolForge | Verifier-Driven RL for Drug Discovery</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --primary: #6366f1;
-            --primary-glow: rgba(99, 102, 241, 0.5);
-            --secondary: #8b5cf6;
-            --bg: #0f172a;
-            --card-bg: rgba(30, 41, 59, 0.7);
-            --text: #f8fafc;
-            --text-dim: #94a3b8;
-            --glass: rgba(255, 255, 255, 0.03);
-            --glass-border: rgba(255, 255, 255, 0.1);
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
         body {
-            font-family: 'Inter', sans-serif;
-            background-color: var(--bg);
-            background-image:
-                radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
-                radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 40%);
-            color: var(--text);
-            line-height: 1.6;
-            overflow-x: hidden;
         }
-        .container {
-            max-width: 1100px;
             margin: 0 auto;
-            padding: 0 2rem;
         }
-        /* Hero Section */
-        header {
-            height: 90vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            position: relative;
         }
-        .badge {
-            background: var(--glass);
-            border: 1px solid var(--glass-border);
-            padding: 0.5rem 1.2rem;
-            border-radius: 99px;
-            font-size: 0.85rem;
             font-weight: 600;
-            color: var(--primary);
-            margin-bottom: 1.5rem;
-            display: inline-block;
-            backdrop-filter: blur(10px);
-        }
-        h1 {
-            font-family: 'Outfit', sans-serif;
-            font-size: clamp(3rem, 8vw, 5.5rem);
-            font-weight: 800;
-            line-height: 1.1;
-            margin-bottom: 1.5rem;
-            background: linear-gradient(to bottom right, #fff 30%, var(--text-dim));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .hero-tagline {
-            font-size: clamp(1.1rem, 3vw, 1.4rem);
-            color: var(--text-dim);
-            max-width: 700px;
-            margin-bottom: 3rem;
-        }
-        .cta-group {
-            display: flex;
-            gap: 1.5rem;
-            flex-wrap: wrap;
-            justify-content: center;
-        }
-        .btn {
-            padding: 1rem 2.5rem;
-            border-radius: 12px;
-            font-weight: 700;
-            text-decoration: none;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             display: inline-flex;
             align-items: center;
-            gap: 0.5rem;
-        }
-        .btn-primary {
-            background: var(--primary);
-            color: white;
-            box-shadow: 0 10px 20px -10px var(--primary-glow);
-        }
-        .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 15px 30px -10px var(--primary-glow);
-            filter: brightness(1.1);
-        }
-        .btn-secondary {
-            background: var(--glass);
-            border: 1px solid var(--glass-border);
-            color: white;
-        }
-        .btn-secondary:hover {
-            background: var(--glass-border);
-            transform: translateY(-2px);
-        }
-        /* Section Styling */
-        section {
-            padding: 8rem 0;
-        }
-        .section-header {
-            margin-bottom: 4rem;
-            text-align: center;
-        }
-        .section-header h2 {
-            font-family: 'Outfit', sans-serif;
-            font-size: 2.5rem;
-            margin-bottom: 1rem;
-        }
-        .section-header p {
-            color: var(--text-dim);
-            max-width: 600px;
-            margin: 0 auto;
-        }
-        /* Pillars Grid */
-        .pillars-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
-        }
-        .pillar-card {
-            background: var(--card-bg);
-            border: 1px solid var(--glass-border);
-            padding: 2.5rem;
-            border-radius: 24px;
-            transition: all 0.4s ease;
-            backdrop-filter: blur(12px);
-        }
-        .pillar-card:hover {
-            transform: translateY(-10px);
-            border-color: var(--primary);
-            box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5);
-        }
-        .pillar-icon {
-            font-size: 2rem;
-            margin-bottom: 1.5rem;
-            background: var(--glass);
-            width: 60px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 16px;
-        }
-        .pillar-card h3 {
-            font-size: 1.4rem;
-            margin-bottom: 1rem;
-            color: var(--primary);
         }
-        .pillar-card p {
-            color: var(--text-dim);
-            font-size: 0.95rem;
-        }
-        /* Visuals Section */
-        .visual-container {
-            background: var(--card-bg);
-            border: 1px solid var(--glass-border);
-            border-radius: 32px;
-            padding: 3rem;
-            margin-bottom: 4rem;
-            overflow: hidden;
-        }
-        .visual-container img {
-            width: 100%;
-            height: auto;
-            border-radius: 16px;
-            box-shadow: 0 20px 50px rgba(0,0,0,0.4);
-        }
-        .visual-label {
-            display: block;
-            text-align: center;
-            margin-top: 1.5rem;
-            color: var(--text-dim);
-            font-weight: 500;
-        }
-        /* Results Table */
-        .table-wrapper {
-            overflow-x: auto;
-            background: var(--glass);
-            border-radius: 20px;
-            border: 1px solid var(--glass-border);
-        }
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            text-align: left;
-        }
-        th, td {
-            padding: 1.5rem;
-            border-bottom: 1px solid var(--glass-border);
-        }
-        th {
-            background: rgba(255,255,255,0.05);
-            font-weight: 700;
-            text-transform: uppercase;
-            font-size: 0.75rem;
-            letter-spacing: 0.1em;
-            color: var(--text-dim);
-        }
-        .improvement {
-            color: #10b981;
-            font-weight: 800;
-        }
-        /* POMDP Info */
-        .pomdp-box {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 2rem;
-            margin-top: 3rem;
-        }
-        .state-card {
-            background: var(--glass);
-            padding: 2rem;
-            border-radius: 20px;
-            border-left: 4px solid var(--primary);
-        }
-        .state-card h4 {
-            margin-bottom: 1rem;
-            color: var(--text);
-        }
-        /* Footer */
-        footer {
-            padding: 6rem 0;
-            text-align: center;
-            border-top: 1px solid var(--glass-border);
-        }
-        .footer-links {
-            display: flex;
-            justify-content: center;
-            gap: 2rem;
-            margin-bottom: 2rem;
-        }
-        .footer-links a {
-            color: var(--text-dim);
-            text-decoration: none;
-            font-weight: 600;
-            transition: color 0.3s;
-        }
-        .footer-links a:hover {
-            color: var(--primary);
-        }
-        @media (max-width: 768px) {
-            .pomdp-box {
-                grid-template-columns: 1fr;
-            }
-            h1 { font-size: 3rem; }
-            .pillars-grid { grid-template-columns: 1fr; }
         }
     </style>
 </head>
-<body>
-    <div class="container">
-        <!-- Hero Section -->
-        <header>
-            <div class="badge">OpenEnv Hackathon 2026</div>
-            <h1>MolForge</h1>
-            <p class="hero-tagline">A verifier-driven reinforcement learning environment for oncology drug discovery, where the LLM is the scientist, not the judge.</p>
-            <div class="cta-group">
-                <a href="https://colab.research.google.com/drive/1c6npGkGNbbbd8XFNeS6zInBpopLnJ4W4?usp=sharing" target="_blank" class="btn btn-primary">
-                    Launch Training Notebook
-                </a>
-                <a href="#pillars" class="btn btn-secondary">Explore the Pillars</a>
             </div>
-        </header>
-        <!-- POMDP Section -->
-        <section id="architecture">
-            <div class="section-header">
-                <h2>Scientific Architecture</h2>
-                <p>MolForge operates as a Partially Observable Markov Decision Process (POMDP), forcing models to operate under real-world uncertainty.</p>
             </div>
-            <div class="visual-container">
-                <img src="assets/molforge_architecture.png" alt="MolForge Architecture">
-                <span class="visual-label">Closed-loop scientific feedback architecture</span>
             </div>
-            <div class="pomdp-box">
-                <div class="state-card">
-                    <h4>Hidden Reality</h4>
-                    <p>The ground-truth scoring for potency, safety, and synthesizability. Includes late-stage mutation traps that only evidence can reveal.</p>
                 </div>
-                <div class="state-card">
-                    <h4>Visible Evidence</h4>
-                    <p>Noisy assay reports from RDKit and TDC, remaining budget, and structured feedback from the governance board.</p>
                 </div>
             </div>
-        </section>
-        <!-- Pillars Section -->
-        <section id="pillars">
-            <div class="section-header">
-                <h2>The Seven Pillars</h2>
-                <p>Beyond simple molecule generation: a complete medicinal chemistry workflow optimizer.</p>
             </div>
-            <div class="pillars-grid">
-                <div class="pillar-card">
-                    <div class="pillar-icon">🧪</div>
-                    <h3>Verifier-First</h3>
-                    <p>The LLM is held accountable by RDKit and TDC simulation engines. It must justify every decision with verifiable data.</p>
                 </div>
-                <div class="pillar-card">
-                    <div class="pillar-icon">🧬</div>
-                    <h3>Physics Grounded</h3>
-                    <p>Heuristic docking scores simulate pocket matching, lipophilic fit, and polarity clash in milliseconds.</p>
                 </div>
-                <div class="pillar-card">
-                    <div class="pillar-icon">🔄</div>
-                    <h3>Self-Correction</h3>
-                    <p>A structured loop where agents receive reviews on their edits and iteratively repair candidates.</p>
                 </div>
-                <div class="pillar-card">
-                    <div class="pillar-icon">📊</div>
-                    <h3>Decomposed Rewards</h3>
-                    <p>Fine-grained observability into research, edits, and coordination—not just a single vague scalar.</p>
                 </div>
-                <div class="pillar-card">
-                    <div class="pillar-icon">🔬</div>
-                    <h3>Evidence-Based</h3>
-                    <p>Constant, verifiable reviews drive the model toward sound scientific design rather than pattern matching.</p>
                 </div>
-                <div class="pillar-card">
-                    <div class="pillar-icon">🎓</div>
-                    <h3>Curriculum Learning</h3>
-                    <p>Partial credit "breadcrumbs" for early RL exploration, transitioning to strict evaluation for grading.</p>
                 </div>
-                <div class="pillar-card">
-                    <div class="pillar-icon">🤝</div>
-                    <h3>Governance</h3>
-                    <p>Multi-agent specialist board reviews every plan and execution to ensure rigor and safety.</p>
                 </div>
             </div>
         </section>
-        <!-- Results Section -->
-        <section id="results">
-            <div class="section-header">
-                <h2>Training & Performance</h2>
-                <p>Comparing the Supervised Fine-Tuning (SFT) baseline against the final GRPO-trained policy.</p>
-            </div>
-            <div class="visual-container">
-                <img src="assets/reward_curve.png" alt="Reward Curve">
-                <span class="visual-label">Learning progression from sparse rewards to consistent submissions</span>
             </div>
-            <div class="table-wrapper">
-                <table>
-                    <thead>
                         <tr>
-                            <th>Scenario Difficulty</th>
-                            <th>Before (SFT)</th>
-                            <th>After (RL)</th>
-                            <th>Improvement</th>
                         </tr>
                     </thead>
-                    <tbody>
                         <tr>
-                            <td><strong>Level 0: Easy</strong></td>
-                            <td>0.1167</td>
-                            <td>0.1295</td>
-                            <td class="improvement">+10.9%</td>
                         </tr>
                         <tr>
-                            <td><strong>Level 1: Medium</strong></td>
-                            <td>0.1167</td>
-                            <td>0.1278</td>
-                            <td class="improvement">+9.5%</td>
                         </tr>
                         <tr>
-                            <td><strong>Level 2: Hard</strong></td>
-                            <td>0.0800</td>
-                            <td>0.0866</td>
-                            <td class="improvement">+8.3%</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
-            <div style="margin-top: 4rem;">
-                <img src="assets/Logs.png" alt="Training Logs" style="width: 100%; border-radius: 20px; border: 1px solid var(--glass-border);">
-                <span class="visual-label">Detailed action telemetry and governance history</span>
             </div>
         </section>
         <!-- Footer -->
-        <footer>
-            <div class="footer-links">
-                <a href="https://github.com/Adhitya-Vardhan/molt_lab" target="_blank">GitHub Repository</a>
-                <a href="https://huggingface.co/Adhitya122/molforge-grpo-oncology" target="_blank">Model Card</a>
-                <a href="https://colab.research.google.com/drive/1c6npGkGNbbbd8XFNeS6zInBpopLnJ4W4?usp=sharing" target="_blank">Colab Notebook</a>
             </div>
-            <p style="color: var(--text-dim); font-size: 0.9rem;">Built for the OpenEnv Hackathon 2026</p>
         </footer>
-    </div>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MolForge: The Scientific Method as a Workflow</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono&display=swap" rel="stylesheet">
     <style>
         body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            -webkit-font-smoothing: antialiased;
+            background-color: #ffffff;
+            color: #0f172a;
         }
+        .prose-custom {
+            max-width: 65ch;
             margin: 0 auto;
         }
+        .shadcn-card {
+            border: 1px solid #e2e8f0;
+            background: #ffffff;
+            border-radius: 0.5rem;
+            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
         }
+        .shadcn-badge {
+            background: #f1f5f9;
+            color: #475569;
+            font-size: 0.75rem;
             font-weight: 600;
+            padding: 0.125rem 0.625rem;
+            border-radius: 9999px;
             display: inline-flex;
             align-items: center;
         }
+        .mono {
+            font-family: 'JetBrains Mono', monospace;
         }
     </style>
 </head>
+<body class="bg-white">
+    <!-- Navigation -->
+    <nav class="border-b sticky top-0 bg-white/80 backdrop-blur-md z-50">
+        <div class="max-w-4xl mx-auto px-6 h-16 flex items-center justify-between">
+            <span class="font-bold tracking-tight text-lg">MolForge</span>
+            <div class="flex gap-6 text-sm font-medium text-slate-600">
+                <a href="https://github.com/Adhitya-Vardhan/molt_lab" class="hover:text-black transition-colors">GitHub</a>
+                <a href="https://colab.research.google.com/drive/1c6npGkGNbbbd8XFNeS6zInBpopLnJ4W4?usp=sharing" class="hover:text-black transition-colors">Training</a>
             </div>
+        </div>
+    </nav>
+    <main class="max-w-4xl mx-auto px-6 py-20">
+        <!-- Header -->
+        <div class="mb-16">
+            <div class="flex gap-2 mb-6">
+                <span class="shadcn-badge bg-indigo-50 text-indigo-700">OpenEnv Hackathon</span>
+                <span class="shadcn-badge">Deep Research</span>
             </div>
+            <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight mb-6 leading-tight">
+                MolForge: Verifier-Driven RL for Drug Discovery
+            </h1>
+            <p class="text-xl text-slate-500 mb-8 leading-relaxed">
+                Transforming the scientific method into a reinforcement learning workflow where the LLM is the scientist, not the judge.
+            </p>
+            <div class="flex items-center gap-4 text-sm text-slate-400">
+                <div class="w-8 h-8 rounded-full bg-slate-200"></div>
+                <div>
+                    <p class="font-semibold text-slate-900">Adhitya Vardhan</p>
+                    <p>April 26, 2026 • 8 min read</p>
+                </div>
             </div>
+        </div>
+        <!-- Introduction -->
+        <div class="prose prose-slate prose-lg max-w-none mb-20 leading-relaxed text-slate-700">
+            <p>
+                In traditional drug discovery tasks, LLMs are often asked to "generate a molecule" in a single shot. But science doesn't happen in a vacuum. It happens in the loop—through trial, error, and verification.
+            </p>
+            <p class="mt-4">
+                <strong>MolForge</strong> is a reinforcement learning environment that simulates a medical oncology discovery lab. It forces the model to navigate real-world constraints: limited budget, molecular toxicity, and synthesis complexity.
+            </p>
+            <div class="my-12 p-6 bg-slate-50 border rounded-xl">
+                <p class="text-indigo-700 font-semibold mb-2">The Core Thesis</p>
+                <p class="italic text-slate-600">
+                    "The LLM is not the judge. The LLM is the scientist being judged by external, verifiable reality."
+                </p>
+            </div>
+        </div>
+        <!-- Architecture Section -->
+        <section class="mb-24">
+            <h2 class="text-2xl font-bold mb-8 flex items-center gap-2">
+                <span class="w-2 h-8 bg-indigo-500 rounded-full"></span>
+                Scientific Architecture
+            </h2>
+            <p class="text-slate-600 mb-8 text-lg">
+                The environment is designed as a **POMDP (Partially Observable Markov Decision Process)**. This separation between what is true and what is visible is what makes the environment a scientific challenge.
+            </p>
+            <div class="grid md:grid-cols-2 gap-6 mb-12">
+                <div class="shadcn-card p-6 border-l-4 border-l-slate-900">
+                    <h3 class="font-bold mb-3 text-sm uppercase tracking-wider text-slate-500">Hidden State</h3>
+                    <p class="text-slate-600 text-sm">Ground-truth scores for potency, safety, and synthesizability. Includes sunk-cost traps and late-stage mutation shifts.</p>
                 </div>
+                <div class="shadcn-card p-6 border-l-4 border-l-indigo-500">
+                    <h3 class="font-bold mb-3 text-sm uppercase tracking-wider text-slate-500">Visible State</h3>
+                    <p class="text-slate-600 text-sm">Noisy assay reports from RDKit and TDC, remaining budget, and structured governance feedback.</p>
                 </div>
             </div>
+            <div class="shadcn-card p-4 bg-slate-50">
+                <img src="assets/molforge_architecture.png" alt="Architecture" class="rounded-lg w-full">
+                <p class="mt-4 text-center text-xs text-slate-400 font-medium italic">MolForge Closed-Loop Feedback Flow</p>
             </div>
+        </section>
+        <!-- Seven Pillars -->
+        <section class="mb-24">
+            <h2 class="text-2xl font-bold mb-10">The Seven Pillars of MolForge</h2>
+            <div class="grid gap-4">
+                <div class="shadcn-card p-6 hover:bg-slate-50 transition-colors cursor-default">
+                    <h4 class="font-bold text-indigo-600 mb-1">1. Verifier-Based Evaluation</h4>
+                    <p class="text-slate-600 text-sm">The LLM is held accountable by real-world verifiers like **RDKit** and **TDC** instead of relying on self-judgment.</p>
                 </div>
+                <div class="shadcn-card p-6 hover:bg-slate-50 transition-colors cursor-default">
+                    <h4 class="font-bold text-indigo-600 mb-1">2. Physics-Grounded Simulation</h4>
+                    <p class="text-slate-600 text-sm">Heuristic docking simulates receptor fit, lipophilicity (LogP), and polarity (TPSA) in milliseconds.</p>
                 </div>
+                <div class="shadcn-card p-6 hover:bg-slate-50 transition-colors cursor-default">
+                    <h4 class="font-bold text-indigo-600 mb-1">3. Self-Correction Loop</h4>
+                    <p class="text-slate-600 text-sm">Agents receive structured feedback on every molecular edit, allowing them to repair liabilities in real-time.</p>
                 </div>
+                <div class="shadcn-card p-6 hover:bg-slate-50 transition-colors cursor-default">
+                    <h4 class="font-bold text-indigo-600 mb-1">4. Decomposed Reward Architecture</h4>
+                    <p class="text-slate-600 text-sm">Rewards are broken down by research, coordination, and quality for maximum observability.</p>
                 </div>
+                <div class="shadcn-card p-6 hover:bg-slate-50 transition-colors cursor-default">
+                    <h4 class="font-bold text-indigo-600 mb-1">5. Strategic Training Modes</h4>
+                    <p class="text-slate-600 text-sm">Curriculum mode provides partial credit "breadcrumbs" to solve the sparse reward problem in RL.</p>
                 </div>
+                <div class="shadcn-card p-6 hover:bg-slate-50 transition-colors cursor-default">
+                    <h4 class="font-bold text-indigo-600 mb-1">6. Multi-Agent Governance</h4>
+                    <p class="text-slate-600 text-sm">A specialized team (Chemist, Toxicologist, Planner) must coordinate and approve every major move.</p>
                 </div>
+                <div class="shadcn-card p-6 hover:bg-slate-50 transition-colors cursor-default">
+                    <h4 class="font-bold text-indigo-600 mb-1">7. Scientific Model Improvement</h4>
+                    <p class="text-slate-600 text-sm">Verifier feedback drives the model toward scientifically sound designs rather than pattern matching.</p>
                 </div>
             </div>
         </section>
+        <!-- Training & Results -->
+        <section class="mb-24">
+            <h2 class="text-2xl font-bold mb-8">Training & Performance</h2>
+            <div class="prose prose-slate text-slate-600 mb-12 leading-relaxed">
+                <p>
+                    We trained a **Qwen3.5-2B** model using GRPO against the MolForge environment. By transitioning from a simple SFT baseline to a verifier-driven RL policy, we saw significant improvements across all difficulty levels.
+                </p>
             </div>
+            <div class="shadcn-card overflow-hidden mb-12">
+                <table class="w-full text-left text-sm">
+                    <thead class="bg-slate-50 border-b">
                         <tr>
+                            <th class="px-6 py-4 font-semibold text-slate-900">Difficulty</th>
+                            <th class="px-6 py-4 font-semibold text-slate-900">Before (SFT)</th>
+                            <th class="px-6 py-4 font-semibold text-slate-900">After (RL)</th>
+                            <th class="px-6 py-4 font-semibold text-slate-900">Improvement</th>
                         </tr>
                     </thead>
+                    <tbody class="divide-y">
                         <tr>
+                            <td class="px-6 py-4 font-medium">Easy</td>
+                            <td class="px-6 py-4 text-slate-500">0.1167</td>
+                            <td class="px-6 py-4 font-semibold">0.1295</td>
+                            <td class="px-6 py-4 text-emerald-600 font-bold">+10.9%</td>
                         </tr>
                         <tr>
+                            <td class="px-6 py-4 font-medium">Medium</td>
+                            <td class="px-6 py-4 text-slate-500">0.1167</td>
+                            <td class="px-6 py-4 font-semibold">0.1278</td>
+                            <td class="px-6 py-4 text-emerald-600 font-bold">+9.5%</td>
                         </tr>
                         <tr>
+                            <td class="px-6 py-4 font-medium">Hard</td>
+                            <td class="px-6 py-4 text-slate-500">0.0800</td>
+                            <td class="px-6 py-4 font-semibold">0.0866</td>
+                            <td class="px-6 py-4 text-emerald-600 font-bold">+8.3%</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
+            <div class="grid md:grid-cols-2 gap-8 mb-12">
+                <div class="shadcn-card p-4">
+                    <img src="assets/reward_curve.png" alt="Reward Curve" class="rounded border">
+                    <p class="mt-3 text-center text-xs text-slate-400 font-medium">Training Reward Progression</p>
+                </div>
+                <div class="shadcn-card p-4">
+                    <img src="assets/Logs.png" alt="Logs" class="rounded border">
+                    <p class="mt-3 text-center text-xs text-slate-400 font-medium">Governance Telemetry</p>
+                </div>
+            </div>
+        </section>
+        <!-- Final Takeaway -->
+        <section class="mb-24 pt-12 border-t text-center">
+            <h2 class="text-3xl font-extrabold mb-6">Join the Scientific RL Revolution</h2>
+            <p class="text-slate-500 max-w-xl mx-auto mb-10 text-lg">
+                MolForge is open source and ready for further exploration. Explore the search space of 256 fragment combinations across oncology scenarios.
+            </p>
+            <div class="flex flex-wrap justify-center gap-4">
+                <a href="https://github.com/Adhitya-Vardhan/molt_lab" class="px-8 py-3 bg-slate-900 text-white font-bold rounded-lg hover:bg-slate-800 transition-all">GitHub Repo</a>
+                <a href="https://colab.research.google.com/drive/1c6npGkGNbbbd8XFNeS6zInBpopLnJ4W4?usp=sharing" class="px-8 py-3 bg-white border border-slate-200 text-slate-900 font-bold rounded-lg hover:bg-slate-50 transition-all">Colab Notebook</a>
             </div>
         </section>
         <!-- Footer -->
+        <footer class="py-12 border-t text-sm text-slate-400 flex flex-col md:flex-row justify-between items-center gap-4">
+            <p>© 2026 MolForge • Built for OpenEnv</p>
+            <div class="flex gap-6">
+                <a href="https://huggingface.co/Adhitya122/molforge-grpo-oncology" class="hover:text-slate-600">Model Card</a>
+                <a href="https://huggingface.co/spaces/Adhitya122/molforge" class="hover:text-slate-600">Space Home</a>
             </div>
         </footer>
+    </main>
 </body>
 </html>