diff --git a/invokeai/frontend/web/public/assets/images/commercial-license-bg.png b/invokeai/frontend/web/public/assets/images/commercial-license-bg.png new file mode 100644 index 0000000000..a5e8c3a002 Binary files /dev/null and b/invokeai/frontend/web/public/assets/images/commercial-license-bg.png differ diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index b10846e2d8..3e858f0076 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1541,6 +1541,12 @@ "paragraphs": [ "Structure controls how closely the output image will keep to the layout of the original. Low structure allows major changes, while high structure strictly maintains the original composition and layout." ] + }, + "fluxDevLicense": { + "heading": "Non-Commercial License", + "paragraphs": [ + "FLUX.1 [dev] models are licensed under the FLUX [dev] non-commercial license. To use this model type for commercial purposes in Invoke, visit our website to learn more." + ] } }, "unifiedCanvas": { diff --git a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx index 04126647aa..b3bdb2baf0 100644 --- a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx +++ b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx @@ -29,6 +29,7 @@ import { OPEN_DELAY, POPOVER_DATA, POPPER_MODIFIERS } from './constants'; type Props = { feature: Feature; inPortal?: boolean; + hideDisable?: boolean; children: ReactElement; }; @@ -37,48 +38,51 @@ const selectShouldEnableInformationalPopovers = createSelector( (system) => system.shouldEnableInformationalPopovers ); -export const InformationalPopover = memo(({ feature, children, inPortal = true, ...rest }: Props) => { - const shouldEnableInformationalPopovers = useAppSelector(selectShouldEnableInformationalPopovers); +export const InformationalPopover = memo( + ({ feature, children, inPortal = true, hideDisable = false, ...rest }: Props) => { + const shouldEnableInformationalPopovers = useAppSelector(selectShouldEnableInformationalPopovers); - const data = useMemo(() => POPOVER_DATA[feature], [feature]); + const data = useMemo(() => POPOVER_DATA[feature], [feature]); - const popoverProps = useMemo(() => merge(omit(data, ['image', 'href', 'buttonLabel']), rest), [data, rest]); + const popoverProps = useMemo(() => merge(omit(data, ['image', 'href', 'buttonLabel']), rest), [data, rest]); - if (!shouldEnableInformationalPopovers) { - return children; + if (!hideDisable && !shouldEnableInformationalPopovers) { + return children; + } + + return ( + + {children} + {inPortal ? ( + + + + ) : ( + + )} + + ); } - - return ( - - {children} - {inPortal ? ( - - - - ) : ( - - )} - - ); -}); +); InformationalPopover.displayName = 'InformationalPopover'; type ContentProps = { data?: PopoverData; feature: Feature; + hideDisable: boolean; }; -const Content = ({ data, feature }: ContentProps) => { +const Content = ({ data, feature, hideDisable }: ContentProps) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const heading = useMemo(() => t(`popovers.${feature}.heading`), [feature, t]); @@ -120,14 +124,7 @@ const Content = ({ data, feature }: ContentProps) => { )} {data?.image && ( <> - Optional Image + Optional Image )} @@ -137,9 +134,11 @@ const Content = ({ data, feature }: ContentProps) => { - + {!hideDisable && ( + + )} {data?.href && (