+ {/* Header */}
+
+ )
+}
diff --git a/consumer-guide/app/tuning/page.tsx b/consumer-guide/app/tuning/page.tsx
new file mode 100644
index 000000000..526002d23
--- /dev/null
+++ b/consumer-guide/app/tuning/page.tsx
@@ -0,0 +1,823 @@
+"use client"
+
+import { useState, useMemo } from "react"
+import {
+ Monitor, Cpu, Film, Sparkles, Zap, HardDrive, BarChart3,
+ Copy, Check, Info, ChevronDown, ChevronUp, Settings2,
+ Layers, Clock, Database, Gauge
+} from "lucide-react"
+import Link from "next/link"
+
+// Types
+interface Config {
+ // Category A - Model & Hardware
+ model_id: string
+ workload_type: string
+ gpu: string
+ num_gpus: number
+ // Category B - Video Spec
+ height: number
+ width: number
+ num_frames: number
+ fps: number
+ // Category C - Quality
+ num_inference_steps: number
+ guidance_scale: number
+ embedded_cfg_scale: number
+ flow_shift: number | null
+ seed: number
+ // Category D - Speed
+ attention_backend: string
+ VSA_sparsity: number
+ dmd_denoising_steps: string
+ // Category E - Memory
+ dit_cpu_offload: boolean
+ dit_layerwise_offload: boolean
+ vae_cpu_offload: boolean
+ text_encoder_cpu_offload: boolean
+ image_encoder_cpu_offload: boolean
+ pin_cpu_memory: boolean
+ use_fsdp_inference: boolean
+}
+
+const modelOptions = [
+ { id: "FastVideo/FastWan2.1-T2V-1.3B-Diffusers", name: "FastWan 1.3B (T2V)", size: "1.3B" },
+ { id: "Wan-AI/Wan2.1-T2V-14B-Diffusers", name: "Wan 14B (T2V)", size: "14B" },
+ { id: "Wan-AI/Wan2.1-I2V-14B-480P-Diffusers", name: "Wan 14B I2V 480P", size: "14B" },
+ { id: "Wan-AI/Wan2.1-I2V-14B-720P-Diffusers", name: "Wan 14B I2V 720P", size: "14B" },
+]
+
+const workloadOptions = [
+ { id: "t2v", name: "Text to Video", icon: Film },
+ { id: "i2v", name: "Image to Video", icon: Sparkles },
+ { id: "ti2v", name: "Text+Image to Video", icon: Layers },
+ { id: "action", name: "Action", icon: Zap },
+]
+
+const gpuOptions = [
+ { id: "rtx4090", name: "RTX 4090", vram: "24GB" },
+ { id: "rtx5090", name: "RTX 5090", vram: "32GB" },
+ { id: "a100", name: "A100", vram: "40/80GB" },
+ { id: "h100", name: "H100", vram: "80GB" },
+]
+
+const resolutionPresets = [
+ { height: 480, width: 832, label: "480p (832×480)" },
+ { height: 720, width: 1280, label: "720p (1280×720)" },
+ { height: 1080, width: 1920, label: "1080p (1920×1080)" },
+]
+
+const framePresets = [
+ { frames: 49, label: "49 frames (~2s @24fps)" },
+ { frames: 81, label: "81 frames (~3.4s @24fps)" },
+ { frames: 121, label: "121 frames (~5s @24fps)" },
+]
+
+const attentionBackends = [
+ { id: "FLASH_ATTN", name: "Flash Attention", desc: "Best quality-speed trade-off", speed: "Baseline" },
+ { id: "VIDEO_SPARSE_ATTN", name: "Video Sparse Attention", desc: "~30% faster, minimal quality loss", speed: "Fast" },
+ { id: "SAGE_ATTN", name: "Sage Attention", desc: "~40% faster, visible at high motion", speed: "Faster" },
+ { id: "SLA_ATTN", name: "Sliding Tile Attention", desc: "Check model compatibility", speed: "Fast" },
+]
+
+// Tooltip component
+function Tooltip({ content }: { content: string }) {
+ const [show, setShow] = useState(false)
+ return (
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ Config Selector
+Choose your hardware and task to get a recommended configuration
+
+ {/* Step 1: Task Selection */}
+
+
+
+ {/* Step 2: Machine Specs */}
+
+
+
+ {/* Step 3: Output Mode */}
+
+
+
+ {/* Output Configuration */}
+
+
+
+
+ 1
+
+ What do you want to make?
+
+ {TASKS.map(({ id, label, sub, icon: Icon }) => (
+
+ ))}
+
+
+ 2
+
+ Your machine specs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 3
+
+ Output mode
+
+ {TIERS.map(({ id, name, desc, badge }) => {
+ const tierConfig = CONFIGS[task][id]
+ return (
+
+ )
+ })}
+
+ {warning && (
+
+ {warning}
+
+ )}
+
+ ✓
+
+ Your configuration
+
+ {/* Meta Cards */}
+
+
+
+ {/* Command Block */}
+
+
+ Model
+ {config.modelShort}
+
+
+ Est. Generation Time
+ {config.time}
+
+
+ Peak VRAM
+ {config.vram}
+
+
+
+
+ {command}
+
+
+
+ {show && (
+
+ )
+}
+
+// Collapsible section
+function Section({
+ title,
+ icon: Icon,
+ number,
+ children,
+ defaultOpen = true,
+ color = "sky"
+}: {
+ title: string
+ icon: React.ElementType
+ number: string
+ children: React.ReactNode
+ defaultOpen?: boolean
+ color?: "sky" | "emerald" | "amber" | "violet" | "rose" | "slate"
+}) {
+ const [open, setOpen] = useState(defaultOpen)
+ const colorClasses = {
+ sky: "bg-sky-500/20 text-sky-400",
+ emerald: "bg-emerald-500/20 text-emerald-400",
+ amber: "bg-amber-500/20 text-amber-400",
+ violet: "bg-violet-500/20 text-violet-400",
+ rose: "bg-rose-500/20 text-rose-400",
+ slate: "bg-slate-500/20 text-slate-400",
+ }
+ const textColors = {
+ sky: "text-sky-400",
+ emerald: "text-emerald-400",
+ amber: "text-amber-400",
+ violet: "text-violet-400",
+ rose: "text-rose-400",
+ slate: "text-slate-400",
+ }
+
+ return (
+
+ {content}
+
+
+ )}
+
+
+ {open &&
+ )
+}
+
+// Input components
+function NumberInput({
+ label,
+ value,
+ onChange,
+ min,
+ max,
+ step = 1,
+ tooltip,
+ unit
+}: {
+ label: string
+ value: number
+ onChange: (v: number) => void
+ min?: number
+ max?: number
+ step?: number
+ tooltip?: string
+ unit?: string
+}) {
+ return (
+ {children}
}
+
+
+
+ )
+}
+
+function SelectInput({
+ label,
+ value,
+ onChange,
+ options,
+ tooltip
+}: {
+ label: string
+ value: string
+ onChange: (v: string) => void
+ options: { id: string; name: string; desc?: string }[]
+ tooltip?: string
+}) {
+ return (
+
+ onChange(Number(e.target.value))}
+ min={min}
+ max={max}
+ step={step}
+ className="w-full rounded-lg border border-white/10 bg-slate-900/50 px-3 py-2.5 text-sm text-white focus:border-sky-500/50 focus:outline-none focus:ring-1 focus:ring-sky-500/50"
+ />
+ {unit && {unit}}
+
+
+
+
+
+ )
+}
+
+function Toggle({
+ label,
+ checked,
+ onChange,
+ tooltip,
+ disabled = false
+}: {
+ label: string
+ checked: boolean
+ onChange: (v: boolean) => void
+ tooltip?: string
+ disabled?: boolean
+}) {
+ return (
+
+ )
+}
+
+export default function AdvancedTuningPage() {
+ const [copied, setCopied] = useState(false)
+ const [config, setConfig] = useState
+ {/* Header */}
+
+ )
+}
diff --git a/consumer-guide/components.json b/consumer-guide/components.json
new file mode 100644
index 000000000..4ee62ee10
--- /dev/null
+++ b/consumer-guide/components.json
@@ -0,0 +1,21 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "new-york",
+ "rsc": true,
+ "tsx": true,
+ "tailwind": {
+ "config": "",
+ "css": "app/globals.css",
+ "baseColor": "neutral",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils",
+ "ui": "@/components/ui",
+ "lib": "@/lib",
+ "hooks": "@/hooks"
+ },
+ "iconLibrary": "lucide"
+}
diff --git a/consumer-guide/components/theme-provider.tsx b/consumer-guide/components/theme-provider.tsx
new file mode 100644
index 000000000..55c2f6eb6
--- /dev/null
+++ b/consumer-guide/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+ ThemeProvider as NextThemesProvider,
+ type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+ Quick Start
+
+
+
+
+
+ Advanced Tuning Guide
+RTX 4090 / RTX 5090 - All 27 Parameters
+
+ {/* Stats Bar */}
+
+
+
+
+
+
+
+
+
+
+ {videoLength}s
+
+
+
+
+ ~{estimatedTime}s
+
+
+
+
+ {(totalPixels / 1000000).toFixed(1)}M
+
+
+
+
+ {(computeCost / 1000000000).toFixed(2)}G
+
+ {/* Left Column - Parameters */}
+
+
+ {/* Category A - Model & Hardware */}
+
+
+
+ {/* Category B - Video Spec */}
+
+
+
+ {/* Category C - Quality */}
+
+
+
+ {/* Category D - Speed */}
+
+
+
+ {/* Category E - Memory */}
+
+
+
+
+ {/* Right Column - Output */}
+
+ updateConfig("workload_type", v)}
+ options={workloadOptions.map(w => ({ id: w.id, name: w.name }))}
+ tooltip="Task category. Determines which pipeline stages run."
+ />
+ updateConfig("gpu", v)}
+ options={gpuOptions.map(g => ({ id: g.id, name: `${g.name} (${g.vram})` }))}
+ tooltip="GPU model. Used for benchmark tracking and hardware-aware configuration."
+ />
+ updateConfig("num_gpus", v)}
+ min={1}
+ max={8}
+ tooltip="Values > 1 require use_fsdp_inference = true."
+ />
+
+
+ updateConfig("model_id", v)}
+ options={modelOptions.map(m => ({ id: m.id, name: `${m.name} (${m.size})` }))}
+ tooltip="HuggingFace model path - uniquely identifies the model weights and architecture."
+ />
+
+
+
+
+
+
+
+ {resolutionPresets.map((preset) => (
+
+ ))}
+
+
+ updateConfig("height", v)}
+ min={256}
+ max={2160}
+ step={8}
+ unit="px"
+ tooltip="Frame height in pixels. Must be divisible by 8 (VAE requirement)."
+ />
+ updateConfig("width", v)}
+ min={256}
+ max={3840}
+ step={8}
+ unit="px"
+ tooltip="Frame width in pixels. Must be divisible by 8."
+ />
+
+
+
+
+
+ {framePresets.map((preset) => (
+
+ ))}
+
+
+ updateConfig("num_frames", v)}
+ min={1}
+ max={240}
+ tooltip="Total number of frames to generate. Directly sets video duration at a given fps."
+ />
+ updateConfig("fps", v)}
+ min={1}
+ max={60}
+ tooltip="Frames per second for the output video. Does NOT affect generation time."
+ />
+
+
+
+
+
+
+
+ updateConfig("num_inference_steps", Number(e.target.value))}
+ className="flex-1 h-2 rounded-full bg-slate-700 appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-amber-400"
+ />
+ {config.num_inference_steps}
+
+
+ Draft (10)
+ Balanced (30)
+ High (80)
+
+
+
+
+
+ updateConfig("guidance_scale", Number(e.target.value))}
+ className="flex-1 h-2 rounded-full bg-slate-700 appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-amber-400"
+ />
+ {config.guidance_scale}
+
+
+ Loose (3)
+ Balanced (5)
+ Strict (8+)
+
+
+ updateConfig("embedded_cfg_scale", v)}
+ min={1}
+ max={10}
+ step={0.5}
+ tooltip="Model-level CFG signal passed into the DiT. Default: 6.0. Rarely change."
+ />
+ updateConfig("seed", v)}
+ min={-1}
+ tooltip="Random seed. Set to -1 for random. Fix a seed for reproducibility."
+ />
+
+
+
+
+
+
+ {config.attention_backend === "VIDEO_SPARSE_ATTN" && (
+
+ {attentionBackends.map((backend) => (
+
+ ))}
+
+
+
+
+ )}
+ {isFastWanDMD && config.gpu === "rtx4090" && (
+
+ updateConfig("VSA_sparsity", Number(e.target.value))}
+ className="flex-1 h-2 rounded-full bg-slate-700 appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-violet-400"
+ />
+ {config.VSA_sparsity}
+
+
+
+ )}
+
+
+
+ FastWan DMD uses 3-step distillation for ~10x faster generation.
+
+
+ dmd_steps: {config.dmd_denoising_steps}
+
+
+ updateConfig("dit_cpu_offload", v)}
+ tooltip="Offload entire DiT to RAM. Saves ~4GB, ~2-3x slower."
+ />
+ updateConfig("dit_layerwise_offload", v)}
+ tooltip="Layer-by-layer offload. Maximum VRAM saving (~8GB), ~4x slower."
+ />
+ updateConfig("vae_cpu_offload", v)}
+ tooltip="Offload VAE decoder. Saves ~2GB. Minimal time penalty."
+ />
+ updateConfig("text_encoder_cpu_offload", v)}
+ tooltip="Offload text encoder. Saves ~1-2GB. Runs once at start."
+ />
+ updateConfig("image_encoder_cpu_offload", v)}
+ tooltip="I2V/TI2V only. Saves ~1-2GB."
+ disabled={!isI2V}
+ />
+ updateConfig("pin_cpu_memory", v)}
+ tooltip="Pins RAM pages for faster PCIe DMA transfers. Always enable with any offload flag."
+ />
+ updateConfig("use_fsdp_inference", v)}
+ tooltip="Shards model weights across multiple GPUs via FSDP."
+ disabled={config.num_gpus <= 1}
+ />
+
+
+
+
+ Tip: For 24GB VRAM with 14B models, enable dit_cpu_offload + vae_cpu_offload + pin_cpu_memory.
+
+
+
+
+ {/* Generated Command */}
+
+
+
+
+ {/* Quick Reference */}
+
+
+
+
+
+
+ Generated Command
+
+
+
+ {command}
+
+
+
+ Quick Reference
+
+
+
+ Resolution
+ {config.width}x{config.height}
+
+
+ Frames
+ {config.num_frames}
+
+
+ Steps
+ {config.num_inference_steps}
+
+
+ Backend
+ {config.attention_backend}
+
+
+ Offloading
+
+ {[config.dit_cpu_offload && "DiT", config.vae_cpu_offload && "VAE"].filter(Boolean).join("+") || "None"}
+
+
+ {children}
+
+ {children}
+
+