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

feat: add interactive demos for AI history, Auth design, and Git intro

Browse Source
This commit is contained in:
sanbuphy
2026-01-19 11:25:10 +08:00
parent bb28f010e3
commit 7d86ba9504
55 changed files with 12984 additions and 5776 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue
+401
View File
@@ -0,0 +1,401 @@
<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>
</div>
<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>
</div>
<div class="arrow">↓</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>
</div>
</div>
<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>
</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>
</div>
</template>
<script setup>
import { ref } from '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);
}
.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 {
margin: 0;
color: var(--vp-c-text-2);
font-size: 0.875rem;
}
.comparison-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.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);
}
.ai-panel:hover {
border-color: rgba(var(--vp-c-brand-rgb), 0.35);
}
.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);
}
.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);
}
.icon {
font-size: 2rem;
}
.panel-header h5 {
margin: 0;
flex: 1;
font-size: 1.25rem;
color: var(--vp-c-text-1);
}
.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);
}
.input-output {
margin-bottom: 1.5rem;
}
.io-box {
margin-bottom: 1rem;
}
.io-label {
font-size: 0.75rem;
font-weight: 600;
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;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.5rem;
}
.io-content img {
max-width: 100%;
height: auto;
}
.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;
}
.arrow {
text-align: center;
font-size: 1.5rem;
color: var(--vp-c-text-3);
margin: 0.5rem 0;
}
.examples h6 {
margin: 0 0 0.75rem 0;
font-size: 0.875rem;
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;
}
}
</style>