complete card height change and new page about RoRd overall and weight assignment

src/pages/report/RoRD-overall/index.astro

@@ -0,0 +1,792 @@
+---
+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 MathFormula from '../../../components/common/MathFormula.astro';
+import CodeBlock from '../../../components/common/CodeBlock.astro';
+import Container from '../../../components/Container.astro';
+import AnimatedElement from '../../../components/AnimatedElement.astro';
+import ReportSidebar from '../../../components/report/ReportSidebar.astro';
+
+import {
+  getSectionBaseDelay,
+  getChildDelay
+} from '../../../scripts/animation-timing';
+
+const SECTION_DELAYS = {
+  HERO: 200,
+  OVERVIEW: getSectionBaseDelay(0),
+  JOURNEY: getSectionBaseDelay(1),
+  TECHNOLOGY: getSectionBaseDelay(2),
+  OUTCOMES: getSectionBaseDelay(3),
+  FUTURE: getSectionBaseDelay(4),
+  APPENDIX: getSectionBaseDelay(5)
+};
+
+const reportConfig = {
+  title: 'RoRD-Layout-Recognation 项目综合技术报告',
+  subtitle: '围绕旋转鲁棒局部特征的 IC 版图识别解决方案，从历程、架构、创新到未来规划的全景梳理。',
+  description: 'RoRD-Layout-Recognation 项目的完整历程、核心技术方案、当前成果与未来规划。',
+  version: '版本 1.3 (完整版)',
+  date: '2025年10月5日',
+  type: '综合技术报告'
+};
+
+const journeyPhases = [
+  {
+    id: 'phase-1',
+    title: '第一阶段：开题与技术选型',
+    period: '2025年6月',
+    summary: '锁定服务设计-工艺协同优化 (DTCO) 的最终目标，完成 RoRD 技术路线的调研与论证。',
+    highlights: [
+      '对 U-Net、YOLO、ViT、SuperPoint、RoRD 等方案开展比选，聚焦版图识别的旋转鲁棒与数据稀缺两大核心痛点。',
+      '确立 “RoRD + 自监督 + 几何约束” 的总体策略，为后续工作奠定方向。'
+    ]
+  },
+  {
+    id: 'phase-2',
+    title: '第二阶段：模型适配与损失函数设计',
+    period: '2025年7月',
+    summary: '针对 IC 版图的几何特性，裁剪 RoRD 模块并构建几何感知损失体系。',
+    highlights: [
+      '移除正交视图生成模块，结合滑动窗口与图像金字塔实现多尺度匹配。',
+      '设计复合损失函数，引导模型学习几何描述子而非纹理特征。'
+    ]
+  },
+  {
+    id: 'phase-3',
+    title: '第三阶段：架构现代化与性能提升',
+    period: '2025年9月',
+    summary: '全面工程化改造，提升项目可维护性、实验效率与推理速度。',
+    highlights: [
+      '引入 FPN 与 NMS，大幅度提升多尺度匹配效率。',
+      '采用 YAML 配置 + 模块解耦策略，结合 TensorBoard 构建实验追踪闭环。'
+    ]
+  },
+  {
+    id: 'phase-4',
+    title: '当前状态：技术成熟与可扩展性',
+    period: '2025年10月',
+    summary: '核心组件稳定运行，具备大规模实验与快速应用的工程能力。',
+    highlights: [
+      'FPN、NMS、配置中心、模块化代码、实验追踪等特性均已落地。',
+      '进入持续优化与学术成果产出的关键阶段。'
+    ]
+  }
+];
+
+const publicationPlan = {
+  headers: ['目标会议', '投稿截止 (预计)', '结果通知 (预计)', '会议召开 (预计)', '策略说明'],
+  rows: [
+    ['ICCAD 2026', '2026年5月中下旬', '2026年8月上旬', '2026年10月底', '首要目标，窗口合适，聚焦旋转鲁棒识别创新。'],
+    ['DATE 2027', '2026年9月中旬', '2026年12月中旬', '2027年3-4月', 'Plan A：若 ICCAD 未中，依据评审意见快速迭代。'],
+    ['DAC 2027', '2026年11月中下旬', '2027年2月底', '2027年6-7月', 'Plan B：留出 3 个月强化实验与对比。'],
+    ['ASP-DAC 2028', '2027年7月中旬', '2027年10月中旬', '2028年1月下旬', '进一步打磨模型与工业验证的备选路径。'],
+    ['IEEE TCAD', '滚动', '-', '-', '最终方案：若多轮会议未果，汇总为期刊稿件。']
+  ]
+};
+
+const futureRoadmap = [
+  {
+    title: '数据策略 (高优先级)',
+    items: [
+      '引入弹性变形与版图缺陷模拟，真实再现制造侧形变。',
+      '实现程序化版图生成器 (gdstk)，构造大规模合成数据集。'
+    ]
+  },
+  {
+    title: '训练策略 (高优先级)',
+    items: [
+      '引入基于不确定度的损失权重自动加权，动态平衡多任务目标。',
+      '强化困难样本采样策略，提升描述子学习效率。'
+    ]
+  },
+  {
+    title: '模型架构 (中优先级)',
+    items: [
+      '尝试 ResNet / EfficientNet 等现代骨干网络替代 VGG。',
+      '探索注意力机制，引导模型聚焦关键几何结构。'
+    ]
+  }
+];
+
+const resourceGuidance = {
+  headers: ['资源类型', '需求规格', '说明'],
+  rows: [
+    ['数据集（启动阶段）', '100-200 张', '高分辨率版图，完成功能验证。'],
+    ['数据集（初步可用）', '1,000-2,000 张', '学习稳定的几何描述子。'],
+    ['数据集（生产级）', '5,000-10,000+ 张', '覆盖多工艺、多设计风格。'],
+    ['GPU（入门级）', 'RTX 3060 / 4060', '小规模试验、功能验证。'],
+    ['GPU（主流级）', 'RTX 3080 / 4070', '推荐配置，兼顾效率与成本。'],
+    ['GPU（专业级）', 'RTX 3090 / 4090 / A6000', '大规模实验或生产部署。'],
+    ['显存需求', '≥ 12 GB', 'Batch Size = 8，Patch = 256×256。'],
+    ['CPU / 内存', '8 核 / 32 GB', '确保数据预处理不成瓶颈。']
+  ]
+};
+
+const timeEstimation = {
+  headers: ['训练阶段', '时间估算', '说明'],
+  rows: [
+    ['单个 Epoch', '15-25 分钟', 'RTX 3080，2000 张图像。'],
+    ['总训练时间', '约 16.7 小时', '50 Epoch @ 20 分钟 / Epoch。'],
+    ['实际收敛时间', '10-20 小时', '启用早停 (patience = 10)。'],
+    ['数据增强调优', '1-2 周', '调节尺度、亮度、噪声参数。'],
+    ['损失函数权重', '1-2 周', '平衡 BCE / Triplet / Manhattan 等。'],
+    ['超参数搜索', '2-4 周', '学习率、批大小、优化器。'],
+    ['模型架构微调', '2-4 周', '测试不同骨干与注意力模块。'],
+    ['总调优时间', '1.5-3 个月', '达到生产级部署标准。']
+  ]
+};
+
+// 代码示例静态对象
+const codeExamples = {
+  fpnForward: {
+    title: "FPN 前向推理",
+    language: "python",
+    showLineNumbers: true,
+    code: `def forward(self, x: torch.Tensor, return_pyramid: bool = False):
+  if not return_pyramid:
+    features = self.backbone(x)
+    detection_map = self.detection_head(features)
+    descriptors = self.descriptor_head(features)
+    return detection_map, descriptors
+
+  c2, c3, c4 = self._extract_c234(x)
+  p4 = self.lateral_c4(c4)
+  p3 = self.lateral_c3(c3) + F.interpolate(p4, size=c3.shape[-2:], mode="nearest")
+  p2 = self.lateral_c2(c2) + F.interpolate(p3, size=c2.shape[-2:], mode="nearest")
+
+  p4 = self.smooth_p4(p4)
+  p3 = self.smooth_p3(p3)
+  p2 = self.smooth_p2(p2)
+
+  pyramid = {}
+  if 4 in self.fpn_levels:
+    pyramid['P4'] = (self.det_head_fpn(p4), self.desc_head_fpn(p4), 8)
+  if 3 in self.fpn_levels:
+    pyramid['P3'] = (self.det_head_fpn(p3), self.desc_head_fpn(p3), 4)
+  if 2 in self.fpn_levels:
+    pyramid['P2'] = (self.det_head_fpn(p2), self.desc_head_fpn(p2), 2)
+  return pyramid`
+  },
+  geometricLoss: {
+    title: "几何感知损失实现",
+    language: "python",
+    showLineNumbers: true,
+    code: `def compute_description_loss(desc_original, desc_rotated, H, margin=1.0):
+  # 旋转一致性与困难负样本挖掘
+  negative_list = []
+  for angle in [90, 180, 270]:
+    rotated_coords = rotate_coords(manhattan_coords, angle)
+    negative_list.append(rotated_coords)
+
+  geometric_triplet = triplet_loss(anchor, positive, hardest_negative)
+  manhattan_loss = compute_manhattan_alignment(anchor, positive)
+  sparsity_loss = torch.mean(torch.abs(anchor)) + torch.mean(torch.abs(positive))
+  binary_loss = torch.mean(torch.abs(torch.sign(anchor) - torch.sign(positive)))
+
+  return geometric_triplet + 0.1 * manhattan_loss + 0.01 * sparsity_loss + 0.05 * binary_loss`
+  },
+  trainingLoop: {
+    title: "自监督训练循环",
+    language: "python",
+    showLineNumbers: true,
+    code: `for epoch in range(epochs):
+  model.train()
+  for original, rotated, H in train_dataloader:
+    original, rotated, H = original.cuda(), rotated.cuda(), H.cuda()
+    det_o, desc_o = model(original)
+    det_r, desc_r = model(rotated)
+
+    det_loss = compute_detection_loss(det_o, det_r, H)
+    desc_loss = compute_description_loss(desc_o, desc_r, H)
+    loss = det_loss + desc_loss
+
+    optimizer.zero_grad()
+    loss.backward()
+    torch.nn.utils.clip_grad_norm_(model.parameters(), max_norm=1.0)
+    optimizer.step()
+
+  scheduler.step(validation_metric)
+  if early_stopper.should_stop():
+    break`
+  },
+  pyramidExtraction: {
+    title: "多尺度推理提取",
+    language: "python",
+    showLineNumbers: true,
+    code: `def extract_from_pyramid(model, image_tensor, kp_thresh, nms_cfg):
+  with torch.no_grad():
+    pyramid = model(image_tensor, return_pyramid=True)
+  keypoints, descriptors = [], []
+  for level_name, (det, desc, stride) in pyramid.items():
+    kps, descs = decode_level(det, desc, stride, kp_thresh)
+    if nms_cfg.get('enabled', False):
+      keep = radius_nms(kps, det['scores'], nms_cfg['radius'])
+      kps, descs = kps[keep], descs[keep]
+    keypoints.append(kps)
+    descriptors.append(descs)
+  return torch.cat(keypoints, dim=0), torch.cat(descriptors, dim=0)`
+  },
+  yamlConfig: {
+    title: "configs/base_config.yaml",
+    language: "yaml",
+    showLineNumbers: true,
+    code: `model:
+  backbone: resnet34
+  fpn:
+    enabled: true
+    out_channels: 256
+    levels: [2, 3, 4]
+
+matching:
+  keypoint_threshold: 0.5
+  nms:
+    enabled: true
+    radius: 4
+  min_inliers: 15
+
+logging:
+  use_tensorboard: true
+  log_dir: runs
+  experiment_name: baseline`
+  },
+  projectStructure: {
+    title: "项目目录结构",
+    language: "text",
+    showLineNumbers: false,
+    code: `RoRD-Layout-Recognation/
+├── configs/
+│   └── base_config.yaml      # YAML 配置中心
+├── data/
+│   └── ic_dataset.py         # 数据集定义
+├── docs/                     # 文档目录
+├── models/
+│   └── rord.py               # RoRD 模型 (含 FPN)
+├── utils/                    # 通用工具
+├── losses.py                 # 几何感知损失函数
+├── train.py                  # 训练脚本
+├── evaluate.py               # 评估脚本
+├── match.py                  # 模板匹配脚本
+├── pyproject.toml            # 依赖定义
+└── README.md`
+  },
+  uvWorkflow: {
+    title: "uv 工程流程",
+    language: "bash",
+    showLineNumbers: false,
+    code: `# 安装全部依赖
+uv sync
+
+# 训练管线
+uv run python train.py --config configs/your_exp_config.yaml
+
+# 版图模板匹配
+uv run python match.py \\
+  --config configs/your_exp_config.yaml \\
+  --model_path path/to/model.pth \\
+  --layout path/to/layout.png \\
+  --template path/to/template.png
+
+# 启动 TensorBoard
+uv run tensorboard --logdir runs`
+  },
+  jsonAnnotation: {
+    title: "验证集 JSON 标注",
+    language: "json",
+    showLineNumbers: true,
+    code: `{
+  "boxes": [
+    {"template": "template1.png", "x": 100, "y": 200, "width": 50, "height": 50},
+    {"template": "template2.png", "x": 300, "y": 400, "width": 60, "height": 60}
+  ]
+}`
+  }
+};
+---
+
+<BaseLayout
+  title={`${reportConfig.title} - Jiao77`}
+  description={reportConfig.description}
+  type="report"
+>
+  <Header
+    pageTitle={reportConfig.title}
+    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"
+            >
+              <p class="text-sm font-medium text-gray-500 mb-3">{reportConfig.version}</p>
+              <h1 class="text-4xl md:text-5xl font-extrabold mb-4 text-[#3d5366]">
+                {reportConfig.title}
+              </h1>
+              <p class="text-lg text-[#4a5f75] max-w-3xl mx-auto mb-6">
+                {reportConfig.subtitle}
+              </p>
+              <div class="flex flex-wrap items-center justify-center gap-4 text-sm text-[#5a7186]">
+                <span class="flex items-center gap-2">
+                  <i class="fas fa-calendar-alt"></i>
+                  {reportConfig.date}
+                </span>
+                <span class="flex items-center gap-2">
+                  <i class="fas fa-file-alt"></i>
+                  {reportConfig.type}
+                </span>
+              </div>
+            </Container>
+          </AnimatedElement>
+        </section>
+
+        <!-- 项目概述 -->
+        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.OVERVIEW} trigger="scroll">
+          <section id="overview">
+            <ReportSection
+              title="1. 项目概述"
+              subtitle="RoRD-Layout-Recognation：面向 IC 版图识别的旋转鲁棒方案"
+              level={2}
+            >
+              <div class="space-y-10 text-[#4a5f75] leading-relaxed">
+                <div>
+                  <p class="mb-4">
+                    <strong>RoRD-Layout-Recognation</strong> 致力于通过深度改造 RoRD (Rotation-Robust Descriptors) 模型，构建一套对 IC 版图模板具备高精度、低延迟、零/少样本能力的识别系统，为设计-工艺协同优化 (DTCO) 提供自动化支撑。
+                  </p>
+                </div>
+
+                <div>
+                  <h3 class="section-subtitle">1.1 项目目标</h3>
+                  <ul class="space-y-3">
+                    <li><strong>高精度模板匹配：</strong> 在复杂版图中准确定位所有模板实例及其 8 种方向与尺度。</li>
+                    <li><strong>高效率推理能力：</strong> 针对大尺寸 GDSII 版图实现近实时匹配，加速工业落地。</li>
+                    <li><strong>零/少样本泛化：</strong> 支持新模板的快速识别，减少大规模标注依赖。</li>
+                    <li><strong>标准化研发流程：</strong> 构建数据准备、训练、调参与评估的完整可复现实验管线。</li>
+                  </ul>
+                </div>
+
+                <div>
+                  <h3 class="section-subtitle">1.2 主要困难与挑战</h3>
+                  <ul class="space-y-3">
+                    <li><strong>数据稀缺：</strong> 高质量标注版图昂贵且难获取，限制了监督式方法。</li>
+                    <li><strong>几何多变：</strong> 模板存在旋转与镜像的全方向变化，要求描述子具备高度鲁棒性。</li>
+                    <li><strong>结构复杂：</strong> 版图呈现曼哈顿网格、二值稀疏特征与大量重复结构，区别于自然图像。</li>
+                    <li><strong>快速演进：</strong> 工艺与 IP 库持续更新，模型需具备持续适配能力。</li>
+                  </ul>
+                </div>
+              </div>
+            </ReportSection>
+          </section>
+        </AnimatedElement>
+
+        <!-- 项目历程 -->
+        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.JOURNEY} trigger="scroll">
+          <section id="journey">
+            <ReportSection
+              title="2. 项目历程与当前状态"
+              subtitle="从选型破题到工程化落地的完整路径"
+              level={2}
+            >
+              <div class="grid md:grid-cols-2 gap-6">
+                {journeyPhases.map((phase, index) => (
+                  <AnimatedElement
+                    animation="fadeInUp"
+                    delay={getChildDelay(SECTION_DELAYS.JOURNEY, index)}
+                    trigger="scroll"
+                  >
+                    <Container variant="glass" padding="lg" className="journey-card">
+                      <div class="flex items-start justify-between gap-4 mb-3">
+                        <h3 class="text-xl font-bold text-[#526b83]">{phase.title}</h3>
+                        <span class="text-sm font-medium text-gray-500">{phase.period}</span>
+                      </div>
+                      <p class="text-[#4a5f75] mb-3">{phase.summary}</p>
+                      <ul class="space-y-2 text-[#5a7186]">
+                        {phase.highlights.map(point => (
+                          <li class="flex gap-2">
+                            <span class="text-[#6b88a5] font-semibold">•</span>
+                            <span>{point}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </Container>
+                  </AnimatedElement>
+                ))}
+              </div>
+            </ReportSection>
+          </section>
+        </AnimatedElement>
+
+        <!-- 技术实现 -->
+        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.TECHNOLOGY} trigger="scroll">
+          <section id="technology">
+            <ReportSection
+              title="3. 技术实现与创新点"
+              subtitle="旋转鲁棒、多尺度特征与几何约束的深度融合"
+              level={2}
+            >
+              <div class="space-y-12 text-[#4a5f75] leading-relaxed">
+                <Container variant="glass" padding="lg" className="tech-block">
+                  <h3 class="block-title">3.1 模型架构：从 VGG 到 FPN</h3>
+                  <p class="mb-4">模型采用残差网络骨干，并行关键点检测头与描述子生成头。通过引入特征金字塔网络 (FPN)，实现单次前向即可获得多尺度特征 (P2 / P3 / P4)。</p>
+                  <ul class="space-y-2 mb-4">
+                    <li><strong>横向连接：</strong> 将 backbone 的 C2 / C3 / C4 特征映射至统一通道数。</li>
+                    <li><strong>自顶向下融合：</strong> 通过上采样与逐层平滑构建金字塔，避免尺度偏移。</li>
+                    <li><strong>共享头部：</strong> 在各层共享检测头与描述子头，提升效率与一致性。</li>
+                  </ul>
+          <CodeBlock
+            title={codeExamples.fpnForward.title}
+            language={codeExamples.fpnForward.language}
+            showLineNumbers={codeExamples.fpnForward.showLineNumbers}
+            code={codeExamples.fpnForward.code}
+          />
+                </Container>
+
+                <Container variant="glass" padding="lg" className="tech-block">
+                  <h3 class="block-title">3.2 核心创新：几何感知损失函数</h3>
+                  <p class="mb-3">为了引导模型学习几何结构而非纹理，我们构建了检测损失与描述子损失的复合体系：</p>
+                  <div class="space-y-3">
+                    <MathFormula formula="L_{\text{total}} = L_{\text{det}} + L_{\text{desc}}" />
+                    <MathFormula formula="L_{\text{det}} = \operatorname{BCE}(D_{\text{o}}, \mathcal{W}(D_{\text{r}}, H^{-1})) + 0.1\,\operatorname{SmoothL1}(D_{\text{o}}, \mathcal{W}(D_{\text{r}}, H^{-1}))" />
+                    <MathFormula formula="L_{\text{desc}} = L_{\text{triplet}} + 0.1L_{\text{manhattan}} + 0.01L_{\text{sparse}} + 0.05L_{\text{binary}}" />
+                  </div>
+                  <ul class="space-y-2 mt-4">
+                    <li><strong>L<sub>triplet</sub>：</strong> 采用 L1 范数的几何 Triplet Loss，突出旋转一致性。</li>
+                    <li><strong>L<sub>manhattan</sub>：</strong> 约束 90° 旋转后的描述子一致，解决重复结构混淆。</li>
+                    <li><strong>L<sub>sparse</sub>：</strong> 稀疏化正则抑制空白区域噪声。</li>
+                    <li><strong>L<sub>binary</sub>：</strong> 基于符号的一致性，强化几何边界表达。</li>
+                  </ul>
+          <CodeBlock
+            className="mt-4"
+            title={codeExamples.geometricLoss.title}
+            language={codeExamples.geometricLoss.language}
+            showLineNumbers={codeExamples.geometricLoss.showLineNumbers}
+            code={codeExamples.geometricLoss.code}
+          />
+                </Container>
+
+                <Container variant="glass" padding="lg" className="tech-block">
+                  <h3 class="block-title">3.3 训练策略：自监督与稳定性</h3>
+                  <ul class="space-y-2 mb-4">
+                    <li><strong>自监督框架：</strong> 通过随机几何变换自动生成 (original, rotated, H) 训练对，完全摆脱人工标注。</li>
+                    <li><strong>数据增强：</strong> 组合尺度抖动、Sobel 边缘增强、亮度对比度调整、高斯噪声等策略。</li>
+                    <li><strong>稳定性机制：</strong> 采用梯度裁剪、早停与 ReduceLROnPlateau 学习率调度，确保训练可控。</li>
+                  </ul>
+          <CodeBlock
+            title={codeExamples.trainingLoop.title}
+            language={codeExamples.trainingLoop.language}
+            showLineNumbers={codeExamples.trainingLoop.showLineNumbers}
+            code={codeExamples.trainingLoop.code}
+          />
+                </Container>
+
+                <Container variant="glass" padding="lg" className="tech-block">
+                  <h3 class="block-title">3.4 推理与匹配：高效的多实例检测</h3>
+                  <p class="mb-4">推理阶段利用 FPN、多尺度关键点提取、半径 NMS 与 RANSAC，实现快速稳定的多实例匹配。</p>
+                  <ul class="space-y-2 mb-4">
+                    <li><strong>extract_from_pyramid：</strong> 一次性提取所有尺度的关键点与描述子。</li>
+                    <li><strong>radius_nms：</strong> 基于关键点分数与空间距离过滤重复点。</li>
+                    <li><strong>MNN + RANSAC：</strong> 先进行互最近邻匹配，再利用 RANSAC 估计单应矩阵并剔除外点。</li>
+                    <li><strong>多实例循环：</strong> 针对每个模板实例迭代匹配，逐步屏蔽已检测区域。</li>
+                  </ul>
+          <CodeBlock
+            title={codeExamples.pyramidExtraction.title}
+            language={codeExamples.pyramidExtraction.language}
+            showLineNumbers={codeExamples.pyramidExtraction.showLineNumbers}
+            code={codeExamples.pyramidExtraction.code}
+          />
+                </Container>
+
+                <Container variant="glass" padding="lg" className="tech-block">
+                  <h3 class="block-title">3.5 工程化：配置驱动与实验追踪</h3>
+                  <ul class="space-y-2 mb-4">
+                    <li><strong>YAML 配置中心：</strong> 使用 <code>OmegaConf</code> 统一管理 <code>configs/base_config.yaml</code>，实现参数解耦与一键复现实验。</li>
+                    <li><strong>模块化代码：</strong> 数据集 (<code>data/</code>)、损失函数 (<code>losses.py</code>)、模型 (<code>models/</code>) 与工具 (<code>utils/</code>) 独立维护。</li>
+                    <li><strong>TensorBoard 集成：</strong> 训练、评估、匹配脚本均写入关键指标，支持端到端可视化与对比分析。</li>
+                  </ul>
+                  <CodeBlock
+                    title={codeExamples.yamlConfig.title}
+                    language={codeExamples.yamlConfig.language}
+                    showLineNumbers={codeExamples.yamlConfig.showLineNumbers}
+                    code={codeExamples.yamlConfig.code}
+                  />
+                </Container>
+              </div>
+            </ReportSection>
+          </section>
+        </AnimatedElement>
+
+        <!-- 项目成果 -->
+        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.OUTCOMES} trigger="scroll">
+          <section id="outcomes">
+            <ReportSection
+              title="4. 项目成果与预期效果"
+              subtitle="精度、效率、鲁棒性与可扩展性的综合提升"
+              level={2}
+            >
+              <div class="space-y-6 text-[#4a5f75] leading-relaxed">
+                <Container variant="glass" padding="lg">
+                  <h3 class="block-title">当前核心能力</h3>
+                  <ul class="space-y-2">
+                    <li><strong>多实例检测：</strong> 可在大型版图中准确定位同一模板的多个实例。</li>
+                    <li><strong>旋转鲁棒性：</strong> 对 0°-360° 旋转和镜像变换具备稳定识别能力。</li>
+                    <li><strong>高效推理：</strong> FPN 将传统图像金字塔的多次推理精简为单次前向。</li>
+                    <li><strong>可视化评估：</strong> Precision / Recall / F1 指标及调参记录全部纳入 TensorBoard。</li>
+                  </ul>
+                </Container>
+
+                <Container variant="glass" padding="lg">
+                  <h3 class="block-title">预期量化目标</h3>
+                  <ul class="space-y-2">
+                    <li><strong>精度：</strong> 已训练模板或相似风格验证集 F1 ≥ 95%。</li>
+                    <li><strong>速度：</strong> 百万门级版图、单模板匹配时间控制在 1 分钟内 (V100 / A100)。</li>
+                    <li><strong>鲁棒性：</strong> 对轻微线宽变化、金属填充差异保持稳定识别效果。</li>
+                    <li><strong>可扩展性：</strong> 直接匹配新模板时仍保持 ≥ 85% F1，无需重新训练。</li>
+                  </ul>
+                </Container>
+              </div>
+            </ReportSection>
+          </section>
+        </AnimatedElement>
+
+        <!-- 未来规划 -->
+        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.FUTURE} trigger="scroll">
+          <section id="future">
+            <ReportSection
+              title="5. 未来工作与展望"
+              subtitle="技术优化路线与学术产出计划"
+              level={2}
+            >
+              <div class="space-y-10 text-[#4a5f75] leading-relaxed">
+                <div>
+                  <h3 class="section-subtitle">5.1 技术优化路线图</h3>
+                  <div class="grid md:grid-cols-2 gap-6">
+                    {futureRoadmap.map((block, index) => (
+                      <AnimatedElement
+                        animation="fadeInUp"
+                        delay={getChildDelay(SECTION_DELAYS.FUTURE, index)}
+                        trigger="scroll"
+                      >
+                        <Container variant="glass" padding="lg" className="roadmap-card">
+                          <h4 class="text-lg font-semibold text-[#526b83] mb-3">{block.title}</h4>
+                          <ul class="space-y-2">
+                            {block.items.map(item => (
+                              <li class="flex gap-2">
+                                <span class="text-[#6b88a5] font-semibold">•</span>
+                                <span>{item}</span>
+                              </li>
+                            ))}
+                          </ul>
+                        </Container>
+                      </AnimatedElement>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <h3 class="section-subtitle">5.2 学术产出与论文计划</h3>
+                  <Container variant="glass" padding="lg" className="mb-6">
+                    <h4 class="text-lg font-semibold text-[#526b83] mb-3">论文核心贡献点</h4>
+                    <ol class="list-decimal list-inside space-y-2">
+                      <li>首次将旋转鲁棒局部特征 (RoRD) 引入 IC 版图识别，并验证其在工业场景下的有效性。</li>
+                      <li>提出面向版图几何的复合损失体系，显著提升二值稀疏、重复结构的描述能力。</li>
+                      <li>融合 FPN + NMS 等现代技术，将匹配效率与多实例检测性能提升到实用级别。</li>
+                    </ol>
+                  </Container>
+
+                  <GlassTable
+                    headers={publicationPlan.headers}
+                    rows={publicationPlan.rows}
+                    caption="EDA 领域主要会议投稿计划"
+                  />
+                </div>
+              </div>
+            </ReportSection>
+          </section>
+        </AnimatedElement>
+
+        <!-- 附录 -->
+        <AnimatedElement animation="fadeInUp" delay={SECTION_DELAYS.APPENDIX} trigger="scroll">
+          <section id="appendix">
+            <ReportSection
+              title="6. 附录"
+              subtitle="项目结构、使用指南与数据要求"
+              level={2}
+            >
+              <div class="space-y-10 text-[#4a5f75] leading-relaxed">
+                <div>
+                  <h3 class="section-subtitle">A. 项目结构</h3>
+                  <CodeBlock
+                    title={codeExamples.projectStructure.title}
+                    language={codeExamples.projectStructure.language}
+                    showLineNumbers={codeExamples.projectStructure.showLineNumbers}
+                    code={codeExamples.projectStructure.code}
+                  />
+                </div>
+
+                <div>
+                  <h3 class="section-subtitle">B. 快速使用指南</h3>
+                  <p class="mb-4">推荐使用 <code>uv</code> 管理虚拟环境，按以下步骤启用训练与推理:</p>
+                  <CodeBlock
+                    title={codeExamples.uvWorkflow.title}
+                    language={codeExamples.uvWorkflow.language}
+                    showLineNumbers={codeExamples.uvWorkflow.showLineNumbers}
+                    code={codeExamples.uvWorkflow.code}
+                  />
+                </div>
+
+                <div>
+                  <h3 class="section-subtitle">C. 数据集要求</h3>
+                  <ul class="space-y-2 mb-4">
+                    <li><strong>训练数据：</strong> 仅需大量无标注 PNG 版图，依靠自监督生成训练对。</li>
+                    <li><strong>验证数据：</strong> 提供模板图、版图图与描述模板位置的 JSON 标注。</li>
+                  </ul>
+                  <p class="mb-2">JSON 标注示例：</p>
+                  <CodeBlock
+                    title={codeExamples.jsonAnnotation.title}
+                    language={codeExamples.jsonAnnotation.language}
+                    showLineNumbers={codeExamples.jsonAnnotation.showLineNumbers}
+                    code={codeExamples.jsonAnnotation.code}
+                  />
+                </div>
+
+                <div>
+                  <h3 class="section-subtitle">D. 资源规划建议</h3>
+                  <GlassTable
+                    headers={resourceGuidance.headers}
+                    rows={resourceGuidance.rows}
+                    caption="实验资源配置建议"
+                  />
+                </div>
+
+                <div>
+                  <h3 class="section-subtitle">E. 训练时间评估</h3>
+                  <GlassTable
+                    headers={timeEstimation.headers}
+                    rows={timeEstimation.rows}
+                    caption="关键阶段时间估算"
+                  />
+                </div>
+              </div>
+            </ReportSection>
+          </section>
+        </AnimatedElement>
+
+      </div>
+    </div>
+  </main>
+
+  <Footer />
+</BaseLayout>
+
+<style>
+  .report-layout {
+    display: flex;
+    flex-direction: column;
+    gap: var(--report-sidebar-gap);
+    position: relative;
+    width: 100%;
+  }
+
+  .report-content {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+    margin: 0 auto;
+  }
+
+  .container {
+    max-width: 1200px;
+    width: 100%;
+  }
+
+  .report-header {
+    padding: 4rem 0 2rem 0;
+    text-align: center;
+  }
+
+  .section-subtitle {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #526b83;
+    margin-bottom: 1rem;
+  }
+
+  .block-title {
+    font-size: 1.35rem;
+    font-weight: 700;
+    color: #526b83;
+    margin-bottom: 1rem;
+  }
+
+  .tech-block {
+    backdrop-filter: blur(16px);
+  }
+
+  .journey-card {
+    min-height: 220px;
+  }
+
+  .roadmap-card {
+    min-height: 180px;
+  }
+
+  :global(:root) {
+    --max-content-width: 1200px;
+    --report-sidebar-min-width: 260px;
+    --report-sidebar-base-width: 300px;
+    --report-sidebar-max-width: 320px;
+    --report-sidebar-gap: 2.5rem;
+    --report-content-padding: 1rem;
+  }
+
+  @media (min-width: 1280px) {
+    .report-main {
+      padding-left: clamp(
+        calc(var(--report-sidebar-base-width) + var(--report-sidebar-gap)),
+        calc((100vw - var(--max-content-width)) / 2 + var(--report-content-padding)),
+        calc(var(--report-sidebar-max-width) + 3rem)
+      );
+      padding-right: clamp(
+        var(--report-content-padding),
+        calc((100vw - var(--max-content-width)) / 2 + var(--report-content-padding)),
+        2rem
+      );
+    }
+
+    .report-layout {
+      max-width: var(--max-content-width);
+      margin: 0 auto;
+      position: relative;
+    }
+
+    .report-content {
+      max-width: 100%;
+      width: 100%;
+      margin-left: 0;
+    }
+
+    .container {
+      padding-left: var(--report-content-padding);
+      padding-right: var(--report-content-padding);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .section-subtitle {
+      font-size: 1.1rem;
+    }
+  }
+</style>