more copy and linting

invokeai/frontend/web/src/features/gallery/components/ImageViewer/NoContentForViewer.tsx

@@ -1,13 +1,28 @@
-import { Flex, Spinner, Text } from '@invoke-ai/ui-library';
+import { Button, Divider, Flex, Spinner, Text } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import { InvokeLogoIcon } from 'common/components/InvokeLogoIcon';
 import { LOADING_SYMBOL, useHasImages } from 'features/gallery/hooks/useHasImages';
+import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels';
+import { setActiveTab } from 'features/ui/store/uiSlice';
+import { useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { PiImageBold } from 'react-icons/pi';
 
 export const NoContentForViewer = () => {
   const hasImages = useHasImages();
   const { t } = useTranslation();
+  const dispatch = useAppDispatch()
+
+  const handleClickDownloadStarterModels= useCallback(() => {
+    dispatch(setActiveTab('models'));
+    $installModelsTab.set(3);
+  }, [dispatch])
+
+  const handleClickImportModels= useCallback(() => {
+    dispatch(setActiveTab('models'));
+    $installModelsTab.set(0);
+  }, [dispatch])
 
   if (hasImages === LOADING_SYMBOL) {
     return (
@@ -28,32 +43,47 @@ export const NoContentForViewer = () => {
   return (
     <Flex flexDir="column" gap={4} alignItems="center" textAlign="center" maxW="600px">
       <InvokeLogoIcon w={40} h={40} />
-      <Text fontSize="md" color="base.200" pt={16}>
-        <Trans
-          i18nKey="newUserExperience.toGetStarted"
-          components={{
-            StrongComponent: <Text as="span" color="white" fontSize="md" fontWeight="semibold" />,
-          }}
-        />
-      </Text>
+      <Flex flexDir="column" gap={8} alignItems="center" textAlign="center">
+        <Text fontSize="md" color="base.200" pt={16}>
+          <Trans
+            i18nKey="newUserExperience.toGetStarted"
+            components={{
+              StrongComponent: <Text as="span" color="white" fontSize="md" fontWeight="semibold" />,
+            }}
+          />
+        </Text>
 
-      <Text fontSize="md" color="base.200">
-        <Trans
-          i18nKey="newUserExperience.gettingStartedSeries"
-          components={{
-            LinkComponent: (
-              <Text
-                as="a"
-                color="white"
-                fontSize="md"
-                fontWeight="semibold"
-                href="https://www.youtube.com/playlist?list=PLvWK1Kc8iXGrQy8r9TYg6QdUuJ5MMx-ZO"
-                target="_blank"
-              />
-            ),
-          }}
-        />
-      </Text>
+        <Flex flexDir="column" gap={2} alignItems="center">
+          <Text fontSize="md" color="base.200">
+            {t("newUserExperience.noModelsInstalled")}
+          </Text>
+          <Flex gap={3} alignItems="center">
+            <Button size="sm" onClick={handleClickDownloadStarterModels}>{t('newUserExperience.downloadStarterModels')}</Button>
+            <Text fontSize="sm" color="base.200">{t("common.or")}</Text>
+            <Button size="sm" onClick={handleClickImportModels}>{t('newUserExperience.importModels')}</Button>
+          </Flex>
+        </Flex>
+
+        <Divider />
+
+        <Text fontSize="md" color="base.200">
+          <Trans
+            i18nKey="newUserExperience.gettingStartedSeries"
+            components={{
+              LinkComponent: (
+                <Text
+                  as="a"
+                  color="white"
+                  fontSize="md"
+                  fontWeight="semibold"
+                  href="https://www.youtube.com/playlist?list=PLvWK1Kc8iXGrQy8r9TYg6QdUuJ5MMx-ZO"
+                  target="_blank"
+                />
+              ),
+            }}
+          />
+        </Text>
+      </Flex>
     </Flex>
   );
 };

invokeai/frontend/web/src/features/modelManagerV2/hooks/useBuildModelsToInstall.ts

@@ -1,40 +1,40 @@
-import { EMPTY_ARRAY } from "app/store/constants";
-import { useCallback,useMemo } from "react";
-import { modelConfigsAdapterSelectors,useGetModelConfigsQuery } from "services/api/endpoints/models";
-import type { StarterModel } from "services/api/types";
+import { EMPTY_ARRAY } from 'app/store/constants';
+import { useCallback, useMemo } from 'react';
+import { modelConfigsAdapterSelectors, useGetModelConfigsQuery } from 'services/api/endpoints/models';
+import type { StarterModel } from 'services/api/types';
 
 export const useBuildModelsToInstall = () => {
-    const { data: modelListRes } = useGetModelConfigsQuery();
-    const modelList = useMemo(() => {
-        if (!modelListRes) {
-            return EMPTY_ARRAY;
-        }
+  const { data: modelListRes } = useGetModelConfigsQuery();
+  const modelList = useMemo(() => {
+    if (!modelListRes) {
+      return EMPTY_ARRAY;
+    }
 
-        return modelConfigsAdapterSelectors.selectAll(modelListRes);
-    }, [modelListRes]);
+    return modelConfigsAdapterSelectors.selectAll(modelListRes);
+  }, [modelListRes]);
 
-    const buildModelToInstall = useCallback(
-        (starterModel: StarterModel) => {
-            if (
-                modelList.some(
-                    (mc) => starterModel.base === mc.base && starterModel.name === mc.name && starterModel.type === mc.type
-                )
-            ) {
-                return undefined;
-            }
+  const buildModelToInstall = useCallback(
+    (starterModel: StarterModel) => {
+      if (
+        modelList.some(
+          (mc) => starterModel.base === mc.base && starterModel.name === mc.name && starterModel.type === mc.type
+        )
+      ) {
+        return undefined;
+      }
 
-            const source = starterModel.source;
-            const config = {
-                name: starterModel.name,
-                description: starterModel.description,
-                type: starterModel.type,
-                base: starterModel.base,
-                format: starterModel.format,
-            };
-            return { config, source };
-        },
-        [modelList]
-    );
+      const source = starterModel.source;
+      const config = {
+        name: starterModel.name,
+        description: starterModel.description,
+        type: starterModel.type,
+        base: starterModel.base,
+        format: starterModel.format,
+      };
+      return { config, source };
+    },
+    [modelList]
+  );
 
-    return buildModelToInstall
-}
+  return buildModelToInstall;
+};

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundle.tsx

@@ -1,11 +1,11 @@
 import { Button, Flex, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useBuildModelsToInstall } from 'features/modelManagerV2/hooks/useBuildModelsToInstall';
+import { isMainModelBase } from 'features/nodes/types/common';
 import { MODEL_TYPE_SHORT_MAP } from 'features/parameters/types/constants';
 import { toast } from 'features/toast/toast';
 import { useCallback, useMemo } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { type GetStarterModelsResponse, useInstallModelMutation } from 'services/api/endpoints/models';
-import { isMainModelBase } from '../../../../nodes/types/common';
 
 export const StarterBundle = ({
   bundleName,

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsResults.tsx

@@ -1,9 +1,19 @@
-import { Flex, IconButton, Input, InputGroup, InputRightElement, Text } from '@invoke-ai/ui-library';
+import {
+  Box,
+  Flex,
+  Icon,
+  IconButton,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Text,
+  Tooltip,
+} from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import type { ChangeEventHandler } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiXBold } from 'react-icons/pi';
+import { PiInfoBold, PiXBold } from 'react-icons/pi';
 import type { GetStarterModelsResponse } from 'services/api/endpoints/models';
 
 import { StarterBundle } from './StarterBundle';
@@ -47,17 +57,28 @@ export const StarterModelsResults = memo(({ results }: StarterModelsResultsProps
     <Flex flexDir="column" gap={3} height="100%">
       <Flex justifyContent="space-between" alignItems="center">
         {!!Object.keys(results.starter_bundles).length && (
-          <Flex gap={2} alignItems="center">
-            <Text fontWeight="semibold">{t('modelManager.starterBundles')}:</Text>
-            {Object.keys(results.starter_bundles).map((bundleName) => (
-              <>
-                {results.starter_bundles[bundleName] ? (
-                  <StarterBundle bundleName={bundleName} bundle={results.starter_bundles[bundleName]} />
-                ) : (
-                  <></>
-                )}
-              </>
-            ))}
+          <Flex gap={4} alignItems="center">
+            <Flex gap={1} alignItems="center">
+              <Text color="base.200" fontWeight="semibold">
+                {t('modelManager.starterBundles')}
+              </Text>
+              <Tooltip label={t('modelManager.starterBundleHelpText')}>
+                <Box>
+                  <Icon as={PiInfoBold} color="base.200" />
+                </Box>
+              </Tooltip>
+            </Flex>
+            <Flex gap={2}>
+              {Object.keys(results.starter_bundles).map((bundleName) => (
+                <>
+                  {results.starter_bundles[bundleName] ? (
+                    <StarterBundle bundleName={bundleName} bundle={results.starter_bundles[bundleName]} />
+                  ) : (
+                    <></>
+                  )}
+                </>
+              ))}
+            </Flex>
           </Flex>
         )}
         <InputGroup w={64} size="xs">