fix all the linting errors i can

ui/frontend/build_src/.eslintrc.cjs

@@ -54,20 +54,14 @@ module.exports = {
     "@typescript-eslint/space-before-function-paren": "off",
     "@typescript-eslint/quotes": "off",
     "@typescript-eslint/semi": "off",
+    "@typescript-eslint/brace-style": "off",
+    "@typescript-eslint/indent": "off",
+    "@typescript-eslint/member-delimiter-style": "off",
 
     // TS WARNINGS WE WANT
     "@typescript-eslint/no-unused-vars": "warn",
     "@typescript-eslint/no-non-null-assertion": "warn",
 
-    // TS  things turned off for now
-    "@typescript-eslint/consistent-type-assertions": "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",
-
     // i18n stuff no string literal works but turned off for now
     "i18next/no-literal-string": "off",
     // still need to figure out how to get this to work

ui/frontend/build_src/src/Translation/config.ts

@@ -12,16 +12,21 @@ export const resources = {
     translation: ESTranslation,
   },
 } as const;
-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");
-});
+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");
+  });

ui/frontend/build_src/src/api/index.ts

@@ -61,14 +61,14 @@ export interface ImageOutput {
   data: string;
   path_abs: string | null;
   seed: number;
-};
+}
 
 export interface ImageReturnType {
   output: ImageOutput[];
   request: {};
   status: string;
   session_id: string;
-};
+}
 
 export const MakeImageKey = "MakeImage";
 export const doMakeImage = async (reqBody: ImageRequest) => {
@@ -82,4 +82,4 @@ export const doMakeImage = async (reqBody: ImageRequest) => {
 
   const data = await res.json();
   return data;
-};
+};

ui/frontend/build_src/src/components/molecules/drawImage/index.tsx

