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

feat(ui): add util to get blobs from layers

Browse Source
This commit is contained in:
psychedelicious 2024-04-09 19:43:10 +10:00 committed by Kent Keirsey
parent 52ba4966c9
commit c89a24d1ea
3 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx
View File

@ -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 (
<Flex gap={4}>
<Flex flexDir="column" w={200} gap={4}>
<Button onClick={getLayerBlobs}>DEBUG LAYERS</Button>
<AddLayerButton />
<BrushSize />
<ToolChooser />

2
invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsStage.tsx
View File

@ -56,7 +56,7 @@ export const RegionalPromptsStage: React.FC = memo(() => {
sx={stageSx}
>
{layers.map((layer) => (
<Layer key={layer.id}>
<Layer key={layer.id} id={layer.id} name="regionalPromptLayer">
{layer.objects.map((obj) => {
if (obj.kind === 'line') {
return <LineComponent key={obj.id} line={obj} color={layer.color} />;

26
invokeai/frontend/web/src/features/regionalPrompts/util/getLayerBlobs.ts Normal file
View File

@ -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<Blob>((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 }]);
}
};