606 lines
33 KiB
Plaintext
606 lines
33 KiB
Plaintext
---
|
||
/**
|
||
* 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>
|