From 1e224462358c27484a2ff68bd8c8b526969664a4 Mon Sep 17 00:00:00 2001 From: Sean Sube Date: Sun, 14 Jan 2024 12:59:36 -0600 Subject: [PATCH] feat(gui): drag and drop images to get params --- gui/package.json | 6 +- gui/src/components/Profiles.tsx | 55 ++++++++++++----- gui/src/components/input/MaskCanvas.tsx | 9 ++- gui/yarn.lock | 79 +++++++++++++++---------- 4 files changed, 95 insertions(+), 54 deletions(-) diff --git a/gui/package.json b/gui/package.json index 21e71e7d..f0cbc183 100644 --- a/gui/package.json +++ b/gui/package.json @@ -15,7 +15,7 @@ "@mui/material": "^5.12.0", "@tanstack/react-query": "^4.0.5", "@types/lodash": "^4.14.192", - "@types/node": "^18.15.11", + "@types/node": "^20.11.0", "@yornaath/batshit": "^0.9.0", "allotment": "^1.19.5", "browser-bunyan": "^1.8.0", @@ -27,9 +27,9 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^12.2.0", - "react-use": "^17.4.0", + "react-use": "^17.4.3", "semver": "^7.4.0", - "tslib": "^2.5.0", + "tslib": "^2.6.2", "zustand": "^4.3.7" }, "devDependencies": { diff --git a/gui/src/components/Profiles.tsx b/gui/src/components/Profiles.tsx index e3df025a..6be17c5d 100644 --- a/gui/src/components/Profiles.tsx +++ b/gui/src/components/Profiles.tsx @@ -18,6 +18,7 @@ import { defaultTo, isString } from 'lodash'; import * as React from 'react'; import { useContext, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import * as useDropModule from 'react-use/lib/useDrop'; import { useStore } from 'zustand'; import { shallow } from 'zustand/shallow'; @@ -28,6 +29,10 @@ import { DeepPartial } from '../types/model.js'; import { BaseImgParams, HighresParams, ModelParams, Txt2ImgParams, UpscaleParams } from '../types/params.js'; import { downloadAsJson } from '../utils.js'; +// useDrop has a really weird export +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const useDrop = (useDropModule.default as any).default as typeof useDropModule['default']; + export type PartialImageMetadata = DeepPartial; export const ALLOWED_EXTENSIONS = ['.json','.jpg','.jpeg','.png','.txt','.webp']; @@ -54,6 +59,40 @@ export function Profiles(props: ProfilesProps) { const [profileName, setProfileName] = useState(''); const { t } = useTranslation(); + async function loadFromMetadata(metadata: PartialImageMetadata) { + // TODO: load model parameters + + if (doesExist(metadata.params)) { + props.setParams(metadata.params); + } + + if (doesExist(metadata.highres)) { + props.setHighres(metadata.highres); + } + + if (doesExist(metadata.upscale)) { + props.setUpscale(metadata.upscale); + } + } + + async function loadFromFile(file: File) { + await loadParamsFromFile(file).then(loadFromMetadata); + } + + const drop = useDrop({ + onFiles(files, event) { + event.preventDefault(); + const file = files[0]; + // eslint-disable-next-line @typescript-eslint/no-floating-promises + loadFromFile(file); + }, + onText(text, event) { + event.preventDefault(); + // eslint-disable-next-line @typescript-eslint/no-floating-promises + parseAutoComment(text).then(loadFromMetadata); + }, + }); + return 0) { const file = mustExist(files[0]); // eslint-disable-next-line @typescript-eslint/no-floating-promises - loadParamsFromFile(file).then((newParams) => { - // TODO: load model parameters - - if (doesExist(newParams.params)) { - props.setParams(newParams.params); - } - - if (doesExist(newParams.highres)) { - props.setHighres(newParams.highres); - } - - if (doesExist(newParams.upscale)) { - props.setUpscale(newParams.upscale); - } - }); + loadFromFile(file); } }} onClick={(event) => { diff --git a/gui/src/components/input/MaskCanvas.tsx b/gui/src/components/input/MaskCanvas.tsx index 2ace1c75..e9523926 100644 --- a/gui/src/components/input/MaskCanvas.tsx +++ b/gui/src/components/input/MaskCanvas.tsx @@ -199,12 +199,11 @@ export function MaskCanvas(props: MaskCanvasProps) { // painting state const painting = useRef(false); const dirty = useRef(false); - const background = useRef<{ name: string; url: Maybe }>({ - name: '', + const background = useRef<{ source: Maybe; url: Maybe }>({ + source: undefined, url: undefined, }); - const state = mustExist(useContext(StateContext)); const { t } = useTranslation(); useEffect(() => { @@ -222,13 +221,13 @@ export function MaskCanvas(props: MaskCanvasProps) { }, [mask]); // update background ref - if (doesExist(source) && background.current.name !== source.name) { + if (doesExist(source) && background.current.source !== source) { if (doesExist(background.current.url)) { URL.revokeObjectURL(background.current.url); } + background.current.source = source; background.current.url = URL.createObjectURL(source); - background.current.name = source.name; // initialize the mask if it does not exist if (doesExist(maskRef.current) && doesExist(mask) === false) { diff --git a/gui/yarn.lock b/gui/yarn.lock index 1aa99af6..f5a8f42b 100644 --- a/gui/yarn.lock +++ b/gui/yarn.lock @@ -381,6 +381,11 @@ resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24" integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw== +"@jridgewell/sourcemap-codec@^1.4.15": + version "1.4.15" + resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32" + integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg== + "@jridgewell/trace-mapping@^0.3.12": version "0.3.17" resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985" @@ -622,10 +627,12 @@ resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.1.tgz#2f4f65bb08bc368ac39c96da7b2f09140b26851b" integrity sha512-/fvYntiO1GeICvqbQ3doGDIP97vWmvFt83GKguJ6prmQM2iXZfFcq6YE8KteFyRtX2/h5Hf91BYvPodJKFYv5Q== -"@types/node@^18.15.11": - version "18.15.11" - resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f" - integrity sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q== +"@types/node@^20.11.0": + version "20.11.0" + resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.0.tgz#8e0b99e70c0c1ade1a86c4a282f7b7ef87c9552f" + integrity sha512-o9bjXmDNcF7GbM4CNQpmi+TutCgap/K3w1JyKgxAjqx41zp9qlIAVFi0IhCNsJcXolEqLWhbFbEeL0PvYm4pcQ== + dependencies: + undici-types "~5.26.4" "@types/parse-json@^4.0.0": version "4.0.0" @@ -1185,7 +1192,7 @@ css-tree@^1.1.2: mdn-data "2.0.14" source-map "^0.6.1" -csstype@^3.0.2, csstype@^3.0.6: +csstype@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== @@ -1989,10 +1996,10 @@ inherits@2: resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== -inline-style-prefixer@^6.0.0: - version "6.0.4" - resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz#4290ed453ab0e4441583284ad86e41ad88384f44" - integrity sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg== +inline-style-prefixer@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-7.0.0.tgz#991d550735d42069f528ac1bcdacd378d1305442" + integrity sha512-I7GEdScunP1dQ6IM2mQWh6v0mOYdYmH3Bp31UecKdrcUgcURTcctSe1IECdUznSHKSmsHtjrT3CwCPI1pyxfUQ== dependencies: css-in-js-utils "^3.1.0" fast-loops "^1.1.3" @@ -2437,19 +2444,19 @@ ms@2.1.3, ms@^2.1.1: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== -nano-css@^5.3.1: - version "5.3.5" - resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.3.5.tgz#3075ea29ffdeb0c7cb6d25edb21d8f7fa8e8fe8e" - integrity sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg== +nano-css@^5.6.1: + version "5.6.1" + resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.6.1.tgz#964120cb1af6cccaa6d0717a473ccd876b34c197" + integrity sha512-T2Mhc//CepkTa3X4pUhKgbEheJHYAxD0VptuqFhDbGMUWVV2m+lkNiW/Ieuj35wrfC8Zm0l7HvssQh7zcEttSw== dependencies: + "@jridgewell/sourcemap-codec" "^1.4.15" css-tree "^1.1.2" - csstype "^3.0.6" + csstype "^3.1.2" fastest-stable-stringify "^2.0.2" - inline-style-prefixer "^6.0.0" - rtl-css-js "^1.14.0" - sourcemap-codec "^1.4.8" + inline-style-prefixer "^7.0.0" + rtl-css-js "^1.16.1" stacktrace-js "^2.0.2" - stylis "^4.0.6" + stylis "^4.3.0" nanoid@3.3.3: version "3.3.3" @@ -2690,10 +2697,10 @@ react-universal-interface@^0.6.2: resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b" integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw== -react-use@^17.4.0: - version "17.4.0" - resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.4.0.tgz#cefef258b0a6c534a5c8021c2528ac6e1a4cdc6d" - integrity sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q== +react-use@^17.4.3: + version "17.4.3" + resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.4.3.tgz#7c2309024f7e554be492241292edbd11342028ed" + integrity sha512-05Oyuwn4ZccdzLD4ttLbMe8TkobdKpOj7YCFE9VhVpbXrTWZpvCcMyroRw/Banh1RIcQRcM06tfzPpY5D9sTsQ== dependencies: "@types/js-cookie" "^2.2.6" "@xobotyi/scrollbar-width" "^1.9.5" @@ -2701,7 +2708,7 @@ react-use@^17.4.0: fast-deep-equal "^3.1.3" fast-shallow-equal "^1.0.0" js-cookie "^2.2.1" - nano-css "^5.3.1" + nano-css "^5.6.1" react-universal-interface "^0.6.2" resize-observer-polyfill "^1.5.1" screenfull "^5.1.0" @@ -2774,7 +2781,7 @@ rimraf@^3.0.2: dependencies: glob "^7.1.3" -rtl-css-js@^1.14.0: +rtl-css-js@^1.16.1: version "1.16.1" resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.16.1.tgz#4b48b4354b0ff917a30488d95100fbf7219a3e80" integrity sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg== @@ -2916,11 +2923,6 @@ source-map@^0.6.0, source-map@^0.6.1: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== -sourcemap-codec@^1.4.8: - version "1.4.8" - resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" - integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== - stack-generator@^2.0.5: version "2.0.10" resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.10.tgz#8ae171e985ed62287d4f1ed55a1633b3fb53bb4d" @@ -3003,11 +3005,16 @@ strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1. resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== -stylis@4.1.3, stylis@^4.0.6: +stylis@4.1.3: version "4.1.3" resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7" integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA== +stylis@^4.3.0: + version "4.3.1" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb" + integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ== + supports-color@8.1.1: version "8.1.1" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c" @@ -3090,11 +3097,16 @@ tslib@^1.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== -tslib@^2.1.0, tslib@^2.5.0: +tslib@^2.1.0: version "2.5.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== +tslib@^2.6.2: + version "2.6.2" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== + tsutils@^3.21.0: version "3.21.0" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623" @@ -3143,6 +3155,11 @@ unbox-primitive@^1.0.2: has-symbols "^1.0.3" which-boxed-primitive "^1.0.2" +undici-types@~5.26.4: + version "5.26.5" + resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617" + integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA== + universalify@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"