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/App.tsx

@@ -7,7 +7,7 @@ import { darkTheme, lightTheme } from "./styles/theme/index.css.ts";
 import "./Translation/config";
 const location = new ReactLocation();
 
-function App() {
+function App () {
   // just check for the theme one 1 time
 
   // var { matches } = window.matchMedia('(prefers-color-scheme: dark)')

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/atoms/modifierTag/index.tsx

@@ -5,7 +5,7 @@ interface ModifierTagProps {
   name: string;
 }
 
-export default function ModifierTag({ name }: ModifierTagProps) {
+export default function ModifierTag ({ name }: ModifierTagProps) {
   const hasTag = useImageCreate((state) => state.hasTag(name))
     ? "selected"
     : "";

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/molecules/drawImage/index.tsx

@@ -16,7 +16,7 @@ interface DrawImageProps {
   isErasing: boolean;
 }
 
-export default function DrawImage({
+export default function DrawImage ({
   imageData,
   brushSize,
   brushShape,

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

@@ -14,7 +14,7 @@ interface GeneretaedImageProps {
   // children: never[];
 }
 
-export default function GeneratedImage({
+export default function GeneratedImage ({
   imageData,
   metadata,
   className,

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/index.tsx

@@ -16,7 +16,7 @@ import GpuSettings from "./gpuSettings";
 
 import BetaMode from "../../../molecules/betaMode";
 
-function SettingsList() {
+function SettingsList () {
   return (
     <ul className={AdvancedSettingsList}>
       <li className={AdvancedSettingGrouping}>
@@ -39,7 +39,7 @@ function SettingsList() {
   );
 }
 
-export default function AdvancedSettings() {
+export default function AdvancedSettings () {
   const advancedSettingsIsOpen = useCreateUI(
     (state) => state.isOpenAdvancedSettings
   );

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/activeTags/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import ModifierTag from "../../../../atoms/modifierTag";
 
-export default function ActiveTags() {
+export default function ActiveTags () {
   const selectedtags = useImageCreate((state) => state.selectedTags());
   return (
     <div className="selected-tags">

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

@@ -10,7 +10,7 @@ import SeedImage from "./seedImage";
 import ActiveTags from "./activeTags";
 import MakeButton from "./makeButton";
 
-export default function BasicCreation() {
+export default function BasicCreation () {
   const promptText = useImageCreate((state) =>
     state.getValueForRequestKey("prompt")
   );

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/imageModifiers/index.tsx

@@ -23,7 +23,7 @@ interface ModifierListProps {
   tags: string[];
 }
 
-function ModifierList({ tags }: ModifierListProps) {
+function ModifierList ({ tags }: ModifierListProps) {
   return (
     <ul className={ModifierListStyle}>
       {tags.map((tag) => (
@@ -40,7 +40,7 @@ interface ModifierGroupingProps {
   tags: string[];
 }
 
-function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
+function ModifierGrouping ({ title, tags }: ModifierGroupingProps) {
   // doing this localy for now, but could move to a store
   // and persist if we wanted to
   const [isExpanded, setIsExpanded] = useState(false);
@@ -59,7 +59,7 @@ function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
   );
 }
 
-export default function ImageModifers() {
+export default function ImageModifers () {
   const allModifiers = useImageCreate((state) => state.allModifiers);
 
   const imageModifierIsOpen = useCreateUI((state) => state.isOpenImageModifier);

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

@@ -18,7 +18,7 @@ import {
 
 import BasicCreation from "./basicCreation";
 
-export default function CreationPanel() {
+export default function CreationPanel () {
   const isInPaintingMode = useImageCreate((state) => state.isInpainting);
   return (
     <>

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/completedImages/index.tsx

@@ -16,7 +16,7 @@ interface CurrentDisplayProps {
   removeImages: () => void;
 }
 
-export default function CompletedImages({
+export default function CompletedImages ({
   images,
   setCurrentDisplay,
   removeImages,

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/footerDisplay/index.tsx

@@ -8,7 +8,7 @@ import {
 
 import { API_URL } from "../../../api";
 
-export default function FooterDisplay() {
+export default function FooterDisplay () {
   return (
     <div className={FooterDisplayMain}>
       <p>

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/components/organisms/headerDisplay/statusDisplay/index.tsx

@@ -13,7 +13,7 @@ const startingMessage = "Stable Diffusion is starting...";
 const successMessage = "Stable Diffusion is ready to use!";
 const errorMessage = "Stable Diffusion is not running!";
 
-export default function StatusDisplay({ className }: { className?: string }) {
+export default function StatusDisplay ({ className }: { className?: string }) {
   const [statusMessage, setStatusMessage] = useState(startingMessage);
   const [statusClass, setStatusClass] = useState(StartingStatus);
 

ui/frontend/build_src/src/pages/Experimental/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function Beta() {
+export default function Beta () {
   return (
     <div>
       <h1>Beta</h1>

ui/frontend/build_src/src/pages/Home/index.tsx

@@ -20,7 +20,7 @@ import CreationPanel from "../../components/organisms/creationPanel";
 import DisplayPanel from "../../components/organisms/displayPanel";
 import FooterDisplay from "../../components/organisms/footerDisplay";
 
-function Home({ className }: { className: any }) {
+function Home ({ className }: { className: any }) {
   // Get the original save directory
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 

ui/frontend/build_src/src/pages/Settings/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function Settings({ className }: { className: any }) {
+export default function Settings ({ className }: { className: any }) {
   return (
     <div>
       <h1>Settings</h1>

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

@@ -17,37 +17,37 @@ export type ImageRequest = {
   num_inference_steps: 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;
   turbo: boolean;
   use_cpu: boolean;
@@ -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;

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