Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip buttons

Browse Source
This commit is contained in:
psychedelicious 2023-08-23 16:24:09 +10:00
parent 8eca3bbbcd
commit 3651cf7ee2
14 changed files with 96 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
invokeai/frontend/web/public/locales/en.json
View File

@ -718,10 +718,11 @@
"swapSizes": "Swap Sizes"
},
"nodes": {
"reloadSchema": "Reload Schema",
"saveGraph": "Save Graph",
"loadGraph": "Load Graph (saved from Node Editor) (Do not copy-paste metadata)",
"clearGraph": "Clear Graph",
"reloadSchema": "Reload Node Templates",
"saveGraph": "Save Workflow",
"loadGraph": "Load Workflow",
"resetGraph": "Reset Workflow",
"clearGraph": "Reset Graph",
"clearGraphDesc": "Are you sure you want to clear all nodes?",
"zoomInNodes": "Zoom In",
"zoomOutNodes": "Zoom Out",

4
invokeai/frontend/web/src/common/hooks/useIsReadyToInvoke.ts
View File

@ -32,6 +32,10 @@ const selector = createSelector(
}
if (activeTabName === 'nodes' && nodes.shouldValidateGraph) {
if (!nodes.nodes.length) {
reasons.push('No nodes in graph');
}
nodes.nodes.forEach((node) => {
if (!isInvocationNode(node)) {
return;

81
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/NodeInvokeButton.tsx
View File

@ -1,81 +0,0 @@
import { Box } from '@chakra-ui/react';
import { userInvoked } from 'app/store/actions';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton, { IAIButtonProps } from 'common/components/IAIButton';
import { IAIIconButtonProps } from 'common/components/IAIIconButton';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
import { InvokeButtonTooltipContent } from 'features/parameters/components/ProcessButtons/InvokeButton';
import ProgressBar from 'features/system/components/ProgressBar';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { memo, useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { FaPlay } from 'react-icons/fa';
interface InvokeButton
extends Omit<IAIButtonProps | IAIIconButtonProps, 'aria-label'> {}
const NodeInvokeButton = (props: InvokeButton) => {
const { ...rest } = props;
const dispatch = useAppDispatch();
const activeTabName = useAppSelector(activeTabNameSelector);
const { isReady, isProcessing } = useIsReadyToInvoke();
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 (
<Box style={{ flexGrow: 4 }} position="relative">
<Box style={{ position: 'relative' }}>
{!isReady && (
<Box
borderRadius="base"
style={{
position: 'absolute',
bottom: '0',
left: '0',
right: '0',
height: '100%',
overflow: 'clip',
}}
>
<ProgressBar />
</Box>
)}
<IAIButton
tooltip={<InvokeButtonTooltipContent />}
aria-label={t('parameters.invoke')}
type="submit"
isDisabled={!isReady}
onClick={handleInvoke}
flexGrow={1}
w="100%"
colorScheme="accent"
id="invoke-button"
leftIcon={isProcessing ? undefined : <FaPlay />}
fontWeight={700}
isLoading={isProcessing}
loadingText={t('parameters.invoke')}
{...rest}
>
Invoke
</IAIButton>
</Box>
</Box>
);
};
export default memo(NodeInvokeButton);

10
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/ReloadSchemaButton.tsx
View File

@ -1,5 +1,5 @@
import { useAppDispatch } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import IAIButton from 'common/components/IAIButton';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaSyncAlt } from 'react-icons/fa';
@ -14,12 +14,14 @@ const ReloadSchemaButton = () => {
}, [dispatch]);
return (
<IAIIconButton
icon={<FaSyncAlt />}
<IAIButton
leftIcon={<FaSyncAlt />}
tooltip={t('nodes.reloadSchema')}
aria-label={t('nodes.reloadSchema')}
onClick={handleReloadSchema}
/>
>
{t('nodes.reloadSchema')}
</IAIButton>
);
};

20
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/TopCenterPanel.tsx
View File

@ -1,24 +1,14 @@
import { HStack } from '@chakra-ui/react';
import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
import { Flex } from '@chakra-ui/react';
import { memo } from 'react';
import { Panel } from 'reactflow';
import NodeEditorSettings from './NodeEditorSettings';
import ClearGraphButton from './ClearGraphButton';
import NodeInvokeButton from './NodeInvokeButton';
import ReloadSchemaButton from './ReloadSchemaButton';
import LoadWorkflowButton from './LoadWorkflowButton';
import WorkflowEditorControls from './WorkflowEditorControls';
const TopCenterPanel = () => {
return (
<Panel position="top-center">
<HStack>
<NodeInvokeButton />
<CancelButton />
<ReloadSchemaButton />
<ClearGraphButton />
<NodeEditorSettings />
<LoadWorkflowButton />
</HStack>
<Flex gap={2}>
<WorkflowEditorControls />
</Flex>
</Panel>
);
};

18
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/WorkflowEditorControls.tsx Normal file
View File

@ -0,0 +1,18 @@
import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
import InvokeButton from 'features/parameters/components/ProcessButtons/InvokeButton';
import { memo } from 'react';
import ClearGraphButton from './ClearGraphButton';
import LoadWorkflowButton from './LoadWorkflowButton';
const WorkflowEditorControls = () => {
return (
<>
<InvokeButton />
<CancelButton />
<ClearGraphButton />
<LoadWorkflowButton />
</>
);
};
export default memo(WorkflowEditorControls);

2
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
View File

@ -2,6 +2,7 @@ import { useAppSelector } from 'app/store/storeHooks';
import { memo } from 'react';
import { Panel } from 'reactflow';
import FieldTypeLegend from './FieldTypeLegend';
import WorkflowEditorSettings from './WorkflowEditorSettings';
const TopRightPanel = () => {
const shouldShowFieldTypeLegend = useAppSelector(
@ -10,6 +11,7 @@ const TopRightPanel = () => {
return (
<Panel position="top-right">
<WorkflowEditorSettings />
{shouldShowFieldTypeLegend && <FieldTypeLegend />}
</Panel>
);

19
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/NodeEditorSettings.tsx → invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
View File

@ -27,6 +27,11 @@ import {
import { ChangeEvent, memo, useCallback } from 'react';
import { FaCog } from 'react-icons/fa';
import { SelectionMode } from 'reactflow';
import ReloadSchemaButton from '../TopCenterPanel/ReloadSchemaButton';
const formLabelProps: FormLabelProps = {
fontWeight: 600,
};
const selector = createSelector(
stateSelector,
@ -49,7 +54,7 @@ const selector = createSelector(
defaultSelectorOptions
);
const NodeEditorSettings = () => {
const WorkflowEditorSettings = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const dispatch = useAppDispatch();
const {
@ -98,7 +103,8 @@ const NodeEditorSettings = () => {
return (
<>
<IAIIconButton
aria-label="Node Editor Settings"
aria-label="Workflow Editor Settings"
tooltip="Workflow Editor Settings"
icon={<FaCog />}
onClick={onOpen}
/>
@ -106,7 +112,7 @@ const NodeEditorSettings = () => {
<Modal isOpen={isOpen} onClose={onClose} size="2xl" isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader>Node Editor Settings</ModalHeader>
<ModalHeader>Workflow Editor Settings</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Flex
@ -157,6 +163,7 @@ const NodeEditorSettings = () => {
label="Validate Connections and Graph"
helperText="Prevent invalid connections from being made, and invalid graphs from being invoked"
/>
<ReloadSchemaButton />
</Flex>
</ModalBody>
</ModalContent>
@ -165,8 +172,4 @@ const NodeEditorSettings = () => {
);
};
export default memo(NodeEditorSettings);
const formLabelProps: FormLabelProps = {
fontWeight: 600,
};
export default memo(WorkflowEditorSettings);

6
invokeai/frontend/web/src/features/nodes/hooks/useLoadWorkflowFromFile.tsx
View File

@ -7,14 +7,11 @@ import { zWorkflow } from 'features/nodes/types/types';
import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
import { memo, useCallback } from 'react';
import { flushSync } from 'react-dom';
import { useReactFlow } from 'reactflow';
import { ZodError } from 'zod';
import { fromZodError, fromZodIssue } from 'zod-validation-error';
export const useLoadWorkflowFromFile = () => {
const dispatch = useAppDispatch();
const { fitView } = useReactFlow();
const logger = useLogger('nodes');
const loadWorkflowFromFile = useCallback(
(file: File | null) => {
@ -51,7 +48,6 @@ export const useLoadWorkflowFromFile = () => {
}
dispatch(workflowLoaded(result.data));
flushSync(fitView);
dispatch(
addToast(
@ -79,7 +75,7 @@ export const useLoadWorkflowFromFile = () => {
reader.readAsText(file);
},
[dispatch, fitView, logger]
[dispatch, logger]
);
return loadWorkflowFromFile;

48
invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
View File

@ -1,6 +1,5 @@
import {
Box,
ChakraProps,
Divider,
Flex,
ListItem,
@ -19,7 +18,6 @@ import IAIIconButton, {
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
import { clampSymmetrySteps } from 'features/parameters/store/generationSlice';
import ProgressBar from 'features/system/components/ProgressBar';
import { selectIsBusy } from 'features/system/store/systemSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { memo, useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
@ -27,32 +25,6 @@ import { useTranslation } from 'react-i18next';
import { FaPlay } from 'react-icons/fa';
import { useBoardName } from 'services/api/hooks/useBoardName';
const IN_PROGRESS_STYLES: ChakraProps['sx'] = {
_disabled: {
bg: 'none',
color: 'base.600',
cursor: 'not-allowed',
_hover: {
color: 'base.600',
bg: 'none',
},
},
};
const selector = createSelector(
[stateSelector, activeTabNameSelector, selectIsBusy],
({ gallery }, activeTabName, isBusy) => {
const { autoAddBoardId } = gallery;
return {
isBusy,
autoAddBoardId,
activeTabName,
};
},
defaultSelectorOptions
);
interface InvokeButton
extends Omit<IAIButtonProps | IAIIconButtonProps, 'aria-label'> {
asIconButton?: boolean;
@ -62,7 +34,7 @@ export default function InvokeButton(props: InvokeButton) {
const { asIconButton = false, sx, ...rest } = props;
const dispatch = useAppDispatch();
const { isReady, isProcessing } = useIsReadyToInvoke();
const { activeTabName } = useAppSelector(selector);
const activeTabName = useAppSelector(activeTabNameSelector);
const handleInvoke = useCallback(() => {
dispatch(clampSymmetrySteps());
@ -113,10 +85,10 @@ export default function InvokeButton(props: InvokeButton) {
colorScheme="accent"
isLoading={isProcessing}
id="invoke-button"
data-progress={isProcessing}
sx={{
w: 'full',
flexGrow: 1,
...(isProcessing ? IN_PROGRESS_STYLES : {}),
...sx,
}}
{...rest}
@ -126,6 +98,7 @@ export default function InvokeButton(props: InvokeButton) {
tooltip={<InvokeButtonTooltipContent />}
aria-label={t('parameters.invoke')}
type="submit"
data-progress={isProcessing}
isDisabled={!isReady}
onClick={handleInvoke}
colorScheme="accent"
@ -137,7 +110,6 @@ export default function InvokeButton(props: InvokeButton) {
w: 'full',
flexGrow: 1,
fontWeight: 700,
...(isProcessing ? IN_PROGRESS_STYLES : {}),
...sx,
}}
{...rest}
@ -150,9 +122,21 @@ export default function InvokeButton(props: InvokeButton) {
);
}
const tooltipSelector = createSelector(
[stateSelector],
({ gallery }) => {
const { autoAddBoardId } = gallery;
return {
autoAddBoardId,
};
},
defaultSelectorOptions
);
export const InvokeButtonTooltipContent = memo(() => {
const { isReady, reasons } = useIsReadyToInvoke();
const { autoAddBoardId } = useAppSelector(selector);
const { autoAddBoardId } = useAppSelector(tooltipSelector);
const autoAddBoardName = useBoardName(autoAddBoardId);
return (

2
invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
View File

@ -15,7 +15,7 @@ const InvokeAILogoComponent = ({ showVersion = true }: Props) => {
const isHovered = useHoverDirty(ref);
return (
<Flex alignItems="center" gap={3} ps={1} ref={ref}>
<Flex alignItems="center" gap={5} ps={1} ref={ref}>
<Image
src={InvokeAILogoImage}
alt="invoke-ai-logo"

6
invokeai/frontend/web/src/features/system/store/systemSlice.ts
View File

@ -3,7 +3,7 @@ import { PayloadAction, createSlice, isAnyOf } from '@reduxjs/toolkit';
import { InvokeLogLevel } from 'app/logging/logger';
import { userInvoked } from 'app/store/actions';
import { t } from 'i18next';
import { startCase, upperFirst } from 'lodash-es';
import { get, startCase, upperFirst } from 'lodash-es';
import { LogLevelName } from 'roarr';
import {
isAnySessionRejected,
@ -368,14 +368,14 @@ export const systemSlice = createSlice({
return;
}
} else if (action.payload?.error) {
errorDescription = action.payload?.error as string;
errorDescription = action.payload?.error;
}
state.toastQueue.push(
makeToast({
title: t('toast.serverError'),
status: 'error',
description: errorDescription,
description: get(errorDescription, 'detail', 'Unknown Error'),
duration,
})
);

24
invokeai/frontend/web/src/theme/components/button.ts
View File

@ -8,7 +8,16 @@ const invokeAI = defineStyle((props) => {
if (c === 'base') {
const _disabled = {
bg: mode('base.150', 'base.700')(props),
color: mode('base.500', 'base.500')(props),
color: mode('base.300', 'base.500')(props),
svg: {
fill: mode('base.500', 'base.500')(props),
},
opacity: 1,
};
const data_progress = {
bg: 'none',
color: mode('base.300', 'base.500')(props),
svg: {
fill: mode('base.500', 'base.500')(props),
},
@ -31,6 +40,7 @@ const invokeAI = defineStyle((props) => {
_disabled,
},
_disabled,
'&[data-progress="true"]': { ...data_progress, _hover: data_progress },
};
}
@ -45,6 +55,17 @@ const invokeAI = defineStyle((props) => {
filter: mode(undefined, 'saturate(65%)')(props),
};
const data_progress = {
// bg: 'none',
color: mode(`${c}.50`, `${c}.500`)(props),
svg: {
fill: mode(`${c}.50`, `${c}.500`)(props),
filter: 'unset',
},
opacity: 0.7,
filter: mode(undefined, 'saturate(65%)')(props),
};
return {
bg: mode(`${c}.400`, `${c}.600`)(props),
color: mode(`base.50`, `base.100`)(props),
@ -61,6 +82,7 @@ const invokeAI = defineStyle((props) => {
},
_disabled,
},
'&[data-progress="true"]': { ...data_progress, _hover: data_progress },
};
});

2
invokeai/frontend/web/src/theme/components/progress.ts
View File

@ -9,7 +9,7 @@ const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
const invokeAIFilledTrack = defineStyle((_props) => ({
bg: 'accentAlpha.500',
bg: 'accentAlpha.700',
}));
const invokeAITrack = defineStyle((_props) => {