fix(ui): Fix LoRA picker to default to current base model architecture (#8135)

Enhance LoRA picker to default filter by current base model architecture

## Summary
Fixes new LoRA picker to auto select the architecture filter for the
current model group

## Related Issues / Discussions
N/A

## QA Instructions

Open LoRA menu with any model group selected. The right models should be
filtered.

## Merge Plan
Merge when ready.

## Checklist

- [X] _The PR has a short but descriptive title, suitable for a
changelog_
- [ ] _Tests added / updated (if applicable)_
- [ ] _Documentation added / updated (if applicable)_
- [ ] _Updated `What's New` copy (if doing a release after this PR)_

Author: psychedelicious

invokeai/frontend/web/src/common/components/Picker/Picker.tsx

@@ -198,6 +198,10 @@ type PickerProps<T extends object> = {
    * Whether the picker should be searchable. If true, renders a search input.
    */
   searchable?: boolean;
+  /**
+   * Initial state for group toggles. If provided, groups will start with these states instead of all being disabled.
+   */
+  initialGroupStates?: GroupStatusMap;
 };
 
 export type PickerContextState<T extends object> = {
@@ -310,9 +314,9 @@ const flattenOptions = <T extends object>(options: OptionOrGroup<T>[]): T[] => {
   return flattened;
 };
 
-type GroupStatusMap = Record<string, boolean>;
+export type GroupStatusMap = Record<string, boolean>;
 
-const useTogglableGroups = <T extends object>(options: OptionOrGroup<T>[]) => {
+const useTogglableGroups = <T extends object>(options: OptionOrGroup<T>[], initialGroupStates?: GroupStatusMap) => {
   const groupsWithOptions = useMemo(() => {
     const ids: string[] = [];
     for (const optionOrGroup of options) {
@@ -332,14 +336,16 @@ const useTogglableGroups = <T extends object>(options: OptionOrGroup<T>[]) => {
     const groupStatusMap = $groupStatusMap.get();
     const newMap: GroupStatusMap = {};
     for (const id of groupsWithOptions) {
-      if (newMap[id] === undefined) {
-        newMap[id] = false;
+      if (initialGroupStates && initialGroupStates[id] !== undefined) {
+        newMap[id] = initialGroupStates[id];
       } else if (groupStatusMap[id] !== undefined) {
         newMap[id] = groupStatusMap[id];
+      } else {
+        newMap[id] = false;
       }
     }
     $groupStatusMap.set(newMap);
-  }, [groupsWithOptions, $groupStatusMap]);
+  }, [groupsWithOptions, $groupStatusMap, initialGroupStates]);
 
   const toggleGroup = useCallback(
     (idToToggle: string) => {
@@ -511,10 +517,14 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
     OptionComponent = DefaultOptionComponent,
     NextToSearchBar,
     searchable,
+    initialGroupStates,
   } = props;
   const rootRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const { $groupStatusMap, $areAllGroupsDisabled, toggleGroup } = useTogglableGroups(optionsOrGroups);
+  const { $groupStatusMap, $areAllGroupsDisabled, toggleGroup } = useTogglableGroups(
+    optionsOrGroups,
+    initialGroupStates
+  );
   const $activeOptionId = useAtom(getFirstOptionId(optionsOrGroups, getOptionId));
   const $compactView = useAtom(true);
   const $optionsOrGroups = useAtom(optionsOrGroups);

invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx

@@ -2,10 +2,12 @@ import { FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
+import type { GroupStatusMap } from 'common/components/Picker/Picker';
 import { useRelatedGroupedModelCombobox } from 'common/hooks/useRelatedGroupedModelCombobox';
 import { loraAdded, selectLoRAsSlice } from 'features/controlLayers/store/lorasSlice';
 import { selectBase } from 'features/controlLayers/store/paramsSlice';
 import { ModelPicker } from 'features/parameters/components/ModelPicker';
+import { API_BASE_MODELS } from 'features/parameters/types/constants';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLoRAModels } from 'services/api/hooks/modelsByType';
@@ -58,6 +60,19 @@ const LoRASelect = () => {
     return t('models.addLora');
   }, [isLoading, options.length, t]);
 
+  // Calculate initial group states to default to the current base model architecture
+  const initialGroupStates = useMemo(() => {
+    if (!currentBaseModel) {
+      return undefined;
+    }
+
+    // Determine the group ID for the current base model
+    const groupId = API_BASE_MODELS.includes(currentBaseModel) ? 'api' : currentBaseModel;
+
+    // Return a map with only the current base model group enabled
+    return { [groupId]: true } satisfies GroupStatusMap;
+  }, [currentBaseModel]);
+
   return (
     <FormControl gap={2}>
       <InformationalPopover feature="lora">
@@ -72,6 +87,7 @@ const LoRASelect = () => {
         placeholder={placeholder}
         getIsOptionDisabled={getIsDisabled}
         noOptionsText={t('models.noLoRAsInstalled')}
+        initialGroupStates={initialGroupStates}
       />
     </FormControl>
   );

invokeai/frontend/web/src/features/parameters/components/ModelPicker.tsx

@@ -125,6 +125,7 @@ export const ModelPicker = typedMemo(
     isInvalid,
     className,
     noOptionsText,
+    initialGroupStates,
   }: {
     modelConfigs: T[];
     selectedModelConfig: T | undefined;
@@ -137,6 +138,7 @@ export const ModelPicker = typedMemo(
     isInvalid?: boolean;
     className?: string;
     noOptionsText?: string;
+    initialGroupStates?: Record<string, boolean>;
   }) => {
     const { t } = useTranslation();
     const options = useMemo<T[] | Group<T>[]>(() => {
@@ -244,6 +246,7 @@ export const ModelPicker = typedMemo(
                 NextToSearchBar={<NavigateToModelManagerButton />}
                 getIsOptionDisabled={getIsOptionDisabled}
                 searchable
+                initialGroupStates={initialGroupStates}
               />
             </PopoverBody>
           </PopoverContent>