feat(gui): filter pipelines based on tab and set a reasonable default
This commit is contained in:
parent
0f11873773
commit
1dae8eea6f
|
@ -11,6 +11,7 @@ import { shallow } from 'zustand/shallow';
|
||||||
import { POLL_TIME } from '../../config.js';
|
import { POLL_TIME } from '../../config.js';
|
||||||
import { ClientContext, ConfigContext, OnnxState, StateContext } from '../../state/full.js';
|
import { ClientContext, ConfigContext, OnnxState, StateContext } from '../../state/full.js';
|
||||||
import { JobResponse, JobStatus } from '../../types/api-v2.js';
|
import { JobResponse, JobStatus } from '../../types/api-v2.js';
|
||||||
|
import { visibleIndex } from '../../utils.js';
|
||||||
|
|
||||||
const LOADING_PERCENT = 100;
|
const LOADING_PERCENT = 100;
|
||||||
const LOADING_OVERAGE = 99;
|
const LOADING_OVERAGE = 99;
|
||||||
|
@ -147,11 +148,15 @@ function getStatus(data: Maybe<Array<JobResponse>>) {
|
||||||
|
|
||||||
function getQueue(data: Maybe<Array<JobResponse>>) {
|
function getQueue(data: Maybe<Array<JobResponse>>) {
|
||||||
if (doesExist(data) && data[0].status === JobStatus.PENDING) {
|
if (doesExist(data) && data[0].status === JobStatus.PENDING) {
|
||||||
return data[0].queue;
|
const { current, total } = data[0].queue;
|
||||||
|
return {
|
||||||
|
current: visibleIndex(current),
|
||||||
|
total: total.toFixed(0),
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
current: 0,
|
current: '0',
|
||||||
total: 0,
|
total: '0',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,15 +9,17 @@ import { STALE_TIME } from '../../config.js';
|
||||||
import { ClientContext } from '../../state/full.js';
|
import { ClientContext } from '../../state/full.js';
|
||||||
import { ModelParams } from '../../types/params.js';
|
import { ModelParams } from '../../types/params.js';
|
||||||
import { QueryList } from '../input/QueryList.js';
|
import { QueryList } from '../input/QueryList.js';
|
||||||
|
import { JobType } from '../../types/api-v2.js';
|
||||||
|
|
||||||
export interface ModelControlProps {
|
export interface ModelControlProps {
|
||||||
model: ModelParams;
|
model: ModelParams;
|
||||||
setModel(params: Partial<ModelParams>): void;
|
setModel(params: Partial<ModelParams>): void;
|
||||||
|
tab: JobType;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ModelControl(props: ModelControlProps) {
|
export function ModelControl(props: ModelControlProps) {
|
||||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||||
const { model, setModel } = props;
|
const { model, setModel, tab } = props;
|
||||||
|
|
||||||
const client = mustExist(useContext(ClientContext));
|
const client = mustExist(useContext(ClientContext));
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
@ -54,6 +56,7 @@ export function ModelControl(props: ModelControlProps) {
|
||||||
name={t('parameter.pipeline')}
|
name={t('parameter.pipeline')}
|
||||||
query={{
|
query={{
|
||||||
result: pipelines,
|
result: pipelines,
|
||||||
|
selector: (result) => filterValidPipelines(result, tab),
|
||||||
}}
|
}}
|
||||||
value={model.pipeline}
|
value={model.pipeline}
|
||||||
onChange={(pipeline) => {
|
onChange={(pipeline) => {
|
||||||
|
@ -113,3 +116,46 @@ export function ModelControl(props: ModelControlProps) {
|
||||||
>{t('admin.restart')}</Button>
|
>{t('admin.restart')}</Button>
|
||||||
</Stack>;
|
</Stack>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// plugin pipelines will show up on all tabs for now
|
||||||
|
export const PIPELINE_TABS: Record<string, Array<JobType>> = {
|
||||||
|
'txt2img': [JobType.TXT2IMG],
|
||||||
|
'txt2img-sdxl': [JobType.TXT2IMG],
|
||||||
|
'panorama': [JobType.TXT2IMG, JobType.IMG2IMG],
|
||||||
|
'panorama-sdxl': [JobType.TXT2IMG, JobType.IMG2IMG],
|
||||||
|
'lpw': [JobType.TXT2IMG, JobType.IMG2IMG, JobType.INPAINT],
|
||||||
|
'img2img': [JobType.IMG2IMG],
|
||||||
|
'img2img-sdxl': [JobType.IMG2IMG],
|
||||||
|
'controlnet': [JobType.IMG2IMG],
|
||||||
|
'pix2pix': [JobType.IMG2IMG],
|
||||||
|
'inpaint': [JobType.INPAINT],
|
||||||
|
'upscale': [JobType.UPSCALE],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DEFAULT_PIPELINE: Record<JobType, string> = {
|
||||||
|
[JobType.TXT2IMG]: 'txt2img',
|
||||||
|
[JobType.IMG2IMG]: 'img2img',
|
||||||
|
[JobType.INPAINT]: 'inpaint',
|
||||||
|
[JobType.UPSCALE]: 'upscale',
|
||||||
|
[JobType.BLEND]: '',
|
||||||
|
[JobType.CHAIN]: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const FIRST_A = -1;
|
||||||
|
export const FIRST_B = +1;
|
||||||
|
|
||||||
|
export function filterValidPipelines(pipelines: Array<string>, tab: JobType): Array<string> {
|
||||||
|
const defaultPipeline = DEFAULT_PIPELINE[tab];
|
||||||
|
return pipelines.filter((pipeline) => PIPELINE_TABS[pipeline].includes(tab)).sort((a, b) => {
|
||||||
|
// put validPipelines.default first
|
||||||
|
if (a === defaultPipeline) {
|
||||||
|
return FIRST_A;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (b === defaultPipeline) {
|
||||||
|
return FIRST_B;
|
||||||
|
}
|
||||||
|
|
||||||
|
return a.localeCompare(b);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
@ -19,6 +19,7 @@ import { UpscaleControl } from '../control/UpscaleControl.js';
|
||||||
import { ImageInput } from '../input/ImageInput.js';
|
import { ImageInput } from '../input/ImageInput.js';
|
||||||
import { NumericField } from '../input/NumericField.js';
|
import { NumericField } from '../input/NumericField.js';
|
||||||
import { QueryList } from '../input/QueryList.js';
|
import { QueryList } from '../input/QueryList.js';
|
||||||
|
import { JobType } from '../../types/api-v2.js';
|
||||||
|
|
||||||
export function Img2Img() {
|
export function Img2Img() {
|
||||||
const { params } = mustExist(useContext(ConfigContext));
|
const { params } = mustExist(useContext(ConfigContext));
|
||||||
|
@ -67,7 +68,7 @@ export function Img2Img() {
|
||||||
setParams={setImg2Img}
|
setParams={setImg2Img}
|
||||||
setUpscale={setUpscale}
|
setUpscale={setUpscale}
|
||||||
/>
|
/>
|
||||||
<ModelControl model={model} setModel={setModel} />
|
<ModelControl model={model} setModel={setModel} tab={JobType.IMG2IMG} />
|
||||||
<ImageInput
|
<ImageInput
|
||||||
filter={IMAGE_FILTER}
|
filter={IMAGE_FILTER}
|
||||||
image={source}
|
image={source}
|
||||||
|
|
|
@ -21,6 +21,7 @@ import { ImageInput } from '../input/ImageInput.js';
|
||||||
import { MaskCanvas } from '../input/MaskCanvas.js';
|
import { MaskCanvas } from '../input/MaskCanvas.js';
|
||||||
import { NumericField } from '../input/NumericField.js';
|
import { NumericField } from '../input/NumericField.js';
|
||||||
import { QueryList } from '../input/QueryList.js';
|
import { QueryList } from '../input/QueryList.js';
|
||||||
|
import { JobType } from '../../types/api-v2.js';
|
||||||
|
|
||||||
export function Inpaint() {
|
export function Inpaint() {
|
||||||
const { params } = mustExist(useContext(ConfigContext));
|
const { params } = mustExist(useContext(ConfigContext));
|
||||||
|
@ -99,7 +100,7 @@ export function Inpaint() {
|
||||||
setParams={setInpaint}
|
setParams={setInpaint}
|
||||||
setUpscale={setUpscale}
|
setUpscale={setUpscale}
|
||||||
/>
|
/>
|
||||||
<ModelControl model={model} setModel={setModel} />
|
<ModelControl model={model} setModel={setModel} tab={JobType.INPAINT} />
|
||||||
{renderBanner()}
|
{renderBanner()}
|
||||||
<ImageInput
|
<ImageInput
|
||||||
filter={IMAGE_FILTER}
|
filter={IMAGE_FILTER}
|
||||||
|
|
|
@ -18,6 +18,7 @@ import { ModelControl } from '../control/ModelControl.js';
|
||||||
import { UpscaleControl } from '../control/UpscaleControl.js';
|
import { UpscaleControl } from '../control/UpscaleControl.js';
|
||||||
import { VariableControl } from '../control/VariableControl.js';
|
import { VariableControl } from '../control/VariableControl.js';
|
||||||
import { NumericField } from '../input/NumericField.js';
|
import { NumericField } from '../input/NumericField.js';
|
||||||
|
import { JobType } from '../../types/api-v2.js';
|
||||||
|
|
||||||
export function SizeControl() {
|
export function SizeControl() {
|
||||||
const { params } = mustExist(useContext(ConfigContext));
|
const { params } = mustExist(useContext(ConfigContext));
|
||||||
|
@ -98,7 +99,7 @@ export function Txt2Img() {
|
||||||
setParams={setParams}
|
setParams={setParams}
|
||||||
setUpscale={setUpscale}
|
setUpscale={setUpscale}
|
||||||
/>
|
/>
|
||||||
<ModelControl model={model} setModel={setModel} />
|
<ModelControl model={model} setModel={setModel} tab={JobType.TXT2IMG} />
|
||||||
<ImageControl selector={selectParams} onChange={setParams} />
|
<ImageControl selector={selectParams} onChange={setParams} />
|
||||||
<SizeControl />
|
<SizeControl />
|
||||||
<HighresControl selectHighres={selectHighres} setHighres={setHighres} />
|
<HighresControl selectHighres={selectHighres} setHighres={setHighres} />
|
||||||
|
|
|
@ -17,6 +17,7 @@ import { ModelControl } from '../control/ModelControl.js';
|
||||||
import { UpscaleControl } from '../control/UpscaleControl.js';
|
import { UpscaleControl } from '../control/UpscaleControl.js';
|
||||||
import { ImageInput } from '../input/ImageInput.js';
|
import { ImageInput } from '../input/ImageInput.js';
|
||||||
import { PromptInput } from '../input/PromptInput.js';
|
import { PromptInput } from '../input/PromptInput.js';
|
||||||
|
import { JobType } from '../../types/api-v2.js';
|
||||||
|
|
||||||
export function Upscale() {
|
export function Upscale() {
|
||||||
async function uploadSource() {
|
async function uploadSource() {
|
||||||
|
@ -53,7 +54,7 @@ export function Upscale() {
|
||||||
setParams={setParams}
|
setParams={setParams}
|
||||||
setUpscale={setUpscale}
|
setUpscale={setUpscale}
|
||||||
/>
|
/>
|
||||||
<ModelControl model={model} setModel={setModel} />
|
<ModelControl model={model} setModel={setModel} tab={JobType.UPSCALE} />
|
||||||
<ImageInput
|
<ImageInput
|
||||||
filter={IMAGE_FILTER}
|
filter={IMAGE_FILTER}
|
||||||
image={params.source}
|
image={params.source}
|
||||||
|
|
Loading…
Reference in New Issue