feat: comprehensive documentation and demo updates
- Update READMEs and docs across multiple languages - Enhance interactive demos for Agent, LLM, VLM, Audio, Image Gen, Terminal, and Web Basics - Add new appendix sections for Database and IDE intros - Update VitePress config, theme, and utility scripts - Clean up unused assets and components
This commit is contained in:
sanbuphy
@@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<div class="feature-alignment-demo">
|
||||
<div class="header">
|
||||
<div class="title">阶段一：特征对齐 (Feature Alignment / Pre-training)</div>
|
||||
<div class="title">
|
||||
阶段一：特征对齐 (Feature Alignment / Pre-training)
|
||||
</div>
|
||||
<div class="desc">
|
||||
目标：让 Projector 学会“翻译”图像语言。
|
||||
<br>做法：冻结 ViT 和 LLM，只训练 Projector。
|
||||
<br />做法：冻结 ViT 和 LLM，只训练 Projector。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,11 +15,11 @@
|
||||
<div class="data-column">
|
||||
<div class="data-item image-data">
|
||||
<div class="data-icon">🖼️</div>
|
||||
<div class="data-label">图片<br>(猫)</div>
|
||||
<div class="data-label">图片<br />(猫)</div>
|
||||
</div>
|
||||
<div class="data-item text-data">
|
||||
<div class="data-icon">📝</div>
|
||||
<div class="data-label">标题<br>("一只猫")</div>
|
||||
<div class="data-label">标题<br />("一只猫")</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -35,7 +37,7 @@
|
||||
<div class="block-icon">👁️</div>
|
||||
<div class="block-name">ViT</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="arrow-small">➜</div>
|
||||
|
||||
<div class="model-block training">
|
||||
@@ -64,7 +66,7 @@
|
||||
<div class="vector-icon">🟢</div>
|
||||
<div class="vector-label">向量 V</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="loss-connection">
|
||||
<div class="loss-line"></div>
|
||||
<div class="loss-box" :class="{ active: isCalculatingLoss }">
|
||||
@@ -107,21 +109,31 @@ const nextStep = () => {
|
||||
|
||||
const buttonText = computed(() => {
|
||||
switch (step.value) {
|
||||
case 0: return '开始训练演示'
|
||||
case 1: return '下一步：计算 Loss'
|
||||
case 2: return '下一步：反向传播'
|
||||
case 3: return '完成并重置'
|
||||
default: return '开始'
|
||||
case 0:
|
||||
return '开始训练演示'
|
||||
case 1:
|
||||
return '下一步：计算 Loss'
|
||||
case 2:
|
||||
return '下一步：反向传播'
|
||||
case 3:
|
||||
return '完成并重置'
|
||||
default:
|
||||
return '开始'
|
||||
}
|
||||
})
|
||||
|
||||
const currentStepDesc = computed(() => {
|
||||
switch (step.value) {
|
||||
case 0: return '准备就绪。点击按钮开始模拟一次训练迭代。'
|
||||
case 1: return '前向传播：图片经过 ViT (冻结) 和 Projector (训练) 得到向量 V；文本经过 LLM (冻结) 得到向量 T。'
|
||||
case 2: return '计算 Loss：比较向量 V 和向量 T 的相似度。目标是让它们尽可能接近。'
|
||||
case 3: return '反向传播：根据 Loss 更新 Projector 的参数。注意 ViT 和 LLM 不会更新！'
|
||||
default: return ''
|
||||
case 0:
|
||||
return '准备就绪。点击按钮开始模拟一次训练迭代。'
|
||||
case 1:
|
||||
return '前向传播：图片经过 ViT (冻结) 和 Projector (训练) 得到向量 V；文本经过 LLM (冻结) 得到向量 T。'
|
||||
case 2:
|
||||
return '计算 Loss：比较向量 V 和向量 T 的相似度。目标是让它们尽可能接近。'
|
||||
case 3:
|
||||
return '反向传播：根据 Loss 更新 Projector 的参数。注意 ViT 和 LLM 不会更新！'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
@@ -135,7 +147,8 @@ const isCalculatingLoss = computed(() => step.value === 2)
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -184,8 +197,14 @@ const isCalculatingLoss = computed(() => step.value === 2)
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.data-icon { font-size: 24px; }
|
||||
.data-label { font-size: 10px; text-align: center; margin-top: 4px; }
|
||||
.data-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
.data-label {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Arrow Column */
|
||||
.arrow-column {
|
||||
@@ -200,9 +219,9 @@ const isCalculatingLoss = computed(() => step.value === 2)
|
||||
.model-column {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-template-areas:
|
||||
"vit arrow proj"
|
||||
"llm llm llm";
|
||||
grid-template-areas:
|
||||
'vit arrow proj'
|
||||
'llm llm llm';
|
||||
gap: 10px;
|
||||
row-gap: 30px;
|
||||
align-items: center;
|
||||
@@ -262,8 +281,14 @@ const isCalculatingLoss = computed(() => step.value === 2)
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.block-icon { font-size: 20px; margin-bottom: 4px; }
|
||||
.block-name { font-size: 12px; font-weight: bold; }
|
||||
.block-icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.block-name {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.arrow-small {
|
||||
grid-area: arrow;
|
||||
@@ -316,8 +341,15 @@ const isCalculatingLoss = computed(() => step.value === 2)
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.loss-label { font-size: 12px; font-weight: bold; color: var(--vp-c-danger); }
|
||||
.loss-desc { font-size: 10px; color: var(--vp-c-text-2); }
|
||||
.loss-label {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-danger);
|
||||
}
|
||||
.loss-desc {
|
||||
font-size: 10px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
.controls {
|
||||
@@ -356,9 +388,15 @@ const isCalculatingLoss = computed(() => step.value === 2)
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(var(--vp-c-brand-rgb), 0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(var(--vp-c-brand-rgb), 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(var(--vp-c-brand-rgb), 0); }
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(var(--vp-c-brand-rgb), 0.4);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(var(--vp-c-brand-rgb), 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(var(--vp-c-brand-rgb), 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@@ -388,4 +426,4 @@ const isCalculatingLoss = computed(() => step.value === 2)
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user