test-repo/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue

<template>
  <div class="gpt-evolution-demo">
    <div class="demo-header">
      <h4>🚀 GPT 进化历程</h4>
      <p>从 GPT-1 到 GPT-4 的演进之路</p>
    </div>

    <div class="timeline-container">
      <div class="timeline-track"></div>

      <div
        v-for="(model, index) in gptModels"
        :key="index"
        class="timeline-item"
        :class="{ active: activeModel === index }"
        @click="selectModel(index)"
      >
        <div class="timeline-marker">
          <div class="marker-dot"></div>
        </div>
        <div class="timeline-content">
          <div class="model-year">{{ model.year }}</div>
          <div class="model-name">{{ model.name }}</div>
          <div class="model-stats">
            <span class="stat">📊 {{ model.parameters }}</span>
            <span class="stat">🎯 {{ model.context }}</span>
          </div>
        </div>
      </div>
    </div>

    <transition name="fade-slide">
      <div v-if="activeModel !== null" class="model-details">
        <div class="details-header">
          <h5>{{ gptModels[activeModel].name }}</h5>
          <span class="year-badge">{{ gptModels[activeModel].year }}</span>
        </div>

        <div class="details-grid">
          <div class="detail-card">
            <div class="card-label">参数量</div>
            <div class="card-value">{{ gptModels[activeModel].parameters }}</div>
            <div class="card-note">{{ gptModels[activeModel].paramDetail }}</div>
          </div>

          <div class="detail-card">
            <div class="card-label">上下文窗口</div>
            <div class="card-value">{{ gptModels[activeModel].context }}</div>
            <div class="card-note">{{ gptModels[activeModel].contextDetail }}</div>
          </div>

          <div class="detail-card">
            <div class="card-label">主要能力</div>
            <div class="card-value">{{ gptModels[activeModel].capability }}</div>
          </div>
        </div>

        <div class="model-description">
          <h6>📝 模型简介</h6>
          <p>{{ gptModels[activeModel].description }}</p>
        </div>

        <div class="model-milestones">
          <h6>🎯 关键里程碑</h6>
          <ul>
            <li v-for="(milestone, i) in gptModels[activeModel].milestones" :key="i">
              {{ milestone }}
            </li>
          </ul>
        </div>
      </div>
    </transition>

    <div class="evolution-insight">
      <h5>💡 进化趋势</h5>
      <div class="trend-grid">
        <div class="trend-item">
          <div class="trend-icon">📈</div>
          <div class="trend-text">参数量从 1.17 亿增长到万亿级别</div>
        </div>
        <div class="trend-item">
          <div class="trend-icon">🧠</div>
          <div class="trend-text">从文本生成到多模态（图像、音频、视频）</div>
        </div>
        <div class="trend-item">
          <div class="trend-icon">🎯</div>
          <div class="trend-text">上下文窗口从 512 tokens 扩展到 128k+</div>
        </div>
        <div class="trend-item">
          <div class="trend-icon">🌐</div>
          <div class="trend-text">从单语言到多语言，从通用到专业领域</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeModel = ref(0)

const gptModels = ref([
  {
    name: 'GPT-1',
    year: '2018',
    parameters: '1.17 亿',
    paramDetail: '117M',
    context: '512 tokens',
    contextDetail: '约 384 英文单词',
    capability: '文本生成',
    description: 'OpenAI 发布的首个 GPT 模型，证明了生成式预训练的可行性。它采用"预训练 + 微调"范式，在无标注文本上学习语言模式。',
    milestones: [
      '首次验证 Transformer 架构在语言模型中的有效性',
      '引入生成式预训练方法',
      '为后续 GPT 系列奠定基础'
    ]
  },
  {
    name: 'GPT-2',
    year: '2019',
    parameters: '15 亿',
    paramDetail: '1.5B',
    context: '1024 tokens',
    contextDetail: '约 768 英文单词',
    capability: '高质量文本生成',
    description: 'GPT-2 的规模扩大了 13 倍，能够生成连贯、高质量的文本。由于担心滥用，OpenAI 最初只发布了缩小版本，引发广泛争议。',
    milestones: [
      '参数量突破 10 亿级别',
      '展现出惊人的零样本学习能力',
      "引发 AI 安全和滥用的讨论",
      '最终完整版本于 2019 年 11 月发布'
    ]
  },
  {
    name: 'GPT-3',
    year: '2020',
    parameters: '1750 亿',
    paramDetail: '175B',
    context: '2048 tokens',
    contextDetail: '约 1536 英文单词',
    capability: '少样本学习',
    description: 'GPT-3 是当时规模最大的语言模型，展现出强大的少样本和零样本学习能力。它证明了"规模就是一切"的假设，只需通过提示词就能完成各种任务。',
    milestones: [
      '参数量达到 1750 亿，比 GPT-2 增长 116 倍',
      '少样本学习能力震惊学术界',
      '催生了大量基于 API 的应用',
      'OpenAI 开始提供商业 API 服务'
    ]
  },
  {
    name: 'GPT-3.5',
    year: '2022',
    parameters: '未知',
    paramDetail: '估计 2000 亿+',
    context: '4096 tokens',
    contextDetail: '约 3072 英文单词',
    capability: '对话系统',
    description: 'GPT-3.5 在 GPT-3 基础上引入了对话训练和强化学习（RLHF），成为 ChatGPT 的基础模型。它能够进行自然、连贯的多轮对话，是 AI 历史上的重要里程碑。',
    milestones: [
      '引入人类反馈强化学习（RLHF）',
      'ChatGPT 发布，5 天用户破百万',
      '2 个月月活破亿，创历史记录',
      '掀起全球 AI 热潮'
    ]
  },
  {
    name: 'GPT-4',
    year: '2023',
    parameters: '未知',
    paramDetail: '估计 1.8 万亿',
    context: '8192-32768 tokens',
    contextDetail: '最多 50 页文档',
    capability: '多模态智能',
    description: 'GPT-4 是一个多模态大模型，能够处理文本、图像等多种输入。它在各项基准测试中接近人类水平，并在复杂推理、数学、编程等任务上表现出色。',
    milestones: [
      '首个大规模多模态模型',
      '在律师考试、奥数等高难度测试中表现出色',
      '支持更长上下文（最多 32k tokens）',
      '推出 GPT-4 Turbo，速度更快、价格更低'
    ]
  }
])

