github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-01-15 06:18:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): tweak staging image display

Browse Source
This commit is contained in:
psychedelicious
2025-06-05 19:58:59 +10:00
parent bf5ed61b84
commit cd0668dd0b
3 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx
View File

@@ -62,7 +62,7 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) =
>
<QueueItemStatusLabel status={item.status} position="absolute" margin="auto" />
{imageDTO && <DndImage imageDTO={imageDTO} onLoad={onLoad} asThumbnail />}
{!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" />}
{!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" withBg />}
<QueueItemNumber number={number} position="absolute" top={0} left={1} />
<QueueItemCircularProgress itemId={item.item_id} status={item.status} position="absolute" top={1} right={2} />
</Flex>

10
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemProgressImage.tsx
View File

@@ -3,14 +3,18 @@ import { Flex, Image } from '@invoke-ai/ui-library';
import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
import { memo } from 'react';
type Props = { itemId: number } & ImageProps;
type Props = { itemId: number; withBg?: boolean } & ImageProps;
export const QueueItemProgressImage = memo(({ itemId, ...rest }: Props) => {
export const QueueItemProgressImage = memo(({ itemId, withBg, ...rest }: Props) => {
const ctx = useCanvasSessionContext();
const { progressImage } = useProgressData(ctx.$progressData, itemId);
if (!progressImage) {
return <Flex w="full" h="full" bg="base.900" alignItems="center" justifyContent="center" />;
if (withBg) {
return <Flex w="full" h="full" bg="base.900" alignItems="center" justifyContent="center" />;
} else {
return null;
}
}
return (

3
invokeai/frontend/web/src/features/dnd/DndImage.tsx
View File

@@ -77,7 +77,8 @@ export const DndImage = memo(
ref={ref}
src={asThumbnail ? imageDTO.thumbnail_url : imageDTO.image_url}
fallbackSrc={asThumbnail ? undefined : imageDTO.thumbnail_url}
w={imageDTO.width}
width={imageDTO.width}
height={imageDTO.height}
sx={sx}
data-is-dragging={isDragging}
{...rest}