diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 46967a2c3a4..5b7d2d4c90a 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1985,6 +1985,7 @@ "allLoaded": "All Workflows Loaded", "searchPlaceholder": "Search by name, description or tags", "filterByTags": "Filter by Tags", + "tags": "Tags", "yourWorkflows": "Your Workflows", "recentlyOpened": "Recently Opened", "noRecentWorkflows": "No Recent Workflows", diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowListItem.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowListItem.tsx index 8ea1bbf511f..a1767765c93 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowListItem.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowListItem.tsx @@ -39,6 +39,16 @@ export const WorkflowListItem = memo(({ workflow }: { workflow: WorkflowRecordLi return workflowId === workflow.workflow_id; }, [workflowId, workflow.workflow_id]); + const tags = useMemo(() => { + if (!workflow.tags) { + return []; + } + return workflow.tags + .split(',') + .map((tag) => tag.trim()) + .filter((tag) => tag.length > 0); + }, [workflow.tags]); + const handleClickLoad = useCallback(() => { loadWorkflowWithDialog({ type: 'library', @@ -109,6 +119,16 @@ export const WorkflowListItem = memo(({ workflow }: { workflow: WorkflowRecordLi {workflow.description} + {tags.length > 0 && ( + + + {t('workflows.tags')}:{' '} + + + {tags.join(', ')} + + + )} {workflow.opened_at && (