feat(ai-protocols): add MCP and A2A protocol demos and documentation
docs(ai-protocols): update AI protocols page with visual demos and detailed explanations style(git-demos): improve responsive design and layout for git visualization components refactor(ai-history): simplify and clean up demo components chore: update config to register new AI protocol components
This commit is contained in:
sanbuphy
@@ -1,293 +1,40 @@
|
||||
<template>
|
||||
<div class="gpt-evolution-demo">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="main-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="title">🚀 GPT 进化历程</span>
|
||||
<span class="subtitle">从 GPT-1 到 GPT-4 的演进之路</span>
|
||||
<div class="demo-card">
|
||||
<div class="gpt-grid">
|
||||
<div class="gpt-card" v-for="m in models" :key="m.name" :style="{ borderTopColor: m.color }">
|
||||
<div class="card-top">
|
||||
<span class="gpt-name" :style="{ color: m.color }">{{ m.name }}</span>
|
||||
<span class="gpt-year">{{ m.year }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="demo-content">
|
||||
<!-- Replace Vertical Timeline with Horizontal Tabs -->
|
||||
<el-tabs
|
||||
v-model="activeModelName"
|
||||
type="card"
|
||||
class="evolution-tabs"
|
||||
@tab-click="handleTabClick"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(model, index) in gptModels"
|
||||
:key="index"
|
||||
:label="model.name"
|
||||
:name="model.name"
|
||||
>
|
||||
<div class="model-view">
|
||||
<div class="model-info-header">
|
||||
<el-tag
|
||||
effect="dark"
|
||||
size="large"
|
||||
>
|
||||
{{ model.year }}
|
||||
</el-tag>
|
||||
<div class="model-stats">
|
||||
<div class="stat-item">
|
||||
<span class="label">参数量</span>
|
||||
<span class="value">{{ model.parameters }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="label">上下文</span>
|
||||
<span class="value">{{ model.context }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="model-description">
|
||||
<p>{{ model.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="model-milestones">
|
||||
<span class="section-label">🎯 关键能力:</span>
|
||||
<div class="tags-container">
|
||||
<el-tag
|
||||
v-for="(milestone, i) in model.milestones"
|
||||
:key="i"
|
||||
size="small"
|
||||
class="milestone-tag"
|
||||
>
|
||||
{{ milestone }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-divider class="compact-divider">
|
||||
进化趋势
|
||||
</el-divider>
|
||||
|
||||
<div class="evolution-insight">
|
||||
<div class="insight-row">
|
||||
<div class="insight-item">
|
||||
<el-icon><TrendCharts /></el-icon>
|
||||
<div class="insight-text">
|
||||
<span class="label">参数量增长</span>
|
||||
<span class="value">10000倍+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="insight-item">
|
||||
<el-icon><ChatDotSquare /></el-icon>
|
||||
<div class="insight-text">
|
||||
<span class="label">对话能力</span>
|
||||
<span class="value">单轮 → 多轮</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="insight-item">
|
||||
<el-icon><Cpu /></el-icon>
|
||||
<div class="insight-text">
|
||||
<span class="label">逻辑推理</span>
|
||||
<span class="value">弱 → 强</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-val">{{ m.params }}</div>
|
||||
<div class="param-bar-bg">
|
||||
<div class="param-bar" :style="{ width: m.barWidth, background: m.color }"></div>
|
||||
</div>
|
||||
<div class="gpt-key">{{ m.key }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TrendCharts, ChatDotSquare, Cpu } from '@element-plus/icons-vue'
|
||||
|
||||
const activeModelName = ref('GPT-1')
|
||||
|
||||
const gptModels = [
|
||||
{
|
||||
name: 'GPT-1',
|
||||
year: '2018',
|
||||
parameters: '1.17 亿',
|
||||
paramDetail: '117 Million',
|
||||
context: '512 tokens',
|
||||
contextDetail: '约 1 页文本',
|
||||
capability: '无监督预训练',
|
||||
description: '开创性地使用了 Transformer 解码器进行预训练，证明了无监督学习在 NLP 中的潜力。',
|
||||
milestones: ['预训练+微调范式', 'BookCorpus 数据集', '单向 Transformer']
|
||||
},
|
||||
{
|
||||
name: 'GPT-2',
|
||||
year: '2019',
|
||||
parameters: '15 亿',
|
||||
paramDetail: '1.5 Billion',
|
||||
context: '1024 tokens',
|
||||
contextDetail: '约 2 页文本',
|
||||
capability: '零样本任务',
|
||||
description: '参数量扩大 10 倍，展示了惊人的零样本（Zero-shot）能力，能生成连贯的文本。',
|
||||
milestones: ['WebText 数据集', 'Zero-shot Learning', '生成长文本']
|
||||
},
|
||||
{
|
||||
name: 'GPT-3',
|
||||
year: '2020',
|
||||
parameters: '1750 亿',
|
||||
paramDetail: '175 Billion',
|
||||
context: '2048 tokens',
|
||||
contextDetail: '约 4 页文本',
|
||||
capability: '上下文学习 (ICL)',
|
||||
description: '参数量爆炸式增长，涌现出上下文学习能力（In-Context Learning），无需微调即可完成任务。',
|
||||
milestones: ['Few-shot Learning', 'Common Crawl', '能力涌现']
|
||||
},
|
||||
{
|
||||
name: 'GPT-4',
|
||||
year: '2023',
|
||||
parameters: '1.8 万亿 (推测)',
|
||||
paramDetail: '1.8 Trillion (Est.)',
|
||||
context: '128k tokens',
|
||||
contextDetail: '约 300 页书',
|
||||
capability: '多模态 & 推理',
|
||||
description: '引入多模态能力（识图），逻辑推理和代码能力大幅提升，支持超长上下文。',
|
||||
milestones: ['多模态输入', 'MoE 架构', 'RLHF 对齐', '考试高手']
|
||||
}
|
||||
const models = [
|
||||
{ name: 'GPT-1', year: '2018', params: '1.17 亿', barWidth: '2%', color: '#94a3b8', key: '预训练+微调范式确立' },
|
||||
{ name: 'GPT-2', year: '2019', params: '15 亿', barWidth: '6%', color: '#3b82f6', key: 'Zero-shot 零样本泛化' },
|
||||
{ name: 'GPT-3', year: '2020', params: '1750 亿', barWidth: '45%', color: '#7c3aed', key: '⚡ 涌现！上下文学习' },
|
||||
{ name: 'GPT-4', year: '2023', params: '~1.8 万亿', barWidth: '100%', color: '#dc2626', key: '多模态 + 复杂推理' },
|
||||
]
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
// activeModelName updated automatically
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gpt-evolution-demo {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* Compact Tabs */
|
||||
.evolution-tabs :deep(.el-tabs__header) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.model-view {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.model-info-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.model-stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-item .label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.stat-item .value {
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.model-description {
|
||||
background-color: #f5f7fa;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.model-milestones {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.milestone-tag {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.compact-divider {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.evolution-insight {
|
||||
background-color: #f0f9eb;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.insight-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.insight-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.insight-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.insight-text .label {
|
||||
font-size: 12px;
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.insight-text .value {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.insight-row {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
|
||||
.gpt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
|
||||
@media (max-width: 640px) { .gpt-grid { grid-template-columns: repeat(2, 1fr); } }
|
||||
.gpt-card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-top: 3px solid; border-radius: 6px; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
|
||||
.card-top { display: flex; justify-content: space-between; }
|
||||
.gpt-name { font-weight: bold; font-size: 0.88rem; }
|
||||
.gpt-year { font-size: 0.68rem; color: var(--vp-c-text-3); }
|
||||
.param-val { font-size: 0.78rem; font-weight: bold; font-family: monospace; color: var(--vp-c-text-1); }
|
||||
.param-bar-bg { height: 6px; background: var(--vp-c-bg-alt); border-radius: 3px; overflow: hidden; }
|
||||
.param-bar { height: 100%; border-radius: 3px; min-width: 3px; }
|
||||
.gpt-key { font-size: 0.7rem; color: var(--vp-c-brand-1); background: var(--vp-c-brand-soft); padding: 0.15rem 0.4rem; border-radius: 3px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user