feat(ui): convert initial image to layer when starting canvas session

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -9,6 +9,7 @@ import { addBatchEnqueuedListener } from 'app/store/middleware/listenerMiddlewar
 import { addDeleteBoardAndImagesFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted';
 import { addBoardIdSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/boardIdSelected';
 import { addBulkDownloadListeners } from 'app/store/middleware/listenerMiddleware/listeners/bulkDownload';
+import { addCanvasSessionRequestedListener } from 'app/store/middleware/listenerMiddleware/listeners/canvasSessionRequested';
 import { addControlAdapterPreprocessor } from 'app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor';
 import { addEnqueueRequestedLinear } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear';
 import { addEnqueueRequestedNodes } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes';
@@ -89,6 +90,7 @@ addBatchEnqueuedListener(startAppListening);
 // addStagingAreaImageSavedListener(startAppListening);
 // addCommitStagingAreaImageListener(startAppListening);
 addStagingListeners(startAppListening);
+addCanvasSessionRequestedListener(startAppListening);
 
 // Socket.IO
 addGeneratorProgressEventListener(startAppListening);

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasSessionRequested.ts

@@ -0,0 +1,29 @@
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import {
+  layerAdded,
+  layerImageAdded,
+  sessionRequested,
+  sessionStarted,
+} from 'features/controlLayers/store/canvasV2Slice';
+import { getImageDTO } from 'services/api/endpoints/images';
+import { assert } from 'tsafe';
+
+export const addCanvasSessionRequestedListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: sessionRequested,
+    effect: async (action, { getState, dispatch }) => {
+      const initialImageObject = getState().canvasV2.initialImage.imageObject;
+      if (initialImageObject) {
+        // We have an initial image that needs to be converted to a layer
+        dispatch(layerAdded());
+        const newLayer = getState().canvasV2.layers.entities[0];
+        assert(newLayer, 'Expected new layer to be created');
+        const imageDTO = await getImageDTO(initialImageObject.image.name);
+        assert(imageDTO, 'Unable to fetch initial image DTO');
+        dispatch(layerImageAdded({ id: newLayer.id, imageDTO }));
+      }
+
+      dispatch(sessionStarted());
+    },
+  });
+};

invokeai/frontend/web/src/features/controlLayers/components/NewSessionButton.tsx

@@ -1,13 +1,12 @@
 import { Button } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { sessionStarted } from 'features/controlLayers/store/canvasV2Slice';
+import { sessionRequested } from 'features/controlLayers/store/canvasV2Slice';
 import { memo, useCallback } from 'react';
 
 export const NewSessionButton = memo(() => {
   const dispatch = useAppDispatch();
-
   const onClick = useCallback(() => {
-    dispatch(sessionStarted());
+    dispatch(sessionRequested());
   }, [dispatch]);
 
   return <Button onClick={onClick}>New</Button>;