github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-13 12:44:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

WIP workflow thumbnails - how to add to redux state?

Browse Source
This commit is contained in:
Mary Hipp
2025-02-21 16:32:59 -05:00
committed by psychedelicious
parent 1f6430c1b0
commit d4423aa16f
17 changed files with 608 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
View File

@@ -1,13 +1,20 @@
import type { ToastId } from '@invoke-ai/ui-library';
import { useToast } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { convertImageUrlToBlob } from 'common/util/convertImageUrlToBlob';
import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
import { formFieldInitialValuesChanged, workflowIDChanged, workflowSaved } from 'features/nodes/store/workflowSlice';
import {
formFieldInitialValuesChanged,
selectWorkflowThumbnail,
workflowIDChanged,
workflowSaved,
} from 'features/nodes/store/workflowSlice';
import type { WorkflowV3 } from 'features/nodes/types/workflow';
import { useGetFormFieldInitialValues } from 'features/workflowLibrary/hooks/useGetFormInitialValues';
import { workflowUpdated } from 'features/workflowLibrary/store/actions';
import { useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { useCreateWorkflowMutation, useUpdateWorkflowMutation, workflowsApi } from 'services/api/endpoints/workflows';
import type { SetRequired } from 'type-fest';
@@ -26,6 +33,7 @@ export const useSaveLibraryWorkflow: UseSaveLibraryWorkflow = () => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const getFormFieldInitialValues = useGetFormFieldInitialValues();
const thumbnail = useSelector(selectWorkflowThumbnail);
const [updateWorkflow, updateWorkflowResult] = useUpdateWorkflowMutation();
const [createWorkflow, createWorkflowResult] = useCreateWorkflowMutation();
const toast = useToast();
@@ -42,11 +50,13 @@ export const useSaveLibraryWorkflow: UseSaveLibraryWorkflow = () => {
isClosable: false,
});
try {
const blob = thumbnail ? await convertImageUrlToBlob(thumbnail) : null;
const image = blob ? new File([blob], 'thumbnail.png', { type: 'image/png' }) : null;
if (isWorkflowWithID(workflow)) {
await updateWorkflow(workflow).unwrap();
await updateWorkflow({ workflow, image }).unwrap();
dispatch(workflowUpdated());
} else {
const data = await createWorkflow(workflow).unwrap();
const data = await createWorkflow({ workflow, image }).unwrap();
dispatch(workflowIDChanged(data.workflow.id));
}
dispatch(workflowSaved());
@@ -73,7 +83,7 @@ export const useSaveLibraryWorkflow: UseSaveLibraryWorkflow = () => {
toast.close(toastRef.current);
}
}
}, [toast, t, dispatch, getFormFieldInitialValues, updateWorkflow, createWorkflow]);
}, [toast, t, dispatch, getFormFieldInitialValues, updateWorkflow, createWorkflow, thumbnail]);
return {
saveWorkflow,
isLoading: updateWorkflowResult.isLoading || createWorkflowResult.isLoading,

10
invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
View File

@@ -1,9 +1,11 @@
import type { ToastId } from '@invoke-ai/ui-library';
import { useToast } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { convertImageUrlToBlob } from 'common/util/convertImageUrlToBlob';
import { $builtWorkflow } from 'features/nodes/hooks/useWorkflowWatcher';
import {
formFieldInitialValuesChanged,
selectWorkflowThumbnail,
workflowCategoryChanged,
workflowIDChanged,
workflowNameChanged,
@@ -14,6 +16,7 @@ import { useGetFormFieldInitialValues } from 'features/workflowLibrary/hooks/use
import { newWorkflowSaved } from 'features/workflowLibrary/store/actions';
import { useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { useCreateWorkflowMutation, workflowsApi } from 'services/api/endpoints/workflows';
type SaveWorkflowAsArg = {
@@ -37,6 +40,7 @@ export const useSaveWorkflowAs: UseSaveWorkflowAs = () => {
const [createWorkflow, createWorkflowResult] = useCreateWorkflowMutation();
const getFormFieldInitialValues = useGetFormFieldInitialValues();
const thumbnail = useSelector(selectWorkflowThumbnail);
const toast = useToast();
const toastRef = useRef<ToastId | undefined>();
const saveWorkflowAs = useCallback(
@@ -55,8 +59,10 @@ export const useSaveWorkflowAs: UseSaveWorkflowAs = () => {
workflow.id = undefined;
workflow.name = newName;
workflow.meta.category = category;
const blob = thumbnail ? await convertImageUrlToBlob(thumbnail) : null;
const image = blob ? new File([blob], 'thumbnail.png', { type: 'image/png' }) : null;
const data = await createWorkflow(workflow).unwrap();
const data = await createWorkflow({ workflow, image }).unwrap();
dispatch(workflowIDChanged(data.workflow.id));
dispatch(workflowNameChanged(data.workflow.name));
dispatch(workflowCategoryChanged(data.workflow.meta.category));
@@ -86,7 +92,7 @@ export const useSaveWorkflowAs: UseSaveWorkflowAs = () => {
}
}
},
[toast, t, createWorkflow, dispatch, getFormFieldInitialValues]
[toast, t, createWorkflow, dispatch, getFormFieldInitialValues, thumbnail]
);
return {
saveWorkflowAs,