---
/**
 * Geo-Layout Transformer 技术报告
 * 一个用于物理设计分析的统一、自监督基础模型
 */
import BaseLayout from '../../../layouts/BaseLayout.astro';
import Header from '../../../components/Header.astro';
import Footer from '../../../components/Footer.astro';
import ReportSection from '../../../components/report/ReportSection.astro';
import GlassTable from '../../../components/common/GlassTable.astro';
import Container from '../../../components/Container.astro';
import AnimatedElement from '../../../components/AnimatedElement.astro';
import ReportSidebar from '../../../components/report/ReportSidebar.astro';

// 导入动画时序计算工具
import { 
  getSectionBaseDelay 
} from '../../../scripts/animation-timing';

// 定义各章节的基础延迟时间
const SECTION_DELAYS = {
  HERO: 200,
  VISION: getSectionBaseDelay(0),
  CHALLENGES: getSectionBaseDelay(1),
  FEASIBILITY: getSectionBaseDelay(2),
  ARCHITECTURE: getSectionBaseDelay(3),
  ROADMAP: getSectionBaseDelay(4),
  CONTRIBUTION: getSectionBaseDelay(5),
};

// 技术对比表数据
const techComparisonData = {
  headers: ["技术范式", "核心思想", "主要缺点"],
  rows: [
    [
      { content: "基于规则/启发式", strong: true, style: "primary" as const },
      "由专家定义一套详尽的几何规则（如宽度、间距），使用算法进行模式匹配和验证。",
      { content: "规则集复杂、维护困难；无法发现未知模式；在新工艺节点上开发周期长；误报率高。", style: "error" as const }
    ],
    [
      { content: "经典机器学习", strong: true, style: "primary" as const },
      "手动设计特征（如密度、平行线长度），然后使用SVM、决策树等模型进行分类或回归。",
      { content: "特征工程是瓶颈，依赖专家知识；特征表达能力有限，难以捕捉复杂的空间关系。", style: "error" as const }
    ],
    [
      { content: "早期深度学习 (CNN)", strong: true, style: "primary" as const },
      "将版图栅格化为图像，使用卷积神经网络（CNN）提取特征，进行热点检测等任务。",
      { content: "忽略了版图的矢量特性；对旋转/镜像敏感；需要大量标注数据；上下文感知能力有限。", style: "error" as const }
    ],
    [
      { content: "Geo-Layout Transformer (本项目)", strong: true, style: "primary" as const },
      { content: "将版图建模为几何图，用GNN学习局部结构，用Transformer学习全局上下文。通过自监督学习理解版图\"语法\"。", strong: true, style: "success" as const },
      { content: "数据表征更自然；分层学习局部与全局信息；极大减少对标注数据的依赖；构建可扩展的统一基础模型。", strong: true, style: "success" as const }
    ]
  ]
};

// 报告配置
const reportConfig = {
  title: "Geo-Layout Transformer",
  subtitle: "一个用于物理设计分析的统一、自监督基础模型。",
  description: "Geo-Layout Transformer 技术报告 - 基于GNN和Transformer的集成电路版图分析模型",
  date: "2025年",
  type: "技术报告",
  actionText: "开始探索 ↓",
  actionLink: "#vision"
};
---

<BaseLayout 
  title={`${reportConfig.title} - Jiao77`}
  description={reportConfig.description}
  type="report"
