build and pretty

ui/frontend/build_src/src/api/index.ts

@@ -31,15 +31,13 @@ export const getSaveDirectory = async () => {
   return data[0];
 };
 
-
 export const getConfig = async () => {
   const response = await fetch(`${API_URL}/app_config`);
-  console.log('getConfig response', response);
+  console.log("getConfig response", response);
   const data = await response.json();
   return data;
 };
 
-
 /**
  * post a new request for an image
  */

ui/frontend/build_src/src/components/molecules/drawImage/drawImage.css.ts

@@ -1,6 +1,5 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-
 export const DrawImageMain = style({
   position: "relative",
   width: "512px",
@@ -18,4 +17,4 @@ globalStyle(`${DrawImageMain} > img`, {
   position: "absolute",
   top: "0",
   left: "0",
-});
+});

ui/frontend/build_src/src/components/molecules/drawImage/index.tsx

@@ -8,9 +8,8 @@ type DrawImageProps = {
 };
 
 import {
-  DrawImageMain
+  DrawImageMain, //@ts-ignore
-} from //@ts-ignore
+} from "./drawImage.css.ts";
-  './drawImage.css.ts';
 
 export default function DrawImage({ imageData }: DrawImageProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -26,7 +25,6 @@ export default function DrawImage({ imageData }: DrawImageProps) {
       nativeEvent: { offsetX, offsetY },
     } = e;
 
-
     setIsDrawing(true);
   };
 
