feat(ui,api): support for HF tokens in UI, handle Unauthorized and Forbidden errors

invokeai/frontend/web/src/services/api/endpoints/models.ts

@@ -3,7 +3,7 @@ import { createEntityAdapter } from '@reduxjs/toolkit';
 import { getSelectorsOptions } from 'app/store/createMemoizedSelector';
 import queryString from 'query-string';
 import type { operations, paths } from 'services/api/schema';
-import type { AnyModelConfig } from 'services/api/types';
+import type { AnyModelConfig, GetHFTokenStatusResponse, SetHFTokenArg, SetHFTokenResponse } from 'services/api/types';
 
 import type { ApiTagDescription } from '..';
 import { api, buildV2Url, LIST_TAG } from '..';
@@ -259,6 +259,22 @@ export const modelsApi = api.injectEndpoints({
       query: () => buildModelsUrl('starter_models'),
       providesTags: [{ type: 'ModelConfig', id: LIST_TAG }],
     }),
+    getHFTokenStatus: build.query<GetHFTokenStatusResponse, void>({
+      query: () => buildModelsUrl('hf_login'),
+      providesTags: ['HFTokenStatus'],
+    }),
+    setHFToken: build.mutation<SetHFTokenResponse, SetHFTokenArg>({
+      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
+        }
+      },
+    }),
   }),
 });
 
@@ -277,6 +293,8 @@ export const {
   useCancelModelInstallMutation,
   usePruneCompletedModelInstallsMutation,
   useGetStarterModelsQuery,
+  useGetHFTokenStatusQuery,
+  useSetHFTokenMutation
 } = modelsApi;
 
 export const selectModelConfigsQuery = modelsApi.endpoints.getModelConfigs.select();

invokeai/frontend/web/src/services/api/schema.ts

@@ -344,6 +344,24 @@ export type paths = {
         patch?: never;
         trace?: never;
     };
+    "/api/v2/models/hf_login": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get Hf Login Status */
+        get: operations["get_hf_login_status"];
+        put?: never;
+        /** Do Hf Login */
+        post: operations["do_hf_login"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/v1/download_queue/": {
         parameters: {
             query?: never;
@@ -2157,6 +2175,14 @@ export type components = {
              */
             image_names: string[];
         };
+        /** Body_do_hf_login */
+        Body_do_hf_login: {
+            /**
+             * Token
+             * @description Hugging Face token to use for login
+             */
+            token: string;
+        };
         /** Body_download */
         Body_download: {
             /**
@@ -7322,6 +7348,11 @@ export type components = {
              */
             type: "hf";
         };
+        /**
+         * HFTokenStatus
+         * @enum {string}
+         */
+        HFTokenStatus: "valid" | "invalid" | "unknown";
         /** HTTPValidationError */
         HTTPValidationError: {
             /** Detail */
@@ -18274,6 +18305,59 @@ export interface operations {
             };
         };
     };
+    get_hf_login_status: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HFTokenStatus"];
+                };
+            };
+        };
+    };
+    do_hf_login: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["Body_do_hf_login"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HFTokenStatus"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
     list_downloads: {
         parameters: {
             query?: never;

invokeai/frontend/web/src/services/api/types.ts

@@ -244,3 +244,13 @@ 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<
+  paths['/api/v2/models/hf_login']['post']['responses']['200']['content']['application/json']
+>;
+export type SetHFTokenArg = NonNullable<
+  paths['/api/v2/models/hf_login']['post']['requestBody']['content']['application/json']
+>;