feat(gui): add a tab for managing the extra models (#365)

gui/src/components/OnnxWeb.tsx

@@ -1,6 +1,6 @@
 import { mustExist } from '@apextoaster/js-utils';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
-import { Box, Container, CssBaseline, Divider, PaletteMode, Tab, useMediaQuery } from '@mui/material';
+import { Box, Container, CssBaseline, Divider, Tab, useMediaQuery } from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
@@ -14,6 +14,7 @@ import { Logo } from './Logo.js';
 import { Blend } from './tab/Blend.js';
 import { Img2Img } from './tab/Img2Img.js';
 import { Inpaint } from './tab/Inpaint.js';
+import { Models } from './tab/Models.js';
 import { Settings } from './tab/Settings.js';
 import { Txt2Img } from './tab/Txt2Img.js';
 import { Upscale } from './tab/Upscale.js';
@@ -68,6 +69,9 @@ export function OnnxWeb() {
           <TabPanel value='blend'>
             <Blend />
           </TabPanel>
+          <TabPanel value='models'>
+            <Models />
+          </TabPanel>
           <TabPanel value='settings'>
             <Settings />
           </TabPanel>

gui/src/components/input/EditableList.tsx

@@ -0,0 +1,39 @@
+import { Button, Stack, TextField } from '@mui/material';
+import * as React from 'react';
+
+const { useState } = React;
+
+export interface EditableListProps<T> {
+  items: Array<T>;
+
+  newItem: (s: string) => T;
+  renderItem: (t: T) => React.ReactElement;
+  setItems: (ts: Array<T>) => void;
+}
+
+export function EditableList<T>(props: EditableListProps<T>) {
+  const { items, newItem, renderItem, setItems } = props;
+  const [nextItem, setNextItem] = useState('');
+
+  return <Stack>
+    {items.map((it, idx) => <Stack direction='row' key={idx}>
+      {renderItem(it)}
+      <Button onClick={() => setItems([
+        ...items.slice(0, idx),
+        ...items.slice(idx + 1, items.length),
+      ])}>Remove</Button>
+    </Stack>)}
+    <Stack direction='row'>
+      <TextField
+        label='Source'
+        variant='outlined'
+        value={nextItem}
+        onChange={(event) => setNextItem(event.target.value)}
+      />
+      <Button onClick={() => {
+        setItems([...items, newItem(nextItem)]);
+        setNextItem('');
+      }}>New</Button>
+    </Stack>
+  </Stack>;
+}

gui/src/components/tab/Models.tsx

@@ -0,0 +1,62 @@
+import { mustExist } from '@apextoaster/js-utils';
+import { Accordion, AccordionDetails, AccordionSummary, Button, Stack } from '@mui/material';
+import * as React from 'react';
+import { useStore } from 'zustand';
+
+import { StateContext } from '../../state.js';
+import { EditableList } from '../input/EditableList';
+
+export function Models() {
+  const state = mustExist(React.useContext(StateContext));
+  const extras = useStore(state, (s) => s.extras);
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const setExtras = useStore(state, (s) => s.setExtras);
+
+  return <Stack>
+    <Accordion>
+      <AccordionSummary>
+        Diffusion Models
+      </AccordionSummary>
+      <AccordionDetails>
+        <EditableList
+          items={extras.diffusion}
+          newItem={(s) => s}
+          renderItem={(t) => <div key={t}>{t}</div>}
+          setItems={(diffusion) => setExtras({
+            ...extras,
+            diffusion,
+          })}
+        />
+      </AccordionDetails>
+    </Accordion>
+    <Accordion>
+      <AccordionSummary>
+        Correction Models
+      </AccordionSummary>
+      <AccordionDetails>
+      </AccordionDetails>
+    </Accordion>
+    <Accordion>
+      <AccordionSummary>
+        Upscaling Models
+      </AccordionSummary>
+      <AccordionDetails>
+      </AccordionDetails>
+    </Accordion>
+    <Accordion>
+      <AccordionSummary>
+        Additional Networks
+      </AccordionSummary>
+      <AccordionDetails>
+      </AccordionDetails>
+    </Accordion>
+    <Accordion>
+      <AccordionSummary>
+        Other Sources
+      </AccordionSummary>
+      <AccordionDetails>
+      </AccordionDetails>
+    </Accordion>
+    <Button color='warning'>Save & Convert</Button>
+  </Stack>;
+}

gui/src/components/utils.ts

@@ -9,6 +9,7 @@ export const TAB_LABELS = [
   'inpaint',
   'upscale',
   'blend',
+  'models',
   'settings',
 ] as const;
 

gui/src/main.tsx

@@ -58,6 +58,7 @@ export async function renderApp(config: Config, params: ServerParams, logger: Lo
     createHighresSlice,
     createBlendSlice,
     createResetSlice,
+    createExtraSlice,
   } = createStateSlices(params);
   const state = createStore<OnnxState, [['zustand/persist', OnnxState]]>(persist((...slice) => ({
     ...createBrushSlice(...slice),
@@ -72,6 +73,7 @@ export async function renderApp(config: Config, params: ServerParams, logger: Lo
     ...createHighresSlice(...slice),
     ...createBlendSlice(...slice),
     ...createResetSlice(...slice),
+    ...createExtraSlice(...slice),
   }), {
     name: STATE_KEY,
     partialize(s) {

gui/src/state.ts

@@ -38,6 +38,10 @@ interface HistoryItem {
   retry: RetryParams;
 }
 
+interface ExtrasFile {
+  diffusion: Array<string>;
+}
+
 interface BrushSlice {
   brush: BrushParams;
 
@@ -52,6 +56,12 @@ interface DefaultSlice {
   setTheme(theme: Theme): void;
 }
 
+interface ExtraSlice {
+  extras: ExtrasFile;
+
+  setExtras(extras: Partial<ExtrasFile>): void;
+}
+
 interface HistorySlice {
   history: Array<HistoryItem>;
   limit: number;
@@ -139,7 +149,8 @@ export type OnnxState
   & HighresSlice
   & UpscaleSlice
   & BlendSlice
-  & ResetSlice;
+  & ResetSlice
+  & ExtraSlice;
 
 /**
  * Shorthand for state creator to reduce repeated arguments.
@@ -551,6 +562,21 @@ export function createStateSlices(server: ServerParams) {
     },
   });
 
+  const createExtraSlice: Slice<ExtraSlice> = (set) => ({
+    extras: {
+      diffusion: [],
+    },
+    setExtras(extras) {
+      set((prev) => ({
+        ...prev,
+        extras: {
+          ...prev.extras,
+          ...extras,
+        },
+      }));
+    },
+  });
+
   return {
     createBrushSlice,
     createDefaultSlice,
@@ -564,5 +590,6 @@ export function createStateSlices(server: ServerParams) {
     createHighresSlice,
     createBlendSlice,
     createResetSlice,
+    createExtraSlice,
   };
 }