wip

invoke-ai · Feb 25, 2024 · ebfcbf1 · ebfcbf1
1 parent ee30d33
commit ebfcbf1
Show file tree

Hide file tree

Showing 10 changed files with 291 additions and 286 deletions.
diff --git a/...frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx b/...frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
@@ -1,5 +1,8 @@
+import { MetadataControlNets } from 'features/metadata/components/MetadataControlNets';
+import { MetadataIPAdapters } from 'features/metadata/components/MetadataIPAdapters';
 import { MetadataItem } from 'features/metadata/components/MetadataItem';
 import { MetadataLoRAs } from 'features/metadata/components/MetadataLoRAs';
+import { MetadataT2IAdapters } from 'features/metadata/components/MetadataT2IAdapters';
 import { handlers } from 'features/metadata/util/handlers';
 import { memo } from 'react';
 
@@ -16,193 +19,36 @@ const ImageMetadataActions = (props: Props) => {
 
   return (
     <>
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.createdBy.getLabel}
-        parse={handlers.createdBy.parse}
-        recall={handlers.createdBy.recall}
-        renderValue={handlers.createdBy.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.generationMode.getLabel}
-        parse={handlers.generationMode.parse}
-        recall={handlers.generationMode.recall}
-        renderValue={handlers.generationMode.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.positivePrompt.getLabel}
-        parse={handlers.positivePrompt.parse}
-        recall={handlers.positivePrompt.recall}
-        renderValue={handlers.positivePrompt.renderValue}
-        direction="column"
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.negativePrompt.getLabel}
-        parse={handlers.negativePrompt.parse}
-        recall={handlers.negativePrompt.recall}
-        renderValue={handlers.negativePrompt.renderValue}
-        direction="column"
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.sdxlPositiveStylePrompt.getLabel}
-        parse={handlers.sdxlPositiveStylePrompt.parse}
-        recall={handlers.sdxlPositiveStylePrompt.recall}
-        renderValue={handlers.sdxlPositiveStylePrompt.renderValue}
-        direction="column"
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.sdxlNegativeStylePrompt.getLabel}
-        parse={handlers.sdxlNegativeStylePrompt.parse}
-        recall={handlers.sdxlNegativeStylePrompt.recall}
-        renderValue={handlers.sdxlNegativeStylePrompt.renderValue}
-        direction="column"
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.model.getLabel}
-        parse={handlers.model.parse}
-        recall={handlers.model.recall}
-        renderValue={handlers.model.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.vae.getLabel}
-        parse={handlers.vae.parse}
-        recall={handlers.vae.recall}
-        renderValue={handlers.vae.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.width.getLabel}
-        parse={handlers.width.parse}
-        recall={handlers.width.recall}
-        renderValue={handlers.width.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.height.getLabel}
-        parse={handlers.height.parse}
-        recall={handlers.height.recall}
-        renderValue={handlers.height.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.seed.getLabel}
-        parse={handlers.seed.parse}
-        recall={handlers.seed.recall}
-        renderValue={handlers.seed.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.steps.getLabel}
-        parse={handlers.steps.parse}
-        recall={handlers.steps.recall}
-        renderValue={handlers.steps.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.scheduler.getLabel}
-        parse={handlers.scheduler.parse}
-        recall={handlers.scheduler.recall}
-        renderValue={handlers.scheduler.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.cfgScale.getLabel}
-        parse={handlers.cfgScale.parse}
-        recall={handlers.cfgScale.recall}
-        renderValue={handlers.cfgScale.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.cfgRescaleMultiplier.getLabel}
-        parse={handlers.cfgRescaleMultiplier.parse}
-        recall={handlers.cfgRescaleMultiplier.recall}
-        renderValue={handlers.cfgRescaleMultiplier.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.strength.getLabel}
-        parse={handlers.strength.parse}
-        recall={handlers.strength.recall}
-        renderValue={handlers.strength.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.hrfEnabled.getLabel}
-        parse={handlers.hrfEnabled.parse}
-        recall={handlers.hrfEnabled.recall}
-        renderValue={handlers.hrfEnabled.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.hrfMethod.getLabel}
-        parse={handlers.hrfMethod.parse}
-        recall={handlers.hrfMethod.recall}
-        renderValue={handlers.hrfMethod.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.hrfStrength.getLabel}
-        parse={handlers.hrfStrength.parse}
-        recall={handlers.hrfStrength.recall}
-        renderValue={handlers.hrfStrength.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerCFGScale.getLabel}
-        parse={handlers.refinerCFGScale.parse}
-        recall={handlers.refinerCFGScale.recall}
-        renderValue={handlers.refinerCFGScale.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerModel.getLabel}
-        parse={handlers.refinerModel.parse}
-        recall={handlers.refinerModel.recall}
-        renderValue={handlers.refinerModel.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerNegativeAestheticScore.getLabel}
-        parse={handlers.refinerNegativeAestheticScore.parse}
-        recall={handlers.refinerNegativeAestheticScore.recall}
-        renderValue={handlers.refinerNegativeAestheticScore.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerPositiveAestheticScore.getLabel}
-        parse={handlers.refinerPositiveAestheticScore.parse}
-        recall={handlers.refinerPositiveAestheticScore.recall}
-        renderValue={handlers.refinerPositiveAestheticScore.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerScheduler.getLabel}
-        parse={handlers.refinerScheduler.parse}
-        recall={handlers.refinerScheduler.recall}
-        renderValue={handlers.refinerScheduler.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerStart.getLabel}
-        parse={handlers.refinerStart.parse}
-        recall={handlers.refinerStart.recall}
-        renderValue={handlers.refinerStart.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerSteps.getLabel}
-        parse={handlers.refinerSteps.parse}
-        recall={handlers.refinerSteps.recall}
-        renderValue={handlers.refinerSteps.renderValue}
-      />
+      <MetadataItem metadata={metadata} handlers={handlers.createdBy} />
+      <MetadataItem metadata={metadata} handlers={handlers.generationMode} />
+      <MetadataItem metadata={metadata} handlers={handlers.positivePrompt} direction="column" />
+      <MetadataItem metadata={metadata} handlers={handlers.negativePrompt} direction="column" />
+      <MetadataItem metadata={metadata} handlers={handlers.sdxlPositiveStylePrompt} direction="column" />
+      <MetadataItem metadata={metadata} handlers={handlers.sdxlNegativeStylePrompt} direction="column" />
+      <MetadataItem metadata={metadata} handlers={handlers.model} />
+      <MetadataItem metadata={metadata} handlers={handlers.vae} />
+      <MetadataItem metadata={metadata} handlers={handlers.width} />
+      <MetadataItem metadata={metadata} handlers={handlers.height} />
+      <MetadataItem metadata={metadata} handlers={handlers.seed} />
+      <MetadataItem metadata={metadata} handlers={handlers.steps} />
+      <MetadataItem metadata={metadata} handlers={handlers.scheduler} />
+      <MetadataItem metadata={metadata} handlers={handlers.cfgScale} />
+      <MetadataItem metadata={metadata} handlers={handlers.cfgRescaleMultiplier} />
+      <MetadataItem metadata={metadata} handlers={handlers.strength} />
+      <MetadataItem metadata={metadata} handlers={handlers.hrfEnabled} />
+      <MetadataItem metadata={metadata} handlers={handlers.hrfMethod} />
+      <MetadataItem metadata={metadata} handlers={handlers.hrfStrength} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerCFGScale} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerModel} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerNegativeAestheticScore} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerPositiveAestheticScore} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerScheduler} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerStart} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerSteps} />
       <MetadataLoRAs metadata={metadata} />
