Merge pull request #33 from caranicas/beta-react-linting-pt2

Beta react linting pt2
2025-01-04 05:19:12 +01:00 · 2022-09-20 14:22:17 -04:00 · 2022-09-20 14:22:17 -04:00 · bf4d920fb4
commit bf4d920fb4
parent 6f3829fa91 d84fb244d3
28 changed files with 134 additions and 94 deletions
--- a/ui/frontend/build_src/.eslintrc.cjs
+++ b/ui/frontend/build_src/.eslintrc.cjs
@ -18,6 +18,7 @@ module.exports = {
  plugins: ["react"],

  extends: [
+    "prettier",
    "plugin:react/recommended",
    "standard-with-typescript",
    "plugin:i18next/recommended",
@ -48,27 +49,18 @@ module.exports = {
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/ban-ts-comment": "off",

-    // TS WARNINGS WE WANT
-    "@typescript-eslint/no-unused-vars": "warn",
-
-    // TS  things turned off for now
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/strict-boolean-expressions": "off",
-    "@typescript-eslint/no-floating-promises": "off",
-    "@typescript-eslint/consistent-type-assertions": "off",
+    // these are things that fight with prettier
    "@typescript-eslint/comma-dangle": "off",
+    "@typescript-eslint/space-before-function-paren": "off",
    "@typescript-eslint/quotes": "off",
    "@typescript-eslint/semi": "off",
-    "@typescript-eslint/restrict-plus-operands": "off",
    "@typescript-eslint/brace-style": "off",
-    "@typescript-eslint/prefer-ts-expect-error": "off",
    "@typescript-eslint/indent": "off",
    "@typescript-eslint/member-delimiter-style": "off",
-    "@typescript-eslint/prefer-includes": "off",
-    "@typescript-eslint/consistent-type-definitions": "off",
-    "@typescript-eslint/no-unnecessary-condition": "off",
-    "@typescript-eslint/no-unnecessary-type-assertion": "off",
-    "@typescript-eslint/space-before-function-paren": "off",
+
+    // TS WARNINGS WE WANT
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-non-null-assertion": "warn",

    // i18n stuff no string literal works but turned off for now
    "i18next/no-literal-string": "off",
--- a/ui/frontend/build_src/package-lock.json
+++ b/ui/frontend/build_src/package-lock.json
@ -31,6 +31,7 @@
        "@typescript-eslint/parser": "^5.37.0",
        "@vitejs/plugin-react": "^2.0.1",
        "eslint": "^8.23.1",
+        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard-with-typescript": "^23.0.0",
        "eslint-plugin-i18n-json": "^4.0.0",
        "eslint-plugin-i18next": "^6.0.0-4",
@ -2201,6 +2202,18 @@
        "url": "https://opencollective.com/eslint"
      }
    },
+    "node_modules/eslint-config-prettier": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
+      "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
    "node_modules/eslint-config-standard": {
      "version": "17.0.0",
      "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.0.0.tgz",
@ -6392,6 +6405,13 @@
        }
      }
    },
+    "eslint-config-prettier": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
+      "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
+      "dev": true,
+      "requires": {}
+    },
    "eslint-config-standard": {
      "version": "17.0.0",
      "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.0.0.tgz",
--- a/ui/frontend/build_src/package.json
+++ b/ui/frontend/build_src/package.json
@ -33,6 +33,7 @@
    "@typescript-eslint/parser": "^5.37.0",
    "@vitejs/plugin-react": "^2.0.1",
    "eslint": "^8.23.1",
+    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-i18n-json": "^4.0.0",
    "eslint-plugin-i18next": "^6.0.0-4",
--- a/ui/frontend/build_src/src/Translation/config.ts
+++ b/ui/frontend/build_src/src/Translation/config.ts
@ -12,11 +12,21 @@ export const resources = {
    translation: ESTranslation,
  },
 } as const;