@@ -45,7 +43,6 @@ export default function DrawImage({ imageData }: DrawImageProps) {
   const _handleMouseMove = (
     e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
   ) => {
-
     if (isDrawing) {
       const canvas = canvasRef.current;
       if (canvas) {
@@ -61,9 +58,9 @@ export default function DrawImage({ imageData }: DrawImageProps) {
 
         // Sets the end of the lines drawn
         // to a round shape.
-        ctx.lineCap = 'round';
+        ctx.lineCap = "round";
 
-        ctx.strokeStyle = 'white';
+        ctx.strokeStyle = "white";
         // The cursor to start drawing
         // moves to this coordinate
         ctx.moveTo(offsetX, offsetY);
@@ -76,7 +73,6 @@ export default function DrawImage({ imageData }: DrawImageProps) {
         ctx.stroke();
       }
     }
-
   };
 
   return (

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx

@@ -21,7 +21,6 @@ export default function SeedImage(_props: any) {
 
   const isInPaintingMode = useImageCreate((state) => state.isInpainting);
 
-
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
   const _startFileSelect = () => {
@@ -49,9 +48,8 @@ export default function SeedImage(_props: any) {
 
     if (isInPaintingMode) {
       toggleInpainting();
-    };
+    }
-
+  };
-  }
 
   return (
     <div className={ImageInputDisplay}>
@@ -84,11 +82,10 @@ export default function SeedImage(_props: any) {
               <input
                 type="checkbox"
                 onChange={(e) => {
-                  toggleInpainting()
+                  toggleInpainting();
                 }}
                 checked={isInPaintingMode}
-              >
+              ></input>
-              </input>
               Use for Inpainting
             </label>
           </>

ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx

@@ -31,7 +31,6 @@ export default function DisplayPanel() {
 
   const isInPaintingMode = useImageCreate((state) => state.isInpainting);
 
-
   /* FETCHING  */
   // @ts-ignore
   const { id, options } = useImageQueue((state) => state.firstInQueue());
@@ -65,7 +64,6 @@ export default function DisplayPanel() {
   );
   const completedIds = useImageQueue((state) => state.completedImageIds);
 
-
   const init_image = useImageCreate((state) =>
     state.getValueForRequestKey("init_image")
   );
@@ -107,10 +105,7 @@ export default function DisplayPanel() {
     <div className={displayPanel}>
       <AudioDing ref={dingRef}></AudioDing>
       <div className={displayContainer}>
-        {isInPaintingMode &&
+        {isInPaintingMode && <DrawImage imageData={init_image}></DrawImage>}
-          <DrawImage imageData={init_image}></DrawImage>
-
-        }
 
         {completedImages.length > 0 && (
           <>
@@ -145,9 +140,7 @@ export default function DisplayPanel() {
             </div>
           </>
         )}
-
       </div>
-
     </div>
   );
 }

ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts

@@ -12,4 +12,3 @@ globalStyle(`${HeaderDisplayMain} > h1`, {
   fontWeight: "bold",
   marginRight: "10px",
 });
-

ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx

@@ -6,42 +6,37 @@ import { getConfig } from "../../../api";
 import StatusDisplay from "./statusDisplay";
 
 import {
-  HeaderDisplayMain
+  HeaderDisplayMain, //@ts-ignore
-} from //@ts-ignore
+} from "./headerDisplay.css.ts";
-  './headerDisplay.css.ts'
-
 
 export default function HeaderDisplay() {
-
   // but this will be moved to the status display when it is created
-  const { status, data } = useQuery(["config"], getConfig)
+  const { status, data } = useQuery(["config"], getConfig);
 
   const [version, setVersion] = useState("2.1.0");
-  const [release, setRelease] = useState('');
+  const [release, setRelease] = useState("");
 
   useEffect(() => {
-
+    if (status === "success") {
-    if (status === 'success') {
       // TODO also pass down the actual version
       const { update_branch } = data;
 
       // just hard coded for now
-      setVersion('v2.1');
+      setVersion("v2.1");
 
-      if (update_branch === 'main') {
+      if (update_branch === "main") {
-        setRelease('(stable)')
+        setRelease("(stable)");
-      }
+      } else {
-      else {
+        setRelease("(beta)");
-        setRelease('(beta)')
       }
     }
-
+  }, [status, data, setVersion, setVersion]);
-  }, [status, data, setVersion, setVersion])
-
 
   return (
     <div className={HeaderDisplayMain}>
-      <h1>Stable Diffusion UI {version} {release} </h1>
+      <h1>
+        Stable Diffusion UI {version} {release}{" "}
+      </h1>
       <StatusDisplay className="status-display"></StatusDisplay>
     </div>
   );

ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css.ts

@@ -1,6 +1,5 @@
 import { style } from "@vanilla-extract/css";
 
-
 // TODO  MOVE TO GLOBAL CSS
 export const StartingStatus = style({
   color: "#f0ad4e",

ui/frontend/build_src/src/main.tsx

@@ -6,7 +6,6 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import { enableMapSet } from "immer";
-import Editor from "./pages/Home";
 
 import App from "./app";
 

ui/frontend/build_src/src/stores/imageCreateStore.ts

@@ -17,37 +17,37 @@ export type ImageRequest = {
   num_inference_steps: number;
   guidance_scale: number;
   width:
-  | 128
+    | 128
-  | 192
+    | 192
-  | 256
+    | 256
-  | 320
+    | 320
-  | 384
+    | 384
-  | 448
+    | 448
-  | 512
+    | 512
-  | 576
+    | 576
-  | 640
+    | 640
-  | 704
+    | 704
-  | 768
+    | 768
-  | 832
+    | 832
-  | 896
+    | 896
-  | 960
+    | 960
-  | 1024;
+    | 1024;
   height:
-  | 128
+    | 128
-  | 192
+    | 192
-  | 256
+    | 256
-  | 320
+    | 320
-  | 384
+    | 384
-  | 448
+    | 448
-  | 512
+    | 512
-  | 576
+    | 576
-  | 640
+    | 640
-  | 704
+    | 704
-  | 768
+    | 768
-  | 832
+    | 832
-  | 896
+    | 896
-  | 960
+    | 960
-  | 1024;
+    | 1024;
   // allow_nsfw: boolean;
   turbo: boolean;
   use_cpu: boolean;
@@ -219,7 +219,7 @@ export const useImageCreate = create<ImageCreateState>(
         produce((state) => {
           const isSeting =
             typeof state.getValueForRequestKey("use_face_correction") ===
-              "string"
+            "string"
               ? null
               : "GFPGANv1.3";
           state.requestOptions.use_face_correction = isSeting;
@@ -289,7 +289,6 @@ export const useImageCreate = create<ImageCreateState>(
           state.isInpainting = !state.isInpainting;
         })
       );
-    }
+    },
-
   }))
 );

ui/frontend/dist/index.css

@@ -1 +1 @@
-._1qevocv0{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1qevocv1{grid-area:header}._1qevocv2{grid-area:create;overflow:auto}._1qevocv3{grid-area:display;overflow:auto}._1qevocv4{grid-area:footer}@media screen and (max-width: 800px){._1qevocv0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}.starting{color:#f0ad4e}.error{color:#d9534f}.success{color:#5cb85c}.header-display{color:#fff;display:flex;align-items:center;justify-content:center}.status-display{margin-left:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1hnlbmt0:disabled{background-color:#264d8d80}._1yvg52n0{position:relative;width:512px;height:512px}._1yvg52n1{width:512px;height:512px;background-color:#000;display:flex;justify-content:center;align-items:center}._1yvg52n2{width:512px;height:512px;object-fit:contain}._1yvg52n3{position:absolute;bottom:10px;left:10px}._1yvg52n4{position:absolute;bottom:10px;right:10px}._688lcr0{padding:10px}._688lcr1{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}._688lcr2{width:512px;height:100%}._688lcr3{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}._688lcr4{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}
+._1qevocv0{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1qevocv1{grid-area:header}._1qevocv2{grid-area:create;overflow:auto}._1qevocv3{grid-area:display;overflow:auto}._1qevocv4{grid-area:footer}@media screen and (max-width: 800px){._1qevocv0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}._1jo75h0{color:#f0ad4e}._1jo75h1{color:#d9534f}._1jo75h2{color:#5cb85c}._1v2cc580{color:#fff;display:flex;align-items:center;justify-content:center}._1v2cc580>h1{font-size:1.5em;font-weight:700;margin-right:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1hnlbmt0:disabled{background-color:#264d8d80}._1yvg52n0{position:relative;width:512px;height:512px}._1yvg52n1{width:512px;height:512px;background-color:#000;display:flex;justify-content:center;align-items:center}._1yvg52n2{width:512px;height:512px;object-fit:contain}._1yvg52n3{position:absolute;bottom:10px;left:10px}._1yvg52n4{position:absolute;bottom:10px;right:10px}.fma0ug0{position:relative;width:512px;height:512px}.fma0ug0>canvas{position:absolute;top:0;left:0;opacity:.5}.fma0ug0>img{position:absolute;top:0;left:0}._688lcr0{padding:10px}._688lcr1{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}._688lcr2{width:512px;height:100%}._688lcr3{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}._688lcr4{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}