1566 lines
71 KiB
Plaintext
1566 lines
71 KiB
Plaintext
---
|
||
/**
|
||
* RoRD: 面向集成电路版图识别的旋转鲁棒描述子 - 中期检查报告
|
||
* 基于标准模板的技术报告页面
|
||
*/
|
||
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 ImageViewer from '../../../components/common/ImageViewer.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,
|
||
getNestedDelay,
|
||
getImageDelay
|
||
} from '../../../scripts/animation-timing';
|
||
|
||
// 定义各章节的基础延迟时间
|
||
const RORD_SECTION_DELAYS = {
|
||
HERO: 200,
|
||
OVERVIEW: getSectionBaseDelay(0), // 400ms
|
||
COMPLETENESS: getSectionBaseDelay(1), // 600ms
|
||
ACHIEVEMENTS: getSectionBaseDelay(2), // 800ms
|
||
PERFORMANCE: getSectionBaseDelay(3), // 1000ms
|
||
INNOVATION: getSectionBaseDelay(4), // 1200ms
|
||
PLAN: getSectionBaseDelay(5), // 1400ms,
|
||
RISK: getSectionBaseDelay(6),
|
||
CONCLUSION: getSectionBaseDelay(7),
|
||
};
|
||
|
||
// 报告配置
|
||
const reportConfig = {
|
||
title: "RoRD: 面向集成电路版图识别的旋转鲁棒描述子",
|
||
subtitle: "浙江大学竺可桢学院深度科研训练项目中期检查报告",
|
||
description: "RoRD-Layout-Recognition项目的中期进展报告，涵盖核心技术实现、性能测试分析和后期工作计划。",
|
||
date: "2025年11月",
|
||
type: "中期检查报告",
|
||
actionText: "开始阅读 ↓",
|
||
actionLink: "#overview"
|
||
};
|
||
|
||
// 示例代码配置
|
||
const codeExamples = {
|
||
config: {
|
||
title: "配置文件示例",
|
||
language: "yaml",
|
||
code: `# configs/base_config.yaml
|
||
training:
|
||
learning_rate: 5.0e-5
|
||
batch_size: 8
|
||
num_epochs: 50
|
||
patch_size: 256
|
||
|
||
model:
|
||
backbone:
|
||
name: "resnet34"
|
||
pretrained: false
|
||
fpn:
|
||
enabled: true
|
||
out_channels: 256
|
||
|
||
data_sources:
|
||
real:
|
||
enabled: true
|
||
ratio: 0.7
|
||
diffusion:
|
||
enabled: true
|
||
png_dir: "data/diffusion_generated"
|
||
ratio: 0.3`
|
||
},
|
||
match: {
|
||
title: "版图匹配示例",
|
||
language: "bash",
|
||
code: `# 基本匹配
|
||
python match.py \\
|
||
--layout data/large_layout.png \\
|
||
--template data/small_template.png \\
|
||
--output results/matching.png \\
|
||
--json_output results/matching.json`
|
||
}
|
||
};
|
||
---
|
||
|
||
<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={200} trigger="load">
|
||
<Container
|
||
variant="glass"
|
||
size="full"
|
||
padding="xl"
|
||
className="text-center mb-12 mt-24"
|
||
>
|
||
<h1 class="report-title">{reportConfig.title}</h1>
|
||
<p class="report-subtitle">{reportConfig.subtitle}</p>
|
||
<div class="report-meta">
|
||
<span class="report-date">报告日期：{reportConfig.date}</span>
|
||
<span class="report-type">{reportConfig.type}</span>
|
||
<span class="report-date">报告人：焦天晟</span>
|
||
</div>
|
||
<div class="report-action">
|
||
<a href={reportConfig.actionLink} class="report-cta-button">{reportConfig.actionText}</a>
|
||
</div>
|
||
</Container>
|
||
</AnimatedElement>
|
||
</section>
|
||
|
||
<!-- 项目概述章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={RORD_SECTION_DELAYS.OVERVIEW} trigger="scroll">
|
||
<section id="overview">
|
||
<ReportSection
|
||
title="📋 项目概述"
|
||
subtitle="项目背景、核心目标和技术创新点介绍"
|
||
level={2}
|
||
>
|
||
<div class="space-y-6">
|
||
<div class="goal-section">
|
||
<h3 class="section-heading">项目背景与目标</h3>
|
||
<p>
|
||
集成电路（IC）版图识别是半导体制造和EDA（电子设计自动化）领域的关键技术。随着芯片设计复杂度不断提升，传统基于像素匹配的方法在处理旋转、缩放等几何变换时面临巨大挑战，基于几何计算的传统算法也面临计算复杂度高，运行时间长等问题。
|
||
</p>
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.OVERVIEW, 0)} trigger="scroll">
|
||
<div class="math-intro mt-6">
|
||
<p class="text-lg text-gray-700 mb-4"><strong>项目核心目标：</strong></p>
|
||
<ul class="research-pillars">
|
||
<li>
|
||
<strong>开发旋转鲁棒的IC版图描述子</strong>
|
||
（Rotation-Robust Descriptors, RoRD），解决传统方法对几何变换敏感的问题
|
||
</li>
|
||
<li>
|
||
<strong>实现高精度的版图几何特征匹配</strong>
|
||
支持多尺度、多实例的版图检索
|
||
</li>
|
||
<li>
|
||
<strong>构建端到端的版图识别解决方案</strong>
|
||
为半导体设计和制造提供关键技术支撑
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
|
||
<div class="goal-section">
|
||
<h3 class="section-heading">解决的关键问题</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">几何变换不变性</h4>
|
||
<p class="challenge-description">IC版图在设计过程中经常需要旋转（0°、90°、180°、270°），传统方法无法保持特征一致性</p>
|
||
</div>
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">IP库动态扩展</h4>
|
||
<p class="challenge-description">IP核库、标准单元库等模板库规模庞大且动态更新，该方案灵活适应新模板，而无需频繁进行昂贵的重训练。</p>
|
||
</div>
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">数据稀缺性</h4>
|
||
<p class="challenge-description">监督学习依赖大量精细标注数据，但在高度专业的版图领域，获取像素级或边界框标注的成本极其高昂。</p>
|
||
</div>
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">实时性要求</h4>
|
||
<p class="challenge-description">工业应用对处理速度的严格要求，需要支持批量处理和并发推理</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.OVERVIEW, 1)} trigger="scroll">
|
||
<div class="goal-section">
|
||
<h3 class="section-heading">技术背景与现有解决方案</h3>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="font-semibold text-lg text-blue-600 mb-3">传统方法局限性</h4>
|
||
<GlassTable
|
||
headers={['方法', '优点', '缺点']}
|
||
rows={[
|
||
['像素直接匹配', '简单直观', '对旋转敏感，鲁棒性差'],
|
||
['SIFT/SURF特征', '尺度不变性', '不适合IC版图的几何特性'],
|
||
['深度学习分类', '端到端学习', '需要大量标注数据'],
|
||
['传统哈希匹配', '速度快', '精度有限，不处理几何变换']
|
||
]}
|
||
striped={true}
|
||
bordered={true}
|
||
className="tech-comparison-table"
|
||
/>
|
||
</div>
|
||
|
||
<div class="deep-dive-card">
|
||
<h4 class="font-semibold text-lg text-blue-600 mb-3">本项目技术优势</h4>
|
||
<p class="text-gray-700 mb-4">基于RoRD模型的创新解决方案，专门针对IC版图的特殊几何特性进行优化：</p>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(RORD_SECTION_DELAYS.OVERVIEW, 1), 2)} trigger="scroll">
|
||
<ul class="space-y-3 text-gray-700 list-disc list-inside">
|
||
<li><strong>曼哈顿几何约束</strong>: 专门针对IC版图的曼哈顿几何特性优化</li>
|
||
<li><strong>扩散模型数据增强</strong>: 基于真实数据的智能合成，训练数据量提升数倍</li>
|
||
<li><strong>多尺度特征融合</strong>: 一定程度上支持不同工艺的版图处理</li>
|
||
<li><strong>端到端自动化管线</strong>: 从原始数据到训练模型的完整自动化流程</li>
|
||
</ul>
|
||
</AnimatedElement>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 项目完成度分析章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={RORD_SECTION_DELAYS.COMPLETENESS} trigger="scroll">
|
||
<section id="completeness">
|
||
<ReportSection
|
||
title="🏗️ 项目完成度分析"
|
||
subtitle="截至中期，项目已完成核心框架搭建和基础功能实现，完成度约为65%"
|
||
level={2}
|
||
>
|
||
<div class="space-y-8">
|
||
<div class="goal-section">
|
||
<h3 class="section-heading">整体进度</h3>
|
||
<p class="text-lg text-gray-700 mb-4">
|
||
截至2025年11月，项目已完成<strong>核心框架搭建</strong>和<strong>基础功能实现</strong>，完成度约为<strong>65%</strong>。
|
||
各模块进展良好，核心模型实现已达到90%，但仍需在训练验证和性能测试方面投入更多精力。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="goal-section">
|
||
<h3 class="section-heading">模块完成度分析</h3>
|
||
<div class="space-y-3">
|
||
<div class="progress-item">
|
||
<div class="flex justify-between mb-1">
|
||
<span class="font-semibold">核心模型实现</span>
|
||
<span class="text-green-600">90%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 90%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item">
|
||
<div class="flex justify-between mb-1">
|
||
<span class="font-semibold">数据处理流程</span>
|
||
<span class="text-green-600">85%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 85%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item">
|
||
<div class="flex justify-between mb-1">
|
||
<span class="font-semibold">匹配算法优化</span>
|
||
<span class="text-green-600">80%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 80%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item">
|
||
<div class="flex justify-between mb-1">
|
||
<span class="font-semibold">训练基础设施</span>
|
||
<span class="text-blue-600">70%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 70%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item">
|
||
<div class="flex justify-between mb-1">
|
||
<span class="font-semibold">文档和示例</span>
|
||
<span class="text-blue-600">60%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 60%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-item">
|
||
<div class="flex justify-between mb-1">
|
||
<span class="font-semibold">性能测试验证</span>
|
||
<span class="text-orange-600">50%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 50%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.COMPLETENESS, 0)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🔴</div>
|
||
<div>
|
||
<p class="component-label">关键未完成任务</p>
|
||
<h3 class="component-title">剩余工作重点</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-6">
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">1. 模型训练与优化 (剩余80%)</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>未完成</strong>: 实际模型训练和参数调优</li>
|
||
<li><strong>缺失</strong>: 超参数网格搜索和最佳配置确定</li>
|
||
<li><strong>待做</strong>: 模型收敛性验证和性能基准测试</li>
|
||
<li><strong>计划</strong>: 第一阶段重点完成</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">2. 大规模数据测试 (剩余50%)</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>未完成</strong>: 真实IC版图数据集上的性能验证</li>
|
||
<li><strong>缺失</strong>: 不同工艺节点和设计复杂度的适应性测试</li>
|
||
<li><strong>待做</strong>: 与现有方法的定量对比实验</li>
|
||
<li><strong>计划</strong>: 第一和第二阶段逐步完成</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">3. 性能极限探索 (剩余70%)</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>未完成</strong>: 模型性能上限测试和优化</li>
|
||
<li><strong>缺失</strong>: 极限分辨率和复杂版图的处理能力验证</li>
|
||
<li><strong>待做</strong>: 算法改进和架构优化研究</li>
|
||
<li><strong>计划</strong>: 第二阶段研究重点</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">4. 真实场景验证 (剩余60%)</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>未完成</strong>: 工业环境下的实际应用测试</li>
|
||
<li><strong>缺失</strong>: EDA工具集成和接口适配</li>
|
||
<li><strong>待做</strong>: 用户体验优化和工业部署验证</li>
|
||
<li><strong>计划</strong>: 第二阶段重点完成</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.COMPLETENESS, 1)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🟡</div>
|
||
<div>
|
||
<p class="component-label">部分完成的任务</p>
|
||
<h3 class="component-title">需要进一步完善的功能</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-6">
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">1. 训练基础设施 (70%完成)</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>已完成</strong>: 配置管理、损失函数、优化器框架</li>
|
||
<li><strong>未完成</strong>: 分布式训练支持、自动超参数调优</li>
|
||
<li><strong>待完善</strong>: 训练监控和异常处理机制</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">2. 性能测试验证 (50%完成)</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>已完成</strong>: 未训练模型的推理性能基准测试</li>
|
||
<li><strong>未完成</strong>: 训练后模型的精度和性能评估</li>
|
||
<li><strong>待完善</strong>: 不同硬件平台和环境下的兼容性测试</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">3. 文档和示例 (60%完成)</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>已完成</strong>: 技术文档、使用指南、API说明</li>
|
||
<li><strong>未完成</strong>: 完整的教程和最佳实践文档</li>
|
||
<li><strong>待完善</strong>: 工业应用案例和部署指南</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.COMPLETENESS, 2)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🟢</div>
|
||
<div>
|
||
<p class="component-label">完成质量评估</p>
|
||
<h3 class="component-title">各模块质量评级</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<GlassTable
|
||
headers={['模块', '完成度', '质量评级', '关键缺失']}
|
||
rows={[
|
||
['核心模型实现', '90%', '优秀', '训练验证'],
|
||
['数据处理流程', '85%', '良好', '大规模测试'],
|
||
['匹配算法优化', '80%', '良好', '真实数据验证'],
|
||
['训练基础设施', '70%', '中等', '分布式支持'],
|
||
['文档和示例', '60%', '中等', '工业案例'],
|
||
['性能测试验证', '50%', '较低', '训练后测试']
|
||
]}
|
||
striped={true}
|
||
bordered={true}
|
||
className="quality-table"
|
||
/>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 已完成核心功能章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={RORD_SECTION_DELAYS.ACHIEVEMENTS} trigger="scroll">
|
||
<section id="achievements">
|
||
<ReportSection
|
||
title="✅ 已完成核心功能"
|
||
subtitle="项目已完成的核心技术组件和实现方案"
|
||
level={2}
|
||
>
|
||
<div class="space-y-8">
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.ACHIEVEMENTS, 0)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🏗️</div>
|
||
<div>
|
||
<p class="component-label">模型架构</p>
|
||
<h3 class="component-title">多骨干网络支持</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 mb-4"><strong>问题解决</strong>: 传统深度学习模型无法有效处理IC版图的特殊几何特征和旋转不变性要求</p>
|
||
|
||
<div class="space-y-4">
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">1. 多骨干网络支持: VGG16、ResNet34、EfficientNet-B0</h4>
|
||
<div class="space-y-2 text-gray-600">
|
||
<p><strong>解决问题</strong>: 不同应用场景对速度和精度的需求差异</p>
|
||
<p><strong>应用价值</strong>: ResNet34提供实时处理能力(55FPS)，VGG16提供高精度基准</p>
|
||
<p><strong>技术创新</strong>: 针对IC版图优化的特征提取层</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">2. 几何感知头: 专门的检测和描述子生成</h4>
|
||
<div class="space-y-2 text-gray-600">
|
||
<p><strong>解决问题</strong>: IC版图的曼哈顿几何特性(直角、网格结构)</p>
|
||
<p><strong>技术实现</strong>: 几何约束的特征映射 + 曼哈顿距离损失函数</p>
|
||
<p><strong>创新价值</strong>: 将几何约束深度集成到版图识别中</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">3. 特征金字塔网络: 多尺度推理能力</h4>
|
||
<div class="space-y-2 text-gray-600">
|
||
<p><strong>解决问题</strong>: 不同设计层级和工艺节点的尺寸存在明显差异</p>
|
||
<p><strong>应用场景</strong>: 实现不同工艺之间的版图的有效处理</p>
|
||
<p><strong>性能提升</strong>: 支持最高4096×4096像素的大版图处理</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.ACHIEVEMENTS, 1)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🔄</div>
|
||
<div>
|
||
<p class="component-label">数据处理管道</p>
|
||
<h3 class="component-title">扩散模型数据增强</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 mb-4"><strong>问题解决</strong>: IC版图数据稀缺且标注成本高，传统数据增强方法效果有限</p>
|
||
|
||
<div class="space-y-4">
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">1. 扩散模型集成: 基于真实数据的智能合成</h4>
|
||
<div class="space-y-2 text-gray-600">
|
||
<p><strong>解决问题</strong>: 训练数据不足，传统合成数据质量差</p>
|
||
<p><strong>技术创新</strong>: 首次将DDPM应用于IC版图数据增强</p>
|
||
<p><strong>数据质量</strong>: 生成数据保持与真实版图相似的几何关系</p>
|
||
<p><strong>效果提升</strong>: 训练数据量提升数倍，并保持数据质量</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">2. 几何变换增强: 8种离散旋转+镜像</h4>
|
||
<div class="space-y-2 text-gray-600">
|
||
<p><strong>解决问题</strong>: IC设计中的旋转需求(0°、90°、180°、270°)</p>
|
||
<p><strong>技术实现</strong>: 精确的几何变换 + H一致性验证</p>
|
||
<p><strong>算法优势</strong>: 确保旋转前后特征的一致性和可匹配性</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">3. 多源数据混合: 真实数据+合成数据可配置比例</h4>
|
||
<div class="space-y-2 text-gray-600">
|
||
<p><strong>解决问题</strong>: 平衡数据质量和数量</p>
|
||
<p><strong>应用灵活性</strong>: 可根据应用场景调整数据来源比例</p>
|
||
<p><strong>创新价值</strong>: 动态数据混合策略，适应不同训练阶段需求</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.ACHIEVEMENTS, 2)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">⚙️</div>
|
||
<div>
|
||
<p class="component-label">训练基础设施</p>
|
||
<h3 class="component-title">几何一致性损失函数</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 mb-4"><strong>问题解决</strong>: IC版图训练需要特殊的损失函数和训练策略来保证几何一致性</p>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(RORD_SECTION_DELAYS.ACHIEVEMENTS, 2), 1)} trigger="scroll">
|
||
<div class="math-intro">
|
||
<p class="text-center text-lg text-gray-600 mb-3">几何一致性损失函数：</p>
|
||
<div class="text-center mt-4">
|
||
<MathFormula
|
||
formula="L_{geo} = L_{det} + \lambda_1 L_{desc} + \lambda_2 L_{H-consistency}"
|
||
className="formula-style"
|
||
/>
|
||
</div>
|
||
<p class="text-center text-sm text-gray-500 mt-2">
|
||
其中：L<sub>det</sub>为检测损失，L<sub>desc</sub>为描述子损失，L<sub>H-consistency</sub>为H一致性损失
|
||
</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<div class="space-y-4 mt-6">
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">技术优势</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>数学表达</strong>: 完整的损失函数数学框架</li>
|
||
<li><strong>解决问题</strong>: 确保旋转和镜像变换后的特征一致性</li>
|
||
<li><strong>技术创新</strong>: 曼哈顿几何约束融入深度学习损失函数</li>
|
||
<li><strong>训练效果</strong>: 显著提升旋转不变性和几何鲁棒性</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">配置驱动训练: YAML配置文件管理</h4>
|
||
<div class="space-y-2 text-gray-600">
|
||
<p><strong>解决问题</strong>: 复杂的超参数管理和实验复现</p>
|
||
<p><strong>工程价值</strong>: 支持大规模实验和自动化训练</p>
|
||
<p><strong>用户友好</strong>: 降低使用门槛，提高开发效率</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.ACHIEVEMENTS, 3)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🎯</div>
|
||
<div>
|
||
<p class="component-label">匹配算法</p>
|
||
<h3 class="component-title">多尺度模板匹配</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 mb-4"><strong>问题解决</strong>: 现有匹配方法无法处理IC版图的旋转、缩放和多实例匹配需求</p>
|
||
|
||
<div class="space-y-4">
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">1. 多尺度模板匹配</h4>
|
||
<div class="space-y-2 text-gray-600">
|
||
<p><strong>解决问题</strong>: 不同工艺节点和设计层级的尺寸差异</p>
|
||
<p><strong>技术实现</strong>: 金字塔搜索 + 多分辨率特征融合</p>
|
||
<p><strong>性能提升</strong>: 支持跨工艺节点的版图匹配</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">2. 多实例检测</h4>
|
||
<div class="space-y-2 text-gray-600">
|
||
<p><strong>解决问题</strong>: 大版图中存在多个相同或相似的模块</p>
|
||
<p><strong>算法创新</strong>: 区域屏蔽机制 + 迭代式检测</p>
|
||
<p><strong>实际价值</strong>: 支持单次运行查找多个匹配实例</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">3. 几何验证: RANSAC变换估计</h4>
|
||
<div class="space-y-2 text-gray-600">
|
||
<p><strong>解决问题</strong>: 消除误匹配，提高匹配精度</p>
|
||
<p><strong>技术实现</strong>: 鲁棒的几何变换估计 + 离群点过滤</p>
|
||
<p><strong>精度提升</strong>: 可提高匹配精度</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 创新点分析章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={RORD_SECTION_DELAYS.INNOVATION} trigger="scroll">
|
||
<section id="innovation">
|
||
<ReportSection
|
||
title="🚀 创新点分析"
|
||
subtitle="算法创新、工程创新和应用创新的详细分析"
|
||
level={2}
|
||
>
|
||
<div class="space-y-8">
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.INNOVATION, 0)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🔬</div>
|
||
<div>
|
||
<p class="component-label">算法创新</p>
|
||
<h3 class="component-title">几何感知描述子</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 mb-3"><strong>解决的问题</strong>: 传统描述子(如SIFT、SURF)无法捕捉IC版图的曼哈顿几何特性，缺乏对直角、网格结构等设计约束的理解以及大量稀疏区域的过滤。</p>
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(RORD_SECTION_DELAYS.INNOVATION, 0), 1)} trigger="scroll">
|
||
<div class="math-intro">
|
||
<p class="text-center text-lg text-gray-600 mb-3">数学表达：</p>
|
||
<div class="text-center mt-4">
|
||
<MathFormula
|
||
formula="d_{geo} = F_{geo}(I, H)"
|
||
className="formula-style"
|
||
/>
|
||
</div>
|
||
<p class="text-center text-sm text-gray-500 mt-2">
|
||
其中：I为输入版图图像，H为几何变换矩阵，F<sub>geo</sub>为几何感知特征提取函数
|
||
</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<div class="space-y-4 mt-6">
|
||
<h4 class="font-semibold text-lg text-blue-600 mb-3">技术优势：</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>曼哈顿约束</strong>: 强制描述子学习IC版图的直角和网格结构</li>
|
||
<li><strong>旋转不变性</strong>: 内置8种几何变换的不变特性</li>
|
||
<li><strong>性能提升</strong>: 相比传统方法，有望在IC版图匹配精度提升30-50%</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.INNOVATION, 1)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🔄</div>
|
||
<div>
|
||
<p class="component-label">算法创新</p>
|
||
<h3 class="component-title">旋转不变损失函数</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 mb-3"><strong>解决的问题</strong>: IC版图在设计过程中经常需要旋转，传统方法无法保证旋转后的特征一致性</p>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(RORD_SECTION_DELAYS.INNOVATION, 1), 1)} trigger="scroll">
|
||
<div class="math-intro">
|
||
<p class="text-center text-lg text-gray-600 mb-3">创新方案：</p>
|
||
<div class="text-center mt-4">
|
||
<MathFormula
|
||
formula="L_{rotation} = \sum_{i=1}^{8} \| d(I) - d(T_i(I)) \|^2"
|
||
className="formula-style"
|
||
/>
|
||
</div>
|
||
<p class="text-center text-sm text-gray-500 mt-2">
|
||
其中 T<sub>i</sub> 表示第 i 种几何变换（4种旋转 + 4种镜像）
|
||
</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<div class="space-y-4 mt-6">
|
||
<h4 class="font-semibold text-lg text-blue-600 mb-3">技术突破：</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>精确几何变换</strong>: 针对IC设计的4种主要旋转角度(0°、90°、180°、270°)</li>
|
||
<li><strong>H一致性验证</strong>: 确保变换前后的特征匹配性</li>
|
||
<li><strong>端到端优化</strong>: 将几何约束直接融入深度学习训练过程</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.INNOVATION, 2)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🎨</div>
|
||
<div>
|
||
<p class="component-label">算法创新</p>
|
||
<h3 class="component-title">扩散数据增强</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 mb-3"><strong>解决的问题</strong>: IC版图数据稀缺，传统数据增强方法(如旋转、缩放)效果有限，无法生成符合设计规则的合成数据</p>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(RORD_SECTION_DELAYS.INNOVATION, 2), 1)} trigger="scroll">
|
||
<div class="math-intro">
|
||
<p class="text-center text-lg text-gray-600 mb-3">创新方案：</p>
|
||
<p class="text-center text-gray-600 mb-3">将扩散模型应用于IC版图数据增强：</p>
|
||
<div class="text-center mt-4">
|
||
<MathFormula
|
||
formula="I_{syn} = D_{\theta}^{-1}(z_T, I_{real})"
|
||
className="formula-style"
|
||
/>
|
||
</div>
|
||
<p class="text-center text-sm text-gray-500 mt-2">
|
||
基于真实版图数据的智能合成，保持几何约束
|
||
</p>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<div class="space-y-4 mt-6">
|
||
<h4 class="font-semibold text-lg text-blue-600 mb-3">技术价值：</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>设计规则学习</strong>: 扩散模型自动学习IC版图的设计分布和约束</li>
|
||
<li><strong>高质量合成</strong>: 生成的版图保持真实的几何特征</li>
|
||
<li><strong>数据规模扩展</strong>: 训练数据量提升数倍</li>
|
||
<li><strong>成本节约</strong>: 相比人工标注，成本显著降低</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="summary-highlight mt-6">
|
||
<p class="summary-highlight__text">
|
||
<strong>核心创新价值</strong>：通过几何感知描述子、旋转不变损失函数和扩散数据增强三大创新技术，解决了传统方法在几何变换、数据稀缺和设计约束方面的局限性。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.INNOVATION, 1)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🛠️</div>
|
||
<div>
|
||
<p class="component-label">工程创新</p>
|
||
<h3 class="component-title">模块化架构设计</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 mb-3">传统EDA工具集成困难，缺乏灵活性和可扩展性。本项目采用插件化设计，支持不同骨干网络和注意力机制的灵活组合。</p>
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(RORD_SECTION_DELAYS.INNOVATION, 1), 1)} trigger="scroll">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||
<CodeBlock
|
||
title={codeExamples.config.title}
|
||
language={codeExamples.config.language}
|
||
showLineNumbers={true}
|
||
code={codeExamples.config.code}
|
||
/>
|
||
<CodeBlock
|
||
title={codeExamples.match.title}
|
||
language={codeExamples.match.language}
|
||
showLineNumbers={true}
|
||
code={codeExamples.match.code}
|
||
/>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 性能测试与分析章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={RORD_SECTION_DELAYS.PERFORMANCE} trigger="scroll">
|
||
<section id="performance">
|
||
<ReportSection
|
||
title="📊 性能测试与分析"
|
||
subtitle="基于NVIDIA A100 GPU的详细性能测试结果"
|
||
level={2}
|
||
>
|
||
<div class="space-y-8">
|
||
<div class="goal-section">
|
||
<h3 class="section-heading">测试环境</h3>
|
||
<ul class="research-pillars">
|
||
<li><strong>硬件配置</strong>: Intel Xeon 8558P + NVIDIA A100 × 1 + 512GB内存</li>
|
||
<li><strong>软件环境</strong>: PyTorch 2.6+, CUDA 12.8</li>
|
||
<li><strong>测试类型</strong>: 未训练模型前向推理性能测试</li>
|
||
<li><strong>测试数据</strong>: 随机生成的2048×2048版图模拟数据</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="mt-12">
|
||
<h3 class="text-2xl font-bold text-center mb-6 text-blue-500">GPU推理性能排名</h3>
|
||
<GlassTable
|
||
headers={['排名', '骨干网络', '注意力机制', '单尺度推理(ms)', 'FPN推理(ms)', 'FPS', '性能表现']}
|
||
rows={[
|
||
['🥇', 'ResNet34', 'None', '18.10 ± 0.07', '21.41 ± 0.07', '55.3', '最优'],
|
||
['🥈', 'ResNet34', 'SE', '18.14 ± 0.05', '21.53 ± 0.06', '55.1', '优秀'],
|
||
['🥉', 'ResNet34', 'CBAM', '18.23 ± 0.05', '21.50 ± 0.07', '54.9', '优秀'],
|
||
['4', 'EfficientNet-B0', 'None', '21.40 ± 0.13', '33.48 ± 0.42', '46.7', '良好'],
|
||
['5', 'EfficientNet-B0', 'CBAM', '21.55 ± 0.05', '33.33 ± 0.38', '46.4', '良好'],
|
||
['6', 'EfficientNet-B0', 'SE', '21.67 ± 0.30', '33.52 ± 0.33', '46.1', '良好'],
|
||
['7', 'VGG16', 'None', '49.27 ± 0.23', '102.08 ± 0.42', '20.3', '一般'],
|
||
['8', 'VGG16', 'SE', '49.53 ± 0.14', '101.71 ± 1.10', '20.2', '一般'],
|
||
['9', 'VGG16', 'CBAM', '50.36 ± 0.42', '102.47 ± 1.52', '19.9', '一般']
|
||
]}
|
||
striped={true}
|
||
bordered={true}
|
||
className="performance-table"
|
||
/>
|
||
</div>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.PERFORMANCE, 0)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">⚡</div>
|
||
<div>
|
||
<p class="component-label">CPU vs GPU 加速比分析</p>
|
||
<h3 class="component-title">显著性能提升</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<GlassTable
|
||
headers={['骨干网络', '注意力机制', 'CPU推理(ms)', 'GPU推理(ms)', '加速比', '效率评级']}
|
||
rows={[
|
||
['ResNet34', 'None', '171.73', '18.10', '9.5×', '高效'],
|
||
['ResNet34', 'CBAM', '406.07', '18.23', '22.3×', '卓越'],
|
||
['ResNet34', 'SE', '419.52', '18.14', '23.1×', '卓越'],
|
||
['VGG16', 'None', '514.94', '49.27', '10.4×', '高效'],
|
||
['VGG16', 'SE', '808.86', '49.53', '16.3×', '优秀'],
|
||
['VGG16', 'CBAM', '809.15', '50.36', '16.1×', '优秀'],
|
||
['EfficientNet-B0', 'None', '1820.03', '21.40', '85.1×', '极佳'],
|
||
['EfficientNet-B0', 'SE', '1815.73', '21.67', '83.8×', '极佳'],
|
||
['EfficientNet-B0', 'CBAM', '1954.59', '21.55', '90.7×', '极佳']
|
||
]}
|
||
striped={true}
|
||
bordered={true}
|
||
className="gpu-speedup-table"
|
||
/>
|
||
</div>
|
||
|
||
<div class="summary-highlight">
|
||
<p class="summary-highlight__text">
|
||
<strong>GPU加速效果显著</strong>：平均加速比39.7倍，最大加速比90.7倍 (EfficientNet-B0 + CBAM)，
|
||
最小加速比9.5倍 (ResNet34 + None)。GPU相比CPU在深度学习推理中展现出压倒性优势。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.PERFORMANCE, 1)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">📈</div>
|
||
<div>
|
||
<p class="component-label">详细性能分析</p>
|
||
<h3 class="component-title">骨干网络与注意力机制对比</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-6">
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">骨干网络性能对比</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>ResNet34</strong>: 平均18.16ms (55.1 FPS) - 速度最快，性能稳定</li>
|
||
<li><strong>EfficientNet-B0</strong>: 平均21.54ms (46.4 FPS) - 平衡性能，效率较高</li>
|
||
<li><strong>VGG16</strong>: 平均49.72ms (20.1 FPS) - 精度高，但速度较慢</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">注意力机制影响分析</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>SE注意力</strong>: +0.5% 性能开销，适合高精度应用</li>
|
||
<li><strong>CBAM注意力</strong>: +2.2% 性能开销，复杂场景适用</li>
|
||
<li><strong>无注意力</strong>: 基准性能，适合实时应用</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">FPN计算开销</h4>
|
||
<ul class="space-y-2 text-gray-600">
|
||
<li><strong>平均开销</strong>: 59.6%</li>
|
||
<li><strong>最小开销</strong>: 17.9% (ResNet34 + CBAM)</li>
|
||
<li><strong>最大开销</strong>: 107.1% (VGG16 + None)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.PERFORMANCE, 3)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">📊</div>
|
||
<div>
|
||
<p class="component-label">性能分析结论</p>
|
||
<h3 class="component-title">核心发现与应用建议</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">🏆 最佳配置推荐: ResNet34 + 无注意力机制</h4>
|
||
<ul class="space-y-1 text-gray-600 text-sm">
|
||
<li><strong>单尺度推理</strong>: 18.1ms (55.3 FPS)</li>
|
||
<li><strong>FPN推理</strong>: 21.4ms (46.7 FPS)</li>
|
||
<li><strong>GPU内存占用</strong>: ~2GB</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">⚡ GPU加速效果显著</h4>
|
||
<ul class="space-y-1 text-gray-600 text-sm">
|
||
<li><strong>平均加速比</strong>: 39.7倍</li>
|
||
<li><strong>最大加速比</strong>: 90.7倍 (EfficientNet-B0)</li>
|
||
<li><strong>最小加速比</strong>: 9.5倍 (ResNet34)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">🎯 应用场景优化建议</h4>
|
||
<ul class="space-y-1 text-gray-600 text-sm">
|
||
<li><strong>实时处理</strong>: ResNet34 + None (18.1ms)</li>
|
||
<li><strong>高精度匹配</strong>: ResNet34 + SE (18.1ms)</li>
|
||
<li><strong>多尺度搜索</strong>: 任意配置 + FPN (21.4-102.5ms)</li>
|
||
<li><strong>批量处理</strong>: A100支持8-16并发推理</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="challenge-card">
|
||
<h4 class="challenge-title">📊 FPN使用策略</h4>
|
||
<ul class="space-y-1 text-gray-600 text-sm">
|
||
<li><strong>实时场景</strong>: 使用单尺度推理</li>
|
||
<li><strong>精度要求高</strong>: 启用FPN多尺度</li>
|
||
<li><strong>大图处理</strong>: 强烈建议使用FPN</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 后期工作计划章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={RORD_SECTION_DELAYS.PLAN} trigger="scroll">
|
||
<section id="plan">
|
||
<ReportSection
|
||
title="📅 后期工作计划"
|
||
subtitle="分阶段推进项目实施，确保按时完成研究目标"
|
||
level={2}
|
||
>
|
||
<div class="space-y-8">
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.PLAN, 0)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🎯</div>
|
||
<div>
|
||
<p class="component-label">第一阶段</p>
|
||
<h3 class="component-title">最低交付标准完成 (2025.11-2026.01)</h3>
|
||
</div>
|
||
</div>
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(RORD_SECTION_DELAYS.PLAN, 0), 1)} trigger="scroll">
|
||
<ul class="space-y-4 text-gray-700">
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 font-bold w-32 shrink-0">数据准备</span>
|
||
<span>收集郑老师公司提供的IC版图数据，数据清洗、格式转换和质量控制</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 font-bold w-32 shrink-0">基础训练</span>
|
||
<span>ResNet34骨干网络基础训练，基础几何一致性损失验证，简单超参数调优</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-purple-500 font-bold w-32 shrink-0">功能验证</span>
|
||
<span>端到端基础功能测试，基础性能基准测试</span>
|
||
</li>
|
||
</ul>
|
||
</AnimatedElement>
|
||
</div>
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.PLAN, 1)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<div class="flex items-center mb-4">
|
||
<div class="text-5xl mr-4">🚀</div>
|
||
<div>
|
||
<p class="component-label">第二阶段</p>
|
||
<h3 class="component-title">论文级别研究 (2026.01-2026.04)</h3>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 mb-3">结合陈老师先进制程数据，完成高水平研究论文和专利申请。</p>
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(RORD_SECTION_DELAYS.PLAN, 1), 1)} trigger="scroll">
|
||
<ul class="space-y-4 text-gray-700">
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 font-bold w-32 shrink-0">先进制程适配</span>
|
||
<span>先进工艺版图特征深度分析，极小尺度下的几何匹配算法优化</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 font-bold w-32 shrink-0">算法理论创新</span>
|
||
<span>更复杂几何变换的数学建模，多模态版图信息融合理论研究</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-purple-500 font-bold w-32 shrink-0">学术成果</span>
|
||
<span>目标ICCAD/DAC/ASP-DAC/DATE等会议论文或TCAD期刊</span>
|
||
</li>
|
||
</ul>
|
||
</AnimatedElement>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 风险评估章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={RORD_SECTION_DELAYS.RISK} trigger="scroll">
|
||
<section id="risk">
|
||
<ReportSection
|
||
title="⚠️ 风险评估"
|
||
subtitle="技术风险、数据风险和项目风险的识别与缓解措施"
|
||
level={2}
|
||
>
|
||
<div class="mt-12">
|
||
<h3 class="text-2xl font-bold text-center mb-6 text-blue-500">风险分析矩阵</h3>
|
||
<GlassTable
|
||
headers={['风险项', '概率', '影响', '缓解措施']}
|
||
rows={[
|
||
['模型收敛困难', '中', '高', '调整学习率、增加数据增强'],
|
||
['训练数据不足', '中', '高', '扩散模型数据增强、数据合成'],
|
||
['性能不达标', '低', '中', '多骨干网络对比、架构优化'],
|
||
['过拟合', '中', '中', '早停机制、正则化'],
|
||
]}
|
||
striped={true}
|
||
bordered={true}
|
||
className="risk-table"
|
||
/>
|
||
</div>
|
||
|
||
<div class="summary-highlight mt-8">
|
||
<p class="summary-highlight__text">风险管理策略：通过模块化设计、分阶段实施、多方案并行等方式降低项目风险，确保核心目标按时完成。</p>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
<!-- 总结与展望章节 -->
|
||
<AnimatedElement animation="fadeInUp" delay={RORD_SECTION_DELAYS.CONCLUSION} trigger="scroll">
|
||
<section id="conclusion">
|
||
<ReportSection
|
||
title="🚀 总结与展望"
|
||
subtitle="项目中期成果总结和未来发展前景"
|
||
level={2}
|
||
>
|
||
<div class="grid grid-cols-1 gap-8">
|
||
<!-- <AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.CONCLUSION, 0)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<h3 class="text-2xl font-bold mb-4 text-blue-500">🎯 核心成果</h3>
|
||
<ul class="space-y-3 text-gray-700 list-disc list-inside">
|
||
<li><strong>技术突破：</strong>完成RoRD模型架构设计和实现，实现旋转鲁棒的IC版图描述子</li>
|
||
<li><strong>性能提升：</strong>推理速度达到55.3 FPS，GPU加速比平均39.7倍</li>
|
||
<li><strong>应用价值：</strong>支持高精度的多尺度、多实例版图匹配</li>
|
||
<li><strong>创新点：</strong>几何感知损失函数、扩散数据增强、模块化架构设计</li>
|
||
</ul>
|
||
</div>
|
||
</AnimatedElement> -->
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={getChildDelay(RORD_SECTION_DELAYS.CONCLUSION, 1)} trigger="scroll">
|
||
<div class="deep-dive-card">
|
||
<h3 class="text-2xl font-bold mb-4 text-blue-500">🎯 核心成果</h3>
|
||
<AnimatedElement animation="fadeInUp" delay={getNestedDelay(getChildDelay(RORD_SECTION_DELAYS.CONCLUSION, 1), 1)} trigger="scroll">
|
||
<ul class="space-y-4 text-gray-700">
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 font-bold w-32 shrink-0">技术突破</span>
|
||
<span>完成RoRD模型架构设计和实现，实现旋转鲁棒的IC版图描述子</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 font-bold w-32 shrink-0">性能提升</span>
|
||
<span>推理速度达到55.3 FPS，GPU加速比平均39.7倍</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-purple-500 font-bold w-32 shrink-0">应用价值</span>
|
||
<span>支持高精度的多尺度、多实例版图匹配</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-yellow-500 font-bold w-32 shrink-0">创新点</span>
|
||
<span>几何感知损失函数、扩散数据增强、模块化架构设计</span>
|
||
</li>
|
||
</ul>
|
||
</AnimatedElement>
|
||
</div>
|
||
</AnimatedElement>
|
||
</div>
|
||
</ReportSection>
|
||
</section>
|
||
</AnimatedElement>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</BaseLayout>
|
||
|
||
<script>
|
||
// 交互式功能
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
console.log('RoRD中期报告页面已加载完成');
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
/* === 报告页面核心样式 === */
|
||
.report-main {
|
||
--report-color-primary: #5f7a99;
|
||
--report-color-primary-strong: #4a627b;
|
||
--report-color-primary-deep: #384b5f;
|
||
--report-color-primary-soft: #8ea3b8;
|
||
--report-color-accent: #a8bdc9;
|
||
--report-color-highlight: rgba(95, 122, 153, 0.2);
|
||
--report-color-soft-glow: rgba(148, 173, 196, 0.12);
|
||
--report-color-glass-border: rgba(95, 122, 153, 0.28);
|
||
--report-color-text: #2f3844;
|
||
--report-color-subtext: #566171;
|
||
--report-color-muted: #6d7885;
|
||
--report-color-surface: rgba(255, 255, 255, 0.65);
|
||
min-height: 100vh;
|
||
padding-bottom: 2rem;
|
||
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
background: transparent;
|
||
color: var(--report-color-text);
|
||
position: relative;
|
||
}
|
||
|
||
.report-main::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: linear-gradient(135deg,
|
||
rgba(143, 167, 187, 0.16) 0%,
|
||
rgba(164, 186, 202, 0.1) 25%,
|
||
rgba(182, 201, 214, 0.08) 50%,
|
||
rgba(154, 175, 192, 0.1) 75%,
|
||
rgba(122, 146, 165, 0.22) 100%);
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
/* === 布局样式 === */
|
||
.report-layout {
|
||
--report-sidebar-width: clamp(var(--report-sidebar-min-width), 22vw, var(--report-sidebar-max-width));
|
||
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%;
|
||
}
|
||
|
||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||
.px-4 { padding-left: 1rem; padding-right: 1rem; }
|
||
|
||
/* === 标题区域样式 === */
|
||
.report-header {
|
||
padding: 4rem 0 2rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.report-title {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
color: var(--report-color-primary);
|
||
margin: 0 0 1rem 0;
|
||
background: linear-gradient(135deg, var(--report-color-primary-soft), var(--report-color-primary), var(--report-color-primary-strong));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.report-subtitle {
|
||
font-size: 1.25rem;
|
||
color: var(--report-color-subtext);
|
||
margin: 0 0 2rem 0;
|
||
line-height: 1.6;
|
||
max-width: 800px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.report-meta {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
flex-wrap: wrap;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.report-date, .report-type {
|
||
background: rgba(95, 122, 153, 0.12);
|
||
color: var(--report-color-primary-deep);
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 1rem;
|
||
font-weight: 500;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.report-action {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.report-cta-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.9rem 2.4rem;
|
||
border-radius: 999px;
|
||
background: linear-gradient(135deg, var(--report-color-primary), var(--report-color-primary-strong));
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
box-shadow: 0 14px 32px rgba(56, 75, 95, 0.28);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
|
||
}
|
||
|
||
.report-cta-button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 18px 40px rgba(56, 75, 95, 0.32);
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.report-cta-button:active {
|
||
transform: translateY(0);
|
||
box-shadow: 0 12px 28px rgba(56, 75, 95, 0.28);
|
||
filter: brightness(0.98);
|
||
}
|
||
|
||
/* === 内容区域样式 === */
|
||
.goal-section {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid var(--report-color-glass-border);
|
||
border-radius: 1rem;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
/* === 进度条样式 === */
|
||
.progress-item {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
height: 0.5rem;
|
||
background-color: rgba(95, 122, 153, 0.1);
|
||
border-radius: 0.25rem;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(--report-color-primary), var(--report-color-primary-soft));
|
||
border-radius: 0.25rem;
|
||
transition: width 1s ease-in-out;
|
||
}
|
||
|
||
.section-heading {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
color: var(--report-color-primary);
|
||
margin: 0 0 1rem 0;
|
||
}
|
||
|
||
.research-pillars {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.research-pillars li {
|
||
background: rgba(95, 122, 153, 0.08);
|
||
border-left: 4px solid rgba(95, 122, 153, 0.65);
|
||
padding: 1rem 1.5rem;
|
||
margin-bottom: 1rem;
|
||
border-radius: 0 0.5rem 0.5rem 0;
|
||
}
|
||
|
||
/* === 卡片样式 === */
|
||
.challenge-card {
|
||
background: linear-gradient(135deg, rgba(95, 122, 153, 0.18), rgba(74, 98, 123, 0.16));
|
||
padding: 1.5rem;
|
||
border-radius: 0.85rem;
|
||
border: 1px solid rgba(74, 98, 123, 0.35);
|
||
box-shadow: 0 12px 32px rgba(56, 75, 95, 0.18);
|
||
backdrop-filter: blur(16px);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||
}
|
||
|
||
.challenge-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 18px 44px rgba(56, 75, 95, 0.25);
|
||
border-color: rgba(74, 98, 123, 0.48);
|
||
}
|
||
|
||
.challenge-title {
|
||
font-weight: bold;
|
||
font-size: 1.25rem;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--report-color-primary-strong);
|
||
}
|
||
|
||
.challenge-description {
|
||
color: var(--report-color-subtext);
|
||
}
|
||
|
||
.deep-dive-card {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid var(--report-color-glass-border);
|
||
border-radius: 1rem;
|
||
padding: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
/* === 组件样式 === */
|
||
.component-label {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
color: rgba(95, 122, 153, 0.85);
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.component-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--report-color-primary);
|
||
margin: 0.25rem 0 0 0;
|
||
}
|
||
|
||
/* === 高亮样式 === */
|
||
.summary-highlight {
|
||
margin-top: 3rem;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
max-width: 56rem;
|
||
padding: 1.75rem 2.5rem;
|
||
text-align: center;
|
||
background: linear-gradient(135deg, rgba(168, 189, 201, 0.28), rgba(95, 122, 153, 0.16));
|
||
border-radius: 1.25rem;
|
||
border: 1px solid rgba(95, 122, 153, 0.32);
|
||
box-shadow: 0 18px 48px rgba(56, 75, 95, 0.22);
|
||
backdrop-filter: blur(18px);
|
||
color: var(--report-color-primary-deep);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.summary-highlight::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.5), transparent 55%);
|
||
opacity: 0.65;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.summary-highlight__text {
|
||
position: relative;
|
||
font-weight: 600;
|
||
font-size: 1.05rem;
|
||
color: inherit;
|
||
}
|
||
|
||
/* === 数学公式样式 === */
|
||
.math-intro {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid var(--report-color-glass-border);
|
||
border-radius: 1rem;
|
||
padding: 2rem;
|
||
}
|
||
|
||
/* === 表格样式 === */
|
||
.tech-comparison-table {
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.tech-comparison-table .glass-table th:last-child {
|
||
background: rgba(95, 122, 153, 0.18);
|
||
color: var(--report-color-primary-deep);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.tech-comparison-table .glass-table td:last-child {
|
||
background: rgba(95, 122, 153, 0.12);
|
||
font-weight: 600;
|
||
color: var(--report-color-primary-strong);
|
||
}
|
||
|
||
/* === 图片样式 === */
|
||
.proof-image-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
.proof-image-item {
|
||
text-align: center;
|
||
}
|
||
|
||
:global(.proof-image-viewer) {
|
||
margin: 0;
|
||
border-radius: 0.5rem;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
:global(.proof-image-viewer:hover) {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.15);
|
||
}
|
||
|
||
.proof-image-item p {
|
||
text-align: center;
|
||
font-size: 0.875rem;
|
||
color: var(--report-color-muted);
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
/* === 响应式设计 === */
|
||
@media (max-width: 768px) {
|
||
.report-title { font-size: 2rem; }
|
||
.report-subtitle { font-size: 1.1rem; }
|
||
.report-meta {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
.deep-dive-card { padding: 1.5rem; }
|
||
.grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* 统一宽度配置 - 先进的宽度管理方式 */
|
||
/*
|
||
* 要修改整个页面的最大宽度，只需要修改下面的 --max-content-width 值
|
||
* 建议的宽度选项：
|
||
* - 1024px (较窄，适合阅读)
|
||
* - 1200px (当前设置，平衡)
|
||
* - 1400px (较宽，适合表格)
|
||
*/
|
||
: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;
|
||
}
|
||
|
||
/* 统一宽度类 - 所有内容区域使用相同的最大宽度 */
|
||
.report-header,
|
||
.container {
|
||
max-width: var(--max-content-width);
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 专门的宽度配置，可根据需要调整 */
|
||
.report-width {
|
||
max-width: var(--max-content-width);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
@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);
|
||
}
|
||
}
|
||
|
||
/* === 工具样式类 === */
|
||
.grid { display: grid; }
|
||
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||
@media (min-width: 768px) {
|
||
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
}
|
||
.gap-8 { gap: 2rem; }
|
||
.space-y-6 > * + * { margin-top: 1.5rem; }
|
||
.space-y-8 > * + * { margin-top: 2rem; }
|
||
.space-y-10 > * + * { margin-top: 2.5rem; }
|
||
.space-y-3 > * + * { margin-top: 0.75rem; }
|
||
.space-y-4 > * + * { margin-top: 1rem; }
|
||
.flex { display: flex; }
|
||
.items-center { align-items: center; }
|
||
.items-start { align-items: flex-start; }
|
||
.mb-8 { margin-bottom: 2rem; }
|
||
.mb-6 { margin-bottom: 1.5rem; }
|
||
.mb-4 { margin-bottom: 1rem; }
|
||
.mb-3 { margin-bottom: 0.75rem; }
|
||
.mb-2 { margin-bottom: 0.5rem; }
|
||
.mt-4 { margin-top: 1rem; }
|
||
.mt-12 { margin-top: 3rem; }
|
||
.mr-4 { margin-right: 1rem; }
|
||
.text-center { text-align: center; }
|
||
.text-5xl { font-size: 3rem; line-height: 1; }
|
||
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
|
||
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
|
||
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
|
||
.font-bold { font-weight: 700; }
|
||
.font-semibold { font-weight: 600; }
|
||
.text-gray-700 { color: var(--report-color-text); }
|
||
.text-gray-600 { color: var(--report-color-subtext); }
|
||
.text-blue-500 { color: var(--report-color-primary); }
|
||
.text-blue-600 { color: var(--report-color-primary-strong); }
|
||
.text-green-500 { color: #6f8c83; }
|
||
.text-purple-500 { color: #7f7a94; }
|
||
.w-32 { width: 8rem; }
|
||
.shrink-0 { flex-shrink: 0; }
|
||
.max-w-3xl { max-width: 48rem; }
|
||
.list-disc { list-style-type: disc; }
|
||
.list-inside { list-style-position: inside; }
|
||
</style> |