cleaning up type issues

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,24 @@ module.exports = {
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/ban-ts-comment": "off",
 
-    // TS WARNINGS WE WANT
+    // these are things that fight with prettier
-    "@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",
     "@typescript-eslint/comma-dangle": "off",
+    "@typescript-eslint/space-before-function-paren": "off",
     "@typescript-eslint/quotes": "off",
     "@typescript-eslint/semi": "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",
+    //    "@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",
 
     // i18n stuff no string literal works but turned off for now
     "i18next/no-literal-string": "off",

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

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

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

@@ -12,11 +12,16 @@ 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");
+});

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

@@ -57,13 +57,13 @@ 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;
@@ -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;
+  imageData: string
-  brushSize: string;
+  brushSize: string
 
-  brushShape: string;
+  brushShape: string
-  brushColor: string;
+  brushColor: string
-  isErasing: boolean;
+  isErasing: boolean
 }
 
 export default function DrawImage({

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

@@ -124,7 +124,7 @@ export default function PropertySettings() {
             <span>{guidanceScale}</span>
           </div>
 
-          {initImage && (
+          {void 0 !== initImage && (
             <div className={SettingItem}>
               <label>
                 {t("settings.prompt-str")}{" "}

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

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

@@ -2,23 +2,23 @@ import create from "zustand";
 import produce from "immer";
 import { persist } from "zustand/middleware";
 
-export type ImageCreationUIOptions = {
+export interface ImageCreationUIOptions {
-  isOpenAdvancedSettings: boolean;
+  isOpenAdvancedSettings: boolean
-  isOpenAdvImprovementSettings: boolean;
+  isOpenAdvImprovementSettings: boolean
-  isOpenAdvPropertySettings: boolean;
+  isOpenAdvPropertySettings: boolean
-  isOpenAdvWorkflowSettings: boolean;
+  isOpenAdvWorkflowSettings: boolean
-  isOpenAdvGPUSettings: boolean;
+  isOpenAdvGPUSettings: boolean
 
-  isOpenImageModifier: boolean;
+  isOpenImageModifier: boolean
-  imageMofidiersMap: object;
+  imageMofidiersMap: object
 
-  toggleAdvancedSettings: () => void;
+  toggleAdvancedSettings: () => void
-  toggleAdvImprovementSettings: () => void;
+  toggleAdvImprovementSettings: () => void
-  toggleAdvPropertySettings: () => void;
+  toggleAdvPropertySettings: () => void
-  toggleAdvWorkflowSettings: () => void;
+  toggleAdvWorkflowSettings: () => void
-  toggleAdvGPUSettings: () => void;
+  toggleAdvGPUSettings: () => void
 
-  toggleImageModifier: () => void;
+  toggleImageModifier: () => void
   // addImageModifier: (modifier: string) => void;
 };
 
@@ -36,15 +36,15 @@ export const useCreateUI = create<ImageCreationUIOptions>(
 
       toggleAdvancedSettings: () => {
         set(
-          produce((state) => {
+          produce((state: ImageCreationUIOptions) => {
-            state.isOpenAdvancedSettings = !state.isOpenAdvancedSettings;
+            state.isOpenAdvancedSettings = !(state.isOpenAdvancedSettings);
           })
         );
       },
 
       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;
           })
         );

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;
+  title: string
-  tags: string[];
+  tags: string[]
 }
 
 function ModifierGrouping({ title, tags }: ModifierGroupingProps) {

ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx

@@ -32,7 +32,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 +40,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 +70,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>

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

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

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

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) => {