Merge branch 'main' into psyche/fix/ui/depth-anything-select

invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterModelCombobox.tsx

@@ -42,6 +42,7 @@ export const ControlAdapterModelCombobox = memo(({ modelKey, onChange: onChangeM
     selectedModel,
     getIsDisabled,
     isLoading,
+    groupByType: true,
   });
 
   return (

invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx

@@ -16,25 +16,26 @@ export const InvokeQueueBackButton = memo(() => {
   return (
     <Flex pos="relative" flexGrow={1} minW="240px">
       <QueueIterationsNumberInput />
-      <Button
-        onClick={queueBack}
-        isLoading={isLoading || isLoadingDynamicPrompts}
-        loadingText={invoke}
-        isDisabled={isDisabled}
-        rightIcon={<RiSparkling2Fill />}
-        tooltip={<QueueButtonTooltip />}
-        variant="solid"
-        zIndex={1}
-        colorScheme="invokeYellow"
-        size="lg"
-        w="calc(100% - 60px)"
-        flexShrink={0}
-        justifyContent="space-between"
-        spinnerPlacement="end"
-      >
-        <span>{invoke}</span>
-        <Spacer />
-      </Button>
+      <QueueButtonTooltip>
+        <Button
+          onClick={queueBack}
+          isLoading={isLoading || isLoadingDynamicPrompts}
+          loadingText={invoke}
+          isDisabled={isDisabled}
+          rightIcon={<RiSparkling2Fill />}
+          variant="solid"
+          zIndex={1}
+          colorScheme="invokeYellow"
+          size="lg"
+          w="calc(100% - 60px)"
+          flexShrink={0}
+          justifyContent="space-between"
+          spinnerPlacement="end"
+        >
+          <span>{invoke}</span>
+          <Spacer />
+        </Button>
+      </QueueButtonTooltip>
     </Flex>
   );
 });

invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx

@@ -1,10 +1,11 @@
-import { Divider, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
+import { Divider, Flex, ListItem, Text, Tooltip, UnorderedList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
 import { selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
 import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
+import type { PropsWithChildren } from 'react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useEnqueueBatchMutation } from 'services/api/endpoints/queue';
@@ -21,17 +22,32 @@ type Props = {
   prepend?: boolean;
 };
 
-export const QueueButtonTooltip = memo(({ prepend = false }: Props) => {
+export const QueueButtonTooltip = (props: PropsWithChildren<Props>) => {
+  return (
+    <Tooltip label={<TooltipContent prepend={props.prepend} />} maxW={512}>
+      {props.children}
+    </Tooltip>
+  );
+};
+
+const TooltipContent = memo(({ prepend = false }: Props) => {
   const { t } = useTranslation();
   const { isReady, reasons } = useIsReadyToEnqueue();
   const isLoadingDynamicPrompts = useAppSelector((s) => s.dynamicPrompts.isLoading);
   const promptsCount = useAppSelector(selectPromptsCount);
-  const iterations = useAppSelector((s) => s.generation.iterations);
+  const iterationsCount = useAppSelector((s) => s.generation.iterations);
   const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
   const autoAddBoardName = useBoardName(autoAddBoardId);
   const [_, { isLoading }] = useEnqueueBatchMutation({
     fixedCacheKey: 'enqueueBatch',
   });
+  const queueCountPredictionLabel = useMemo(() => {
+    const generationCount = Math.min(promptsCount * iterationsCount, 10000);
+    const prompts = t('queue.prompts', { count: promptsCount });
+    const iterations = t('queue.iterations', { count: iterationsCount });
+    const generations = t('queue.generations', { count: generationCount });
+    return `${promptsCount} ${prompts} \u00d7 ${iterationsCount} ${iterations} -> ${generationCount} ${generations}`.toLowerCase();
+  }, [iterationsCount, promptsCount, t]);
 
   const label = useMemo(() => {
     if (isLoading) {
@@ -52,20 +68,21 @@ export const QueueButtonTooltip = memo(({ prepend = false }: Props) => {
   return (
     <Flex flexDir="column" gap={1}>
       <Text fontWeight="semibold">{label}</Text>
-      <Text>
-        {t('queue.queueCountPrediction', {
-          promptsCount,
-          iterations,
-          count: Math.min(promptsCount * iterations, 10000),
-        })}
-      </Text>
+      <Text>{queueCountPredictionLabel}</Text>
       {reasons.length > 0 && (
         <>
           <Divider opacity={0.2} borderColor="base.900" />
           <UnorderedList>
             {reasons.map((reason, i) => (
-              <ListItem key={`${reason}.${i}`}>
-                <Text>{reason}</Text>
+              <ListItem key={`${reason.content}.${i}`}>
+                <span>
+                  {reason.prefix && (
+                    <Text as="span" fontWeight="semibold">
+                      {reason.prefix}:{' '}
+                    </Text>
+                  )}
+                  <Text as="span">{reason.content}</Text>
+                </span>
               </ListItem>
             ))}
           </UnorderedList>
@@ -82,4 +99,4 @@ export const QueueButtonTooltip = memo(({ prepend = false }: Props) => {
   );
 });
 
-QueueButtonTooltip.displayName = 'QueueButtonTooltip';
+TooltipContent.displayName = 'QueueButtonTooltipContent';

invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx

@@ -10,15 +10,16 @@ const QueueFrontButton = () => {
   const { t } = useTranslation();
   const { queueFront, isLoading, isDisabled } = useQueueFront();
   return (
-    <IconButton
-      aria-label={t('queue.queueFront')}
-      isDisabled={isDisabled}
-      isLoading={isLoading}
-      onClick={queueFront}
-      tooltip={<QueueButtonTooltip prepend />}
-      icon={<AiFillThunderbolt />}
-      size="lg"
-    />
+    <QueueButtonTooltip prepend>
+      <IconButton
+        aria-label={t('queue.queueFront')}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        onClick={queueFront}
+        icon={<AiFillThunderbolt />}
+        size="lg"
+      />
+    </QueueButtonTooltip>
   );
 };
 

invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx

@@ -63,16 +63,17 @@ const FloatingSidePanelButtons = (props: Props) => {
             sx={floatingButtonStyles}
             icon={<PiSlidersHorizontalBold size="16px" />}
           />
-          <IconButton
-            aria-label={t('queue.queueBack')}
-            onClick={queueBack}
-            isLoading={isLoading}
-            isDisabled={isDisabled}
-            icon={queueButtonIcon}
-            colorScheme="invokeYellow"
-            tooltip={<QueueButtonTooltip />}
-            sx={floatingButtonStyles}
-          />
+          <QueueButtonTooltip>
+            <IconButton
+              aria-label={t('queue.queueBack')}
+              onClick={queueBack}
+              isLoading={isLoading}
+              isDisabled={isDisabled}
+              icon={queueButtonIcon}
+              colorScheme="invokeYellow"
+              sx={floatingButtonStyles}
+            />
+          </QueueButtonTooltip>
           <CancelCurrentQueueItemIconButton sx={floatingButtonStyles} />
         </ButtonGroup>
         <ClearAllQueueIconButton sx={floatingButtonStyles} onOpen={disclosure.onOpen} />