github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-16 02:05:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add notice for FLUX dev commercial license requirement

Browse Source
This commit is contained in:
Mary Hipp
2024-09-20 13:08:47 -04:00
parent a4c9b0d421
commit f37eee29a9
6 changed files with 97 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
View File

@@ -1,23 +1,41 @@
import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
import { Box, Combobox, Flex, FormControl, FormLabel, Icon, Spacer, Tooltip } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
import { selectModel } from 'features/controlLayers/store/paramsSlice';
import { selectModelKey } from 'features/controlLayers/store/paramsSlice';
import { zModelIdentifierField } from 'features/nodes/types/common';
import { modelSelected } from 'features/parameters/store/actions';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { MdMoneyOff } from 'react-icons/md';
import { useMainModels } from 'services/api/hooks/modelsByType';
import type { AnyModelConfig, MainModelConfig } from 'services/api/types';
import { type AnyModelConfig, isCheckpointMainModelConfig, type MainModelConfig } from 'services/api/types';
const ParamMainModelSelect = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const activeTabName = useAppSelector(selectActiveTab);
const selectedModel = useAppSelector(selectModel);
const selectedModelKey = useAppSelector(selectModelKey);
// const selectedModel = useAppSelector(selectModel);
const [modelConfigs, { isLoading }] = useMainModels();
const selectedModel = useMemo(() => {
if (!modelConfigs) {
return null;
}
if (selectedModelKey === null) {
return null;
}
const modelConfig = modelConfigs.find((model) => model.key === selectedModelKey);
if (!modelConfig) {
return null;
}
return modelConfig;
}, [modelConfigs, selectedModelKey]);
const tooltipLabel = useMemo(() => {
if (!modelConfigs.length || !selectedModel) {
return;
@@ -54,11 +72,26 @@ const ParamMainModelSelect = () => {
getIsDisabled,
});
const isFluxDevSelected = useMemo(() => {
return selectedModel && isCheckpointMainModelConfig(selectedModel) && selectedModel.config_path === 'flux-dev';
}, [selectedModel]);
return (
<FormControl isDisabled={!modelConfigs.length} isInvalid={!value || !modelConfigs.length}>
<InformationalPopover feature="paramModel">
<FormLabel>{t('modelManager.model')}</FormLabel>
</InformationalPopover>
<Flex>
<InformationalPopover feature="paramModel">
<FormLabel>{t('modelManager.model')}</FormLabel>
</InformationalPopover>
{isFluxDevSelected ? (
<InformationalPopover feature="fluxDevLicense" hideDisable={true}>
<Flex justifyContent="flex-start">
<Icon as={MdMoneyOff} />
</Flex>
</InformationalPopover>
) : (
<Spacer />
)}
</Flex>
<Tooltip label={tooltipLabel}>
<Box w="full" minW={0}>
<Combobox