>
  <Header 
    pageTitle="Geo-Layout Transformer"
    showPageTitle={true}
    description={reportConfig.subtitle}
  />
  
  <main class="report-main">
    <div class="report-layout container mx-auto px-4">
      <ReportSidebar title="报告目录" toggleLabel="目录" />
      <div class="report-content" data-report-content>
      
        <!-- 报告标题区域 -->
        <section id="intro" class="report-header scroll-mt-16">
          <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.HERO} trigger="load">
            <Container
              variant="glass"
              size="full"
              padding="xl"
              className="text-center mb-12 mt-24"
            >
              <h1 class="text-4xl md:text-5xl font-bold mb-4" style="color: #2c4a6b;">
                {reportConfig.title}
              </h1>
              <p class="text-xl text-gray-700 mb-8 max-w-3xl mx-auto">
                {reportConfig.subtitle}
              </p>
              <a 
                href={reportConfig.actionLink}
                class="inline-flex items-center gap-2 px-8 py-3 text-white font-semibold rounded-full hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300"
                style="background: linear-gradient(135deg, #2c4a6b, #5b778e);"
              >
                {reportConfig.actionText}
              </a>
            </Container>
          </AnimatedElement>
        </section>

        <!-- 项目愿景 -->
        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.VISION} trigger="scroll">
          <section id="vision">
            <ReportSection 
              title="🎯 项目愿景"
              subtitle="推动EDA物理设计领域范式转变"
              level={2}
            >
              <p class="text-lg text-gray-600 mb-6">
                旨在推动EDA物理设计领域范式转变，构建一个能理解半导体版图深层次"设计语言"的统一基础模型。
              </p>

              <div style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); border-left: 4px solid #2c4a6b; border-radius: 1rem; padding: 1.5rem;">
                <h3 class="text-2xl font-bold mb-3" style="color: #2c4a6b;">统一的"版图理解引擎"</h3>
                <p class="text-gray-700 mb-4">
                  我们致力于从目前分散的、任务特定的工具，演进为一个集中的、可复用的"版图理解引擎"。通过利用新颖的 <strong style="color: #2c4a6b;">图神经网络（GNN）+ Transformer</strong> 混合架构，并在海量未标记的 GDSII 数据上进行预训练，该模型经过微调后，能够出色地完成各种关键的后端分析任务，从而加速设计周期，并突破 PPA（功耗、性能、面积）的极限。
                </p>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm mt-6">
                  <div class="p-3 rounded-lg border-l-2" style="background: rgba(91, 119, 142, 0.05); border-color: #2c4a6b;">
                    <strong class="block mb-1" style="color: #2c4a6b;">高精度连通性验证</strong>
                    通过理解拓扑结构检测开路/短路。
                  </div>
                  <div class="p-3 rounded-lg border-l-2" style="background: rgba(91, 119, 142, 0.05); border-color: #2c4a6b;">
                    <strong class="block mb-1" style="color: #2c4a6b;">结构化版图匹配</strong>
                    实现IP复用和设计相似性搜索。
                  </div>
                  <div class="p-3 rounded-lg border-l-2" style="background: rgba(91, 119, 142, 0.05); border-color: #2c4a6b;">
                    <strong class="block mb-1" style="color: #2c4a6b;">预测性热点检测</strong>
                    高准率识别可制造性问题。
                  </div>
                </div>
              </div>
            </ReportSection>
          </section>
        </AnimatedElement>

        <!-- 核心挑战与技术思路 -->
        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.CHALLENGES} trigger="scroll">
          <section id="challenges">
            <ReportSection 
              title="🧗 核心挑战与技术思路"
              subtitle="传统方法的瓶颈与新技术路径"
              level={2}
            >
              <p class="text-lg text-gray-600 mb-8">
                传统的版图分析方法正面临瓶颈。理解这些困境是探索新技术路径的起点。
              </p>

              <!-- 当前困境 -->
              <div class="mb-12">
                <h3 class="text-2xl font-bold text-center mb-6 text-#2c4a6b">当前面临的困境</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Container variant="glass" padding="lg" className="border-l-4 border-red-600">
                    <h4 class="font-bold text-xl mb-2 text-red-700">数据稀缺与高昂成本</h4>
                    <p class="text-gray-600">监督学习方法需要大量精确标注的数据（如DRC热点），其获取过程不仅耗时，还需昂贵的商业EDA工具和专家经验，成为AI应用的最大障碍。</p>
                  </Container>
                  <Container variant="glass" padding="lg" className="border-l-4 border-red-600">
                    <h4 class="font-bold text-xl mb-2 text-red-700">几何复杂性与不变性</h4>
                    <p class="text-gray-600">版图是矢量数据，具有严格的几何约束，并需对旋转、镜像等变换保持不变性。标准CNNs为处理像素图像而生，难以有效捕捉这种结构化信息。</p>
                  </Container>
                  <Container variant="glass" padding="lg" className="border-l-4 border-red-600">
                    <h4 class="font-bold text-xl mb-2 text-red-700">缺乏上下文理解</h4>
                    <p class="text-gray-600">无论是基于规则还是基于像素块的分析，都局限于局部视野，无法理解跨越多个区域的长程依赖关系，导致对设计意图的理解出现偏差。</p>
                  </Container>
                  <Container variant="glass" padding="lg" className="border-l-4 border-red-600">
                    <h4 class="font-bold text-xl mb-2 text-red-700">可扩展性与维护难题</h4>
                    <p class="text-gray-600">随着工艺节点演进，设计规则变得愈发复杂，硬编码的规则集变得臃肿且难以维护。同时，全芯片分析对计算资源的需求呈指数级增长。</p>
                  </Container>
                </div>
              </div>

              <!-- 技术演进对比表 -->
              <div class="mb-12">
                <h3 class="text-2xl font-bold text-center mb-8" style="color: #2c4a6b;">技术方法的演进与对比</h3>
                <GlassTable
                  headers={techComparisonData.headers}
                  rows={techComparisonData.rows}
                  bordered={true}
                />
              </div>

              <!-- 本报告思路与优势 -->
              <Container variant="glass" padding="lg" className="border-l-4 border-green-600">
                <h3 class="text-2xl font-bold text-green-700 mb-3">范式转变：从像素到图，从监督到自监督</h3>
                <p class="text-gray-700 mb-4">
                  Geo-Layout Transformer的核心思想是采用一种更符合版图数据本质的表征方式，并利用自监督学习来克服数据瓶颈，从而构建一个真正"理解"物理设计的基础模型。
                </p>
                <ul class="space-y-3 text-gray-600">
                  <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-green-600 mt-1"></i>
                    <div><strong style="color: #2c4a6b;" class="">数据原生的图表征:</strong> 我们不将版图视为像素网格，而是其本来的样子——一个由多边形（节点）及其空间关系（边）构成的复杂图。这种表征方式保留了全部的几何和拓扑信息。</div>
                  </li>
                  <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-green-600 mt-1"></i>
                    <div><strong style="color: #2c4a6b;" class="">分层式理解架构:</strong> GNN作为局部专家，精准编码每个小区域内的设计规则和几何构型。Transformer作为全局架构师，通过自注意力机制将局部信息整合，理解芯片级的长程依赖和宏观布局。</div>
                  </li>
                  <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-green-600 mt-1"></i>
                    <div><strong style="color: #2c4a6b;" class="">自监督学习驱动:</strong> 模型首先在海量未标记的GDS数据上进行预训练，通过"掩码版图建模"等任务学习通用的版图知识。这使其能够掌握设计的内在"语法"，极大降低了对下游任务标注数据的需求。</div>
                  </li>
                  <li class="flex items-start gap-2">
                    <i class="fas fa-check-circle text-green-600 mt-1"></i>
                    <div><strong style="color: #2c4a6b;" class="">统一与可扩展:</strong> 我们旨在构建一个统一的基础模型，而非多个"头痛医头"的孤立工具。经过预训练的模型，只需通过简单的微调就能高效适应连通性检查、热点检测、版图匹配等多种任务，实现了知识的复用和快速迭代。</div>
                  </li>
                </ul>
              </Container>
            </ReportSection>
          </section>
        </AnimatedElement>

        <!-- 可行性讨论 -->
        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.FEASIBILITY} trigger="scroll">
          <section id="feasibility">
            <ReportSection 
              title="🛠️ 可行性讨论"
              subtitle="基于成熟研究的技术路线"
              level={2}
            >
              <p class="text-lg text-gray-600 mb-8">
                本项目的技术路线并非凭空创造，而是将学术界已验证的先进模型应用于版图分析领域，具有坚实的理论和实践基础。
              </p>

              <div class="space-y-8">
                <Container variant="glass" padding="lg" className="border-l-4 border-#2c4a6b">
                  <h3 class="text-2xl font-bold text-#2c4a6b mb-3">1. 基于成熟研究的版图数据表征</h3>
                  <p class="text-gray-700 mb-4">
                    将版图的矢量几何信息转换为图结构，是应用图神经网络（GNN）的前提。这一思路借鉴了GNN在社交网络、分子结构等领域处理非欧几里得数据的成功经验。
                  </p>
                  <ul class="space-y-2 text-gray-600">
                    <li class="flex items-start gap-2">
                      <i class="fas fa-tools text-#2c4a6b mt-1"></i>
                      <div><strong style="color: #2c4a6b;" class="">工具支持:</strong> 正如技术路线图中所述，强大的开源库 <strong style="color: #2c4a6b;" class="">KLayout</strong> 提供了高效的Python API，能够精确地进行区域查询和几何运算，为"Patch-to-Graph"的转换流程提供了工程上的可行性保障。</div>
                    </li>
                    <li class="flex items-start gap-2">
                      <i class="fas fa-project-diagram text-#2c4a6b mt-1"></i>
                      <div><strong style="color: #2c4a6b;" class="">方法论:</strong> 将版图中的多边形和通孔定义为<strong style="color: #2c4a6b;" class="">节点</strong>，将它们之间的物理邻接和重叠关系定义为<strong style="color: #2c4a6b;" class="">边</strong>，这种方法论是GNN应用的经典范式。节点的特征（如形状、面积、层信息）和边的特征（如距离、重叠类型）可以被有效编码，为模型提供丰富的输入信息。</div>
                    </li>
                  </ul>
                </Container>

                <Container variant="glass" padding="lg" className="border-l-4 border-#2c4a6b">
                  <h3 class="text-2xl font-bold text-#2c4a6b mb-3">2. 借鉴主流的混合模型架构</h3>
                  <p class="text-gray-700 mb-3">
                    "GNN编码器 + Transformer"的混合架构，是近年来处理复杂结构化数据（如代码、知识图谱）的SOTA（State-of-the-Art）方案。我们将其引入版图分析领域，以同时捕捉局部和全局信息。
                  </p>
                  <ul class="space-y-3 text-gray-600">
                    <li class="flex items-start gap-2">
                      <i class="fas fa-search-location text-#2c4a6b mt-1"></i>
                      <div><strong style="color: #2c4a6b;" class="">局部特征提取:</strong> GNN（如图注意力网络-GAT）已被证明在学习节点邻域内的复杂关系方面非常强大。在版图上，这意味着GNN可以像一个微观的DRC规则检查器一样，学习到特定区域内的几何约束和拓扑关系。</div>
                    </li>
                    <li class="flex items-start gap-2">
                      <i class="fas fa-globe text-#2c4a6b mt-1"></i>
                      <div><strong style="color: #2c4a6b;" class="">全局上下文建模:</strong> Transformer的自注意力机制能够捕捉序列中的长程依赖。在我们的方案中，它将各个版图区块（Patch）的GNN编码视为一个序列，从而学习到芯片级的宏观模式，如标准单元阵列的排布、总线的走向等，这是传统方法难以企及的。</div>
                    </li>
                    <li class="flex items-start gap-2">
                      <i class="fas fa-code text-#2c4a6b mt-1"></i>
                      <div><strong style="color: #2c4a6b;" class="">已有实现:</strong> <strong style="color: #2c4a6b;" class="">PyTorch Geometric (PyG)</strong> 和PyTorch内置的 <strong style="color: #2c4a6b;" class="">Transformer</strong> 模块使得构建这种混合模型变得直接且高效，无需从零开始实现底层算法。</div>
                    </li>
                  </ul>
                </Container>

                <Container variant="glass" padding="lg" className="bg-green-50 border-l-4 border-green-500">
                  <p class="font-semibold text-green-800">
                    <strong style="color: #2c4a6b;" class="">结论：</strong>本项目的可行性建立在对成熟研究成果的创新性应用之上。我们并非在发明全新的深度学习算法，而是搭建了一座桥梁，将GNN和Transformer等强大工具的能力引入到集成电路物理设计这一高度专业化的领域，以解决传统方法难以应对的挑战。
                  </p>
                </Container>
              </div>
            </ReportSection>
          </section>
        </AnimatedElement>

        <!-- 核心架构 -->
        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.ARCHITECTURE} trigger="scroll">
          <section id="architecture">
            <ReportSection 
              title="🔬 核心架构"
              subtitle="借鉴 Vision Transformer 的分块处理思想"
              level={2}
            >
              <p class="text-lg text-gray-600 mb-8">
                该架构借鉴了Vision Transformer (ViT) 的思想，将版图数据分块处理，并通过Transformer捕捉全局依赖关系。
              </p>

              <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
                <!-- 主流程 -->
                <div class="lg:col-span-2">
                  <Container variant="glass" padding="lg">
                    <h2 class="text-xl font-bold text-center text-gray-700 mb-6">模型主体流程</h2>
                    <div class="flex flex-col items-center space-y-4">
                      
                      <!-- Step 1 -->
                      <div class="arch-box w-full max-w-sm">
                        <h3 class="font-semibold text-gray-700">1. 输入版图 (GDSII)</h3>
                        <div class="mt-2 h-32 w-full bg-gray-800 rounded-lg p-2 relative overflow-hidden" style="background-image: radial-gradient(#475569 1px, transparent 1px); background-size: 1rem 1rem;">
                          <div class="absolute bg-sky-500/80" style="left: 5%; top: 10%; width: 90%; height: 10%;"></div>
                          <div class="absolute bg-sky-500/80" style="left: 5%; top: 80%; width: 90%; height: 10%;"></div>
                          <div class="absolute bg-emerald-400/80" style="left: 10%; top: 25%; width: 70%; height: 8%;"></div>
                          <div class="absolute bg-emerald-400/80" style="left: 20%; top: 55%; width: 50%; height: 8%;"></div>
                        </div>
                      </div>
                      <div class="text-3xl text-gray-400">↓</div>

                      <!-- Step 2 -->
                      <div class="arch-box w-full max-w-sm">
                        <h3 class="font-semibold text-gray-700">2. 版图分块 (Patch) 与图构建</h3>
                        <div class="mt-2 flex justify-around items-center h-24">
                          <div class="w-20 h-20 bg-gray-100 rounded-lg p-1 grid grid-cols-3 grid-rows-3 gap-0.5">
                            <div class="bg-gray-200"></div><div class="bg-gray-200"></div><div class="bg-gray-200"></div>
                            <div class="bg-gray-200"></div>
                            <div class="bg-blue-400 border-2 border-blue-600 animate-pulse"></div>
                            <div class="bg-gray-200"></div>
                            <div class="bg-gray-200"></div><div class="bg-gray-200"></div><div class="bg-gray-200"></div>
                          </div>
                          <div class="text-2xl text-gray-400 mx-2">→</div>
                          <div class="w-20 h-20 bg-gray-100 rounded-lg relative" id="graph-container"></div>
                        </div>
                      </div>
                      <div class="text-3xl text-gray-400">↓</div>

                      <!-- Step 3 -->
                      <div class="arch-box w-full max-w-sm bg-blue-50 border-blue-200">
                        <h3 class="font-semibold text-blue-800">3. GNN Patch 编码器</h3>
                        <p class="text-sm text-blue-600">为每个 Patch 图生成嵌入向量</p>
                      </div>
                      <div class="text-3xl text-gray-400">↓</div>

                      <!-- Step 4 -->
                      <div class="arch-box w-full max-w-md">
                        <h3 class="font-semibold text-gray-700">4. Patch 嵌入 + 2D 位置编码</h3>
                        <div class="mt-2 flex items-center justify-center space-x-1 h-16">
                          <div class="flex flex-col items-center">
                            <div class="w-10 h-10 bg-purple-200 rounded-md"></div>
                            <span class="text-xs mt-1 text-gray-500">[CLS]</span>
                          </div>
                          <div class="flex flex-col items-center">
                            <div class="w-10 h-10 bg-emerald-200 rounded-md"></div>
                            <span class="text-xs mt-1 text-gray-500">Patch 1</span>
                          </div>
                          <div class="flex flex-col items-center">
                            <div class="w-10 h-10 bg-emerald-200 rounded-md"></div>
                            <span class="text-xs mt-1 text-gray-500">Patch 2</span>
                          </div>
                          <div class="text-gray-500">...</div>
                          <div class="flex flex-col items-center">
                            <div class="w-10 h-10 bg-emerald-200 rounded-md"></div>
                            <span class="text-xs mt-1 text-gray-500">Patch N</span>
                          </div>
                        </div>
                      </div>
                      <div class="text-3xl text-gray-400">↓</div>

                      <!-- Step 5 -->
                      <div class="arch-box w-full max-w-md bg-green-50 border-green-200">
                        <h3 class="font-semibold text-green-800">5. Transformer Encoder</h3>
                        <p class="text-sm text-green-600">学习 Patch 间的全局依赖关系</p>
                      </div>
                      <div class="text-3xl text-gray-400">↓</div>

                      <!-- Step 6 -->
                      <div class="arch-box w-full max-w-sm bg-amber-50 border-amber-200">
                        <h3 class="font-semibold text-amber-800">6. 任务特定头 (MLP Head)</h3>
                      </div>
                      <div class="text-3xl text-gray-400">↓</div>

                      <!-- Step 7 -->
                      <div class="arch-box w-full max-w-sm">
                        <h3 class="font-semibold text-gray-700">7. 任务输出</h3>
                        <div class="mt-2 space-y-1 text-sm text-gray-500">
                          <p>热点检测: [热点, 非热点]</p>
                          <p>连通性验证: [开路, 正常]</p>
                          <p>版图匹配: [相似度得分]</p>
                        </div>
                      </div>
                    </div>
                  </Container>
                </div>

                <!-- Transformer详解 -->
                <div class="lg:col-span-1">
                  <Container variant="glass" padding="lg" className="sticky top-8">
                    <h2 class="text-xl font-bold text-center text-gray-700 mb-6">Transformer Encoder 详解</h2>
                    <div class="flex flex-col items-center space-y-3">
                      <div class="w-full text-center">
                        <span class="text-gray-500 font-medium">嵌入的 Patches</span>
                      </div>
                      <div class="text-2xl text-gray-400">↓</div>
                      
                      <div class="w-full border-2 border-gray-300 rounded-xl p-4 bg-gray-50 relative">
                        <span class="absolute top-2 right-3 font-bold text-gray-400">L x</span>
                        
                        <div class="flex flex-col items-center space-y-3">
                          <div class="arch-box w-full !p-2">Norm</div>
                          <div class="arch-box w-full !p-2 bg-green-100 border-green-200 text-green-800">多头自注意力</div>
                          <div class="w-8 h-8 rounded-full border-2 border-gray-400 flex items-center justify-center text-gray-500 text-xl font-light">+</div>
                          <div class="arch-box w-full !p-2">Norm</div>
                          <div class="arch-box w-full !p-2 bg-blue-100 border-blue-200 text-blue-800">MLP</div>
                          <div class="w-8 h-8 rounded-full border-2 border-gray-400 flex items-center justify-center text-gray-500 text-xl font-light">+</div>
                        </div>
                      </div>
                      
                      <div class="text-2xl text-gray-400">↓</div>
                      <div class="w-full text-center">
                        <span class="text-gray-500 font-medium">输出</span>
                      </div>
                    </div>
                  </Container>
                </div>
              </div>
            </ReportSection>
          </section>
        </AnimatedElement>

        <!-- 技术路线图 -->
        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.ROADMAP} trigger="scroll">
          <section id="roadmap">
            <ReportSection 
              title="🗺️ 技术路线图"
              subtitle="从基础环境到模型优化的五个阶段"
              level={2}
            >
              <p class="text-lg text-gray-600 mb-8">
                项目分为五个主要阶段，从基础环境搭建到模型的迭代优化。
              </p>

              <div class="space-y-6">
                <Container variant="glass" padding="lg" className="border-l-4 border-#2c4a6b">
                  <h3 class="text-2xl font-bold mb-3 text-#2c4a6b">阶段一：环境搭建与工具选型</h3>
                  <p class="text-gray-700">选择合适的工具能事半功倍。核心技术栈包括 Python, KLayout, PyTorch, 和 PyTorch Geometric (PyG)。</p>
                </Container>

                <Container variant="glass" padding="lg" className="border-l-4 border-#2c4a6b">
                  <h3 class="text-2xl font-bold mb-3 text-#2c4a6b">阶段二：数据预处理与表征</h3>
                  <p class="text-gray-700">整个项目中最关键、工作量最大的部分。将GDS版图数据划分为"Patch"，并为每个Patch构建几何图表示，定义节点（几何图形）和边（空间关系）。</p>
                </Container>

                <Container variant="glass" padding="lg" className="border-l-4 border-#2c4a6b">
                  <h3 class="text-2xl font-bold mb-3 text-#2c4a6b">阶段三：模型架构设计</h3>
                  <p class="text-gray-700">模型分为两部分：使用GNN作为"Patch编码器"将图编码为向量，然后将向量序列输入"全局Transformer"以学习全局依赖关系。</p>
                </Container>

                <Container variant="glass" padding="lg" className="border-l-4 border-#2c4a6b">
                  <h3 class="text-2xl font-bold mb-3 text-#2c4a6b">阶段四：训练与评估</h3>
                  <p class="text-gray-700">使用二元交叉熵或Focal Loss等损失函数，通过Adam/AdamW优化器进行训练。通过精确率、召回率、F1-Score等指标评估模型性能。</p>
                </Container>

                <Container variant="glass" padding="lg" className="border-l-4 border-#2c4a6b">
                  <h3 class="text-2xl font-bold mb-3 text-#2c4a6b">阶段五：迭代与优化</h3>
                  <p class="text-gray-700">在基础模型跑通后，探索多尺度Patch、层级化表征、自监督学习和模型可解释性等高级主题。</p>
                </Container>
              </div>
            </ReportSection>
          </section>
        </AnimatedElement>

        <!-- 发展路线与贡献 -->
        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.CONTRIBUTION} trigger="scroll">
          <section id="contribution">
            <ReportSection 
              title="🤝 发展路线与贡献"
              subtitle="欢迎参与项目建设"
              level={2}
            >
              <p class="text-lg text-gray-600 mb-8">
                这是一个宏伟的项目，我们欢迎任何形式的贡献。欢迎随时提出 Issue 或提交 Pull Request。
              </p>

              <Container variant="glass" padding="lg" className="border-l-4 border-#2c4a6b">
                <h3 class="text-2xl font-bold mb-4 text-#2c4a6b">未来发展路线图</h3>
                <ul class="space-y-3 text-gray-700">
                  <li class="flex items-start gap-2">
                    <i class="fas fa-arrow-right text-#2c4a6b mt-1"></i>
                    <div><strong style="color: #2c4a6b;" class="">更先进的自监督任务:</strong> 探索对比学习和其他 SSL 方法。</div>
                  </li>
                  <li class="flex items-start gap-2">
                    <i class="fas fa-arrow-right text-#2c4a6b mt-1"></i>
                    <div><strong style="color: #2c4a6b;" class="">模型可解释性:</strong> 实现可视化注意力图的工具，以理解模型的决策过程。</div>
                  </li>
                  <li class="flex items-start gap-2">
                    <i class="fas fa-arrow-right text-#2c4a6b mt-1"></i>
                    <div><strong style="color: #2c4a6b;" class="">全芯片可扩展性:</strong> 集成图分割技术（如 Cluster-GCN）来处理芯片规模的设计。</div>
                  </li>
                  <li class="flex items-start gap-2">
                    <i class="fas fa-arrow-right text-#2c4a6b mt-1"></i>
                    <div><strong style="color: #2c4a6b;" class="">生成式设计:</strong> 在生成式框架中使用学习到的表示来合成"构建即正确"的版图。</div>
                  </li>
                </ul>
              </Container>
            </ReportSection>
          </section>
        </AnimatedElement>

      </div>
    </div>
  </main>
  
  <Footer />
