feat(ui): api layer refactor

*migrate from `openapi-typescript-codegen` to `openapi-typescript` and `openapi-fetch`*

`openapi-typescript-codegen` is not very actively maintained - it's been over a year since the last update.
`openapi-typescript` and `openapi-fetch` are part of the actively maintained repo. key differences:

- provides a `fetch` client instead of `axios`, which means we need to be a bit more verbose with typing thunks
- fetch client is created at runtime and has a very nice typescript DX
- generates a single file with all types in it, from which we then extract individual types. i don't like how verbose this is, but i do like how it is more explicit.
- removed npm api generation scripts - now we have a single `typegen` script

overall i have more confidence in this new library.

*use nanostores for api base and token*

very simple reactive store for api base url and token. this was suggested in the `openapi-fetch` docs and i quite like the strategy.

*organise rtk-query api*

split out each endpoint (models, images, boards, boardImages) into their own api extensions. tidy!

invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useState } from 'react';
-import { ImageDTO } from 'services/api';
+import { ImageDTO } from 'services/api/types';
 import {
   ControlNetConfig,
   controlNetImageChanged,
@@ -14,7 +14,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { IAIImageLoadingFallback } from 'common/components/IAIImageFallback';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { FaUndo } from 'react-icons/fa';
-import { useGetImageDTOQuery } from 'services/apiSlice';
+import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import { skipToken } from '@reduxjs/toolkit/dist/query';
 
 const selector = createSelector(
@@ -45,14 +45,14 @@ const ControlNetImagePreview = (props: Props) => {
   const [isMouseOverImage, setIsMouseOverImage] = useState(false);
 
   const {
-    data: controlImage,
+    currentData: controlImage,
     isLoading: isLoadingControlImage,
     isError: isErrorControlImage,
     isSuccess: isSuccessControlImage,
   } = useGetImageDTOQuery(controlImageName ?? skipToken);
 
   const {
-    data: processedControlImage,
+    currentData: processedControlImage,
     isLoading: isLoadingProcessedControlImage,
     isError: isErrorProcessedControlImage,
     isSuccess: isSuccessProcessedControlImage,

invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts

@@ -1,7 +1,7 @@
 import { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { ImageDTO } from 'services/api';
+import { ImageDTO } from 'services/api/types';
 import {
   ControlNetProcessorType,
   RequiredCannyImageProcessorInvocation,
@@ -13,9 +13,9 @@ import {
   ControlNetModelName,
 } from './constants';
 import { controlNetImageProcessed } from './actions';
-import { imageDeleted, imageUrlsReceived } from 'services/thunks/image';
+import { imageDeleted, imageUrlsReceived } from 'services/api/thunks/image';
 import { forEach } from 'lodash-es';
-import { isAnySessionRejected } from 'services/thunks/session';
+import { isAnySessionRejected } from 'services/api/thunks/session';
 import { appSocketInvocationError } from 'services/events/actions';
 
 export const initialControlNet: Omit<ControlNetConfig, 'controlNetId'> = {
@@ -258,13 +258,13 @@ export const controlNetSlice = createSlice({
 
     builder.addCase(imageDeleted.pending, (state, action) => {
       // Preemptively remove the image from the gallery
-      const { imageName } = action.meta.arg;
+      const { image_name } = action.meta.arg;
       forEach(state.controlNets, (c) => {
-        if (c.controlImage === imageName) {
+        if (c.controlImage === image_name) {
           c.controlImage = null;
           c.processedControlImage = null;
         }
-        if (c.processedControlImage === imageName) {
+        if (c.processedControlImage === image_name) {
           c.processedControlImage = null;
         }
       });

invokeai/frontend/web/src/features/controlNet/store/types.ts

@@ -12,7 +12,7 @@ import {
   OpenposeImageProcessorInvocation,
   PidiImageProcessorInvocation,
   ZoeDepthImageProcessorInvocation,
-} from 'services/api';
+} from 'services/api/types';
 import { O } from 'ts-toolbelt';
 
 /**