const selectModel = (index) => {
  activeModel.value = index
}
</script>

<style scoped>
.gpt-evolution-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;
  font-size: 1.5rem;
}

.demo-header p {
  margin: 0;
  color: var(--vp-c-text-2);
  font-size: 0.875rem;
}

.timeline-container {
  position: relative;
  padding: 1rem 0;
  margin-bottom: 2rem;
}

.timeline-track {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--vp-c-divider);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  display: flex;
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.timeline-item:hover {
  opacity: 0.9;
}

.timeline-item.active .marker-dot {
  background: var(--vp-c-brand);
  border-color: var(--vp-c-brand);
}

.timeline-marker {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.marker-dot {
  width: 16px;
  height: 16px;
  background: var(--vp-c-bg);
  border-radius: 50%;
  border: 3px solid var(--vp-c-divider);
  transition: all 0.3s ease;
}

.timeline-content {
  margin-left: 1rem;
  padding: 1rem 1.5rem;
  background: var(--vp-c-bg);
  border-radius: 8px;
  border: 1px solid var(--vp-c-divider);
  flex: 1;
}

.timeline-item.active .timeline-content {
  border-color: var(--vp-c-brand);
  box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.12);
}

.model-year {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vp-c-text-2);
  margin-bottom: 0.25rem;
}

.model-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.model-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--vp-c-text-2);
}

.model-details {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  color: var(--vp-c-text-1);
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--vp-c-divider);
}

.details-header h5 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--vp-c-text-1);
}

.year-badge {
  padding: 0.5rem 1rem;
  background: rgba(var(--vp-c-brand-rgb), 0.12);
  border: 1px solid rgba(var(--vp-c-brand-rgb), 0.2);
  color: var(--vp-c-brand);
  border-radius: 20px;
  font-weight: 600;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.detail-card {
  padding: 1rem;
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  text-align: center;
}

.card-label {
  font-size: 0.75rem;
  color: var(--vp-c-text-2);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.card-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--vp-c-text-1);
  margin-bottom: 0.25rem;
}

.card-note {
  font-size: 0.75rem;
  color: var(--vp-c-text-2);
}

.model-description,
.model-milestones {
  margin-bottom: 1rem;
}

.model-description h6,
.model-milestones h6 {
  margin: 0 0 0.75rem 0;
  color: var(--vp-c-text-1);
}

.model-description p {
  margin: 0;
  line-height: 1.8;
  color: var(--vp-c-text-2);
}

.model-milestones ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.model-milestones li {
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  position: relative;
  line-height: 1.6;
  color: var(--vp-c-text-2);
}

.model-milestones li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--vp-c-green-1, #22c55e);
  font-weight: 700;
}

.evolution-insight {
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  padding: 1.5rem;
  border-radius: 8px;
  color: var(--vp-c-text-1);
}

.evolution-insight h5 {
  margin: 0 0 1rem 0;
  color: var(--vp-c-text-1);
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.trend-item {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}

.trend-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.trend-text {
  font-size: 0.875rem;
  color: var(--vp-c-text-2);
  line-height: 1.5;
}

.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

@media (max-width: 768px) {
  .details-grid {
    grid-template-columns: 1fr;
  }
  .trend-grid {
    grid-template-columns: 1fr;
  }
}
</style>