fix(gui): disable img2img tab for now, consistent quotes in jsx

README.md

@@ -1,4 +1,4 @@
-# ONNX Web UI
+# ONNX Web
 
 This is a rudimentary web UI for ONNX models, providing a way to run GPU-accelerated models on Windows and even AMD
 with a remote web interface.
@@ -30,7 +30,7 @@ Based on guides by:
 
 ## Contents
 
-- [ONNX Web UI](#onnx-web-ui)
+- [ONNX Web](#onnx-web)
   - [Features](#features)
   - [Contents](#contents)
   - [Setup](#setup)

gui/src/components/ImageControl.tsx

@@ -20,9 +20,9 @@ export function ImageControl(props: ImageControlProps) {
   const { params } = props;
 
   return <Stack spacing={2}>
-    <Stack direction="row" spacing={4}>
+    <Stack direction='row' spacing={4}>
       <NumericField
-        label="CFG"
+        label='CFG'
         min={0}
         max={30}
         step={1}
@@ -37,7 +37,7 @@ export function ImageControl(props: ImageControlProps) {
         }}
       />
       <NumericField
-        label="Steps"
+        label='Steps'
         min={1}
         max={150}
         step={1}
@@ -52,9 +52,9 @@ export function ImageControl(props: ImageControlProps) {
         }}
       />
     </Stack>
-    <Stack direction="row" spacing={4}>
+    <Stack direction='row' spacing={4}>
       <NumericField
-        label="Width"
+        label='Width'
         min={8}
         max={512}
         step={8}
@@ -69,7 +69,7 @@ export function ImageControl(props: ImageControlProps) {
         }}
       />
       <NumericField
-        label="Height"
+        label='Height'
         min={8}
         max={512}
         step={8}

gui/src/components/NumericField.tsx

@@ -16,8 +16,8 @@ export function NumericField(props: ImageControlProps) {
   const { label, min, max, step, value } = props;
   return <TextField
     label={label}
-    variant="outlined"
+    variant='outlined'
-    type="number"
+    type='number'
     inputProps={{ min, max, step }}
     value={value}
     onChange={(event) => {

gui/src/components/OnnxWeb.tsx

@@ -19,7 +19,7 @@ export interface OnnxWebProps {
 export function OnnxWeb(props: OnnxWebProps) {
   const { client, config } = props;
 
-  const [tab, setTab] = useState('1');
+  const [tab, setTab] = useState('txt2img');
   const [model, setModel] = useState(config.default.model);
   const [platform, setPlatform] = useState(config.default.platform);
 
@@ -67,20 +67,24 @@ export function OnnxWeb(props: OnnxWebProps) {
             <TabList onChange={(_e, idx) => {
               setTab(idx);
             }}>
-              <Tab label="txt2img" value="1" />
+              <Tab label='txt2img' value='txt2img' />
-              <Tab label="img2img" value="2" />
+              <Tab label='img2img' value='img2img' disabled />
-              <Tab label="settings" value="3" />
+              <Tab label='settings' value='settings' />
             </TabList>
           </Box>
-          <TabPanel value="1">
+          <TabPanel value='txt2img'>
             <Txt2Img client={client} config={config} model={model} platform={platform} />
           </TabPanel>
-          <TabPanel value="2">
+          <TabPanel value='img2img'>
             <Box>
               img2img using {model}
             </Box>
           </TabPanel>
-          <TabPanel value="3">settings for onnx-web</TabPanel>
+          <TabPanel value='settings'>
+            <Box>
+              settings for onnx-web
+            </Box>
+          </TabPanel>
         </TabContext>
       </Container>
     </div>

gui/src/components/Txt2Img.tsx

@@ -65,7 +65,7 @@ export function Txt2Img(props: Txt2ImgProps) {
       <ImageControl params={params} onChange={(newParams) => {
         setParams(newParams);
       }} />
-      <TextField label="Prompt" variant="outlined" value={prompt} onChange={(event) => {
+      <TextField label='Prompt' variant='outlined' value={prompt} onChange={(event) => {
         setPrompt(event.target.value);
       }} />
       <Button onClick={() => generate.mutate()}>Generate</Button>