```tsx 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ----------------------------------------------------------------------------- // CONFIGURATION & CONSTANTS // ----------------------------------------------------------------------------- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 675; const BG_COLOR = "#0f172a"; // Slate 900 // Palette const COLORS = { bg: "#0f172a", grid: "#1e293b", text: "#94a3b8", textLight: "#f1f5f9", cyan: "#06b6d4", // Tech/Data purple: "#8b5cf6", // Model/Magic green: "#10b981", // Success/Image amber: "#f59e0b", // Prompt/Attention rose: "#f43f5e", // Motion/Temporal blue: "#3b82f6", // Latent }; // ----------------------------------------------------------------------------- // HELPER FUNCTIONS // ----------------------------------------------------------------------------- const getWirePath = (x1: number, y1: number, x2: number, y2: number) => { const dist = Math.abs(x2 - x1) * 0.5; return `M ${x1} ${y1} C ${x1 + dist} ${y1}, ${x2 - dist} ${y2}, ${x2} ${y2}`; }; // ----------------------------------------------------------------------------- // COMPONENT: ComfyUI Video Generation Logic (AnimateDiff) // ----------------------------------------------------------------------------- export default function ComfyUIVideoLogic() { // Animation State // 0: Idle, 1: Load/Encode, 2: Motion Inject, 3: KSampling (Loop), 4: VAE/Save const [phase, setPhase] = useState(0); const [tick, setTick] = useState(0); const [denoiseProgress, setDenoiseProgress] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(0); // --------------------------------------------------------------------------- // ANIMATION LOOP // --------------------------------------------------------------------------- const animate = (time: number) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; setTick(Math.floor(elapsed / 20)); // High freq tick for UI noise // Cycle Duration: 16 seconds for a full explanation loop const cycleTime = elapsed % 16000; if (cycleTime < 1000) { if (phase !== 0) { setPhase(0); setDenoiseProgress(0); } } else if (cycleTime < 3500) { setPhase(1); // Load Models, CLIP, Latent } else if (cycleTime < 5500) { setPhase(2); // Inject Motion Module (AnimateDiff) } else if (cycleTime < 11500) { setPhase(3); // KSampler (Denoising) // Linear progress 0 -> 1 over 6 seconds const p = (cycleTime - 5500) / 6000; setDenoiseProgress(Math.min(p, 1)); } else if (cycleTime < 14500) { setPhase(4); // VAE Decode -> Output } else { setPhase(0); // Cooldown } requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [phase]); // --------------------------------------------------------------------------- // NODE DATA // --------------------------------------------------------------------------- const nodes = [ { id: 'ckpt', label: '基础大模型 (Checkpoint)', sub: 'SD 1.5 / SDXL', x: 80, y: 80, color: COLORS.purple, type: 'src' }, { id: 'clip', label: '提示词编码 (CLIP)', sub: 'Prompts -> Embeddings', x: 80, y: 220, color: COLORS.amber, type: 'src' }, { id: 'motion', label: '动态迁移模块 (AnimateDiff)', sub: 'Motion LoRA / M-Model', x: 80, y: 360, color: COLORS.rose, type: 'src' }, { id: 'latent', label: '初始化潜空间 (Latent)', sub: 'Batch Size: 16 Frames', x: 80, y: 500, color: COLORS.blue, type: 'src' }, { id: 'sampler', label: 'K采样器 (KSampler)', sub: '逐步去噪 / 时序一致性计算', x: 480, y: 290, w: 280, h: 280, color: COLORS.cyan, type: 'proc' }, { id: 'vae', label: 'VAE 解码器 (Decode)', sub: 'Latent -> Pixel', x: 880, y: 290, color: COLORS.purple, type: 'proc' }, { id: 'save', label: '视频合成 (Save Video)', sub: 'FFmpeg / GIF / MP4', x: 880, y: 450, color: COLORS.green, type: 'out' }, ]; // Connections const connections = [ // Phase 1: Setup { from: 'ckpt', to: 'sampler', activePhase: [1, 2, 3], particle: COLORS.purple }, { from: 'ckpt', to: 'clip', activePhase: [1], particle: COLORS.purple }, { from: 'clip', to: 'sampler', activePhase: [1, 2, 3], particle: COLORS.amber }, { from: 'latent', to: 'sampler', activePhase: [1, 2, 3], particle: COLORS.blue }, // Phase 2: Injection { from: 'motion', to: 'sampler', activePhase: [2, 3], particle: COLORS.rose }, // Phase 4: Output { from: 'sampler', to: 'vae', activePhase: [4], particle: COLORS.cyan }, { from: 'vae', to: 'save', activePhase: [4], particle: COLORS.green }, ]; // --------------------------------------------------------------------------- // SUB-COMPONENTS (RENDERERS) // --------------------------------------------------------------------------- // 1. Background Grid with Perspective const Background = () => ( {/* Moving Grid Effect */} ); // 2. The Core Visualization: Latent Batch Processing const SamplerInternals = () => { // We visualize a "Strip" of frames being denoised together const frameCount = 4; const boxW = 40; const boxH = 40; const gap = 15; const startX = 480 + 140 - ((boxW * frameCount + gap * (frameCount - 1)) / 2); const startY = 290 + 140 - (boxH / 2); // Noise level logic let noiseOpacity = 1; let imageOpacity = 0; if (phase === 3) { noiseOpacity = 1 - denoiseProgress; imageOpacity = denoiseProgress; } else if (phase === 4) { noiseOpacity = 0; imageOpacity = 1; } else if (phase < 3) { noiseOpacity = 1; imageOpacity = 0; } return ( {/* Temporal Attention Lines (Connecting the frames) */} {phase >= 2 && ( {/* "Attention" Arcs */} {phase === 3 && [0,1,2].map(i => ( ))} )} {/* Frames */} {Array.from({ length: frameCount }).map((_, i) => ( {/* Base */} {/* Image Content (Revealing) */} {/* Noise Overlay */} {/* Frame Number */} F{i+1} ))} {/* Status Text inside Sampler */} {phase === 3 ? `SAMPLING STEP: ${Math.floor(denoiseProgress * 20)}/20` : (phase === 2 ? "INJECTING MOTION WEIGHTS..." : "WAITING FOR LATENT")} ); }; return (

); } ```