feat(gui): add strength to img2img controls
This commit is contained in:
parent
f2e2b20f18
commit
2328c5f46a
|
@ -26,6 +26,7 @@ export interface BaseImgParams {
|
||||||
|
|
||||||
export interface Img2ImgParams extends BaseImgParams {
|
export interface Img2ImgParams extends BaseImgParams {
|
||||||
source: File;
|
source: File;
|
||||||
|
strength: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type Img2ImgResponse = Required<Omit<Img2ImgParams, 'file'>>;
|
export type Img2ImgResponse = Required<Omit<Img2ImgParams, 'file'>>;
|
||||||
|
|
|
@ -9,6 +9,7 @@ import { SCHEDULER_LABELS } from '../strings.js';
|
||||||
import { ImageCard } from './ImageCard.js';
|
import { ImageCard } from './ImageCard.js';
|
||||||
import { ImageControl } from './ImageControl.js';
|
import { ImageControl } from './ImageControl.js';
|
||||||
import { MutationHistory } from './MutationHistory.js';
|
import { MutationHistory } from './MutationHistory.js';
|
||||||
|
import { NumericField } from './NumericField.js';
|
||||||
import { QueryList } from './QueryList.js';
|
import { QueryList } from './QueryList.js';
|
||||||
|
|
||||||
const { useState } = React;
|
const { useState } = React;
|
||||||
|
@ -31,6 +32,7 @@ export function Img2Img(props: Img2ImgProps) {
|
||||||
model,
|
model,
|
||||||
platform,
|
platform,
|
||||||
scheduler,
|
scheduler,
|
||||||
|
strength,
|
||||||
source: mustExist(source), // TODO: show an error if this doesn't exist
|
source: mustExist(source), // TODO: show an error if this doesn't exist
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -50,6 +52,7 @@ export function Img2Img(props: Img2ImgProps) {
|
||||||
});
|
});
|
||||||
|
|
||||||
const [source, setSource] = useState<File>();
|
const [source, setSource] = useState<File>();
|
||||||
|
const [strength, setStrength] = useState(0.5);
|
||||||
const [params, setParams] = useState<BaseImgParams>({
|
const [params, setParams] = useState<BaseImgParams>({
|
||||||
cfg: 6,
|
cfg: 6,
|
||||||
seed: -1,
|
seed: -1,
|
||||||
|
@ -76,6 +79,16 @@ export function Img2Img(props: Img2ImgProps) {
|
||||||
<ImageControl params={params} onChange={(newParams) => {
|
<ImageControl params={params} onChange={(newParams) => {
|
||||||
setParams(newParams);
|
setParams(newParams);
|
||||||
}} />
|
}} />
|
||||||
|
<NumericField
|
||||||
|
label='Width'
|
||||||
|
min={0}
|
||||||
|
max={1}
|
||||||
|
step='any'
|
||||||
|
value={strength}
|
||||||
|
onChange={(value) => {
|
||||||
|
setStrength(value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<Button onClick={() => upload.mutate()}>Generate</Button>
|
<Button onClick={() => upload.mutate()}>Generate</Button>
|
||||||
<MutationHistory result={upload} limit={4} element={ImageCard}
|
<MutationHistory result={upload} limit={4} element={ImageCard}
|
||||||
isEqual={(a, b) => a.output === b.output}
|
isEqual={(a, b) => a.output === b.output}
|
||||||
|
|
|
@ -6,7 +6,7 @@ export interface ImageControlProps {
|
||||||
label: string;
|
label: string;
|
||||||
min: number;
|
min: number;
|
||||||
max: number;
|
max: number;
|
||||||
step: number;
|
step: number | 'any';
|
||||||
value: number;
|
value: number;
|
||||||
|
|
||||||
onChange?: (value: number) => void;
|
onChange?: (value: number) => void;
|
||||||
|
|
Loading…
Reference in New Issue