feat(ui): add about modal w/ app deps (#5462)

* resolved conflicts

* changed logo and some design changes

* feedback changes

* resolved conflicts

* changed logo and some design changes

* feedback changes

* lint fixed

* added translations

* some requested changes done

* all feedback changes done and replace links in settingsmenu comp

* fixed the gap between deps verisons & chnaged heights

* feat(ui): minor about modal styling

* feat(ui): tag app endpoints with FetchOnReconnect

* fix(ui): remove unused translation string

---------

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Co-authored-by: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>

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

@@ -1,5 +1,6 @@
 {
     "accessibility": {
+        "about": "About",
         "copyMetadataJson": "Copy metadata JSON",
         "createIssue": "Create Issue",
         "exitViewer": "Exit Viewer",
@@ -74,6 +75,8 @@
         }
     },
     "common": {
+        "aboutDesc": "Using Invoke for work? Check out:",
+        "aboutHeading": "Own Your Creative Power",
         "accept": "Accept",
         "advanced": "Advanced",
         "advancedOptions": "Advanced Options",
@@ -136,6 +139,7 @@
         "load": "Load",
         "loading": "Loading",
         "loadingInvokeAI": "Loading Invoke AI",
+        "localSystem": "Local System",
         "learnMore": "Learn More",
         "modelManager": "Model Manager",
         "nodeEditor": "Node Editor",

invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx

@@ -0,0 +1,138 @@
+import { ExternalLinkIcon } from '@chakra-ui/icons';
+import {
+  Flex,
+  Grid,
+  GridItem,
+  Image,
+  Link,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { InvHeading } from 'common/components/InvHeading/wrapper';
+import {
+  InvModal,
+  InvModalBody,
+  InvModalCloseButton,
+  InvModalContent,
+  InvModalFooter,
+  InvModalHeader,
+  InvModalOverlay,
+} from 'common/components/InvModal/wrapper';
+import { InvText } from 'common/components/InvText/wrapper';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import {
+  discordLink,
+  githubLink,
+  websiteLink,
+} from 'features/system/store/constants';
+import { map } from 'lodash-es';
+import InvokeLogoYellow from 'public/assets/images/invoke-tag-lrg.svg';
+import type { ReactElement } from 'react';
+import { cloneElement, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  useGetAppDepsQuery,
+  useGetAppVersionQuery,
+} from 'services/api/endpoints/appInfo';
+
+type AboutModalProps = {
+  /* The button to open the Settings Modal */
+  children: ReactElement;
+};
+
+const AboutModal = ({ children }: AboutModalProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { t } = useTranslation();
+  const { deps } = useGetAppDepsQuery(undefined, {
+    selectFromResult: ({ data }) => ({
+      deps: data ? map(data, (version, name) => ({ name, version })) : [],
+    }),
+  });
+  const { data: appVersion } = useGetAppVersionQuery();
+
+  return (
+    <>
+      {cloneElement(children, {
+        onClick: onOpen,
+      })}
+      <InvModal isOpen={isOpen} onClose={onClose} isCentered size="2xl">
+        <InvModalOverlay />
+        <InvModalContent maxH="80vh" h="33rem">
+          <InvModalHeader>{t('accessibility.about')}</InvModalHeader>
+          <InvModalCloseButton />
+          <InvModalBody display="flex" flexDir="column" gap={4}>
+            <Grid templateColumns="repeat(2, 1fr)" h="full">
+              <GridItem
+                backgroundColor="base.750"
+                borderRadius="base"
+                p="4"
+                h="full"
+              >
+                <ScrollableContent>
+                  <InvHeading
+                    position="sticky"
+                    top="0"
+                    backgroundColor="base.750"
+                    size="md"
+                    p="1"
+                  >
+                    {t('common.localSystem')}
+                  </InvHeading>
+                  {deps.map(({ name, version }, i) => (
+                    <Grid
+                      key={i}
+                      py="2"
+                      px="1"
+                      w="full"
+                      templateColumns="repeat(2, 1fr)"
+                    >
+                      <InvText>{name}</InvText>
+                      <InvText>
+                        {version ? version : t('common.notInstalled')}
+                      </InvText>
+                    </Grid>
+                  ))}
+                </ScrollableContent>
+              </GridItem>
+              <GridItem>
+                <Flex
+                  flexDir="column"
+                  gap={3}
+                  justifyContent="center"
+                  alignItems="center"
+                  h="full"
+                >
+                  <Image src={InvokeLogoYellow} alt="invoke-logo" w="120px" />
+                  {appVersion && <InvText>{`v${appVersion?.version}`}</InvText>}
+                  <Grid templateColumns="repeat(2, 1fr)" gap="3">
+                    <GridItem>
+                      <Link fontSize="sm" href={githubLink} isExternal>
+                        {t('common.githubLabel')}
+                        <ExternalLinkIcon mx="2px" />
+                      </Link>
+                    </GridItem>
+                    <GridItem>
+                      <Link fontSize="sm" href={discordLink} isExternal>
+                        {t('common.discordLabel')}
+                        <ExternalLinkIcon mx="2px" />
+                      </Link>
+                    </GridItem>
+                  </Grid>
+                  <InvHeading fontSize="large">
+                    {t('common.aboutHeading')}
+                  </InvHeading>
+                  <InvText fontSize="sm">{t('common.aboutDesc')}</InvText>
+                  <Link isExternal href={websiteLink} fontSize="sm">
+                    {websiteLink} <ExternalLinkIcon mx="2px" />
+                  </Link>
+                </Flex>
+              </GridItem>
+            </Grid>
+          </InvModalBody>
+          <InvModalFooter />
+        </InvModalContent>
+      </InvModal>
+    </>
+  );
+};
+
+export default memo(AboutModal);

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx

@@ -8,12 +8,15 @@ import {
   InvMenuGroup,
 } from 'common/components/InvMenu/wrapper';
 import { useGlobalMenuClose } from 'common/hooks/useGlobalMenuClose';
+import AboutModal from 'features/system/components/AboutModal/AboutModal';
 import HotkeysModal from 'features/system/components/HotkeysModal/HotkeysModal';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { discordLink, githubLink } from 'features/system/store/constants';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   PiBugBeetleBold,
+  PiInfoBold,
   PiKeyboardBold,
   PiToggleRightFill,
 } from 'react-icons/pi';
@@ -29,9 +32,6 @@ const SettingsMenu = () => {
   const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
   const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled;
 
-  const githubLink = 'http://github.com/invoke-ai/InvokeAI';
-  const discordLink = 'https://discord.gg/ZmtBAhwWhy';
-
   return (
     <InvMenu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
       <InvMenuButton
@@ -87,6 +87,13 @@ const SettingsMenu = () => {
             </InvMenuItem>
           </SettingsModal>
         </InvMenuGroup>
+        <InvMenuGroup title={t('accessibility.about')}>
+          <AboutModal>
+            <InvMenuItem as="button" icon={<PiInfoBold />}>
+              {t('accessibility.about')}
+            </InvMenuItem>
+          </AboutModal>
+        </InvMenuGroup>
       </InvMenuList>
     </InvMenu>
   );

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -207,7 +207,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
         isCentered
       >
         <InvModalOverlay />
-        <InvModalContent maxH="80vh" h="80vh">
+        <InvModalContent maxH="80vh" h="50vh">
           <InvModalHeader bg="none">{t('common.settingsLabel')}</InvModalHeader>
           <InvModalCloseButton />
           <InvModalBody display="flex" flexDir="column" gap={4}>

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

@@ -0,0 +1,3 @@
+export const githubLink = 'http://github.com/invoke-ai/InvokeAI';
+export const discordLink = 'https://discord.gg/ZmtBAhwWhy';
+export const websiteLink = 'https://www.invoke.com/';

invokeai/frontend/web/src/services/api/endpoints/appInfo.ts

@@ -1,5 +1,9 @@
 import type { paths } from 'services/api/schema';
-import type { AppConfig, AppVersion } from 'services/api/types';
+import type {
+  AppConfig,
+  AppDependencyVersions,
+  AppVersion,
+} from 'services/api/types';
 
 import { api } from '..';
 
@@ -10,16 +14,21 @@ export const appInfoApi = api.injectEndpoints({
         url: `app/version`,
         method: 'GET',
       }),
-      providesTags: ['AppVersion'],
+      providesTags: ['FetchOnReconnect'],
-      keepUnusedDataFor: 86400000, // 1 day
+    }),
+    getAppDeps: build.query<AppDependencyVersions, void>({
+      query: () => ({
+        url: `app/app_deps`,
+        method: 'GET',
+      }),
+      providesTags: ['FetchOnReconnect'],
     }),
     getAppConfig: build.query<AppConfig, void>({
       query: () => ({
         url: `app/config`,
         method: 'GET',
       }),
-      providesTags: ['AppConfig'],
+      providesTags: ['FetchOnReconnect'],
-      keepUnusedDataFor: 86400000, // 1 day
     }),
     getInvocationCacheStatus: build.query<
       paths['/api/v1/app/invocation_cache/status']['get']['responses']['200']['content']['application/json'],
@@ -57,6 +66,7 @@ export const appInfoApi = api.injectEndpoints({
 
 export const {
   useGetAppVersionQuery,
+  useGetAppDepsQuery,
   useGetAppConfigQuery,
   useClearInvocationCacheMutation,
   useDisableInvocationCacheMutation,

invokeai/frontend/web/src/services/api/types.ts

@@ -35,6 +35,7 @@ export type InvocationJSONSchemaExtra = s['UIConfigBase'];
 // App Info
 export type AppVersion = s['AppVersion'];
 export type AppConfig = s['AppConfig'];
+export type AppDependencyVersions = s['AppDependencyVersions'];
 
 // Images
 export type ImageDTO = s['ImageDTO'];