feat: 添加多个附录交互式组件和文档更新
- 添加浏览器前端组件：无障碍访问、国际化、实时通信 - 添加 Transformer 注意力机制系列组件 - 更新 Canvas、数据追踪等现有组件 - 修复 ESLint 变量名冲突问题 - 完善相关附录文档
This commit is contained in:
sanbuphy
+124
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="decomp-title">注意力机制的层层拆解</div>
|
||||
|
||||
<!-- 第一层：Multi-Head Attention -->
|
||||
<div class="level-section">
|
||||
<div class="level-label">层级 1：Multi-Head Attention</div>
|
||||
<div class="level-content">
|
||||
<div class="multi-head-box">
|
||||
<div class="head-row">
|
||||
<div v-for="i in 8" :key="i" class="head-item">Head {{ i }}</div>
|
||||
</div>
|
||||
<div class="arrow-down">↓ 拆解</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二层：Single Head -->
|
||||
<div class="level-section">
|
||||
<div class="level-label">层级 2：单个 Attention Head</div>
|
||||
<div class="level-content">
|
||||
<div class="single-head-box">
|
||||
<div class="step-flow">
|
||||
<div class="step">输入 X</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="step">线性变换</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="step">Q, K, V</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="step">Scaled Dot-Product</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="step">输出</div>
|
||||
</div>
|
||||
<div class="arrow-down">↓ 拆解</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三层：Scaled Dot-Product Attention -->
|
||||
<div class="level-section">
|
||||
<div class="level-label">层级 3：Scaled Dot-Product Attention（核心）</div>
|
||||
<div class="level-content">
|
||||
<div class="dot-product-box">
|
||||
<div class="formula-steps">
|
||||
<div class="formula-step">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">计算相似度</div>
|
||||
<div class="step-formula">Score = Q · K<sup>T</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formula-step">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">缩放</div>
|
||||
<div class="step-formula">Score / √d<sub>k</sub></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formula-step">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">归一化</div>
|
||||
<div class="step-formula">Attention Weights = Softmax(Score)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formula-step">
|
||||
<div class="step-num">4</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">加权求和</div>
|
||||
<div class="step-formula">Output = Weights · V</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 组装说明 -->
|
||||
<div class="assembly-note">
|
||||
<div class="note-title">🔧 组装过程</div>
|
||||
<div class="note-content">
|
||||
<span class="note-item">Scaled Dot-Product</span>
|
||||
<span class="note-arrow">→</span>
|
||||
<span class="note-item">单个 Head</span>
|
||||
<span class="note-arrow">→</span>
|
||||
<span class="note-item">Multi-Head（8个并行）</span>
|
||||
<span class="note-arrow">→</span>
|
||||
<span class="note-item">Concat + Linear</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.decomp-title { font-size: 0.9rem; font-weight: bold; color: var(--vp-c-text-1); text-align: center; margin-bottom: 1rem; }
|
||||
.level-section { margin-bottom: 0.8rem; }
|
||||
.level-label { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-brand); background: var(--vp-c-brand-soft); padding: 0.3rem 0.6rem; border-radius: 4px; margin-bottom: 0.5rem; display: inline-block; }
|
||||
.level-content { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
|
||||
.multi-head-box { text-align: center; }
|
||||
.head-row { display: flex; gap: 0.3rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
|
||||
.head-item { font-size: 0.7rem; background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); padding: 0.3rem 0.5rem; border-radius: 3px; color: var(--vp-c-text-2); }
|
||||
.arrow-down { font-size: 0.75rem; color: var(--vp-c-brand); font-weight: bold; margin-top: 0.3rem; }
|
||||
.single-head-box { text-align: center; }
|
||||
.step-flow { display: flex; align-items: center; justify-content: center; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
|
||||
.step { font-size: 0.7rem; background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); padding: 0.3rem 0.5rem; border-radius: 3px; color: var(--vp-c-text-1); font-weight: 600; }
|
||||
.arrow { font-size: 0.75rem; color: var(--vp-c-text-3); }
|
||||
.dot-product-box { }
|
||||
.formula-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
|
||||
@media (max-width: 560px) { .formula-steps { grid-template-columns: 1fr; } }
|
||||
.formula-step { display: flex; gap: 0.4rem; background: var(--vp-c-bg-alt); padding: 0.5rem; border-radius: 4px; }
|
||||
.step-num { width: 24px; height: 24px; background: var(--vp-c-brand); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; flex-shrink: 0; }
|
||||
.step-content { flex: 1; }
|
||||
.step-name { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
|
||||
.step-formula { font-size: 0.7rem; font-family: 'Courier New', monospace; color: var(--vp-c-brand); }
|
||||
.assembly-note { background: var(--vp-c-bg); border: 2px dashed var(--vp-c-brand); border-radius: 6px; padding: 0.8rem; margin-top: 1rem; }
|
||||
.note-title { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.5rem; text-align: center; }
|
||||
.note-content { display: flex; align-items: center; justify-content: center; gap: 0.3rem; flex-wrap: wrap; }
|
||||
.note-item { font-size: 0.7rem; background: var(--vp-c-brand-soft); color: var(--vp-c-brand); padding: 0.25rem 0.5rem; border-radius: 3px; font-weight: 600; }
|
||||
.note-arrow { font-size: 0.75rem; color: var(--vp-c-brand); font-weight: bold; }
|
||||
</style>
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="heads-grid">
|
||||
<div v-for="head in heads" :key="head.id" class="head-card">
|
||||
<div class="head-name">{{ head.name }}</div>
|
||||
<div class="head-desc">{{ head.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary">8 个头从不同角度理解语义，最后拼接融合</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const heads = [
|
||||
{ id: 1, name: '语法头', desc: '主谓宾关系' },
|
||||
{ id: 2, name: '语义头', desc: '词义关联' },
|
||||
{ id: 3, name: '位置头', desc: '距离关系' },
|
||||
{ id: 4, name: '指代头', desc: '代词消解' },
|
||||
{ id: 5, name: '情感头', desc: '情绪倾向' },
|
||||
{ id: 6, name: '实体头', desc: '命名实体' },
|
||||
{ id: 7, name: '修饰头', desc: '定状补' },
|
||||
{ id: 8, name: '全局头', desc: '整体语境' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.heads-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.6rem; }
|
||||
@media (max-width: 720px) { .heads-grid { grid-template-columns: repeat(2, 1fr); } }
|
||||
.head-card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 4px; padding: 0.5rem; text-align: center; }
|
||||
.head-name { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
|
||||
.head-desc { font-size: 0.68rem; color: var(--vp-c-text-2); }
|
||||
.summary { font-size: 0.75rem; color: var(--vp-c-text-2); text-align: center; font-style: italic; }
|
||||
</style>
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="pe-content">
|
||||
<div class="problem">
|
||||
<div class="title">问题：词序很重要</div>
|
||||
<div class="examples">
|
||||
<span class="ex">我爱你</span>
|
||||
<span class="vs">≠</span>
|
||||
<span class="ex">你爱我</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution">
|
||||
<div class="title">解决：位置编码</div>
|
||||
<div class="formula">Token Embedding + Positional Encoding</div>
|
||||
<div class="methods">
|
||||
<div class="method">正弦余弦（Transformer 原始）</div>
|
||||
<div class="method">可学习（BERT、GPT）</div>
|
||||
<div class="method">旋转编码 RoPE（LLaMA）</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.pe-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
|
||||
@media (max-width: 560px) { .pe-content { grid-template-columns: 1fr; } }
|
||||
.problem, .solution { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
|
||||
.title { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.5rem; }
|
||||
.examples { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
|
||||
.ex { font-size: 0.9rem; font-weight: bold; color: var(--vp-c-text-1); }
|
||||
.vs { font-size: 1rem; color: var(--vp-c-brand); }
|
||||
.formula { background: var(--vp-c-brand-soft); border: 1px dashed var(--vp-c-brand); border-radius: 4px; padding: 0.5rem; font-size: 0.75rem; color: var(--vp-c-brand); text-align: center; margin-bottom: 0.5rem; font-family: monospace; }
|
||||
.methods { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.method { font-size: 0.7rem; color: var(--vp-c-text-2); background: var(--vp-c-bg-alt); padding: 0.3rem 0.5rem; border-radius: 3px; }
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="qkv-grid">
|
||||
<div class="qkv-item query">
|
||||
<div class="icon">🔍</div>
|
||||
<div class="name">Query</div>
|
||||
<div class="desc">我想找什么</div>
|
||||
</div>
|
||||
<div class="qkv-item key">
|
||||
<div class="icon">🔑</div>
|
||||
<div class="name">Key</div>
|
||||
<div class="desc">我是什么</div>
|
||||
</div>
|
||||
<div class="qkv-item value">
|
||||
<div class="icon">💎</div>
|
||||
<div class="name">Value</div>
|
||||
<div class="desc">我的内容</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formula">
|
||||
Attention(Q, K, V) = softmax(QK<sup>T</sup> / √d<sub>k</sub>) V
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.qkv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.8rem; }
|
||||
@media (max-width: 560px) { .qkv-grid { grid-template-columns: 1fr; } }
|
||||
.qkv-item { background: var(--vp-c-bg); border: 2px solid; border-radius: 6px; padding: 0.7rem; text-align: center; }
|
||||
.qkv-item.query { border-color: #3b82f6; }
|
||||
.qkv-item.key { border-color: #059669; }
|
||||
.qkv-item.value { border-color: #7c3aed; }
|
||||
.icon { font-size: 1.5rem; margin-bottom: 0.3rem; }
|
||||
.name { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
|
||||
.desc { font-size: 0.7rem; color: var(--vp-c-text-2); }
|
||||
.formula { background: var(--vp-c-bg); border: 1px dashed var(--vp-c-brand); border-radius: 4px; padding: 0.6rem; text-align: center; font-size: 0.85rem; font-family: 'Courier New', monospace; color: var(--vp-c-brand); font-weight: bold; }
|
||||
</style>
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="comparison-grid">
|
||||
<div class="model-col">
|
||||
<div class="model-name">RNN / LSTM</div>
|
||||
<div class="model-desc">顺序处理：词1 → 词2 → 词3</div>
|
||||
<div class="issues">
|
||||
<div class="issue">❌ 长距离依赖衰减</div>
|
||||
<div class="issue">❌ 无法并行训练</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model-col highlight">
|
||||
<div class="model-name">Transformer</div>
|
||||
<div class="model-desc">并行处理：所有词同时计算</div>
|
||||
<div class="benefits">
|
||||
<div class="benefit">✅ 全局注意力</div>
|
||||
<div class="benefit">✅ 高效并行</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
|
||||
@media (max-width: 560px) { .comparison-grid { grid-template-columns: 1fr; } }
|
||||
.model-col { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
|
||||
.model-col.highlight { border-color: var(--vp-c-brand); background: linear-gradient(135deg, var(--vp-c-bg), var(--vp-c-brand-soft)); }
|
||||
.model-name { font-size: 0.85rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.4rem; }
|
||||
.model-desc { font-size: 0.75rem; color: var(--vp-c-text-2); margin-bottom: 0.5rem; }
|
||||
.issues, .benefits { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.issue, .benefit { font-size: 0.7rem; }
|
||||
.issue { color: #dc2626; }
|
||||
.benefit { color: #059669; }
|
||||
</style>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="attention-demo">
|
||||
<div class="demo-title">自注意力示例：「他」关注「小明」</div>
|
||||
<div class="sentence">小明 把 苹果 给了 <span class="focus">他</span> 的 母亲</div>
|
||||
<div class="attention-bar">
|
||||
<div class="bar-item" v-for="item in weights" :key="item.word">
|
||||
<span class="word">{{ item.word }}</span>
|
||||
<div class="bar" :style="{ width: item.w * 100 + '%', background: getColor(item.w) }"></div>
|
||||
<span class="pct">{{ Math.round(item.w * 100) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">「他」把 65% 注意力投向「小明」，识别代词指代关系</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const weights = [
|
||||
{ word: '小明', w: 0.65 },
|
||||
{ word: '把', w: 0.05 },
|
||||
{ word: '苹果', w: 0.10 },
|
||||
{ word: '给了', w: 0.10 },
|
||||
{ word: '他', w: 0.05 },
|
||||
{ word: '的', w: 0.03 },
|
||||
{ word: '母亲', w: 0.02 },
|
||||
]
|
||||
|
||||
const getColor = (v) => v > 0.5 ? '#dc2626' : v > 0.15 ? '#d97706' : '#059669'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.attention-demo { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.8rem; }
|
||||
.demo-title { font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-2); margin-bottom: 0.5rem; }
|
||||
.sentence { font-size: 0.9rem; color: var(--vp-c-text-1); margin-bottom: 0.6rem; text-align: center; }
|
||||
.sentence .focus { color: var(--vp-c-brand); font-weight: bold; background: var(--vp-c-brand-soft); padding: 0.1rem 0.3rem; border-radius: 3px; }
|
||||
.attention-bar { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
|
||||
.bar-item { display: flex; align-items: center; gap: 0.3rem; }
|
||||
.word { width: 35px; text-align: right; font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-2); }
|
||||
.bar { height: 10px; border-radius: 5px; min-width: 2px; }
|
||||
.pct { font-size: 0.65rem; color: var(--vp-c-text-3); width: 30px; }
|
||||
.caption { font-size: 0.7rem; color: var(--vp-c-text-3); text-align: center; font-style: italic; }
|
||||
</style>
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="arch-layout">
|
||||
<!-- Encoder 侧 -->
|
||||
<div class="side-col">
|
||||
<div class="side-header encoder-header">Encoder（编码器）</div>
|
||||
<div class="layer-block">
|
||||
<div class="block-label">× N 层</div>
|
||||
<div class="component-box">
|
||||
<div class="comp-name">Multi-Head Self-Attention</div>
|
||||
<div class="comp-desc">捕获输入序列内部依赖</div>
|
||||
</div>
|
||||
<div class="norm-box">Add & Norm</div>
|
||||
<div class="component-box">
|
||||
<div class="comp-name">Feed Forward Network</div>
|
||||
<div class="comp-desc">位置独立的非线性变换</div>
|
||||
</div>
|
||||
<div class="norm-box">Add & Norm</div>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<div class="input-label">输入</div>
|
||||
<div class="input-desc">Token Embedding + Positional Encoding</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Decoder 侧 -->
|
||||
<div class="side-col">
|
||||
<div class="side-header decoder-header">Decoder（解码器）</div>
|
||||
<div class="output-box">
|
||||
<div class="output-label">输出</div>
|
||||
<div class="output-desc">Linear + Softmax → 概率分布</div>
|
||||
</div>
|
||||
<div class="layer-block">
|
||||
<div class="block-label">× N 层</div>
|
||||
<div class="component-box">
|
||||
<div class="comp-name">Masked Self-Attention</div>
|
||||
<div class="comp-desc">只看当前位置之前的词</div>
|
||||
</div>
|
||||
<div class="norm-box">Add & Norm</div>
|
||||
<div class="component-box cross">
|
||||
<div class="comp-name">Cross-Attention</div>
|
||||
<div class="comp-desc">关注 Encoder 的输出</div>
|
||||
</div>
|
||||
<div class="norm-box">Add & Norm</div>
|
||||
<div class="component-box">
|
||||
<div class="comp-name">Feed Forward Network</div>
|
||||
<div class="comp-desc">位置独立的非线性变换</div>
|
||||
</div>
|
||||
<div class="norm-box">Add & Norm</div>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<div class="input-label">输出（移位）</div>
|
||||
<div class="input-desc">Token Embedding + Positional Encoding</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.arch-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||
@media (max-width: 720px) { .arch-layout { grid-template-columns: 1fr; } }
|
||||
.side-col { display: flex; flex-direction: column; gap: 0.6rem; }
|
||||
.side-header { font-size: 0.85rem; font-weight: bold; text-align: center; padding: 0.5rem; border-radius: 6px; color: white; }
|
||||
.encoder-header { background: linear-gradient(135deg, #3b82f6, #2563eb); }
|
||||
.decoder-header { background: linear-gradient(135deg, #7c3aed, #6366f1); }
|
||||
.layer-block { background: var(--vp-c-bg); border: 2px solid var(--vp-c-divider); border-radius: 6px; padding: 0.7rem; position: relative; }
|
||||
.block-label { position: absolute; top: 0.3rem; right: 0.3rem; font-size: 0.65rem; color: var(--vp-c-text-3); background: var(--vp-c-bg-soft); padding: 0.15rem 0.4rem; border-radius: 3px; font-weight: bold; }
|
||||
.component-box { background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); border-radius: 4px; padding: 0.5rem; margin-bottom: 0.4rem; }
|
||||
.component-box.cross { border-color: #d97706; background: linear-gradient(135deg, var(--vp-c-bg-alt), #fef3c7); }
|
||||
.comp-name { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.2rem; }
|
||||
.comp-desc { font-size: 0.68rem; color: var(--vp-c-text-2); }
|
||||
.norm-box { font-size: 0.68rem; color: var(--vp-c-text-3); text-align: center; padding: 0.25rem; background: var(--vp-c-bg-soft); border-radius: 3px; margin-bottom: 0.4rem; }
|
||||
.input-box, .output-box { background: var(--vp-c-brand-soft); border: 1px solid var(--vp-c-brand); border-radius: 4px; padding: 0.5rem; text-align: center; }
|
||||
.input-label, .output-label { font-size: 0.75rem; font-weight: bold; color: var(--vp-c-brand); margin-bottom: 0.2rem; }
|
||||
.input-desc, .output-desc { font-size: 0.68rem; color: var(--vp-c-text-2); }
|
||||
</style>
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="quick-start-grid">
|
||||
<div class="qs-item" v-for="item in items" :key="item.icon">
|
||||
<div class="qs-icon">{{ item.icon }}</div>
|
||||
<div class="qs-title">{{ item.title }}</div>
|
||||
<div class="qs-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const items = [
|
||||
{ icon: '🔄', title: 'RNN 的困境', desc: '顺序处理，长距离依赖衰减' },
|
||||
{ icon: '⚡', title: 'Transformer 突破', desc: '并行计算，全局注意力' },
|
||||
{ icon: '🎯', title: '注意力机制', desc: '动态关注重要信息' },
|
||||
{ icon: '🚀', title: '大模型基石', desc: 'GPT、BERT 的核心架构' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
|
||||
.quick-start-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
|
||||
@media (max-width: 720px) { .quick-start-grid { grid-template-columns: repeat(2, 1fr); } }
|
||||
.qs-item { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 1rem; text-align: center; }
|
||||
.qs-icon { font-size: 2rem; margin-bottom: 0.5rem; }
|
||||
.qs-title { font-size: 0.85rem; font-weight: bold; color: var(--vp-c-text-1); margin-bottom: 0.3rem; }
|
||||
.qs-desc { font-size: 0.72rem; color: var(--vp-c-text-2); line-height: 1.4; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user