Reduce frontend eslint warnings to 0

.github/workflows/lint-frontend.yml

@@ -21,4 +21,4 @@ jobs:
       - run: 'yarn install'
       - run: 'yarn tsc'
       - run: 'yarn run madge'
-      - run: 'yarn run lint --max-warnings=22'
+      - run: 'yarn run lint --max-warnings=0'

frontend/.eslintrc.cjs

@@ -1,6 +1,13 @@
 module.exports = {
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint', 'eslint-plugin-react-hooks'],
   root: true,
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: '_+' }],
+  },
 };

frontend/src/app/socketio/emitters.ts

@@ -26,7 +26,7 @@ import type { RootState } from 'app/store';
  * i.e. those which make server requests.
  */
 const makeSocketIOEmitters = (
-  store: MiddlewareAPI<Dispatch<AnyAction>, any>,
+  store: MiddlewareAPI<Dispatch<AnyAction>, RootState>,
   socketio: Socket
 ) => {
   // We need to dispatch actions to redux and get pieces of state from the store.
@@ -114,7 +114,7 @@ const makeSocketIOEmitters = (
       const options: OptionsState = getState().options;
       const { facetoolType, facetoolStrength, codeformerFidelity } = options;
 
-      const facetoolParameters: Record<string, any> = {
+      const facetoolParameters: Record<string, unknown> = {
         facetool_strength: facetoolStrength,
       };
 

frontend/src/app/socketio/listeners.ts

@@ -40,13 +40,14 @@ import {
 } from './actions';
 import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
 import { tabMap } from 'features/tabs/tabMap';
+import type { RootState } from 'app/store';
 
 /**
  * Returns an object containing listener callbacks for socketio events.
  * TODO: This file is large, but simple. Should it be split up further?
  */
 const makeSocketIOListeners = (
-  store: MiddlewareAPI<Dispatch<AnyAction>, any>
+  store: MiddlewareAPI<Dispatch<AnyAction>, RootState>
 ) => {
   const { dispatch, getState } = store;
 
@@ -100,7 +101,7 @@ const makeSocketIOListeners = (
      */
     onGenerationResult: (data: InvokeAI.ImageResultResponse) => {
       try {
-        const state = getState();
+        const state: RootState = getState();
         const { shouldLoopback, activeTab } = state.options;
         const { boundingBox: _, generationMode, ...rest } = data;
 
@@ -325,7 +326,10 @@ const makeSocketIOListeners = (
       // remove references to image in options
       const { initialImage, maskPath } = getState().options;
 
-      if (initialImage?.url === url || initialImage === url) {
+      if (
+        initialImage === url ||
+        (initialImage as InvokeAI.Image)?.url === url
+      ) {
         dispatch(clearInitialImage());
       }
 

frontend/src/common/components/IAISlider.tsx

@@ -124,8 +124,8 @@ export default function IAISlider(props: IAIFullSliderProps) {
     onChange(clamped);
   };
 
-  const handleInputChange = (v: any) => {
-    setLocalInputValue(v);
+  const handleInputChange = (v: number | string) => {
+    setLocalInputValue(String(v));
     onChange(Number(v));
   };
 

frontend/src/common/components/radix-ui/IAISlider.tsx

@@ -1,7 +1,6 @@
 import { Tooltip } from '@chakra-ui/react';
 import * as Slider from '@radix-ui/react-slider';
 import React from 'react';
-import IAITooltip from './IAITooltip';
 
 type IAISliderProps = Slider.SliderProps & {
   value: number[];

frontend/src/common/components/radix-ui/IAITooltip.tsx

@@ -20,7 +20,7 @@ const IAITooltip = (props: IAITooltipProps) => {
         <Tooltip.Portal>
           <Tooltip.Content
             {...contentProps}
-            onPointerDownOutside={(e: any) => {e.preventDefault()}}
+            onPointerDownOutside={(e) => {e.preventDefault()}}
             className="invokeai__tooltip-content"
           >
             <Tooltip.Arrow {...arrowProps} className="invokeai__tooltip-arrow" />

frontend/src/common/hooks/useClickOutsideWatcher.ts

@@ -1,5 +1,4 @@
-import { RefObject, useEffect, useRef } from 'react';
-import { Rect } from 'react-konva';
+import { RefObject, useEffect} from 'react';
 
 const watchers: {
   ref: RefObject<HTMLElement>;

frontend/src/common/util/parameterTranslation.ts

@@ -1,14 +1,23 @@
 import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
 import { OptionsState } from 'features/options/store/optionsSlice';
 import { SystemState } from 'features/system/store/systemSlice';
+import { Vector2d } from 'konva/lib/types';
+import { Dimensions } from 'features/canvas/store/canvasTypes';
 
 import { stringToSeedWeightsArray } from './seedWeightPairs';
 import randomInt from './randomInt';
 import { InvokeTabName } from 'features/tabs/tabMap';
-import { CanvasState, isCanvasMaskLine } from 'features/canvas/store/canvasTypes';
+import {
+  CanvasState,
+  isCanvasMaskLine,
+} from 'features/canvas/store/canvasTypes';
 import generateMask from 'features/canvas/util/generateMask';
 import openBase64ImageInTab from './openBase64ImageInTab';
 import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
+import type {
+  UpscalingLevel,
+  FacetoolType,
+} from 'features/options/store/optionsSlice';
 
 export type FrontendToBackendParametersConfig = {
   generationMode: InvokeTabName;
@@ -18,13 +27,68 @@ export type FrontendToBackendParametersConfig = {
   imageToProcessUrl?: string;
 };
 
+export type BackendGenerationParameters = {
+  prompt: string;
+  iterations: number;
+  steps: number;
+  cfg_scale: number;
+  threshold: number;
+  perlin: number;
+  height: number;
+  width: number;
+  sampler_name: string;
+  seed: number;
+  progress_images: boolean;
+  progress_latents: boolean;
+  save_intermediates: number;
+  generation_mode: InvokeTabName;
+  init_mask: string;
+  init_img?: string;
+  fit?: boolean;
+  seam_size?: number;
+  seam_blur?: number;
+  seam_strength?: number;
+  seam_steps?: number;
+  tile_size?: number;
+  infill_method?: string;
+  force_outpaint?: boolean;
+  seamless?: boolean;
+  hires_fix?: boolean;
+  strength?: number;
+  invert_mask?: boolean;
+  inpaint_replace?: number;
+  bounding_box?: Vector2d & Dimensions;
+  inpaint_width?: number;
+  inpaint_height?: number;
+  with_variations?: Array<Array<number>>;
+  variation_amount?: number;
+  enable_image_debugging?: boolean;
+};
+
+export type BackendEsrGanParameters = {
+  level: UpscalingLevel;
+  strength: number;
+};
+
+export type BackendFacetoolParameters = {
+  type: FacetoolType;
+  strength: number;
+  codeformer_fidelity?: number;
+};
+
+export type BackendParameters = {
+  generationParameters: BackendGenerationParameters;
+  esrganParameters: false | BackendEsrGanParameters;
+  facetoolParameters: false | BackendFacetoolParameters;
+};
+
 /**
  * Translates/formats frontend state into parameters suitable
  * for consumption by the API.
  */
 export const frontendToBackendParameters = (
   config: FrontendToBackendParametersConfig
-): { [key: string]: any } => {
+): BackendParameters => {
   const canvasBaseLayer = getCanvasBaseLayer();
 
   const { generationMode, optionsState, canvasState, systemState } = config;
@@ -70,7 +134,7 @@ export const frontendToBackendParameters = (
     enableImageDebugging,
   } = systemState;
 
-  const generationParameters: { [k: string]: any } = {
+  const generationParameters: BackendGenerationParameters = {
     prompt,
     iterations,
     steps,
@@ -88,8 +152,8 @@ export const frontendToBackendParameters = (
     init_mask: '',
   };
 
-  let esrganParameters: false | { [k: string]: any } = false;
-  let facetoolParameters: false | { [k: string]: any } = false;
+  let esrganParameters: false | BackendEsrGanParameters = false;
+  let facetoolParameters: false | BackendFacetoolParameters = false;
 
   generationParameters.seed = shouldRandomizeSeed
     ? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)

frontend/src/features/lightbox/components/ReactPanZoom.tsx

@@ -14,7 +14,7 @@ type ReactPanZoomProps = {
   image: string;
   styleClass?: string;
   alt?: string;
-  ref?: any;
+  ref?: React.Ref<HTMLImageElement>;
 };
 
 export default function ReactPanZoom({

frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx

@@ -6,7 +6,6 @@ import { useLayoutEffect } from 'react';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
 import IAICanvas from 'features/canvas/components/IAICanvas';
-import IAICanvasOutpaintingControls from 'features/canvas/components/IAICanvasToolbar/IAICanvasToolbar';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { Flex } from '@chakra-ui/react';
 import UnifiedCanvasToolbarBeta from './UnifiedCanvasToolbarBeta';

frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx

@@ -3,7 +3,6 @@ import { createSelector } from '@reduxjs/toolkit';
 import {
   addEraseRect,
   addFillRect,
-  setBrushColor,
   setTool,
 } from 'features/canvas/store/canvasSlice';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';

frontend/src/global.d.ts

@@ -15,11 +15,11 @@ declare global {
      */
     findLast<S extends T>(
       predicate: (this: void, value: T, index: number, obj: T[]) => value is S,
-      thisArg?: any
+      thisArg?: unknown
     ): S | undefined;
     findLast(
       predicate: (value: T, index: number, obj: T[]) => unknown,
-      thisArg?: any
+      thisArg?: unknown
     ): T | undefined;
 
     /**
@@ -33,7 +33,7 @@ declare global {
      */
     findLastIndex(
       predicate: (value: T, index: number, obj: T[]) => unknown,
-      thisArg?: any
+      thisArg?: unknown
     ): number;
   }
 }