fix(ui): use pluralization for invoke button tooltip

invoke-ai · May 12, 2024 · 4ea8416 · 4ea8416
1 parent 8dd0bfb
commit 4ea8416
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
@@ -261,7 +261,6 @@
  "queue": "Queue",
  "queueFront": "Add to Front of Queue",
  "queueBack": "Add to Queue",
- "queueCountPrediction": "{{promptsCount}} prompts \u00d7 {{iterations}} iterations -> {{count}} generations",
  "queueEmpty": "Queue Empty",
  "enqueueing": "Queueing Batch",
  "resume": "Resume",
@@ -314,7 +313,13 @@
  "batchFailedToQueue": "Failed to Queue Batch",
  "graphQueued": "Graph queued",
  "graphFailedToQueue": "Failed to queue graph",
- "openQueue": "Open Queue"
+ "openQueue": "Open Queue",
+ "prompts_one": "Prompt",
+ "prompts_other": "Prompts",
+ "iterations_one": "Iteration",
+ "iterations_other": "Iterations",
+ "generations_one": "Generation",
+ "generations_other": "Generations"
  },
  "invocationCache": {
  "invocationCache": "Invocation Cache",
@@ -958,8 +963,6 @@
  "positivePromptPlaceholder": "Positive Prompt",
  "globalPositivePromptPlaceholder": "Global Positive Prompt",
  "iterations": "Iterations",
- "iterationsWithCount_one": "{{count}} Iteration",
- "iterationsWithCount_other": "{{count}} Iterations",
  "scale": "Scale",
  "scaleBeforeProcessing": "Scale Before Processing",
  "scaledHeight": "Scaled H",

diff --git a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
@@ -35,12 +35,19 @@ const TooltipContent = memo(({ prepend = false }: Props) => {
  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) {
@@ -61,13 +68,7 @@ const TooltipContent = 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" />