From 1c38cce16d0ad74ce5e04d147cee5b1aecfc5c39 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 20 Sep 2023 22:39:54 +1000
Subject: [PATCH 1/5] feat(ui): add confirmation dialog box to clear queue
button
---
invokeai/frontend/web/public/locales/en.json | 2 ++
.../queue/components/ClearQueueButton.tsx | 35 ++++++++++++-------
.../queue/components/common/QueueButton.tsx | 2 +-
3 files changed, 26 insertions(+), 13 deletions(-)
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index d69015fbdc..f979c91247 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -239,6 +239,8 @@
"cancelItem": "Cancel Item",
"cancelBatchSucceeded": "Batch Canceled",
"cancelBatchFailed": "Problem Canceling Batch",
+ "clearQueueAlertDialog": "Clearing the queue immediately cancels any processing items and clears the queue entirely.",
+ "clearQueueAlertDialog2": "Are you sure you want to clear the queue?",
"current": "Current",
"next": "Next",
"status": "Status",
diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
index 1cf7665983..8f727c3a8a 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
import { FaTrash } from 'react-icons/fa';
import { useClearQueue } from '../hooks/useClearQueue';
import QueueButton from './common/QueueButton';
-import { ChakraProps } from '@chakra-ui/react';
+import { ChakraProps, Text } from '@chakra-ui/react';
+import IAIAlertDialog from 'common/components/IAIAlertDialog';
type Props = {
asIconButton?: boolean;
@@ -15,17 +16,27 @@ const ClearQueueButton = ({ asIconButton, sx }: Props) => {
const { clearQueue, isLoading, queueStatus } = useClearQueue();
return (
- }
- onClick={clearQueue}
- colorScheme="error"
- sx={sx}
- />
+ }
+ colorScheme="error"
+ sx={sx}
+ />
+ }
+ >
+ {t('queue.clearQueueAlertDialog')}
+
+ {t('queue.clearQueueAlertDialog2')}
+
);
};
diff --git a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
index e165967936..29a94e9725 100644
--- a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
@@ -7,7 +7,7 @@ type Props = {
label: string;
tooltip: ReactNode;
icon: ReactElement;
- onClick: () => void;
+ onClick?: () => void;
isDisabled?: boolean;
colorScheme: ThemeTypings['colorSchemes'];
asIconButton?: boolean;
From bdfdf854fc2dcdd13130bdcbab5ac05331532415 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 20 Sep 2023 22:29:44 +1000
Subject: [PATCH 2/5] fix: canvas not working on queue
Add `batch_id` to outbound events. This necessitates adding it to both `InvocationContext` and `InvocationQueueItem`. This allows the canvas to receive images.
When the user enqueues a batch on the canvas, it is expected that all images from that batch are directed to the canvas.
The simplest, most flexible solution is to add the `batch_id` to the invocation context-y stuff. Then everything knows what batch it came from, and we can have the canvas pick up images associated with its list of canvas `batch_id`s.
---
invokeai/app/invocations/baseinvocation.py | 11 ++++++-
invokeai/app/services/events.py | 30 ++++++++++++++++--
invokeai/app/services/invocation_queue.py | 3 ++
invokeai/app/services/invoker.py | 12 +++++--
.../app/services/model_manager_service.py | 2 ++
invokeai/app/services/processor.py | 13 ++++++--
.../session_processor_default.py | 5 +--
.../session_queue/session_queue_sqlite.py | 3 ++
invokeai/app/util/step_callback.py | 1 +
.../addCommitStagingAreaImageListener.ts | 4 +--
.../socketio/socketInvocationComplete.ts | 4 +--
.../socketio/socketQueueItemStatusChanged.ts | 13 ++------
.../components/IAICanvasIntermediateImage.tsx | 4 +--
.../src/features/canvas/store/canvasSlice.ts | 10 ++----
.../src/features/canvas/store/canvasTypes.ts | 1 -
.../src/features/system/store/systemSlice.ts | 2 ++
.../web/src/features/system/store/types.ts | 1 +
.../frontend/web/src/services/events/types.ts | 31 ++++++++++++-------
tests/nodes/test_graph_execution_state.py | 8 ++++-
tests/nodes/test_invoker.py | 21 +++++++++++--
20 files changed, 129 insertions(+), 50 deletions(-)
diff --git a/invokeai/app/invocations/baseinvocation.py b/invokeai/app/invocations/baseinvocation.py
index 24bfa6aac5..97bd29ff17 100644
--- a/invokeai/app/invocations/baseinvocation.py
+++ b/invokeai/app/invocations/baseinvocation.py
@@ -425,12 +425,21 @@ class InvocationContext:
graph_execution_state_id: str
queue_id: str
queue_item_id: int
+ queue_batch_id: str
- def __init__(self, services: InvocationServices, queue_id: str, queue_item_id: int, graph_execution_state_id: str):
+ def __init__(
+ self,
+ services: InvocationServices,
+ queue_id: str,
+ queue_item_id: int,
+ queue_batch_id: str,
+ graph_execution_state_id: str,
+ ):
self.services = services
self.graph_execution_state_id = graph_execution_state_id
self.queue_id = queue_id
self.queue_item_id = queue_item_id
+ self.queue_batch_id = queue_batch_id
class BaseInvocationOutput(BaseModel):
diff --git a/invokeai/app/services/events.py b/invokeai/app/services/events.py
index 260ff4b173..3b36ffb917 100644
--- a/invokeai/app/services/events.py
+++ b/invokeai/app/services/events.py
@@ -30,6 +30,7 @@ class EventServiceBase:
self,
queue_id: str,
queue_item_id: int,
+ queue_batch_id: str,
graph_execution_state_id: str,
node: dict,
source_node_id: str,
@@ -44,6 +45,7 @@ class EventServiceBase:
payload=dict(
queue_id=queue_id,
queue_item_id=queue_item_id,
+ queue_batch_id=queue_batch_id,
graph_execution_state_id=graph_execution_state_id,
node_id=node.get("id"),
source_node_id=source_node_id,
@@ -58,6 +60,7 @@ class EventServiceBase:
self,
queue_id: str,
queue_item_id: int,
+ queue_batch_id: str,
graph_execution_state_id: str,
result: dict,
node: dict,
@@ -69,6 +72,7 @@ class EventServiceBase:
payload=dict(
queue_id=queue_id,
queue_item_id=queue_item_id,
+ queue_batch_id=queue_batch_id,
graph_execution_state_id=graph_execution_state_id,
node=node,
source_node_id=source_node_id,
@@ -80,6 +84,7 @@ class EventServiceBase:
self,
queue_id: str,
queue_item_id: int,
+ queue_batch_id: str,
graph_execution_state_id: str,
node: dict,
source_node_id: str,
@@ -92,6 +97,7 @@ class EventServiceBase:
payload=dict(
queue_id=queue_id,
queue_item_id=queue_item_id,
+ queue_batch_id=queue_batch_id,
graph_execution_state_id=graph_execution_state_id,
node=node,
source_node_id=source_node_id,
@@ -101,7 +107,13 @@ class EventServiceBase:
)
def emit_invocation_started(
- self, queue_id: str, queue_item_id: int, graph_execution_state_id: str, node: dict, source_node_id: str
+ self,
+ queue_id: str,
+ queue_item_id: int,
+ queue_batch_id: str,
+ graph_execution_state_id: str,
+ node: dict,
+ source_node_id: str,
) -> None:
"""Emitted when an invocation has started"""
self.__emit_queue_event(
@@ -109,19 +121,23 @@ class EventServiceBase:
payload=dict(
queue_id=queue_id,
queue_item_id=queue_item_id,
+ queue_batch_id=queue_batch_id,
graph_execution_state_id=graph_execution_state_id,
node=node,
source_node_id=source_node_id,
),
)
- def emit_graph_execution_complete(self, queue_id: str, queue_item_id: int, graph_execution_state_id: str) -> None:
+ def emit_graph_execution_complete(
+ self, queue_id: str, queue_item_id: int, queue_batch_id: str, graph_execution_state_id: str
+ ) -> None:
"""Emitted when a session has completed all invocations"""
self.__emit_queue_event(
event_name="graph_execution_state_complete",
payload=dict(
queue_id=queue_id,
queue_item_id=queue_item_id,
+ queue_batch_id=queue_batch_id,
graph_execution_state_id=graph_execution_state_id,
),
)
@@ -130,6 +146,7 @@ class EventServiceBase:
self,
queue_id: str,
queue_item_id: int,
+ queue_batch_id: str,
graph_execution_state_id: str,
model_name: str,
base_model: BaseModelType,
@@ -142,6 +159,7 @@ class EventServiceBase:
payload=dict(
queue_id=queue_id,
queue_item_id=queue_item_id,
+ queue_batch_id=queue_batch_id,
graph_execution_state_id=graph_execution_state_id,
model_name=model_name,
base_model=base_model,
@@ -154,6 +172,7 @@ class EventServiceBase:
self,
queue_id: str,
queue_item_id: int,
+ queue_batch_id: str,
graph_execution_state_id: str,
model_name: str,
base_model: BaseModelType,
@@ -167,6 +186,7 @@ class EventServiceBase:
payload=dict(
queue_id=queue_id,
queue_item_id=queue_item_id,
+ queue_batch_id=queue_batch_id,
graph_execution_state_id=graph_execution_state_id,
model_name=model_name,
base_model=base_model,
@@ -182,6 +202,7 @@ class EventServiceBase:
self,
queue_id: str,
queue_item_id: int,
+ queue_batch_id: str,
graph_execution_state_id: str,
error_type: str,
error: str,
@@ -192,6 +213,7 @@ class EventServiceBase:
payload=dict(
queue_id=queue_id,
queue_item_id=queue_item_id,
+ queue_batch_id=queue_batch_id,
graph_execution_state_id=graph_execution_state_id,
error_type=error_type,
error=error,
@@ -202,6 +224,7 @@ class EventServiceBase:
self,
queue_id: str,
queue_item_id: int,
+ queue_batch_id: str,
graph_execution_state_id: str,
node_id: str,
error_type: str,
@@ -213,6 +236,7 @@ class EventServiceBase:
payload=dict(
queue_id=queue_id,
queue_item_id=queue_item_id,
+ queue_batch_id=queue_batch_id,
graph_execution_state_id=graph_execution_state_id,
node_id=node_id,
error_type=error_type,
@@ -224,6 +248,7 @@ class EventServiceBase:
self,
queue_id: str,
queue_item_id: int,
+ queue_batch_id: str,
graph_execution_state_id: str,
) -> None:
"""Emitted when a session is canceled"""
@@ -232,6 +257,7 @@ class EventServiceBase:
payload=dict(
queue_id=queue_id,
queue_item_id=queue_item_id,
+ queue_batch_id=queue_batch_id,
graph_execution_state_id=graph_execution_state_id,
),
)
diff --git a/invokeai/app/services/invocation_queue.py b/invokeai/app/services/invocation_queue.py
index 0819d90748..378a9d12cf 100644
--- a/invokeai/app/services/invocation_queue.py
+++ b/invokeai/app/services/invocation_queue.py
@@ -15,6 +15,9 @@ class InvocationQueueItem(BaseModel):
session_queue_item_id: int = Field(
description="The ID of session queue item from which this invocation queue item came"
)
+ session_queue_batch_id: str = Field(
+ description="The ID of the session batch from which this invocation queue item came"
+ )
invoke_all: bool = Field(default=False)
timestamp: float = Field(default_factory=time.time)
diff --git a/invokeai/app/services/invoker.py b/invokeai/app/services/invoker.py
index 1466fd0142..0c98fc285c 100644
--- a/invokeai/app/services/invoker.py
+++ b/invokeai/app/services/invoker.py
@@ -18,7 +18,12 @@ class Invoker:
self._start()
def invoke(
- self, queue_id: str, queue_item_id: int, graph_execution_state: GraphExecutionState, invoke_all: bool = False
+ self,
+ session_queue_id: str,
+ session_queue_item_id: int,
+ session_queue_batch_id: str,
+ graph_execution_state: GraphExecutionState,
+ invoke_all: bool = False,
) -> Optional[str]:
"""Determines the next node to invoke and enqueues it, preparing if needed.
Returns the id of the queued node, or `None` if there are no nodes left to enqueue."""
@@ -34,8 +39,9 @@ class Invoker:
# Queue the invocation
self.services.queue.put(
InvocationQueueItem(
- session_queue_item_id=queue_item_id,
- session_queue_id=queue_id,
+ session_queue_id=session_queue_id,
+ session_queue_item_id=session_queue_item_id,
+ session_queue_batch_id=session_queue_batch_id,
graph_execution_state_id=graph_execution_state.id,
invocation_id=invocation.id,
invoke_all=invoke_all,
diff --git a/invokeai/app/services/model_manager_service.py b/invokeai/app/services/model_manager_service.py
index d7d274aec0..143fa8f357 100644
--- a/invokeai/app/services/model_manager_service.py
+++ b/invokeai/app/services/model_manager_service.py
@@ -539,6 +539,7 @@ class ModelManagerService(ModelManagerServiceBase):
context.services.events.emit_model_load_completed(
queue_id=context.queue_id,
queue_item_id=context.queue_item_id,
+ queue_batch_id=context.queue_batch_id,
graph_execution_state_id=context.graph_execution_state_id,
model_name=model_name,
base_model=base_model,
@@ -550,6 +551,7 @@ class ModelManagerService(ModelManagerServiceBase):
context.services.events.emit_model_load_started(
queue_id=context.queue_id,
queue_item_id=context.queue_item_id,
+ queue_batch_id=context.queue_batch_id,
graph_execution_state_id=context.graph_execution_state_id,
model_name=model_name,
base_model=base_model,
diff --git a/invokeai/app/services/processor.py b/invokeai/app/services/processor.py
index 54531be85c..b4c894c52d 100644
--- a/invokeai/app/services/processor.py
+++ b/invokeai/app/services/processor.py
@@ -57,6 +57,7 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
except Exception as e:
self.__invoker.services.logger.error("Exception while retrieving session:\n%s" % e)
self.__invoker.services.events.emit_session_retrieval_error(
+ queue_batch_id=queue_item.session_queue_batch_id,
queue_item_id=queue_item.session_queue_item_id,
queue_id=queue_item.session_queue_id,
graph_execution_state_id=queue_item.graph_execution_state_id,
@@ -70,6 +71,7 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
except Exception as e:
self.__invoker.services.logger.error("Exception while retrieving invocation:\n%s" % e)
self.__invoker.services.events.emit_invocation_retrieval_error(
+ queue_batch_id=queue_item.session_queue_batch_id,
queue_item_id=queue_item.session_queue_item_id,
queue_id=queue_item.session_queue_id,
graph_execution_state_id=queue_item.graph_execution_state_id,
@@ -84,6 +86,7 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
# Send starting event
self.__invoker.services.events.emit_invocation_started(
+ queue_batch_id=queue_item.session_queue_batch_id,
queue_item_id=queue_item.session_queue_item_id,
queue_id=queue_item.session_queue_id,
graph_execution_state_id=graph_execution_state.id,
@@ -106,6 +109,7 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
graph_execution_state_id=graph_execution_state.id,
queue_item_id=queue_item.session_queue_item_id,
queue_id=queue_item.session_queue_id,
+ queue_batch_id=queue_item.session_queue_batch_id,
)
)
@@ -121,6 +125,7 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
# Send complete event
self.__invoker.services.events.emit_invocation_complete(
+ queue_batch_id=queue_item.session_queue_batch_id,
queue_item_id=queue_item.session_queue_item_id,
queue_id=queue_item.session_queue_id,
graph_execution_state_id=graph_execution_state.id,
@@ -150,6 +155,7 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
self.__invoker.services.logger.error("Error while invoking:\n%s" % e)
# Send error event
self.__invoker.services.events.emit_invocation_error(
+ queue_batch_id=queue_item.session_queue_batch_id,
queue_item_id=queue_item.session_queue_item_id,
queue_id=queue_item.session_queue_id,
graph_execution_state_id=graph_execution_state.id,
@@ -170,14 +176,16 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
if queue_item.invoke_all and not is_complete:
try:
self.__invoker.invoke(
- queue_item_id=queue_item.session_queue_item_id,
- queue_id=queue_item.session_queue_id,
+ session_queue_batch_id=queue_item.session_queue_batch_id,
+ session_queue_item_id=queue_item.session_queue_item_id,
+ session_queue_id=queue_item.session_queue_id,
graph_execution_state=graph_execution_state,
invoke_all=True,
)
except Exception as e:
self.__invoker.services.logger.error("Error while invoking:\n%s" % e)
self.__invoker.services.events.emit_invocation_error(
+ queue_batch_id=queue_item.session_queue_batch_id,
queue_item_id=queue_item.session_queue_item_id,
queue_id=queue_item.session_queue_id,
graph_execution_state_id=graph_execution_state.id,
@@ -188,6 +196,7 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
)
elif is_complete:
self.__invoker.services.events.emit_graph_execution_complete(
+ queue_batch_id=queue_item.session_queue_batch_id,
queue_item_id=queue_item.session_queue_item_id,
queue_id=queue_item.session_queue_id,
graph_execution_state_id=graph_execution_state.id,
diff --git a/invokeai/app/services/session_processor/session_processor_default.py b/invokeai/app/services/session_processor/session_processor_default.py
index 92b68aeae7..b682c7e56c 100644
--- a/invokeai/app/services/session_processor/session_processor_default.py
+++ b/invokeai/app/services/session_processor/session_processor_default.py
@@ -102,8 +102,9 @@ class DefaultSessionProcessor(SessionProcessorBase):
self.__queue_item = queue_item
self.__invoker.services.graph_execution_manager.set(queue_item.session)
self.__invoker.invoke(
- queue_item_id=queue_item.item_id,
- queue_id=queue_item.queue_id,
+ session_queue_batch_id=queue_item.batch_id,
+ session_queue_id=queue_item.queue_id,
+ session_queue_item_id=queue_item.item_id,
graph_execution_state=queue_item.session,
invoke_all=True,
)
diff --git a/invokeai/app/services/session_queue/session_queue_sqlite.py b/invokeai/app/services/session_queue/session_queue_sqlite.py
index 4925170c48..e1701aa288 100644
--- a/invokeai/app/services/session_queue/session_queue_sqlite.py
+++ b/invokeai/app/services/session_queue/session_queue_sqlite.py
@@ -562,6 +562,7 @@ class SqliteSessionQueue(SessionQueueBase):
self.__invoker.services.events.emit_session_canceled(
queue_item_id=queue_item.item_id,
queue_id=queue_item.queue_id,
+ queue_batch_id=queue_item.batch_id,
graph_execution_state_id=queue_item.session_id,
)
self.__invoker.services.events.emit_queue_item_status_changed(queue_item)
@@ -604,6 +605,7 @@ class SqliteSessionQueue(SessionQueueBase):
self.__invoker.services.events.emit_session_canceled(
queue_item_id=current_queue_item.item_id,
queue_id=current_queue_item.queue_id,
+ queue_batch_id=current_queue_item.batch_id,
graph_execution_state_id=current_queue_item.session_id,
)
self.__invoker.services.events.emit_queue_item_status_changed(current_queue_item)
@@ -649,6 +651,7 @@ class SqliteSessionQueue(SessionQueueBase):
self.__invoker.services.events.emit_session_canceled(
queue_item_id=current_queue_item.item_id,
queue_id=current_queue_item.queue_id,
+ queue_batch_id=current_queue_item.batch_id,
graph_execution_state_id=current_queue_item.session_id,
)
self.__invoker.services.events.emit_queue_item_status_changed(current_queue_item)
diff --git a/invokeai/app/util/step_callback.py b/invokeai/app/util/step_callback.py
index 8edcc11f05..6d4a857491 100644
--- a/invokeai/app/util/step_callback.py
+++ b/invokeai/app/util/step_callback.py
@@ -112,6 +112,7 @@ def stable_diffusion_step_callback(
context.services.events.emit_generator_progress(
queue_id=context.queue_id,
queue_item_id=context.queue_item_id,
+ queue_batch_id=context.queue_batch_id,
graph_execution_state_id=context.graph_execution_state_id,
node=node,
source_node_id=source_node_id,
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts
index 4ee1bdb15a..d302d50255 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts
@@ -1,7 +1,7 @@
import { isAnyOf } from '@reduxjs/toolkit';
import { logger } from 'app/logging/logger';
import {
- canvasBatchesAndSessionsReset,
+ canvasBatchIdsReset,
commitStagingAreaImage,
discardStagedImages,
} from 'features/canvas/store/canvasSlice';
@@ -38,7 +38,7 @@ export const addCommitStagingAreaImageListener = () => {
})
);
}
- dispatch(canvasBatchesAndSessionsReset());
+ dispatch(canvasBatchIdsReset());
} catch {
log.error('Failed to cancel canvas batches');
dispatch(
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
index d326a122c9..e2c97100af 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
@@ -30,7 +30,7 @@ export const addInvocationCompleteEventListener = () => {
`Invocation complete (${action.payload.data.node.type})`
);
- const { result, node, graph_execution_state_id } = data;
+ const { result, node, queue_batch_id } = data;
// This complete event has an associated image output
if (isImageOutput(result) && !nodeDenylist.includes(node.type)) {
@@ -43,7 +43,7 @@ export const addInvocationCompleteEventListener = () => {
// Add canvas images to the staging area
if (
- canvas.sessionIds.includes(graph_execution_state_id) &&
+ canvas.batchIds.includes(queue_batch_id) &&
[CANVAS_OUTPUT].includes(data.source_node_id)
) {
dispatch(addImageToStagingArea(imageDTO));
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts
index a56fb4cc76..241e1da92c 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts
@@ -1,5 +1,4 @@
import { logger } from 'app/logging/logger';
-import { canvasSessionIdAdded } from 'features/canvas/store/canvasSlice';
import { queueApi, queueItemsAdapter } from 'services/api/endpoints/queue';
import {
appSocketQueueItemStatusChanged,
@@ -10,12 +9,11 @@ import { startAppListening } from '../..';
export const addSocketQueueItemStatusChangedEventListener = () => {
startAppListening({
actionCreator: socketQueueItemStatusChanged,
- effect: (action, { dispatch, getState }) => {
+ effect: (action, { dispatch }) => {
const log = logger('socketio');
const {
queue_item_id: item_id,
- batch_id,
- graph_execution_state_id,
+ queue_batch_id,
status,
} = action.payload.data;
log.debug(
@@ -36,11 +34,6 @@ export const addSocketQueueItemStatusChangedEventListener = () => {
})
);
- const state = getState();
- if (state.canvas.batchIds.includes(batch_id)) {
- dispatch(canvasSessionIdAdded(graph_execution_state_id));
- }
-
dispatch(
queueApi.util.invalidateTags([
'CurrentSessionQueueItem',
@@ -48,7 +41,7 @@ export const addSocketQueueItemStatusChangedEventListener = () => {
'SessionQueueStatus',
{ type: 'SessionQueueItem', id: item_id },
{ type: 'SessionQueueItemDTO', id: item_id },
- { type: 'BatchStatus', id: batch_id },
+ { type: 'BatchStatus', id: queue_batch_id },
])
);
},
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx
index 4a29e12859..0febf7fb21 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx
@@ -11,12 +11,12 @@ const selector = createSelector(
({ system, canvas }) => {
const { denoiseProgress } = system;
const { boundingBox } = canvas.layerState.stagingArea;
- const { sessionIds } = canvas;
+ const { batchIds } = canvas;
return {
boundingBox,
progressImage:
- denoiseProgress && sessionIds.includes(denoiseProgress.session_id)
+ denoiseProgress && batchIds.includes(denoiseProgress.batch_id)
? denoiseProgress.progress_image
: undefined,
};
diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
index 66b87a84e4..b726e757f6 100644
--- a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
@@ -85,7 +85,6 @@ export const initialCanvasState: CanvasState = {
stageDimensions: { width: 0, height: 0 },
stageScale: 1,
tool: 'brush',
- sessionIds: [],
batchIds: [],
};
@@ -302,11 +301,7 @@ export const canvasSlice = createSlice({
canvasBatchIdAdded: (state, action: PayloadAction) => {
state.batchIds.push(action.payload);
},
- canvasSessionIdAdded: (state, action: PayloadAction) => {
- state.sessionIds.push(action.payload);
- },
- canvasBatchesAndSessionsReset: (state) => {
- state.sessionIds = [];
+ canvasBatchIdsReset: (state) => {
state.batchIds = [];
},
stagingAreaInitialized: (
@@ -879,8 +874,7 @@ export const {
setShouldAntialias,
canvasResized,
canvasBatchIdAdded,
- canvasSessionIdAdded,
- canvasBatchesAndSessionsReset,
+ canvasBatchIdsReset,
} = canvasSlice.actions;
export default canvasSlice.reducer;
diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
index 233d38dc80..875157d36a 100644
--- a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
@@ -166,7 +166,6 @@ export interface CanvasState {
tool: CanvasTool;
generationMode?: GenerationMode;
batchIds: string[];
- sessionIds: string[];
}
export type GenerationMode = 'txt2img' | 'img2img' | 'inpaint' | 'outpaint';
diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts
index 78f1ce6e70..40e8c42145 100644
--- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts
+++ b/invokeai/frontend/web/src/features/system/store/systemSlice.ts
@@ -113,6 +113,7 @@ export const systemSlice = createSlice({
order,
progress_image,
graph_execution_state_id: session_id,
+ queue_batch_id: batch_id,
} = action.payload.data;
state.denoiseProgress = {
@@ -122,6 +123,7 @@ export const systemSlice = createSlice({
percentage: calculateStepPercentage(step, total_steps, order),
progress_image,
session_id,
+ batch_id,
};
state.status = 'PROCESSING';
diff --git a/invokeai/frontend/web/src/features/system/store/types.ts b/invokeai/frontend/web/src/features/system/store/types.ts
index 05b86f1e79..b81e292e36 100644
--- a/invokeai/frontend/web/src/features/system/store/types.ts
+++ b/invokeai/frontend/web/src/features/system/store/types.ts
@@ -12,6 +12,7 @@ export type SystemStatus =
export type DenoiseProgress = {
session_id: string;
+ batch_id: string;
progress_image: ProgressImage | null | undefined;
step: number;
total_steps: number;
diff --git a/invokeai/frontend/web/src/services/events/types.ts b/invokeai/frontend/web/src/services/events/types.ts
index 8087b88077..47a3d83eba 100644
--- a/invokeai/frontend/web/src/services/events/types.ts
+++ b/invokeai/frontend/web/src/services/events/types.ts
@@ -34,7 +34,8 @@ export type BaseNode = {
export type ModelLoadStartedEvent = {
queue_id: string;
- queue_item_id: string;
+ queue_item_id: number;
+ queue_batch_id: string;
graph_execution_state_id: string;
model_name: string;
base_model: BaseModelType;
@@ -44,7 +45,8 @@ export type ModelLoadStartedEvent = {
export type ModelLoadCompletedEvent = {
queue_id: string;
- queue_item_id: string;
+ queue_item_id: number;
+ queue_batch_id: string;
graph_execution_state_id: string;
model_name: string;
base_model: BaseModelType;
@@ -62,7 +64,8 @@ export type ModelLoadCompletedEvent = {
*/
export type GeneratorProgressEvent = {
queue_id: string;
- queue_item_id: string;
+ queue_item_id: number;
+ queue_batch_id: string;
graph_execution_state_id: string;
node_id: string;
source_node_id: string;
@@ -81,7 +84,8 @@ export type GeneratorProgressEvent = {
*/
export type InvocationCompleteEvent = {
queue_id: string;
- queue_item_id: string;
+ queue_item_id: number;
+ queue_batch_id: string;
graph_execution_state_id: string;
node: BaseNode;
source_node_id: string;
@@ -95,7 +99,8 @@ export type InvocationCompleteEvent = {
*/
export type InvocationErrorEvent = {
queue_id: string;
- queue_item_id: string;
+ queue_item_id: number;
+ queue_batch_id: string;
graph_execution_state_id: string;
node: BaseNode;
source_node_id: string;
@@ -110,7 +115,8 @@ export type InvocationErrorEvent = {
*/
export type InvocationStartedEvent = {
queue_id: string;
- queue_item_id: string;
+ queue_item_id: number;
+ queue_batch_id: string;
graph_execution_state_id: string;
node: BaseNode;
source_node_id: string;
@@ -123,7 +129,8 @@ export type InvocationStartedEvent = {
*/
export type GraphExecutionStateCompleteEvent = {
queue_id: string;
- queue_item_id: string;
+ queue_item_id: number;
+ queue_batch_id: string;
graph_execution_state_id: string;
};
@@ -134,7 +141,8 @@ export type GraphExecutionStateCompleteEvent = {
*/
export type SessionRetrievalErrorEvent = {
queue_id: string;
- queue_item_id: string;
+ queue_item_id: number;
+ queue_batch_id: string;
graph_execution_state_id: string;
error_type: string;
error: string;
@@ -147,7 +155,8 @@ export type SessionRetrievalErrorEvent = {
*/
export type InvocationRetrievalErrorEvent = {
queue_id: string;
- queue_item_id: string;
+ queue_item_id: number;
+ queue_batch_id: string;
graph_execution_state_id: string;
node_id: string;
error_type: string;
@@ -161,8 +170,8 @@ export type InvocationRetrievalErrorEvent = {
*/
export type QueueItemStatusChangedEvent = {
queue_id: string;
- queue_item_id: string;
- batch_id: string;
+ queue_item_id: number;
+ queue_batch_id: string;
session_id: string;
graph_execution_state_id: string;
status: components['schemas']['SessionQueueItemDTO']['status'];
diff --git a/tests/nodes/test_graph_execution_state.py b/tests/nodes/test_graph_execution_state.py
index 41ca93551a..9009140134 100644
--- a/tests/nodes/test_graph_execution_state.py
+++ b/tests/nodes/test_graph_execution_state.py
@@ -75,7 +75,13 @@ def invoke_next(g: GraphExecutionState, services: InvocationServices) -> tuple[B
print(f"invoking {n.id}: {type(n)}")
o = n.invoke(
- InvocationContext(queue_item_id="1", queue_id=DEFAULT_QUEUE_ID, services=services, graph_execution_state_id="1")
+ InvocationContext(
+ queue_batch_id="1",
+ queue_item_id=1,
+ queue_id=DEFAULT_QUEUE_ID,
+ services=services,
+ graph_execution_state_id="1",
+ )
)
g.complete(n.id, o)
diff --git a/tests/nodes/test_invoker.py b/tests/nodes/test_invoker.py
index 7dc5cf57b3..119ac70498 100644
--- a/tests/nodes/test_invoker.py
+++ b/tests/nodes/test_invoker.py
@@ -102,7 +102,12 @@ def test_can_create_graph_state_from_graph(mock_invoker: Invoker, simple_graph):
# @pytest.mark.xfail(reason = "Requires fixing following the model manager refactor")
def test_can_invoke(mock_invoker: Invoker, simple_graph):
g = mock_invoker.create_execution_state(graph=simple_graph)
- invocation_id = mock_invoker.invoke(queue_item_id="1", queue_id=DEFAULT_QUEUE_ID, graph_execution_state=g)
+ invocation_id = mock_invoker.invoke(
+ session_queue_batch_id="1",
+ session_queue_item_id=1,
+ session_queue_id=DEFAULT_QUEUE_ID,
+ graph_execution_state=g,
+ )
assert invocation_id is not None
def has_executed_any(g: GraphExecutionState):
@@ -120,7 +125,11 @@ def test_can_invoke(mock_invoker: Invoker, simple_graph):
def test_can_invoke_all(mock_invoker: Invoker, simple_graph):
g = mock_invoker.create_execution_state(graph=simple_graph)
invocation_id = mock_invoker.invoke(
- queue_item_id="1", queue_id=DEFAULT_QUEUE_ID, graph_execution_state=g, invoke_all=True
+ session_queue_batch_id="1",
+ session_queue_item_id=1,
+ session_queue_id=DEFAULT_QUEUE_ID,
+ graph_execution_state=g,
+ invoke_all=True,
)
assert invocation_id is not None
@@ -140,7 +149,13 @@ def test_handles_errors(mock_invoker: Invoker):
g = mock_invoker.create_execution_state()
g.graph.add_node(ErrorInvocation(id="1"))
- mock_invoker.invoke(queue_item_id="1", queue_id=DEFAULT_QUEUE_ID, graph_execution_state=g, invoke_all=True)
+ mock_invoker.invoke(
+ session_queue_batch_id="1",
+ session_queue_item_id=1,
+ session_queue_id=DEFAULT_QUEUE_ID,
+ graph_execution_state=g,
+ invoke_all=True,
+ )
def has_executed_all(g: GraphExecutionState):
g = mock_invoker.services.graph_execution_manager.get(g.id)
From b5266f89ad28138be8738d7d0020c27b7f0f8af8 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 21 Sep 2023 00:02:58 +1000
Subject: [PATCH 3/5] fix(ui): fallback to `null` for invalid metadata values
(#4575)
---
.../web/src/features/nodes/types/types.ts | 65 +++++++++++--------
1 file changed, 37 insertions(+), 28 deletions(-)
diff --git a/invokeai/frontend/web/src/features/nodes/types/types.ts b/invokeai/frontend/web/src/features/nodes/types/types.ts
index 7ca683e77d..361de26ea5 100644
--- a/invokeai/frontend/web/src/features/nodes/types/types.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/types.ts
@@ -1120,36 +1120,45 @@ export type LoRAMetadataItem = z.infer;
export const zCoreMetadata = z
.object({
- app_version: z.string().nullish(),
- generation_mode: z.string().nullish(),
- created_by: z.string().nullish(),
- positive_prompt: z.string().nullish(),
- negative_prompt: z.string().nullish(),
- width: z.number().int().nullish(),
- height: z.number().int().nullish(),
- seed: z.number().int().nullish(),
- rand_device: z.string().nullish(),
- cfg_scale: z.number().nullish(),
- steps: z.number().int().nullish(),
- scheduler: z.string().nullish(),
- clip_skip: z.number().int().nullish(),
+ app_version: z.string().nullish().catch(null),
+ generation_mode: z.string().nullish().catch(null),
+ created_by: z.string().nullish().catch(null),
+ positive_prompt: z.string().nullish().catch(null),
+ negative_prompt: z.string().nullish().catch(null),
+ width: z.number().int().nullish().catch(null),
+ height: z.number().int().nullish().catch(null),
+ seed: z.number().int().nullish().catch(null),
+ rand_device: z.string().nullish().catch(null),
+ cfg_scale: z.number().nullish().catch(null),
+ steps: z.number().int().nullish().catch(null),
+ scheduler: z.string().nullish().catch(null),
+ clip_skip: z.number().int().nullish().catch(null),
model: z
.union([zMainModel.deepPartial(), zOnnxModel.deepPartial()])
- .nullish(),
- controlnets: z.array(zControlField.deepPartial()).nullish(),
- loras: z.array(zLoRAMetadataItem).nullish(),
- vae: zVaeModelField.nullish(),
- strength: z.number().nullish(),
- init_image: z.string().nullish(),
- positive_style_prompt: z.string().nullish(),
- negative_style_prompt: z.string().nullish(),
- refiner_model: zSDXLRefinerModel.deepPartial().nullish(),
- refiner_cfg_scale: z.number().nullish(),
- refiner_steps: z.number().int().nullish(),
- refiner_scheduler: z.string().nullish(),
- refiner_positive_aesthetic_score: z.number().nullish(),
- refiner_negative_aesthetic_score: z.number().nullish(),
- refiner_start: z.number().nullish(),
+ .nullish()
+ .catch(null),
+ controlnets: z.array(zControlField.deepPartial()).nullish().catch(null),
+ loras: z
+ .array(
+ z.object({
+ lora: zLoRAModelField.deepPartial(),
+ weight: z.number(),
+ })
+ )
+ .nullish()
+ .catch(null),
+ vae: zVaeModelField.nullish().catch(null),
+ strength: z.number().nullish().catch(null),
+ init_image: z.string().nullish().catch(null),
+ positive_style_prompt: z.string().nullish().catch(null),
+ negative_style_prompt: z.string().nullish().catch(null),
+ refiner_model: zSDXLRefinerModel.deepPartial().nullish().catch(null),
+ refiner_cfg_scale: z.number().nullish().catch(null),
+ refiner_steps: z.number().int().nullish().catch(null),
+ refiner_scheduler: z.string().nullish().catch(null),
+ refiner_positive_aesthetic_score: z.number().nullish().catch(null),
+ refiner_negative_aesthetic_score: z.number().nullish().catch(null),
+ refiner_start: z.number().nullish().catch(null),
})
.passthrough();
From 32672cfeda4f47ae523042d2b79a790b8e54c254 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 21 Sep 2023 00:15:39 +1000
Subject: [PATCH 4/5] ui: misc small fixes (#4600)
* feat(ui): tweak queue UI components
* fix(ui): manually dispatch queue status query on queue item status change
RTK Query occasionally aborts the query that occurs when the tag is invalidated, especially if multples of them fire in rapid succession.
This resulted in the queue status and progress bar sometimes not reseting when the queue finishes its last item.
Manually dispatch the query now to get around this. Eventually should probably move this to a socket so we don't need to keep responding to socket with HTTP requests. Just send ti directly via socket
* chore(ui): remove errant console.logs
* fix(ui): do not accumulate node outputs in outputs area
* fix(ui): fix merge issue
---------
Co-authored-by: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
---
.../listeners/controlNetImageProcessed.ts | 1 -
.../socketio/socketInvocationComplete.ts | 1 -
.../socketio/socketQueueItemStatusChanged.ts | 14 +++++++++-----
.../web/src/features/nodes/store/nodesSlice.ts | 2 +-
.../components/QueueList/QueueItemComponent.tsx | 12 ++++++++----
.../components/QueueList/QueueItemDetail.tsx | 15 ++++++++++++---
.../components/QueueList/QueueListHeader.tsx | 8 ++++----
.../subpanels/AddModelsPanel/SimpleAddModels.tsx | 1 -
8 files changed, 34 insertions(+), 20 deletions(-)
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts
index 185ada39e8..814614da10 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts
@@ -65,7 +65,6 @@ export const addControlNetImageProcessedListener = () => {
);
const enqueueResult = await req.unwrap();
req.reset();
- console.log(enqueueResult.queue_item.session_id);
log.debug(
{ enqueueResult: parseify(enqueueResult) },
t('queue.graphQueued')
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
index e2c97100af..b6d8acc82e 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
@@ -76,7 +76,6 @@ export const addInvocationCompleteEventListener = () => {
categories: IMAGE_CATEGORIES,
},
(draft) => {
- console.log(draft);
imagesAdapter.addOne(draft, imageDTO);
}
)
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts
index 241e1da92c..b0377e950b 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts
@@ -9,7 +9,7 @@ import { startAppListening } from '../..';
export const addSocketQueueItemStatusChangedEventListener = () => {
startAppListening({
actionCreator: socketQueueItemStatusChanged,
- effect: (action, { dispatch }) => {
+ effect: async (action, { dispatch }) => {
const log = logger('socketio');
const {
queue_item_id: item_id,
@@ -24,9 +24,6 @@ export const addSocketQueueItemStatusChangedEventListener = () => {
dispatch(
queueApi.util.updateQueryData('listQueueItems', undefined, (draft) => {
- if (!draft) {
- console.log('no draft!');
- }
queueItemsAdapter.updateOne(draft, {
id: item_id,
changes: action.payload.data,
@@ -38,12 +35,19 @@ export const addSocketQueueItemStatusChangedEventListener = () => {
queueApi.util.invalidateTags([
'CurrentSessionQueueItem',
'NextSessionQueueItem',
- 'SessionQueueStatus',
{ type: 'SessionQueueItem', id: item_id },
{ type: 'SessionQueueItemDTO', id: item_id },
{ type: 'BatchStatus', id: queue_batch_id },
])
);
+
+ const req = dispatch(
+ queueApi.endpoints.getQueueStatus.initiate(undefined, {
+ forceRefetch: true,
+ })
+ );
+ await req.unwrap();
+ req.unsubscribe();
},
});
};
diff --git a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
index 07dd8ad4ec..325ab1ff16 100644
--- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
@@ -871,7 +871,7 @@ const nodesSlice = createSlice({
nes.error = null;
nes.progress = null;
nes.progressImage = null;
- // do not reset nes.outputs, this allows a user to inspect the output of a node across batches
+ nes.outputs = [];
});
}
});
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
index 637e6e20c2..7f4fd9bc9b 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
@@ -59,16 +59,22 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
return `${seconds}s`;
}, [item]);
+ const isCanceled = useMemo(
+ () => ['canceled', 'completed', 'failed'].includes(item.status),
+ [item.status]
+ );
+
return (
{
}
/>
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
index e0474a16de..7ce9733aae 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
@@ -31,7 +31,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
const statusAndTiming = useMemo(() => {
if (!queueItem) {
- return '';
+ return t('common.loading');
}
if (!queueItem.completed_at || !queueItem.started_at) {
return t(`queue.${queueItem.status}`);
@@ -62,6 +62,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
justifyContent="space-between"
alignItems="center"
borderRadius="base"
+ h={20}
>
@@ -136,9 +137,17 @@ type QueueItemDataProps = { label: string; data: ReactNode };
const QueueItemData = ({ label, data }: QueueItemDataProps) => {
return (
-
+
{
>
#
-
+
status
-
+
time
-
+
batch
-
+
batch field values
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
index a72e24f1b6..b2845f0e85 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
@@ -58,7 +58,6 @@ export default function SimpleAddModels() {
})
.catch((error) => {
if (error) {
- console.log(error);
dispatch(
addToast(
makeToast({
From 9faa53ceb1c5552df4a2bc7f688c0fae667befd6 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 21 Sep 2023 00:19:31 +1000
Subject: [PATCH 5/5] feat(ui): consolidate advanced params (#4599)
---
invokeai/frontend/web/public/locales/en.json | 6 ++
.../buildCanvasImageToImageGraph.ts | 6 +-
.../graphBuilders/buildCanvasInpaintGraph.ts | 5 +-
.../graphBuilders/buildCanvasOutpaintGraph.ts | 5 +-
.../buildCanvasSDXLImageToImageGraph.ts | 6 +-
.../buildCanvasSDXLInpaintGraph.ts | 5 +-
.../buildCanvasSDXLOutpaintGraph.ts | 5 +-
.../buildCanvasSDXLTextToImageGraph.ts | 6 +-
.../buildCanvasTextToImageGraph.ts | 6 +-
.../buildLinearImageToImageGraph.ts | 6 +-
.../buildLinearSDXLImageToImageGraph.ts | 6 +-
.../buildLinearSDXLTextToImageGraph.ts | 7 +-
.../buildLinearTextToImageGraph.ts | 6 +-
.../Advanced/ParamAdvancedCollapse.tsx | 53 +++++++++++----
.../Parameters/Noise/ParamCpuNoise.tsx | 30 +++------
.../Parameters/Noise/ParamNoiseCollapse.tsx | 55 ----------------
.../Parameters/Noise/ParamNoiseThreshold.tsx | 6 +-
.../Parameters/Noise/ParamNoiseToggle.tsx | 26 --------
.../Parameters/Noise/ParamPerlinNoise.tsx | 6 +-
.../Parameters/Seamless/ParamSeamless.tsx | 32 +++++++++
.../Seamless/ParamSeamlessCollapse.tsx | 65 -------------------
.../parameters/store/generationSlice.ts | 19 ------
.../SDXLImageToImageTabParameters.tsx | 6 +-
.../SDXLTextToImageTabParameters.tsx | 6 +-
.../SDXLUnifiedCanvasTabParameters.tsx | 6 +-
.../SettingsModal/SettingsModal.tsx | 20 +-----
.../ImageToImageTabParameters.tsx | 4 --
.../TextToImage/TextToImageTabParameters.tsx | 4 --
.../UnifiedCanvas/UnifiedCanvasParameters.tsx | 2 -
29 files changed, 113 insertions(+), 302 deletions(-)
delete mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx
delete mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseToggle.tsx
create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamless.tsx
delete mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index f979c91247..76f1ac0069 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -885,6 +885,7 @@
},
"cfgScale": "CFG Scale",
"clipSkip": "CLIP Skip",
+ "clipSkipWithLayerCount": "CLIP Skip {{layerCount}}",
"closeViewer": "Close Viewer",
"codeformerFidelity": "Fidelity",
"coherenceMode": "Mode",
@@ -958,6 +959,9 @@
"seamlessTiling": "Seamless Tiling",
"seamlessXAxis": "X Axis",
"seamlessYAxis": "Y Axis",
+ "seamlessX": "Seamless X",
+ "seamlessY": "Seamless Y",
+ "seamlessX&Y": "Seamless X & Y",
"seamLowThreshold": "Low",
"seed": "Seed",
"seedWeights": "Seed Weights",
@@ -979,6 +983,8 @@
"upscaling": "Upscaling",
"useAll": "Use All",
"useCpuNoise": "Use CPU Noise",
+ "cpuNoise": "CPU Noise",
+ "gpuNoise": "GPU Noise",
"useInitImg": "Use Initial Image",
"usePrompt": "Use Prompt",
"useSeed": "Use Seed",
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts
index e7707d6e8a..4dbbac9f96 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts
@@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
-import { initialGenerationState } from 'features/parameters/store/generationSlice';
import { ImageDTO, ImageToLatentsInvocation } from 'services/api/types';
import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
@@ -47,7 +46,6 @@ export const buildCanvasImageToImageGraph = (
vaePrecision,
clipSkip,
shouldUseCpuNoise,
- shouldUseNoiseSettings,
seamlessXAxis,
seamlessYAxis,
} = state.generation;
@@ -70,9 +68,7 @@ export const buildCanvasImageToImageGraph = (
let modelLoaderNodeId = MAIN_MODEL_LOADER;
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : initialGenerationState.shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
/**
* The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts
index 7117af5177..de7620bc7e 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts
@@ -61,7 +61,6 @@ export const buildCanvasInpaintGraph = (
img2imgStrength: strength,
seed,
vaePrecision,
- shouldUseNoiseSettings,
shouldUseCpuNoise,
maskBlur,
maskBlurMethod,
@@ -92,9 +91,7 @@ export const buildCanvasInpaintGraph = (
let modelLoaderNodeId = MAIN_MODEL_LOADER;
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
const graph: NonNullableGraph = {
id: CANVAS_INPAINT_GRAPH,
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts
index 2449d1ea4b..8205e477ec 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts
@@ -63,7 +63,6 @@ export const buildCanvasOutpaintGraph = (
img2imgStrength: strength,
seed,
vaePrecision,
- shouldUseNoiseSettings,
shouldUseCpuNoise,
maskBlur,
canvasCoherenceMode,
@@ -96,9 +95,7 @@ export const buildCanvasOutpaintGraph = (
let modelLoaderNodeId = MAIN_MODEL_LOADER;
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
const graph: NonNullableGraph = {
id: CANVAS_OUTPAINT_GRAPH,
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts
index 35ea37f294..36fc66e559 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts
@@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
-import { initialGenerationState } from 'features/parameters/store/generationSlice';
import { ImageDTO, ImageToLatentsInvocation } from 'services/api/types';
import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
@@ -48,7 +47,6 @@ export const buildCanvasSDXLImageToImageGraph = (
vaePrecision,
clipSkip,
shouldUseCpuNoise,
- shouldUseNoiseSettings,
seamlessXAxis,
seamlessYAxis,
} = state.generation;
@@ -78,9 +76,7 @@ export const buildCanvasSDXLImageToImageGraph = (
// Model Loader ID
let modelLoaderNodeId = SDXL_MODEL_LOADER;
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : initialGenerationState.shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
// Construct Style Prompt
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts
index 897c9093b5..389d510ac7 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts
@@ -62,7 +62,6 @@ export const buildCanvasSDXLInpaintGraph = (
steps,
seed,
vaePrecision,
- shouldUseNoiseSettings,
shouldUseCpuNoise,
maskBlur,
maskBlurMethod,
@@ -98,9 +97,7 @@ export const buildCanvasSDXLInpaintGraph = (
let modelLoaderNodeId = SDXL_MODEL_LOADER;
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
// Construct Style Prompt
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts
index 922e75fa0c..c913492335 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts
@@ -64,7 +64,6 @@ export const buildCanvasSDXLOutpaintGraph = (
steps,
seed,
vaePrecision,
- shouldUseNoiseSettings,
shouldUseCpuNoise,
maskBlur,
canvasCoherenceMode,
@@ -102,9 +101,7 @@ export const buildCanvasSDXLOutpaintGraph = (
let modelLoaderNodeId = SDXL_MODEL_LOADER;
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
// Construct Style Prompt
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts
index 8a292e9826..37245d7b6a 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts
@@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
-import { initialGenerationState } from 'features/parameters/store/generationSlice';
import {
DenoiseLatentsInvocation,
ONNXTextToLatentsInvocation,
@@ -49,7 +48,6 @@ export const buildCanvasSDXLTextToImageGraph = (
vaePrecision,
clipSkip,
shouldUseCpuNoise,
- shouldUseNoiseSettings,
seamlessXAxis,
seamlessYAxis,
} = state.generation;
@@ -72,9 +70,7 @@ export const buildCanvasSDXLTextToImageGraph = (
throw new Error('No model found in state');
}
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : initialGenerationState.shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
const isUsingOnnxModel = model.model_type === 'onnx';
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts
index a99b2c9ece..2aa0b2b47d 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts
@@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
-import { initialGenerationState } from 'features/parameters/store/generationSlice';
import {
DenoiseLatentsInvocation,
ONNXTextToLatentsInvocation,
@@ -47,7 +46,6 @@ export const buildCanvasTextToImageGraph = (
vaePrecision,
clipSkip,
shouldUseCpuNoise,
- shouldUseNoiseSettings,
seamlessXAxis,
seamlessYAxis,
} = state.generation;
@@ -68,9 +66,7 @@ export const buildCanvasTextToImageGraph = (
throw new Error('No model found in state');
}
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : initialGenerationState.shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
const isUsingOnnxModel = model.model_type === 'onnx';
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearImageToImageGraph.ts
index 719fb8ea78..bf8d9ea314 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearImageToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearImageToImageGraph.ts
@@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
-import { initialGenerationState } from 'features/parameters/store/generationSlice';
import {
ImageResizeInvocation,
ImageToLatentsInvocation,
@@ -51,7 +50,6 @@ export const buildLinearImageToImageGraph = (
height,
clipSkip,
shouldUseCpuNoise,
- shouldUseNoiseSettings,
vaePrecision,
seamlessXAxis,
seamlessYAxis,
@@ -81,9 +79,7 @@ export const buildLinearImageToImageGraph = (
let modelLoaderNodeId = MAIN_MODEL_LOADER;
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : initialGenerationState.shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
// copy-pasted graph from node editor, filled in with state values & friendly node ids
const graph: NonNullableGraph = {
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts
index 2a7ae4064f..b10f4c5542 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts
@@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
-import { initialGenerationState } from 'features/parameters/store/generationSlice';
import {
ImageResizeInvocation,
ImageToLatentsInvocation,
@@ -52,7 +51,6 @@ export const buildLinearSDXLImageToImageGraph = (
height,
clipSkip,
shouldUseCpuNoise,
- shouldUseNoiseSettings,
vaePrecision,
seamlessXAxis,
seamlessYAxis,
@@ -91,9 +89,7 @@ export const buildLinearSDXLImageToImageGraph = (
// Model Loader ID
let modelLoaderNodeId = SDXL_MODEL_LOADER;
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : initialGenerationState.shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
// Construct Style Prompt
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts
index ad65f649b7..73c831081d 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts
@@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
-import { initialGenerationState } from 'features/parameters/store/generationSlice';
import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
@@ -41,7 +40,6 @@ export const buildLinearSDXLTextToImageGraph = (
height,
clipSkip,
shouldUseCpuNoise,
- shouldUseNoiseSettings,
vaePrecision,
seamlessXAxis,
seamlessYAxis,
@@ -54,9 +52,8 @@ export const buildLinearSDXLTextToImageGraph = (
refinerStart,
} = state.sdxl;
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : initialGenerationState.shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
+
if (!model) {
log.error('No model found in state');
throw new Error('No model found in state');
diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearTextToImageGraph.ts
index b3b663d65d..d7af045803 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearTextToImageGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearTextToImageGraph.ts
@@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
-import { initialGenerationState } from 'features/parameters/store/generationSlice';
import {
DenoiseLatentsInvocation,
ONNXTextToLatentsInvocation,
@@ -43,16 +42,13 @@ export const buildLinearTextToImageGraph = (
height,
clipSkip,
shouldUseCpuNoise,
- shouldUseNoiseSettings,
vaePrecision,
seamlessXAxis,
seamlessYAxis,
seed,
} = state.generation;
- const use_cpu = shouldUseNoiseSettings
- ? shouldUseCpuNoise
- : initialGenerationState.shouldUseCpuNoise;
+ const use_cpu = shouldUseCpuNoise;
if (!model) {
log.error('No model found in state');
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx
index 2d461f7bb4..dea4bb7b3d 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx
@@ -1,37 +1,64 @@
-import { Flex } from '@chakra-ui/react';
+import { Divider, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { RootState, stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAICollapse from 'common/components/IAICollapse';
-import ParamClipSkip from './ParamClipSkip';
+import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
+import { ParamCpuNoiseToggle } from '../Noise/ParamCpuNoise';
+import ParamSeamless from '../Seamless/ParamSeamless';
+import ParamClipSkip from './ParamClipSkip';
const selector = createSelector(
stateSelector,
(state: RootState) => {
- const clipSkip = state.generation.clipSkip;
- return {
- activeLabel: clipSkip > 0 ? 'Clip Skip' : undefined,
- };
+ const { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
+ state.generation;
+
+ return { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise };
},
defaultSelectorOptions
);
export default function ParamAdvancedCollapse() {
- const { activeLabel } = useAppSelector(selector);
- const shouldShowAdvancedOptions = useAppSelector(
- (state: RootState) => state.generation.shouldShowAdvancedOptions
- );
+ const { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
+ useAppSelector(selector);
const { t } = useTranslation();
- if (!shouldShowAdvancedOptions) {
- return null;
- }
+ const activeLabel = useMemo(() => {
+ const activeLabel: string[] = [];
+
+ if (shouldUseCpuNoise) {
+ activeLabel.push(t('parameters.cpuNoise'));
+ } else {
+ activeLabel.push(t('parameters.gpuNoise'));
+ }
+
+ if (clipSkip > 0) {
+ activeLabel.push(
+ t('parameters.clipSkipWithLayerCount', { layerCount: clipSkip })
+ );
+ }
+
+ if (seamlessXAxis && seamlessYAxis) {
+ activeLabel.push(t('parameters.seamlessX&Y'));
+ } else if (seamlessXAxis) {
+ activeLabel.push(t('parameters.seamlessX'));
+ } else if (seamlessYAxis) {
+ activeLabel.push(t('parameters.seamlessY'));
+ }
+
+ return activeLabel.join(', ');
+ }, [clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise, t]);
return (
+
+
+
+
);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx
index f10c3dd1a5..23f8f23fb6 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx
@@ -1,35 +1,25 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISwitch from 'common/components/IAISwitch';
import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
-const selector = createSelector(
- stateSelector,
- (state) => {
- const { shouldUseNoiseSettings, shouldUseCpuNoise } = state.generation;
- return {
- isDisabled: !shouldUseNoiseSettings,
- shouldUseCpuNoise,
- };
- },
- defaultSelectorOptions
-);
-
export const ParamCpuNoiseToggle = () => {
const dispatch = useAppDispatch();
- const { isDisabled, shouldUseCpuNoise } = useAppSelector(selector);
+ const shouldUseCpuNoise = useAppSelector(
+ (state) => state.generation.shouldUseCpuNoise
+ );
const { t } = useTranslation();
- const handleChange = (e: ChangeEvent) =>
- dispatch(shouldUseCpuNoiseChanged(e.target.checked));
+ const handleChange = useCallback(
+ (e: ChangeEvent) => {
+ dispatch(shouldUseCpuNoiseChanged(e.target.checked));
+ },
+ [dispatch]
+ );
return (
{
- const { shouldUseNoiseSettings } = state.generation;
- return {
- activeLabel: shouldUseNoiseSettings ? 'Enabled' : undefined,
- };
- },
- defaultSelectorOptions
-);
-
-const ParamNoiseCollapse = () => {
- const { t } = useTranslation();
-
- const isNoiseEnabled = useFeatureStatus('noise').isFeatureEnabled;
- const isPerlinNoiseEnabled = useFeatureStatus('perlinNoise').isFeatureEnabled;
- const isNoiseThresholdEnabled =
- useFeatureStatus('noiseThreshold').isFeatureEnabled;
-
- const { activeLabel } = useAppSelector(selector);
-
- if (!isNoiseEnabled) {
- return null;
- }
-
- return (
-
-
-
-
- {isPerlinNoiseEnabled && }
- {isNoiseThresholdEnabled && }
-
-
- );
-};
-
-export default memo(ParamNoiseCollapse);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseThreshold.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseThreshold.tsx
index 3abb7532b4..7244800c41 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseThreshold.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseThreshold.tsx
@@ -9,9 +9,8 @@ import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
(state) => {
- const { shouldUseNoiseSettings, threshold } = state.generation;
+ const { threshold } = state.generation;
return {
- isDisabled: !shouldUseNoiseSettings,
threshold,
};
},
@@ -20,12 +19,11 @@ const selector = createSelector(
export default function ParamNoiseThreshold() {
const dispatch = useAppDispatch();
- const { threshold, isDisabled } = useAppSelector(selector);
+ const { threshold } = useAppSelector(selector);
const { t } = useTranslation();
return (
{
- const dispatch = useAppDispatch();
- const { t } = useTranslation();
-
- const shouldUseNoiseSettings = useAppSelector(
- (state: RootState) => state.generation.shouldUseNoiseSettings
- );
-
- const handleChange = (e: ChangeEvent) =>
- dispatch(setShouldUseNoiseSettings(e.target.checked));
-
- return (
-
- );
-};
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamPerlinNoise.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamPerlinNoise.tsx
index afd676223c..b5429dc292 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamPerlinNoise.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamPerlinNoise.tsx
@@ -9,9 +9,8 @@ import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
(state) => {
- const { shouldUseNoiseSettings, perlin } = state.generation;
+ const { perlin } = state.generation;
return {
- isDisabled: !shouldUseNoiseSettings,
perlin,
};
},
@@ -20,12 +19,11 @@ const selector = createSelector(
export default function ParamPerlinNoise() {
const dispatch = useAppDispatch();
- const { perlin, isDisabled } = useAppSelector(selector);
+ const { perlin } = useAppSelector(selector);
const { t } = useTranslation();
return (
{
+ const { t } = useTranslation();
+
+ const isSeamlessEnabled = useFeatureStatus('seamless').isFeatureEnabled;
+
+ if (!isSeamlessEnabled) {
+ return null;
+ }
+
+ return (
+
+ {t('parameters.seamlessTiling')}{' '}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default memo(ParamSeamless);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx
deleted file mode 100644
index 099090fe3f..0000000000
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Box, Flex } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAICollapse from 'common/components/IAICollapse';
-import { generationSelector } from 'features/parameters/store/generationSelectors';
-import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import ParamSeamlessXAxis from './ParamSeamlessXAxis';
-import ParamSeamlessYAxis from './ParamSeamlessYAxis';
-
-const getActiveLabel = (seamlessXAxis: boolean, seamlessYAxis: boolean) => {
- if (seamlessXAxis && seamlessYAxis) {
- return 'X & Y';
- }
-
- if (seamlessXAxis) {
- return 'X';
- }
-
- if (seamlessYAxis) {
- return 'Y';
- }
-};
-
-const selector = createSelector(
- generationSelector,
- (generation) => {
- const { seamlessXAxis, seamlessYAxis } = generation;
-
- const activeLabel = getActiveLabel(seamlessXAxis, seamlessYAxis);
- return { activeLabel };
- },
- defaultSelectorOptions
-);
-
-const ParamSeamlessCollapse = () => {
- const { t } = useTranslation();
- const { activeLabel } = useAppSelector(selector);
-
- const isSeamlessEnabled = useFeatureStatus('seamless').isFeatureEnabled;
-
- if (!isSeamlessEnabled) {
- return null;
- }
-
- return (
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default memo(ParamSeamlessCollapse);
diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
index dc79281a06..ea6aaf28ca 100644
--- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
+++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
@@ -46,7 +46,6 @@ export interface GenerationState {
shouldFitToWidthHeight: boolean;
shouldGenerateVariations: boolean;
shouldRandomizeSeed: boolean;
- shouldUseNoiseSettings: boolean;
steps: StepsParam;
threshold: number;
infillTileSize: number;
@@ -88,7 +87,6 @@ export const initialGenerationState: GenerationState = {
shouldFitToWidthHeight: true,
shouldGenerateVariations: false,
shouldRandomizeSeed: true,
- shouldUseNoiseSettings: false,
steps: 50,
threshold: 0,
infillTileSize: 32,
@@ -244,9 +242,6 @@ export const generationSlice = createSlice({
setVerticalSymmetrySteps: (state, action: PayloadAction) => {
state.verticalSymmetrySteps = action.payload;
},
- setShouldUseNoiseSettings: (state, action: PayloadAction) => {
- state.shouldUseNoiseSettings = action.payload;
- },
initialImageChanged: (state, action: PayloadAction) => {
const { image_name, width, height } = action.payload;
state.initialImage = { imageName: image_name, width, height };
@@ -278,12 +273,6 @@ export const generationSlice = createSlice({
shouldUseCpuNoiseChanged: (state, action: PayloadAction) => {
state.shouldUseCpuNoise = action.payload;
},
- setShouldShowAdvancedOptions: (state, action: PayloadAction) => {
- state.shouldShowAdvancedOptions = action.payload;
- if (!action.payload) {
- state.clipSkip = 0;
- }
- },
setAspectRatio: (state, action: PayloadAction) => {
const newAspectRatio = action.payload;
state.aspectRatio = newAspectRatio;
@@ -313,12 +302,6 @@ export const generationSlice = createSlice({
}
}
});
- builder.addCase(setShouldShowAdvancedOptions, (state, action) => {
- const advancedOptionsStatus = action.payload;
- if (!advancedOptionsStatus) {
- state.clipSkip = 0;
- }
- });
},
});
@@ -359,12 +342,10 @@ export const {
initialImageChanged,
modelChanged,
vaeSelected,
- setShouldUseNoiseSettings,
setSeamlessXAxis,
setSeamlessYAxis,
setClipSkip,
shouldUseCpuNoiseChanged,
- setShouldShowAdvancedOptions,
setAspectRatio,
setShouldLockAspectRatio,
vaePrecisionChanged,
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx
index 2b40eca382..5a0d7daf4e 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx
@@ -1,8 +1,7 @@
import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
+import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
-import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import { memo } from 'react';
import ParamSDXLPromptArea from './ParamSDXLPromptArea';
import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
@@ -17,8 +16,7 @@ const SDXLImageToImageTabParameters = () => {
-
-
+
>
);
};
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx
index ff47a42207..ab7e8c8a74 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx
@@ -1,8 +1,7 @@
import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
+import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
-import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import TextToImageTabCoreParameters from 'features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters';
import { memo } from 'react';
import ParamSDXLPromptArea from './ParamSDXLPromptArea';
@@ -17,8 +16,7 @@ const SDXLTextToImageTabParameters = () => {
-
-
+
>
);
};
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
index 01236d8ec3..a9e94a9df0 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
@@ -1,10 +1,9 @@
import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
+import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
import ParamCompositingSettingsCollapse from 'features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse';
import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
-import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import ParamSDXLPromptArea from './ParamSDXLPromptArea';
import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
import SDXLUnifiedCanvasTabCoreParameters from './SDXLUnifiedCanvasTabCoreParameters';
@@ -18,10 +17,9 @@ export default function SDXLUnifiedCanvasTabParameters() {
-
-
+
>
);
}
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
index 858ff26f98..f1bc3f0a40 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
@@ -19,7 +19,6 @@ import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { setShouldShowAdvancedOptions } from 'features/parameters/store/generationSlice';
import {
consoleLogLevelChanged,
setEnableImageDebugging,
@@ -29,6 +28,7 @@ import {
shouldUseNSFWCheckerChanged,
shouldUseWatermarkerChanged,
} from 'features/system/store/systemSlice';
+import { LANGUAGES } from 'features/system/store/types';
import {
setShouldAutoChangeDimensions,
setShouldShowProgressInViewer,
@@ -54,11 +54,10 @@ import SettingSwitch from './SettingSwitch';
import SettingsClearIntermediates from './SettingsClearIntermediates';
import SettingsSchedulers from './SettingsSchedulers';
import StyledFlex from './StyledFlex';
-import { LANGUAGES } from 'features/system/store/types';
const selector = createSelector(
[stateSelector],
- ({ system, ui, generation }) => {
+ ({ system, ui }) => {
const {
shouldConfirmOnDelete,
enableImageDebugging,
@@ -75,8 +74,6 @@ const selector = createSelector(
shouldAutoChangeDimensions,
} = ui;
- const { shouldShowAdvancedOptions } = generation;
-
return {
shouldConfirmOnDelete,
enableImageDebugging,
@@ -85,7 +82,6 @@ const selector = createSelector(
consoleLogLevel,
shouldLogToConsole,
shouldAntialiasProgressImage,
- shouldShowAdvancedOptions,
shouldUseNSFWChecker,
shouldUseWatermarker,
shouldAutoChangeDimensions,
@@ -118,8 +114,6 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
const shouldShowDeveloperSettings =
config?.shouldShowDeveloperSettings ?? true;
const shouldShowResetWebUiText = config?.shouldShowResetWebUiText ?? true;
- const shouldShowAdvancedOptionsSettings =
- config?.shouldShowAdvancedOptionsSettings ?? true;
const shouldShowClearIntermediates =
config?.shouldShowClearIntermediates ?? true;
const shouldShowLocalizationToggle =
@@ -161,7 +155,6 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
consoleLogLevel,
shouldLogToConsole,
shouldAntialiasProgressImage,
- shouldShowAdvancedOptions,
shouldUseNSFWChecker,
shouldUseWatermarker,
shouldAutoChangeDimensions,
@@ -242,15 +235,6 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
dispatch(setShouldConfirmOnDelete(e.target.checked))
}
/>
- {shouldShowAdvancedOptionsSettings && (
- ) =>
- dispatch(setShouldShowAdvancedOptions(e.target.checked))
- }
- />
- )}
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
index 47b509eb36..6015b776f4 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
@@ -2,9 +2,7 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
-import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
import { memo } from 'react';
import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
@@ -17,9 +15,7 @@ const ImageToImageTabParameters = () => {
-
-
>
);
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
index 559ef0849a..14f1aac778 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
@@ -2,8 +2,6 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
-import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
import { memo } from 'react';
import ParamPromptArea from '../../../../parameters/components/Parameters/Prompt/ParamPromptArea';
@@ -17,9 +15,7 @@ const TextToImageTabParameters = () => {
-
-
>
);
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
index 1ee748ccce..a91ce1564b 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
@@ -5,7 +5,6 @@ import ParamCompositingSettingsCollapse from 'features/parameters/components/Par
import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
-import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
import { memo } from 'react';
import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
@@ -21,7 +20,6 @@ const UnifiedCanvasParameters = () => {
-
>
);