holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cleaning up type issues

Browse Source
This commit is contained in:
caranicas 2022-09-20 12:35:44 -04:00
parent 6f3829fa91
commit f04b5244fa
15 changed files with 189 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
ui/frontend/build_src/.eslintrc.cjs
View File

@ -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
"@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",
// these are things that fight with prettier
"@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/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",
// "@typescript-eslint/member-delimiter-style": "off",
// i18n stuff no string literal works but turned off for now
"i18next/no-literal-string": "off",

20
ui/frontend/build_src/package-lock.json generated
View File

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

1
ui/frontend/build_src/package.json
View File

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

9
ui/frontend/build_src/src/Translation/config.ts
View File

@ -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");
});

6
ui/frontend/build_src/src/api/index.ts
View File

@ -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;
};
};

10
ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
View File

@ -8,12 +8,12 @@ import {
// https://github.com/embiem/react-canvas-draw
interface DrawImageProps {
imageData: string;
brushSize: string;
imageData: string
brushSize: string
brushShape: string;
brushColor: string;
isErasing: boolean;
brushShape: string
brushColor: string
isErasing: boolean
}
export default function DrawImage({

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

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

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

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

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

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

42
ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts
View File

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

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

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

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

@ -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>

11
ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
View File

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

184
ui/frontend/build_src/src/stores/imageCreateStore.ts
View File

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

8
ui/frontend/build_src/src/stores/imageQueueStore.ts
View File

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