delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): add NavGrid/NavCard components and restructure stage pages

Browse Source 
- Add NavGrid.vue and NavCard.vue components for better navigation layout
- Restructure stage-0 index pages across languages into intro.md with new navigation components
- Remove old stage-0 index.md files and update stage-3 pages similarly
- Add new dependencies 'claude' and 'codex' to package.json
- Improve code formatting in multiple Vue components for better readability
- Update documentation content and structure for better user experience
This commit is contained in:
sanbuphy
2026-02-01 23:42:12 +08:00
parent a9a5c5c8a7
commit ad95658a11
171 changed files with 16366 additions and 7946 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue
+197 -312
View File
@@ -1,401 +1,286 @@
<template>
<div class="discriminative-vs-generative-demo">
<div class="demo-header">
<h4>🎯 判别式 vs 生成式 AI</h4>
<p>理解两种不同的 AI 范式</p>
</div>
<div class="comparison-container">
<!-- Discriminative AI -->
<div class="ai-panel discriminative" :class="{ active: mode === 'discriminative' }" @click="mode = 'discriminative'">
<div class="panel-header">
<div class="icon">🔍</div>
<h5>判别式 AI</h5>
<div class="tag">分类/识别</div>
<el-card shadow="hover">
<template #header>
<div class="card-header">
<h4>🎯 判别式 vs 生成式 AI</h4>
<p class="subtitle">理解两种不同的 AI 范式</p>
</div>
</template>
<div class="panel-content">
<div class="input-output">
<div class="io-box input">
<div class="io-label">输入</div>
<div class="io-content">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%2348bb78'/%3E%3Ctext x='30' y='35' text-anchor='middle' fill='white' font-size='12'%3E猫图%3C/text%3E%3C/svg%3E" alt="cat" />
<div class="comparison-container">
<el-row :gutter="20">
<!-- Discriminative AI -->
<el-col :xs="24" :sm="12">
<el-card
shadow="always"
class="ai-panel discriminative"
:class="{ active: mode === 'discriminative' }"
@click="mode = 'discriminative'"
>
<div class="panel-header">
<div class="icon">🔍</div>
<h5>判别式 AI</h5>
<el-tag size="small" type="success">分类/识别</el-tag>
</div>
</div>
<div class="arrow">↓</div>
<div class="panel-content">
<div class="input-output">
<div class="io-box input">
<div class="io-label">输入</div>
<div class="io-content">
<div class="svg-placeholder green">
<span class="svg-text">猫图</span>
</div>
</div>
</div>
<div class="io-box output">
<div class="io-label">输出</div>
<div class="io-content">
<div class="result-tag">这是猫</div>
<div class="probability">置信度: 98%</div>
<div class="arrow">
<el-icon><Bottom /></el-icon>
</div>
<div class="io-box output">
<div class="io-label">输出</div>
<div class="io-content">
<el-tag effect="dark" type="success">这是猫</el-tag>
<div class="probability">置信度: 98%</div>
</div>
</div>
</div>
<div class="examples">
<h6>典型应用:</h6>
<div class="example-tags">
<el-tag
size="small"
effect="plain"
v-for="tag in [
'图像分类',
'垃圾邮件过滤',
'疾病诊断',
'人脸识别'
]"
:key="tag"
>{{ tag }}</el-tag
>
</div>
</div>
</div>
</div>
</div>
</el-card>
</el-col>
<div class="examples">
<h6>典型应用:</h6>
<div class="example-tags">
<span class="tag">图像分类</span>
<span class="tag">垃圾邮件过滤</span>
<span class="tag">疾病诊断</span>
<span class="tag">人脸识别</span>
</div>
</div>
</div>
<!-- Generative AI -->
<el-col :xs="24" :sm="12">
<el-card
shadow="always"
class="ai-panel generative"
:class="{ active: mode === 'generative' }"
@click="mode = 'generative'"
>
<div class="panel-header">
<div class="icon">✨</div>
<h5>生成式 AI</h5>
<el-tag size="small" type="primary">创造/生成</el-tag>
</div>
<div class="panel-content">
<div class="input-output">
<div class="io-box input">
<div class="io-label">输入</div>
<div class="io-content">
<div class="prompt-text">"一只戴墨镜的猫"</div>
</div>
</div>
<div class="arrow">
<el-icon><Bottom /></el-icon>
</div>
<div class="io-box output">
<div class="io-label">输出</div>
<div class="io-content">
<div class="svg-placeholder blue">
<span class="svg-text">生成图像 ✓</span>
</div>
</div>
</div>
</div>
<div class="examples">
<h6>典型应用:</h6>
<div class="example-tags">
<el-tag
size="small"
effect="plain"
type="primary"
v-for="tag in [
'ChatGPT',
'Midjourney',
'代码生成',
'音乐创作'
]"
:key="tag"
>{{ tag }}</el-tag
>
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
<!-- Generative AI -->
<div class="ai-panel generative" :class="{ active: mode === 'generative' }" @click="mode = 'generative'">
<div class="panel-header">
<div class="icon">✨</div>
<h5>生成式 AI</h5>
<div class="tag">创造/生成</div>
</div>
<div class="panel-content">
<div class="input-output">
<div class="io-box input">
<div class="io-label">输入</div>
<div class="io-content">
<div class="prompt-text">"一只戴墨镜的猫"</div>
</div>
</div>
<div class="arrow">↓</div>
<div class="io-box output">
<div class="io-label">输出</div>
<div class="io-content">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60' viewBox='0 0 80 60'%3E%3Crect width='80' height='60' fill='%23667eea'/%3E%3Ccircle cx='30' cy='25' r='3' fill='black'/%3E%3Cline x1='27' y1='25' x2='33' y2='25' stroke='black' stroke-width='1'/%3E%3Cellipse cx='30' cy='30' rx='8' ry='6' fill='white'/%3E%3Ccircle cx='30' cy='28' r='2' fill='black'/%3E%3Cpath d='M 22 20 Q 30 15 38 20' stroke='orange' stroke-width='2' fill='none'/%3E%3Cpath d='M 38 35 Q 50 30 55 40' stroke='gray' stroke-width='3' fill='none'/%3E%3C/svg%3E" alt="generated cat" />
<div class="generated-label">生成图像 ✓</div>
</div>
</div>
</div>
<div class="examples">
<h6>典型应用:</h6>
<div class="example-tags">
<span class="tag">ChatGPT</span>
<span class="tag">Midjourney</span>
<span class="tag">代码生成</span>
<span class="tag">音乐创作</span>
</div>
</div>
</div>
</div>
</div>
<div class="comparison-table">
<h5>📊 核心差异对比</h5>
<table>
<thead>
<tr>
<th>维度</th>
<th>判别式 AI</th>
<th>生成式 AI</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>目标</strong></td>
<td>区分、分类、识别</td>
<td>创造、生成新内容</td>
</tr>
<tr>
<td><strong>输入</strong></td>
<td>数据（图像、文本等）</td>
<td>提示词、噪声、种子</td>
</tr>
<tr>
<td><strong>输出</strong></td>
<td>标签、类别、概率</td>
<td>新的数据（文本、图像等）</td>
</tr>
<tr>
<td><strong>学习方式</strong></td>
<td>学习 P(标签|数据)</td>
<td>学习 P(数据)</td>
</tr>
<tr>
<td><strong>代表模型</strong></td>
<td>ResNet, BERT(分类)</td>
<td>GPT, DALL-E, Stable Diffusion</td>
</tr>
</tbody>
</table>
</div>
<div class="key-insight">
<h5>💡 关键洞察</h5>
<p>
<strong>判别式 AI</strong>就像考试中的"选择题"——从给定选项中选出正确答案。<br>
<strong>生成式 AI</strong>就像考试中的"简答题"——自己创造出全新的答案。
</p>
<p class="note">
从 2020 年代开始，生成式 AI 迅速崛起，成为人工智能的主流方向。
GPT、Midjourney 等模型展现出了惊人的创造力，开启了 AI 2.0 时代。
</p>
</div>
</el-card>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Bottom } from '@element-plus/icons-vue'
const mode = ref('discriminative')
</script>
<style scoped>
.discriminative-vs-generative-demo {
margin: 1rem 0;
padding: 1.5rem;
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
color: var(--vp-c-text-1);
margin: 20px 0;
}
.demo-header {
text-align: center;
margin-bottom: 2rem;
}
.demo-header h4 {
margin: 0 0 0.5rem 0;
color: var(--vp-c-text-1);
font-size: 1.5rem;
}
.demo-header p {
.card-header h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.subtitle {
font-size: 13px;
color: var(--vp-c-text-2);
font-size: 0.875rem;
margin: 4px 0 0;
}
.comparison-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
padding: 10px;
}
.ai-panel {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid var(--vp-c-divider);
transition: all 0.3s;
border: 2px solid transparent;
height: 100%;
}
.ai-panel:hover {
border-color: rgba(var(--vp-c-brand-rgb), 0.35);
transform: translateY(-2px);
}
.ai-panel.active {
border-color: var(--vp-c-brand);
box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.12);
}
.ai-panel.discriminative {
--ev-panel-accent: var(--vp-c-green-1, #22c55e);
}
.ai-panel.discriminative.active {
border-color: var(--ev-panel-accent);
}
.ai-panel.generative {
--ev-panel-accent: var(--vp-c-brand);
}
.ai-panel.generative.active {
border-color: var(--ev-panel-accent);
border-color: var(--el-color-primary);
background-color: var(--el-color-primary-light-9);
}
.panel-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--vp-c-divider);
gap: 10px;
margin-bottom: 16px;
}
.icon {
font-size: 2rem;
font-size: 24px;
}
.panel-header h5 {
margin: 0;
flex: 1;
font-size: 1.25rem;
color: var(--vp-c-text-1);
font-size: 16px;
font-weight: 600;
}
.tag {
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
background: rgba(var(--vp-c-brand-rgb), 0.08);
border: 1px solid var(--vp-c-divider);
color: var(--vp-c-text-2);
.panel-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.input-output {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background-color: var(--vp-c-bg);
padding: 16px;
border-radius: 8px;
}
.io-box {
margin-bottom: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.io-label {
font-size: 0.75rem;
font-weight: 600;
font-size: 12px;
color: var(--vp-c-text-2);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.io-content {
padding: 1rem;
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
border-radius: 6px;
text-align: center;
min-height: 80px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.svg-placeholder {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.5rem;
border-radius: 4px;
}
.io-content img {
max-width: 100%;
height: auto;
.svg-placeholder.green {
background-color: #48bb78;
}
.svg-placeholder.blue {
background-color: #667eea;
}
.svg-text {
color: white;
font-size: 12px;
font-weight: bold;
}
.result-tag,
.prompt-text {
font-weight: 600;
font-size: 1rem;
color: var(--vp-c-text-1);
}
.probability {
font-size: 0.875rem;
color: var(--vp-c-green-1, #22c55e);
font-weight: 600;
}
.generated-label {
font-size: 0.75rem;
color: var(--vp-c-brand);
font-weight: 600;
background-color: var(--vp-c-bg-alt);
padding: 8px;
border-radius: 4px;
font-family: monospace;
font-size: 12px;
}
.arrow {
text-align: center;
font-size: 1.5rem;
color: var(--vp-c-text-3);
margin: 0.5rem 0;
color: var(--vp-c-text-2);
}
.probability {
font-size: 12px;
color: var(--vp-c-text-2);
}
.examples h6 {
margin: 0 0 0.75rem 0;
font-size: 0.875rem;
margin: 0 0 8px 0;
font-size: 13px;
color: var(--vp-c-text-2);
}
.example-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.example-tags .tag {
padding: 0.25rem 0.75rem;
background: var(--vp-c-bg-alt);
border: 1px solid var(--vp-c-divider);
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
}
.comparison-table {
background: var(--vp-c-bg);
padding: 1.5rem;
border-radius: 8px;
border: 1px solid var(--vp-c-divider);
margin-bottom: 1.5rem;
}
.comparison-table h5 {
margin: 0 0 1rem 0;
color: var(--vp-c-text-1);
}
table {
width: 100%;
border-collapse: collapse;
}
thead th {
text-align: left;
padding: 0.75rem;
background: var(--vp-c-bg-alt);
color: var(--vp-c-text-1);
font-weight: 600;
border-bottom: 1px solid var(--vp-c-divider);
}
tbody td {
padding: 0.75rem;
border-bottom: 1px solid var(--vp-c-divider);
color: var(--vp-c-text-2);
line-height: 1.6;
}
tbody tr:last-child td {
border-bottom: none;
}
.key-insight {
background: rgba(var(--vp-c-brand-rgb), 0.08);
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.15);
padding: 1.5rem;
border-radius: 8px;
color: var(--vp-c-text-1);
}
.key-insight h5 {
margin: 0 0 1rem 0;
color: var(--vp-c-text-1);
}
.key-insight p {
margin: 0 0 1rem 0;
line-height: 1.8;
}
.key-insight .note {
font-size: 0.875rem;
color: var(--vp-c-text-2);
padding: 0.75rem;
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
}
@media (max-width: 768px) {
.comparison-container {
grid-template-columns: 1fr;
}
gap: 8px;
}
</style>