+      <MetadataControlNets metadata={metadata} />
+      <MetadataT2IAdapters metadata={metadata} />
+      <MetadataIPAdapters metadata={metadata} />
     </>
   );
 };

diff --git a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
@@ -23,29 +23,29 @@ type LoRACardProps = {
 export const LoRACard = memo((props: LoRACardProps) => {
   const { lora } = props;
   const dispatch = useAppDispatch();
-  const { data: loraConfig } = useGetModelConfigQuery(lora.key);
+  const { data: loraConfig } = useGetModelConfigQuery(lora.model.key);
 
   const handleChange = useCallback(
     (v: number) => {
-      dispatch(loraWeightChanged({ key: lora.key, weight: v }));
+      dispatch(loraWeightChanged({ key: lora.model.key, weight: v }));
     },
-    [dispatch, lora.key]
+    [dispatch, lora.model.key]
   );
 
   const handleSetLoraToggle = useCallback(() => {
-    dispatch(loraIsEnabledChanged({ key: lora.key, isEnabled: !lora.isEnabled }));
-  }, [dispatch, lora.key, lora.isEnabled]);
+    dispatch(loraIsEnabledChanged({ key: lora.model.key, isEnabled: !lora.isEnabled }));
+  }, [dispatch, lora.model.key, lora.isEnabled]);
 
   const handleRemoveLora = useCallback(() => {
-    dispatch(loraRemoved(lora.key));
-  }, [dispatch, lora.key]);
+    dispatch(loraRemoved(lora.model.key));
+  }, [dispatch, lora.model.key]);
 
   return (
     <Card variant="lora">
       <CardHeader>
         <Flex alignItems="center" justifyContent="space-between" width="100%" gap={2}>
           <Text noOfLines={1} wordBreak="break-all" color={lora.isEnabled ? 'base.200' : 'base.500'}>
-            {loraConfig?.name ?? lora.key.substring(0, 8)}
+            {loraConfig?.name ?? lora.model.key.substring(0, 8)}
           </Text>
           <Flex alignItems="center" gap={2}>
             <Switch size="sm" onChange={handleSetLoraToggle} isChecked={lora.isEnabled} />

diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataControlNets.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataControlNets.tsx
@@ -1,7 +1,8 @@
-import { Text } from '@invoke-ai/ui-library';
 import type { ControlNetConfig } from 'features/controlAdapters/store/types';
+import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
+import type { MetadataHandlers } from 'features/metadata/types';
 import { handlers } from 'features/metadata/util/handlers';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 type Props = {
   metadata: unknown;
@@ -15,18 +16,51 @@ export const MetadataControlNets = ({ metadata }: Props) => {
       try {
         const parsed = await handlers.controlNets.parse(metadata);
         setControlNets(parsed);
-      } catch {
+      } catch (e) {
         setControlNets([]);
       }
     };
     parse();
   }, [metadata]);
 
+  const label = useMemo(() => handlers.controlNets.getLabel(), []);
+
   return (
     <>
       {controlNets.map((controlNet) => (
-        <Text key={controlNet.model?.key}>{controlNet.model?.key}</Text>
+        <MetadataViewControlNet
+          key={controlNet.model.key}
+          label={label}
+          controlNet={controlNet}
+          handlers={handlers.controlNets}
+        />
       ))}
     </>
   );
 };
+
+const MetadataViewControlNet = ({
+  label,
+  controlNet,
+  handlers,
+}: {
+  label: string;
+  controlNet: ControlNetConfig;
+  handlers: MetadataHandlers<ControlNetConfig[], ControlNetConfig>;
+}) => {
+  const onRecall = useCallback(() => {
+    if (!handlers.recallItem) {
+      return;
+    }
+    handlers.recallItem(controlNet, true);
+  }, [handlers, controlNet]);
+
+  const renderedValue = useMemo(() => {
+    if (!handlers.renderItemValue) {
+      return null;
+    }
+    return handlers.renderItemValue(controlNet);
+  }, [handlers, controlNet]);
+
+  return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
+};