From cd082d57af2255f2194feb1200466b836fd363c4 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Fri, 22 Nov 2024 14:36:54 -0500 Subject: [PATCH 1/3] (ui): updates various informational tooltips, adds descriptons to IP adapter method options --- invokeai/frontend/web/public/locales/en.json | 17 ++++++++++------- .../components/IPAdapter/IPAdapterMethod.tsx | 12 ++++++++---- .../system/components/VideosModal/data.ts | 4 ++-- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 4536de8cf3e..0bcc5085dcd 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1319,8 +1319,8 @@ "controlNetBeginEnd": { "heading": "Begin / End Step Percentage", "paragraphs": [ - "The part of the of the denoising process that will have the Control Adapter applied.", - "Generally, Control Adapters applied at the start of the process guide composition, and Control Adapters applied at the end guide details." + "This setting determines which portion of the denoising (generation) process incorporates the guidance from this layer.", + "• Start Step (%): Specifies when to begin applying the guidance from this layer during the generation process.", "• End Step (%): Specifies when to stop applying this layer's guidance and revert general guidance from the model and other settings." ] }, "controlNetControlMode": { @@ -1338,13 +1338,13 @@ "paragraphs": ["Method to fit Control Adapter's input image size to the output generation size."] }, "ipAdapterMethod": { - "heading": "Method", - "paragraphs": ["Method by which to apply the current IP Adapter."] + "heading": "Mode", + "paragraphs": ["The mode defines how the reference image will guide the generation process."] }, "controlNetWeight": { "heading": "Weight", "paragraphs": [ - "Weight of the Control Adapter. Higher weight will lead to larger impacts on the final image." + "Adjusts how strongly the layer influences the generation process", "• Higher Weight (.75-2): Creates a more significant impact on the final result.", "• Lower Weight (0-.75): Creates a smaller impact on the final result." ] }, "dynamicPrompts": { @@ -1803,10 +1803,13 @@ "megaControl": "Mega Control" }, "ipAdapterMethod": { - "ipAdapterMethod": "IP Adapter Method", + "ipAdapterMethod": "Mode", "full": "Style and Composition", + "fullDesc": "Applies both the visual style (colors, textures) and the composition (layout and structure) from the reference image.", "style": "Style Only", - "composition": "Composition Only" + "styleDesc": "Focuses on replicating the visual style of the reference image, including colors, textures, and artistic details, without considering its layout.", + "composition": "Composition Only", + "compositionDesc": "Focuses on replicating the layout and structure of the reference image while ignoring its visual style." }, "fill": { "fillColor": "Fill Color", diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx index 79244eece63..a5ddc6e9b53 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx @@ -6,6 +6,8 @@ import { isIPMethodV2 } from 'features/controlLayers/store/types'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { assert } from 'tsafe'; +import { useAppSelector } from '../../../../app/store/storeHooks'; +import { selectSystemShouldEnableModelDescriptions } from '../../../system/store/systemSlice'; type Props = { method: IPMethodV2; @@ -14,13 +16,15 @@ type Props = { export const IPAdapterMethod = memo(({ method, onChange }: Props) => { const { t } = useTranslation(); + const shouldShowModelDescriptions = useAppSelector(selectSystemShouldEnableModelDescriptions); + const options: { label: string; value: IPMethodV2 }[] = useMemo( () => [ - { label: t('controlLayers.ipAdapterMethod.full'), value: 'full' }, - { label: t('controlLayers.ipAdapterMethod.style'), value: 'style' }, - { label: t('controlLayers.ipAdapterMethod.composition'), value: 'composition' }, + { label: t('controlLayers.ipAdapterMethod.full'), value: 'full', description: shouldShowModelDescriptions ? t('controlLayers.ipAdapterMethod.fullDesc'): undefined }, + { label: t('controlLayers.ipAdapterMethod.style'), value: 'style', description: shouldShowModelDescriptions ? t('controlLayers.ipAdapterMethod.styleDesc') : undefined }, + { label: t('controlLayers.ipAdapterMethod.composition'), value: 'composition', description: shouldShowModelDescriptions ? t('controlLayers.ipAdapterMethod.compositionDesc'): undefined }, ], - [t] + [t, shouldShowModelDescriptions] ); const _onChange = useCallback( (v) => { diff --git a/invokeai/frontend/web/src/features/system/components/VideosModal/data.ts b/invokeai/frontend/web/src/features/system/components/VideosModal/data.ts index 0531c0d2e34..0b194ee5a6d 100644 --- a/invokeai/frontend/web/src/features/system/components/VideosModal/data.ts +++ b/invokeai/frontend/web/src/features/system/components/VideosModal/data.ts @@ -37,8 +37,8 @@ export const gettingStartedVideos: VideoData[] = [ }, { tKey: 'creatingAndComposingOnInvokesControlCanvas', - link: 'https://www.youtube.com/watch?v=MohWv5GZVGM&list=PLvWK1Kc8iXGrQy8r9TYg6QdUuJ5MMx-ZO&index=5&t=28s&pp=iAQB', - length: { minutes: 13, seconds: 56 }, + link: 'https://www.youtube.com/watch?v=O4LaFcYFxlA', + length: { minutes: 2, seconds: 52 }, }, { tKey: 'upscaling', From 8caa41d27cc4f4583d073d960f95f1fc6f6fb73a Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Mon, 25 Nov 2024 14:35:49 -0500 Subject: [PATCH 2/3] shorten reference image mode descriptions; --- invokeai/frontend/web/public/locales/en.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 0bcc5085dcd..0a893e017e0 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1805,11 +1805,11 @@ "ipAdapterMethod": { "ipAdapterMethod": "Mode", "full": "Style and Composition", - "fullDesc": "Applies both the visual style (colors, textures) and the composition (layout and structure) from the reference image.", + "fullDesc": "Applies visual style (colors, textures) & composition (layout, structure).", "style": "Style Only", - "styleDesc": "Focuses on replicating the visual style of the reference image, including colors, textures, and artistic details, without considering its layout.", + "styleDesc": "Applies visual style (colors, textures) without considering its layout.", "composition": "Composition Only", - "compositionDesc": "Focuses on replicating the layout and structure of the reference image while ignoring its visual style." + "compositionDesc": "Replicates layout & structure while ignoring the reference's style." }, "fill": { "fillColor": "Fill Color", From 74709ae1f883ca5411c1f370f2c5973f2d1f6f93 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Mon, 25 Nov 2024 15:01:25 -0500 Subject: [PATCH 3/3] lint fix --- invokeai/frontend/web/public/locales/en.json | 7 ++++-- .../components/IPAdapter/IPAdapterMethod.tsx | 22 ++++++++++++++----- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 0a893e017e0..d8957c0b1e2 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1320,7 +1320,8 @@ "heading": "Begin / End Step Percentage", "paragraphs": [ "This setting determines which portion of the denoising (generation) process incorporates the guidance from this layer.", - "• Start Step (%): Specifies when to begin applying the guidance from this layer during the generation process.", "• End Step (%): Specifies when to stop applying this layer's guidance and revert general guidance from the model and other settings." + "• Start Step (%): Specifies when to begin applying the guidance from this layer during the generation process.", + "• End Step (%): Specifies when to stop applying this layer's guidance and revert general guidance from the model and other settings." ] }, "controlNetControlMode": { @@ -1344,7 +1345,9 @@ "controlNetWeight": { "heading": "Weight", "paragraphs": [ - "Adjusts how strongly the layer influences the generation process", "• Higher Weight (.75-2): Creates a more significant impact on the final result.", "• Lower Weight (0-.75): Creates a smaller impact on the final result." + "Adjusts how strongly the layer influences the generation process", + "• Higher Weight (.75-2): Creates a more significant impact on the final result.", + "• Lower Weight (0-.75): Creates a smaller impact on the final result." ] }, "dynamicPrompts": { diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx index a5ddc6e9b53..86bf9544557 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx @@ -1,13 +1,13 @@ import type { ComboboxOnChange } from '@invoke-ai/ui-library'; import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library'; +import { useAppSelector } from 'app/store/storeHooks'; import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover'; import type { IPMethodV2 } from 'features/controlLayers/store/types'; import { isIPMethodV2 } from 'features/controlLayers/store/types'; +import { selectSystemShouldEnableModelDescriptions } from 'features/system/store/systemSlice'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { assert } from 'tsafe'; -import { useAppSelector } from '../../../../app/store/storeHooks'; -import { selectSystemShouldEnableModelDescriptions } from '../../../system/store/systemSlice'; type Props = { method: IPMethodV2; @@ -20,9 +20,21 @@ export const IPAdapterMethod = memo(({ method, onChange }: Props) => { const options: { label: string; value: IPMethodV2 }[] = useMemo( () => [ - { label: t('controlLayers.ipAdapterMethod.full'), value: 'full', description: shouldShowModelDescriptions ? t('controlLayers.ipAdapterMethod.fullDesc'): undefined }, - { label: t('controlLayers.ipAdapterMethod.style'), value: 'style', description: shouldShowModelDescriptions ? t('controlLayers.ipAdapterMethod.styleDesc') : undefined }, - { label: t('controlLayers.ipAdapterMethod.composition'), value: 'composition', description: shouldShowModelDescriptions ? t('controlLayers.ipAdapterMethod.compositionDesc'): undefined }, + { + label: t('controlLayers.ipAdapterMethod.full'), + value: 'full', + description: shouldShowModelDescriptions ? t('controlLayers.ipAdapterMethod.fullDesc') : undefined, + }, + { + label: t('controlLayers.ipAdapterMethod.style'), + value: 'style', + description: shouldShowModelDescriptions ? t('controlLayers.ipAdapterMethod.styleDesc') : undefined, + }, + { + label: t('controlLayers.ipAdapterMethod.composition'), + value: 'composition', + description: shouldShowModelDescriptions ? t('controlLayers.ipAdapterMethod.compositionDesc') : undefined, + }, ], [t, shouldShowModelDescriptions] );