From 3655a47200133716b8e1c9c2f38aebd6722a529c Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 27 Mar 2024 16:15:52 +1100 Subject: [PATCH] feat(ui): remove references to HF token handling --- .../frontend/web/src/app/components/App.tsx | 2 - .../modelManagerV2/components/HFToken.tsx | 78 ---------------- .../modelManagerV2/hooks/useHFLoginToast.tsx | 88 ------------------- .../modelManagerV2/subpanels/ModelManager.tsx | 2 - .../web/src/services/api/endpoints/models.ts | 27 ------ 5 files changed, 197 deletions(-) delete mode 100644 invokeai/frontend/web/src/features/modelManagerV2/components/HFToken.tsx delete mode 100644 invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFLoginToast.tsx diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx index 0df6e7bde3..ae1a762f61 100644 --- a/invokeai/frontend/web/src/app/components/App.tsx +++ b/invokeai/frontend/web/src/app/components/App.tsx @@ -11,7 +11,6 @@ import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys'; import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal'; import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal'; import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal'; -import { useHFLoginToast } from 'features/modelManagerV2/hooks/useHFLoginToast'; import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast'; import { configChanged } from 'features/system/store/configSlice'; import { languageSelector } from 'features/system/store/systemSelectors'; @@ -71,7 +70,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => { }, [dispatch]); useStarterModelsToast(); - useHFLoginToast(); return ( diff --git a/invokeai/frontend/web/src/features/modelManagerV2/components/HFToken.tsx b/invokeai/frontend/web/src/features/modelManagerV2/components/HFToken.tsx deleted file mode 100644 index 8ed0ebdd64..0000000000 --- a/invokeai/frontend/web/src/features/modelManagerV2/components/HFToken.tsx +++ /dev/null @@ -1,78 +0,0 @@ -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'; - -export const HFToken = () => { - const { t } = useTranslation(); - const isEnabled = useFeatureStatus('hfToken').isFeatureEnabled; - const [token, setToken] = useState(''); - const { currentData } = useGetHFTokenStatusQuery(isEnabled ? 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, - }); - } - }); - }, [t, toast, token, trigger]); - - const error = useMemo(() => { - if (!currentData || isLoading) { - return null; - } - if (currentData === 'invalid') { - return t('modelManager.hfTokenInvalidErrorMessage'); - } - if (currentData === 'unknown') { - return t('modelManager.hfTokenUnableToVerifyErrorMessage'); - } - return null; - }, [currentData, isLoading, t]); - - if (!currentData || currentData === 'valid') { - return null; - } - - return ( - - - {t('modelManager.hfToken')} - - - - - - - - {error} - - - ); -}; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFLoginToast.tsx b/invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFLoginToast.tsx deleted file mode 100644 index e0f5bd8c09..0000000000 --- a/invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFLoginToast.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { Button, Text, useToast } from '@invoke-ai/ui-library'; -import { skipToken } from '@reduxjs/toolkit/query'; -import { useAppDispatch } from 'app/store/storeHooks'; -import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; -import { setActiveTab } from 'features/ui/store/uiSlice'; -import { t } from 'i18next'; -import { useCallback, useEffect, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useGetHFTokenStatusQuery } from 'services/api/endpoints/models'; -import type { S } from 'services/api/types'; - -const FEATURE_ID = 'hfToken'; - -const getTitle = (token_status: S['HFTokenStatus']) => { - switch (token_status) { - case 'invalid': - return t('modelManager.hfTokenInvalid'); - case 'unknown': - return t('modelManager.hfTokenUnableToVerify'); - } -}; - -export const useHFLoginToast = () => { - const { t } = useTranslation(); - const isEnabled = useFeatureStatus(FEATURE_ID).isFeatureEnabled; - const [didToast, setDidToast] = useState(false); - const { data } = useGetHFTokenStatusQuery(isEnabled ? undefined : skipToken); - const toast = useToast(); - - useEffect(() => { - if (toast.isActive(FEATURE_ID)) { - if (data === 'valid') { - setDidToast(true); - toast.close(FEATURE_ID); - } - return; - } - if (data && data !== 'valid' && !didToast && isEnabled) { - const title = getTitle(data); - toast({ - id: FEATURE_ID, - title, - description: , - status: 'info', - isClosable: true, - duration: null, - onCloseComplete: () => setDidToast(true), - }); - } - }, [data, didToast, isEnabled, t, toast]); -}; - -type Props = { - token_status: S['HFTokenStatus']; -}; - -const ToastDescription = ({ token_status }: Props) => { - const { t } = useTranslation(); - const dispatch = useAppDispatch(); - const toast = useToast(); - - const onClick = useCallback(() => { - dispatch(setActiveTab('modelManager')); - toast.close(FEATURE_ID); - }, [dispatch, toast]); - - if (token_status === 'invalid') { - return ( - - {t('modelManager.hfTokenInvalidErrorMessage')} {t('modelManager.hfTokenInvalidErrorMessage2')} - - - ); - } - - if (token_status === 'unknown') { - return ( - - {t('modelManager.hfTokenUnableToErrorMessage')}{' '} - - - ); - } -}; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx index 51c2ab0f7b..ed75f86078 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx @@ -1,6 +1,5 @@ import { Button, Flex, Heading, Spacer } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; -import { HFToken } from 'features/modelManagerV2/components/HFToken'; import { SyncModelsButton } from 'features/modelManagerV2/components/SyncModels/SyncModelsButton'; import { setSelectedModelKey } from 'features/modelManagerV2/store/modelManagerV2Slice'; import { useCallback } from 'react'; @@ -28,7 +27,6 @@ export const ModelManager = () => { - diff --git a/invokeai/frontend/web/src/services/api/endpoints/models.ts b/invokeai/frontend/web/src/services/api/endpoints/models.ts index cdfb5d42fc..d9d2863a7b 100644 --- a/invokeai/frontend/web/src/services/api/endpoints/models.ts +++ b/invokeai/frontend/web/src/services/api/endpoints/models.ts @@ -27,15 +27,6 @@ type GetModelConfigsResponse = NonNullable< paths['/api/v2/models/']['get']['responses']['200']['content']['application/json'] >; -type GetHFTokenStatusResponse = - paths['/api/v2/models/hf_login']['get']['responses']['200']['content']['application/json']; -type SetHFTokenResponse = NonNullable< - paths['/api/v2/models/hf_login']['post']['responses']['200']['content']['application/json'] ->; -type SetHFTokenArg = NonNullable< - paths['/api/v2/models/hf_login']['post']['requestBody']['content']['application/json'] ->; - export type GetStarterModelsResponse = paths['/api/v2/models/starter_models']['get']['responses']['200']['content']['application/json']; @@ -275,22 +266,6 @@ export const modelsApi = api.injectEndpoints({ query: () => buildModelsUrl('starter_models'), providesTags: [{ type: 'ModelConfig', id: LIST_TAG }], }), - getHFTokenStatus: build.query({ - query: () => buildModelsUrl('hf_login'), - providesTags: ['HFTokenStatus'], - }), - setHFToken: build.mutation({ - query: (body) => ({ url: buildModelsUrl('hf_login'), method: 'POST', body }), - invalidatesTags: ['HFTokenStatus'], - onQueryStarted: async (_, { dispatch, queryFulfilled }) => { - try { - const { data } = await queryFulfilled; - dispatch(modelsApi.util.updateQueryData('getHFTokenStatus', undefined, () => data)); - } catch { - // no-op - } - }, - }), }), }); @@ -310,6 +285,4 @@ export const { useCancelModelInstallMutation, usePruneCompletedModelInstallsMutation, useGetStarterModelsQuery, - useGetHFTokenStatusQuery, - useSetHFTokenMutation, } = modelsApi;