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/AttentionMechanismDemo.vue
+251
View File
@@ -0,0 +1,251 @@
<template>
<div class="attention-mechanism-demo">
<div class="demo-header">
<h4>👁️ 注意力机制演示</h4>
<p>点击词语，观察它如何"关注"句子中的其他词</p>
</div>
<div class="sentence-container">
<div class="sentence">
<span
v-for="(word, index) in sentence"
:key="index"
:class="['word-token', { active: activeIndex === index, source: activeIndex === index }]"
@click="selectWord(index)"
>
{{ word }}
</span>
</div>
<div class="attention-heatmap">
<transition-group name="fade">
<div
v-for="(attention, index) in attentionWeights"
:key="index"
v-show="activeIndex !== null"
:class="['attention-bar', { highlight: attention.weight > 0.5 }]"
:style="{ width: (attention.weight * 100) + '%', opacity: activeIndex !== null ? 1 : 0 }"
>
<span class="attention-label">{{ attention.word }}: {{ (attention.weight * 100).toFixed(0) }}%</span>
</div>
</transition-group>
</div>
</div>
<div class="explanation-panel">
<div v-if="activeIndex !== null" class="explanation-content">
<h5>当前词: "{{ sentence[activeIndex] }}"</h5>
<p><strong>注意力权重:</strong></p>
<ul>
<li v-for="(item, index) in attentionWeights" :key="index">
"{{ item.word }}" - {{ (item.weight * 100).toFixed(0) }}% 的关注度
</li>
</ul>
<p class="insight">
💡 <strong>关键洞察:</strong> {{ getInsight(activeIndex) }}
</p>
</div>
<div v-else class="placeholder">
👆 点击句子中的任意词语开始
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const sentence = ref(['小明', '把', '苹果', '给了', '他', '的', '母亲'])
const activeIndex = ref(null)
// 注意力权重矩阵（模拟）
const attentionMatrix = {
0: [0.15, 0.05, 0.60, 0.05, 0.05, 0.05, 0.05], // 小明 主要关注 苹果、他
1: [0.10, 0.10, 0.40, 0.30, 0.05, 0.03, 0.02], // 把 主要关注 苹果、给了
2: [0.50, 0.10, 0.15, 0.15, 0.05, 0.03, 0.02], // 苹果 主要关注 小明
3: [0.10, 0.10, 0.35, 0.15, 0.20, 0.05, 0.05], // 给了 主要关注 苹果、他
4: [0.65, 0.05, 0.10, 0.10, 0.05, 0.03, 0.02], // 他 主要关注 小明
5: [0.08, 0.05, 0.07, 0.08, 0.62, 0.05, 0.05], // 的 主要关注 他
6: [0.25, 0.10, 0.15, 0.15, 0.20, 0.10, 0.05] // 母亲 关注多个词
}
const insights = {
0: '当模型处理"小明"时，它最关注"苹果"（60%），因为这表明是"谁"拥有苹果。',
1: '"把"是介词，模型关注"苹果"和"给了"，理解动作的对象和方向。',
2: '"苹果"作为宾语，主要关注主语"小明"，确定归属关系。',
3: '"给了"关注"苹果"和"他"，理解传递动作的对象。',
4: '"他"最关注"小明"（65%），因为"他"指代的就是"小明"！',
5: '"的"连接"他"和"母亲"，主要关注"他"（62%）。',
6: '"母亲"作为句末宾语，关注前面的多个词语来理解完整语境。'
}
const attentionWeights = computed(() => {
if (activeIndex.value === null) return []
return sentence.value.map((word, index) => ({
word,
weight: attentionMatrix[activeIndex.value][index]
}))
})
const selectWord = (index) => {
activeIndex.value = index
}
const getInsight = (index) => {
return insights[index] || '模型正在理解这个词的上下文关系。'
}
</script>
<style scoped>
.attention-mechanism-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: 1.5rem;
}
.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;
}
.sentence-container {
background: var(--vp-c-bg);
padding: 2rem;
border-radius: 8px;
border: 1px solid var(--vp-c-divider);
margin-bottom: 1.5rem;
}
.sentence {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 2rem;
}
.word-token {
padding: 0.5rem 1rem;
background: var(--vp-c-bg-alt);
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
color: var(--vp-c-text-1);
user-select: none;
border: 1px solid var(--vp-c-divider);
}
.word-token:hover {
border-color: var(--vp-c-brand);
}
.word-token.active {
background: var(--vp-c-brand);
border-color: var(--vp-c-brand);
color: var(--vp-c-bg);
}
.attention-heatmap {
min-height: 150px;
}
.attention-bar {
margin-bottom: 0.75rem;
padding: 0.5rem 1rem;
background: rgba(var(--vp-c-brand-rgb), 0.2);
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.25);
border-radius: 4px;
color: var(--vp-c-text-1);
font-size: 0.875rem;
font-weight: 600;
transition: all 0.5s ease;
}
.attention-bar.highlight {
background: rgba(var(--vp-c-brand-rgb), 0.35);
border-color: rgba(var(--vp-c-brand-rgb), 0.4);
}
.attention-label {
white-space: nowrap;
}
.explanation-panel {
background: var(--vp-c-bg);
padding: 1.5rem;
border-radius: 8px;
border: 1px solid var(--vp-c-divider);
}
.explanation-content h5 {
margin: 0 0 1rem 0;
color: var(--vp-c-text-1);
font-size: 1.25rem;
}
.explanation-content p {
margin-bottom: 0.75rem;
color: var(--vp-c-text-2);
line-height: 1.6;
}
.explanation-content ul {
list-style: none;
padding: 0;
margin: 0 0 1rem 0;
}
.explanation-content li {
padding: 0.5rem;
background: var(--vp-c-bg-soft);
margin-bottom: 0.5rem;
border-radius: 4px;
border-left: 3px solid var(--vp-c-brand);
font-size: 0.875rem;
color: var(--vp-c-text-1);
}
.insight {
padding: 1rem;
background: rgba(var(--vp-c-brand-rgb), 0.08);
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.15);
border-radius: 6px;
color: var(--vp-c-text-1);
line-height: 1.6;
}
.placeholder {
text-align: center;
padding: 2rem;
color: var(--vp-c-text-2);
font-size: 1.125rem;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: translateX(-20px);
}
</style>