refactor(ui): handle hf vs civitai/other url model install errors separately

Previously, we didn't differentiate between model install errors for different types of model install sources, resulting in a buggy UX:
- If a HF model install failed, but it was a HF URL install and not a repo id install, the link to the HF model page was incorrect.
- If a non-HF URL install (e.g. civitai) failed, we treated it as a HF URL install. In this case, if the user's HF token was invalid or unset, we directed the user to set it. If the HF token was valid, we displayed an empty red toast. If it's not a HF URL install, then of course neither of these are correct.

Also, the logic for handling the toasts was a bit complicated.

This change does a few things:
- Consolidate the model install error toasts into one place - the socket.io event handler for the model install error event. There is no more global state for the toasts and there are no hooks managing them.
- Handling the different cases for errors, including all combinations of HF/non-HF and unauthorized/forbidden/unknown.

Author: psychedelicious

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

@@ -743,13 +743,17 @@
         "hfTokenHelperText": "A HF token is required to use some models. Click here to create or get your token.",
         "hfTokenInvalid": "Invalid or Missing HF Token",
         "hfForbidden": "You do not have access to this HF model",
-        "hfForbiddenErrorMessage": "We recommend visiting the repo page on HuggingFace.com. The owner may require acceptance of terms in order to download.",
+        "hfForbiddenErrorMessage": "We recommend visiting the repo. The owner may require acceptance of terms in order to download.",
+        "urlForbidden": "You do not have access to this model",
+        "urlForbiddenErrorMessage": "You may need to request permission from the site that is distributing the model.",
         "hfTokenInvalidErrorMessage": "Invalid or missing HuggingFace token.",
         "hfTokenRequired": "You are trying to download a model that requires a valid HuggingFace Token.",
         "hfTokenInvalidErrorMessage2": "Update it in the ",
         "hfTokenUnableToVerify": "Unable to Verify HF Token",
         "hfTokenUnableToVerifyErrorMessage": "Unable to verify HuggingFace token. This is likely due to a network error. Please try again later.",
         "hfTokenSaved": "HF Token Saved",
+        "urlUnauthorizedErrorMessage": "You may need to provide an API key to access this model.",
+        "urlUnauthorizedErrorMessage2": "Learn how here.",
         "imageEncoderModelId": "Image Encoder Model ID",
         "includesNModels": "Includes {{n}} models and their dependencies",
         "installQueue": "Install Queue",

invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFForbiddenToast.tsx

@@ -10,12 +10,12 @@ import {
   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';
+import { UNAUTHORIZED_TOAST_ID } from 'services/events/onModelInstallError';
 
 export const HFToken = () => {
   const { t } = useTranslation();
@@ -34,11 +34,11 @@ export const HFToken = () => {
         if (res === 'valid') {
           setToken('');
           toast({
+            id: UNAUTHORIZED_TOAST_ID,
             title: t('modelManager.hfTokenSaved'),
             status: 'success',
             duration: 3000,
           });
-          $isHFLoginToastOpen.set(false);
         }
       });
   }, [t, toast, token, trigger]);

invokeai/frontend/web/src/features/modelManagerV2/hooks/useHFLoginToast.tsx

@@ -1,7 +1,5 @@
 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';
@@ -18,9 +16,6 @@ export const ModelManager = memo(() => {
   }, [dispatch]);
   const selectedModelKey = useAppSelector(selectSelectedModelKey);
 
-  useHFLoginToast();
-  useHFForbiddenToast();
-
   return (
     <Flex flexDir="column" layerStyle="first" p={4} gap={4} borderRadius="base" w="50%" h="full">
       <Flex w="full" gap={4} justifyContent="space-between" alignItems="center">