Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): optimized workflow building

Browse Source 
- Store workflow in nanostore as singleton instead of building for each consumer
- Debounce the build (already was indirectly debounced)
- When the workflow is needed, imperatively grab it from the nanostores, instead of letting react handle it via reactivity
This commit is contained in:
psychedelicious
2024-01-01 15:54:31 +11:00
committed by Kent Keirsey
parent 7eb79266c4
commit 7e2eeec1f3
8 changed files with 67 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
invokeai/frontend/web/src/features/nodes/hooks/useWorkflow.ts
View File

@ -1,19 +0,0 @@
import { useAppSelector } from 'app/store/storeHooks';
import { buildWorkflow } from 'features/nodes/util/workflow/buildWorkflow';
import { useMemo } from 'react';
import { useDebounce } from 'use-debounce';
export const useWorkflow = () => {
const nodes_ = useAppSelector((state) => state.nodes.nodes);
const edges_ = useAppSelector((state) => state.nodes.edges);
const workflow_ = useAppSelector((state) => state.workflow);
const [nodes] = useDebounce(nodes_, 300);
const [edges] = useDebounce(edges_, 300);
const [workflow] = useDebounce(workflow_, 300);
const builtWorkflow = useMemo(
() => buildWorkflow({ nodes, edges, workflow }),
[nodes, edges, workflow]
);
return builtWorkflow;
};

25
invokeai/frontend/web/src/features/nodes/hooks/useWorkflowWatcher.ts Normal file
View File

@ -0,0 +1,25 @@
import { useAppSelector } from 'app/store/storeHooks';
import type { WorkflowV2 } from 'features/nodes/types/workflow';
import type { BuildWorkflowArg } from 'features/nodes/util/workflow/buildWorkflow';
import { buildWorkflow } from 'features/nodes/util/workflow/buildWorkflow';
import { debounce } from 'lodash-es';
import { atom } from 'nanostores';
import { useEffect } from 'react';
export const $builtWorkflow = atom<WorkflowV2 | null>(null);
const debouncedBuildWorkflow = debounce((arg: BuildWorkflowArg) => {
$builtWorkflow.set(buildWorkflow(arg));
}, 300);
export const useWorkflowWatcher = () => {
const buildWorkflowArg = useAppSelector(({ nodes, workflow }) => ({
nodes: nodes.nodes,
edges: nodes.edges,
workflow,
}));
useEffect(() => {
debouncedBuildWorkflow(buildWorkflowArg);
}, [buildWorkflowArg]);
};