diff --git a/invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFForbiddenToast.tsx b/invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFForbiddenToast.tsx index abb73fc6e83..8dc64420ed3 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFForbiddenToast.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFForbiddenToast.tsx @@ -1,12 +1,9 @@ -import { Button, ExternalLink, Text, useToast } from '@invoke-ai/ui-library'; +import { ExternalLink, Text, useToast } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; -import { useAppDispatch } from 'app/store/storeHooks'; -import { setActiveTab } from 'features/ui/store/uiSlice'; import { atom } from 'nanostores'; -import { useCallback, useEffect } from 'react'; +import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -const FEATURE_ID = 'hfToken'; const TOAST_ID = 'hfForbidden'; /** @@ -22,10 +19,9 @@ export const useHFForbiddenToast = () => { useEffect(() => { if (!isHFForbiddenToastOpen.isEnabled) { toast.close(TOAST_ID); - return + return; } - if (isHFForbiddenToastOpen.isEnabled) { toast({ id: TOAST_ID, @@ -45,5 +41,5 @@ export const useHFForbiddenToast = () => { onCloseComplete: () => $isHFForbiddenToastOpen.set({ isEnabled: false }), }); } - }, [isHFForbiddenToastOpen, t]); + }, [isHFForbiddenToastOpen, t, toast]); }; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFLoginToast.tsx b/invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFLoginToast.tsx index 976b813a8dc..fb831dc2b99 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFLoginToast.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFLoginToast.tsx @@ -36,7 +36,7 @@ export const useHFLoginToast = () => { useEffect(() => { if (!isHFLoginToastOpen) { toast.close(TOAST_ID); - return + return; } if (isHFLoginToastOpen && data) { @@ -51,7 +51,7 @@ export const useHFLoginToast = () => { onCloseComplete: () => $isHFLoginToastOpen.set(false), }); } - }, [isHFLoginToastOpen, data]); + }, [isHFLoginToastOpen, data, toast]); }; type Props = { diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HFToken.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HFToken.tsx index 1c0a1ff6ac5..8d42aa78d47 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HFToken.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HFToken.tsx @@ -1,81 +1,80 @@ import { - Button, - ExternalLink, - Flex, - FormControl, - FormErrorMessage, - FormHelperText, - FormLabel, - Input, - useToast, - } from '@invoke-ai/ui-library'; - import { skipToken } from '@reduxjs/toolkit/query'; - import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; - import type { ChangeEvent } from 'react'; - import { useCallback, useMemo, useState } from 'react'; - import { useTranslation } from 'react-i18next'; - import { useGetHFTokenStatusQuery, useSetHFTokenMutation } from 'services/api/endpoints/models'; -import { $isHFLoginToastOpen } from '../../../hooks/useHFLoginToast'; - - export const HFToken = () => { - const { t } = useTranslation(); - const isHFTokenEnabled = useFeatureStatus('hfToken'); - const [token, setToken] = useState(''); - const [tokenStatus, setTokenStatus] = useState() - const { currentData } = useGetHFTokenStatusQuery(isHFTokenEnabled ? undefined : skipToken); - const [trigger, { isLoading }] = useSetHFTokenMutation(); - const toast = useToast(); - const onChange = useCallback((e: ChangeEvent) => { - setToken(e.target.value); - }, []); - const onClick = useCallback(() => { - trigger({ token }) - .unwrap() - .then((res) => { - if (res === 'valid') { - setToken(''); - toast({ - title: t('modelManager.hfTokenSaved'), - status: 'success', - duration: 3000, - }); - $isHFLoginToastOpen.set(false) - } - }); - }, [t, toast, token, trigger]); - - const error = useMemo(() => { - if (!currentData || isLoading) { - return null; - } - if (token.length && currentData === 'invalid') { - return t('modelManager.hfTokenInvalidErrorMessage'); - } - if (token.length && currentData === 'unknown') { - return t('modelManager.hfTokenUnableToVerifyErrorMessage'); - } - return null; - }, [currentData, isLoading, t, token.length]); - - if (!currentData || currentData === 'valid') { + Button, + ExternalLink, + Flex, + FormControl, + FormErrorMessage, + FormHelperText, + FormLabel, + Input, + useToast, +} from '@invoke-ai/ui-library'; +import { skipToken } from '@reduxjs/toolkit/query'; +import { $isHFLoginToastOpen } from 'features/modelManagerV2/hooks/useHFLoginToast'; +import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; +import type { ChangeEvent } from 'react'; +import { useCallback, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useGetHFTokenStatusQuery, useSetHFTokenMutation } from 'services/api/endpoints/models'; + +export const HFToken = () => { + const { t } = useTranslation(); + const isHFTokenEnabled = useFeatureStatus('hfToken'); + const [token, setToken] = useState(''); + const { currentData } = useGetHFTokenStatusQuery(isHFTokenEnabled ? undefined : skipToken); + const [trigger, { isLoading }] = useSetHFTokenMutation(); + const toast = useToast(); + const onChange = useCallback((e: ChangeEvent) => { + setToken(e.target.value); + }, []); + const onClick = useCallback(() => { + trigger({ token }) + .unwrap() + .then((res) => { + if (res === 'valid') { + setToken(''); + toast({ + title: t('modelManager.hfTokenSaved'), + status: 'success', + duration: 3000, + }); + $isHFLoginToastOpen.set(false); + } + }); + }, [t, toast, token, trigger]); + + const error = useMemo(() => { + if (!currentData || isLoading) { return null; } - - return ( - - - {t('modelManager.hfTokenLabel')} - - - - - - - - {error} - - - ); - }; \ No newline at end of file + if (token.length && currentData === 'invalid') { + return t('modelManager.hfTokenInvalidErrorMessage'); + } + if (token.length && currentData === 'unknown') { + return t('modelManager.hfTokenUnableToVerifyErrorMessage'); + } + return null; + }, [currentData, isLoading, t, token.length]); + + if (!currentData || currentData === 'valid') { + return null; + } + + return ( + + + {t('modelManager.hfTokenLabel')} + + + + + + + + {error} + + + ); +}; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx index 41a04dfcc60..ee6b6714dd0 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx @@ -1,14 +1,14 @@ -import { Button, Divider, Flex, FormControl, FormErrorMessage, FormHelperText, FormLabel, Input } from '@invoke-ai/ui-library'; +import { Button, Flex, FormControl, FormErrorMessage, FormHelperText, FormLabel, Input } from '@invoke-ai/ui-library'; +import { skipToken } from '@reduxjs/toolkit/query'; import { useInstallModel } from 'features/modelManagerV2/hooks/useInstallModel'; +import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import type { ChangeEventHandler } from 'react'; import { memo, useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useGetHFTokenStatusQuery, useLazyGetHuggingFaceModelsQuery } from 'services/api/endpoints/models'; -import { HuggingFaceResults } from './HuggingFaceResults'; import { HFToken } from './HFToken'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus'; +import { HuggingFaceResults } from './HuggingFaceResults'; export const HuggingFaceForm = memo(() => { const [huggingFaceRepo, setHuggingFaceRepo] = useState(''); diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx index e2de44bb40f..59449c0781b 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx @@ -1,5 +1,7 @@ import { Button, Flex, Heading } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { useHFForbiddenToast } from 'features/modelManagerV2/hooks/useHFForbiddenToast'; +import { useHFLoginToast } from 'features/modelManagerV2/hooks/useHFLoginToast'; import { selectSelectedModelKey, setSelectedModelKey } from 'features/modelManagerV2/store/modelManagerV2Slice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -7,8 +9,6 @@ import { PiPlusBold } from 'react-icons/pi'; import ModelList from './ModelManagerPanel/ModelList'; import { ModelListNavigation } from './ModelManagerPanel/ModelListNavigation'; -import { useHFLoginToast } from '../hooks/useHFLoginToast'; -import { useHFForbiddenToast } from '../hooks/useHFForbiddenToast'; export const ModelManager = memo(() => { const { t } = useTranslation(); @@ -19,7 +19,7 @@ export const ModelManager = memo(() => { const selectedModelKey = useAppSelector(selectSelectedModelKey); useHFLoginToast(); - useHFForbiddenToast() + useHFForbiddenToast(); return ( diff --git a/invokeai/frontend/web/src/services/api/endpoints/models.ts b/invokeai/frontend/web/src/services/api/endpoints/models.ts index dc386e3d409..3180e932b76 100644 --- a/invokeai/frontend/web/src/services/api/endpoints/models.ts +++ b/invokeai/frontend/web/src/services/api/endpoints/models.ts @@ -294,7 +294,7 @@ export const { usePruneCompletedModelInstallsMutation, useGetStarterModelsQuery, useGetHFTokenStatusQuery, - useSetHFTokenMutation + useSetHFTokenMutation, } = modelsApi; export const selectModelConfigsQuery = modelsApi.endpoints.getModelConfigs.select(); diff --git a/invokeai/frontend/web/src/services/api/types.ts b/invokeai/frontend/web/src/services/api/types.ts index cb05ec58f50..5c667190fee 100644 --- a/invokeai/frontend/web/src/services/api/types.ts +++ b/invokeai/frontend/web/src/services/api/types.ts @@ -245,7 +245,6 @@ export type PostUploadAction = export type BoardRecordOrderBy = S['BoardRecordOrderBy']; export type StarterModel = S['StarterModel']; - export type GetHFTokenStatusResponse = paths['/api/v2/models/hf_login']['get']['responses']['200']['content']['application/json']; export type SetHFTokenResponse = NonNullable< @@ -253,4 +252,4 @@ export type SetHFTokenResponse = NonNullable< >; export type SetHFTokenArg = NonNullable< paths['/api/v2/models/hf_login']['post']['requestBody']['content']['application/json'] ->; \ No newline at end of file +>; diff --git a/invokeai/frontend/web/src/services/events/setEventListeners.tsx b/invokeai/frontend/web/src/services/events/setEventListeners.tsx index 371cc09b9df..d181ebb0a35 100644 --- a/invokeai/frontend/web/src/services/events/setEventListeners.tsx +++ b/invokeai/frontend/web/src/services/events/setEventListeners.tsx @@ -7,6 +7,8 @@ import { $queueId } from 'app/store/nanostores/queueId'; import type { AppStore } from 'app/store/store'; import type { SerializableObject } from 'common/types'; import { deepClone } from 'common/util/deepClone'; +import { $isHFForbiddenToastOpen } from 'features/modelManagerV2/hooks/useHFForbiddenToast'; +import { $isHFLoginToastOpen } from 'features/modelManagerV2/hooks/useHFLoginToast'; import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState'; import { zNodeStatus } from 'features/nodes/types/invocation'; import ErrorToastDescription, { getTitleFromErrorType } from 'features/toast/ErrorToastDescription'; @@ -22,8 +24,6 @@ import type { ClientToServerEvents, ServerToClientEvents } from 'services/events import type { Socket } from 'socket.io-client'; import { $lastProgressEvent } from './stores'; -import { $isHFLoginToastOpen } from '../../features/modelManagerV2/hooks/useHFLoginToast'; -import { $isHFForbiddenToastOpen } from '../../features/modelManagerV2/hooks/useHFForbiddenToast'; const log = logger('events'); @@ -296,14 +296,13 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis const { id, error, error_type } = data; const installs = selectModelInstalls(getState()).data; - - if (error === "Unauthorized") { - $isHFLoginToastOpen.set(true) + if (error === 'Unauthorized') { + $isHFLoginToastOpen.set(true); } - if (error === "Forbidden") { - $isHFForbiddenToastOpen.set({isEnabled: true, source: data.source}) + if (error === 'Forbidden') { + $isHFForbiddenToastOpen.set({ isEnabled: true, source: data.source }); } if (!installs?.find((install) => install.id === id)) {