From 6e0f3475b44fa22ccbdd69e32e9a73a17e2b4a21 Mon Sep 17 00:00:00 2001 From: Kaspar Emanuel Date: Thu, 15 Dec 2022 01:32:59 +0000 Subject: [PATCH] Reduce frontend eslint warnings to 0 --- .github/workflows/lint-frontend.yml | 2 +- frontend/.eslintrc.cjs | 9 ++- frontend/src/app/socketio/emitters.ts | 4 +- frontend/src/app/socketio/listeners.ts | 10 ++- frontend/src/common/components/IAISlider.tsx | 4 +- .../common/components/radix-ui/IAISlider.tsx | 1 - .../common/components/radix-ui/IAITooltip.tsx | 2 +- .../common/hooks/useClickOutsideWatcher.ts | 3 +- .../src/common/util/parameterTranslation.ts | 74 +++++++++++++++++-- .../lightbox/components/ReactPanZoom.tsx | 2 +- .../UnifiedCanvasDisplayBeta.tsx | 1 - .../UnifiedCanvasToolSelect.tsx | 1 - frontend/src/global.d.ts | 6 +- 13 files changed, 95 insertions(+), 24 deletions(-) diff --git a/.github/workflows/lint-frontend.yml b/.github/workflows/lint-frontend.yml index 41c4e7a374..c2eeeb9a08 100644 --- a/.github/workflows/lint-frontend.yml +++ b/.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' diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs index ba77c4481e..11da47aa86 100644 --- a/frontend/.eslintrc.cjs +++ b/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: '_+' }], + }, }; diff --git a/frontend/src/app/socketio/emitters.ts b/frontend/src/app/socketio/emitters.ts index 8a82b01a00..36fcb0284b 100644 --- a/frontend/src/app/socketio/emitters.ts +++ b/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, any>, + store: MiddlewareAPI, 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 = { + const facetoolParameters: Record = { facetool_strength: facetoolStrength, }; diff --git a/frontend/src/app/socketio/listeners.ts b/frontend/src/app/socketio/listeners.ts index 2868bcbbb1..dff2a6f929 100644 --- a/frontend/src/app/socketio/listeners.ts +++ b/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, any> + store: MiddlewareAPI, 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()); } diff --git a/frontend/src/common/components/IAISlider.tsx b/frontend/src/common/components/IAISlider.tsx index f4fe08708c..e0c5085f25 100644 --- a/frontend/src/common/components/IAISlider.tsx +++ b/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)); }; diff --git a/frontend/src/common/components/radix-ui/IAISlider.tsx b/frontend/src/common/components/radix-ui/IAISlider.tsx index 7ad1a21df5..01332fe8f9 100644 --- a/frontend/src/common/components/radix-ui/IAISlider.tsx +++ b/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[]; diff --git a/frontend/src/common/components/radix-ui/IAITooltip.tsx b/frontend/src/common/components/radix-ui/IAITooltip.tsx index 18fd908a93..438ab17ae2 100644 --- a/frontend/src/common/components/radix-ui/IAITooltip.tsx +++ b/frontend/src/common/components/radix-ui/IAITooltip.tsx @@ -20,7 +20,7 @@ const IAITooltip = (props: IAITooltipProps) => { {e.preventDefault()}} + onPointerDownOutside={(e) => {e.preventDefault()}} className="invokeai__tooltip-content" > diff --git a/frontend/src/common/hooks/useClickOutsideWatcher.ts b/frontend/src/common/hooks/useClickOutsideWatcher.ts index 14252927fe..6e216a2d06 100644 --- a/frontend/src/common/hooks/useClickOutsideWatcher.ts +++ b/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; diff --git a/frontend/src/common/util/parameterTranslation.ts b/frontend/src/common/util/parameterTranslation.ts index eed9db2e07..cf9bb225ef 100644 --- a/frontend/src/common/util/parameterTranslation.ts +++ b/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>; + 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) diff --git a/frontend/src/features/lightbox/components/ReactPanZoom.tsx b/frontend/src/features/lightbox/components/ReactPanZoom.tsx index 608cfc8545..543fb7dd9c 100644 --- a/frontend/src/features/lightbox/components/ReactPanZoom.tsx +++ b/frontend/src/features/lightbox/components/ReactPanZoom.tsx @@ -14,7 +14,7 @@ type ReactPanZoomProps = { image: string; styleClass?: string; alt?: string; - ref?: any; + ref?: React.Ref; }; export default function ReactPanZoom({ diff --git a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx b/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx index 90edf0a556..b0c640b762 100644 --- a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx +++ b/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'; diff --git a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx b/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx index bbcfa2e65f..494693d064 100644 --- a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx +++ b/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'; diff --git a/frontend/src/global.d.ts b/frontend/src/global.d.ts index a0b48d49bb..fd4d8fd28c 100644 --- a/frontend/src/global.d.ts +++ b/frontend/src/global.d.ts @@ -15,11 +15,11 @@ declare global { */ findLast( 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; } }