perf(ui): use rfdc for deep copying of objects

- Add and use more performant `deepClone` method for deep copying throughout the UI.

Benchmarks indicate the Really Fast Deep Clone library (`rfdc`) is the best all-around way to deep-clone large objects.

This is particularly relevant in canvas. When drawing or otherwise manipulating canvas objects, we need to do a lot of deep cloning of the canvas layer state objects.

Previously, we were using lodash's `cloneDeep`.

I did some fairly realistic benchmarks with a handful of deep-cloning algorithms/libraries (including the native `structuredClone`). I used a snapshot of the canvas state as the data to be copied:

On Chromium, `rfdc` is by far the fastest, over an order of magnitude faster than `cloneDeep`.

On FF, `fastest-json-copy` and `recursiveDeepCopy` are even faster, but are rather limited in data types. `rfdc`, while only half as fast as the former 2, is still nearly an order of magnitude faster than `cloneDeep`.

On Safari, `structuredClone` is the fastest, about 2x as fast as `cloneDeep`. `rfdc` is only 30% faster than `cloneDeep`.

`rfdc`'s peak memory usage is about 10% more than `cloneDeep` on Chrome. I couldn't get memory measurements from FF and Safari, but let's just assume the memory usage is similar relative to the other algos.

Overall, `rfdc` is the best choice for a single algo for all browsers. It's definitely the best for Chromium, by far the most popular desktop browser and thus our primary target.

A future enhancement might be to detect the browser and use that to determine which algorithm to use.

invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts

@@ -2,10 +2,11 @@ import type { PayloadAction, Update } from '@reduxjs/toolkit';
 import { createEntityAdapter, createSlice, isAnyOf } from '@reduxjs/toolkit';
 import { getSelectorsOptions } from 'app/store/createMemoizedSelector';
 import type { PersistConfig, RootState } from 'app/store/store';
+import { deepClone } from 'common/util/deepClone';
 import { buildControlAdapter } from 'features/controlAdapters/util/buildControlAdapter';
 import { buildControlAdapterProcessor } from 'features/controlAdapters/util/buildControlAdapterProcessor';
 import { zModelIdentifierField } from 'features/nodes/types/common';
-import { cloneDeep, merge, uniq } from 'lodash-es';
+import { merge, uniq } from 'lodash-es';
 import type { ControlNetModelConfig, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
 import { socketInvocationError } from 'services/events/actions';
 import { v4 as uuidv4 } from 'uuid';
@@ -114,7 +115,7 @@ export const controlAdaptersSlice = createSlice({
         if (!controlAdapter) {
           return;
         }
-        const newControlAdapter = merge(cloneDeep(controlAdapter), {
+        const newControlAdapter = merge(deepClone(controlAdapter), {
           id: newId,
           isEnabled: true,
         });
@@ -270,7 +271,7 @@ export const controlAdaptersSlice = createSlice({
         return;
       }
 
-      const processorNode = merge(cloneDeep(cn.processorNode), params);
+      const processorNode = merge(deepClone(cn.processorNode), params);
 
       caAdapter.updateOne(state, {
         id,
@@ -293,7 +294,7 @@ export const controlAdaptersSlice = createSlice({
         return;
       }
 
-      const processorNode = cloneDeep(
+      const processorNode = deepClone(
         CONTROLNET_PROCESSORS[processorType].buildDefaults(cn.model?.base)
       ) as RequiredControlAdapterProcessorNode;
 
@@ -333,7 +334,7 @@ export const controlAdaptersSlice = createSlice({
       caAdapter.updateOne(state, update);
     },
     controlAdaptersReset: () => {
-      return cloneDeep(initialControlAdaptersState);
+      return deepClone(initialControlAdaptersState);
     },
     pendingControlImagesCleared: (state) => {
       state.pendingControlImages = [];
@@ -406,7 +407,7 @@ const migrateControlAdaptersState = (state: any): any => {
     state._version = 1;
   }
   if (state._version === 1) {
-    state = cloneDeep(initialControlAdaptersState);
+    state = deepClone(initialControlAdaptersState);
   }
   return state;
 };

invokeai/frontend/web/src/features/controlAdapters/util/buildControlAdapter.ts

@@ -1,3 +1,4 @@
+import { deepClone } from 'common/util/deepClone';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type {
   ControlAdapterConfig,
@@ -7,7 +8,7 @@ import type {
   RequiredCannyImageProcessorInvocation,
   T2IAdapterConfig,
 } from 'features/controlAdapters/store/types';
-import { cloneDeep, merge } from 'lodash-es';
+import { merge } from 'lodash-es';
 
 export const initialControlNet: Omit<ControlNetConfig, 'id'> = {
   type: 'controlnet',
@@ -57,11 +58,11 @@ export const buildControlAdapter = (
 ): ControlAdapterConfig => {
   switch (type) {
     case 'controlnet':
-      return merge(cloneDeep(initialControlNet), { id, ...overrides });
+      return merge(deepClone(initialControlNet), { id, ...overrides });
     case 't2i_adapter':
-      return merge(cloneDeep(initialT2IAdapter), { id, ...overrides });
+      return merge(deepClone(initialT2IAdapter), { id, ...overrides });
     case 'ip_adapter':
-      return merge(cloneDeep(initialIPAdapter), { id, ...overrides });
+      return merge(deepClone(initialIPAdapter), { id, ...overrides });
     default:
       throw new Error(`Unknown control adapter type: ${type}`);
   }