Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

hook up sharpness, structure, and creativity

Browse Source
This commit is contained in:
Mary Hipp 2024-07-18 18:27:45 -04:00 committed by psychedelicious
parent 2847f1b5ac
commit d9b217d908
5 changed files with 68 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
invokeai/frontend/web/src/features/nodes/util/graph/buildMultidiffusionUpscaleGraph.ts
View File

@ -61,8 +61,8 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis
const resizeNode = g.addNode({ const resizeNode = g.addNode({
id: RESIZE, id: RESIZE,
type: 'img_resize', type: 'img_resize',
width: upscaleInitialImage.width * SCALE, // TODO: handle floats width: ((upscaleInitialImage.width * SCALE) / 8) * 8,
height: upscaleInitialImage.height * SCALE, // TODO: handle floats height: ((upscaleInitialImage.height * SCALE) / 8) * 8,
resample_mode: "lanczos", resample_mode: "lanczos",
}) })
@ -99,8 +99,8 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis
const tiledMultidiffusionNode = g.addNode({ const tiledMultidiffusionNode = g.addNode({
id: TILED_MULTI_DIFFUSION_DENOISE_LATENTS, id: TILED_MULTI_DIFFUSION_DENOISE_LATENTS,
type: 'tiled_multi_diffusion_denoise_latents', type: 'tiled_multi_diffusion_denoise_latents',
tile_height: 1024, tile_height: 1024, // is this dependent on base model
tile_width: 1024, tile_width: 1024, // is this dependent on base model
tile_overlap: 128, tile_overlap: 128,
steps, steps,
cfg_scale, cfg_scale,
@ -109,12 +109,6 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis
denoising_end: 1 denoising_end: 1
}); });
const clipSkipNode = g.addNode({
type: 'clip_skip',
id: CLIP_SKIP,
});
let posCondNode; let negCondNode; let modelNode; let posCondNode; let negCondNode; let modelNode;
if (model.base === "sdxl") { if (model.base === "sdxl") {
@ -137,6 +131,10 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis
id: SDXL_MODEL_LOADER, id: SDXL_MODEL_LOADER,
model, model,
}); });
g.addEdge(modelNode, 'clip', posCondNode, 'clip');
g.addEdge(modelNode, 'clip', negCondNode, 'clip');
g.addEdge(modelNode, 'clip2', posCondNode, 'clip2');
g.addEdge(modelNode, 'clip2', negCondNode, 'clip2');
addSDXLLoRas(state, g, tiledMultidiffusionNode, modelNode, null, posCondNode, negCondNode); addSDXLLoRas(state, g, tiledMultidiffusionNode, modelNode, null, posCondNode, negCondNode);
} else { } else {
posCondNode = g.addNode({ posCondNode = g.addNode({
@ -154,12 +152,17 @@ export const buildMultidiffusionUpscsaleGraph = async (state: RootState): Promis
id: MAIN_MODEL_LOADER, id: MAIN_MODEL_LOADER,
model, model,
}); });
addLoRAs(state, g, tiledMultidiffusionNode, modelNode, null, clipSkipNode, posCondNode, negCondNode); const clipSkipNode = g.addNode({
} type: 'clip_skip',
id: CLIP_SKIP,
});
g.addEdge(modelNode, 'clip', clipSkipNode, 'clip'); g.addEdge(modelNode, 'clip', clipSkipNode, 'clip');
g.addEdge(clipSkipNode, 'clip', posCondNode, 'clip'); g.addEdge(clipSkipNode, 'clip', posCondNode, 'clip');
g.addEdge(clipSkipNode, 'clip', negCondNode, 'clip'); g.addEdge(clipSkipNode, 'clip', negCondNode, 'clip');
addLoRAs(state, g, tiledMultidiffusionNode, modelNode, null, clipSkipNode, posCondNode, negCondNode);
}
let vaeNode; let vaeNode;
if (vae) { if (vae) {

29
invokeai/frontend/web/src/features/parameters/components/Upscale/ParamCreativity.tsx
View File

@ -1,36 +1,33 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setSteps } from 'features/parameters/store/generationSlice';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { creativityChanged } from '../../store/upscaleSlice';
const ParamCreativity = () => { const ParamCreativity = () => {
const steps = useAppSelector((s) => s.generation.steps); const creativity = useAppSelector((s) => s.upscale.creativity);
const initial = useAppSelector((s) => s.config.sd.steps.initial); const initial = 0;
const sliderMin = useAppSelector((s) => s.config.sd.steps.sliderMin); const sliderMin = -5;
const sliderMax = useAppSelector((s) => s.config.sd.steps.sliderMax); const sliderMax = 5;
const numberInputMin = useAppSelector((s) => s.config.sd.steps.numberInputMin); const numberInputMin = -5;
const numberInputMax = useAppSelector((s) => s.config.sd.steps.numberInputMax); const numberInputMax = 5;
const coarseStep = useAppSelector((s) => s.config.sd.steps.coarseStep); const coarseStep = 1;
const fineStep = useAppSelector((s) => s.config.sd.steps.fineStep); const fineStep = 1;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const marks = useMemo(() => [sliderMin, Math.floor(sliderMax / 2), sliderMax], [sliderMax, sliderMin]); const marks = useMemo(() => [sliderMin, 0, sliderMax], [sliderMax, sliderMin]);
const onChange = useCallback( const onChange = useCallback(
(v: number) => { (v: number) => {
dispatch(setSteps(v)); dispatch(creativityChanged(v));
}, },
[dispatch] [dispatch]
); );
return ( return (
<FormControl> <FormControl>
<InformationalPopover feature="paramSteps">
<FormLabel>Creativity</FormLabel> <FormLabel>Creativity</FormLabel>
</InformationalPopover>
<CompositeSlider <CompositeSlider
value={steps} value={creativity}
defaultValue={initial} defaultValue={initial}
min={sliderMin} min={sliderMin}
max={sliderMax} max={sliderMax}
@ -40,7 +37,7 @@ const ParamCreativity = () => {
marks={marks} marks={marks}
/> />
<CompositeNumberInput <CompositeNumberInput
value={steps} value={creativity}
defaultValue={initial} defaultValue={initial}
min={numberInputMin} min={numberInputMin}
max={numberInputMax} max={numberInputMax}

29
invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSharpness.tsx
View File

@ -1,36 +1,33 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setSteps } from 'features/parameters/store/generationSlice';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { sharpnessChanged } from '../../store/upscaleSlice';
const ParamSharpness = () => { const ParamSharpness = () => {
const steps = useAppSelector((s) => s.generation.steps); const sharpness = useAppSelector((s) => s.upscale.sharpness);
const initial = useAppSelector((s) => s.config.sd.steps.initial); const initial = 0;
const sliderMin = useAppSelector((s) => s.config.sd.steps.sliderMin); const sliderMin = -5;
const sliderMax = useAppSelector((s) => s.config.sd.steps.sliderMax); const sliderMax = 5;
const numberInputMin = useAppSelector((s) => s.config.sd.steps.numberInputMin); const numberInputMin = -5;
const numberInputMax = useAppSelector((s) => s.config.sd.steps.numberInputMax); const numberInputMax = 5;
const coarseStep = useAppSelector((s) => s.config.sd.steps.coarseStep); const coarseStep = 1;
const fineStep = useAppSelector((s) => s.config.sd.steps.fineStep); const fineStep = 1;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const marks = useMemo(() => [sliderMin, Math.floor(sliderMax / 2), sliderMax], [sliderMax, sliderMin]); const marks = useMemo(() => [sliderMin, 0, sliderMax], [sliderMax, sliderMin]);
const onChange = useCallback( const onChange = useCallback(
(v: number) => { (v: number) => {
dispatch(setSteps(v)); dispatch(sharpnessChanged(v));
}, },
[dispatch] [dispatch]
); );
return ( return (
<FormControl> <FormControl>
<InformationalPopover feature="paramSteps">
<FormLabel>Sharpness</FormLabel> <FormLabel>Sharpness</FormLabel>
</InformationalPopover>
<CompositeSlider <CompositeSlider
value={steps} value={sharpness}
defaultValue={initial} defaultValue={initial}
min={sliderMin} min={sliderMin}
max={sliderMax} max={sliderMax}
@ -40,7 +37,7 @@ const ParamSharpness = () => {
marks={marks} marks={marks}
/> />
<CompositeNumberInput <CompositeNumberInput
value={steps} value={sharpness}
defaultValue={initial} defaultValue={initial}
min={numberInputMin} min={numberInputMin}
max={numberInputMax} max={numberInputMax}

29
invokeai/frontend/web/src/features/parameters/components/Upscale/ParamStructure.tsx
View File

@ -1,36 +1,33 @@
import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import { setSteps } from 'features/parameters/store/generationSlice';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { structureChanged } from '../../store/upscaleSlice';
const ParamStructure = () => { const ParamStructure = () => {
const steps = useAppSelector((s) => s.generation.steps); const structure = useAppSelector((s) => s.upscale.structure);
const initial = useAppSelector((s) => s.config.sd.steps.initial); const initial = 0;
const sliderMin = useAppSelector((s) => s.config.sd.steps.sliderMin); const sliderMin = -5;
const sliderMax = useAppSelector((s) => s.config.sd.steps.sliderMax); const sliderMax = 5;
const numberInputMin = useAppSelector((s) => s.config.sd.steps.numberInputMin); const numberInputMin = -5;
const numberInputMax = useAppSelector((s) => s.config.sd.steps.numberInputMax); const numberInputMax = 5;
const coarseStep = useAppSelector((s) => s.config.sd.steps.coarseStep); const coarseStep = 1;
const fineStep = useAppSelector((s) => s.config.sd.steps.fineStep); const fineStep = 1;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const marks = useMemo(() => [sliderMin, Math.floor(sliderMax / 2), sliderMax], [sliderMax, sliderMin]); const marks = useMemo(() => [sliderMin, 0, sliderMax], [sliderMax, sliderMin]);
const onChange = useCallback( const onChange = useCallback(
(v: number) => { (v: number) => {
dispatch(setSteps(v)); dispatch(structureChanged(v));
}, },
[dispatch] [dispatch]
); );
return ( return (
<FormControl> <FormControl>
<InformationalPopover feature="paramSteps">
<FormLabel>Structure</FormLabel> <FormLabel>Structure</FormLabel>
</InformationalPopover>
<CompositeSlider <CompositeSlider
value={steps} value={structure}
defaultValue={initial} defaultValue={initial}
min={sliderMin} min={sliderMin}
max={sliderMax} max={sliderMax}
@ -40,7 +37,7 @@ const ParamStructure = () => {
marks={marks} marks={marks}
/> />
<CompositeNumberInput <CompositeNumberInput
value={steps} value={structure}
defaultValue={initial} defaultValue={initial}
min={numberInputMin} min={numberInputMin}
max={numberInputMax} max={numberInputMax}

11
invokeai/frontend/web/src/features/parameters/store/upscaleSlice.ts
View File

@ -38,10 +38,19 @@ export const upscaleSlice = createSlice({
tiledVAEChanged: (state, action: PayloadAction<boolean>) => { tiledVAEChanged: (state, action: PayloadAction<boolean>) => {
state.tiledVAE = action.payload; state.tiledVAE = action.payload;
}, },
structureChanged: (state, action: PayloadAction<number>) => {
state.structure = action.payload;
},
creativityChanged: (state, action: PayloadAction<number>) => {
state.creativity = action.payload;
},
sharpnessChanged: (state, action: PayloadAction<number>) => {
state.sharpness = action.payload;
},
}, },
}); });
export const { upscaleModelChanged, upscaleInitialImageChanged, tiledVAEChanged } = upscaleSlice.actions; export const { upscaleModelChanged, upscaleInitialImageChanged, tiledVAEChanged, structureChanged, creativityChanged, sharpnessChanged } = upscaleSlice.actions;
export const selectUpscalelice = (state: RootState) => state.upscale; export const selectUpscalelice = (state: RootState) => state.upscale;