</BaseLayout>

<style>
  /* 报告布局样式 */
  .report-layout {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    position: relative;
    width: 100%;
  }

  .report-content {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
  }

  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* 架构图样式 */
  .arch-box {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    text-align: center;
    transition: all 0.3s ease;
  }

  .arch-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.1);
  }

  /* 图节点和边样式 */
  :global(.graph-node) {
    width: 12px;
    height: 12px;
    background-color: #60a5fa;
    border-radius: 50%;
    position: absolute;
  }

  :global(.graph-edge) {
    position: absolute;
    background-color: #94a3b8;
    height: 1.5px;
    transform-origin: left center;
  }

  /* 表格样式 */
  table {
    border-collapse: collapse;
  }

  th, td {
    text-align: left;
    vertical-align: top;
  }

  tbody tr {
    transition: background-color 0.2s ease;
  }

  .container {
    max-width: 1200px;
    width: 100%;
  }

  /* 响应式调整 */
  @media (max-width: 1024px) {
    .lg\\:col-span-2 {
      grid-column: span 1;
    }
    
    .lg\\:col-span-1 {
      grid-column: span 1;
    }
  }
</style>

<script>
  import { initGraphVisualizer } from '../../../scripts/graph-visualizer';
  
  // 初始化图可视化
  initGraphVisualizer();
</script>