Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

option to override logo component

Browse Source
This commit is contained in:
Mary Hipp 2024-01-04 12:46:57 -05:00 committed by Kent Keirsey
parent f27bb402fb
commit bca7ea1674
4 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
View File

@ -4,7 +4,6 @@ import type { Middleware } from '@reduxjs/toolkit';
import { $socketOptions } from 'app/hooks/useSocketIO'; import { $socketOptions } from 'app/hooks/useSocketIO';
import { $authToken } from 'app/store/nanostores/authToken'; import { $authToken } from 'app/store/nanostores/authToken';
import { $baseUrl } from 'app/store/nanostores/baseUrl'; import { $baseUrl } from 'app/store/nanostores/baseUrl';
import { $customAppInfo } from 'app/store/nanostores/customAppInfo';
import { $customNavComponent } from 'app/store/nanostores/customNavComponent'; import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
import type { CustomStarUi } from 'app/store/nanostores/customStarUI'; import type { CustomStarUi } from 'app/store/nanostores/customStarUI';
import { $customStarUI } from 'app/store/nanostores/customStarUI'; import { $customStarUI } from 'app/store/nanostores/customStarUI';
@ -22,6 +21,7 @@ import React, { lazy, memo, useEffect, useMemo } from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares'; import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
import type { ManagerOptions, SocketOptions } from 'socket.io-client'; import type { ManagerOptions, SocketOptions } from 'socket.io-client';
import { $logo } from 'app/store/nanostores/logo';
const App = lazy(() => import('./App')); const App = lazy(() => import('./App'));
const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider')); const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
@ -42,7 +42,7 @@ interface Props extends PropsWithChildren {
customStarUi?: CustomStarUi; customStarUi?: CustomStarUi;
socketOptions?: Partial<ManagerOptions & SocketOptions>; socketOptions?: Partial<ManagerOptions & SocketOptions>;
isDebugging?: boolean; isDebugging?: boolean;
customAppInfo?: string; logo?: ReactNode;
} }
const InvokeAIUI = ({ const InvokeAIUI = ({
@ -58,7 +58,7 @@ const InvokeAIUI = ({
customStarUi, customStarUi,
socketOptions, socketOptions,
isDebugging = false, isDebugging = false,
customAppInfo, logo,
}: Props) => { }: Props) => {
useEffect(() => { useEffect(() => {
// configure API client token // configure API client token
@ -134,14 +134,14 @@ const InvokeAIUI = ({
}, [galleryHeader]); }, [galleryHeader]);
useEffect(() => { useEffect(() => {
if (customAppInfo) { if (logo) {
$customAppInfo.set(customAppInfo); $logo.set(logo);
} }
return () => { return () => {
$customAppInfo.set(undefined); $logo.set(undefined);
}; };
}, [customAppInfo]); }, [logo]);
useEffect(() => { useEffect(() => {
if (socketOptions) { if (socketOptions) {

3
invokeai/frontend/web/src/app/store/nanostores/customAppInfo.ts
View File

@ -1,3 +0,0 @@
import { atom } from 'nanostores';
export const $customAppInfo = atom<string | undefined>();

4
invokeai/frontend/web/src/app/store/nanostores/logo.ts Normal file
View File

@ -0,0 +1,4 @@
import { atom } from 'nanostores';
import type { ReactNode } from 'react';
export const $logo = atom<ReactNode | undefined>(undefined);

14
invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
View File

@ -1,27 +1,27 @@
/* eslint-disable i18next/no-literal-string */ /* eslint-disable i18next/no-literal-string */
import { Image } from '@chakra-ui/react'; import { Image } from '@chakra-ui/react';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { $customAppInfo } from 'app/store/nanostores/customAppInfo';
import InvokeLogoYellow from 'assets/images/invoke-key-ylw-sm.svg'; import InvokeLogoYellow from 'assets/images/invoke-key-ylw-sm.svg';
import { InvText } from 'common/components/InvText/wrapper'; import { InvText } from 'common/components/InvText/wrapper';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { memo, useMemo, useRef } from 'react'; import { memo, useMemo, useRef } from 'react';
import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo'; import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
import { $logo } from '../../../app/store/nanostores/logo';
const InvokeAILogoComponent = () => { const InvokeAILogoComponent = () => {
const { data: appVersion } = useGetAppVersionQuery(); const { data: appVersion } = useGetAppVersionQuery();
const ref = useRef(null); const ref = useRef(null);
const customAppInfo = useStore($customAppInfo); const logoOverride = useStore($logo);
const tooltip = useMemo(() => { const tooltip = useMemo(() => {
if (customAppInfo) {
return <InvText fontWeight="semibold">{customAppInfo}</InvText>;
}
if (appVersion) { if (appVersion) {
return <InvText fontWeight="semibold">v{appVersion.version}</InvText>; return <InvText fontWeight="semibold">v{appVersion.version}</InvText>;
} }
return null; return null;
}, [appVersion, customAppInfo]); }, [appVersion]);
if (logoOverride) {
return logoOverride;
}
return ( return (
<InvTooltip placement="right" label={tooltip} p={1} px={2} gutter={16}> <InvTooltip placement="right" label={tooltip} p={1} px={2} gutter={16}>