fix(ui): migrate redux state that has models

With the change to model identifiers from v3 to v4, if a user had persisted redux state with the old format, we could get unexpected runtime errors when rehydrating state if we try to access model attributes that no longer exist.

For example, the CLIP Skip component does this:

```ts
CLIP_SKIP_MAP[model.base].maxClip
```

In v3, models had a `base_type` attribute, but it is renamed to `base` in v4. This code therefore causes a runtime error:
- `model.base` is `undefined`
- `CLIP_SKIP_MAP[undefined]` is also undefined
- `undefined.maxClip` is a runtime error!

Resolved by adding a migration for the redux slices that have model identifiers. The migration simply resets the slice or the part of the slice that is affected, when it's simple to do a partial reset.

Closes #6000

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

@@ -37,10 +37,10 @@ export const {
 } = caAdapterSelectors;
 
 const initialControlAdaptersState: ControlAdaptersState = caAdapter.getInitialState<{
-  _version: 1;
+  _version: 2;
   pendingControlImages: string[];
 }>({
-  _version: 1,
+  _version: 2,
   pendingControlImages: [],
 });
 
@@ -405,6 +405,9 @@ const migrateControlAdaptersState = (state: any): any => {
   if (!('_version' in state)) {
     state._version = 1;
   }
+  if (state._version === 1) {
+    state = cloneDeep(initialControlAdaptersState);
+  }
   return state;
 };
 

invokeai/frontend/web/src/features/lora/store/loraSlice.ts

@@ -18,12 +18,12 @@ export const defaultLoRAConfig: Pick<LoRA, 'weight' | 'isEnabled'> = {
 };
 
 type LoraState = {
-  _version: 1;
+  _version: 2;
   loras: Record<string, LoRA>;
 };
 
 const initialLoraState: LoraState = {
-  _version: 1,
+  _version: 2,
   loras: {},
 };
 
@@ -72,6 +72,10 @@ const migrateLoRAState = (state: any): any => {
   if (!('_version' in state)) {
     state._version = 1;
   }
+  if (state._version === 1) {
+    // Model type has changed, so we need to reset the state - too risky to migrate
+    state = cloneDeep(initialLoraState);
+  }
   return state;
 };
 

invokeai/frontend/web/src/features/parameters/store/generationSlice.ts

@@ -24,7 +24,7 @@ import type { ImageDTO } from 'services/api/types';
 import type { GenerationState } from './types';
 
 const initialGenerationState: GenerationState = {
-  _version: 1,
+  _version: 2,
   cfgScale: 7.5,
   cfgRescaleMultiplier: 0,
   height: 512,
@@ -276,6 +276,11 @@ const migrateGenerationState = (state: any): GenerationState => {
     state._version = 1;
     state.aspectRatio = initialAspectRatioState;
   }
+  if (state._version === 1) {
+    // The signature of the model has changed, so we need to reset it
+    state._version = 2;
+    state.model = null;
+  }
   return state;
 };
 

invokeai/frontend/web/src/features/parameters/store/types.ts

@@ -19,7 +19,7 @@ import type {
 } from 'features/parameters/types/parameterSchemas';
 
 export interface GenerationState {
-  _version: 1;
+  _version: 2;
   cfgScale: ParameterCFGScale;
   cfgRescaleMultiplier: ParameterCFGRescaleMultiplier;
   height: ParameterHeight;

invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts

@@ -9,7 +9,7 @@ import type {
 } from 'features/parameters/types/parameterSchemas';
 
 type SDXLState = {
-  _version: 1;
+  _version: 2;
   positiveStylePrompt: ParameterPositiveStylePromptSDXL;
   negativeStylePrompt: ParameterNegativeStylePromptSDXL;
   shouldConcatSDXLStylePrompt: boolean;
@@ -23,7 +23,7 @@ type SDXLState = {
 };
 
 const initialSDXLState: SDXLState = {
-  _version: 1,
+  _version: 2,
   positiveStylePrompt: '',
   negativeStylePrompt: '',
   shouldConcatSDXLStylePrompt: true,
@@ -93,6 +93,11 @@ const migrateSDXLState = (state: any): any => {
   if (!('_version' in state)) {
     state._version = 1;
   }
+  if (state._version === 1) {
+    // Model type has changed, so we need to reset the state - too risky to migrate
+    state._version = 2;
+    state.refinerModel = null;
+  }
   return state;
 };