849 lines
41 KiB
HTML
849 lines
41 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>WanVideo Data Flow Explorer</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
|
||
<style>
|
||
.active-tab {
|
||
border-bottom: 3px solid #3b82f6;
|
||
}
|
||
.flow-node {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.flow-node:hover {
|
||
transform: scale(1.05);
|
||
filter: brightness(1.1);
|
||
}
|
||
.block-item {
|
||
transition: all 0.2s ease;
|
||
}
|
||
.block-item:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<!-- Header -->
|
||
<header class="bg-white shadow-sm border-b border-gray-200">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="py-4">
|
||
<h1 class="text-3xl font-bold text-gray-900">
|
||
WanVideo Internal Data Flow Explorer
|
||
</h1>
|
||
<p class="text-gray-600 mt-1">
|
||
Technical Deep Dive into WanVideo Architecture
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Configuration Sidebar -->
|
||
<div class="flex">
|
||
<aside
|
||
class="w-64 bg-white border-r border-gray-200 p-6 h-screen sticky top-0 overflow-y-auto"
|
||
>
|
||
<h2 class="text-lg font-semibold mb-4">Configuration</h2>
|
||
|
||
<!-- Video Parameters -->
|
||
<div class="mb-6">
|
||
<h3 class="font-medium text-gray-700 mb-3">
|
||
Video Parameters
|
||
</h3>
|
||
<div class="space-y-3">
|
||
<div>
|
||
<label class="text-sm text-gray-600">Width</label>
|
||
<input
|
||
type="number"
|
||
id="width"
|
||
value="480"
|
||
step="32"
|
||
min="256"
|
||
max="1920"
|
||
class="w-full border rounded px-2 py-1 text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="text-sm text-gray-600">Height</label>
|
||
<input
|
||
type="number"
|
||
id="height"
|
||
value="832"
|
||
step="32"
|
||
min="256"
|
||
max="1080"
|
||
class="w-full border rounded px-2 py-1 text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="text-sm text-gray-600">Frames</label>
|
||
<input
|
||
type="number"
|
||
id="frames"
|
||
value="41"
|
||
step="4"
|
||
min="1"
|
||
max="241"
|
||
class="w-full border rounded px-2 py-1 text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="text-sm text-gray-600"
|
||
>Batch Size</label
|
||
>
|
||
<select
|
||
id="batch-size"
|
||
class="w-full border rounded px-2 py-1 text-sm"
|
||
>
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="4">4</option>
|
||
<option value="8">8</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Model Settings -->
|
||
<div class="mb-6">
|
||
<h3 class="font-medium text-gray-700 mb-3">
|
||
Model Settings
|
||
</h3>
|
||
<div class="space-y-3">
|
||
<div>
|
||
<label class="text-sm text-gray-600"
|
||
>Precision</label
|
||
>
|
||
<select
|
||
id="precision"
|
||
class="w-full border rounded px-2 py-1 text-sm"
|
||
>
|
||
<option value="fp32">FP32</option>
|
||
<option value="fp16" selected>FP16</option>
|
||
<option value="fp8">FP8</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="text-sm text-gray-600"
|
||
>Attention Mode</label
|
||
>
|
||
<select
|
||
id="attention"
|
||
class="w-full border rounded px-2 py-1 text-sm"
|
||
>
|
||
<option value="sdpa" selected>SDPA</option>
|
||
<option value="flash_attn_2">
|
||
Flash Attention 2
|
||
</option>
|
||
<option value="sageattn">SageAttn</option>
|
||
<option value="radial_sparse_sage">
|
||
Radial Sparse SageAttn
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Computed Metrics -->
|
||
<div class="bg-gray-100 rounded-lg p-4">
|
||
<h3 class="font-medium text-gray-700 mb-3">
|
||
Computed Metrics
|
||
</h3>
|
||
<div class="space-y-2 text-sm">
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">Latent Shape:</span>
|
||
<span id="latent-shape" class="font-mono">-</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">Sequence Length:</span>
|
||
<span id="seq-length" class="font-mono">-</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">Compression:</span>
|
||
<span id="compression" class="font-mono">-</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Content -->
|
||
<main class="flex-1 p-6">
|
||
<!-- Tabs -->
|
||
<div class="border-b border-gray-200 mb-6">
|
||
<nav class="flex space-x-8">
|
||
<button
|
||
onclick="showTab('overview')"
|
||
id="tab-overview"
|
||
class="py-2 px-1 text-gray-700 font-medium active-tab"
|
||
>
|
||
Pipeline Overview
|
||
</button>
|
||
<button
|
||
onclick="showTab('text-encoding')"
|
||
id="tab-text-encoding"
|
||
class="py-2 px-1 text-gray-700 font-medium"
|
||
>
|
||
Text Encoding
|
||
</button>
|
||
<button
|
||
onclick="showTab('latent-space')"
|
||
id="tab-latent-space"
|
||
class="py-2 px-1 text-gray-700 font-medium"
|
||
>
|
||
Latent Space
|
||
</button>
|
||
<button
|
||
onclick="showTab('transformer')"
|
||
id="tab-transformer"
|
||
class="py-2 px-1 text-gray-700 font-medium"
|
||
>
|
||
Transformer Flow
|
||
</button>
|
||
<button
|
||
onclick="showTab('memory')"
|
||
id="tab-memory"
|
||
class="py-2 px-1 text-gray-700 font-medium"
|
||
>
|
||
Memory Analysis
|
||
</button>
|
||
<button
|
||
onclick="showTab('activation')"
|
||
id="tab-activation"
|
||
class="py-2 px-1 text-gray-700 font-medium"
|
||
>
|
||
Activation Editor
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Tab Content -->
|
||
<div id="content-overview" class="tab-content">
|
||
<h2 class="text-2xl font-bold mb-4">
|
||
Data Pipeline Overview
|
||
</h2>
|
||
<div
|
||
id="pipeline-flow"
|
||
class="bg-white rounded-lg p-6 shadow-sm"
|
||
>
|
||
<!-- D3.js pipeline visualization will go here -->
|
||
</div>
|
||
|
||
<div class="grid grid-cols-3 gap-4 mt-6">
|
||
<div class="bg-white rounded-lg p-4 shadow-sm">
|
||
<h3 class="font-semibold text-gray-700">
|
||
Model Parameters
|
||
</h3>
|
||
<p class="text-2xl font-bold mt-2">14B</p>
|
||
<p class="text-sm text-gray-600">Transformer</p>
|
||
</div>
|
||
<div class="bg-white rounded-lg p-4 shadow-sm">
|
||
<h3 class="font-semibold text-gray-700">
|
||
Text Encoder
|
||
</h3>
|
||
<p class="text-2xl font-bold mt-2">11B</p>
|
||
<p class="text-sm text-gray-600">UMT5-XXL</p>
|
||
</div>
|
||
<div class="bg-white rounded-lg p-4 shadow-sm">
|
||
<h3 class="font-semibold text-gray-700">
|
||
Transformer Blocks
|
||
</h3>
|
||
<p class="text-2xl font-bold mt-2">40</p>
|
||
<p class="text-sm text-gray-600">Attention + FFN</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="content-text-encoding" class="tab-content hidden">
|
||
<h2 class="text-2xl font-bold mb-4">
|
||
Text Encoding Data Flow
|
||
</h2>
|
||
<div class="bg-white rounded-lg p-6 shadow-sm">
|
||
<div class="mb-4 bg-blue-50 rounded-lg p-3">
|
||
<p class="text-sm text-blue-800">
|
||
<strong>WAN-Style Prompts:</strong> WanVideo was
|
||
trained on detailed scene descriptions. Write
|
||
complete paragraphs describing the subject,
|
||
environment, lighting, and atmosphere.
|
||
</p>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-6">
|
||
<div>
|
||
<label
|
||
class="block text-sm font-medium text-gray-700 mb-2"
|
||
>Main Prompt (WAN-style)</label
|
||
>
|
||
<textarea
|
||
id="main-prompt"
|
||
rows="6"
|
||
class="w-full border rounded-lg px-3 py-2 text-sm"
|
||
placeholder="Write a detailed scene description..."
|
||
>
|
||
A majestic gray tabby cat walks through a sunny plaza in the late afternoon. The cat moves with confident strides across weathered cobblestones, its tail held high. The plaza is surrounded by Mediterranean-style buildings with terracotta roofs. Potted plants line the walkways, and a fountain bubbles gently in the center. Golden sunlight creates long shadows across the square.</textarea
|
||
>
|
||
</div>
|
||
<div>
|
||
<label
|
||
class="block text-sm font-medium text-gray-700 mb-2"
|
||
>Negative Prompt</label
|
||
>
|
||
<textarea
|
||
id="negative-prompt"
|
||
rows="6"
|
||
class="w-full border rounded-lg px-3 py-2 text-sm"
|
||
placeholder="What to avoid..."
|
||
>
|
||
blurry, low quality, distorted, unrealistic proportions, bad anatomy, watermark</textarea
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6">
|
||
<canvas
|
||
id="token-chart"
|
||
class="w-full"
|
||
height="200"
|
||
></canvas>
|
||
</div>
|
||
|
||
<div class="mt-6 bg-gray-50 rounded-lg p-4">
|
||
<h3 class="font-semibold mb-2">
|
||
UMT5-XXL Processing Details
|
||
</h3>
|
||
<ul class="space-y-1 text-sm text-gray-600">
|
||
<li>• Input: Tokenized text sequences</li>
|
||
<li>
|
||
• Output: Fixed [256, 4096] embeddings per
|
||
prompt
|
||
</li>
|
||
<li>• Memory per prompt: ~4.2 MB (FP32)</li>
|
||
<li>
|
||
• Disk caching available for faster re-use
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="content-latent-space" class="tab-content hidden">
|
||
<h2 class="text-2xl font-bold mb-4">
|
||
Latent Space Transformation
|
||
</h2>
|
||
<div class="bg-white rounded-lg p-6 shadow-sm">
|
||
<div class="grid grid-cols-2 gap-6">
|
||
<div>
|
||
<canvas
|
||
id="memory-chart"
|
||
class="w-full"
|
||
></canvas>
|
||
</div>
|
||
<div>
|
||
<canvas
|
||
id="dimension-chart"
|
||
class="w-full"
|
||
></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6 bg-gray-50 rounded-lg p-4">
|
||
<h3 class="font-semibold mb-2">
|
||
Patchification Process
|
||
</h3>
|
||
<p class="text-sm text-gray-600 mb-2">
|
||
The latent space is divided into patches for
|
||
transformer processing:
|
||
</p>
|
||
<ul class="space-y-1 text-sm text-gray-600">
|
||
<li>• VAE Stride: (4, 8, 8) for (T, H, W)</li>
|
||
<li>• Patch Size: (1, 2, 2)</li>
|
||
<li>
|
||
• Each patch: 16 × 1 × 2 × 2 = 64 values
|
||
</li>
|
||
<li>• Flattened to 5,120 dimensions</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="content-transformer" class="tab-content hidden">
|
||
<h2 class="text-2xl font-bold mb-4">
|
||
Transformer Block Data Flow
|
||
</h2>
|
||
<div class="bg-white rounded-lg p-6 shadow-sm">
|
||
<div class="mb-6">
|
||
<h3 class="font-semibold mb-3">
|
||
Block Architecture (40 Blocks Total)
|
||
</h3>
|
||
<div class="space-y-2">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-32 text-right font-medium">
|
||
LayerNorm →
|
||
</div>
|
||
<div class="flex-1 bg-blue-100 rounded p-2">
|
||
Input normalization
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-32 text-right font-medium">
|
||
Self-Attention →
|
||
</div>
|
||
<div
|
||
class="flex-1 bg-green-100 rounded p-2"
|
||
>
|
||
40 heads, RoPE positional encoding
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-32 text-right font-medium">
|
||
Cross-Attention →
|
||
</div>
|
||
<div
|
||
class="flex-1 bg-yellow-100 rounded p-2"
|
||
>
|
||
Text conditioning integration
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-32 text-right font-medium">
|
||
FFN →
|
||
</div>
|
||
<div
|
||
class="flex-1 bg-purple-100 rounded p-2"
|
||
>
|
||
5,120 → 13,824 → 5,120
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-semibold mb-3">
|
||
Block Specialization
|
||
</h3>
|
||
<canvas
|
||
id="block-specialization-chart"
|
||
class="w-full"
|
||
height="300"
|
||
></canvas>
|
||
</div>
|
||
|
||
<div class="mt-6">
|
||
<h3 class="font-semibold mb-3">
|
||
Interactive Block Explorer
|
||
</h3>
|
||
<div class="flex items-center space-x-4 mb-4">
|
||
<label class="text-sm font-medium"
|
||
>Select Block:</label
|
||
>
|
||
<input
|
||
type="range"
|
||
id="block-selector"
|
||
min="0"
|
||
max="39"
|
||
value="20"
|
||
class="flex-1"
|
||
oninput="updateBlockInfo()"
|
||
/>
|
||
<span
|
||
id="block-number"
|
||
class="font-mono font-bold"
|
||
>20</span
|
||
>
|
||
</div>
|
||
<div
|
||
id="block-info"
|
||
class="bg-gray-50 rounded-lg p-4"
|
||
>
|
||
<!-- Block info will be updated dynamically -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="content-memory" class="tab-content hidden">
|
||
<h2 class="text-2xl font-bold mb-4">
|
||
Memory Usage Analysis
|
||
</h2>
|
||
<div class="bg-white rounded-lg p-6 shadow-sm">
|
||
<div class="grid grid-cols-2 gap-6">
|
||
<div>
|
||
<canvas
|
||
id="model-memory-chart"
|
||
class="w-full"
|
||
></canvas>
|
||
</div>
|
||
<div>
|
||
<canvas
|
||
id="activation-memory-chart"
|
||
class="w-full"
|
||
></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6 grid grid-cols-4 gap-4">
|
||
<div class="bg-gray-50 rounded-lg p-4 text-center">
|
||
<p class="text-sm text-gray-600">
|
||
Model Memory
|
||
</p>
|
||
<p
|
||
id="model-memory-total"
|
||
class="text-2xl font-bold"
|
||
>
|
||
-
|
||
</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-4 text-center">
|
||
<p class="text-sm text-gray-600">
|
||
Activation Memory
|
||
</p>
|
||
<p
|
||
id="activation-memory-total"
|
||
class="text-2xl font-bold"
|
||
>
|
||
-
|
||
</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-4 text-center">
|
||
<p class="text-sm text-gray-600">
|
||
Buffer/Cache
|
||
</p>
|
||
<p class="text-2xl font-bold">2.0 GB</p>
|
||
</div>
|
||
<div class="bg-gray-50 rounded-lg p-4 text-center">
|
||
<p class="text-sm text-gray-600">
|
||
Total Required
|
||
</p>
|
||
<p id="total-memory" class="text-2xl font-bold">
|
||
-
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6 bg-blue-50 rounded-lg p-4">
|
||
<h3 class="font-semibold mb-2">
|
||
Memory Optimization Options
|
||
</h3>
|
||
<div class="grid grid-cols-2 gap-4 text-sm">
|
||
<div>
|
||
<h4 class="font-medium mb-1">
|
||
Model Optimizations:
|
||
</h4>
|
||
<ul class="space-y-1 text-gray-600">
|
||
<li>
|
||
• FP8 Quantization: Save ~75% model
|
||
memory
|
||
</li>
|
||
<li>
|
||
• Model Offloading: Keep only active
|
||
blocks in VRAM
|
||
</li>
|
||
<li>
|
||
• LoRA: Use adapters instead of full
|
||
model
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-medium mb-1">
|
||
Activation Optimizations:
|
||
</h4>
|
||
<ul class="space-y-1 text-gray-600">
|
||
<li>
|
||
• Flash Attention: Reduce quadratic
|
||
memory
|
||
</li>
|
||
<li>
|
||
• Gradient Checkpointing: Trade
|
||
compute for memory
|
||
</li>
|
||
<li>
|
||
• Lower Resolution: Reduces sequence
|
||
length quadratically
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="content-activation" class="tab-content hidden">
|
||
<h2 class="text-2xl font-bold mb-4">
|
||
Activation Editor Analysis
|
||
</h2>
|
||
|
||
<!-- Critical Guidelines Alert -->
|
||
<div
|
||
class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6"
|
||
>
|
||
<div class="flex">
|
||
<div class="ml-3">
|
||
<p class="text-sm font-medium text-yellow-800">
|
||
Critical Requirement
|
||
</p>
|
||
<p class="text-sm text-yellow-700 mt-1">
|
||
Main and injection prompts must be >50%
|
||
different for visible effects. Use WAN-style
|
||
detailed descriptions (full paragraphs, not
|
||
short phrases).
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-lg p-6 shadow-sm">
|
||
<div class="grid grid-cols-2 gap-6">
|
||
<div>
|
||
<h3 class="font-semibold mb-3">
|
||
Injection Configuration
|
||
</h3>
|
||
<div class="space-y-3">
|
||
<div>
|
||
<label
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>Main Prompt (WAN-style)</label
|
||
>
|
||
<textarea
|
||
id="activation-main-prompt"
|
||
rows="5"
|
||
class="w-full border rounded-lg px-3 py-2 text-sm"
|
||
placeholder="Write a detailed scene description..."
|
||
>
|
||
A gray tabby cat walks through a sunlit garden. The cat moves gracefully between rows of colorful flowers, its tail swaying gently. Butterflies flutter nearby. The garden has well-maintained grass and stone pathways winding through flower beds.</textarea
|
||
>
|
||
</div>
|
||
<div>
|
||
<label
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>Injection Prompt (WAN-style)</label
|
||
>
|
||
<textarea
|
||
id="activation-injection-prompt"
|
||
rows="5"
|
||
class="w-full border rounded-lg px-3 py-2 text-sm"
|
||
placeholder="Write a contrasting detailed scene..."
|
||
>
|
||
An underwater coral reef scene with crystal clear water. Schools of tropical fish swim between vibrant coral formations. Sunlight filters through the water creating dancing patterns on the sandy bottom. Sea anemones sway with the current.</textarea
|
||
>
|
||
</div>
|
||
<div>
|
||
<label
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>
|
||
Injection Strength:
|
||
<span id="strength-value">0.4</span>
|
||
<span class="text-xs text-gray-500"
|
||
>(0.3-0.5 recommended, 0.1-0.2
|
||
for Lightx2v)</span
|
||
>
|
||
</label>
|
||
<input
|
||
type="range"
|
||
id="injection-strength"
|
||
min="0"
|
||
max="1"
|
||
step="0.1"
|
||
value="0.4"
|
||
class="w-full"
|
||
oninput="updateStrengthValue()"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-semibold mb-3">
|
||
Block Selection
|
||
</h3>
|
||
<div class="mb-3">
|
||
<select
|
||
id="pattern-preset"
|
||
class="w-full border rounded px-3 py-2"
|
||
onchange="updateBlockPattern()"
|
||
>
|
||
<option value="custom">Custom</option>
|
||
<option value="early">
|
||
Early Blocks (0-10) -
|
||
Textures/Colors
|
||
</option>
|
||
<option value="middle">
|
||
Middle Blocks (10-30) -
|
||
Structure/Objects
|
||
</option>
|
||
<option value="late">
|
||
Late Blocks (30-40) - Semantic
|
||
Concepts
|
||
</option>
|
||
<option value="alternating">
|
||
Alternating - Every 2nd block
|
||
</option>
|
||
<option value="sparse">
|
||
Sparse - Every 4th block
|
||
</option>
|
||
<option value="first_half">
|
||
First Half (0-20) - Foundation
|
||
</option>
|
||
<option value="second_half">
|
||
Second Half (20-40) - Higher
|
||
Concepts
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div
|
||
class="grid grid-cols-10 gap-1"
|
||
id="block-grid"
|
||
>
|
||
<!-- Block checkboxes will be generated by JavaScript -->
|
||
</div>
|
||
|
||
<div class="mt-3 text-sm text-gray-600">
|
||
Active blocks:
|
||
<span
|
||
id="active-block-count"
|
||
class="font-bold"
|
||
>0</span
|
||
>/40
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6">
|
||
<canvas
|
||
id="blending-chart"
|
||
class="w-full"
|
||
height="300"
|
||
></canvas>
|
||
</div>
|
||
|
||
<div class="mt-6 bg-gray-50 rounded-lg p-4">
|
||
<h3 class="font-semibold mb-3">
|
||
Block Patterns (General Tendencies)
|
||
</h3>
|
||
<table class="w-full text-sm">
|
||
<thead>
|
||
<tr class="border-b">
|
||
<th class="text-left pb-2">Range</th>
|
||
<th class="text-left pb-2">
|
||
Typical Processing
|
||
</th>
|
||
<th class="text-left pb-2">
|
||
Testing Focus
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="border-b">
|
||
<td class="py-2 font-medium">
|
||
Early (0-13)
|
||
</td>
|
||
<td class="py-2">
|
||
Local patterns, colors, textures,
|
||
edges
|
||
</td>
|
||
<td class="py-2 text-gray-600">
|
||
Material transformation, texture
|
||
mixing
|
||
</td>
|
||
</tr>
|
||
<tr class="border-b">
|
||
<td class="py-2 font-medium">
|
||
Middle (14-26)
|
||
</td>
|
||
<td class="py-2">
|
||
Object boundaries, scene structure,
|
||
motion
|
||
</td>
|
||
<td class="py-2 text-gray-600">
|
||
Object morphing, composition changes
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="py-2 font-medium">
|
||
Late (27-39)
|
||
</td>
|
||
<td class="py-2">
|
||
Semantic relationships, global
|
||
coherence
|
||
</td>
|
||
<td class="py-2 text-gray-600">
|
||
Concept blending, mood
|
||
transformation
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p class="text-xs text-gray-600 mt-2">
|
||
Note: These are general patterns from
|
||
transformer research, not rigid rules. Actual
|
||
behavior depends on specific prompts and their
|
||
embedding difference.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="mt-4 bg-blue-50 rounded-lg p-4">
|
||
<h3 class="font-semibold mb-2">
|
||
Prompt Difference Calculator
|
||
</h3>
|
||
<p class="text-sm text-gray-700 mb-3">
|
||
Estimate the semantic difference between your
|
||
prompts (aim for >50%):
|
||
</p>
|
||
<div class="flex items-center space-x-4">
|
||
<button
|
||
onclick="calculatePromptDifference()"
|
||
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
||
>
|
||
Calculate Difference
|
||
</button>
|
||
<div
|
||
id="prompt-difference-result"
|
||
class="text-sm font-medium"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 bg-gray-50 rounded-lg p-4">
|
||
<h3 class="font-semibold mb-2">Debug Features</h3>
|
||
<div class="text-sm text-gray-700">
|
||
<p class="mb-2">
|
||
The WanVideoActivationEditor node includes
|
||
runtime log level control:
|
||
</p>
|
||
<ul
|
||
class="list-disc list-inside space-y-1 text-gray-600"
|
||
>
|
||
<li>
|
||
<strong>off</strong>: No debug output
|
||
</li>
|
||
<li>
|
||
<strong>basic</strong>: Essential
|
||
information only
|
||
</li>
|
||
<li>
|
||
<strong>verbose</strong>: Detailed
|
||
operation logs including percent changed
|
||
</li>
|
||
<li>
|
||
<strong>trace</strong>: Full trace with
|
||
stack information
|
||
</li>
|
||
</ul>
|
||
<p class="mt-2 text-xs">
|
||
Use "verbose" to see the actual embedding
|
||
difference percentages during generation.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="wan_dataflow_webapp.js"></script>
|
||
</body>
|
||
</html>
|