Files
2025-07-26 15:05:02 -05:00

849 lines
41 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>