Files
Agent-n8n/web_frontend/web_result/order-classes/chemical/index.html
Yep_Q 38313038a3 feat: 完成化工订单班半导体AI检测项目展示页面
详细说明:
- 创建化工订单班(chemical)展示页面完整结构
- 实现300mm硅晶圆+SiO₂薄膜AI综合检测项目展示
- 使用紫色/紫罗兰科技主题(#7c3aed, #8b5cf6)突出半导体专业特色
- 深色主题采用深邃紫黑色(#0f0a1f)营造科技氛围

核心功能:
- 4个展示区块:项目概述、判定标准、检测流程、检测结果
- 4个Agent角色展示:项目经理、质量工程师、AI系统工程师、数据分析师
- 智能数据动画:单片用时6分钟、批次1.5小时、AI可信度94%、合格率95%
- 8张专业图片:检测背景、硅晶圆项目、光学检测、热力图等
- 深浅主题切换、平滑滚动、懒加载等交互功能

技术特性:
- 玻璃态设计(glassmorphism)配合backdrop-filter
- 视差滚动效果(background-attachment: fixed)
- Intersection Observer实现动画和懒加载
- LocalStorage持久化主题偏好
- 响应式网格布局适配多屏幕

修复问题:
- Agent头像映射:使用现有3个头像文件适配4个角色
- 图片文件名编码:修复全角/半角括号差异(使用sed命令)

文件清单:
- web_frontend/web_result/order-classes/chemical/index.html (641行)
- web_frontend/web_result/order-classes/chemical/css/styles.css (961行)
- web_frontend/web_result/order-classes/chemical/js/main.js (266行)
- 软链接:agent-avatars → data/订单班文档资料/化工/agent头像
- 软链接:images → data/订单班文档资料/化工/notion文稿/image

项目数据:
- 检测对象:300mm P型硅晶圆20片
- 检测项目:外观(颗粒/划痕/腐蚀)、薄膜(厚度/均匀性)、电学(Rs)、成分(XPS)
- 批次结果:19片合格、1片观察、0片不合格
- AI判定规则:≥0.90合格、0.80-0.90观察、<0.80待复核

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-04 04:02:30 +08:00

642 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>半导体AI综合检测项目 - 化工订单班</title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
</head>
<body class="dark-theme">
<!-- 主题切换按钮 -->
<div class="theme-toggle">
<button id="themeToggleBtn" class="theme-toggle-btn">
<i data-lucide="sun" class="theme-icon theme-icon-light"></i>
<i data-lucide="moon" class="theme-icon theme-icon-dark"></i>
</button>
</div>
<!-- Hero 区域 -->
<section class="hero">
<div class="hero-content">
<div class="hero-badge">🔬 化工订单班</div>
<h1 class="hero-title">半导体AI综合检测项目</h1>
<h2 class="hero-subtitle">300mm硅晶圆 + SiO₂薄膜智能质检</h2>
<p class="hero-description">
<i data-lucide="cpu"></i> AI驱动的全流程自动化检测<br>
<i data-lucide="bot"></i> 4大专业Agent协同作业<br>
<i data-lucide="check-circle"></i> 95%合格率 + 智能质量预警
</p>
</div>
</section>
<!-- 导航栏 -->
<nav class="nav">
<div class="nav-container">
<div class="nav-item active">
<i data-lucide="file-text"></i>
<span>项目概述</span>
</div>
<div class="nav-item">
<i data-lucide="clipboard-check"></i>
<span>判定标准</span>
</div>
<div class="nav-item">
<i data-lucide="workflow"></i>
<span>检测流程</span>
</div>
<div class="nav-item">
<i data-lucide="chart-line"></i>
<span>检测结果</span>
</div>
</div>
</nav>
<!-- Section 1: 项目概述 -->
<section class="section">
<div class="container">
<div class="section-header">
<img src="agent-avatars/质量标准与合规专家.jpg" alt="项目经理" class="agent-avatar">
<div class="agent-info">
<div class="agent-name">
<i data-lucide="briefcase"></i> 项目经理
</div>
<h2 class="section-title">项目概述与检测背景</h2>
</div>
</div>
<div class="section-content">
<div class="expert-intro">
<h3><i data-lucide="info"></i> 检测背景</h3>
<p>本项目对单批次 300mm 硅晶圆 + 表面SiO₂薄膜开展一次性质量检测。整套流程由AI引擎主导:负责数据清洗、主判定与自动出具结构化报告;检测员只在低可信或越界时介入复核,最大化保障速度与一致性。</p>
</div>
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
<img data-src="images/检测背景主图.jpg" alt="检测背景" loading="lazy">
<div class="image-caption">AI驱动的智能检测系统</div>
</div>
<div class="grid grid-2">
<div class="card">
<div class="card-header">
<h3 class="card-title">检测目的</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="check-circle"></i> 外观:识别颗粒、划痕、腐蚀缺陷</li>
<li><i data-lucide="check-circle"></i> 薄膜:核对厚度均值与均匀性</li>
<li><i data-lucide="check-circle"></i> 电学:快速评估方块电阻Rs</li>
<li><i data-lucide="check-circle"></i> 成分:XPS抽检确认O/Si比</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">检测信息</h3>
</div>
<div class="card-body">
<ul class="feature-list">
<li><i data-lucide="building"></i> XX半导体第三方实验室</li>
<li><i data-lucide="calendar"></i> 2024年10月</li>
<li><i data-lucide="file-text"></i> AI-QC-202410-001</li>
<li><i data-lucide="package"></i> 300mm P型硅晶圆 20片</li>
</ul>
</div>
</div>
</div>
<div class="table-container" style="margin-top: var(--spacing-xl);">
<table>
<thead>
<tr>
<th>项目</th>
<th>信息</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品</td>
<td>300mm P型硅晶圆(表面SiO₂薄膜)</td>
</tr>
<tr>
<td>批次/数量</td>
<td>同批随机抽样20片</td>
</tr>
<tr>
<td>目标规格</td>
<td>SiO₂ 15.0±0.3nm; Rs 60±1.2Ω/□</td>
</tr>
<tr>
<td>环境</td>
<td>ISO 5洁净室,温度22±1℃,湿度45±5%</td>
</tr>
<tr>
<td>AI设置</td>
<td>可信度阈值:≥0.90合格,0.80-0.90观察,<0.80待复核</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Section 2: 判定标准 -->
<section class="section">
<div class="container">
<div class="section-header">
<img src="agent-avatars/质量标准与合规专家.jpg" alt="质量工程师" class="agent-avatar">
<div class="agent-info">
<div class="agent-name">
<i data-lucide="shield-check"></i> 质量工程师
</div>
<h2 class="section-title">检测范围与判定标准</h2>
</div>
</div>
<div class="section-content">
<div class="expert-intro">
<h3><i data-lucide="target"></i> 检测对象与项目</h3>
<p>样品类型:300mm硅晶圆+表面SiO₂薄膜。覆盖项目:外观(颗粒/划痕/腐蚀)、薄膜(厚度与均匀性)、电学(方块电阻Rs)、成分(XPS抽检)。</p>
</div>
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
<img data-src="images/硅晶圆检测项目.jpg" alt="检测项目" loading="lazy">
<div class="image-caption">硅晶圆检测项目全景</div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>项目</th>
<th>指标</th>
<th>判定阈值/范围</th>
<th>统计口径</th>
<th>结论规则</th>
</tr>
</thead>
<tbody>
<tr>
<td>外观</td>
<td>颗粒(≥0.3μm)</td>
<td>≤35颗/片</td>
<td>每片最大值、总数</td>
<td>超过即不合格</td>
</tr>
<tr>
<td>外观</td>
<td>划痕</td>
<td>>50μm计缺陷</td>
<td>最大长度</td>
<td>45-50μm观察</td>
</tr>
<tr>
<td>外观</td>
<td>腐蚀坑深度</td>
<td>>10nm不合格</td>
<td>最大深度</td>
<td>8-10nm观察;≤8nm合格</td>
</tr>
<tr>
<td>薄膜</td>
<td>厚度均值</td>
<td>15.0±0.3nm</td>
<td>9点均值</td>
<td>超出窗口即不合格</td>
</tr>
<tr>
<td>薄膜</td>
<td>均匀性(3σ)</td>
<td>≤±3%</td>
<td>9点3σ</td>
<td>>3%不合格;2.5-3%观察</td>
</tr>
<tr>
<td>电学</td>
<td>Rs均值</td>
<td>60±1.2Ω/□</td>
<td>9点均值</td>
<td>超出窗口不合格</td>
</tr>
<tr>
<td>成分</td>
<td>O/Si比</td>
<td>2.00±0.05</td>
<td>抽检值</td>
<td>超出为异常;贴边观察</td>
</tr>
<tr>
<td>成分</td>
<td>金属污染</td>
<td><1×10¹atoms/cm²</td>
<td>抽检值</td>
<td>超阈即异常</td>
</tr>
</tbody>
</table>
</div>
<div class="stats" style="margin-top: var(--spacing-xl);">
<div class="stat-item">
<div class="stat-label">判定优先级</div>
<div class="stat-value">外观 > 薄膜 > 电学 > 成分</div>
</div>
<div class="stat-item">
<div class="stat-label">AI参与方式</div>
<div class="stat-value">自动阈值比对</div>
</div>
<div class="stat-item">
<div class="stat-label">人工复核触发</div>
<div class="stat-value">临界/低可信</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: 检测流程 -->
<section class="section">
<div class="container">
<div class="section-header">
<img src="agent-avatars/检测工程师1+2.jpg" alt="AI系统工程师" class="agent-avatar">
<div class="agent-info">
<div class="agent-name">
<i data-lucide="bot"></i> AI系统工程师
</div>
<h2 class="section-title">检测流程与AI方法</h2>
</div>
</div>
<div class="section-content">
<div class="expert-intro">
<h3><i data-lucide="workflow"></i> 流程总览</h3>
<p>AI数据采集 → AI清洗数据 → AI主判定 → AI对标阈值 → 必要时人工复核 → 自动生成报告。单片目标用时≤6分钟,批次(20片)约1.5小时完成核心判定。</p>
</div>
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
<img data-src="images/光学镜头检测硅晶圆示意图.jpg" alt="检测流程" loading="lazy">
<div class="image-caption">光学镜头检测硅晶圆示意</div>
</div>
<div class="grid grid-4">
<div class="card">
<div class="image-container">
<img data-src="images/外观热力图(颗粒划痕腐蚀).jpg" alt="外观热力图" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">外观热力图</h3>
</div>
<div class="card-body">
<p>整片俯视图+网格热区,颗粒/划痕/腐蚀坑分类显示,颜色分级标注严重度。</p>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/厚度分布图.jpg" alt="厚度分布图" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">厚度分布图</h3>
</div>
<div class="card-body">
<p>9点热力格,均值、3σ、偏移率统计,边缘敏感性自动标注。</p>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/电学对比图.jpg" alt="电学对比图" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">电学对比图</h3>
</div>
<div class="card-body">
<p>AI预测vs实测散点图,误差统计,置信区间可视化展示。</p>
</div>
</div>
<div class="card">
<div class="image-container">
<img data-src="images/成分抽检卡片.jpg" alt="成分抽检" loading="lazy">
</div>
<div class="card-header">
<h3 class="card-title">成分抽检卡片</h3>
</div>
<div class="card-body">
<p>O/Si比值、金属污染状态,峰位截图,采样位置追溯。</p>
</div>
</div>
</div>
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
<h3><i data-lucide="cpu"></i> AI判定规则</h3>
<div class="grid grid-3" style="margin-top: var(--spacing-md);">
<div class="card">
<div class="card-header" style="order: 1;">
<h4 class="card-title">≥0.90且达标 → 合格</h4>
</div>
<div class="card-body" style="order: 2;">
<p>自动出报告并归档,无需人工处理。</p>
</div>
</div>
<div class="card">
<div class="card-header" style="order: 1;">
<h4 class="card-title">0.80-0.90 → 观察</h4>
</div>
<div class="card-body" style="order: 2;">
<p>自动生成备注与关注点,坐标放入下批复测清单。</p>
</div>
</div>
<div class="card">
<div class="card-header" style="order: 1;">
<h4 class="card-title"><0.80或超限 待复核</h4>
</div>
<div class="card-body" style="order: 2;">
<p>自动通知检测员复核,复核前不建议放行。</p>
</div>
</div>
</div>
</div>
<div class="stats" style="margin-top: var(--spacing-xl);">
<div class="stat-item">
<div class="stat-label">单片用时</div>
<div class="stat-value single-time">0分钟</div>
</div>
<div class="stat-item">
<div class="stat-label">批次用时(20片)</div>
<div class="stat-value batch-time">0小时</div>
</div>
<div class="stat-item">
<div class="stat-label">AI可信度</div>
<div class="stat-value ai-confidence">0%</div>
</div>
<div class="stat-item">
<div class="stat-label">异常复核</div>
<div class="stat-value">3-5分钟/片</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 4: 检测结果 -->
<section class="section">
<div class="container">
<div class="section-header">
<img src="agent-avatars/检测技术员.jpg" alt="数据分析师" class="agent-avatar">
<div class="agent-info">
<div class="agent-name">
<i data-lucide="chart-line"></i> 数据分析师
</div>
<h2 class="section-title">检测结果与数据分析</h2>
</div>
</div>
<div class="section-content">
<div class="expert-intro">
<h3><i data-lucide="clipboard-check"></i> 批次摘要</h3>
<p>本批共20片晶圆,全部完成外观、厚度、Rs三项检测;随机抽取3片补做XPS成分核验。完成度100%,无漏测、无中断记录。总体判定:合格19片、观察1片、不合格0片。</p>
</div>
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
<img data-src="images/检测结果主图.jpg" alt="检测结果" loading="lazy">
<div class="image-caption">检测结果主图</div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>判定</th>
<th>片数</th>
<th>占比</th>
<th>主要原因/特征</th>
<th>处置</th>
</tr>
</thead>
<tbody>
<tr>
<td>合格</td>
<td>19</td>
<td>95%</td>
<td>指标均在阈值内;外观颗粒小、分散</td>
<td>直接归档</td>
</tr>
<tr>
<td>观察</td>
<td>1</td>
<td>5%</td>
<td>Rs接近上限,离散正常;外观、厚度均达标</td>
<td>下批优先复测</td>
</tr>
<tr>
<td>不合格</td>
<td>0</td>
<td>0%</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="table-container" style="margin-top: var(--spacing-xl);">
<table>
<thead>
<tr>
<th>指标</th>
<th>结果</th>
<th>阈值</th>
<th>判定</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>颗粒(≥0.3μm,颗/片)</td>
<td>24</td>
<td>≤35</td>
<td>合格</td>
<td>主要集中在3象限外环</td>
</tr>
<tr>
<td>划痕(最大长度,μm)</td>
<td>48</td>
<td>>50计缺陷</td>
<td>合格</td>
<td>单条、细长型,非功能区</td>
</tr>
<tr>
<td>腐蚀坑深度(nm)</td>
<td>8.6</td>
<td>≤10</td>
<td>合格</td>
<td>无环形腐蚀迹象</td>
</tr>
<tr>
<td>SiO₂厚度均值(nm)</td>
<td>15.07</td>
<td>15.0±0.3</td>
<td>合格</td>
<td>偏移率+0.47%</td>
</tr>
<tr>
<td>厚度均匀性3σ(%)</td>
<td>±2.6</td>
<td>≤±3.0</td>
<td>合格</td>
<td>边缘敏感:否</td>
</tr>
<tr>
<td>Rs均值(Ω/□)</td>
<td>61.1</td>
<td>60±1.2</td>
<td>观察</td>
<td>+1.1(略高),离散2.9Ω/□</td>
</tr>
<tr>
<td>XPS O/Si原子比</td>
<td>2.02</td>
<td>2.00±0.05</td>
<td>合格</td>
<td>3片抽检均正常</td>
</tr>
<tr>
<td>金属污染(atoms/cm²)</td>
<td><7×10</td>
<td><1×10¹</td>
<td>合格</td>
<td>未见可疑峰</td>
</tr>
</tbody>
</table>
</div>
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
<h3><i data-lucide="lightbulb"></i> 结论与建议</h3>
<div class="grid grid-2" style="margin-top: var(--spacing-md);">
<div class="card">
<div class="card-header" style="order: 1;">
<h4 class="card-title">总体判定</h4>
</div>
<div class="card-body" style="order: 2;">
<p>最终结论:<strong>合格</strong>。本批20片中,仅1片进入观察带(Rs均值略高但未越界),其余指标均在阈值内。AI主判定平均可信度0.94,异常触发的人工复核与AI结果一致。</p>
<p style="margin-top: var(--spacing-sm);">放行建议:本批可整体放行。对"观察片"在生产流转单上加注"下批优先复测"标识。</p>
</div>
</div>
<div class="card">
<div class="card-header" style="order: 1;">
<h4 class="card-title">快速优化建议</h4>
</div>
<div class="card-body" style="order: 2;">
<p>若后续批次仍出现Rs略高,可尝试:</p>
<ul class="feature-list" style="margin-top: var(--spacing-sm);">
<li><i data-lucide="arrow-down"></i> 沉积时间下调1-2%</li>
<li><i data-lucide="arrow-up"></i> 腔温上调约2℃</li>
<li><i data-lucide="search"></i> 下批优先复测边缘3点+中心1点</li>
</ul>
</div>
</div>
</div>
</div>
<div class="stats" style="margin-top: var(--spacing-xl);">
<div class="stat-item">
<div class="stat-label">批次合格率</div>
<div class="stat-value pass-rate">0%</div>
</div>
<div class="stat-item">
<div class="stat-label">AI可信度</div>
<div class="stat-value">0.94</div>
</div>
<div class="stat-item">
<div class="stat-label">观察片数</div>
<div class="stat-value">1片</div>
</div>
<div class="stat-item">
<div class="stat-label">不合格片数</div>
<div class="stat-value">0片</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer: 项目成果总结 -->
<section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
<div class="container">
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-2xl);">
<i data-lucide="award"></i> 项目成果总结
</h2>
<div class="grid grid-3">
<div class="card">
<div class="card-header" style="order: 1;">
<h3 class="card-title">📋 检测覆盖</h3>
</div>
<div class="card-body" style="order: 2;">
<ul class="feature-list">
<li><i data-lucide="search"></i> 外观全片扫描</li>
<li><i data-lucide="ruler"></i> 9点厚度测量</li>
<li><i data-lucide="zap"></i> 9点电阻测试</li>
<li><i data-lucide="atom"></i> XPS成分抽检</li>
<li><i data-lucide="image"></i> 4类可视化图表</li>
<li><i data-lucide="file-text"></i> 结构化AI报告</li>
<li><i data-lucide="database"></i> 原始数据追溯</li>
<li><i data-lucide="shield-check"></i> 全程质量控制</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header" style="order: 1;">
<h3 class="card-title">🎯 核心指标</h3>
</div>
<div class="card-body" style="order: 2;">
<ul class="feature-list">
<li><i data-lucide="check-circle"></i> 合格率95%</li>
<li><i data-lucide="cpu"></i> AI可信度0.94</li>
<li><i data-lucide="clock"></i> 单片用时≤6分钟</li>
<li><i data-lucide="layers"></i> 批次用时1.5小时</li>
<li><i data-lucide="droplet"></i> 颗粒≤35颗/片</li>
<li><i data-lucide="minimize"></i> 划痕<50μm</li>
<li><i data-lucide="box"></i> 厚度15.0±0.3nm</li>
<li><i data-lucide="zap"></i> Rs 60±1.2Ω/□</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header" style="order: 1;">
<h3 class="card-title">⚙️ AI能力</h3>
</div>
<div class="card-body" style="order: 2;">
<ul class="feature-list">
<li><i data-lucide="wand-2"></i> 自动数据清洗</li>
<li><i data-lucide="brain"></i> 智能主判定</li>
<li><i data-lucide="git-compare"></i> 阈值自动比对</li>
<li><i data-lucide="activity"></i> 可信度评估</li>
<li><i data-lucide="line-chart"></i> 趋势预测</li>
<li><i data-lucide="alert-triangle"></i> 异常自动预警</li>
<li><i data-lucide="file-output"></i> 报告一键生成</li>
<li><i data-lucide="repeat"></i> 持续学习优化</li>
</ul>
</div>
</div>
</div>
<div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
<p>🔬 半导体AI综合检测项目圆满完成!</p>
<p style="margin-top: var(--spacing-sm);">© 2024 化工订单班 | AI驱动的智能质检解决方案</p>
</div>
</div>
</section>
<script src="js/main.js"></script>
</body>
</html>