Merge pull request #32 from caranicas/react-beta-linting-clean

React beta linting clean

ui/frontend/build_src/.eslintrc.cjs

@@ -52,9 +52,6 @@ module.exports = {
     "@typescript-eslint/no-unused-vars": "warn",
 
     // TS  things turned off for now
-    // "@typescript-eslint/naming-convention": "off",
-    "@typescript-eslint/restrict-template-expressions": "off",
-    "@typescript-eslint/prefer-optional-chain": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/strict-boolean-expressions": "off",
     "@typescript-eslint/no-floating-promises": "off",

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

@@ -56,6 +56,19 @@ export const toggleBetaConfig = async (branch: string) => {
 /**
  * post a new request for an image
  */
+// TODO; put hese some place better
+export type ImageOutput = {
+  data: string;
+  path_abs: string | null;
+  seed: number;
+};
+
+export type ImageReturnType = {
+  output: ImageOutput[];
+  request: {};
+  status: string;
+  session_id: string;
+};
 
 export const MakeImageKey = "MakeImage";
 export const doMakeImage = async (reqBody: ImageRequest) => {

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

@@ -61,7 +61,6 @@ export default function BetaMode() {
   return (
     <label>
       <input
-        disabled={true}
         type="checkbox"
         checked={branchToGetNext === "main"}
         onChange={(e) => {

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

@@ -1,6 +1,6 @@
-import React, { useCallback } from "react";
+import React from "react";
 
-import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
+import { ImageRequest } from "../../../stores/imageCreateStore";
 
 import {
   generatedImageMain,

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

@@ -105,7 +105,7 @@ export default function ImprovementSettings() {
                   setRequestOption("show_only_filtered_image", e.target.checked)
                 }
               />
-              {t("settings.correct")}
+              {t("settings.corrected")}
             </label>
           </div>
         </>

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

@@ -14,7 +14,7 @@ import PropertySettings from "./propertySettings";
 import WorkflowSettings from "./workflowSettings";
 import GpuSettings from "./gpuSettings";
 
-import BetaMode from "../../../molecules/betaMode";
+// import BetaMode from "../../../molecules/betaMode";
 
 function SettingsList() {
   return (
@@ -32,9 +32,9 @@ function SettingsList() {
         <GpuSettings />
       </li>
 
-      <li className={AdvancedSettingGrouping}>
+      {/* <li className={AdvancedSettingGrouping}>
         <BetaMode />
-      </li>
+      </li> */}
     </ul>
   );
 }

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

@@ -96,7 +96,7 @@ export default function PropertySettings() {
 
           <div className={SettingItem}>
             <label>
-              {t("settings.steps")} {" "}
+              {t("settings.steps")}{" "}
               <input
                 value={steps}
                 onChange={(e) => {
@@ -127,7 +127,7 @@ export default function PropertySettings() {
           {initImage && (
             <div className={SettingItem}>
               <label>
-                {t("settings.prompt-str")} {" "}
+                {t("settings.prompt-str")}{" "}
                 <input
                   value={promptStrength}
                   onChange={(e) =>

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

@@ -30,12 +30,11 @@ export default function BasicCreation() {
         <p>{t("home.editor-title")}</p>
         <textarea value={promptText} onChange={handlePromptChange}></textarea>
       </div>
+      <MakeButton></MakeButton>
 
       <SeedImage></SeedImage>
 
       <ActiveTags></ActiveTags>
-
-      <MakeButton></MakeButton>
     </div>
   );
 }

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import { useImageQueue } from "../../../../../stores/imageQueueStore";
@@ -24,6 +24,13 @@ export default function MakeButton() {
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
   const makeImages = () => {
+    // potentially update the seed
+    if (isRandomSeed) {
+      // update the seed for the next time we click the button
+      debugger;
+      setRequestOption("seed", useRandomSeed());
+    }
+
     // the request that we have built
     const req = builtRequest();
     // the actual number of request we will make
@@ -57,6 +64,7 @@ export default function MakeButton() {
       // get the seed we want to use
       let seed = req.seed;
       if (index !== 0) {
+        debugger;
         // we want to use a random seed for subsequent requests
         seed = useRandomSeed();
       }
@@ -69,12 +77,6 @@ export default function MakeButton() {
         seed,
       });
     });
-
-    // potentially update the seed
-    if (isRandomSeed) {
-      // update the seed for the next time we click the button
-      setRequestOption("seed", useRandomSeed());
-    }
   };
 
   return (

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

@@ -82,7 +82,7 @@ export default function SeedImage(_props: any) {
                 X
               </button>
             </div>
-            <label>
+            {/* <label>
               <input
                 type="checkbox"
                 onChange={(e) => {
@@ -91,7 +91,7 @@ export default function SeedImage(_props: any) {
                 checked={isInPaintingMode}
               ></input>
               {t("in-paint.txt")}
-            </label>
+            </label> */}
           </>
         )}
       </div>

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

@@ -1,6 +1,6 @@
 import create from "zustand";
 import produce from "immer";
-import { persist, devtools } from "zustand/middleware";
+import { persist } from "zustand/middleware";
 
 export type ImageCreationUIOptions = {
   isOpenAdvancedSettings: boolean;

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

@@ -1,7 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
-
-import { useQuery } from "@tanstack/react-query";
-import { loadModifications } from "../../../../api";
 
 // @ts-expect-error
 import { PanelBox } from "../../../../styles/shared.css.ts";

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

@@ -40,26 +40,25 @@ export default function CompletedImages({
         </button>
       )}
       <ul className={completedImagesList}>
-        {images != null &&
+        {images?.map((image, index) => {
-          images.map((image, index) => {
+          if (void 0 === image) {
-            if (void 0 === image) {
+            console.warn(`image ${index} is undefined`);
-              console.warn(`image ${index} is undefined`);
+            return null;
-              return null;
+          }
-            }
 
-            return (
+          return (
-              <li key={image.id}>
+            <li key={image.id}>
-                <button
+              <button
-                  className={imageContain}
+                className={imageContain}
-                  onClick={() => {
+                onClick={() => {
-                    _handleSetCurrentDisplay(index);
+                  _handleSetCurrentDisplay(index);
-                  }}
+                }}
-                >
+              >
-                  <img src={image.data} alt={image.info.prompt} />
+                <img src={image.data} alt={image.info.prompt} />
-                </button>
+              </button>
-              </li>
+            </li>
-            );
+          );
-          })}
+        })}
       </ul>
     </div>
   );

ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts

@@ -1,8 +1,5 @@
 import { style } from "@vanilla-extract/css";
 
-// @ts-ignore
-import { vars } from "../../../styles/theme/index.css.ts";
-
 export const displayPanel = style({
   height: "100%",
   display: "flex",
@@ -17,6 +14,4 @@ export const displayContainer = style({
   alignItems: "center",
 });
 
-export const previousImages = style({
+export const previousImages = style({});
-  // height: "150px",
-});

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

@@ -5,7 +5,12 @@ import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { doMakeImage, MakeImageKey } from "../../../api";
+import {
+  doMakeImage,
+  MakeImageKey,
+  ImageReturnType,
+  ImageOutput,
+} from "../../../api";
 
 import AudioDing from "./audioDing";
 
@@ -18,9 +23,8 @@ import CompletedImages from "./completedImages";
 import {
   displayPanel,
   displayContainer,
-  // CurrentDisplay,
   previousImages,
-  previousImage, // @ts-expect-error
+  // @ts-expect-error
 } from "./displayPanel.css.ts";
 
 export interface CompletedImagesType {
@@ -52,7 +56,6 @@ export default function DisplayPanel() {
     async () => await doMakeImage(options),
     {
       enabled: isEnabled,
-      // void 0 !== id,
     }
   );
 
@@ -95,11 +98,10 @@ export default function DisplayPanel() {
 
   // this is where we generate the list of completed images
   useEffect(() => {
-    const testReq = {} as ImageRequest;
     const completedQueries = completedIds.map((id) => {
       const imageData = queryClient.getQueryData([MakeImageKey, id]);
       return imageData;
-    }) as ImageRequest[];
+    }) as ImageReturnType[];
 
     if (completedQueries.length > 0) {
       // map the completedImagesto a new array
@@ -107,13 +109,10 @@ export default function DisplayPanel() {
       const temp = completedQueries
         .map((query, index) => {
           if (void 0 !== query) {
-            // @ts-ignore
+            return query.output.map((data: ImageOutput, index: number) => {
-            return query.output.map((data, index) => {
-              // @ts-ignore
               return {
-                id: `${completedIds[index]}${idDelim}-${data.seed}-${data.index}`,
+                id: `${completedIds[index]}${idDelim}-${data.seed}-${index}`,
                 data: data.data,
-                // @ts-ignore
                 info: { ...query.request, seed: data.seed },
               };
             });

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

@@ -11,7 +11,7 @@ import {
   HeaderDisplayMain, // @ts-expect-error
 } from "./headerDisplay.css.ts";
 
-import LanguageDropdown from "./languageDropdown";
+// import LanguageDropdown from "./languageDropdown";
 
 export default function HeaderDisplay() {
   const { t } = useTranslation();
@@ -46,7 +46,7 @@ export default function HeaderDisplay() {
       </h1>
       <StatusDisplay className="status-display"></StatusDisplay>
 
-      <LanguageDropdown></LanguageDropdown>
+      {/* <LanguageDropdown></LanguageDropdown> */}
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 
 import {
   AppLayout,

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

@@ -14,8 +14,6 @@ interface ImageQueueState {
   clearCachedIds: () => void;
 }
 
-// figure out why TS is complaining about this
-// @ts-ignore
 export const useImageQueue = create<ImageQueueState>((set, get) => ({
   images: [],
   completedImageIds: [],