feat(ui): add button to clear model cache

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

@@ -0,0 +1,39 @@
+import { Button } from '@invoke-ai/ui-library';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { toast } from 'features/toast/toast';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useEmptyModelCacheMutation } from 'services/api/endpoints/models';
+
+const ClearModelCacheButton = () => {
+  const isModelCacheEnabled = useFeatureStatus('modelCache');
+  const [emptyModelCache, { isLoading }] = useEmptyModelCacheMutation();
+  const { t } = useTranslation();
+
+  const handleClearCache = useCallback(async () => {
+    try {
+      await emptyModelCache().unwrap();
+      toast({
+        status: 'success',
+        title: t('modelCache.clearSucceeded'),
+      });
+    } catch (error) {
+      toast({
+        status: 'error',
+        title: t('modelCache.clearFailed'),
+      });
+    }
+  }, [emptyModelCache, t]);
+
+  if (!isModelCacheEnabled) {
+    return <></>;
+  }
+
+  return (
+    <Button size="sm" colorScheme="red" onClick={handleClearCache} isLoading={isLoading}>
+      {t('modelCache.clear')}
+    </Button>
+  );
+};
+
+export default memo(ClearModelCacheButton);

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

@@ -1,7 +1,9 @@
+/* eslint-disable i18next/no-literal-string */
 import { ButtonGroup, Flex } from '@invoke-ai/ui-library';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 
+import ClearModelCacheButton from './ClearModelCacheButton';
 import ClearQueueButton from './ClearQueueButton';
 import PauseProcessorButton from './PauseProcessorButton';
 import PruneQueueButton from './PruneQueueButton';
@@ -11,19 +13,22 @@ const QueueTabQueueControls = () => {
   const isPauseEnabled = useFeatureStatus('pauseQueue');
   const isResumeEnabled = useFeatureStatus('resumeQueue');
   return (
-    <Flex layerStyle="first" borderRadius="base" p={2} gap={2}>
-      {isPauseEnabled || isResumeEnabled ? (
+    <Flex flexDir="column" layerStyle="first" borderRadius="base" p={2} gap={2}>
+      <Flex gap={2}>
+        {isPauseEnabled || isResumeEnabled ? (
+          <ButtonGroup w={28} orientation="vertical" size="sm">
+            {isResumeEnabled ? <ResumeProcessorButton /> : <></>}
+            {isPauseEnabled ? <PauseProcessorButton /> : <></>}
+          </ButtonGroup>
+        ) : (
+          <></>
+        )}
         <ButtonGroup w={28} orientation="vertical" size="sm">
-          {isResumeEnabled ? <ResumeProcessorButton /> : <></>}
-          {isPauseEnabled ? <PauseProcessorButton /> : <></>}
+          <PruneQueueButton />
+          <ClearQueueButton />
         </ButtonGroup>
-      ) : (
-        <></>
-      )}
-      <ButtonGroup w={28} orientation="vertical" size="sm">
-        <PruneQueueButton />
-        <ClearQueueButton />
-      </ButtonGroup>
+      </Flex>
+      <ClearModelCacheButton />
     </Flex>
   );
 };