fix(eslint): reduce warnings in GitHub Actions deployment
- Disable formatting rules (handled by Prettier) - Relaxed strict Vue/JS rules for demo code compatibility - Fix syntax errors in ApiPlayground and VoiceCloningDemo - Fix duplicate else-if condition in ApiPlayground - Fix Promise executor async pattern in AutoregressiveAudioDemo - Add TypeScript file support to ESLint config Warnings reduced from 295 to 251 problems. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
sanbuphy
@@ -26,7 +26,13 @@
|
||||
<div class="cfg-slider-section">
|
||||
<div class="cfg-label">
|
||||
<span>CFG Scale</span>
|
||||
<el-tag type="primary" effect="dark" size="large">{{ cfgScale }}</el-tag>
|
||||
<el-tag
|
||||
type="primary"
|
||||
effect="dark"
|
||||
size="large"
|
||||
>
|
||||
{{ cfgScale }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-slider
|
||||
v-model="cfgScale"
|
||||
@@ -59,7 +65,9 @@
|
||||
<div class="comparison-display">
|
||||
<div class="comparison-item">
|
||||
<div class="item-label">
|
||||
<el-tag type="info">无条件生成</el-tag>
|
||||
<el-tag type="info">
|
||||
无条件生成
|
||||
</el-tag>
|
||||
<span class="cfg-value">CFG = 1</span>
|
||||
</div>
|
||||
<canvas
|
||||
@@ -68,20 +76,30 @@
|
||||
height="200"
|
||||
class="comparison-canvas"
|
||||
/>
|
||||
<div class="item-desc">忽略提示词，自由发挥</div>
|
||||
<div class="item-desc">
|
||||
忽略提示词，自由发挥
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-arrow">
|
||||
<el-icon :size="32"><ArrowRight /></el-icon>
|
||||
<el-icon :size="32">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
<div class="guidance-formula">
|
||||
<div class="formula">输出 = 无条件 + CFG × (有条件 - 无条件)</div>
|
||||
<div class="formula-desc">CFG 越大，提示词影响越强</div>
|
||||
<div class="formula">
|
||||
输出 = 无条件 + CFG × (有条件 - 无条件)
|
||||
</div>
|
||||
<div class="formula-desc">
|
||||
CFG 越大，提示词影响越强
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-item">
|
||||
<div class="item-label">
|
||||
<el-tag type="success">当前设置</el-tag>
|
||||
<el-tag type="success">
|
||||
当前设置
|
||||
</el-tag>
|
||||
<span class="cfg-value">CFG = {{ cfgScale }}</span>
|
||||
</div>
|
||||
<canvas
|
||||
@@ -90,13 +108,17 @@
|
||||
height="200"
|
||||
class="comparison-canvas"
|
||||
/>
|
||||
<div class="item-desc">{{ getCfgDescription() }}</div>
|
||||
<div class="item-desc">
|
||||
{{ getCfgDescription() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CFG 效果展示 -->
|
||||
<div class="cfg-effects">
|
||||
<div class="effects-title">不同 CFG 值的效果对比</div>
|
||||
<div class="effects-title">
|
||||
不同 CFG 值的效果对比
|
||||
</div>
|
||||
<div class="effects-grid">
|
||||
<div
|
||||
v-for="effect in cfgEffects"
|
||||
@@ -111,30 +133,54 @@
|
||||
height="120"
|
||||
class="effect-canvas"
|
||||
/>
|
||||
<div class="effect-label">CFG {{ effect.value }}</div>
|
||||
<div class="effect-desc">{{ effect.desc }}</div>
|
||||
<div class="effect-label">
|
||||
CFG {{ effect.value }}
|
||||
</div>
|
||||
<div class="effect-desc">
|
||||
{{ effect.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 推荐设置 -->
|
||||
<div class="recommendations">
|
||||
<div class="rec-title">🎯 推荐设置</div>
|
||||
<div class="rec-title">
|
||||
🎯 推荐设置
|
||||
</div>
|
||||
<div class="rec-grid">
|
||||
<div class="rec-item">
|
||||
<div class="rec-scenario">创意探索</div>
|
||||
<div class="rec-value">CFG 3-5</div>
|
||||
<div class="rec-desc">给 AI 更多自由，适合艺术探索</div>
|
||||
<div class="rec-scenario">
|
||||
创意探索
|
||||
</div>
|
||||
<div class="rec-value">
|
||||
CFG 3-5
|
||||
</div>
|
||||
<div class="rec-desc">
|
||||
给 AI 更多自由，适合艺术探索
|
||||
</div>
|
||||
</div>
|
||||
<div class="rec-item">
|
||||
<div class="rec-scenario">平衡模式</div>
|
||||
<div class="rec-value">CFG 7-9</div>
|
||||
<div class="rec-desc">大多数场景的最佳选择</div>
|
||||
<div class="rec-scenario">
|
||||
平衡模式
|
||||
</div>
|
||||
<div class="rec-value">
|
||||
CFG 7-9
|
||||
</div>
|
||||
<div class="rec-desc">
|
||||
大多数场景的最佳选择
|
||||
</div>
|
||||
</div>
|
||||
<div class="rec-item">
|
||||
<div class="rec-scenario">精确控制</div>
|
||||
<div class="rec-value">CFG 12-15</div>
|
||||
<div class="rec-desc">严格遵循提示词，但可能过饱和</div>
|
||||
<div class="rec-scenario">
|
||||
精确控制
|
||||
</div>
|
||||
<div class="rec-value">
|
||||
CFG 12-15
|
||||
</div>
|
||||
<div class="rec-desc">
|
||||
严格遵循提示词，但可能过饱和
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -31,16 +31,24 @@
|
||||
:class="{ active: selectedControl === control.id }"
|
||||
@click="selectedControl = control.id"
|
||||
>
|
||||
<div class="control-icon">{{ control.icon }}</div>
|
||||
<div class="control-name">{{ control.name }}</div>
|
||||
<div class="control-desc">{{ control.description }}</div>
|
||||
<div class="control-icon">
|
||||
{{ control.icon }}
|
||||
</div>
|
||||
<div class="control-name">
|
||||
{{ control.name }}
|
||||
</div>
|
||||
<div class="control-desc">
|
||||
{{ control.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 可视化流程 -->
|
||||
<div class="workflow-viz">
|
||||
<div class="workflow-step">
|
||||
<div class="step-label">输入图像</div>
|
||||
<div class="step-label">
|
||||
输入图像
|
||||
</div>
|
||||
<canvas
|
||||
ref="inputCanvas"
|
||||
width="200"
|
||||
@@ -50,12 +58,18 @@
|
||||
</div>
|
||||
|
||||
<div class="workflow-arrow">
|
||||
<el-icon :size="24"><ArrowRight /></el-icon>
|
||||
<div class="arrow-label">提取</div>
|
||||
<el-icon :size="24">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
<div class="arrow-label">
|
||||
提取
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="workflow-step">
|
||||
<div class="step-label">控制信号</div>
|
||||
<div class="step-label">
|
||||
控制信号
|
||||
</div>
|
||||
<canvas
|
||||
ref="controlCanvas"
|
||||
width="200"
|
||||
@@ -65,12 +79,18 @@
|
||||
</div>
|
||||
|
||||
<div class="workflow-arrow">
|
||||
<el-icon :size="24"><ArrowRight /></el-icon>
|
||||
<div class="arrow-label">+ 提示词</div>
|
||||
<el-icon :size="24">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
<div class="arrow-label">
|
||||
+ 提示词
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="workflow-step">
|
||||
<div class="step-label">生成结果</div>
|
||||
<div class="step-label">
|
||||
生成结果
|
||||
</div>
|
||||
<canvas
|
||||
ref="outputCanvas"
|
||||
width="200"
|
||||
@@ -84,7 +104,12 @@
|
||||
<div class="strength-control">
|
||||
<div class="strength-header">
|
||||
<span>控制强度 (Control Strength)</span>
|
||||
<el-tag type="primary" effect="dark">{{ controlStrength }}</el-tag>
|
||||
<el-tag
|
||||
type="primary"
|
||||
effect="dark"
|
||||
>
|
||||
{{ controlStrength }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-slider
|
||||
v-model="controlStrength"
|
||||
@@ -105,11 +130,15 @@
|
||||
|
||||
<!-- 对比展示 -->
|
||||
<div class="comparison-section">
|
||||
<div class="comparison-title">对比：有无 ControlNet</div>
|
||||
<div class="comparison-title">
|
||||
对比：有无 ControlNet
|
||||
</div>
|
||||
<div class="comparison-grid">
|
||||
<div class="comparison-item">
|
||||
<div class="item-label">
|
||||
<el-tag type="info">仅文本生成</el-tag>
|
||||
<el-tag type="info">
|
||||
仅文本生成
|
||||
</el-tag>
|
||||
</div>
|
||||
<canvas
|
||||
ref="textOnlyCanvas"
|
||||
@@ -117,12 +146,16 @@
|
||||
height="180"
|
||||
class="comparison-canvas"
|
||||
/>
|
||||
<div class="item-desc">姿态随机，不可控</div>
|
||||
<div class="item-desc">
|
||||
姿态随机，不可控
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-item">
|
||||
<div class="item-label">
|
||||
<el-tag type="success">ControlNet 控制</el-tag>
|
||||
<el-tag type="success">
|
||||
ControlNet 控制
|
||||
</el-tag>
|
||||
</div>
|
||||
<canvas
|
||||
ref="controlNetCanvas"
|
||||
@@ -130,23 +163,33 @@
|
||||
height="180"
|
||||
class="comparison-canvas"
|
||||
/>
|
||||
<div class="item-desc">姿态精确匹配输入</div>
|
||||
<div class="item-desc">
|
||||
姿态精确匹配输入
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 应用场景 -->
|
||||
<div class="use-cases">
|
||||
<div class="use-cases-title">🎯 典型应用场景</div>
|
||||
<div class="use-cases-title">
|
||||
🎯 典型应用场景
|
||||
</div>
|
||||
<div class="use-cases-grid">
|
||||
<div
|
||||
v-for="useCase in useCases"
|
||||
:key="useCase.title"
|
||||
class="use-case-card"
|
||||
>
|
||||
<div class="use-case-icon">{{ useCase.icon }}</div>
|
||||
<div class="use-case-title">{{ useCase.title }}</div>
|
||||
<div class="use-case-desc">{{ useCase.description }}</div>
|
||||
<div class="use-case-icon">
|
||||
{{ useCase.icon }}
|
||||
</div>
|
||||
<div class="use-case-title">
|
||||
{{ useCase.title }}
|
||||
</div>
|
||||
<div class="use-case-desc">
|
||||
{{ useCase.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,23 +3,42 @@
|
||||
<div class="magic-frame">
|
||||
<!-- The Canvas -->
|
||||
<div class="canvas-wrapper">
|
||||
<canvas ref="canvasRef" width="300" height="300"></canvas>
|
||||
<canvas
|
||||
ref="canvasRef"
|
||||
width="300"
|
||||
height="300"
|
||||
/>
|
||||
|
||||
<!-- Overlay Status -->
|
||||
<div class="status-overlay" :class="{ visible: isProcessing }">
|
||||
<div class="step-counter">Step {{ currentStep }} / {{ totalSteps }}</div>
|
||||
<div class="step-desc">{{ stepDescription }}</div>
|
||||
<div
|
||||
class="status-overlay"
|
||||
:class="{ visible: isProcessing }"
|
||||
>
|
||||
<div class="step-counter">
|
||||
Step {{ currentStep }} / {{ totalSteps }}
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
{{ stepDescription }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="controls">
|
||||
<button class="magic-btn" @click="startDenoise" :disabled="isProcessing">
|
||||
<button
|
||||
class="magic-btn"
|
||||
:disabled="isProcessing"
|
||||
@click="startDenoise"
|
||||
>
|
||||
<span class="icon">✨</span>
|
||||
{{ isProcessing ? '去噪中...' : '开始去噪 (Denoise)' }}
|
||||
</button>
|
||||
|
||||
<button class="reset-btn" @click="reset" :disabled="isProcessing">
|
||||
<button
|
||||
class="reset-btn"
|
||||
:disabled="isProcessing"
|
||||
@click="reset"
|
||||
>
|
||||
<span class="icon">🔄</span> 重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,11 @@
|
||||
<div class="flow-matching-demo">
|
||||
<div class="demo-card">
|
||||
<div class="controls">
|
||||
<button class="play-btn" @click="startRace" :disabled="isPlaying">
|
||||
<button
|
||||
class="play-btn"
|
||||
:disabled="isPlaying"
|
||||
@click="startRace"
|
||||
>
|
||||
<span class="icon">{{ isPlaying ? 'Running...' : '🚀 开始比赛 (Start Race)' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -15,9 +19,17 @@
|
||||
<span class="step-count">{{ diffSteps }} Steps</span>
|
||||
</div>
|
||||
<div class="canvas-wrapper">
|
||||
<canvas ref="diffCanvasRef" width="400" height="100"></canvas>
|
||||
<div class="marker start">噪声</div>
|
||||
<div class="marker end">图像</div>
|
||||
<canvas
|
||||
ref="diffCanvasRef"
|
||||
width="400"
|
||||
height="100"
|
||||
/>
|
||||
<div class="marker start">
|
||||
噪声
|
||||
</div>
|
||||
<div class="marker end">
|
||||
图像
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,9 +40,17 @@
|
||||
<span class="step-count highlight">{{ flowSteps }} Steps</span>
|
||||
</div>
|
||||
<div class="canvas-wrapper">
|
||||
<canvas ref="flowCanvasRef" width="400" height="100"></canvas>
|
||||
<div class="marker start">噪声</div>
|
||||
<div class="marker end">图像</div>
|
||||
<canvas
|
||||
ref="flowCanvasRef"
|
||||
width="400"
|
||||
height="100"
|
||||
/>
|
||||
<div class="marker start">
|
||||
噪声
|
||||
</div>
|
||||
<div class="marker end">
|
||||
图像
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+73
-21
@@ -4,78 +4,124 @@
|
||||
<div class="flow-container">
|
||||
<!-- Step 1: Prompt -->
|
||||
<div class="flow-item">
|
||||
<el-card shadow="hover" class="node-card">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="node-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="node-header">
|
||||
<el-icon :size="20"><EditPen /></el-icon>
|
||||
<el-icon :size="20">
|
||||
<EditPen />
|
||||
</el-icon>
|
||||
<span>提示词 (Prompt)</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="node-content">
|
||||
<el-tag type="info" effect="plain">"一只可爱的猫"</el-tag>
|
||||
<el-tag
|
||||
type="info"
|
||||
effect="plain"
|
||||
>
|
||||
"一只可爱的猫"
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="arrow-connector">
|
||||
<el-icon :size="24"><Right /></el-icon>
|
||||
<el-icon :size="24">
|
||||
<Right />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Text Encoder -->
|
||||
<div class="flow-item">
|
||||
<el-card shadow="hover" class="node-card">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="node-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="node-header">
|
||||
<el-icon :size="20"><Microphone /></el-icon>
|
||||
<el-icon :size="20">
|
||||
<Microphone />
|
||||
</el-icon>
|
||||
<span>文本编码器</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="node-content">
|
||||
<div class="model-name">CLIP / T5</div>
|
||||
<div class="data-shape">Vector [768]</div>
|
||||
<div class="model-name">
|
||||
CLIP / T5
|
||||
</div>
|
||||
<div class="data-shape">
|
||||
Vector [768]
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="arrow-connector">
|
||||
<el-icon :size="24"><Right /></el-icon>
|
||||
<el-icon :size="24">
|
||||
<Right />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: UNet/DiT -->
|
||||
<div class="flow-item main-node">
|
||||
<el-card shadow="hover" class="node-card highlight">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="node-card highlight"
|
||||
>
|
||||
<template #header>
|
||||
<div class="node-header">
|
||||
<el-icon :size="20" color="#E6A23C"><Cpu /></el-icon>
|
||||
<el-icon
|
||||
:size="20"
|
||||
color="#E6A23C"
|
||||
>
|
||||
<Cpu />
|
||||
</el-icon>
|
||||
<span>生成模型</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="node-content">
|
||||
<div class="model-name">UNet / DiT</div>
|
||||
<div class="model-name">
|
||||
UNet / DiT
|
||||
</div>
|
||||
<div class="action-badge">
|
||||
<el-tag type="warning" size="small" effect="dark"
|
||||
>去噪 (Denoise)</el-tag
|
||||
<el-tag
|
||||
type="warning"
|
||||
size="small"
|
||||
effect="dark"
|
||||
>
|
||||
去噪 (Denoise)
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="arrow-connector">
|
||||
<el-icon :size="24"><Right /></el-icon>
|
||||
<el-icon :size="24">
|
||||
<Right />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: VAE Decoder -->
|
||||
<div class="flow-item">
|
||||
<el-card shadow="hover" class="node-card">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="node-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="node-header">
|
||||
<el-icon :size="20"><View /></el-icon>
|
||||
<el-icon :size="20">
|
||||
<View />
|
||||
</el-icon>
|
||||
<span>图像解码器</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="node-content">
|
||||
<div class="model-name">VAE Decoder</div>
|
||||
<div class="model-name">
|
||||
VAE Decoder
|
||||
</div>
|
||||
<div class="final-output">
|
||||
<el-icon><Picture /></el-icon> Image
|
||||
</div>
|
||||
@@ -90,7 +136,9 @@
|
||||
<el-col :span="8">
|
||||
<div class="explanation-item">
|
||||
<div class="exp-icon">
|
||||
<el-icon color="#409EFF"><Microphone /></el-icon>
|
||||
<el-icon color="#409EFF">
|
||||
<Microphone />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="exp-text">
|
||||
<h4>耳朵 (Text Encoder)</h4>
|
||||
@@ -101,7 +149,9 @@
|
||||
<el-col :span="8">
|
||||
<div class="explanation-item">
|
||||
<div class="exp-icon">
|
||||
<el-icon color="#E6A23C"><Cpu /></el-icon>
|
||||
<el-icon color="#E6A23C">
|
||||
<Cpu />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="exp-text">
|
||||
<h4>大脑 (UNet/DiT)</h4>
|
||||
@@ -114,7 +164,9 @@
|
||||
<el-col :span="8">
|
||||
<div class="explanation-item">
|
||||
<div class="exp-icon">
|
||||
<el-icon color="#67C23A"><View /></el-icon>
|
||||
<el-icon color="#67C23A">
|
||||
<View />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="exp-text">
|
||||
<h4>眼睛 (VAE)</h4>
|
||||
|
||||
+14
-4
@@ -15,12 +15,22 @@
|
||||
|
||||
<div class="preview-area">
|
||||
<div class="canvas-wrapper">
|
||||
<canvas ref="canvasRef" width="400" height="300"></canvas>
|
||||
<div v-if="!isGenerating && !hasGenerated" class="placeholder-text">
|
||||
<canvas
|
||||
ref="canvasRef"
|
||||
width="400"
|
||||
height="300"
|
||||
/>
|
||||
<div
|
||||
v-if="!isGenerating && !hasGenerated"
|
||||
class="placeholder-text"
|
||||
>
|
||||
👈 点击上方风格，开始创作
|
||||
</div>
|
||||
<div v-if="isGenerating" class="loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
<div
|
||||
v-if="isGenerating"
|
||||
class="loading-overlay"
|
||||
>
|
||||
<div class="spinner" />
|
||||
<div>AI 正在绘制 {{ presets[selectedPreset].name }}...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,36 +3,62 @@
|
||||
<div class="viz-card">
|
||||
<!-- Left: The Output (Pixel Space) -->
|
||||
<div class="preview-section">
|
||||
<div class="emoji-display" :style="{ transform: `scale(${1 + zoomLevel})` }">
|
||||
<div
|
||||
class="emoji-display"
|
||||
:style="{ transform: `scale(${1 + zoomLevel})` }"
|
||||
>
|
||||
{{ currentEmoji }}
|
||||
</div>
|
||||
<div class="label">像素空间 (Pixel Space)</div>
|
||||
<div class="sub-label">最终看到的图像</div>
|
||||
<div class="label">
|
||||
像素空间 (Pixel Space)
|
||||
</div>
|
||||
<div class="sub-label">
|
||||
最终看到的图像
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center: The Mechanism -->
|
||||
<div class="connection">
|
||||
<div class="arrow">← 映射 →</div>
|
||||
<div class="vae-tag">VAE Decoder</div>
|
||||
<div class="arrow">
|
||||
← 映射 →
|
||||
</div>
|
||||
<div class="vae-tag">
|
||||
VAE Decoder
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: The Input (Latent Space) -->
|
||||
<div class="control-section">
|
||||
<div class="latent-grid" ref="gridRef" @mousedown="startDrag" @touchstart="startDrag">
|
||||
<div class="grid-lines"></div>
|
||||
<div class="axis-label x-axis">开心值 (Happiness)</div>
|
||||
<div class="axis-label y-axis">惊讶值 (Surprise)</div>
|
||||
<div
|
||||
ref="gridRef"
|
||||
class="latent-grid"
|
||||
@mousedown="startDrag"
|
||||
@touchstart="startDrag"
|
||||
>
|
||||
<div class="grid-lines" />
|
||||
<div class="axis-label x-axis">
|
||||
开心值 (Happiness)
|
||||
</div>
|
||||
<div class="axis-label y-axis">
|
||||
惊讶值 (Surprise)
|
||||
</div>
|
||||
|
||||
<!-- The Latent Point -->
|
||||
<div
|
||||
class="latent-point"
|
||||
:style="{ left: `${point.x}%`, top: `${point.y}%` }"
|
||||
>
|
||||
<div class="tooltip">Latent Vector: [{{ ((point.x-50)/50).toFixed(1) }}, {{ ((50-point.y)/50).toFixed(1) }}]</div>
|
||||
<div class="tooltip">
|
||||
Latent Vector: [{{ ((point.x-50)/50).toFixed(1) }}, {{ ((50-point.y)/50).toFixed(1) }}]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label">潜空间 (Latent Space)</div>
|
||||
<div class="sub-label">拖动红点改变特征</div>
|
||||
<div class="label">
|
||||
潜空间 (Latent Space)
|
||||
</div>
|
||||
<div class="sub-label">
|
||||
拖动红点改变特征
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -26,21 +26,43 @@
|
||||
<div class="concept-section">
|
||||
<div class="concept-visual">
|
||||
<div class="model-box base">
|
||||
<div class="box-title">基础模型</div>
|
||||
<div class="box-size">4-8 GB</div>
|
||||
<div class="box-desc">通用知识</div>
|
||||
<div class="box-title">
|
||||
基础模型
|
||||
</div>
|
||||
<div class="box-size">
|
||||
4-8 GB
|
||||
</div>
|
||||
<div class="box-desc">
|
||||
通用知识
|
||||
</div>
|
||||
</div>
|
||||
<div class="plus-sign">
|
||||
+
|
||||
</div>
|
||||
<div class="plus-sign">+</div>
|
||||
<div class="model-box lora">
|
||||
<div class="box-title">LoRA 权重</div>
|
||||
<div class="box-size">50-200 MB</div>
|
||||
<div class="box-desc">特定风格/角色</div>
|
||||
<div class="box-title">
|
||||
LoRA 权重
|
||||
</div>
|
||||
<div class="box-size">
|
||||
50-200 MB
|
||||
</div>
|
||||
<div class="box-desc">
|
||||
特定风格/角色
|
||||
</div>
|
||||
</div>
|
||||
<div class="equals-sign">
|
||||
=
|
||||
</div>
|
||||
<div class="equals-sign">=</div>
|
||||
<div class="model-box result">
|
||||
<div class="box-title">定制模型</div>
|
||||
<div class="box-size">无需合并</div>
|
||||
<div class="box-desc">动态加载</div>
|
||||
<div class="box-title">
|
||||
定制模型
|
||||
</div>
|
||||
<div class="box-size">
|
||||
无需合并
|
||||
</div>
|
||||
<div class="box-desc">
|
||||
动态加载
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,7 +71,12 @@
|
||||
<div class="weight-control-section">
|
||||
<div class="weight-header">
|
||||
<span>LoRA 权重调节</span>
|
||||
<el-tag type="primary" effect="dark">{{ loraWeight }}</el-tag>
|
||||
<el-tag
|
||||
type="primary"
|
||||
effect="dark"
|
||||
>
|
||||
{{ loraWeight }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-slider
|
||||
v-model="loraWeight"
|
||||
@@ -67,21 +94,33 @@
|
||||
|
||||
<div class="lora-selector">
|
||||
<el-radio-group v-model="selectedLoRA">
|
||||
<el-radio-button label="anime">动漫风格</el-radio-button>
|
||||
<el-radio-button label="realistic">写实风格</el-radio-button>
|
||||
<el-radio-button label="sketch">素描风格</el-radio-button>
|
||||
<el-radio-button label="3d">3D 风格</el-radio-button>
|
||||
<el-radio-button label="anime">
|
||||
动漫风格
|
||||
</el-radio-button>
|
||||
<el-radio-button label="realistic">
|
||||
写实风格
|
||||
</el-radio-button>
|
||||
<el-radio-button label="sketch">
|
||||
素描风格
|
||||
</el-radio-button>
|
||||
<el-radio-button label="3d">
|
||||
3D 风格
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 效果对比 -->
|
||||
<div class="comparison-section">
|
||||
<div class="comparison-title">生成效果对比</div>
|
||||
<div class="comparison-title">
|
||||
生成效果对比
|
||||
</div>
|
||||
<div class="comparison-grid">
|
||||
<div class="comparison-item">
|
||||
<div class="item-label">
|
||||
<el-tag type="info">仅基础模型</el-tag>
|
||||
<el-tag type="info">
|
||||
仅基础模型
|
||||
</el-tag>
|
||||
</div>
|
||||
<canvas
|
||||
ref="baseCanvas"
|
||||
@@ -89,12 +128,16 @@
|
||||
height="200"
|
||||
class="comparison-canvas"
|
||||
/>
|
||||
<div class="item-desc">通用风格</div>
|
||||
<div class="item-desc">
|
||||
通用风格
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-item main">
|
||||
<div class="item-label">
|
||||
<el-tag type="success">基础 + LoRA ({{ loraWeight }})</el-tag>
|
||||
<el-tag type="success">
|
||||
基础 + LoRA ({{ loraWeight }})
|
||||
</el-tag>
|
||||
</div>
|
||||
<canvas
|
||||
ref="loraCanvas"
|
||||
@@ -102,21 +145,29 @@
|
||||
height="200"
|
||||
class="comparison-canvas main-canvas"
|
||||
/>
|
||||
<div class="item-desc">{{ getLoRADescription() }}</div>
|
||||
<div class="item-desc">
|
||||
{{ getLoRADescription() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 多 LoRA 融合 -->
|
||||
<div class="fusion-section">
|
||||
<div class="fusion-title">🔀 多 LoRA 融合</div>
|
||||
<div class="fusion-title">
|
||||
🔀 多 LoRA 融合
|
||||
</div>
|
||||
<div class="fusion-controls">
|
||||
<div
|
||||
v-for="(lora, index) in activeLoRAs"
|
||||
:key="index"
|
||||
class="fusion-item"
|
||||
>
|
||||
<el-tag :type="lora.type" closable @close="removeLoRA(index)">
|
||||
<el-tag
|
||||
:type="lora.type"
|
||||
closable
|
||||
@close="removeLoRA(index)"
|
||||
>
|
||||
{{ lora.name }}
|
||||
</el-tag>
|
||||
<el-slider
|
||||
@@ -130,16 +181,29 @@
|
||||
<span class="weight-display">{{ lora.weight }}</span>
|
||||
</div>
|
||||
<el-dropdown @command="addLoRA">
|
||||
<el-button type="primary" size="small">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
<el-icon><Plus /></el-icon> 添加 LoRA
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="anime">动漫风格</el-dropdown-item>
|
||||
<el-dropdown-item command="realistic">写实风格</el-dropdown-item>
|
||||
<el-dropdown-item command="sketch">素描风格</el-dropdown-item>
|
||||
<el-dropdown-item command="3d">3D 风格</el-dropdown-item>
|
||||
<el-dropdown-item command="watercolor">水彩风格</el-dropdown-item>
|
||||
<el-dropdown-item command="anime">
|
||||
动漫风格
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="realistic">
|
||||
写实风格
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="sketch">
|
||||
素描风格
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="3d">
|
||||
3D 风格
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="watercolor">
|
||||
水彩风格
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
@@ -153,7 +217,9 @@
|
||||
class="fusion-canvas"
|
||||
/>
|
||||
<div class="fusion-formula">
|
||||
<div class="formula-title">融合公式</div>
|
||||
<div class="formula-title">
|
||||
融合公式
|
||||
</div>
|
||||
<div class="formula-content">
|
||||
输出 = 基础模型 + Σ(LoRAᵢ × 权重ᵢ)
|
||||
</div>
|
||||
@@ -163,27 +229,53 @@
|
||||
|
||||
<!-- 应用场景 -->
|
||||
<div class="use-cases">
|
||||
<div class="use-cases-title">🎯 LoRA 典型应用</div>
|
||||
<div class="use-cases-title">
|
||||
🎯 LoRA 典型应用
|
||||
</div>
|
||||
<div class="use-cases-grid">
|
||||
<div class="use-case-card">
|
||||
<div class="use-case-icon">👤</div>
|
||||
<div class="use-case-title">角色一致性</div>
|
||||
<div class="use-case-desc">训练特定角色，保持形象一致</div>
|
||||
<div class="use-case-icon">
|
||||
👤
|
||||
</div>
|
||||
<div class="use-case-title">
|
||||
角色一致性
|
||||
</div>
|
||||
<div class="use-case-desc">
|
||||
训练特定角色，保持形象一致
|
||||
</div>
|
||||
</div>
|
||||
<div class="use-case-card">
|
||||
<div class="use-case-icon">🎨</div>
|
||||
<div class="use-case-title">艺术风格</div>
|
||||
<div class="use-case-desc">模仿特定画家或艺术风格</div>
|
||||
<div class="use-case-icon">
|
||||
🎨
|
||||
</div>
|
||||
<div class="use-case-title">
|
||||
艺术风格
|
||||
</div>
|
||||
<div class="use-case-desc">
|
||||
模仿特定画家或艺术风格
|
||||
</div>
|
||||
</div>
|
||||
<div class="use-case-card">
|
||||
<div class="use-case-icon">👗</div>
|
||||
<div class="use-case-title">服装概念</div>
|
||||
<div class="use-case-desc">特定服装或配饰设计</div>
|
||||
<div class="use-case-icon">
|
||||
👗
|
||||
</div>
|
||||
<div class="use-case-title">
|
||||
服装概念
|
||||
</div>
|
||||
<div class="use-case-desc">
|
||||
特定服装或配饰设计
|
||||
</div>
|
||||
</div>
|
||||
<div class="use-case-card">
|
||||
<div class="use-case-icon">🏢</div>
|
||||
<div class="use-case-title">产品展示</div>
|
||||
<div class="use-case-desc">特定产品或品牌风格</div>
|
||||
<div class="use-case-icon">
|
||||
🏢
|
||||
</div>
|
||||
<div class="use-case-title">
|
||||
产品展示
|
||||
</div>
|
||||
<div class="use-case-desc">
|
||||
特定产品或品牌风格
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+33
-10
@@ -35,7 +35,9 @@
|
||||
</div>
|
||||
|
||||
<div class="prompt-analysis">
|
||||
<div class="analysis-title">关键词分析</div>
|
||||
<div class="analysis-title">
|
||||
关键词分析
|
||||
</div>
|
||||
<div class="keywords-list">
|
||||
<div
|
||||
v-for="(keyword, index) in analyzedKeywords"
|
||||
@@ -76,11 +78,16 @@
|
||||
<div class="preview-panel">
|
||||
<div class="preview-tabs">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="结构解析" name="structure">
|
||||
<el-tab-pane
|
||||
label="结构解析"
|
||||
name="structure"
|
||||
>
|
||||
<div class="structure-viz">
|
||||
<div class="structure-section">
|
||||
<div class="section-header">
|
||||
<el-tag type="primary">主体 (Subject)</el-tag>
|
||||
<el-tag type="primary">
|
||||
主体 (Subject)
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
{{ extractSubject() || '未检测到主体' }}
|
||||
@@ -89,7 +96,9 @@
|
||||
|
||||
<div class="structure-section">
|
||||
<div class="section-header">
|
||||
<el-tag type="success">风格 (Style)</el-tag>
|
||||
<el-tag type="success">
|
||||
风格 (Style)
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
{{ extractStyle() || '未检测到风格词' }}
|
||||
@@ -98,7 +107,9 @@
|
||||
|
||||
<div class="structure-section">
|
||||
<div class="section-header">
|
||||
<el-tag type="warning">质量 (Quality)</el-tag>
|
||||
<el-tag type="warning">
|
||||
质量 (Quality)
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
{{ extractQuality() || '未检测到质量词' }}
|
||||
@@ -107,7 +118,9 @@
|
||||
|
||||
<div class="structure-section">
|
||||
<div class="section-header">
|
||||
<el-tag type="info">环境 (Environment)</el-tag>
|
||||
<el-tag type="info">
|
||||
环境 (Environment)
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
{{ extractEnvironment() || '未检测到环境描述' }}
|
||||
@@ -116,7 +129,10 @@
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="对比示例" name="comparison">
|
||||
<el-tab-pane
|
||||
label="对比示例"
|
||||
name="comparison"
|
||||
>
|
||||
<div class="comparison-list">
|
||||
<div
|
||||
v-for="(example, index) in promptExamples"
|
||||
@@ -125,13 +141,20 @@
|
||||
:class="{ active: selectedExample === index }"
|
||||
@click="selectExample(index)"
|
||||
>
|
||||
<div class="example-prompt">{{ example.prompt }}</div>
|
||||
<div class="example-desc">{{ example.description }}</div>
|
||||
<div class="example-prompt">
|
||||
{{ example.prompt }}
|
||||
</div>
|
||||
<div class="example-desc">
|
||||
{{ example.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="负面提示词" name="negative">
|
||||
<el-tab-pane
|
||||
label="负面提示词"
|
||||
name="negative"
|
||||
>
|
||||
<div class="negative-prompt-section">
|
||||
<label>负面提示词 (Negative Prompt)</label>
|
||||
<el-input
|
||||
|
||||
@@ -14,21 +14,34 @@
|
||||
:style="{ opacity: 0.4 + (token.weight * 0.6) }"
|
||||
>
|
||||
{{ token.text }}
|
||||
<div class="tooltip">关注度: {{ (token.weight * 100).toFixed(0) }}%</div>
|
||||
<div class="tooltip">
|
||||
关注度: {{ (token.weight * 100).toFixed(0) }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">⬇️ CLIP Encoding & Attention</div>
|
||||
<div class="arrow-down">
|
||||
⬇️ CLIP Encoding & Attention
|
||||
</div>
|
||||
|
||||
<div class="image-map">
|
||||
<!-- Abstract representation of an image being attended to -->
|
||||
<div class="map-layer" style="background: #2b0055; opacity: 0.9;">
|
||||
<div
|
||||
class="map-layer"
|
||||
style="background: #2b0055; opacity: 0.9;"
|
||||
>
|
||||
<span>City Base</span>
|
||||
</div>
|
||||
<div class="map-layer" style="background: #ff00aa; width: 60%; height: 60%; opacity: 0.8;">
|
||||
<div
|
||||
class="map-layer"
|
||||
style="background: #ff00aa; width: 60%; height: 60%; opacity: 0.8;"
|
||||
>
|
||||
<span>Neon Glow</span>
|
||||
</div>
|
||||
<div class="map-layer" style="background: #fff; width: 30%; height: 30%; border-radius: 50%;">
|
||||
<div
|
||||
class="map-layer"
|
||||
style="background: #fff; width: 30%; height: 30%; border-radius: 50%;"
|
||||
>
|
||||
<span>Cat</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+35
-11
@@ -33,9 +33,16 @@
|
||||
>
|
||||
<div class="sampler-header">
|
||||
<span class="sampler-name">{{ sampler.name }}</span>
|
||||
<el-tag :type="sampler.speed" size="small">{{ sampler.speedLabel }}</el-tag>
|
||||
<el-tag
|
||||
:type="sampler.speed"
|
||||
size="small"
|
||||
>
|
||||
{{ sampler.speedLabel }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="sampler-desc">
|
||||
{{ sampler.description }}
|
||||
</div>
|
||||
<div class="sampler-desc">{{ sampler.description }}</div>
|
||||
<div class="sampler-pros-cons">
|
||||
<div class="pros">
|
||||
<el-icon><CircleCheck /></el-icon>
|
||||
@@ -74,7 +81,10 @@
|
||||
</div>
|
||||
|
||||
<div class="sampler-details">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions
|
||||
:column="2"
|
||||
border
|
||||
>
|
||||
<el-descriptions-item label="推荐步数">
|
||||
{{ currentSampler.recommendedSteps }}
|
||||
</el-descriptions-item>
|
||||
@@ -98,23 +108,37 @@
|
||||
|
||||
<!-- 推荐矩阵 -->
|
||||
<div class="recommendation-matrix">
|
||||
<div class="matrix-title">🎯 采样器选择指南</div>
|
||||
<div class="matrix-title">
|
||||
🎯 采样器选择指南
|
||||
</div>
|
||||
<div class="matrix-grid">
|
||||
<div class="matrix-row header">
|
||||
<div class="matrix-cell">场景</div>
|
||||
<div class="matrix-cell">推荐采样器</div>
|
||||
<div class="matrix-cell">原因</div>
|
||||
<div class="matrix-cell">
|
||||
场景
|
||||
</div>
|
||||
<div class="matrix-cell">
|
||||
推荐采样器
|
||||
</div>
|
||||
<div class="matrix-cell">
|
||||
原因
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="rec in recommendations"
|
||||
:key="rec.scenario"
|
||||
class="matrix-row"
|
||||
>
|
||||
<div class="matrix-cell scenario">{{ rec.scenario }}</div>
|
||||
<div class="matrix-cell">
|
||||
<el-tag type="primary">{{ rec.sampler }}</el-tag>
|
||||
<div class="matrix-cell scenario">
|
||||
{{ rec.scenario }}
|
||||
</div>
|
||||
<div class="matrix-cell">
|
||||
<el-tag type="primary">
|
||||
{{ rec.sampler }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="matrix-cell reason">
|
||||
{{ rec.reason }}
|
||||
</div>
|
||||
<div class="matrix-cell reason">{{ rec.reason }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -19,18 +19,30 @@
|
||||
<span class="title">🧠 UNet 去噪模型</span>
|
||||
<div class="controls">
|
||||
<el-button-group>
|
||||
<el-button @click="stepBackward" :disabled="currentStep <= 0">
|
||||
<el-button
|
||||
:disabled="currentStep <= 0"
|
||||
@click="stepBackward"
|
||||
>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
</el-button>
|
||||
<el-button @click="togglePlay">
|
||||
<el-icon v-if="isPlaying"><VideoPause /></el-icon>
|
||||
<el-icon v-else><VideoPlay /></el-icon>
|
||||
<el-icon v-if="isPlaying">
|
||||
<VideoPause />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<VideoPlay />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button @click="stepForward" :disabled="currentStep >= totalSteps">
|
||||
<el-button
|
||||
:disabled="currentStep >= totalSteps"
|
||||
@click="stepForward"
|
||||
>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
<el-button @click="reset">
|
||||
重置
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -39,7 +51,9 @@
|
||||
<!-- 主展示区 -->
|
||||
<div class="main-display">
|
||||
<div class="display-section">
|
||||
<div class="section-label">当前噪声图像 (Noisy Image)</div>
|
||||
<div class="section-label">
|
||||
当前噪声图像 (Noisy Image)
|
||||
</div>
|
||||
<canvas
|
||||
ref="noisyCanvas"
|
||||
width="256"
|
||||
@@ -47,22 +61,36 @@
|
||||
class="display-canvas"
|
||||
/>
|
||||
<div class="timestep-info">
|
||||
<el-tag type="info">Timestep: {{ currentStep }} / {{ totalSteps }}</el-tag>
|
||||
<el-tag :type="getNoiseLevelType()">噪声强度: {{ getNoiseLevel() }}%</el-tag>
|
||||
<el-tag type="info">
|
||||
Timestep: {{ currentStep }} / {{ totalSteps }}
|
||||
</el-tag>
|
||||
<el-tag :type="getNoiseLevelType()">
|
||||
噪声强度: {{ getNoiseLevel() }}%
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-section">
|
||||
<el-icon :size="24"><ArrowRight /></el-icon>
|
||||
<el-icon :size="24">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
<div class="model-box">
|
||||
<div class="model-name">UNet / DiT</div>
|
||||
<div class="model-desc">预测噪声</div>
|
||||
<div class="model-name">
|
||||
UNet / DiT
|
||||
</div>
|
||||
<div class="model-desc">
|
||||
预测噪声
|
||||
</div>
|
||||
</div>
|
||||
<el-icon :size="24"><ArrowRight /></el-icon>
|
||||
<el-icon :size="24">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div class="display-section">
|
||||
<div class="section-label">预测的噪声 (Predicted Noise)</div>
|
||||
<div class="section-label">
|
||||
预测的噪声 (Predicted Noise)
|
||||
</div>
|
||||
<canvas
|
||||
ref="noiseCanvas"
|
||||
width="256"
|
||||
@@ -70,21 +98,36 @@
|
||||
class="display-canvas noise-preview"
|
||||
/>
|
||||
<div class="noise-stats">
|
||||
<el-tag size="small" type="warning">噪声估计</el-tag>
|
||||
<el-tag
|
||||
size="small"
|
||||
type="warning"
|
||||
>
|
||||
噪声估计
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-section">
|
||||
<el-icon :size="24"><ArrowRight /></el-icon>
|
||||
<el-icon :size="24">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
<div class="operation-box">
|
||||
<div class="op-name">减法</div>
|
||||
<div class="op-formula">x - ε</div>
|
||||
<div class="op-name">
|
||||
减法
|
||||
</div>
|
||||
<div class="op-formula">
|
||||
x - ε
|
||||
</div>
|
||||
</div>
|
||||
<el-icon :size="24"><ArrowRight /></el-icon>
|
||||
<el-icon :size="24">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div class="display-section">
|
||||
<div class="section-label">去噪结果 (Denoised)</div>
|
||||
<div class="section-label">
|
||||
去噪结果 (Denoised)
|
||||
</div>
|
||||
<canvas
|
||||
ref="denoisedCanvas"
|
||||
width="256"
|
||||
@@ -102,7 +145,9 @@
|
||||
|
||||
<!-- 时间轴 -->
|
||||
<div class="timeline-section">
|
||||
<div class="timeline-label">去噪时间轴</div>
|
||||
<div class="timeline-label">
|
||||
去噪时间轴
|
||||
</div>
|
||||
<el-slider
|
||||
v-model="currentStep"
|
||||
:min="0"
|
||||
@@ -120,9 +165,14 @@
|
||||
v-model="showComparison"
|
||||
active-text="显示对比 (有/无文本引导)"
|
||||
/>
|
||||
<div v-if="showComparison" class="compare-display">
|
||||
<div
|
||||
v-if="showComparison"
|
||||
class="compare-display"
|
||||
>
|
||||
<div class="compare-item">
|
||||
<div class="compare-label">无引导 (Unconditional)</div>
|
||||
<div class="compare-label">
|
||||
无引导 (Unconditional)
|
||||
</div>
|
||||
<canvas
|
||||
ref="uncondCanvas"
|
||||
width="200"
|
||||
@@ -131,7 +181,9 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="compare-item">
|
||||
<div class="compare-label">有引导 (CFG Scale=7.5)</div>
|
||||
<div class="compare-label">
|
||||
有引导 (CFG Scale=7.5)
|
||||
</div>
|
||||
<canvas
|
||||
ref="condCanvas"
|
||||
width="200"
|
||||
|
||||
@@ -18,7 +18,10 @@
|
||||
<template #header>
|
||||
<div class="header-controls">
|
||||
<span class="title">🔍 VAE 编解码器</span>
|
||||
<el-radio-group v-model="mode" size="small">
|
||||
<el-radio-group
|
||||
v-model="mode"
|
||||
size="small"
|
||||
>
|
||||
<el-radio-button label="encode">
|
||||
<el-icon><ArrowRight /></el-icon> 编码 (Encode)
|
||||
</el-radio-button>
|
||||
@@ -32,7 +35,9 @@
|
||||
<div class="vae-flow">
|
||||
<!-- 输入侧 -->
|
||||
<div class="stage">
|
||||
<div class="stage-label">{{ mode === 'encode' ? '原始图像' : '潜空间表示' }}</div>
|
||||
<div class="stage-label">
|
||||
{{ mode === 'encode' ? '原始图像' : '潜空间表示' }}
|
||||
</div>
|
||||
<div class="stage-visual">
|
||||
<canvas
|
||||
ref="inputCanvas"
|
||||
@@ -42,7 +47,10 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="stage-info">
|
||||
<el-tag size="small" type="info">
|
||||
<el-tag
|
||||
size="small"
|
||||
type="info"
|
||||
>
|
||||
{{ mode === 'encode' ? '512 × 512 × 3 = 786,432 数值' : '64 × 64 × 4 = 16,384 数值' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
@@ -50,17 +58,27 @@
|
||||
|
||||
<!-- 箭头 -->
|
||||
<div class="arrow-stage">
|
||||
<el-icon class="flow-arrow" :size="32">
|
||||
<el-icon
|
||||
class="flow-arrow"
|
||||
:size="32"
|
||||
>
|
||||
<component :is="mode === 'encode' ? ArrowRight : ArrowLeft" />
|
||||
</el-icon>
|
||||
<div class="compression-ratio">
|
||||
<el-tag type="success" effect="dark">压缩率: 48×</el-tag>
|
||||
<el-tag
|
||||
type="success"
|
||||
effect="dark"
|
||||
>
|
||||
压缩率: 48×
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输出侧 -->
|
||||
<div class="stage">
|
||||
<div class="stage-label">{{ mode === 'encode' ? '潜空间表示' : '重建图像' }}</div>
|
||||
<div class="stage-label">
|
||||
{{ mode === 'encode' ? '潜空间表示' : '重建图像' }}
|
||||
</div>
|
||||
<div class="stage-visual">
|
||||
<canvas
|
||||
ref="outputCanvas"
|
||||
@@ -70,7 +88,10 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="stage-info">
|
||||
<el-tag size="small" type="info">
|
||||
<el-tag
|
||||
size="small"
|
||||
type="info"
|
||||
>
|
||||
{{ mode === 'encode' ? '64 × 64 × 4 = 16,384 数值' : '512 × 512 × 3 = 786,432 数值' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
@@ -78,8 +99,13 @@
|
||||
</div>
|
||||
|
||||
<!-- 潜空间可视化 -->
|
||||
<div class="latent-viz" v-if="mode === 'encode'">
|
||||
<div class="latent-title">潜空间特征图 (4 个通道)</div>
|
||||
<div
|
||||
v-if="mode === 'encode'"
|
||||
class="latent-viz"
|
||||
>
|
||||
<div class="latent-title">
|
||||
潜空间特征图 (4 个通道)
|
||||
</div>
|
||||
<div class="latent-channels">
|
||||
<div
|
||||
v-for="i in 4"
|
||||
|
||||
Reference in New Issue
Block a user