From de48450730bf59177372f81e322a77754e1c8636 Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Fri, 6 Jan 2023 17:20:34 -0600
Subject: [PATCH] fix(gui): disable img2img tab for now, consistent quotes in
 jsx

---
 README.md                           |  4 ++--
 gui/src/components/ImageControl.tsx | 12 ++++++------
 gui/src/components/NumericField.tsx |  4 ++--
 gui/src/components/OnnxWeb.tsx      | 18 +++++++++++-------
 gui/src/components/Txt2Img.tsx      |  2 +-
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index b592f83b..0057e6ff 100644
--- a/README.md
+++ b/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)
diff --git a/gui/src/components/ImageControl.tsx b/gui/src/components/ImageControl.tsx
index 85744b90..6673cd19 100644
--- a/gui/src/components/ImageControl.tsx
+++ b/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}
diff --git a/gui/src/components/NumericField.tsx b/gui/src/components/NumericField.tsx
index 59af2f0d..ffe13f5a 100644
--- a/gui/src/components/NumericField.tsx
+++ b/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"
-    type="number"
+    variant='outlined'
+    type='number'
     inputProps={{ min, max, step }}
     value={value}
     onChange={(event) => {
diff --git a/gui/src/components/OnnxWeb.tsx b/gui/src/components/OnnxWeb.tsx
index e296a65c..399e7c3f 100644
--- a/gui/src/components/OnnxWeb.tsx
+++ b/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="img2img" value="2" />
-              <Tab label="settings" value="3" />
+              <Tab label='txt2img' value='txt2img' />
+              <Tab label='img2img' value='img2img' disabled />
+              <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>
diff --git a/gui/src/components/Txt2Img.tsx b/gui/src/components/Txt2Img.tsx
index 9e4bf8f2..1b8f32e9 100644
--- a/gui/src/components/Txt2Img.tsx
+++ b/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>