From 8ae1eaaccc7edc81c264448069206b070249ebbb Mon Sep 17 00:00:00 2001 From: mickr777 <115216705+mickr777@users.noreply.github.com> Date: Fri, 2 Jun 2023 14:19:02 +1000 Subject: [PATCH 1/6] Add Progress bar under invoke Button Find on some screens the progress bar at top of screen gets cut off --- .../parameters/components/ProcessButtons/InvokeButton.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx index 7042bc8c41..9efebf7ef2 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx @@ -12,6 +12,7 @@ import { useCallback } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { FaPlay } from 'react-icons/fa'; +import ProgressBar from 'features/system/components/ProgressBar'; interface InvokeButton extends Omit { @@ -43,7 +44,7 @@ export default function InvokeButton(props: InvokeButton) { ); return ( - + {iconButton ? ( )} + {!isReady && } ); } From 2bdb65537595a47d9b313d243edba27282af3cf4 Mon Sep 17 00:00:00 2001 From: mickr777 <115216705+mickr777@users.noreply.github.com> Date: Fri, 2 Jun 2023 14:59:10 +1000 Subject: [PATCH 2/6] Change to absolute --- .../ProcessButtons/InvokeButton.tsx | 78 +++++++++++-------- 1 file changed, 46 insertions(+), 32 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx index 9efebf7ef2..963581d2fe 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx @@ -45,38 +45,52 @@ export default function InvokeButton(props: InvokeButton) { return ( - {iconButton ? ( - } - isDisabled={!isReady} - onClick={handleInvoke} - flexGrow={1} - w="100%" - tooltip={t('parameters.invoke')} - tooltipProps={{ placement: 'bottom' }} - colorScheme="accent" - id="invoke-button" - {...rest} - /> - ) : ( - - Invoke - - )} - {!isReady && } + + {iconButton ? ( + } + isDisabled={!isReady} + onClick={handleInvoke} + flexGrow={1} + w="100%" + tooltip={t('parameters.invoke')} + tooltipProps={{ placement: 'bottom' }} + colorScheme="accent" + id="invoke-button" + {...rest} + /> + ) : ( + + Invoke + + )} + {!isReady && ( + + + + )} + ); } From f143fb7254f697a884a0f4d84b20d7aa7652a737 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Fri, 2 Jun 2023 17:24:40 +1200 Subject: [PATCH 3/6] feat: Make Invoke Button also the progress bar --- .../frontend/web/src/app/components/App.tsx | 34 +++++++++---------- .../ProcessButtons/InvokeButton.tsx | 7 +++- .../system/components/ProgressBar.tsx | 3 +- 3 files changed, 23 insertions(+), 21 deletions(-) diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx index 40554356b1..33fa57f0b3 100644 --- a/invokeai/frontend/web/src/app/components/App.tsx +++ b/invokeai/frontend/web/src/app/components/App.tsx @@ -1,27 +1,26 @@ -import ImageUploader from 'common/components/ImageUploader'; -import SiteHeader from 'features/system/components/SiteHeader'; -import ProgressBar from 'features/system/components/ProgressBar'; -import InvokeTabs from 'features/ui/components/InvokeTabs'; -import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton'; -import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons'; import { Box, Flex, Grid, Portal } from '@chakra-ui/react'; -import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants'; +import { useLogger } from 'app/logging/useLogger'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { PartialAppConfig } from 'app/types/invokeai'; +import ImageUploader from 'common/components/ImageUploader'; +import Loading from 'common/components/Loading/Loading'; import GalleryDrawer from 'features/gallery/components/GalleryPanel'; import Lightbox from 'features/lightbox/components/Lightbox'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { memo, ReactNode, useCallback, useEffect, useState } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; -import Loading from 'common/components/Loading/Loading'; -import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady'; -import { PartialAppConfig } from 'app/types/invokeai'; -import { configChanged } from 'features/system/store/configSlice'; +import SiteHeader from 'features/system/components/SiteHeader'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; -import { useLogger } from 'app/logging/useLogger'; -import ParametersDrawer from 'features/ui/components/ParametersDrawer'; +import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady'; +import { configChanged } from 'features/system/store/configSlice'; import { languageSelector } from 'features/system/store/systemSelectors'; +import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton'; +import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons'; +import InvokeTabs from 'features/ui/components/InvokeTabs'; +import ParametersDrawer from 'features/ui/components/ParametersDrawer'; +import { AnimatePresence, motion } from 'framer-motion'; import i18n from 'i18n'; -import Toaster from './Toaster'; +import { ReactNode, memo, useCallback, useEffect, useState } from 'react'; +import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants'; import GlobalHotkeys from './GlobalHotkeys'; +import Toaster from './Toaster'; const DEFAULT_CONFIG = {}; @@ -76,7 +75,6 @@ const App = ({ {isLightboxEnabled && } - { @@ -59,6 +59,7 @@ export default function InvokeButton(props: InvokeButton) { tooltipProps={{ placement: 'bottom' }} colorScheme="accent" id="invoke-button" + zIndex={2} {...rest} /> ) : ( @@ -72,6 +73,7 @@ export default function InvokeButton(props: InvokeButton) { colorScheme="accent" id="invoke-button" fontWeight={700} + zIndex={2} {...rest} > Invoke @@ -84,7 +86,10 @@ export default function InvokeButton(props: InvokeButton) { bottom: '0', left: '0', right: '0', + height: '100%', zIndex: 1, + borderRadius: 4, + overflow: 'clip', }} > diff --git a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx index 4584bee644..140a8b5978 100644 --- a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx +++ b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx @@ -5,7 +5,6 @@ import { SystemState } from 'features/system/store/systemSlice'; import { isEqual } from 'lodash-es'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import { PROGRESS_BAR_THICKNESS } from 'theme/util/constants'; import { systemSelector } from '../store/systemSelectors'; const progressBarSelector = createSelector( @@ -35,7 +34,7 @@ const ProgressBar = () => { value={value} aria-label={t('accessibility.invokeProgressBar')} isIndeterminate={isProcessing && !currentStatusHasSteps} - height={PROGRESS_BAR_THICKNESS} + height="full" /> ); }; From 47301e6f85e70a396fd89efaf2767cef93819b50 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Fri, 2 Jun 2023 17:33:38 +1200 Subject: [PATCH 4/6] fix: Do the same without zIndex --- .../ProcessButtons/InvokeButton.tsx | 33 +++++++++---------- 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx index af88228be3..34bac3600d 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx @@ -46,6 +46,20 @@ export default function InvokeButton(props: InvokeButton) { return ( + {!isReady && ( + + + + )} {iconButton ? ( ) : ( @@ -73,28 +86,12 @@ export default function InvokeButton(props: InvokeButton) { colorScheme="accent" id="invoke-button" fontWeight={700} - zIndex={2} + background={!isReady ? 'none' : 'accent.700'} {...rest} > Invoke )} - {!isReady && ( - - - - )} ); From ea9cf0476570da2387648b33e1cc34c50906ff5c Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Fri, 2 Jun 2023 17:36:14 +1200 Subject: [PATCH 5/6] fix: Remove progress bg instead of altering button bg --- .../parameters/components/ProcessButtons/InvokeButton.tsx | 2 +- invokeai/frontend/web/src/theme/components/progress.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx index 34bac3600d..4ada615628 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx @@ -55,6 +55,7 @@ export default function InvokeButton(props: InvokeButton) { right: '0', height: '100%', overflow: 'clip', + borderRadius: 4, }} > @@ -86,7 +87,6 @@ export default function InvokeButton(props: InvokeButton) { colorScheme="accent" id="invoke-button" fontWeight={700} - background={!isReady ? 'none' : 'accent.700'} {...rest} > Invoke diff --git a/invokeai/frontend/web/src/theme/components/progress.ts b/invokeai/frontend/web/src/theme/components/progress.ts index fa6b5b57c5..87b6b7af01 100644 --- a/invokeai/frontend/web/src/theme/components/progress.ts +++ b/invokeai/frontend/web/src/theme/components/progress.ts @@ -20,7 +20,7 @@ const invokeAIFilledTrack = defineStyle((_props) => ({ const invokeAITrack = defineStyle((_props) => { return { - bg: 'base.800', + bg: 'none', }; }); From 7620bacc01e7381c6720eb1cff19f610e01d2956 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Fri, 2 Jun 2023 17:55:15 +1200 Subject: [PATCH 6/6] feat: Add temporary NodeInvokeButton --- .../components/panels/TopCenterPanel.tsx | 10 +- .../nodes/components/ui/NodeInvokeButton.tsx | 96 +++++++++++++++++++ 2 files changed, 98 insertions(+), 8 deletions(-) create mode 100644 invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx diff --git a/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx index b97bf423e1..b961a9f403 100644 --- a/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx @@ -1,18 +1,14 @@ import { HStack } from '@chakra-ui/react'; -import { userInvoked } from 'app/store/actions'; import { useAppDispatch } from 'app/store/storeHooks'; import IAIButton from 'common/components/IAIButton'; import { memo, useCallback } from 'react'; import { Panel } from 'reactflow'; import { receivedOpenAPISchema } from 'services/thunks/schema'; +import NodeInvokeButton from '../ui/NodeInvokeButton'; const TopCenterPanel = () => { const dispatch = useAppDispatch(); - const handleInvoke = useCallback(() => { - dispatch(userInvoked('nodes')); - }, [dispatch]); - const handleReloadSchema = useCallback(() => { dispatch(receivedOpenAPISchema()); }, [dispatch]); @@ -20,9 +16,7 @@ const TopCenterPanel = () => { return ( - - Will it blend? - + Reload Schema diff --git a/invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx b/invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx new file mode 100644 index 0000000000..4b916abd2e --- /dev/null +++ b/invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx @@ -0,0 +1,96 @@ +import { Box } from '@chakra-ui/react'; +import { readinessSelector } from 'app/selectors/readinessSelector'; +import { userInvoked } from 'app/store/actions'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import IAIButton, { IAIButtonProps } from 'common/components/IAIButton'; +import IAIIconButton, { + IAIIconButtonProps, +} from 'common/components/IAIIconButton'; +import ProgressBar from 'features/system/components/ProgressBar'; +import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; +import { useCallback } from 'react'; +import { useHotkeys } from 'react-hotkeys-hook'; +import { useTranslation } from 'react-i18next'; +import { FaPlay } from 'react-icons/fa'; + +interface InvokeButton + extends Omit { + iconButton?: boolean; +} + +export default function NodeInvokeButton(props: InvokeButton) { + const { iconButton = false, ...rest } = props; + const dispatch = useAppDispatch(); + const { isReady } = useAppSelector(readinessSelector); + const activeTabName = useAppSelector(activeTabNameSelector); + + const handleInvoke = useCallback(() => { + dispatch(userInvoked('nodes')); + }, [dispatch]); + + const { t } = useTranslation(); + + useHotkeys( + ['ctrl+enter', 'meta+enter'], + handleInvoke, + { + enabled: () => isReady, + preventDefault: true, + enableOnFormTags: ['input', 'textarea', 'select'], + }, + [isReady, activeTabName] + ); + + return ( + + + {!isReady && ( + + + + )} + {iconButton ? ( + } + isDisabled={!isReady} + onClick={handleInvoke} + flexGrow={1} + w="100%" + tooltip={t('parameters.invoke')} + tooltipProps={{ placement: 'bottom' }} + colorScheme="accent" + id="invoke-button" + {...rest} + /> + ) : ( + + Invoke + + )} + + + ); +}