@@ -8,12 +8,12 @@ import {
 // https://github.com/embiem/react-canvas-draw
 
 interface DrawImageProps {
-  imageData: string
-  brushSize: string
+  imageData: string;
+  brushSize: string;
 
-  brushShape: string
-  brushColor: string
-  isErasing: boolean
+  brushShape: string;
+  brushColor: string;
+  isErasing: boolean;
 }
 
 export default function DrawImage({
@@ -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");

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";

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);

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx

@@ -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}

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({

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({

ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts

@@ -3,27 +3,27 @@ import produce from "immer";
 import { persist } from "zustand/middleware";
 
 export interface ImageCreationUIOptions {
-  isOpenAdvancedSettings: boolean
-  isOpenAdvImprovementSettings: boolean
-  isOpenAdvPropertySettings: boolean
-  isOpenAdvWorkflowSettings: boolean
-  isOpenAdvGPUSettings: boolean
+  isOpenAdvancedSettings: boolean;
+  isOpenAdvImprovementSettings: boolean;
+  isOpenAdvPropertySettings: boolean;
+  isOpenAdvWorkflowSettings: boolean;
+  isOpenAdvGPUSettings: boolean;
 
-  isOpenImageModifier: boolean
-  imageMofidiersMap: object
+  isOpenImageModifier: boolean;
+  imageMofidiersMap: object;
 
-  toggleAdvancedSettings: () => void
-  toggleAdvImprovementSettings: () => void
-  toggleAdvPropertySettings: () => void
-  toggleAdvWorkflowSettings: () => void
-  toggleAdvGPUSettings: () => void
+  toggleAdvancedSettings: () => void;
+  toggleAdvImprovementSettings: () => void;
+  toggleAdvPropertySettings: () => void;
+  toggleAdvWorkflowSettings: () => void;
+  toggleAdvGPUSettings: () => void;
 
-  toggleImageModifier: () => void
+  toggleImageModifier: () => void;
   // addImageModifier: (modifier: string) => void;
-};
+}
 
 export const useCreateUI = create<ImageCreationUIOptions>(
-  //@ts-ignore
+  //@ts-expect-error
   persist(
     (set, get) => ({
       isOpenAdvancedSettings: false,
@@ -37,7 +37,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(
       toggleAdvancedSettings: () => {
         set(
           produce((state: ImageCreationUIOptions) => {
-            state.isOpenAdvancedSettings = !(state.isOpenAdvancedSettings);
+            state.isOpenAdvancedSettings = !state.isOpenAdvancedSettings;
           })
         );
       },

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({

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx

@@ -16,7 +16,7 @@ import { useCreateUI } from "../creationPanelUIStore";
 import ModifierTag from "../../../atoms/modifierTag";
 
 interface ModifierListProps {
-  tags: string[]
+  tags: string[];
 }
 
 function ModifierList({ tags }: ModifierListProps) {
@@ -32,8 +32,8 @@ function ModifierList({ tags }: ModifierListProps) {
 }
 
 interface ModifierGroupingProps {
-  title: string
-  tags: string[]
+  title: string;
+  tags: string[];
 }
 
 function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
@@ -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>
             );

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({

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";
 

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({

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";

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({

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({

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({

ui/frontend/build_src/src/stores/imageCreateStore.ts

@@ -5,101 +5,101 @@ import { devtools } from "zustand/middleware";
 import { useRandomSeed } from "../utils";
 
 export interface ImageCreationUiOptions {
-  isUseRandomSeed: boolean
-  isUseAutoSave: boolean
-  isSoundEnabled: boolean
-};
+  isUseRandomSeed: boolean;
+  isUseAutoSave: boolean;
+  isSoundEnabled: boolean;
+}
 
 export interface ImageRequest {
-  prompt: string
-  seed: number
-  num_outputs: number
-  num_inference_steps: number
-  guidance_scale: number
+  prompt: string;
+  seed: number;
+  num_outputs: number;
+  num_inference_steps: number;
+  guidance_scale: number;
   width:
-  | 128
-  | 192
-  | 256
-  | 320
-  | 384
-  | 448
-  | 512
-  | 576
-  | 640
-  | 704
-  | 768
-  | 832
-  | 896
-  | 960
-  | 1024
+    | 128
+    | 192
+    | 256
+    | 320
+    | 384
+    | 448
+    | 512
+    | 576
+    | 640
+    | 704
+    | 768
+    | 832
+    | 896
+    | 960
+    | 1024;
   height:
-  | 128
-  | 192
-  | 256
-  | 320
-  | 384
-  | 448
-  | 512
-  | 576
-  | 640
-  | 704
-  | 768
-  | 832
-  | 896
-  | 960
-  | 1024
+    | 128
+    | 192
+    | 256
+    | 320
+    | 384
+    | 448
+    | 512
+    | 576
+    | 640
+    | 704
+    | 768
+    | 832
+    | 896
+    | 960
+    | 1024;
   // allow_nsfw: boolean
-  turbo: boolean
-  use_cpu: boolean
-  use_full_precision: boolean
-  save_to_disk_path: null | string
-  use_face_correction: null | "GFPGANv1.3"
-  use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B" | ""
-  show_only_filtered_image: boolean
-  init_image: undefined | string
-  prompt_strength: undefined | number
-};
+  turbo: boolean;
+  use_cpu: boolean;
+  use_full_precision: boolean;
+  save_to_disk_path: null | string;
+  use_face_correction: null | "GFPGANv1.3";
+  use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B" | "";
+  show_only_filtered_image: boolean;
+  init_image: undefined | string;
+  prompt_strength: undefined | number;
+}
 
 type ModifiersList = string[];
 type ModifiersOptions = string | ModifiersList[];
 type ModifiersOptionList = ModifiersOptions[];
 
 interface ImageCreateState {
-  parallelCount: number
-  requestOptions: ImageRequest
-  allModifiers: ModifiersOptionList
-  tags: string[]
-  isInpainting: boolean
+  parallelCount: number;
+  requestOptions: ImageRequest;
+  allModifiers: ModifiersOptionList;
+  tags: string[];
+  isInpainting: boolean;
 
-  setParallelCount: (count: number) => void
-  setRequestOptions: (key: keyof ImageRequest, value: any) => void
-  getValueForRequestKey: (key: keyof ImageRequest) => any
-  setAllModifiers: (modifiers: ModifiersOptionList) => void
+  setParallelCount: (count: number) => void;
+  setRequestOptions: (key: keyof ImageRequest, value: any) => void;
+  getValueForRequestKey: (key: keyof ImageRequest) => any;
+  setAllModifiers: (modifiers: ModifiersOptionList) => void;
 
-  setModifierOptions: (key: string, value: any) => void
-  toggleTag: (tag: string) => void
-  hasTag: (tag: string) => boolean
-  selectedTags: () => string[]
-  builtRequest: () => ImageRequest
+  setModifierOptions: (key: string, value: any) => void;
+  toggleTag: (tag: string) => void;
+  hasTag: (tag: string) => boolean;
+  selectedTags: () => string[];
+  builtRequest: () => ImageRequest;
 
-  uiOptions: ImageCreationUiOptions
-  toggleUseUpscaling: () => void
+  uiOptions: ImageCreationUiOptions;
+  toggleUseUpscaling: () => void;
   // isUsingUpscaling: () => boolean
-  toggleUseFaceCorrection: () => void
-  isUsingFaceCorrection: () => boolean
-  isUsingUpscaling: () => boolean
-  toggleUseRandomSeed: () => void
-  isRandomSeed: () => boolean
-  toggleUseAutoSave: () => void
-  isUseAutoSave: () => boolean
-  toggleSoundEnabled: () => void
-  isSoundEnabled: () => boolean
-  toggleInpainting: () => void
+  toggleUseFaceCorrection: () => void;
+  isUsingFaceCorrection: () => boolean;
+  isUsingUpscaling: () => boolean;
+  toggleUseRandomSeed: () => void;
+  isRandomSeed: () => boolean;
+  toggleUseAutoSave: () => void;
+  isUseAutoSave: () => boolean;
+  toggleSoundEnabled: () => void;
+  isSoundEnabled: () => boolean;
+  toggleInpainting: () => void;
 }
 
 // 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[],
@@ -235,7 +236,7 @@ export const useImageCreate = create<ImageCreateState>(
         produce((state) => {
           const isSeting =
             typeof state.getValueForRequestKey("use_face_correction") ===
-              "string"
+            "string"
               ? null
               : "GFPGANv1.3";
           state.requestOptions.use_face_correction = isSeting;

ui/frontend/build_src/src/stores/imageQueueStore.ts

@@ -35,7 +35,7 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
   },
 
   firstInQueue: () => {
-    let first: ImageRequest | {} = get().images[0]
+    let first: ImageRequest | {} = get().images[0];
     first = void 0 !== first ? first : {};
     return first;
   },

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

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({