diff --git a/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx b/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx index fd21523c73..bed3ef2bb6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx @@ -26,7 +26,7 @@ import { CanvasHUD } from 'features/controlLayers/components/HUD/CanvasHUD'; import { InvokeCanvasComponent } from 'features/controlLayers/components/InvokeCanvasComponent'; import { SelectObject } from 'features/controlLayers/components/SelectObject/SelectObject'; import { CanvasSessionContextProvider } from 'features/controlLayers/components/SimpleSession/context'; -import { GenerateLaunchpadPanel } from 'features/controlLayers/components/SimpleSession/InitialState'; +import { GenerateLaunchpadPanel } from 'features/controlLayers/components/SimpleSession/GenerateLaunchpadPanel'; import { StagingAreaItemsList } from 'features/controlLayers/components/SimpleSession/StagingAreaItemsList'; import { StagingAreaToolbar } from 'features/controlLayers/components/StagingArea/StagingAreaToolbar'; import { CanvasToolbar } from 'features/controlLayers/components/Toolbar/CanvasToolbar'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx new file mode 100644 index 0000000000..4e628e6f46 --- /dev/null +++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx @@ -0,0 +1,36 @@ +import { Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library'; +import { memo } from 'react'; + +import { InitialStateMainModelPicker } from './InitialStateMainModelPicker'; +import { LaunchpadAddStyleReference } from './LaunchpadAddStyleReference'; +import { LaunchpadEditImageButton } from './LaunchpadEditImageButton'; +import { LaunchpadGenerateFromTextButton } from './LaunchpadGenerateFromTextButton'; +import { LaunchpadUseALayoutImageButton } from './LaunchpadUseALayoutImageButton'; + +export const CanvasLaunchpadPanel = memo(() => { + return ( + + + Get started with Invoke. + + + + + + Want to learn what prompts work best for each model?{' '} + + + + + + + + + + + + ); +}); +CanvasLaunchpadPanel.displayName = 'CanvasLaunchpadPanel'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialState.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/GenerateLaunchpadPanel.tsx similarity index 81% rename from invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialState.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/GenerateLaunchpadPanel.tsx index 16c6510417..3999f0580f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialState.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/GenerateLaunchpadPanel.tsx @@ -1,11 +1,12 @@ import { Alert, Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InitialStateAddAStyleReference } from 'features/controlLayers/components/SimpleSession/InitialStateAddAStyleReference'; -import { InitialStateGenerateFromText } from 'features/controlLayers/components/SimpleSession/InitialStateGenerateFromText'; import { InitialStateMainModelPicker } from 'features/controlLayers/components/SimpleSession/InitialStateMainModelPicker'; +import { LaunchpadAddStyleReference } from 'features/controlLayers/components/SimpleSession/LaunchpadAddStyleReference'; import { setActiveTab } from 'features/ui/store/uiSlice'; import { memo, useCallback } from 'react'; +import { LaunchpadGenerateFromTextButton } from './LaunchpadGenerateFromTextButton'; + export const GenerateLaunchpadPanel = memo(() => { const dispatch = useAppDispatch(); const newCanvasSession = useCallback(() => { @@ -28,8 +29,8 @@ export const GenerateLaunchpadPanel = memo(() => { - - + + Looking to get more control, edit, and iterate on your images? @@ -43,4 +44,4 @@ export const GenerateLaunchpadPanel = memo(() => { ); }); -GenerateLaunchpadPanel.displayName = 'InitialState'; +GenerateLaunchpadPanel.displayName = 'GenerateLaunchpad'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialStateAddAStyleReference.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadAddStyleReference.tsx similarity index 82% rename from invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialStateAddAStyleReference.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadAddStyleReference.tsx index 9a1c53a0a4..b4dfcff423 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialStateAddAStyleReference.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadAddStyleReference.tsx @@ -1,7 +1,7 @@ import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library'; import { useAppStore } from 'app/store/nanostores/store'; import { useImageUploadButton } from 'common/hooks/useImageUploadButton'; -import { InitialStateButtonGridItem } from 'features/controlLayers/components/SimpleSession/InitialStateButtonGridItem'; +import { LaunchpadButton } from 'features/controlLayers/components/SimpleSession/LaunchpadButton'; import { getDefaultRefImageConfig } from 'features/controlLayers/hooks/addLayerHooks'; import { refImageAdded } from 'features/controlLayers/store/refImagesSlice'; import { imageDTOToImageWithDims } from 'features/controlLayers/store/util'; @@ -13,7 +13,7 @@ import type { ImageDTO } from 'services/api/types'; const dndTargetData = addGlobalReferenceImageDndTarget.getData(); -export const InitialStateAddAStyleReference = memo(() => { +export const LaunchpadAddStyleReference = memo(() => { const { dispatch, getState } = useAppStore(); const uploadOptions = useMemo( @@ -32,7 +32,7 @@ export const InitialStateAddAStyleReference = memo(() => { const uploadApi = useImageUploadButton(uploadOptions); return ( - + Add a Style Reference @@ -43,7 +43,7 @@ export const InitialStateAddAStyleReference = memo(() => { - + ); }); -InitialStateAddAStyleReference.displayName = 'InitialStateAddAStyleReference'; +LaunchpadAddStyleReference.displayName = 'LaunchpadAddStyleReference'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialStateButtonGridItem.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadButton.tsx similarity index 82% rename from invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialStateButtonGridItem.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadButton.tsx index c7b85239d9..150fada4e6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialStateButtonGridItem.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadButton.tsx @@ -2,7 +2,7 @@ import type { ButtonProps } from '@invoke-ai/ui-library'; import { Button, forwardRef } from '@invoke-ai/ui-library'; import { memo } from 'react'; -export const InitialStateButtonGridItem = memo( +export const LaunchpadButton = memo( forwardRef(({ children, ...rest }: ButtonProps, ref) => { return (