feat(gui): move model controls into each tab

gui/src/client/types.ts

@@ -140,9 +140,7 @@ export interface UpscaleParams {
 /**
  * Parameters for upscale requests.
  */
-export interface UpscaleReqParams {
-  prompt: string;
-  negativePrompt?: string;
+export interface UpscaleReqParams extends BaseImgParams {
   source: Blob;
 }
 

gui/src/components/OnnxWeb.tsx

@@ -8,7 +8,6 @@ import { useHash } from 'react-use/lib/useHash';
 import { useStore } from 'zustand';
 
 import { StateContext } from '../state.js';
-import { ModelControl } from './control/ModelControl.js';
 import { ImageHistory } from './ImageHistory.js';
 import { Logo } from './Logo.js';
 import { Blend } from './tab/Blend.js';
@@ -43,9 +42,6 @@ export function OnnxWeb() {
         <Box sx={{ my: 4 }}>
           <Logo />
         </Box>
-        <Box sx={{ mx: 4, my: 4 }}>
-          <ModelControl />
-        </Box>
         <TabContext value={getTab(hash)}>
           <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
             <TabList onChange={(_e, idx) => {

gui/src/components/Profiles.tsx

@@ -20,29 +20,35 @@ import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
 
-import { BaseImgParams, Txt2ImgParams } from '../client/types.js';
+import { BaseImgParams, HighresParams, Txt2ImgParams, UpscaleParams } from '../client/types.js';
 import { StateContext } from '../state.js';
 
+const { useState, Fragment } = React;
+
 export interface ProfilesProps {
+  highres: HighresParams;
   params: BaseImgParams;
-  setParams: ((params: BaseImgParams) => void) | undefined;
+  upscale: UpscaleParams;
+
+  setHighres(params: HighresParams): void;
+  setParams(params: BaseImgParams): void;
+  setUpscale(params: UpscaleParams): void;
 }
 
 export function Profiles(props: ProfilesProps) {
   const state = mustExist(useContext(StateContext));
+  const profiles = useStore(state, (s) => s.profiles);
 
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const saveProfile = useStore(state, (s) => s.saveProfile);
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const removeProfile = useStore(state, (s) => s.removeProfile);
-  const profiles = useStore(state, (s) => s.profiles);
-  const highres = useStore(state, (s) => s.highres);
-  const upscale = useStore(state, (s) => s.upscale);
-  const [dialogOpen, setDialogOpen] = React.useState(false);
-  const [profileName, setProfileName] = React.useState('');
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [profileName, setProfileName] = useState('');
   const { t } = useTranslation();
 
-  return <>
+  return <Stack direction='row' spacing={2}>
     <Autocomplete
       id="profile-select"
       options={profiles}
@@ -77,36 +83,10 @@ export function Profiles(props: ProfilesProps) {
           <Button type="button" variant="contained" onClick={() => setDialogOpen(true)}>
             <SaveIcon />
           </Button>
-          <Button component='label' variant="contained">
-            <ImageSearch />
-            <input
-              hidden
-              accept={'.json,.jpg,.jpeg,.png,.txt,.webp'}
-              type='file'
-              onChange={(event) => {
-                const { files } = event.target;
-                if (doesExist(files) && files.length > 0) {
-                  const file = mustExist(files[0]);
-                  // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                  loadParamsFromFile(file).then((newParams) => {
-                    if (doesExist(props.setParams) && doesExist(newParams)) {
-                      props.setParams({
-                        ...props.params,
-                        ...newParams,
-                      });
-                    }
-                  });
-                }
-              }}
-              onClick={(event) => {
-                event.currentTarget.value = '';
-              }}
-            />
-          </Button>
         </Stack>
       )}
       onChange={(event, value) => {
-        if (doesExist(value) && doesExist(props.setParams)) {
+        if (doesExist(value)) {
           props.setParams({
             ...value.params
           });
@@ -138,16 +118,42 @@ export function Profiles(props: ProfilesProps) {
             saveProfile({
               params: props.params,
               name: profileName,
-              highResParams: highres,
-              upscaleParams: upscale,
+              highResParams: props.highres,
+              upscaleParams: props.upscale,
             });
             setDialogOpen(false);
             setProfileName('');
           }}
         >{t('profile.save')}</Button>
       </DialogActions>
     </Dialog>
-  </>;
+    <Button component='label' variant="contained">
+      <ImageSearch />
+      <input
+        hidden
+        accept={'.json,.jpg,.jpeg,.png,.txt,.webp'}
+        type='file'
+        onChange={(event) => {
+          const { files } = event.target;
+          if (doesExist(files) && files.length > 0) {
+            const file = mustExist(files[0]);
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            loadParamsFromFile(file).then((newParams) => {
+              if (doesExist(newParams)) {
+                props.setParams({
+                  ...props.params,
+                  ...newParams,
+                });
+              }
+            });
+          }
+        }}
+        onClick={(event) => {
+          event.currentTarget.value = '';
+        }}
+      />
+    </Button>
+  </Stack>;
 }
 
 export async function loadParamsFromFile(file: File): Promise<Partial<Txt2ImgParams>> {
@@ -276,7 +282,7 @@ export async function parseAutoComment(comment: string): Promise<Partial<Txt2Img
         }
         break;
       default:
-        // unknown param
+      // unknown param
     }
   }
 

gui/src/components/card/ImageCard.tsx

@@ -38,7 +38,7 @@ export function ImageCard(props: ImageCardProps) {
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const setInpaint = useStore(state, (s) => s.setInpaint);
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setUpscale = useStore(state, (s) => s.setUpscaleTab);
+  const setUpscale = useStore(state, (s) => s.setUpscale);
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const setBlend = useStore(state, (s) => s.setBlend);
 

gui/src/components/control/HighresControl.tsx

@@ -3,17 +3,21 @@ import { Checkbox, FormControl, FormControlLabel, InputLabel, MenuItem, Select,
 import * as React from 'react';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useStore } from 'zustand';
 
-import { ConfigContext, StateContext } from '../../state.js';
+import { HighresParams } from '../../client/types.js';
+import { ConfigContext } from '../../state.js';
 import { NumericField } from '../input/NumericField.js';
 
-export function HighresControl() {
-  const { params } = mustExist(useContext(ConfigContext));
-  const state = mustExist(useContext(StateContext));
-  const highres = useStore(state, (s) => s.highres);
+export interface HighresControlProps {
+  highres: HighresParams;
+  setHighres(params: Partial<HighresParams>): void;
+}
+
+export function HighresControl(props: HighresControlProps) {
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setHighres = useStore(state, (s) => s.setHighres);
+  const { highres, setHighres } = props;
+
+  const { params } = mustExist(useContext(ConfigContext));
   const { t } = useTranslation();
 
   return <Stack direction='row' spacing={4}>
@@ -22,7 +26,7 @@ export function HighresControl() {
       control={<Checkbox
         checked={highres.enabled}
         value='check'
-        onChange={(event) => {
+        onChange={(_event) => {
           setHighres({
             enabled: highres.enabled === false,
           });