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

feat: comprehensive documentation and demo updates

Browse Source 
- 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
2026-01-16 19:10:21 +08:00
parent c8567ce23f
commit 73f4788d7e
150 changed files with 19530 additions and 13401 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/image-gen-intro/DiffusionProcessDemo.vue
+57 -31
View File
@@ -21,11 +21,22 @@
</template>
<div class="canvas-container">
<canvas ref="canvasRef" width="300" height="300" class="noise-canvas"></canvas>
<canvas
ref="canvasRef"
width="300"
height="300"
class="noise-canvas"
></canvas>
<div class="step-indicator">
<span class="step-text">Step: {{ currentStep }} / {{ totalSteps }}</span>
<el-progress
:percentage="mode === 'forward' ? (currentStep / totalSteps * 100) : ((totalSteps - currentStep) / totalSteps * 100)"
<span class="step-text"
>Step: {{ currentStep }} / {{ totalSteps }}</span
>
<el-progress
:percentage="
mode === 'forward'
? (currentStep / totalSteps) * 100
: ((totalSteps - currentStep) / totalSteps) * 100
"
:status="mode === 'forward' ? 'exception' : 'success'"
:show-text="false"
:stroke-width="4"
@@ -34,23 +45,33 @@
</div>
<div class="slider-control">
<el-slider
v-model="currentStep"
:min="0"
:max="totalSteps"
<el-slider
v-model="currentStep"
:min="0"
:max="totalSteps"
:format-tooltip="formatTooltip"
@input="draw"
/>
<div class="slider-labels">
<span>{{ mode === 'forward' ? '原图 (Original)' : '纯噪声 (Noise)' }}</span>
<span>{{ mode === 'forward' ? '纯噪声 (Noise)' : '原图 (Original)' }}</span>
<span>{{
mode === 'forward' ? '原图 (Original)' : '纯噪声 (Noise)'
}}</span>
<span>{{
mode === 'forward' ? '纯噪声 (Noise)' : '原图 (Original)'
}}</span>
</div>
</div>
<el-alert
:title="mode === 'forward' ? '训练阶段：破坏数据' : '生成阶段：创造数据'"
:title="
mode === 'forward' ? '训练阶段：破坏数据' : '生成阶段：创造数据'
"
:type="mode === 'forward' ? 'warning' : 'success'"
:description="mode === 'forward' ? 'AI 通过学习如何「一点点加噪」，掌握了噪声的规律。这就像教它把积木推倒。' : 'AI 通过预测并减去噪声，从混沌中还原出图像。这就像它学会了把推倒的积木重新搭好。'"
:description="
mode === 'forward'
? 'AI 通过学习如何「一点点加噪」，掌握了噪声的规律。这就像教它把积木推倒。'
: 'AI 通过预测并减去噪声，从混沌中还原出图像。这就像它学会了把推倒的积木重新搭好。'
"
show-icon
:closable="false"
class="explanation-alert"
@@ -61,7 +82,12 @@
<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { VideoPlay, VideoPause, TopRight, BottomLeft } from '@element-plus/icons-vue'
import {
VideoPlay,
VideoPause,
TopRight,
BottomLeft
} from '@element-plus/icons-vue'
const canvasRef = ref(null)
const mode = ref('reverse')
@@ -77,7 +103,7 @@ const loadBaseImage = () => {
canvas.width = 300
canvas.height = 300
const ctx = canvas.getContext('2d')
// Draw a simple landscape
// Sky
const gradient = ctx.createLinearGradient(0, 0, 0, 300)
@@ -85,13 +111,13 @@ const loadBaseImage = () => {
gradient.addColorStop(1, '#E0F7FA')
ctx.fillStyle = gradient
ctx.fillRect(0, 0, 300, 300)
// Sun
ctx.beginPath()
ctx.arc(240, 60, 30, 0, Math.PI * 2)
ctx.fillStyle = '#FFD700'
ctx.fill()
// Mountains
ctx.beginPath()
ctx.moveTo(0, 300)
@@ -101,7 +127,7 @@ const loadBaseImage = () => {
ctx.lineTo(300, 300)
ctx.fillStyle = '#4CAF50'
ctx.fill()
// House
ctx.fillStyle = '#795548'
ctx.fillRect(50, 220, 60, 60)
@@ -120,7 +146,7 @@ const generateNoise = (width, height) => {
const data = new Uint8ClampedArray(size)
for (let i = 0; i < size; i += 4) {
const val = Math.random() * 255
data[i] = val // R
data[i] = val // R
data[i + 1] = val // G
data[i + 2] = val // B
data[i + 3] = 255 // A
@@ -149,7 +175,7 @@ const draw = () => {
const canvas = canvasRef.value
if (!canvas || !originalImage) return
const ctx = canvas.getContext('2d')
// Calculate noise ratio based on mode and step
// Forward: 0 -> 100 (Clean -> Noisy)
// Reverse: 100 -> 0 (Noisy -> Clean)
@@ -158,18 +184,18 @@ const draw = () => {
// but for UI, we want:
// Forward Mode: Slider 0 (Clean) -> 100 (Noisy)
// Reverse Mode: Slider 0 (Noisy) -> 100 (Clean)
let noiseRatio = 0
if (mode.value === 'forward') {
noiseRatio = currentStep.value / totalSteps
} else {
// In reverse mode, slider 0 means start (Noisy), 100 means end (Clean)
// So noise amount is 1 - slider
noiseRatio = 1 - (currentStep.value / totalSteps)
noiseRatio = 1 - currentStep.value / totalSteps
}
// Non-linear interpolation for better visual effect
// noiseRatio = Math.pow(noiseRatio, 1.5)
// noiseRatio = Math.pow(noiseRatio, 1.5)
const w = canvas.width
const h = canvas.height
@@ -177,20 +203,20 @@ const draw = () => {
const d = output.data
const o = originalImage.data
const n = noiseImage.data
for (let i = 0; i < d.length; i += 4) {
// Simple linear interpolation
// Pixel = (1 - alpha) * Original + alpha * Noise
// Note: This is a simplified diffusion visualization.
// Real diffusion adds noise: x_t = sqrt(alpha_bar) * x_0 + sqrt(1 - alpha_bar) * epsilon
// Using simple blending for visualization
d[i] = o[i] * (1 - noiseRatio) + n[i] * noiseRatio
d[i+1] = o[i+1] * (1 - noiseRatio) + n[i+1] * noiseRatio
d[i+2] = o[i+2] * (1 - noiseRatio) + n[i+2] * noiseRatio
d[i+3] = 255
d[i + 1] = o[i + 1] * (1 - noiseRatio) + n[i + 1] * noiseRatio
d[i + 2] = o[i + 2] * (1 - noiseRatio) + n[i + 2] * noiseRatio
d[i + 3] = 255
}
ctx.putImageData(output, 0, 0)
}
@@ -208,7 +234,7 @@ const startAnimation = () => {
if (currentStep.value >= totalSteps) {
currentStep.value = 0
}
const animate = () => {
if (currentStep.value < totalSteps) {
currentStep.value += 1
@@ -261,7 +287,7 @@ const formatTooltip = (val) => {
.noise-canvas {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
max-width: 100%;
height: auto;
}