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

feat(ai-protocols): add MCP and A2A protocol demos and documentation

Browse Source 
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
2026-02-22 18:26:19 +08:00
parent 4b83a4c23e
commit e5a5b9df5b
31 changed files with 5093 additions and 5333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue
+42 -320
View File
@@ -1,332 +1,54 @@
<template>
<div class="backpropagation-demo">
<el-card shadow="hover">
<template #header>
<div class="card-header">
<h4>🔄 反向传播演示</h4>
<p class="subtitle">
观察神经网络如何通过误差反向调整权重
</p>
</div>
</template>
<div class="demo-content">
<div class="network-view">
<svg
class="network-svg"
viewBox="0 0 600 300"
>
<!-- Layers visualization -->
<g
v-for="(layer, lIndex) in 3"
:key="lIndex"
>
<text
:x="100 + lIndex * 200"
y="20"
text-anchor="middle"
class="layer-label"
fill="currentColor"
>
{{
lIndex === 0 ? '输入层' : lIndex === 1 ? '隐藏层' : '输出层'
}}
</text>
<circle
v-for="n in 3"
:key="`${lIndex}-${n}`"
:cx="100 + lIndex * 200"
:cy="60 + n * 70"
:r="25"
:class="['neuron', getNeuronClass(lIndex, n)]"
/>
</g>
<!-- Connections with error flow -->
<line
v-for="conn in connections"
:key="conn.id"
:x1="conn.x1"
:y1="conn.y1"
:x2="conn.x2"
:y2="conn.y2"
:stroke="conn.color"
:stroke-width="conn.width"
:opacity="conn.opacity"
class="connection"
/>
</svg>
</div>
<el-divider />
<div class="controls-panel">
<el-steps
:active="currentStep"
align-center
finish-status="success"
>
<el-step
v-for="(step, index) in steps"
:key="index"
:title="step"
/>
</el-steps>
<div class="error-display mt-4">
<div class="flex justify-between mb-2">
<span class="text-sm">误差 (Loss)</span>
<span class="text-sm font-bold">{{ errorValue.toFixed(4) }}</span>
</div>
<el-progress
:percentage="Math.round(errorValue * 100)"
:color="customColors"
:striped="currentStep === 2"
:striped-flow="currentStep === 2"
/>
</div>
<el-alert
:title="explanations[currentStep]"
type="info"
show-icon
:closable="false"
class="mt-4"
/>
<div class="action-buttons mt-4 flex justify-center gap-4">
<el-button
:disabled="currentStep === 0"
@click="resetDemo"
>
重置
</el-button>
<el-button
type="primary"
:disabled="currentStep >= 4"
@click="nextStep"
>
{{ currentStep < 4 ? '下一步' : '完成' }}
</el-button>
</div>
</div>
<div class="demo-card">
<div class="bp-flow">
<div class="step-block" v-for="(step, i) in steps" :key="i" :style="{ borderTopColor: step.color }">
<div class="step-num" :style="{ background: step.color }">{{ i + 1 }}</div>
<div class="step-icon">{{ step.icon }}</div>
<div class="step-name">{{ step.name }}</div>
<div class="step-desc">{{ step.desc }}</div>
</div>
</el-card>
</div>
<div class="loss-visual">
<div class="loss-label">Loss（误差）随训练轮次下降：</div>
<svg viewBox="0 0 300 60" class="loss-svg">
<polyline :points="lossPoints" fill="none" stroke="var(--vp-c-brand)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<text x="5" y="10" class="ax">高</text>
<text x="5" y="56" class="ax">低</text>
<text x="220" y="56" class="ax">训练轮次 →</text>
</svg>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
const currentStep = ref(0)
const errorValue = ref(0.95)
const steps = ['前向传播', '计算误差', '反向传播', '更新权重']
const explanations = [
'输入数据通过各层传递，得到预测输出。就像学生做完了一套试卷。',
'对比预测值和真实值，计算误差。就像老师批改试卷，算出得了多少分（错得有多离谱）。',
'将误差从输出层反向传递到各层。就像老师把错题反馈给学生，告诉他是哪一步思路错了。',
'根据误差梯度调整每个神经元的权重。学生根据反馈修正自己的理解（权重），下次就能做对了。',
'演示完成！通过不断重复这个过程，网络就学会了任务。'
const steps = [
{ icon: '➡️', name: '前向传播', desc: '数据流过网络，得出预测', color: '#3b82f6' },
{ icon: '📐', name: '计算误差', desc: '预测值 vs 正确答案，算 Loss', color: '#d97706' },
{ icon: '⬅️', name: '反向传播', desc: '逐层追溯每个权重的"责任"', color: '#dc2626' },
{ icon: '⚙️', name: '更新权重', desc: '按责任微调，减少下次误差', color: '#059669' },
]
const customColors = [
{ color: '#67c23a', percentage: 20 },
{ color: '#e6a23c', percentage: 50 },
{ color: '#f56c6c', percentage: 100 }
]
const connections = ref([])
// Generate initial connections
const initConnections = () => {
const conns = []
// Input -> Hidden
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 3; j++) {
conns.push({
id: `i${i}-h${j}`,
x1: 100,
y1: 60 + i * 70,
x2: 300,
y2: 60 + j * 70,
width: 2,
color: '#dcdfe6',
opacity: 0.5
})
}
const lossPoints = (() => {
const pts = []
for (let i = 0; i <= 50; i++) {
const x = 20 + i * 5.2
const y = 52 - 44 * Math.exp(-i * 0.09) + Math.sin(i * 0.7) * 1
pts.push(`${x},${y}`)
}
// Hidden -> Output
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 3; j++) {
conns.push({
id: `h${i}-o${j}`,
x1: 300,
y1: 60 + i * 70,
x2: 500,
y2: 60 + j * 70,
width: 2,
color: '#dcdfe6',
opacity: 0.5
})
}
}
connections.value = conns
}
const getNeuronClass = (layerIndex, neuronIndex) => {
if (currentStep.value === 0) return 'active' // Forward
if (currentStep.value === 2) {
// Backward
if (layerIndex === 2) return 'error-source'
if (layerIndex === 1) return 'error-passing'
}
if (currentStep.value === 3) return 'updating' // Update
return ''
}
const nextStep = () => {
if (currentStep.value >= 4) return
currentStep.value++
if (currentStep.value === 1) {
// Calculate Error
// Visual effect only
} else if (currentStep.value === 2) {
// Backprop: highlight connections red
connections.value.forEach((c) => {
c.color = '#f56c6c'
c.width = 4
c.opacity = 1
})
} else if (currentStep.value === 3) {
// Update weights: error drops
const reduceError = setInterval(() => {
if (errorValue.value > 0.1) {
errorValue.value -= 0.05
} else {
clearInterval(reduceError)
}
}, 50)
connections.value.forEach((c) => {
c.color = '#67c23a'
c.width = 2
c.opacity = 0.8
})
}
}
const resetDemo = () => {
currentStep.value = 0
errorValue.value = 0.95
initConnections()
}
onMounted(() => {
initConnections()
})
return pts.join(' ')
})()
</script>
<style scoped>
.backpropagation-demo {
margin: 20px 0;
}
.card-header h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.subtitle {
font-size: 13px;
color: var(--vp-c-text-2);
margin: 4px 0 0;
}
.network-view {
display: flex;
justify-content: center;
background-color: var(--vp-c-bg-alt);
border-radius: 6px;
padding: 10px;
}
.network-svg {
width: 100%;
max-width: 600px;
height: auto;
}
.layer-label {
font-size: 14px;
font-weight: bold;
fill: var(--vp-c-text-2);
}
.neuron {
fill: var(--vp-c-bg);
stroke: var(--vp-c-text-2);
stroke-width: 2;
transition: all 0.5s;
}
.neuron.active {
fill: var(--el-color-primary-light-9);
stroke: var(--el-color-primary);
}
.neuron.error-source {
fill: var(--el-color-danger-light-9);
stroke: var(--el-color-danger);
filter: drop-shadow(0 0 5px var(--el-color-danger));
}
.neuron.error-passing {
fill: var(--el-color-warning-light-9);
stroke: var(--el-color-warning);
}
.neuron.updating {
fill: var(--el-color-success-light-9);
stroke: var(--el-color-success);
r: 28; /* Pulse effect */
}
.connection {
transition: all 0.5s;
}
.mt-4 {
margin-top: 16px;
}
.mb-2 {
margin-bottom: 8px;
}
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.gap-4 {
gap: 16px;
}
.text-sm {
font-size: 14px;
}
.font-bold {
font-weight: bold;
}
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
.bp-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.8rem; }
@media (max-width: 600px) { .bp-flow { grid-template-columns: repeat(2, 1fr); } }
.step-block { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-top: 3px solid; border-radius: 6px; padding: 0.7rem 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; }
.step-num { width: 16px; height: 16px; border-radius: 50%; color: white; font-size: 0.6rem; font-weight: bold; display: flex; align-items: center; justify-content: center; }
.step-icon { font-size: 1.2rem; }
.step-name { font-weight: bold; font-size: 0.78rem; }
.step-desc { font-size: 0.68rem; color: var(--vp-c-text-2); line-height: 1.3; }
.loss-visual { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.7rem; }
.loss-label { font-size: 0.75rem; color: var(--vp-c-text-2); margin-bottom: 0.3rem; }
.loss-svg { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
.ax { font-size: 6px; fill: var(--vp-c-text-3); }
</style>