Skip to content

Metadata in Canvas Staging #8142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
+718 −44
Closed

Metadata in Canvas Staging #8142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cc16192
Add info button to staging area toolbar with generation details
cursoragent Jun 27, 2025
74a1203
Consistency in handling logic
hipsterusername Jun 27, 2025
e23c255
Linting fixes
hipsterusername Jun 27, 2025
0b78772
Lints
hipsterusername Jun 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion invokeai/frontend/web/public/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2340,7 +2340,8 @@
"next": "Next",
"saveToGallery": "Save To Gallery",
"showResultsOn": "Showing Results",
"showResultsOff": "Hiding Results"
"showResultsOff": "Hiding Results",
"info": "Info"
}
},
"upscaling": {
Expand Down
2 changes: 2 additions & 0 deletions ...ontend/web/src/features/controlLayers/components/StagingArea/SimpleStagingAreaToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { SimpleStagingAreaToolbarMenu } from 'features/controlLayers/components/
import { StagingAreaToolbarDiscardAllButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton';
import { StagingAreaToolbarDiscardSelectedButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton';
import { StagingAreaToolbarImageCountButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarImageCountButton';
import { StagingAreaToolbarInfoButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarInfoButton';
import { StagingAreaToolbarNextButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarNextButton';
import { StagingAreaToolbarPrevButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton';
import { memo } from 'react';
Expand All @@ -16,6 +17,7 @@ export const SimpleStagingAreaToolbar = memo(() => {
<StagingAreaToolbarNextButton />
</ButtonGroup>
<ButtonGroup borderRadius="base" shadow="dark-lg">
<StagingAreaToolbarInfoButton />
<StagingAreaToolbarDiscardSelectedButton />
<SimpleStagingAreaToolbarMenu />
<StagingAreaToolbarDiscardAllButton />
Expand Down
2 changes: 2 additions & 0 deletions ...eai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { StagingAreaToolbarAcceptButton } from 'features/controlLayers/component
import { StagingAreaToolbarDiscardAllButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton';
import { StagingAreaToolbarDiscardSelectedButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton';
import { StagingAreaToolbarImageCountButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarImageCountButton';
import { StagingAreaToolbarInfoButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarInfoButton';
import { StagingAreaToolbarMenu } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarMenu';
import { StagingAreaToolbarNextButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarNextButton';
import { StagingAreaToolbarPrevButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton';
Expand Down Expand Up @@ -42,6 +43,7 @@ export const StagingAreaToolbar = memo(() => {
<StagingAreaToolbarAcceptButton />
<StagingAreaToolbarToggleShowResultsButton />
<StagingAreaToolbarSaveSelectedToGalleryButton />
<StagingAreaToolbarInfoButton isDisabled={!shouldShowStagedImage} />
<StagingAreaToolbarMenu />
<StagingAreaToolbarDiscardSelectedButton isDisabled={!shouldShowStagedImage} />
<StagingAreaToolbarDiscardAllButton isDisabled={!shouldShowStagedImage} />
Expand Down
172 changes: 172 additions & 0 deletions ...nd/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarInfoButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
import {
Divider,
Grid,
IconButton,
Popover,
PopoverBody,
PopoverContent,
PopoverTrigger,
Text,
VStack,
} from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
import { MetadataItem } from 'features/metadata/components/MetadataItem';
import { MetadataLoRAs } from 'features/metadata/components/MetadataLoRAs';
import { useMetadataExtraction } from 'features/metadata/hooks/useMetadataExtraction';
import { handlers } from 'features/metadata/util/handlers';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiInfoBold } from 'react-icons/pi';

export const StagingAreaToolbarInfoButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
const ctx = useCanvasSessionContext();
const selectedItem = useStore(ctx.$selectedItem);
const { t } = useTranslation();

// Extract metadata using the unified hook
const metadata = useMetadataExtraction(selectedItem);

if (!selectedItem) {
return (
<IconButton
tooltip={t('controlLayers.stagingArea.info')}
aria-label={t('controlLayers.stagingArea.info')}
icon={<PiInfoBold />}
colorScheme="invokeBlue"
isDisabled={true}
/>
);
}

return (
<Popover placement="top" isLazy>
<PopoverTrigger>
<IconButton
tooltip={t('controlLayers.stagingArea.info')}
aria-label={t('controlLayers.stagingArea.info')}
icon={<PiInfoBold />}
colorScheme="invokeBlue"
isDisabled={isDisabled}
/>
</PopoverTrigger>
<PopoverContent maxW="500px" bg="base.900" borderColor="base.700">
<PopoverBody p={4}>
<VStack align="start" spacing={4} fontSize="sm">
{/* Prompts Section */}
<VStack align="start" spacing={3} w="full">
<Text fontWeight="semibold" fontSize="md" color="base.100">
Prompts
</Text>

{metadata !== null && (
<>
<MetadataItem
metadata={metadata}
handlers={handlers.positivePrompt}
displayMode="card"
showCopy={true}
/>
<MetadataItem
metadata={metadata}
handlers={handlers.negativePrompt}
displayMode="card"
showCopy={true}
/>
</>
)}
</VStack>

<Divider borderColor="base.700" />

{/* Models and LoRAs Section - Left Column */}
<Grid templateColumns="1fr 1fr" gap={6} w="full">
<VStack align="start" spacing={4} w="full">
{/* Model Section */}
<VStack align="start" spacing={3} w="full">
<Text fontWeight="semibold" fontSize="md" color="base.100">
Model
</Text>

{metadata !== null && (
<VStack align="start" spacing={2} w="full">
<MetadataItem
metadata={metadata}
handlers={handlers.model}
displayMode="badge"
colorScheme="invokeBlue"
showCopy={true}
/>
<MetadataItem
metadata={metadata}
handlers={handlers.vae}
displayMode="badge"
colorScheme="base"
showCopy={true}
/>
</VStack>
)}
</VStack>

{/* LoRA Section */}
{metadata !== null && <MetadataLoRAs metadata={metadata} displayMode="badge" showCopy={true} />}
</VStack>

{/* Other Settings Section - Right Column */}
<VStack align="start" spacing={3} w="full">
<Text fontWeight="semibold" fontSize="md" color="base.100">
Other Settings
</Text>

{metadata !== null && (
<VStack align="start" spacing={3} w="full">
<MetadataItem metadata={metadata} handlers={handlers.seed} displayMode="simple" showCopy={true} />
<MetadataItem metadata={metadata} handlers={handlers.steps} displayMode="simple" showCopy={true} />
<MetadataItem
metadata={metadata}
handlers={handlers.cfgScale}
displayMode="simple"
showCopy={true}
/>
<MetadataItem
metadata={metadata}
handlers={handlers.scheduler}
displayMode="simple"
showCopy={true}
/>
</VStack>
)}
</VStack>
</Grid>

{/* Error Section */}
{selectedItem.error_message && (
<>
<Divider borderColor="base.700" />
<VStack align="start" spacing={2} w="full">
<Text fontWeight="semibold" fontSize="md" color="error.300">
Error
</Text>
<Text
fontSize="sm"
color="error.200"
bg="error.900"
p={3}
borderRadius="lg"
w="full"
border="1px solid"
borderColor="error.700"
>
{selectedItem.error_message}
</Text>
</VStack>
</>
)}
</VStack>
</PopoverBody>
</PopoverContent>
</Popover>
);
});

StagingAreaToolbarInfoButton.displayName = 'StagingAreaToolbarInfoButton';
65 changes: 47 additions & 18 deletions invokeai/frontend/web/src/features/metadata/components/MetadataItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,58 @@ type MetadataItemProps<T> = {
metadata: unknown;
handlers: MetadataHandlers<T>;
direction?: 'row' | 'column';
/** Display mode for the metadata item */
displayMode?: 'default' | 'badge' | 'simple' | 'card';
/** Color scheme for badge display mode */
colorScheme?: string;
/** Whether to show copy functionality */
showCopy?: boolean;
/** Whether to show recall functionality */
showRecall?: boolean;
};

const _MetadataItem = typedMemo(<T,>({ metadata, handlers, direction = 'row' }: MetadataItemProps<T>) => {
const { label, isDisabled, value, renderedValue, onRecall } = useMetadataItem(metadata, handlers);
const _MetadataItem = typedMemo(
<T,>({
metadata,
handlers,
direction = 'row',
displayMode = 'default',
colorScheme = 'invokeBlue',
showCopy = false,
showRecall = true,
}: MetadataItemProps<T>) => {
const { label, isDisabled, value, renderedValue, onRecall, valueOrNull } = useMetadataItem(metadata, handlers);

if (value === MetadataParseFailedToken) {
return null;
}
if (value === MetadataParseFailedToken) {
return null;
}

if (handlers.getIsVisible && !isSymbol(value) && !handlers.getIsVisible(value)) {
return null;
}
if (handlers.getIsVisible && !isSymbol(value) && !handlers.getIsVisible(value)) {
return null;
}

return (
<MetadataItemView
label={label}
onRecall={onRecall}
isDisabled={isDisabled}
renderedValue={renderedValue}
direction={direction}
/>
);
});
// For display modes other than default, we need the raw value for copy functionality
if (displayMode !== 'default') {
if (!valueOrNull) {
return null;
}
}

return (
<MetadataItemView
label={label}
onRecall={showRecall ? onRecall : undefined}
isDisabled={isDisabled}
renderedValue={renderedValue}
direction={direction}
displayMode={displayMode}
colorScheme={colorScheme}
showCopy={showCopy}
valueOrNull={valueOrNull}
/>
);
}
);

export const MetadataItem = typedMemo(_MetadataItem);

Expand Down
Loading