fixed tabs and imports

gui/src/components/OnnxWeb.tsx

@@ -1,16 +1,22 @@
 import { mustExist } from '@apextoaster/js-utils';
-import { TabContext, TabList } from '@mui/lab';
+import { TabContext, TabList, TabPanel } from '@mui/lab';
 import { Box, Container, Divider, PaletteMode, Tab, useMediaQuery, CssBaseline } from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
 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 { StateContext } from '../state.js';
+import { Blend } from './tab/Blend.js';
+import { Img2Img } from './tab/Img2Img.js';
+import { Inpaint } from './tab/Inpaint.js';
+import { Settings } from './tab/Settings.js';
+import { Txt2Img } from './tab/Txt2Img.js';
+import { Upscale } from './tab/Upscale.js';
 import { getTheme, getTab, TAB_LABELS } from './utils.js';
 
 export function OnnxWeb() {
@@ -39,6 +45,7 @@ export function OnnxWeb() {
         <Box sx={{ mx: 4, my: 4 }}>
           <ModelControl />
         </Box>
+
         <TabContext value={getTab(hash)}>
           <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
             <TabList onChange={(_e, idx) => {
@@ -46,11 +53,27 @@ export function OnnxWeb() {
             }}>
               {TAB_LABELS.map((name) => <Tab key={name} label={name} value={name} />)}
             </TabList>
-          </Box>
+            <TabPanel value='txt2img'>
-          <Box sx={{ mx: 4, my: 4 }}>
+              <Txt2Img />
-            <ModelControl />
+            </TabPanel>
+            <TabPanel value='img2img'>
+              <Img2Img />
+            </TabPanel>
+            <TabPanel value='inpaint'>
+              <Inpaint />
+            </TabPanel>
+            <TabPanel value='upscale'>
+              <Upscale />
+            </TabPanel>
+            <TabPanel value='blend'>
+              <Blend />
+            </TabPanel>
+            <TabPanel value='settings'>
+              <Settings />
+            </TabPanel>
           </Box>
         </TabContext>
+
         <Divider variant='middle' />
         <Box sx={{ mx: 4, my: 4 }}>
           <ImageHistory />
@@ -58,4 +81,4 @@ export function OnnxWeb() {
       </Container>
     </ThemeProvider>
   );
-}
+}

gui/src/components/tab/Settings.tsx

@@ -8,7 +8,7 @@ import { useStore } from 'zustand';
 
 import { getApiRoot } from '../../config.js';
 import { ConfigContext, StateContext, STATE_KEY } from '../../state.js';
-import { getTheme } from '../../utils.js';
+import { getTheme } from '../utils.js';
 import { NumericField } from '../input/NumericField.js';
 
 function removeBlobs(key: string, value: unknown): unknown {

gui/src/components/utils.ts

@@ -26,4 +26,4 @@ export function getTheme(currentTheme: string, preferDark: boolean): string {
     return 'light';
   }
   return currentTheme;
-}
+}

gui/src/utils.ts

@@ -25,4 +25,4 @@ export function trimHash(val: string): string {
   }
 
   return val;
-}
+}