feat: save current work to dev branch
This commit is contained in:
sanbuphy
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<div class="flow-matching-demo">
|
||||
<el-card shadow="never">
|
||||
<div class="controls">
|
||||
<el-button type="primary" @click="startAnimation" :disabled="isPlaying">
|
||||
<el-icon><VideoPlay /></el-icon> 开始对比演示 (Start Demo)
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="comparison-grid">
|
||||
<!-- Diffusion -->
|
||||
<div class="viz-panel">
|
||||
<div class="panel-header">
|
||||
<el-icon color="#F56C6C"><RefreshLeft /></el-icon>
|
||||
<span>Diffusion (扩散模型)</span>
|
||||
</div>
|
||||
<div class="canvas-wrapper">
|
||||
<canvas ref="diffCanvasRef" width="300" height="200"></canvas>
|
||||
<div class="labels">
|
||||
<span class="label-noise">噪声 (Noise)</span>
|
||||
<span class="label-img">图像 (Image)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-box">
|
||||
<el-statistic title="步数 (Steps)" :value="diffSteps" />
|
||||
<el-tag type="danger">路径弯曲 (Curved)</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flow Matching -->
|
||||
<div class="viz-panel">
|
||||
<div class="panel-header">
|
||||
<el-icon color="#67C23A"><Right /></el-icon>
|
||||
<span>Flow Matching (流匹配)</span>
|
||||
</div>
|
||||
<div class="canvas-wrapper">
|
||||
<canvas ref="flowCanvasRef" width="300" height="200"></canvas>
|
||||
<div class="labels">
|
||||
<span class="label-noise">噪声 (Noise)</span>
|
||||
<span class="label-img">图像 (Image)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-box">
|
||||
<el-statistic title="步数 (Steps)" :value="flowSteps" />
|
||||
<el-tag type="success">路径直线 (Straight)</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<el-alert
|
||||
title="为什么 Flow Matching 更快？"
|
||||
type="success"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template #default>
|
||||
<p>
|
||||
<strong>Diffusion</strong> 就像在迷雾中摸索，路径充满了随机性，需要走很多弯路（步数多）才能到达终点。
|
||||
<br>
|
||||
<strong>Flow Matching</strong> 就像使用了 GPS 导航，直接找到了从噪声到图像的<strong>直线最优路径 (Optimal Transport)</strong>，因此只需要极少的步数。
|
||||
</p>
|
||||
</template>
|
||||
</el-alert>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { VideoPlay, RefreshLeft, Right } from '@element-plus/icons-vue'
|
||||
|
||||
const diffCanvasRef = ref(null)
|
||||
const flowCanvasRef = ref(null)
|
||||
const isPlaying = ref(false)
|
||||
const diffSteps = ref(0)
|
||||
const flowSteps = ref(0)
|
||||
|
||||
let animationFrame = null
|
||||
|
||||
// Animation State
|
||||
let diffProgress = 0
|
||||
let flowProgress = 0
|
||||
const diffSpeed = 0.005 // Slow
|
||||
const flowSpeed = 0.02 // Fast
|
||||
|
||||
// Particles
|
||||
const particles = []
|
||||
|
||||
onMounted(() => {
|
||||
drawStatic(diffCanvasRef.value, 'curve')
|
||||
drawStatic(flowCanvasRef.value, 'line')
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopAnimation()
|
||||
})
|
||||
|
||||
const startAnimation = () => {
|
||||
if (isPlaying.value) return
|
||||
isPlaying.value = true
|
||||
diffProgress = 0
|
||||
flowProgress = 0
|
||||
diffSteps.value = 0
|
||||
flowSteps.value = 0
|
||||
|
||||
animate()
|
||||
}
|
||||
|
||||
const stopAnimation = () => {
|
||||
isPlaying.value = false
|
||||
if (animationFrame) {
|
||||
cancelAnimationFrame(animationFrame)
|
||||
animationFrame = null
|
||||
}
|
||||
}
|
||||
|
||||
const animate = () => {
|
||||
let finished = 0
|
||||
|
||||
// Update Diffusion
|
||||
if (diffProgress < 1) {
|
||||
diffProgress += diffSpeed
|
||||
diffSteps.value = Math.floor(diffProgress * 50) // Simulate 50 steps
|
||||
drawFrame(diffCanvasRef.value, diffProgress, 'curve')
|
||||
} else {
|
||||
diffSteps.value = 50
|
||||
drawFrame(diffCanvasRef.value, 1, 'curve')
|
||||
finished++
|
||||
}
|
||||
|
||||
// Update Flow
|
||||
if (flowProgress < 1) {
|
||||
flowProgress += flowSpeed
|
||||
flowSteps.value = Math.floor(flowProgress * 8) // Simulate 8 steps
|
||||
drawFrame(flowCanvasRef.value, flowProgress, 'line')
|
||||
} else {
|
||||
flowSteps.value = 8
|
||||
drawFrame(flowCanvasRef.value, 1, 'line')
|
||||
finished++
|
||||
}
|
||||
|
||||
if (finished < 2) {
|
||||
animationFrame = requestAnimationFrame(animate)
|
||||
} else {
|
||||
isPlaying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const drawStatic = (canvas, type) => {
|
||||
if (!canvas) return
|
||||
const ctx = canvas.getContext('2d')
|
||||
const w = canvas.width
|
||||
const h = canvas.height
|
||||
|
||||
ctx.clearRect(0, 0, w, h)
|
||||
drawBackground(ctx, w, h)
|
||||
drawPath(ctx, w, h, type, false)
|
||||
drawEndpoints(ctx, w, h)
|
||||
}
|
||||
|
||||
const drawFrame = (canvas, progress, type) => {
|
||||
if (!canvas) return
|
||||
const ctx = canvas.getContext('2d')
|
||||
const w = canvas.width
|
||||
const h = canvas.height
|
||||
|
||||
ctx.clearRect(0, 0, w, h)
|
||||
drawBackground(ctx, w, h)
|
||||
drawPath(ctx, w, h, type, true) // active path
|
||||
drawEndpoints(ctx, w, h)
|
||||
|
||||
// Draw Particle
|
||||
const pos = getPosition(progress, type, w, h)
|
||||
|
||||
// Draw Trail
|
||||
ctx.beginPath()
|
||||
if (type === 'curve') {
|
||||
ctx.moveTo(30, h - 30)
|
||||
// Re-calculate curve up to progress
|
||||
for(let t=0; t<=progress; t+=0.01) {
|
||||
const p = getPosition(t, type, w, h)
|
||||
ctx.lineTo(p.x, p.y)
|
||||
}
|
||||
} else {
|
||||
ctx.moveTo(30, h - 30)
|
||||
ctx.lineTo(pos.x, pos.y)
|
||||
}
|
||||
ctx.strokeStyle = type === 'curve' ? '#F56C6C' : '#67C23A'
|
||||
ctx.lineWidth = 3
|
||||
ctx.stroke()
|
||||
|
||||
// Draw Head
|
||||
ctx.beginPath()
|
||||
ctx.arc(pos.x, pos.y, 6, 0, Math.PI * 2)
|
||||
ctx.fillStyle = type === 'curve' ? '#F56C6C' : '#67C23A'
|
||||
ctx.fill()
|
||||
ctx.strokeStyle = '#fff'
|
||||
ctx.lineWidth = 2
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
const drawBackground = (ctx, w, h) => {
|
||||
ctx.fillStyle = '#f9f9f9' // Light bg
|
||||
// Grid
|
||||
ctx.strokeStyle = '#eee'
|
||||
ctx.lineWidth = 1
|
||||
ctx.beginPath()
|
||||
for(let x=0; x<=w; x+=20) { ctx.moveTo(x,0); ctx.lineTo(x,h); }
|
||||
for(let y=0; y<=h; y+=20) { ctx.moveTo(0,y); ctx.lineTo(w,y); }
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
const drawEndpoints = (ctx, w, h) => {
|
||||
// Start (Noise)
|
||||
ctx.beginPath()
|
||||
ctx.arc(30, h - 30, 8, 0, Math.PI * 2)
|
||||
ctx.fillStyle = '#909399'
|
||||
ctx.fill()
|
||||
|
||||
// End (Image)
|
||||
ctx.beginPath()
|
||||
ctx.arc(w - 30, 30, 8, 0, Math.PI * 2)
|
||||
ctx.fillStyle = '#409EFF'
|
||||
ctx.fill()
|
||||
}
|
||||
|
||||
const drawPath = (ctx, w, h, type, isActive) => {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(30, h - 30)
|
||||
|
||||
if (type === 'line') {
|
||||
ctx.lineTo(w - 30, 30)
|
||||
} else {
|
||||
// Bezier curve for diffusion
|
||||
ctx.quadraticCurveTo(w * 0.2, 30, w - 30, 30)
|
||||
}
|
||||
|
||||
ctx.strokeStyle = isActive ? 'rgba(0,0,0,0.1)' : '#ddd'
|
||||
ctx.lineWidth = 2
|
||||
ctx.setLineDash([5, 5])
|
||||
ctx.stroke()
|
||||
ctx.setLineDash([])
|
||||
}
|
||||
|
||||
const getPosition = (t, type, w, h) => {
|
||||
const startX = 30
|
||||
const startY = h - 30
|
||||
const endX = w - 30
|
||||
const endY = 30
|
||||
|
||||
if (type === 'line') {
|
||||
return {
|
||||
x: startX + (endX - startX) * t,
|
||||
y: startY + (endY - startY) * t
|
||||
}
|
||||
} else {
|
||||
// Quadratic Bezier: (1-t)^2 * P0 + 2(1-t)t * P1 + t^2 * P2
|
||||
// Control Point
|
||||
const cpX = w * 0.2
|
||||
const cpY = 30
|
||||
|
||||
const x = Math.pow(1-t, 2) * startX + 2 * (1-t) * t * cpX + Math.pow(t, 2) * endX
|
||||
const y = Math.pow(1-t, 2) * startY + 2 * (1-t) * t * cpY + Math.pow(t, 2) * endY
|
||||
|
||||
// Add some random jitter for diffusion look if t < 1
|
||||
// const jitter = t < 1 ? (Math.random() - 0.5) * 5 : 0
|
||||
// return { x: x + jitter, y: y + jitter }
|
||||
return { x, y }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flow-matching-demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.comparison-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.comparison-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.viz-panel {
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.canvas-wrapper {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.labels {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stats-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user