lint(gui): clean up imports and elses
This commit is contained in:
parent
dfffbd78a5
commit
c622272554
|
@ -229,7 +229,12 @@
|
||||||
"no-redeclare": "off",
|
"no-redeclare": "off",
|
||||||
"no-restricted-syntax": [
|
"no-restricted-syntax": [
|
||||||
"error",
|
"error",
|
||||||
"ForInStatement"
|
"ForInStatement",
|
||||||
|
"WithStatement",
|
||||||
|
"MemberExpression[optional=true]",
|
||||||
|
"IfStatement[alternate.type='IfStatement']",
|
||||||
|
"UnaryExpression[operator='!']",
|
||||||
|
"BinaryExpression[operator='==='][right.value=true]"
|
||||||
],
|
],
|
||||||
"no-return-await": "error",
|
"no-return-await": "error",
|
||||||
"no-sequences": "error",
|
"no-sequences": "error",
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Card, CardContent, CircularProgress } from '@mui/material';
|
import { Card, CardContent, CircularProgress } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
|
@ -20,17 +20,21 @@ export function LoadingCard(props: LoadingCardProps) {
|
||||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||||
const pushHistory = useStore(mustExist(useContext(StateContext)), (state) => state.pushHistory);
|
const pushHistory = useStore(mustExist(useContext(StateContext)), (state) => state.pushHistory);
|
||||||
|
|
||||||
const ready = useQuery('ready', () => client.ready(props.loading), {
|
const query = useQuery('ready', () => client.ready(props.loading), {
|
||||||
// data will always be ready without this, even if the API says its not
|
// data will always be ready without this, even if the API says its not
|
||||||
cacheTime: 0,
|
cacheTime: 0,
|
||||||
refetchInterval: POLL_TIME,
|
refetchInterval: POLL_TIME,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function ready() {
|
||||||
|
return doesExist(query.data) && query.data.ready;
|
||||||
|
}
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (ready.status === 'success' && ready.data.ready) {
|
if (query.status === 'success' && query.data.ready) {
|
||||||
pushHistory(props.loading);
|
pushHistory(props.loading);
|
||||||
}
|
}
|
||||||
}, [ready.status, ready.data?.ready]);
|
}, [query.status, ready()]);
|
||||||
|
|
||||||
return <Card sx={{ maxWidth: params.width.default }}>
|
return <Card sx={{ maxWidth: params.width.default }}>
|
||||||
<CardContent sx={{ height: params.height.default }}>
|
<CardContent sx={{ height: params.height.default }}>
|
||||||
|
|
|
@ -1,17 +1,16 @@
|
||||||
import { TabContext, TabList, TabPanel } from '@mui/lab';
|
import { TabContext, TabList, TabPanel } from '@mui/lab';
|
||||||
import { Box, Container, Divider, Link, Tab, Typography } from '@mui/material';
|
import { Box, Container, Divider, Link, Tab, Typography } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
import { ModelControl } from './control/ModelControl.js';
|
||||||
import { ImageHistory } from './ImageHistory.js';
|
import { ImageHistory } from './ImageHistory.js';
|
||||||
import { Img2Img } from './tab/Img2Img.js';
|
import { Img2Img } from './tab/Img2Img.js';
|
||||||
import { Inpaint } from './tab/Inpaint.js';
|
import { Inpaint } from './tab/Inpaint.js';
|
||||||
import { ModelControl } from './control/ModelControl.js';
|
|
||||||
import { Settings } from './tab/Settings.js';
|
import { Settings } from './tab/Settings.js';
|
||||||
import { Txt2Img } from './tab/Txt2Img.js';
|
import { Txt2Img } from './tab/Txt2Img.js';
|
||||||
import { Upscale } from './tab/Upscale.js';
|
import { Upscale } from './tab/Upscale.js';
|
||||||
|
|
||||||
const { useState } = React;
|
|
||||||
|
|
||||||
export function OnnxWeb() {
|
export function OnnxWeb() {
|
||||||
const [tab, setTab] = useState('txt2img');
|
const [tab, setTab] = useState('txt2img');
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { doesExist, mustDefault, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Casino } from '@mui/icons-material';
|
import { Casino } from '@mui/icons-material';
|
||||||
import { Button, Stack, TextField } from '@mui/material';
|
import { Button, Stack, TextField } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { useContext } from 'react';
|
||||||
import { useQuery } from 'react-query';
|
import { useQuery } from 'react-query';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
|
@ -12,8 +13,6 @@ import { SCHEDULER_LABELS } from '../../strings.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';
|
||||||
|
|
||||||
const { useContext } = React;
|
|
||||||
|
|
||||||
export const PROMPT_LIMIT = 70;
|
export const PROMPT_LIMIT = 70;
|
||||||
|
|
||||||
export interface ImageControlProps {
|
export interface ImageControlProps {
|
||||||
|
|
|
@ -9,11 +9,13 @@ export interface ServerParamsErrorProps {
|
||||||
function getErrorMessage(error: unknown): string {
|
function getErrorMessage(error: unknown): string {
|
||||||
if (error instanceof Error) {
|
if (error instanceof Error) {
|
||||||
return error.message;
|
return error.message;
|
||||||
} else if (typeof error === 'string') {
|
|
||||||
return error;
|
|
||||||
} else {
|
|
||||||
return 'unknown error';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (typeof error === 'string') {
|
||||||
|
return error;
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'unknown error';
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ServerParamsError(props: ServerParamsErrorProps) {
|
export function ServerParamsError(props: ServerParamsErrorProps) {
|
||||||
|
|
|
@ -1,17 +1,16 @@
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Box, Button, Stack } from '@mui/material';
|
import { Box, Button, Stack } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { useContext } from 'react';
|
||||||
import { useMutation, useQueryClient } from 'react-query';
|
import { useMutation, useQueryClient } from 'react-query';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { IMAGE_FILTER } from '../../config.js';
|
import { IMAGE_FILTER } from '../../config.js';
|
||||||
import { ClientContext, ConfigContext, StateContext } from '../../state.js';
|
import { ClientContext, ConfigContext, StateContext } from '../../state.js';
|
||||||
import { ImageControl } from '../control/ImageControl.js';
|
import { ImageControl } from '../control/ImageControl.js';
|
||||||
|
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 { UpscaleControl } from '../control/UpscaleControl.js';
|
|
||||||
|
|
||||||
const { useContext } = React;
|
|
||||||
|
|
||||||
export function Img2Img() {
|
export function Img2Img() {
|
||||||
const { params } = mustExist(useContext(ConfigContext));
|
const { params } = mustExist(useContext(ConfigContext));
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Box, Button, FormControlLabel, Stack } from '@mui/material';
|
import { Box, Button, FormControlLabel, Stack } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { useContext } from 'react';
|
||||||
import { useMutation, useQuery, useQueryClient } from 'react-query';
|
import { useMutation, useQuery, useQueryClient } from 'react-query';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
|
@ -8,14 +9,12 @@ import { IMAGE_FILTER, STALE_TIME } from '../../config.js';
|
||||||
import { ClientContext, ConfigContext, StateContext } from '../../state.js';
|
import { ClientContext, ConfigContext, StateContext } from '../../state.js';
|
||||||
import { MASK_LABELS, NOISE_LABELS } from '../../strings.js';
|
import { MASK_LABELS, NOISE_LABELS } from '../../strings.js';
|
||||||
import { ImageControl } from '../control/ImageControl.js';
|
import { ImageControl } from '../control/ImageControl.js';
|
||||||
|
import { OutpaintControl } from '../control/OutpaintControl.js';
|
||||||
|
import { UpscaleControl } from '../control/UpscaleControl.js';
|
||||||
import { ImageInput } from '../input/ImageInput.js';
|
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 { OutpaintControl } from '../control/OutpaintControl.js';
|
|
||||||
import { QueryList } from '../input/QueryList.js';
|
import { QueryList } from '../input/QueryList.js';
|
||||||
import { UpscaleControl } from '../control/UpscaleControl.js';
|
|
||||||
|
|
||||||
const { useContext } = React;
|
|
||||||
|
|
||||||
export function Inpaint() {
|
export function Inpaint() {
|
||||||
const { params } = mustExist(useContext(ConfigContext));
|
const { params } = mustExist(useContext(ConfigContext));
|
||||||
|
|
|
@ -1,15 +1,14 @@
|
||||||
import { mustExist } from '@apextoaster/js-utils';
|
import { mustExist } from '@apextoaster/js-utils';
|
||||||
import { Box, Button, Stack } from '@mui/material';
|
import { Box, Button, Stack } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { useContext } from 'react';
|
||||||
import { useMutation, useQueryClient } from 'react-query';
|
import { useMutation, useQueryClient } from 'react-query';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { ClientContext, ConfigContext, StateContext } from '../../state.js';
|
import { ClientContext, ConfigContext, StateContext } from '../../state.js';
|
||||||
import { ImageControl } from '../control/ImageControl.js';
|
import { ImageControl } from '../control/ImageControl.js';
|
||||||
import { NumericField } from '../input/NumericField.js';
|
|
||||||
import { UpscaleControl } from '../control/UpscaleControl.js';
|
import { UpscaleControl } from '../control/UpscaleControl.js';
|
||||||
|
import { NumericField } from '../input/NumericField.js';
|
||||||
const { useContext } = React;
|
|
||||||
|
|
||||||
export function Txt2Img() {
|
export function Txt2Img() {
|
||||||
const { params } = mustExist(useContext(ConfigContext));
|
const { params } = mustExist(useContext(ConfigContext));
|
||||||
|
|
|
@ -1,15 +1,14 @@
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Box, Button, Stack } from '@mui/material';
|
import { Box, Button, Stack } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { useContext } from 'react';
|
||||||
import { useMutation, useQueryClient } from 'react-query';
|
import { useMutation, useQueryClient } from 'react-query';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { IMAGE_FILTER } from '../../config.js';
|
import { IMAGE_FILTER } from '../../config.js';
|
||||||
import { ClientContext, ConfigContext, StateContext } from '../../state.js';
|
import { ClientContext, StateContext } from '../../state.js';
|
||||||
import { ImageInput } from '../input/ImageInput.js';
|
|
||||||
import { UpscaleControl } from '../control/UpscaleControl.js';
|
import { UpscaleControl } from '../control/UpscaleControl.js';
|
||||||
|
import { ImageInput } from '../input/ImageInput.js';
|
||||||
const { useContext } = React;
|
|
||||||
|
|
||||||
export function Upscale() {
|
export function Upscale() {
|
||||||
async function uploadSource() {
|
async function uploadSource() {
|
||||||
|
@ -38,11 +37,16 @@ export function Upscale() {
|
||||||
|
|
||||||
return <Box>
|
return <Box>
|
||||||
<Stack spacing={2}>
|
<Stack spacing={2}>
|
||||||
<ImageInput filter={IMAGE_FILTER} image={params.source} label='Source' onChange={(file) => {
|
<ImageInput
|
||||||
|
filter={IMAGE_FILTER}
|
||||||
|
image={params.source}
|
||||||
|
label='Source'
|
||||||
|
onChange={(file) => {
|
||||||
setSource({
|
setSource({
|
||||||
source: file,
|
source: file,
|
||||||
});
|
});
|
||||||
}} />
|
}}
|
||||||
|
/>
|
||||||
<UpscaleControl />
|
<UpscaleControl />
|
||||||
<Button
|
<Button
|
||||||
disabled={doesExist(params.source) === false}
|
disabled={doesExist(params.source) === false}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
/* eslint-disable no-console */
|
/* eslint-disable no-console */
|
||||||
import { mustDefault, mustExist, timeout } from '@apextoaster/js-utils';
|
import { mustDefault, mustExist, timeout } from '@apextoaster/js-utils';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import ReactDOM from 'react-dom/client';
|
import { createRoot } from 'react-dom/client';
|
||||||
import { QueryClient, QueryClientProvider } from 'react-query';
|
import { QueryClient, QueryClientProvider } from 'react-query';
|
||||||
import { satisfies } from 'semver';
|
import { satisfies } from 'semver';
|
||||||
import { createStore } from 'zustand';
|
import { createStore } from 'zustand';
|
||||||
|
@ -27,7 +27,7 @@ export async function main() {
|
||||||
|
|
||||||
// prep react-dom
|
// prep react-dom
|
||||||
const appElement = mustExist(document.getElementById('app'));
|
const appElement = mustExist(document.getElementById('app'));
|
||||||
const app = ReactDOM.createRoot(appElement);
|
const app = createRoot(appElement);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// load full params from the API server and merge with the initial client config
|
// load full params from the API server and merge with the initial client config
|
||||||
|
|
Loading…
Reference in New Issue