display credit column in queue list if shouldShowCredits is true

Author: Mary Hipp

invokeai/app/services/session_queue/session_queue_common.py

@@ -257,6 +257,7 @@ class SessionQueueItemWithoutGraph(BaseModel):
     api_output_fields: Optional[list[FieldIdentifier]] = Field(
         default=None, description="The nodes that were used as output from the API"
     )
+    credits: Optional[int] = Field(default=None, description="The total credits used for this queue item")
 
     @classmethod
     def queue_item_dto_from_dict(cls, queue_item_dict: dict) -> "SessionQueueItemDTO":

invokeai/frontend/web/public/locales/en.json

@@ -268,6 +268,7 @@
         "status": "Status",
         "total": "Total",
         "time": "Time",
+        "credits": "Credits",
         "pending": "Pending",
         "in_progress": "In Progress",
         "completed": "Completed",

invokeai/frontend/web/src/app/types/invokeai.ts

@@ -84,6 +84,7 @@ export type AppConfig = {
   metadataFetchDebounce?: number;
   workflowFetchDebounce?: number;
   isLocal?: boolean;
+  shouldShowCredits: boolean;
   sd: {
     defaultModel?: string;
     disabledControlNetModels: string[];

invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx

@@ -7,10 +7,12 @@ import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
 import { useRetryQueueItem } from 'features/queue/hooks/useRetryQueueItem';
 import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { selectShouldShowCredits } from 'features/system/store/configSlice';
 import type { MouseEvent } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold, PiXBold } from 'react-icons/pi';
+import { useSelector } from 'react-redux';
 import type { SessionQueueItemDTO } from 'services/api/types';
 
 import { COLUMN_WIDTHS } from './constants';
@@ -62,6 +64,8 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
     return `${seconds}s`;
   }, [item]);
 
+  const shouldShowCredits = useSelector(selectShouldShowCredits);
+
   const isCanceled = useMemo(() => ['canceled', 'completed', 'failed'].includes(item.status), [item.status]);
   const isFailed = useMemo(() => ['canceled', 'failed'].includes(item.status), [item.status]);
   const isValidationRun = useMemo(() => item.is_api_validation_run === true, [item.is_api_validation_run]);
@@ -98,6 +102,11 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
         <Flex w={COLUMN_WIDTHS.time} alignItems="center" flexShrink={0}>
           {executionTime || '-'}
         </Flex>
+        {shouldShowCredits && (
+          <Flex w={COLUMN_WIDTHS.credits} alignItems="center" flexShrink={0}>
+            {item.credits || '-'}
+          </Flex>
+        )}
         <Flex w={COLUMN_WIDTHS.batchId} flexShrink={0}>
           <Text overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" alignItems="center">
             {item.batch_id}

invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx

@@ -1,10 +1,14 @@
 import { Flex, Text } from '@invoke-ai/ui-library';
+import { selectShouldShowCredits } from 'features/system/store/configSlice';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
 import { COLUMN_WIDTHS } from './constants';
+
 const QueueListHeader = () => {
   const { t } = useTranslation();
+  const shouldShowCredits = useSelector(selectShouldShowCredits);
   return (
     <Flex
       alignItems="center"
@@ -31,6 +35,11 @@ const QueueListHeader = () => {
       <Flex ps={0.5} w={COLUMN_WIDTHS.time} alignItems="center">
         <Text variant="subtext">{t('queue.time')}</Text>
       </Flex>
+      {shouldShowCredits && (
+        <Flex ps={0.5} w={COLUMN_WIDTHS.credits} alignItems="center">
+          <Text variant="subtext">{t('queue.credits')}</Text>
+        </Flex>
+      )}
       <Flex ps={0.5} w={COLUMN_WIDTHS.batchId} alignItems="center">
         <Text variant="subtext">{t('queue.batch')}</Text>
       </Flex>

invokeai/frontend/web/src/features/queue/components/QueueList/constants.ts

@@ -3,6 +3,7 @@ export const COLUMN_WIDTHS = {
   statusBadge: '5.7rem',
   statusDot: 2,
   time: '4rem',
+  credits: '4rem',
   origin: '5rem',
   destination: '6rem',
   batchId: '5rem',

invokeai/frontend/web/src/features/system/store/configSlice.ts

@@ -22,6 +22,7 @@ const initialConfigState: AppConfig = {
   allowPrivateStylePresets: false,
   allowClientSideUpload: false,
   allowPublishWorkflows: false,
+  shouldShowCredits: false,
   disabledTabs: [],
   disabledFeatures: ['lightbox', 'faceRestore', 'batches'],
   disabledSDFeatures: ['variation', 'symmetry', 'hires', 'perlinNoise', 'noiseThreshold'],
@@ -223,3 +224,4 @@ export const selectIsModelsTabDisabled = createConfigSelector((config) => config
 export const selectIsClientSideUploadEnabled = createConfigSelector((config) => config.allowClientSideUpload);
 export const selectAllowPublishWorkflows = createConfigSelector((config) => config.allowPublishWorkflows);
 export const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLocal);
+export const selectShouldShowCredits = createConfigSelector((config) => config.shouldShowCredits);