From 39090451f03d1bb3954e0a33c0a3efe40ddc93b5 Mon Sep 17 00:00:00 2001 From: caranicas Date: Tue, 20 Sep 2022 09:36:12 -0400 Subject: [PATCH 1/3] fix the linting issue and index error --- ui/frontend/build_src/.eslintrc.cjs | 4 +- ui/frontend/build_src/src/api/index.ts | 13 +++++++ .../molecules/generatedImage/index.tsx | 4 +- .../basicCreation/makeButton/index.tsx | 2 +- .../creationPanel/creationPanelUIStore.ts | 2 +- .../creationPanel/imageModifiers/index.tsx | 4 +- .../displayPanel/completedImages/index.tsx | 37 +++++++++---------- .../displayPanel/displayPanel.css.ts | 3 -- .../organisms/displayPanel/index.tsx | 17 +++------ .../build_src/src/pages/Home/index.tsx | 2 +- 10 files changed, 44 insertions(+), 44 deletions(-) diff --git a/ui/frontend/build_src/.eslintrc.cjs b/ui/frontend/build_src/.eslintrc.cjs index 656195f8..10a26f6e 100644 --- a/ui/frontend/build_src/.eslintrc.cjs +++ b/ui/frontend/build_src/.eslintrc.cjs @@ -52,9 +52,7 @@ 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/prefer-optional-chain": "off", "@typescript-eslint/no-non-null-assertion": "off", "@typescript-eslint/strict-boolean-expressions": "off", "@typescript-eslint/no-floating-promises": "off", diff --git a/ui/frontend/build_src/src/api/index.ts b/ui/frontend/build_src/src/api/index.ts index 9802718b..a97eb2b6 100644 --- a/ui/frontend/build_src/src/api/index.ts +++ b/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) => { diff --git a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx index 23a28ce2..7c0bbe6a 100644 --- a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx +++ b/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, diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx index 31a0dda1..3b1fb24b 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx +++ b/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"; diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts index 2c52cf77..0ebdc8ca 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts +++ b/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; diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx index 5d9629c4..6b4ec83c 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx @@ -1,7 +1,5 @@ -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"; diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx index ec6a3fc9..f00d4f4b 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx @@ -40,26 +40,25 @@ export default function CompletedImages({ )} ); diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts b/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts index 1f4046d6..2b558800 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts @@ -1,7 +1,5 @@ import { style } from "@vanilla-extract/css"; -// @ts-ignore -import { vars } from "../../../styles/theme/index.css.ts"; export const displayPanel = style({ height: "100%", @@ -18,5 +16,4 @@ export const displayContainer = style({ }); export const previousImages = style({ - // height: "150px", }); diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx index 9601151b..0e6b9ed8 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx @@ -5,7 +5,7 @@ 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 +18,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 +51,6 @@ export default function DisplayPanel() { async () => await doMakeImage(options), { enabled: isEnabled, - // void 0 !== id, } ); @@ -95,11 +93,11 @@ 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 +105,10 @@ export default function DisplayPanel() { const temp = completedQueries .map((query, index) => { if (void 0 !== query) { - // @ts-ignore - return query.output.map((data, index) => { - // @ts-ignore + return query.output.map((data: ImageOutput, index: number) => { 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 }, }; }); diff --git a/ui/frontend/build_src/src/pages/Home/index.tsx b/ui/frontend/build_src/src/pages/Home/index.tsx index 15f4007c..4ba6092c 100644 --- a/ui/frontend/build_src/src/pages/Home/index.tsx +++ b/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, From e8544be30a4ec3162abb875d9d79587b3a46f005 Mon Sep 17 00:00:00 2001 From: caranicas Date: Tue, 20 Sep 2022 09:49:50 -0400 Subject: [PATCH 2/3] hide inert ui for now --- ui/frontend/build_src/.eslintrc.cjs | 1 - .../src/components/molecules/betaMode/index.tsx | 1 - .../advancedSettings/improvementSettings/index.tsx | 2 +- .../creationPanel/advancedSettings/index.tsx | 6 +++--- .../creationPanel/basicCreation/index.tsx | 2 +- .../basicCreation/makeButton/index.tsx | 14 +++++++++----- .../basicCreation/seedImage/index.tsx | 4 ++-- .../components/organisms/headerDisplay/index.tsx | 4 ++-- .../build_src/src/stores/imageQueueStore.ts | 3 +-- 9 files changed, 19 insertions(+), 18 deletions(-) diff --git a/ui/frontend/build_src/.eslintrc.cjs b/ui/frontend/build_src/.eslintrc.cjs index 10a26f6e..0d81b727 100644 --- a/ui/frontend/build_src/.eslintrc.cjs +++ b/ui/frontend/build_src/.eslintrc.cjs @@ -52,7 +52,6 @@ module.exports = { "@typescript-eslint/no-unused-vars": "warn", // TS things turned off for now - // "@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", diff --git a/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx index e5acd386..ade47769 100644 --- a/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx @@ -61,7 +61,6 @@ export default function BetaMode() { return ( diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx index 4dcb7fdb..acee9650 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx +++ b/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() { -
  • + {/*
  • -
  • + */} ); } diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx index 810b0f3a..d9c8cb5c 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx @@ -30,12 +30,12 @@ export default function BasicCreation() {

    {t("home.editor-title")}

    + - ); } diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx index 3b1fb24b..e1197fd8 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx @@ -24,6 +24,14 @@ 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 +65,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(); } @@ -70,11 +79,6 @@ export default function MakeButton() { }); }); - // potentially update the seed - if (isRandomSeed) { - // update the seed for the next time we click the button - setRequestOption("seed", useRandomSeed()); - } }; return ( diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx index 591c1182..491b0d71 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx @@ -82,7 +82,7 @@ export default function SeedImage(_props: any) { X - */} )} diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx index 1876ded8..3993ff37 100644 --- a/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx +++ b/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() { - + {/* */} ); } diff --git a/ui/frontend/build_src/src/stores/imageQueueStore.ts b/ui/frontend/build_src/src/stores/imageQueueStore.ts index 54ef31c3..c18f7902 100644 --- a/ui/frontend/build_src/src/stores/imageQueueStore.ts +++ b/ui/frontend/build_src/src/stores/imageQueueStore.ts @@ -14,8 +14,7 @@ interface ImageQueueState { clearCachedIds: () => void; } -// figure out why TS is complaining about this -// @ts-ignore + export const useImageQueue = create((set, get) => ({ images: [], completedImageIds: [], From 63b658ac503295ad1f1140c6367b360dcd9cb750 Mon Sep 17 00:00:00 2001 From: caranicas Date: Tue, 20 Sep 2022 09:50:50 -0400 Subject: [PATCH 3/3] linting and some type fixes --- ui/frontend/build_src/src/api/index.ts | 8 ++-- .../propertySettings/index.tsx | 4 +- .../creationPanel/basicCreation/index.tsx | 1 - .../basicCreation/makeButton/index.tsx | 2 - .../creationPanel/imageModifiers/index.tsx | 1 - .../displayPanel/displayPanel.css.ts | 4 +- .../organisms/displayPanel/index.tsx | 8 +++- .../build_src/src/stores/imageQueueStore.ts | 1 - ui/frontend/dist/index.js | 40 +++++++++---------- 9 files changed, 33 insertions(+), 36 deletions(-) diff --git a/ui/frontend/build_src/src/api/index.ts b/ui/frontend/build_src/src/api/index.ts index a97eb2b6..e3de95e5 100644 --- a/ui/frontend/build_src/src/api/index.ts +++ b/ui/frontend/build_src/src/api/index.ts @@ -61,14 +61,14 @@ export type ImageOutput = { data: string; path_abs: string | null; seed: number; -} +}; export type ImageReturnType = { output: ImageOutput[]; request: {}; - status: string, - session_id: string, -} + status: string; + session_id: string; +}; export const MakeImageKey = "MakeImage"; export const doMakeImage = async (reqBody: ImageRequest) => { diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx index 28377f33..e0e759ef 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx @@ -96,7 +96,7 @@ export default function PropertySettings() {