diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx index 53b0c7164a..23491b9efa 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx @@ -1,4 +1,5 @@ -import { Flex } from '@invoke-ai/ui-library'; +/* eslint-disable i18next/no-literal-string */ +import { Button, Flex } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; import { AddLayerButton } from 'features/regionalPrompts/components/AddLayerButton'; @@ -7,6 +8,7 @@ import { LayerListItem } from 'features/regionalPrompts/components/LayerListItem import { RegionalPromptsStage } from 'features/regionalPrompts/components/RegionalPromptsStage'; import { ToolChooser } from 'features/regionalPrompts/components/ToolChooser'; import { selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { getLayerBlobs } from 'features/regionalPrompts/util/getLayerBlobs'; const selectLayerIdsReversed = createSelector(selectRegionalPromptsSlice, (regionalPrompts) => regionalPrompts.layers.map((l) => l.id).reverse() @@ -17,6 +19,7 @@ export const RegionalPromptsEditor = () => { return ( + diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsStage.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsStage.tsx index a8335444d6..5a25bf8d1b 100644 --- a/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsStage.tsx +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsStage.tsx @@ -56,7 +56,7 @@ export const RegionalPromptsStage: React.FC = memo(() => { sx={stageSx} > {layers.map((layer) => ( - + {layer.objects.map((obj) => { if (obj.kind === 'line') { return ; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts b/invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts new file mode 100644 index 0000000000..a491de6a59 --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts @@ -0,0 +1,26 @@ +import { getStore } from 'app/store/nanostores/store'; +import openBase64ImageInTab from 'common/util/openBase64ImageInTab'; +import { blobToDataURL } from 'features/canvas/util/blobToDataURL'; +import { $stage } from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { assert } from 'tsafe'; + +export const getLayerBlobs = async () => { + const state = getStore().getState(); + const stage = $stage.get(); + assert(stage !== null, 'Stage is null'); + const stageLayers = stage.getLayers().filter((l) => l.name() === 'regionalPromptLayer'); + for (const layer of stageLayers) { + const blob = await new Promise((resolve) => { + layer.toBlob({ + callback: (blob) => { + assert(blob, 'Blob is null'); + resolve(blob); + }, + }); + }); + const base64 = await blobToDataURL(blob); + const prompt = state.regionalPrompts.layers.find((l) => l.id === layer.id())?.prompt; + assert(prompt !== undefined, 'Prompt is undefined'); + openBase64ImageInTab([{ base64, caption: prompt }]); + } +};