fix some linting issues

ui/frontend/build_src/.eslintrc.cjs

@@ -9,40 +9,50 @@ module.exports = {
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
     tsconfigRootDir: __dirname,
   },
+
   plugins: ["react"],
+
   extends: [
     "plugin:react/recommended",
     "standard-with-typescript",
     "plugin:i18next/recommended",
     "plugin:i18n-json/recommended",
   ],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
   rules: {
     // general things turned off for now
-    "prefer-const": "off",
     "no-debugger": "warn",
     "eol-last": "off",
-
     "comma-dangle": ["off", "always-multiline"],
     "no-void": ["off"],
     "array-callback-return": ["off"],
-
-    "react/display-name": "warn",
-    quotes: ["off", "double"],
-    semi: ["off", "always"],
-    "no-multiple-empty-lines": ["off", { max: 2, maxEOF: 1 }],
-    yoda: ["off"],
-    eqeqeq: ["off"],
     "spaced-comment": ["off"],
     "padded-blocks": ["off"],
+    "no-multiple-empty-lines": ["off", { max: 2, maxEOF: 1 }],
+    quotes: ["off", "double"],
+    semi: ["off", "always"],
+    yoda: ["off"],
+    eqeqeq: ["off"],
+    "react/display-name": "warn",
+
+    // TS THINGS WE DONT WANT
+    "@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/ban-ts-comment": "off",
+    // "@typescript-eslint/naming-convention": "off",
-    "@typescript-eslint/no-array-constructor": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-unused-vars": "off",
-    "@typescript-eslint/naming-convention": "off",
     "@typescript-eslint/restrict-template-expressions": "off",
     "@typescript-eslint/prefer-optional-chain": "off",
     "@typescript-eslint/no-non-null-assertion": "off",

ui/frontend/build_src/package.json

@@ -4,7 +4,6 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "lint": "eslint --ext .tsx --fix src",
     "pretty": "prettier --write .",
     "dev": "vite",
     "build": "tsc && vite build --emptyOutDir",

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

@@ -11,7 +11,7 @@ export const API_URL = import.meta.env.DEV ? "http://localhost:9000" : "";
 export const HEALTH_PING_INTERVAL = 5000; // 5 seconds
 export const healthPing = async () => {
   const pingUrl = `${API_URL}/ping`;
-  let response = await fetch(pingUrl);
+  const response = await fetch(pingUrl);
   const data = await response.json();
   return data;
 };

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

@@ -34,9 +34,9 @@ export default function BetaMode() {
   // TODO: make this a custom hook
   useEffect(() => {
     if (configStatus === "success") {
-      const { update_branch } = configData;
+      const { update_branch: updateBranch } = configData;
 
-      if (update_branch === "main") {
+      if (updateBranch === "main") {
         setBranchToGetNext("beta");
       } else {
         // setIsBeta(true);

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

@@ -14,10 +14,10 @@ import {
 
 export default function GpuSettings() {
   const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo"));
-  const use_cpu = useImageCreate((state) =>
+  const useCpu = useImageCreate((state) =>
     state.getValueForRequestKey("use_cpu")
   );
-  const use_full_precision = useImageCreate((state) =>
+  const useFullPrecision = useImageCreate((state) =>
     state.getValueForRequestKey("use_full_precision")
   );
 
@@ -48,7 +48,7 @@ export default function GpuSettings() {
             <label>
               <input
                 type="checkbox"
-                checked={use_cpu}
+                checked={useCpu}
                 onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
               />
               Use CPU instead of GPU (warning: this will be *very* slow)
@@ -57,7 +57,7 @@ export default function GpuSettings() {
           <div className={SettingItem}>
             <label>
               <input
-                checked={use_full_precision}
+                checked={useFullPrecision}
                 onChange={(e) =>
                   setRequestOption("use_full_precision", e.target.checked)
                 }

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

@@ -18,11 +18,11 @@ export default function ImprovementSettings() {
 
   const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
 
-  const use_upscale = useImageCreate((state) =>
+  const useUpscale = useImageCreate((state) =>
     state.getValueForRequestKey("use_upscale")
   );
 
-  const show_only_filtered_image = useImageCreate((state) =>
+  const filteredOnly = useImageCreate((state) =>
     state.getValueForRequestKey("show_only_filtered_image")
   );
 
@@ -45,7 +45,7 @@ export default function ImprovementSettings() {
   useEffect(() => {
 
     // if either are true we arent disabled
-    if (isUsingFaceCorrection || use_upscale) {
+    if (isUsingFaceCorrection || useUpscale) {
       setIsFilteringDisabled(false);
     } else {
       setIsFilteringDisabled(true);
@@ -79,7 +79,7 @@ export default function ImprovementSettings() {
               <select
                 id="upscale_model"
                 name="upscale_model"
-                value={use_upscale}
+                value={useUpscale}
                 onChange={(e) => {
                   setRequestOption("use_upscale", e.target.value);
                 }}
@@ -97,7 +97,7 @@ export default function ImprovementSettings() {
               <input
                 disabled={isFilteringDisabled}
                 type="checkbox"
-                checked={show_only_filtered_image}
+                checked={filteredOnly}
                 onChange={(e) =>
                   setRequestOption("show_only_filtered_image", e.target.checked)
                 }

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

@@ -39,15 +39,15 @@ export default function PropertySettings() {
   const steps = useImageCreate((state) =>
     state.getValueForRequestKey("num_inference_steps")
   );
-  const guidance_scale = useImageCreate((state) =>
+  const guidanceScale = useImageCreate((state) =>
     state.getValueForRequestKey("guidance_scale")
   );
 
-  const init_image = useImageCreate((state) =>
+  const initImage = useImageCreate((state) =>
     state.getValueForRequestKey("init_image")
   );
 
-  const prompt_strength = useImageCreate((state) =>
+  const promptStrength = useImageCreate((state) =>
     state.getValueForRequestKey("prompt_strength")
   );
 
@@ -106,7 +106,7 @@ export default function PropertySettings() {
             <label>
               Guidance Scale:
               <input
-                value={guidance_scale}
+                value={guidanceScale}
                 onChange={(e) =>
                   setRequestOption("guidance_scale", e.target.value)
                 }
@@ -116,15 +116,15 @@ export default function PropertySettings() {
                 step=".1"
               />
             </label>
-            <span>{guidance_scale}</span>
+            <span>{guidanceScale}</span>
           </div>
 
-          {init_image && (
+          {initImage && (
             <div className={SettingItem}>
               <label>
                 Prompt Strength:{" "}
                 <input
-                  value={prompt_strength}
+                  value={promptStrength}
                   onChange={(e) =>
                     setRequestOption("prompt_strength", e.target.value)
                   }
@@ -134,7 +134,7 @@ export default function PropertySettings() {
                   step=".05"
                 />
               </label>
-              <span>{prompt_strength}</span>
+              <span>{promptStrength}</span>
             </div>
           )}
 

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

@@ -12,12 +12,12 @@ import {
 } from "../advancedsettings.css.ts";
 
 export default function WorkflowSettings() {
-  const num_outputs = useImageCreate((state) =>
+  const numOutputs = useImageCreate((state) =>
     state.getValueForRequestKey("num_outputs")
   );
   const parallelCount = useImageCreate((state) => state.parallelCount);
   const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave());
-  const save_to_disk_path = useImageCreate((state) =>
+  const diskPath = useImageCreate((state) =>
     state.getValueForRequestKey("save_to_disk_path")
   );
   const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
@@ -46,7 +46,7 @@ export default function WorkflowSettings() {
               Number of images to make:{" "}
               <input
                 type="number"
-                value={num_outputs}
+                value={numOutputs}
                 onChange={(e) =>
                   setRequestOption("num_outputs", parseInt(e.target.value, 10))
                 }
@@ -76,7 +76,7 @@ export default function WorkflowSettings() {
             </label>
             <label>
               <input
-                value={save_to_disk_path}
+                value={diskPath}
                 onChange={(e) =>
                   setRequestOption("save_to_disk_path", e.target.value)
                 }

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import React, { useEffect, useState } from "react";
 
 import { useImageCreate } from "../../../../../stores/imageCreateStore";
@@ -26,7 +27,7 @@ export default function MakeButton() {
     // the request that we have built
     const req = builtRequest();
     // the actual number of request we will make
-    let requests = [];
+    const requests = [];
     // the number of images we will make
     let { num_outputs } = req;
 

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx

@@ -15,7 +15,7 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
 export default function SeedImage(_props: any) {
   const imageInputRef = useRef<HTMLInputElement>(null);
 
-  const init_image = useImageCreate((state) =>
+  const initImage = useImageCreate((state) =>
     state.getValueForRequestKey("init_image")
   );
 
@@ -70,10 +70,10 @@ export default function SeedImage(_props: any) {
       </div>
 
       <div className={ImageFixer}>
-        {init_image && (
+        {initImage && (
           <>
             <div>
-              <img src={init_image} width="100" height="100" />
+              <img src={initImage} width="100" height="100" />
               <button className={XButton} onClick={_handleClearImage}>
                 X
               </button>

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState, ChangeEvent, MouseEventHandler } from "react";
+import React, { useRef, useState, ChangeEvent } from "react";
 import DrawImage from "../../../molecules/drawImage";
 
 import { useImageCreate } from "../../../../stores/imageCreateStore";
@@ -18,7 +18,7 @@ export default function InpaintingPanel() {
   const [brushColor, setBrushColor] = useState("#fff");
   const [isErasing, setIsErasing] = useState(false);
 
-  const init_image = useImageCreate((state) =>
+  const initImage = useImageCreate((state) =>
     state.getValueForRequestKey("init_image")
   );
 
@@ -48,7 +48,7 @@ export default function InpaintingPanel() {
     <div className={InpaintingPanelMain}>
       <DrawImage
         // ref={drawingRef}
-        imageData={init_image}
+        imageData={initImage}
         brushSize={brushSize}
         brushShape={brushShape}
         brushColor={brushColor}

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import React from "react";
 import GeneratedImage from "../../../molecules/generatedImage";
 import {
@@ -27,7 +28,7 @@ export default function CurrentDisplay({ isLoading, image }: CurrentDisplayProps
       use_upscale,
       width,
       height,
-    } = info!;
+    } = info! as ImageRequest;
 
 
     // Most important information is the prompt

ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx

@@ -24,12 +24,12 @@ export default function HeaderDisplay() {
   useEffect(() => {
     if (status === "success") {
       // TODO also pass down the actual version
-      const { update_branch } = data;
+      const { update_branch: updateBranch } = data;
 
       // just hard coded for now
       setVersion("v2.1");
 
-      if (update_branch === "main") {
+      if (updateBranch === "main") {
         setRelease("(stable)");
       } else {
         setRelease("(beta)");

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

@@ -17,8 +17,8 @@ interface ImageQueueState {
 // figure out why TS is complaining about this
 // @ts-ignore
 export const useImageQueue = create<ImageQueueState>((set, get) => ({
-  images: new Array(),
+  images: [],
-  completedImageIds: new Array(),
+  completedImageIds: [],
   // use produce to make sure we don't mutate state
   addNewImage: (id: string, imgRec: ImageRequest, isRandom = false) => {
     set(

ui/frontend/build_src/src/styles/theme/index.css.ts

@@ -79,7 +79,7 @@ const app = createGlobalTheme(":root", {
 
     },
   },
-  colors: colors,
+  colors,
 });
 
 export const darkTheme = createTheme(colors, {