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

feat(ui): use invoke logo for thumbnail fallback for default workflows

Browse Source
This commit is contained in:
psychedelicious
2025-03-13 07:42:55 +10:00
parent 28c74cbe38
commit 0eeb0dd67b
1 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowListItem.tsx
View File

@@ -7,7 +7,7 @@ import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/L
import InvokeLogo from 'public/assets/images/invoke-symbol-wht-lrg.svg';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiImageBold, PiUsersBold } from 'react-icons/pi';
import { PiImage, PiUsersBold } from 'react-icons/pi';
import type { WorkflowRecordListItemWithThumbnailDTO } from 'services/api/types';
import { DeleteWorkflow } from './WorkflowLibraryListItemActions/DeleteWorkflow';
@@ -66,7 +66,7 @@ export const WorkflowListItem = memo(({ workflow }: { workflow: WorkflowRecordLi
<Image
src={workflow.thumbnail_url ?? undefined}
fallbackStrategy="beforeLoadOrError"
fallback={<ThumbnailFallback />}
fallback={workflow.category === 'default' ? <DefaultThumbnailFallback /> : <UserThumbnailFallback />}
objectFit="cover"
objectPosition="50% 50%"
height={IMAGE_THUMBNAIL_SIZE}
@@ -135,18 +135,36 @@ export const WorkflowListItem = memo(({ workflow }: { workflow: WorkflowRecordLi
});
WorkflowListItem.displayName = 'WorkflowListItem';
const ThumbnailFallback = memo(() => {
const UserThumbnailFallback = memo(() => {
return (
<Flex
height={IMAGE_THUMBNAIL_SIZE}
minWidth={IMAGE_THUMBNAIL_SIZE}
bg="base.650"
bg="base.600"
borderRadius="base"
alignItems="center"
justifyContent="center"
opacity={0.3}
>
<Icon color="base.500" as={PiImageBold} boxSize={FALLBACK_ICON_SIZE} />
<Icon as={PiImage} boxSize={FALLBACK_ICON_SIZE} />
</Flex>
);
});
ThumbnailFallback.displayName = 'ThumbnailFallback';
UserThumbnailFallback.displayName = 'UserThumbnailFallback';
const DefaultThumbnailFallback = memo(() => {
return (
<Flex
height={IMAGE_THUMBNAIL_SIZE}
minWidth={IMAGE_THUMBNAIL_SIZE}
bg="base.600"
borderRadius="base"
alignItems="center"
justifyContent="center"
opacity={0.3}
>
<Image src={InvokeLogo} alt="invoke-logo" userSelect="none" boxSize={FALLBACK_ICON_SIZE} p={1} />
</Flex>
);
});
DefaultThumbnailFallback.displayName = 'DefaultThumbnailFallback';