mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat: Save and Loads Nodes From Disk
This commit is contained in:
parent
f46f8058be
commit
b9767e9c6e
@ -593,7 +593,10 @@
|
|||||||
"metadataLoadFailed": "Failed to load metadata",
|
"metadataLoadFailed": "Failed to load metadata",
|
||||||
"initialImageSet": "Initial Image Set",
|
"initialImageSet": "Initial Image Set",
|
||||||
"initialImageNotSet": "Initial Image Not Set",
|
"initialImageNotSet": "Initial Image Not Set",
|
||||||
"initialImageNotSetDesc": "Could not load initial image"
|
"initialImageNotSetDesc": "Could not load initial image",
|
||||||
|
"nodesSaved": "Nodes Saved",
|
||||||
|
"nodesLoaded": "Nodes Loaded",
|
||||||
|
"nodesLoadedFailed": "Failed To Load Nodes"
|
||||||
},
|
},
|
||||||
"tooltip": {
|
"tooltip": {
|
||||||
"feature": {
|
"feature": {
|
||||||
@ -674,5 +677,9 @@
|
|||||||
"showProgressImages": "Show Progress Images",
|
"showProgressImages": "Show Progress Images",
|
||||||
"hideProgressImages": "Hide Progress Images",
|
"hideProgressImages": "Hide Progress Images",
|
||||||
"swapSizes": "Swap Sizes"
|
"swapSizes": "Swap Sizes"
|
||||||
|
},
|
||||||
|
"nodes": {
|
||||||
|
"saveNodes": "Save Nodes",
|
||||||
|
"loadNodes": "Load Nodes"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -7,6 +7,7 @@ import {
|
|||||||
OnConnectEnd,
|
OnConnectEnd,
|
||||||
OnConnectStart,
|
OnConnectStart,
|
||||||
OnEdgesChange,
|
OnEdgesChange,
|
||||||
|
OnInit,
|
||||||
OnNodesChange,
|
OnNodesChange,
|
||||||
ReactFlow,
|
ReactFlow,
|
||||||
} from 'reactflow';
|
} from 'reactflow';
|
||||||
@ -16,6 +17,7 @@ import {
|
|||||||
connectionStarted,
|
connectionStarted,
|
||||||
edgesChanged,
|
edgesChanged,
|
||||||
nodesChanged,
|
nodesChanged,
|
||||||
|
setEditorInstance,
|
||||||
} from '../store/nodesSlice';
|
} from '../store/nodesSlice';
|
||||||
import { InvocationComponent } from './InvocationComponent';
|
import { InvocationComponent } from './InvocationComponent';
|
||||||
import ProgressImageNode from './ProgressImageNode';
|
import ProgressImageNode from './ProgressImageNode';
|
||||||
@ -67,6 +69,13 @@ export const Flow = () => {
|
|||||||
dispatch(connectionEnded());
|
dispatch(connectionEnded());
|
||||||
}, [dispatch]);
|
}, [dispatch]);
|
||||||
|
|
||||||
|
const onInit: OnInit = useCallback(
|
||||||
|
(v) => {
|
||||||
|
dispatch(setEditorInstance(v));
|
||||||
|
},
|
||||||
|
[dispatch]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ReactFlow
|
<ReactFlow
|
||||||
nodeTypes={nodeTypes}
|
nodeTypes={nodeTypes}
|
||||||
@ -77,6 +86,7 @@ export const Flow = () => {
|
|||||||
onConnectStart={onConnectStart}
|
onConnectStart={onConnectStart}
|
||||||
onConnect={onConnect}
|
onConnect={onConnect}
|
||||||
onConnectEnd={onConnectEnd}
|
onConnectEnd={onConnectEnd}
|
||||||
|
onInit={onInit}
|
||||||
defaultEdgeOptions={{
|
defaultEdgeOptions={{
|
||||||
style: { strokeWidth: 2 },
|
style: { strokeWidth: 2 },
|
||||||
}}
|
}}
|
||||||
|
@ -1,11 +1,13 @@
|
|||||||
import { HStack } from '@chakra-ui/react';
|
import { HStack } from '@chakra-ui/react';
|
||||||
import { useAppDispatch } from 'app/store/storeHooks';
|
import { useAppDispatch } from 'app/store/storeHooks';
|
||||||
import IAIButton from 'common/components/IAIButton';
|
import IAIButton from 'common/components/IAIButton';
|
||||||
|
import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
|
||||||
import { memo, useCallback } from 'react';
|
import { memo, useCallback } from 'react';
|
||||||
import { Panel } from 'reactflow';
|
import { Panel } from 'reactflow';
|
||||||
import { receivedOpenAPISchema } from 'services/api/thunks/schema';
|
import { receivedOpenAPISchema } from 'services/api/thunks/schema';
|
||||||
|
import LoadNodesButton from '../ui/LoadNodesButton';
|
||||||
import NodeInvokeButton from '../ui/NodeInvokeButton';
|
import NodeInvokeButton from '../ui/NodeInvokeButton';
|
||||||
import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
|
import SaveNodesButton from '../ui/SaveNodesButton';
|
||||||
|
|
||||||
const TopCenterPanel = () => {
|
const TopCenterPanel = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
@ -20,6 +22,8 @@ const TopCenterPanel = () => {
|
|||||||
<NodeInvokeButton />
|
<NodeInvokeButton />
|
||||||
<CancelButton />
|
<CancelButton />
|
||||||
<IAIButton onClick={handleReloadSchema}>Reload Schema</IAIButton>
|
<IAIButton onClick={handleReloadSchema}>Reload Schema</IAIButton>
|
||||||
|
<SaveNodesButton />
|
||||||
|
<LoadNodesButton />
|
||||||
</HStack>
|
</HStack>
|
||||||
</Panel>
|
</Panel>
|
||||||
);
|
);
|
||||||
|
@ -0,0 +1,80 @@
|
|||||||
|
import { FileButton } from '@mantine/core';
|
||||||
|
import { makeToast } from 'app/components/Toaster';
|
||||||
|
import { useAppDispatch } from 'app/store/storeHooks';
|
||||||
|
import IAIIconButton from 'common/components/IAIIconButton';
|
||||||
|
import { loadFileEdges, loadFileNodes } from 'features/nodes/store/nodesSlice';
|
||||||
|
import { addToast } from 'features/system/store/systemSlice';
|
||||||
|
import { memo, useCallback, useRef } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { BiUpload } from 'react-icons/bi';
|
||||||
|
import { useReactFlow } from 'reactflow';
|
||||||
|
|
||||||
|
const LoadNodesButton = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const { setViewport } = useReactFlow();
|
||||||
|
|
||||||
|
const uploadedFileRef = useRef<() => void>(null);
|
||||||
|
|
||||||
|
const restoreJSONToEditor = useCallback(
|
||||||
|
(v: File | null) => {
|
||||||
|
if (!v) return;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = async () => {
|
||||||
|
const json = reader.result;
|
||||||
|
const retrievedNodeTree = await JSON.parse(String(json));
|
||||||
|
|
||||||
|
if (!retrievedNodeTree) {
|
||||||
|
dispatch(
|
||||||
|
addToast(
|
||||||
|
makeToast({
|
||||||
|
title: t('toast.nodesLoadedFailed'),
|
||||||
|
status: 'error',
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (retrievedNodeTree) {
|
||||||
|
const { x = 0, y = 0, zoom = 1 } = retrievedNodeTree.viewport;
|
||||||
|
dispatch(loadFileNodes(retrievedNodeTree.nodes));
|
||||||
|
dispatch(loadFileEdges(retrievedNodeTree.edges));
|
||||||
|
setViewport({ x, y, zoom });
|
||||||
|
dispatch(
|
||||||
|
addToast(
|
||||||
|
makeToast({ title: t('toast.nodesLoaded'), status: 'success' })
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cleanup
|
||||||
|
reader.abort();
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.readAsText(v);
|
||||||
|
|
||||||
|
// Cleanup
|
||||||
|
uploadedFileRef.current?.();
|
||||||
|
},
|
||||||
|
[setViewport, dispatch, t]
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<FileButton
|
||||||
|
resetRef={uploadedFileRef}
|
||||||
|
accept="application/json"
|
||||||
|
onChange={restoreJSONToEditor}
|
||||||
|
>
|
||||||
|
{(props) => (
|
||||||
|
<IAIIconButton
|
||||||
|
icon={<BiUpload />}
|
||||||
|
fontSize={20}
|
||||||
|
tooltip={t('nodes.loadNodes')}
|
||||||
|
aria-label={t('nodes.loadNodes')}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</FileButton>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default memo(LoadNodesButton);
|
@ -0,0 +1,39 @@
|
|||||||
|
import { RootState } from 'app/store/store';
|
||||||
|
import { useAppSelector } from 'app/store/storeHooks';
|
||||||
|
import IAIIconButton from 'common/components/IAIIconButton';
|
||||||
|
import { memo, useCallback } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { BiSave } from 'react-icons/bi';
|
||||||
|
|
||||||
|
const SaveNodesButton = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const editorInstance = useAppSelector(
|
||||||
|
(state: RootState) => state.nodes.editorInstance
|
||||||
|
);
|
||||||
|
|
||||||
|
const saveEditorToJSON = useCallback(() => {
|
||||||
|
if (editorInstance) {
|
||||||
|
const editorState = editorInstance.toObject();
|
||||||
|
const nodeSetupJSON = new Blob([JSON.stringify(editorState)]);
|
||||||
|
const nodeDownloadElement = document.createElement('a');
|
||||||
|
nodeDownloadElement.href = URL.createObjectURL(nodeSetupJSON);
|
||||||
|
nodeDownloadElement.download = 'MyNodes.json';
|
||||||
|
document.body.appendChild(nodeDownloadElement);
|
||||||
|
nodeDownloadElement.click();
|
||||||
|
// Cleanup
|
||||||
|
nodeDownloadElement.remove();
|
||||||
|
}
|
||||||
|
}, [editorInstance]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IAIIconButton
|
||||||
|
icon={<BiSave />}
|
||||||
|
fontSize={20}
|
||||||
|
tooltip={t('nodes.saveNodes')}
|
||||||
|
aria-label={t('nodes.saveNodes')}
|
||||||
|
onClick={saveEditorToJSON}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default memo(SaveNodesButton);
|
@ -13,6 +13,7 @@ import {
|
|||||||
Node,
|
Node,
|
||||||
NodeChange,
|
NodeChange,
|
||||||
OnConnectStartParams,
|
OnConnectStartParams,
|
||||||
|
ReactFlowInstance,
|
||||||
} from 'reactflow';
|
} from 'reactflow';
|
||||||
import { receivedOpenAPISchema } from 'services/api/thunks/schema';
|
import { receivedOpenAPISchema } from 'services/api/thunks/schema';
|
||||||
import { ImageField } from 'services/api/types';
|
import { ImageField } from 'services/api/types';
|
||||||
@ -25,6 +26,7 @@ export type NodesState = {
|
|||||||
invocationTemplates: Record<string, InvocationTemplate>;
|
invocationTemplates: Record<string, InvocationTemplate>;
|
||||||
connectionStartParams: OnConnectStartParams | null;
|
connectionStartParams: OnConnectStartParams | null;
|
||||||
shouldShowGraphOverlay: boolean;
|
shouldShowGraphOverlay: boolean;
|
||||||
|
editorInstance: ReactFlowInstance | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const initialNodesState: NodesState = {
|
export const initialNodesState: NodesState = {
|
||||||
@ -34,6 +36,7 @@ export const initialNodesState: NodesState = {
|
|||||||
invocationTemplates: {},
|
invocationTemplates: {},
|
||||||
connectionStartParams: null,
|
connectionStartParams: null,
|
||||||
shouldShowGraphOverlay: false,
|
shouldShowGraphOverlay: false,
|
||||||
|
editorInstance: undefined,
|
||||||
};
|
};
|
||||||
|
|
||||||
const nodesSlice = createSlice({
|
const nodesSlice = createSlice({
|
||||||
@ -121,6 +124,15 @@ const nodesSlice = createSlice({
|
|||||||
nodeEditorReset: () => {
|
nodeEditorReset: () => {
|
||||||
return { ...initialNodesState };
|
return { ...initialNodesState };
|
||||||
},
|
},
|
||||||
|
setEditorInstance: (state, action) => {
|
||||||
|
state.editorInstance = action.payload;
|
||||||
|
},
|
||||||
|
loadFileNodes: (state, action: PayloadAction<Node<InvocationValue>[]>) => {
|
||||||
|
state.nodes = action.payload;
|
||||||
|
},
|
||||||
|
loadFileEdges: (state, action: PayloadAction<Edge[]>) => {
|
||||||
|
state.edges = action.payload;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
extraReducers: (builder) => {
|
extraReducers: (builder) => {
|
||||||
builder.addCase(receivedOpenAPISchema.fulfilled, (state, action) => {
|
builder.addCase(receivedOpenAPISchema.fulfilled, (state, action) => {
|
||||||
@ -141,6 +153,9 @@ export const {
|
|||||||
nodeTemplatesBuilt,
|
nodeTemplatesBuilt,
|
||||||
nodeEditorReset,
|
nodeEditorReset,
|
||||||
imageCollectionFieldValueChanged,
|
imageCollectionFieldValueChanged,
|
||||||
|
setEditorInstance,
|
||||||
|
loadFileNodes,
|
||||||
|
loadFileEdges,
|
||||||
} = nodesSlice.actions;
|
} = nodesSlice.actions;
|
||||||
|
|
||||||
export default nodesSlice.reducer;
|
export default nodesSlice.reducer;
|
||||||
|
Loading…
Reference in New Issue
Block a user