github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-07 10:55:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

lint

Browse Source
This commit is contained in:
Mary Hipp
2024-10-25 16:30:28 -04:00
committed by psychedelicious
parent bcb41399ca
commit 291c5a0341
8 changed files with 98 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFForbiddenToast.tsx
View File

@@ -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]);
};

4
invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFLoginToast.tsx
View File

@@ -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 = {

155
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HFToken.tsx
View File

@@ -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<HTMLInputElement>) => {
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<HTMLInputElement>) => {
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 (
<Flex borderRadius="base" w="full">
<FormControl isInvalid={Boolean(error)} orientation="vertical">
<FormLabel>{t('modelManager.hfTokenLabel')}</FormLabel>
<Flex gap={3} alignItems="center" w="full">
<Input type="password" value={token} onChange={onChange} />
<Button onClick={onClick} size="sm" isDisabled={token.trim().length === 0} isLoading={isLoading}>
{t('common.save')}
</Button>
</Flex>
<FormHelperText>
<ExternalLink label={t('modelManager.hfTokenHelperText')} href="https://huggingface.co/settings/tokens" />
</FormHelperText>
<FormErrorMessage>{error}</FormErrorMessage>
</FormControl>
</Flex>
);
};
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 (
<Flex borderRadius="base" w="full">
<FormControl isInvalid={Boolean(error)} orientation="vertical">
<FormLabel>{t('modelManager.hfTokenLabel')}</FormLabel>
<Flex gap={3} alignItems="center" w="full">
<Input type="password" value={token} onChange={onChange} />
<Button onClick={onClick} size="sm" isDisabled={token.trim().length === 0} isLoading={isLoading}>
{t('common.save')}
</Button>
</Flex>
<FormHelperText>
<ExternalLink label={t('modelManager.hfTokenHelperText')} href="https://huggingface.co/settings/tokens" />
</FormHelperText>
<FormErrorMessage>{error}</FormErrorMessage>
</FormControl>
</Flex>
);
};

8
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx
View File

@@ -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('');

6
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx
View File

@@ -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 (
<Flex flexDir="column" layerStyle="first" p={4} gap={4} borderRadius="base" w="50%" h="full">

2
invokeai/frontend/web/src/services/api/endpoints/models.ts
View File

@@ -294,7 +294,7 @@ export const {
usePruneCompletedModelInstallsMutation,
useGetStarterModelsQuery,
useGetHFTokenStatusQuery,
useSetHFTokenMutation
useSetHFTokenMutation,
} = modelsApi;
export const selectModelConfigsQuery = modelsApi.endpoints.getModelConfigs.select();

3
invokeai/frontend/web/src/services/api/types.ts
View File

@@ -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']
>;
>;

13
invokeai/frontend/web/src/services/events/setEventListeners.tsx
View File

@@ -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)) {