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

refactor(ui): canvas flow (wip)

Browse Source
This commit is contained in:
psychedelicious
2025-05-29 16:36:36 +10:00
parent d985dfe821
commit faeb5f0c3b
21 changed files with 658 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
invokeai/frontend/web/src/services/events/setEventListeners.tsx
View File

@@ -30,7 +30,15 @@ import type { ClientToServerEvents, ServerToClientEvents } from 'services/events
import type { Socket } from 'socket.io-client';
import type { JsonObject } from 'type-fest';
import { $lastCanvasProgressEvent, $lastProgressEvent } from './stores';
import {
$lastCanvasProgressEvent,
$lastCanvasProgressImage,
$lastProgressEvent,
$lastUpscalingProgressEvent,
$lastUpscalingProgressImage,
$lastWorkflowsProgressEvent,
$lastWorkflowsProgressImage,
} from './stores';
const log = logger('events');
@@ -92,7 +100,7 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis
});
socket.on('invocation_progress', (data) => {
const { invocation_source_id, invocation, image, origin, percentage, message } = data;
const { invocation_source_id, invocation, session_id, image, origin, percentage, message } = data;
let _message = 'Invocation progress';
if (message) {
@@ -107,7 +115,27 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis
$lastProgressEvent.set(data);
if (origin === 'canvas') {
$lastCanvasProgressEvent.set(data);
if (image) {
$lastCanvasProgressImage.set({ sessionId: session_id, image });
}
}
if (origin === 'upscaling') {
$lastUpscalingProgressEvent.set(data);
if (image) {
$lastUpscalingProgressImage.set({ sessionId: session_id, image });
}
}
if (origin === 'workflows') {
$lastWorkflowsProgressEvent.set(data);
if (image) {
$lastWorkflowsProgressImage.set({ sessionId: session_id, image });
}
const nes = deepClone($nodeExecutionStates.get()[invocation_source_id]);
if (nes) {
nes.status = zNodeStatus.enum.IN_PROGRESS;

35
invokeai/frontend/web/src/services/events/stores.ts
View File

@@ -1,4 +1,4 @@
import type { ProgressImage } from 'features/nodes/types/common';
import type { EphemeralProgressImage } from 'features/controlLayers/store/types';
import { round } from 'lodash-es';
import { atom, computed, map } from 'nanostores';
import type { S } from 'services/api/types';
@@ -9,33 +9,6 @@ export const $socket = atom<AppSocket | null>(null);
export const $socketOptions = map<Partial<ManagerOptions & SocketOptions>>({});
export const $isConnected = atom<boolean>(false);
export const $lastProgressEvent = atom<S['InvocationProgressEvent'] | null>(null);
$lastProgressEvent.subscribe((event) => {
if (!event) {
return;
}
switch (event.destination) {
case 'workflows':
$lastWorkflowsProgressEvent.set(event);
if (event.image) {
$lastWorkflowsProgressImage.set({ sessionId: event.session_id, image: event.image });
}
break;
case 'upscaling':
$lastUpscalingProgressEvent.set(event);
if (event.image) {
$lastUpscalingProgressImage.set({ sessionId: event.session_id, image: event.image });
}
break;
case 'canvas':
$lastCanvasProgressEvent.set(event);
if (event.image) {
$lastCanvasProgressImage.set({ sessionId: event.session_id, image: event.image });
}
break;
}
});
type EphemeralProgressImage = { sessionId: string; image: ProgressImage };
export const $lastCanvasProgressEvent = atom<S['InvocationProgressEvent'] | null>(null);
export const $lastCanvasProgressImage = atom<EphemeralProgressImage | null>(null);
@@ -44,9 +17,9 @@ export const $lastWorkflowsProgressImage = atom<EphemeralProgressImage | null>(n
export const $lastUpscalingProgressEvent = atom<S['InvocationProgressEvent'] | null>(null);
export const $lastUpscalingProgressImage = atom<EphemeralProgressImage | null>(null);
export const $progressImage = computed($lastProgressEvent, (val) => val?.image ?? null);
export const $hasProgressImage = computed($lastProgressEvent, (val) => Boolean(val?.image));
export const $invocationProgressMessage = computed($lastProgressEvent, (val) => {
export const $lastProgressImage = computed($lastProgressEvent, (val) => val?.image ?? null);
export const $hasLastProgressImage = computed($lastProgressEvent, (val) => Boolean(val?.image));
export const $lastProgressMessage = computed($lastProgressEvent, (val) => {
if (!val) {
return null;
}