MagCache

frontend/src/components/SettingsPanel.tsx

@@ -66,6 +66,12 @@ interface SettingsPanelProps {
   onNoiseControllerChange?: (enabled: boolean) => void;
   manageCache?: boolean;
   onManageCacheChange?: (enabled: boolean) => void;
+  useMagcache?: boolean;
+  onUseMagcacheChange?: (enabled: boolean) => void;
+  magcacheThresh?: number;
+  onMagcacheThreshChange?: (thresh: number) => void;
+  magcacheK?: number;
+  onMagcacheKChange?: (k: number) => void;
   quantization?: "fp8_e4m3fn" | null;
   onQuantizationChange?: (quantization: "fp8_e4m3fn" | null) => void;
   kvCacheAttentionBias?: number;
@@ -123,6 +129,12 @@ export function SettingsPanel({
   onNoiseControllerChange,
   manageCache = true,
   onManageCacheChange,
+  useMagcache = false,
+  onUseMagcacheChange,
+  magcacheThresh = 0.12,
+  onMagcacheThreshChange,
+  magcacheK = 4,
+  onMagcacheKChange,
   quantization = "fp8_e4m3fn",
   onQuantizationChange,
   kvCacheAttentionBias = 0.3,
@@ -160,6 +172,11 @@ export function SettingsPanel({
     vaceContextScale,
     onVaceContextScaleChange
   );
+  const magcacheThreshSlider = useLocalSliderValue(
+    magcacheThresh,
+    onMagcacheThreshChange
+  );
+  const magcacheKSlider = useLocalSliderValue(magcacheK, onMagcacheKChange);
 
   // Validation error states
   const [heightError, setHeightError] = useState<string | null>(null);
@@ -746,6 +763,61 @@ export function SettingsPanel({
           <div className="space-y-4">
             <div className="space-y-2">
               <div className="space-y-2 pt-2">
+                {/* MagCache toggle - shown for pipelines that support it */}
+                {pipelines?.[pipelineId]?.supportsMagcache && (
+                  <>
+                    <div className="flex items-center justify-between gap-2">
+                      <LabelWithTooltip
+                        label={PARAMETER_METADATA.useMagcache.label}
+                        tooltip={PARAMETER_METADATA.useMagcache.tooltip}
+                        className="text-sm text-foreground"
+                      />
+                      <Toggle
+                        pressed={useMagcache}
+                        onPressedChange={onUseMagcacheChange || (() => {})}
+                        variant="outline"
+                        size="sm"
+                        className="h-7"
+                      >
+                        {useMagcache ? "ON" : "OFF"}
+                      </Toggle>
+                    </div>
+                    {/* MagCache quality controls - only shown when MagCache is enabled */}
+                    {useMagcache && (
+                      <>
+                        <SliderWithInput
+                          label={PARAMETER_METADATA.magcacheThresh.label}
+                          tooltip={PARAMETER_METADATA.magcacheThresh.tooltip}
+                          value={magcacheThreshSlider.localValue}
+                          onValueChange={magcacheThreshSlider.handleValueChange}
+                          onValueCommit={magcacheThreshSlider.handleValueCommit}
+                          min={0.05}
+                          max={0.5}
+                          step={0.01}
+                          incrementAmount={0.01}
+                          labelClassName="text-sm text-foreground w-28"
+                          valueFormatter={magcacheThreshSlider.formatValue}
+                          inputParser={v => parseFloat(v) || 0.12}
+                        />
+                        <SliderWithInput
+                          label={PARAMETER_METADATA.magcacheK.label}
+                          tooltip={PARAMETER_METADATA.magcacheK.tooltip}
+                          value={magcacheKSlider.localValue}
+                          onValueChange={magcacheKSlider.handleValueChange}
+                          onValueCommit={magcacheKSlider.handleValueCommit}
+                          min={1}
+                          max={4}
+                          step={1}
+                          incrementAmount={1}
+                          labelClassName="text-sm text-foreground w-28"
+                          valueFormatter={(v: number) => Math.round(v)}
+                          inputParser={v => parseInt(v) || 2}
+                        />
+                      </>
+                    )}
+                  </>
+                )}
+
                 {/* KV Cache bias control - shown for pipelines that support it */}
                 {pipelines?.[pipelineId]?.supportsKvCacheBias && (
                   <SliderWithInput

frontend/src/data/parameterMetadata.ts

@@ -32,6 +32,21 @@ export const PARAMETER_METADATA: Record<string, ParameterMetadata> = {
     tooltip:
       "Enables pipeline to automatically manage the cache which influences newly generated frames. Disable for manual control via Reset Cache.",
   },
+  useMagcache: {
+    label: "MagCache:",
+    tooltip:
+      "Enables MagCache (magnitude-aware residual caching) to skip redundant denoising steps for faster inference. Toggle during a live stream to compare speed vs quality.",
+  },
+  magcacheThresh: {
+    label: "MagCache Threshold:",
+    tooltip:
+      "Controls quality vs speed tradeoff. Lower values (0.05-0.08) = better quality, fewer skips. Higher values (0.15-0.25) = faster, more skips. Default: 0.12",
+  },
+  magcacheK: {
+    label: "MagCache Max Skips:",
+    tooltip:
+      "Maximum consecutive denoising steps to skip before forcing a compute. Lower values (1) = better quality. Higher values (3-4) = faster but may cause instability. Default: 2",
+  },
   resetCache: {
     label: "Reset Cache:",
     tooltip:

frontend/src/hooks/usePipelines.ts

@@ -65,6 +65,7 @@ export function usePipelines() {
             supportsCacheManagement: schema.supports_cache_management,
             supportsKvCacheBias: schema.supports_kv_cache_bias,
             supportsQuantization: schema.supports_quantization,
+            supportsMagcache: schema.supports_magcache,
             minDimension: schema.min_dimension,
             recommendedQuantizationVramThreshold:
               schema.recommended_quantization_vram_threshold ?? undefined,

frontend/src/hooks/useStreamState.ts

@@ -150,6 +150,9 @@ export function useStreamState() {
     noiseScale: initialDefaults.noiseScale,
     noiseController: initialDefaults.noiseController,
     manageCache: true,
+    useMagcache: false,
+    magcacheThresh: 0.12,
+    magcacheK: 2,
     quantization: null,
     kvCacheAttentionBias: 0.3,
     paused: false,

frontend/src/hooks/useWebRTC.ts

@@ -16,6 +16,9 @@ interface InitialParameters {
   noise_scale?: number;
   noise_controller?: boolean;
   manage_cache?: boolean;
+  use_magcache?: boolean;
+  magcache_thresh?: number;
+  magcache_K?: number;
   kv_cache_attention_bias?: number;
   vace_ref_images?: string[];
   vace_context_scale?: number;
@@ -324,6 +327,9 @@ export function useWebRTC(options?: UseWebRTCOptions) {
       noise_scale?: number;
       noise_controller?: boolean;
       manage_cache?: boolean;
+      use_magcache?: boolean;
+      magcache_thresh?: number;
+      magcache_K?: number;
       reset_cache?: boolean;
       kv_cache_attention_bias?: number;
       paused?: boolean;

frontend/src/lib/api.ts

@@ -22,11 +22,16 @@ export interface WebRTCOfferRequest {
     noise_scale?: number;
     noise_controller?: boolean;
     manage_cache?: boolean;
+    use_magcache?: boolean;
+    magcache_thresh?: number;
+    magcache_K?: number;
     kv_cache_attention_bias?: number;
     vace_ref_images?: string[];
     vace_context_scale?: number;
     pipeline_ids?: string[];
     images?: string[];
+    first_frame_image?: string;
+    last_frame_image?: string;
   };
 }
 
@@ -390,6 +395,7 @@ export interface PipelineSchemaInfo {
   requires_models: boolean;
   supports_lora: boolean;
   supports_vace: boolean;
+  supports_magcache?: boolean;
   usage: string[];
   // Pipeline config schema
   config_schema: PipelineConfigSchema;

frontend/src/pages/StreamPage.tsx

@@ -524,6 +524,30 @@ export function StreamPage() {
     });
   };
 
+  const handleUseMagcacheChange = (enabled: boolean) => {
+    updateSettings({ useMagcache: enabled });
+    // Send MagCache update to backend (runtime)
+    sendParameterUpdate({
+      use_magcache: enabled,
+    });
+  };
+
+  const handleMagcacheThreshChange = (thresh: number) => {
+    updateSettings({ magcacheThresh: thresh });
+    // Send MagCache threshold update to backend (runtime)
+    sendParameterUpdate({
+      magcache_thresh: thresh,
+    });
+  };
+
+  const handleMagcacheKChange = (k: number) => {
+    updateSettings({ magcacheK: k });
+    // Send MagCache K update to backend (runtime)
+    sendParameterUpdate({
+      magcache_K: k,
+    });
+  };
+
   const handleQuantizationChange = (quantization: "fp8_e4m3fn" | null) => {
     updateSettings({ quantization });
     // Note: This setting requires pipeline reload, so we don't send parameter update here
@@ -976,6 +1000,7 @@ export function StreamPage() {
         noise_scale?: number;
         noise_controller?: boolean;
         manage_cache?: boolean;
+        use_magcache?: boolean;
         kv_cache_attention_bias?: number;
         spout_sender?: { enabled: boolean; name: string };
         spout_receiver?: { enabled: boolean; name: string };
@@ -1007,6 +1032,11 @@ export function StreamPage() {
         initialParameters.manage_cache = settings.manageCache ?? true;
       }
 
+      // MagCache for pipelines that support it
+      if (currentPipeline?.supportsMagcache) {
+        initialParameters.use_magcache = settings.useMagcache ?? false;
+      }
+
       // KV cache bias for pipelines that support it
       if (currentPipeline?.supportsKvCacheBias) {
         initialParameters.kv_cache_attention_bias =
@@ -1356,6 +1386,12 @@ export function StreamPage() {
             onNoiseControllerChange={handleNoiseControllerChange}
             manageCache={settings.manageCache ?? true}
             onManageCacheChange={handleManageCacheChange}
+            useMagcache={settings.useMagcache ?? false}
+            onUseMagcacheChange={handleUseMagcacheChange}
+            magcacheThresh={settings.magcacheThresh ?? 0.12}
+            onMagcacheThreshChange={handleMagcacheThreshChange}
+            magcacheK={settings.magcacheK ?? 4}
+            onMagcacheKChange={handleMagcacheKChange}
             quantization={
               settings.quantization !== undefined
                 ? settings.quantization

frontend/src/types/index.ts

@@ -59,6 +59,9 @@ export interface SettingsState {
   noiseScale?: number;
   noiseController?: boolean;
   manageCache?: boolean;
+  useMagcache?: boolean;
+  magcacheThresh?: number;
+  magcacheK?: number;
   quantization?: "fp8_e4m3fn" | null;
   kvCacheAttentionBias?: number;
   paused?: boolean;
@@ -117,6 +120,7 @@ export interface PipelineInfo {
   supportsCacheManagement?: boolean;
   supportsKvCacheBias?: boolean;
   supportsQuantization?: boolean;
+  supportsMagcache?: boolean;
   minDimension?: number;
   recommendedQuantizationVramThreshold?: number | null;
   // Available VAE types from config schema enum (derived from vae_type field presence)

src/scope/core/pipelines/base_schema.py

@@ -181,6 +181,7 @@ class BasePipelineConfig(BaseModel):
     supports_cache_management: ClassVar[bool] = False
     supports_kv_cache_bias: ClassVar[bool] = False
     supports_quantization: ClassVar[bool] = False
+    supports_magcache: ClassVar[bool] = False
     min_dimension: ClassVar[int] = 1
     # Whether this pipeline contains modifications based on the original project
     modified: ClassVar[bool] = False
@@ -232,6 +233,16 @@ class BasePipelineConfig(BaseModel):
     ref_images: list[str] | None = ref_images_field()
     vace_context_scale: float = vace_context_scale_field()
 
+    # MagCache quality parameters (only used when supports_magcache=True)
+    magcache_thresh: Annotated[float, Field(ge=0.05, le=0.5)] = Field(
+        default=0.12,
+        description="MagCache error threshold - higher values allow more skipping (faster but lower quality)",
+    )
+    magcache_K: Annotated[int, Field(ge=1, le=4)] = Field(
+        default=2,
+        description="MagCache max consecutive skips - higher values allow more skipping but may cause instability",
+    )
+
     @classmethod
     def get_pipeline_metadata(cls) -> dict[str, str]:
         """Return pipeline identification metadata.
@@ -321,6 +332,7 @@ def get_schema_with_metadata(cls) -> dict[str, Any]:
         metadata["supports_cache_management"] = cls.supports_cache_management
         metadata["supports_kv_cache_bias"] = cls.supports_kv_cache_bias
         metadata["supports_quantization"] = cls.supports_quantization
+        metadata["supports_magcache"] = cls.supports_magcache
         metadata["min_dimension"] = cls.min_dimension
         metadata["recommended_quantization_vram_threshold"] = (
             cls.recommended_quantization_vram_threshold

src/scope/core/pipelines/krea_realtime_video/pipeline.py

@@ -181,6 +181,7 @@ def __init__(
         self.state.set("current_start_frame", 0)
         self.state.set("manage_cache", True)
         self.state.set("kv_cache_attention_bias", DEFAULT_KV_CACHE_ATTENTION_BIAS)
+        self.state.set("use_magcache", False)
 
         self.state.set("height", config.height)
         self.state.set("width", config.width)