github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): reworked model selection ui (WIP)

Browse Source
This commit is contained in:
psychedelicious
2025-04-14 14:45:23 +10:00
parent 4d0f760ec8
commit b191b706c1
3 changed files with 316 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelTextToImage.tsx
View File

@@ -1,6 +1,8 @@
import { Box, Flex } from '@invoke-ai/ui-library';
import { Box, Button, Flex } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { useAppSelector } from 'app/store/storeHooks';
import type { ModelCmdkOptions } from 'common/components/ModelCmdk/ModelCmdk';
import { useModelCmdk } from 'common/components/ModelCmdk/ModelCmdk';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import { selectIsCogView4, selectIsSDXL } from 'features/controlLayers/store/paramsSlice';
import { Prompts } from 'features/parameters/components/Prompts/Prompts';
@@ -12,19 +14,27 @@ import { RefinerSettingsAccordion } from 'features/settingsAccordions/components
import { StylePresetMenu } from 'features/stylePresets/components/StylePresetMenu';
import { StylePresetMenuTrigger } from 'features/stylePresets/components/StylePresetMenuTrigger';
import { $isStylePresetsMenuOpen } from 'features/stylePresets/store/stylePresetSlice';
import { noop } from 'lodash-es';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react';
import { memo } from 'react';
import { isNonRefinerMainModelConfig } from 'services/api/types';
const overlayScrollbarsStyles: CSSProperties = {
height: '100%',
width: '100%',
};
const options: ModelCmdkOptions = {
filter: isNonRefinerMainModelConfig,
onSelect: noop,
};
const ParametersPanelTextToImage = () => {
const isSDXL = useAppSelector(selectIsSDXL);
const isCogview4 = useAppSelector(selectIsCogView4);
const isStylePresetsMenuOpen = useStore($isStylePresetsMenuOpen);
const modelCmdk = useModelCmdk(options);
return (
<Flex w="full" h="full" flexDir="column" gap={2}>
@@ -40,6 +50,7 @@ const ParametersPanelTextToImage = () => {
)}
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
<Flex gap={2} flexDirection="column" h="full" w="full">
<Button onClick={modelCmdk.onOpen}>model</Button>
<Prompts />
<ImageSettingsAccordion />
<GenerationSettingsAccordion />