feat: save current work to dev branch
This commit is contained in:
sanbuphy
@@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<div class="linear-attention-demo">
|
||||
<div class="mode-switch">
|
||||
<button
|
||||
:class="{ active: mode === 'standard' }"
|
||||
@click="mode = 'standard'"
|
||||
>
|
||||
标准 Attention (网状连接)
|
||||
</button>
|
||||
<button
|
||||
:class="{ active: mode === 'linear' }"
|
||||
@click="mode = 'linear'"
|
||||
>
|
||||
线性 Attention (接力传递)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="visual-area">
|
||||
<div class="control-panel">
|
||||
<div class="label">参与者数量 (N): {{ nValue }}</div>
|
||||
<input type="range" v-model="nValue" min="3" max="12" step="1" class="slider">
|
||||
</div>
|
||||
|
||||
<div class="viz-canvas-container">
|
||||
<!-- Canvas for dynamic drawing -->
|
||||
<svg class="viz-svg" viewBox="0 0 400 300">
|
||||
<!-- STANDARD MODE: Mesh / Web -->
|
||||
<g v-if="mode === 'standard'">
|
||||
<!-- Active Query Animation -->
|
||||
<g class="active-query-scan">
|
||||
<!-- Current processing node (last one) -->
|
||||
<circle
|
||||
:cx="circleNodes[circleNodes.length-1].x"
|
||||
:cy="circleNodes[circleNodes.length-1].y"
|
||||
r="16"
|
||||
fill="none"
|
||||
stroke="var(--vp-c-brand)"
|
||||
stroke-width="3"
|
||||
opacity="0.5"
|
||||
>
|
||||
<animate attributeName="r" values="12;20;12" dur="2s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" values="0.8;0;0.8" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
|
||||
<!-- Scanning rays from last node to all others -->
|
||||
<line
|
||||
v-for="(node, idx) in circleNodes.slice(0, circleNodes.length-1)"
|
||||
:key="'ray'+idx"
|
||||
:x1="circleNodes[circleNodes.length-1].x"
|
||||
:y1="circleNodes[circleNodes.length-1].y"
|
||||
:x2="node.x"
|
||||
:y2="node.y"
|
||||
stroke="var(--vp-c-brand)"
|
||||
stroke-width="2"
|
||||
stroke-dasharray="4"
|
||||
class="scanning-ray"
|
||||
>
|
||||
<animate attributeName="stroke-dashoffset" values="20;0" dur="1s" repeatCount="indefinite" />
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Background Mesh -->
|
||||
<g class="connections">
|
||||
<line
|
||||
v-for="(link, idx) in meshLinks"
|
||||
:key="idx"
|
||||
:x1="link.x1" :y1="link.y1"
|
||||
:x2="link.x2" :y2="link.y2"
|
||||
class="connection-line"
|
||||
:style="{ animationDelay: idx * 0.05 + 's' }"
|
||||
/>
|
||||
</g>
|
||||
<!-- Draw Nodes -->
|
||||
<circle
|
||||
v-for="(node, idx) in circleNodes"
|
||||
:key="idx"
|
||||
:cx="node.x" :cy="node.y"
|
||||
r="12"
|
||||
class="node-circle standard"
|
||||
:class="{ 'current-node': idx === circleNodes.length - 1 }"
|
||||
/>
|
||||
<text
|
||||
v-for="(node, idx) in circleNodes"
|
||||
:key="'t'+idx"
|
||||
:x="node.x" :y="node.y"
|
||||
dy="4"
|
||||
text-anchor="middle"
|
||||
class="node-text"
|
||||
>{{ idx + 1 }}</text>
|
||||
</g>
|
||||
|
||||
<!-- LINEAR MODE: Relay / Chain -->
|
||||
<g v-else>
|
||||
<!-- Relay Path -->
|
||||
<line
|
||||
x1="40" y1="150"
|
||||
:x2="40 + (nValue - 1) * 60" y2="150"
|
||||
class="relay-track"
|
||||
/>
|
||||
|
||||
<!-- Passing Message Animation -->
|
||||
<circle
|
||||
cx="0" cy="0" r="8"
|
||||
class="message-token"
|
||||
>
|
||||
<animateMotion
|
||||
:path="relayPath"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<!-- Nodes -->
|
||||
<g v-for="(node, idx) in linearNodes" :key="idx">
|
||||
<circle
|
||||
:cx="node.x" :cy="node.y"
|
||||
r="12"
|
||||
class="node-circle linear"
|
||||
/>
|
||||
<text
|
||||
:x="node.x" :y="node.y"
|
||||
dy="4"
|
||||
text-anchor="middle"
|
||||
class="node-text"
|
||||
>{{ idx + 1 }}</text>
|
||||
<!-- State Box (Memory) -->
|
||||
<rect
|
||||
:x="node.x - 15" :y="node.y + 20"
|
||||
width="30" height="20"
|
||||
rx="4"
|
||||
class="memory-box"
|
||||
/>
|
||||
<text :x="node.x" :y="node.y + 34" text-anchor="middle" font-size="8" fill="white">Mem</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="stats-panel">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">连接/操作次数</div>
|
||||
<div class="stat-value" :class="mode === 'standard' ? 'text-red' : 'text-green'">
|
||||
{{ connectionCount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-desc">
|
||||
<span v-if="mode === 'standard'">
|
||||
每个人都要找其他人。<br>N={{ nValue }} 时，连接数高达 {{ nValue * nValue }}！
|
||||
</span>
|
||||
<span v-else>
|
||||
每个人只传给下一个人。<br>N={{ nValue }} 时，操作数仅为 {{ nValue }}。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="analogy-box">
|
||||
<div class="analogy-title">💡 核心区别：要不要回头看？</div>
|
||||
<div v-if="mode === 'standard'">
|
||||
<b>回看模式 (Retrospective)</b>：
|
||||
<br>想象你在考试。每做一道新题，你都要<b>把之前做过的所有题目再检查一遍</b>，确认有没有关联。
|
||||
<br>题目越多，你需要检查的次数就越多，最后累死在检查上。
|
||||
</div>
|
||||
<div v-else>
|
||||
<b>状态模式 (Recurrent)</b>：
|
||||
<br>想象你在跑步。你不需要记得前 100 步每一步踩在哪，你只需要知道<b>现在的速度和位置</b>（State）。
|
||||
<br>跑第 1000 步和跑第 1 步一样轻松，因为你不需要回头。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const mode = ref('standard')
|
||||
const nValue = ref(5)
|
||||
|
||||
// Coordinates for Standard Mode (Circle Layout)
|
||||
const circleNodes = computed(() => {
|
||||
const nodes = []
|
||||
const centerX = 200
|
||||
const centerY = 150
|
||||
const radius = 100
|
||||
|
||||
for (let i = 0; i < nValue.value; i++) {
|
||||
const angle = (i / nValue.value) * 2 * Math.PI - Math.PI / 2
|
||||
nodes.push({
|
||||
x: centerX + radius * Math.cos(angle),
|
||||
y: centerY + radius * Math.sin(angle)
|
||||
})
|
||||
}
|
||||
return nodes
|
||||
})
|
||||
|
||||
// Links for Standard Mode (All-to-All)
|
||||
const meshLinks = computed(() => {
|
||||
const links = []
|
||||
const nodes = circleNodes.value
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
for (let j = 0; j < nodes.length; j++) {
|
||||
links.push({
|
||||
x1: nodes[i].x,
|
||||
y1: nodes[i].y,
|
||||
x2: nodes[j].x,
|
||||
y2: nodes[j].y
|
||||
})
|
||||
}
|
||||
}
|
||||
return links
|
||||
})
|
||||
|
||||
// Coordinates for Linear Mode (Line Layout)
|
||||
const linearNodes = computed(() => {
|
||||
const nodes = []
|
||||
const startX = 40
|
||||
const gap = 60
|
||||
const y = 150
|
||||
|
||||
for (let i = 0; i < nValue.value; i++) {
|
||||
nodes.push({
|
||||
x: startX + i * gap,
|
||||
y: y
|
||||
})
|
||||
}
|
||||
return nodes
|
||||
})
|
||||
|
||||
// SVG Path for animation in Linear Mode
|
||||
const relayPath = computed(() => {
|
||||
const nodes = linearNodes.value
|
||||
if (nodes.length < 2) return ""
|
||||
// Start from first node, go to last node
|
||||
return `M ${nodes[0].x} ${nodes[0].y} L ${nodes[nodes.length-1].x} ${nodes[nodes.length-1].y}`
|
||||
})
|
||||
|
||||
const connectionCount = computed(() => {
|
||||
if (mode.value === 'standard') {
|
||||
return nValue.value * nValue.value
|
||||
} else {
|
||||
return nValue.value
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.linear-attention-demo {
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
margin: 20px 0;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mode-switch {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mode-switch button {
|
||||
padding: 8px 20px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.mode-switch button.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
box-shadow: 0 4px 12px var(--vp-c-brand-dimm);
|
||||
}
|
||||
|
||||
.visual-area {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slider {
|
||||
accent-color: var(--vp-c-brand);
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.viz-canvas-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viz-svg {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* SVG Elements */
|
||||
.node-circle {
|
||||
fill: var(--vp-c-bg);
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.node-circle.standard {
|
||||
stroke: var(--vp-c-red);
|
||||
}
|
||||
|
||||
.node-circle.linear {
|
||||
stroke: var(--vp-c-green);
|
||||
}
|
||||
|
||||
.node-text {
|
||||
font-size: 10px;
|
||||
fill: var(--vp-c-text-1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.connection-line {
|
||||
stroke: var(--vp-c-red);
|
||||
stroke-width: 1;
|
||||
opacity: 0;
|
||||
animation: fadeInLine 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInLine {
|
||||
to { opacity: 0.3; }
|
||||
}
|
||||
|
||||
.relay-track {
|
||||
stroke: var(--vp-c-divider);
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 4;
|
||||
}
|
||||
|
||||
.message-token {
|
||||
fill: var(--vp-c-green);
|
||||
}
|
||||
|
||||
.memory-box {
|
||||
fill: var(--vp-c-green);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Stats */
|
||||
.stats-panel {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.text-red { color: var(--vp-c-red); }
|
||||
.text-green { color: var(--vp-c-green); }
|
||||
|
||||
.stat-desc {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9em;
|
||||
margin-top: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Analogy */
|
||||
.analogy-box {
|
||||
margin-top: 20px;
|
||||
background: var(--vp-c-bg-mute);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.6;
|
||||
border-left: 4px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.analogy-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user