-
-i18n.use(initReactI18next).init({
-  lng: "en",
-  interpolation: {
-    escapeValue: false,
-  },
-  resources,
-});
+i18n
+  .use(initReactI18next)
+  .init({
+    lng: "en",
+    interpolation: {
+      escapeValue: false,
+    },
+    resources,
+  })
+  .then(() => {
+    console.log("i18n initialized");
+  })
+  .catch((err) => {
+    console.error("i18n initialization failed", err);
+  })
+  .finally(() => {
+    console.log("i18n initialization finished");
+  });
--- a/ui/frontend/build_src/src/api/index.ts
+++ b/ui/frontend/build_src/src/api/index.ts
@ -57,18 +57,18 @@ export const toggleBetaConfig = async (branch: string) => {
 * post a new request for an image
 */
 // TODO; put hese some place better
-export type ImageOutput = {
+export interface ImageOutput {
  data: string;
  path_abs: string | null;
  seed: number;
-};
+}

-export type ImageReturnType = {
+export interface ImageReturnType {
  output: ImageOutput[];
  request: {};
  status: string;
  session_id: string;
-};
+}

 export const MakeImageKey = "MakeImage";
 export const doMakeImage = async (reqBody: ImageRequest) => {
--- a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
+++ b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
@ -99,7 +99,13 @@ export default function DrawImage({
    }
  };

-  const _drawCursor = (x, y, brushSize, brushShape, brushColor) => {
+  const _drawCursor = (
+    x: number,
+    y: number,
+    brushSize: number,
+    brushShape: string,
+    brushColor: string
+  ) => {
    const canvas = cursorRef.current;
    if (canvas != null) {
      const ctx = canvas.getContext("2d");
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
@ -1,6 +1,6 @@
 import { style, globalStyle } from "@vanilla-extract/css";

-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../styles/theme/index.css.ts";

 // import { PanelBox } from "../../../../styles/shared.css.ts";
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
@ -48,7 +48,7 @@ export default function ImprovementSettings() {
  // should probably be a store selector
  useEffect(() => {
    // if either are true we arent disabled
-    if (isUsingFaceCorrection || useUpscale) {
+    if (isUsingFaceCorrection || useUpscale != "") {
      setIsFilteringDisabled(false);
    } else {
      setIsFilteringDisabled(true);
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
@ -124,7 +124,7 @@ export default function PropertySettings() {
            <span>{guidanceScale}</span>
          </div>

-          {initImage && (
+          {void 0 !== initImage && (
            <div className={SettingItem}>
              <label>
                {t("settings.prompt-str")}{" "}
@ -152,7 +152,7 @@ export default function PropertySettings() {
              >
                {IMAGE_DIMENSIONS.map((dimension) => (
                  <option
-                    key={"width-option_" + dimension.value}
+                    key={`width-option_${dimension.value}`}
                    value={dimension.value}
                  >
                    {dimension.label}
@ -169,7 +169,7 @@ export default function PropertySettings() {
              >
                {IMAGE_DIMENSIONS.map((dimension) => (
                  <option
-                    key={"height-option_" + dimension.value}
+                    key={`height-option_${dimension.value}`}
                    value={dimension.value}
                  >
                    {dimension.label}
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts
@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";

-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../../styles/theme/index.css.ts";

 export const MakeButtonStyle = style({
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
@ -34,7 +34,7 @@ export default function SeedImage(_props: any) {
    // @ts-expect-error
    const file = event.target.files[0];

-    if (file) {
+    if (void 0 !== file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        if (e.target != null) {
@ -74,7 +74,7 @@ export default function SeedImage(_props: any) {
      </div>

      <div className={ImageFixer}>
-        {initImage && (
+        {void 0 !== initImage && (
          <>
            <div>
              <img src={initImage} width="100" height="100" />
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts
@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";

-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../../styles/theme/index.css.ts";

 export const ImageInputDisplay = style({
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts
@ -2,7 +2,7 @@ import create from "zustand";
 import produce from "immer";
 import { persist } from "zustand/middleware";

-export type ImageCreationUIOptions = {
+export interface ImageCreationUIOptions {
  isOpenAdvancedSettings: boolean;
  isOpenAdvImprovementSettings: boolean;
  isOpenAdvPropertySettings: boolean;
@ -20,10 +20,10 @@ export type ImageCreationUIOptions = {

  toggleImageModifier: () => void;
  // addImageModifier: (modifier: string) => void;
-};
+}

 export const useCreateUI = create<ImageCreationUIOptions>(
-  //@ts-ignore
+  //@ts-expect-error
  persist(
    (set, get) => ({
      isOpenAdvancedSettings: false,
@ -36,7 +36,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(

      toggleAdvancedSettings: () => {
        set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
            state.isOpenAdvancedSettings = !state.isOpenAdvancedSettings;
          })
        );
@ -44,7 +44,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(

      toggleAdvImprovementSettings: () => {
        set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
            state.isOpenAdvImprovementSettings =
              !state.isOpenAdvImprovementSettings;
          })
@ -53,7 +53,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(

      toggleAdvPropertySettings: () => {
        set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
            state.isOpenAdvPropertySettings = !state.isOpenAdvPropertySettings;
          })
        );
@ -61,7 +61,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(

      toggleAdvWorkflowSettings: () => {
        set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
            state.isOpenAdvWorkflowSettings = !state.isOpenAdvWorkflowSettings;
          })
        );
@ -69,7 +69,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(

      toggleAdvGPUSettings: () => {
        set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
            state.isOpenAdvGPUSettings = !state.isOpenAdvGPUSettings;
          })
        );
@ -77,7 +77,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(

      toggleImageModifier: () => {
        set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
            state.isOpenImageModifier = !state.isOpenImageModifier;
          })
        );
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts
@ -1,5 +1,5 @@
 import { style, globalStyle } from "@vanilla-extract/css";
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../styles/theme/index.css.ts";

 export const ImagerModifierGroups = style({
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
@ -78,14 +78,13 @@ export default function ImageModifers() {
        <h3>Image Modifiers (art styles, tags, ect)</h3>
      </button>

-      {/* @ts-ignore */}
      {imageModifierIsOpen && (
        <ul className={ImagerModifierGroups}>
          {allModifiers.map((item, index) => {
            return (
-              // @ts-ignore
+              // @ts-expect-error
              <li key={item[0]}>
-                {/* @ts-ignore */}
+                {/* @ts-expect-error */}
                <ModifierGrouping title={item[0]} tags={item[1]} />
              </li>
            );
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts
@ -1,6 +1,6 @@
 import { style, globalStyle } from "@vanilla-extract/css";

-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../styles/theme/index.css.ts";

 export const completedImagesMain = style({
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx
@ -2,10 +2,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React from "react";
 import GeneratedImage from "../../../molecules/generatedImage";
-import {
-  ImageRequest,
-  useImageCreate,
-} from "../../../../stores/imageCreateStore";
+import { useImageCreate } from "../../../../stores/imageCreateStore";

 import { CompletedImagesType } from "../index";

@ -32,7 +29,7 @@ export default function CurrentDisplay({
      use_upscale,
      width,
      height,
-    } = info! as ImageRequest;
+    } = info!;

    // Most important information is the prompt
    let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_");
@ -40,10 +37,10 @@ export default function CurrentDisplay({
    // name and the top level metadata
    let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`;
    // Add the face correction and upscale
-    if (use_face_correction) {
+    if (typeof use_face_correction == "string") {
      fileName += `_FaceCorrection-${use_face_correction}`;
    }
-    if (use_upscale) {
+    if (typeof use_upscale == "string") {
      fileName += `_Upscale-${use_upscale}`;
    }
    // Add the width and height
@ -70,7 +67,8 @@ export default function CurrentDisplay({
      {isLoading ? (
        <h4 className="loading">Loading...</h4>
      ) : (
-        (image != null && (
+        (image !== null && (
+          // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
          <div>
            <p> {info?.prompt}</p>
            <GeneratedImage imageData={data} metadata={info}></GeneratedImage>
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
@ -80,7 +80,8 @@ export default function DisplayPanel() {
      // check to make sure that the image was created
      if (data.status === "succeeded") {
        if (isSoundEnabled) {
-          dingRef.current?.play();
+          // not awaiting the promise or error handling
+          void dingRef.current?.play();
        }
        removeFirstInQueue();
      }
@ -123,7 +124,13 @@ export default function DisplayPanel() {
        .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items

      setCompletedImages(temp);
-      setCurrentImage(temp[0] || null);
+
+      // could move this to the useEffect for completedImages
+      if (temp.length > 0) {
+        setCurrentImage(temp[0]);
+      } else {
+        setCurrentImage(null);
+      }
    } else {
      setCompletedImages([]);
      setCurrentImage(null);
--- a/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts
@ -1,6 +1,6 @@
 import { style, globalStyle } from "@vanilla-extract/css";

-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../styles/theme/index.css.ts";

 export const FooterDisplayMain = style({
--- a/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
@ -2,7 +2,7 @@ import React from "react";

 import {
  FooterDisplayMain,
-  CoffeeButton, // @ts-ignore
+  CoffeeButton, // @ts-expect-error
 } from "./footerDisplay.css.ts";

 import { API_URL } from "../../../api";
--- a/ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts
@ -1,5 +1,5 @@
 import { style, globalStyle } from "@vanilla-extract/css";
-//@ts-ignore
+//@ts-expect-error
 import { vars } from "../../../styles/theme/index.css.ts";

 export const HeaderDisplayMain = style({
--- a/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css.ts
@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";

-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../../../styles/theme/index.css.ts";

 export const StartingStatus = style({
--- a/ui/frontend/build_src/src/pages/Home/home.css.ts
+++ b/ui/frontend/build_src/src/pages/Home/home.css.ts
@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "../../styles/theme/index.css.ts";

 export const AppLayout = style({
--- a/ui/frontend/build_src/src/stores/imageCreateStore.ts
+++ b/ui/frontend/build_src/src/stores/imageCreateStore.ts
@ -4,13 +4,13 @@ import { devtools } from "zustand/middleware";

 import { useRandomSeed } from "../utils";

-export type ImageCreationUiOptions = {
+export interface ImageCreationUiOptions {
  isUseRandomSeed: boolean;
  isUseAutoSave: boolean;
  isSoundEnabled: boolean;
-};
+}

-export type ImageRequest = {
+export interface ImageRequest {
  prompt: string;
  seed: number;
  num_outputs: number;
@ -48,7 +48,7 @@ export type ImageRequest = {
    | 896
    | 960
    | 1024;
-  // allow_nsfw: boolean;
+  // allow_nsfw: boolean
  turbo: boolean;
  use_cpu: boolean;
  use_full_precision: boolean;
@ -58,7 +58,7 @@ export type ImageRequest = {
  show_only_filtered_image: boolean;
  init_image: undefined | string;
  prompt_strength: undefined | number;
-};
+}

 type ModifiersList = string[];
 type ModifiersOptions = string | ModifiersList[];
@ -84,7 +84,7 @@ interface ImageCreateState {

  uiOptions: ImageCreationUiOptions;
  toggleUseUpscaling: () => void;
-  // isUsingUpscaling: () => boolean;
+  // isUsingUpscaling: () => boolean
  toggleUseFaceCorrection: () => void;
  isUsingFaceCorrection: () => boolean;
  isUsingUpscaling: () => boolean;
@ -99,7 +99,7 @@ interface ImageCreateState {

 // devtools breaks TS
 export const useImageCreate = create<ImageCreateState>(
-  // @ts-ignore
+  // @ts-expect-error
  devtools((set, get) => ({
    parallelCount: 1,

@ -120,7 +120,8 @@ export const useImageCreate = create<ImageCreateState>(
      use_face_correction: "GFPGANv1.3",
      use_upscale: "RealESRGAN_x4plus",
      show_only_filtered_image: true,
-    } as ImageRequest,
+      init_image: undefined,
+    },

    // selected tags
    tags: [] as string[],
@ -178,7 +179,7 @@ export const useImageCreate = create<ImageCreateState>(
    },

    hasTag: (tag: string) => {
-      return get().tags.indexOf(tag) > -1;
+      return get().tags.includes(tag);
    },

    selectedTags: () => {
@ -256,15 +257,16 @@ export const useImageCreate = create<ImageCreateState>(

    toggleUseRandomSeed: () => {
      set(
-        produce((state) => {
+        produce((state: ImageCreateState) => {
          state.uiOptions.isUseRandomSeed = !state.uiOptions.isUseRandomSeed;
          state.requestOptions.seed = state.uiOptions.isUseRandomSeed
            ? useRandomSeed()
            : state.requestOptions.seed;
-          localStorage.setItem(
-            "ui:isUseRandomSeed",
-            state.uiOptions.isUseRandomSeed
-          );
+
+          // localStorage.setItem(
+          //   "ui:isUseRandomSeed",
+          //   state.uiOptions.isUseRandomSeed
+          // );
        })
      );
    },
@ -277,12 +279,13 @@ export const useImageCreate = create<ImageCreateState>(
      //isUseAutoSave
      //save_to_disk_path
      set(
-        produce((state) => {
+        produce((state: ImageCreateState) => {
          state.uiOptions.isUseAutoSave = !state.uiOptions.isUseAutoSave;
-          localStorage.setItem(
-            "ui:isUseAutoSave",
-            state.uiOptions.isUseAutoSave
-          );
+
+          // localStorage.setItem(
+          //   "ui:isUseAutoSave",
+          //   state.uiOptions.isUseAutoSave
+          // );
        })
      );
    },
@ -293,7 +296,7 @@ export const useImageCreate = create<ImageCreateState>(

    toggleSoundEnabled: () => {
      set(
-        produce((state) => {
+        produce((state: ImageCreateState) => {
          state.uiOptions.isSoundEnabled = !state.uiOptions.isSoundEnabled;
          //localStorage.setItem('ui:isSoundEnabled', state.uiOptions.isSoundEnabled);
        })
@ -306,7 +309,7 @@ export const useImageCreate = create<ImageCreateState>(

    toggleInpainting: () => {
      set(
-        produce((state) => {
+        produce((state: ImageCreateState) => {
          state.isInpainting = !state.isInpainting;
        })
      );
--- a/ui/frontend/build_src/src/stores/imageQueueStore.ts
+++ b/ui/frontend/build_src/src/stores/imageQueueStore.ts
@ -9,7 +9,7 @@ interface ImageQueueState {
  completedImageIds: string[];
  addNewImage: (id: string, imgRec: ImageRequest) => void;
  hasQueuedImages: () => boolean;
-  firstInQueue: () => ImageRequest | [];
+  firstInQueue: () => ImageRequest | {};
  removeFirstInQueue: () => void;
  clearCachedIds: () => void;
 }
@ -33,8 +33,11 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
  hasQueuedImages: () => {
    return get().images.length > 0;
  },
+
  firstInQueue: () => {
-    return (get().images[0] as ImageRequest) || [];
+    let first: ImageRequest | {} = get().images[0];
+    first = void 0 !== first ? first : {};
+    return first;
  },

  removeFirstInQueue: () => {
@ -45,6 +48,7 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
      })
    );
  },
+
  clearCachedIds: () => {
    set(
      produce((state) => {
--- a/ui/frontend/build_src/src/styles/index.css.ts
+++ b/ui/frontend/build_src/src/styles/index.css.ts
@ -1,5 +1,5 @@
 import { globalStyle } from "@vanilla-extract/css";
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "./theme/index.css.ts";

 // baisc body style
--- a/ui/frontend/build_src/src/styles/shared.css.ts
+++ b/ui/frontend/build_src/src/styles/shared.css.ts
@ -1,5 +1,5 @@
 import { style, globalStyle } from "@vanilla-extract/css";
-// @ts-ignore
+// @ts-expect-error
 import { vars } from "./theme/index.css.ts";

 export const PanelBox = style({
--- a/ui/frontend/dist/index.js
+++ b/ui/frontend/dist/index.js