Merge pull request #18 from caranicas/beta-react-display

Beta react display

ui/frontend/build_src/src/App.tsx

@@ -1,7 +1,7 @@
 import { ReactLocation, Router } from "@tanstack/react-location";
 
-import Home from "./components/layouts/Home";
-import Settings from "./components/layouts/Settings";
+import Home from "./pages/Home";
+import Settings from "./pages/Settings";
 
 const location = new ReactLocation();
 

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

@@ -2,7 +2,7 @@
  * basic server health
  */
 
-import type { ImageRequest } from "../store/imageCreateStore";
+import type { ImageRequest } from "../stores/imageCreateStore";
 
 // when we are on dev we want to specifiy 9000 as the port for the backend
 // when we are on prod we want be realtive to the current url

ui/frontend/build_src/src/components/atoms/modifierTag/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useImageCreate } from "../../../store/imageCreateStore";
+import { useImageCreate } from "../../../stores/imageCreateStore";
 
 type ModifierTagProps = {
   name: string;

ui/frontend/build_src/src/components/layouts/Home/index.tsx

@@ -1,49 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import {
-  AppLayout,
-  HeaderLayout,
-  CreateLayout,
-  DisplayLayout,
-  FooterLayout, // @ts-ignore
-} from "./home.css.ts";
-
-import { useQuery } from "@tanstack/react-query";
-import { getSaveDirectory } from "../../../api";
-import { useImageCreate } from "../../../store/imageCreateStore";
-
-// Todo - import components here
-import HeaderDisplay from "../../organisms/headerDisplay";
-import CreationPanel from "../../organisms/creationPanel";
-import DisplayPanel from "../../organisms/displayPanel";
-import FooterDisplay from "../../organisms/footerDisplay";
-
-function Editor() {
-  // Get the original save directory
-  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
-  const { status, data } = useQuery(["SaveDir"], getSaveDirectory);
-  useEffect(() => {
-    if (status === "success") {
-      setRequestOption("save_to_disk_path", data);
-    }
-  }, [setRequestOption, status, data]);
-
-  return (
-    <div className={AppLayout}>
-      <header className={HeaderLayout}>
-        <HeaderDisplay></HeaderDisplay>
-      </header>
-      <nav className={CreateLayout}>
-        <CreationPanel></CreationPanel>
-      </nav>
-      <main className={DisplayLayout}>
-        <DisplayPanel></DisplayPanel>
-      </main>
-      <footer className={FooterLayout}>
-        <FooterDisplay></FooterDisplay>
-      </footer>
-    </div>
-  );
-}
-
-export default Editor;

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

@@ -0,0 +1,92 @@
+// @ts-nocheck
+import React, { useRef, useEffect } from "react";
+
+// https://github.com/embiem/react-canvas-draw
+
+type DrawImageProps = {
+  imageData: string;
+};
+
+export default function DrawImage({ imageData }: DrawImageProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const draw = (ctx: CanvasRenderingContext2D) => {
+    ctx.fillStyle = "red";
+    ctx.fillRect(0, 0, 100, 100);
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      if (imageData) {
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          const img = new Image();
+          img.onload = () => {
+            ctx.drawImage(img, 0, 0);
+          };
+          img.src = imageData;
+        }
+      } else {
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          draw(ctx);
+        }
+      }
+    } else {
+      console.log("canvas is null");
+    }
+  }, [imageData, draw]);
+
+  const _handleMouseDown = (
+    e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
+  ) => {
+    console.log("mouse down", e);
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const ctx = canvas.getContext("2d");
+      ctx.strokeStyle = "#ff0000";
+      const {
+        nativeEvent: { x, y },
+      } = e;
+
+      console.log("x: " + x + " y: " + y);
+
+      ctx.moveTo(x, y);
+      ctx.lineTo(x + 1, y + 1);
+      ctx.stroke();
+    }
+  };
+
+  const _handleMouseUp = (
+    e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
+  ) => {
+    console.log("mouse up");
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const ctx = canvas.getContext("2d");
+      // if (ctx) {
+      //   draw(ctx);
+      // }
+      const {
+        nativeEvent: { x, y },
+      } = e;
+      ctx.moveTo(x, y);
+      ctx.lineTo(x + 1, y + 1);
+      ctx.stroke();
+      ctx.closePath();
+    }
+  };
+
+  return (
+    <div>
+      <canvas
+        ref={canvasRef}
+        width={512}
+        height={512}
+        onMouseDown={_handleMouseDown}
+        onMouseUp={_handleMouseUp}
+      ></canvas>
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+import { style } from "@vanilla-extract/css";
+
+export const generatedImage = style({
+  position: "relative",
+  width: "512px",
+  height: "512px",
+});
+
+export const imageContain = style({
+  width: "512px",
+  height: "512px",
+  backgroundColor: "black",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+});
+
+export const image = style({
+  width: "512px",
+  height: "512px",
+  objectFit: "contain",
+});
+
+export const saveButton = style({
+  position: "absolute",
+  bottom: "10px",
+  left: "10px",
+});
+
+export const useButton = style({
+  position: "absolute",
+  bottom: "10px",
+  right: "10px",
+});

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

@@ -1,11 +1,14 @@
 import React, { useCallback } from "react";
 
-import {
-  ImageRequest,
-  useImageCreate,
-} from "../../../../store/imageCreateStore";
+import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
 
-import "./generatedImage.css";
+import {
+  generatedImage,
+  imageContain,
+  image,
+  saveButton,
+  useButton, //@ts-ignore
+} from "./generatedImage.css.ts";
 
 type GeneretaedImageProps = {
   imageData: string;
@@ -35,10 +38,8 @@ export default function GeneratedImage({
     //Most important information is the prompt
     let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_");
     underscoreName = underscoreName.substring(0, 100);
-
     // name and the top level metadata
     let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`;
-
     // Add the face correction and upscale
     if (use_face_correction) {
       fileName += `_FaceCorrection-${use_face_correction}`;
@@ -46,13 +47,10 @@ export default function GeneratedImage({
     if (use_upscale) {
       fileName += `_Upscale-${use_upscale}`;
     }
-
     // Add the width and height
     fileName += `_${width}x${height}`;
-
     // add the file extension
     fileName += `.png`;
-
     // return fileName
     return fileName;
   };
@@ -71,14 +69,14 @@ export default function GeneratedImage({
   // className={[statusClass, className].join(" ")}
 
   return (
-    <div className={["generated-image", className].join(" ")}>
+    <div className={[generatedImage, className].join(" ")}>
       <p>{metadata.prompt}</p>
-      <div className="image-contain">
-        <img src={imageData} alt="generated" />
-        <button id="save-button" onClick={_handleSave}>
+      <div className={imageContain}>
+        <img className={image} src={imageData} alt="generated" />
+        <button className={saveButton} onClick={_handleSave}>
           Save
         </button>
-        <button id="use-button" onClick={_handleUseAsInput}>
+        <button className={useButton} onClick={_handleUseAsInput}>
           Use as Input
         </button>
       </div>

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx

@@ -1,5 +1,7 @@
-import React, { useState } from "react";
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import React from "react";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+
+import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
   MenuButton, //@ts-ignore
@@ -16,11 +18,8 @@ export default function GpuSettings() {
 
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
-  const [gpuOpen, setGpuOpen] = useState(false);
-
-  const toggleGpuOpen = () => {
-    setGpuOpen(!gpuOpen);
-  };
+  const gpuOpen = useCreateUI((state) => state.isOpenAdvGPUSettings);
+  const toggleGpuOpen = useCreateUI((state) => state.toggleAdvGPUSettings);
 
   return (
     <div>

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx

@@ -1,5 +1,7 @@
-import React, { useState } from "react";
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import React from "react";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+
+import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
   MenuButton, //@ts-ignore
@@ -7,7 +9,6 @@ import {
 
 export default function ImprovementSettings() {
   // these are conditionals that should be retired and inferred from the store
-  const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
   const isUsingFaceCorrection = useImageCreate((state) =>
     state.isUsingFaceCorrection()
   );
@@ -24,17 +25,14 @@ export default function ImprovementSettings() {
     (state) => state.toggleUseFaceCorrection
   );
 
-  const toggleUseUpscaling = useImageCreate(
-    (state) => state.toggleUseUpscaling
-  );
-
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
-  const [improvementOpen, setImprovementOpen] = useState(true);
-
-  const toggleImprovementOpen = () => {
-    setImprovementOpen(!improvementOpen);
-  };
+  const improvementOpen = useCreateUI(
+    (state) => state.isOpenAdvImprovementSettings
+  );
+  const toggleImprovementOpen = useCreateUI(
+    (state) => state.toggleAdvImprovementSettings
+  );
 
   return (
     <div>
@@ -59,21 +57,16 @@ export default function ImprovementSettings() {
           </div>
           <div>
             <label>
-              <input
-                type="checkbox"
-                checked={isUsingUpscaling}
-                onChange={(e) => toggleUseUpscaling()}
-              />
               Upscale the image to 4x resolution using
               <select
                 id="upscale_model"
                 name="upscale_model"
-                disabled={!isUsingUpscaling}
                 value={use_upscale}
                 onChange={(e) => {
                   setRequestOption("use_upscale", e.target.value);
                 }}
               >
+                <option value="">No Uscaling</option>
                 <option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
                 <option value="RealESRGAN_x4plus_anime_6B">
                   RealESRGAN_x4plus_anime_6B

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
-import { useImageCreate } from "../../../../store/imageCreateStore";
+import { useCreateUI } from "../creationPanelUIStore";
+
 import {
   AdvancedSettingsList,
   AdvancedSettingItem, // @ts-ignore
@@ -30,12 +31,12 @@ function SettingsList() {
 }
 
 export default function AdvancedSettings() {
-  const advancedSettingsIsOpen = useImageCreate(
-    (state) => state.uiOptions.advancedSettingsIsOpen
+  const advancedSettingsIsOpen = useCreateUI(
+    (state) => state.isOpenAdvancedSettings
   );
 
-  const toggleAdvancedSettingsIsOpen = useImageCreate(
-    (state) => state.toggleAdvancedSettingsIsOpen
+  const toggleAdvancedSettingsIsOpen = useCreateUI(
+    (state) => state.toggleAdvancedSettings
   );
 
   return (

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
   MenuButton, //@ts-ignore
@@ -45,11 +46,10 @@ export default function PropertySettings() {
     state.getValueForRequestKey("height")
   );
 
-  const [propertyOpen, setPropertyOpen] = useState(true);
-
-  const togglePropertyOpen = () => {
-    setPropertyOpen(!propertyOpen);
-  };
+  const propertyOpen = useCreateUI((state) => state.isOpenAdvPropertySettings);
+  const togglePropertyOpen = useCreateUI(
+    (state) => state.toggleAdvPropertySettings
+  );
 
   return (
     <div>

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx

@@ -1,5 +1,7 @@
-import React, { useState } from "react";
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import React from "react";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+
+import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
   MenuButton, //@ts-ignore
@@ -23,11 +25,10 @@ export default function WorkflowSettings() {
     (state) => state.toggleSoundEnabled
   );
 
-  const [workflowOpen, setWorkflowOpen] = useState(true);
-
-  const toggleWorkflowOpen = () => {
-    setWorkflowOpen(!workflowOpen);
-  };
+  const workflowOpen = useCreateUI((state) => state.isOpenAdvWorkflowSettings);
+  const toggleWorkflowOpen = useCreateUI(
+    (state) => state.toggleAdvWorkflowSettings
+  );
 
   return (
     <div>

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import ModifierTag from "../../../../atoms/modifierTag";
 
 export default function ActiveTags() {

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

@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from "react";
-import { useImageCreate } from "../../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../stores/imageCreateStore";
 
 import {
   CreationBasicMain,

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
-import { useImageCreate } from "../../../../../store/imageCreateStore";
-import { useImageQueue } from "../../../../../store/imageQueueStore";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+import { useImageQueue } from "../../../../../stores/imageQueueStore";
 import { v4 as uuidv4 } from "uuid";
 
 import { useRandomSeed } from "../../../../../utils";
@@ -14,6 +14,7 @@ export default function MakeButton() {
   const parallelCount = useImageCreate((state) => state.parallelCount);
   const builtRequest = useImageCreate((state) => state.builtRequest);
   const addNewImage = useImageQueue((state) => state.addNewImage);
+  const hasQueue = useImageQueue((state) => state.hasQueuedImages());
   const isRandomSeed = useImageCreate((state) => state.isRandomSeed());
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
@@ -72,7 +73,11 @@ export default function MakeButton() {
   };
 
   return (
-    <button className={MakeButtonStyle} onClick={makeImages}>
+    <button
+      className={MakeButtonStyle}
+      onClick={makeImages}
+      disabled={hasQueue}
+    >
       Make
     </button>
   );

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts

@@ -8,4 +8,8 @@ export const MakeButtonStyle = style({
   color: "white",
   padding: "8px",
   borderRadius: "5px",
+
+  ":disabled": {
+    backgroundColor: "rgb(38, 77, 141, 0.5)",
+  },
 });

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

@@ -8,7 +8,7 @@ import {
   ImageFixer,
   XButton, // @ts-ignore
 } from "./seedImage.css.ts";
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
 
 // TODO : figure out why this needs props to be passed in.. fixes a type error
 // when the component is used in the parent component

ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts

@@ -0,0 +1,92 @@
+import create from "zustand";
+import produce from "immer";
+import { persist } from "zustand/middleware";
+import { devtools } from "zustand/middleware";
+
+export type ImageCreationUIOptions = {
+  isOpenAdvancedSettings: boolean;
+  isOpenAdvImprovementSettings: boolean;
+  isOpenAdvPropertySettings: boolean;
+  isOpenAdvWorkflowSettings: boolean;
+  isOpenAdvGPUSettings: boolean;
+
+  isOpenImageModifier: boolean;
+  imageMofidiersMap: object;
+
+  toggleAdvancedSettings: () => void;
+  toggleAdvImprovementSettings: () => void;
+  toggleAdvPropertySettings: () => void;
+  toggleAdvWorkflowSettings: () => void;
+  toggleAdvGPUSettings: () => void;
+
+  toggleImageModifier: () => void;
+  // addImageModifier: (modifier: string) => void;
+};
+
+export const useCreateUI = create<ImageCreationUIOptions>(
+  //@ts-ignore
+  persist(
+    (set, get) => ({
+      isOpenAdvancedSettings: false,
+      isOpenAdvImprovementSettings: false,
+      isOpenAdvPropertySettings: false,
+      isOpenAdvWorkflowSettings: false,
+      isOpenAdvGPUSettings: false,
+      isOpenImageModifier: false,
+      imageMofidiersMap: {},
+
+      toggleAdvancedSettings: () => {
+        set(
+          produce((state) => {
+            state.isOpenAdvancedSettings = !state.isOpenAdvancedSettings;
+          })
+        );
+      },
+
+      toggleAdvImprovementSettings: () => {
+        set(
+          produce((state) => {
+            state.isOpenAdvImprovementSettings =
+              !state.isOpenAdvImprovementSettings;
+          })
+        );
+      },
+
+      toggleAdvPropertySettings: () => {
+        set(
+          produce((state) => {
+            state.isOpenAdvPropertySettings = !state.isOpenAdvPropertySettings;
+          })
+        );
+      },
+
+      toggleAdvWorkflowSettings: () => {
+        set(
+          produce((state) => {
+            state.isOpenAdvWorkflowSettings = !state.isOpenAdvWorkflowSettings;
+          })
+        );
+      },
+
+      toggleAdvGPUSettings: () => {
+        set(
+          produce((state) => {
+            state.isOpenAdvGPUSettings = !state.isOpenAdvGPUSettings;
+          })
+        );
+      },
+
+      toggleImageModifier: () => {
+        set(
+          produce((state) => {
+            state.isOpenImageModifier = !state.isOpenImageModifier;
+          })
+        );
+      },
+    }),
+    {
+      name: "createUI",
+      // getStorage: () => localStorage,
+    }
+  )
+);

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx

@@ -3,7 +3,8 @@ import React, { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { loadModifications } from "../../../../api";
 
-import { useImageCreate } from "../../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../stores/imageCreateStore";
+import { useCreateUI } from "../creationPanelUIStore";
 
 import ModifierTag from "../../../atoms/modifierTag";
 
@@ -12,8 +13,6 @@ type ModifierListProps = {
 };
 
 function ModifierList({ tags }: ModifierListProps) {
-  // const setImageOptions = useImageCreate((state) => state.setImageOptions);
-  // const imageOptions = useImageCreate((state) => state.imageOptions);
   return (
     <ul className="modifier-list">
       {tags.map((tag) => (
@@ -50,13 +49,22 @@ function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
 }
 
 export default function ImageModifers() {
-  const { status, data } = useQuery(["modifications"], loadModifications);
+  // const { status, data } = useQuery(["modifications"], loadModifications);
 
-  const imageModifierIsOpen = useImageCreate(
-    (state) => state.uiOptions.imageModifierIsOpen
-  );
-  const toggleImageModifiersIsOpen = useImageCreate(
-    (state) => state.toggleImageModifiersIsOpen
+  // const imageModifierIsOpen = useImageCreate(
+  //   (state) => state.uiOptions.imageModifierIsOpen
+  // );
+  // const toggleImageModifiersIsOpen = useImageCreate(
+  //   (state) => state.toggleImageModifiersIsOpen
+  // );
+
+  const allModifiers = useImageCreate((state) => state.allModifiers);
+
+  console.log("allModifiers", allModifiers);
+
+  const imageModifierIsOpen = useCreateUI((state) => state.isOpenImageModifier);
+  const toggleImageModifiersIsOpen = useCreateUI(
+    (state) => state.toggleImageModifier
   );
 
   const handleClick = () => {
@@ -77,8 +85,9 @@ export default function ImageModifers() {
       {/* @ts-ignore */}
       {imageModifierIsOpen &&
         // @ts-ignore
-        data.map((item, index) => {
+        allModifiers.map((item, index) => {
           return (
+            // @ts-ignore
             <ModifierGrouping key={item[0]} title={item[0]} tags={item[1]} />
           );
         })}

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/modifiers.mock.ts

@@ -0,0 +1,18 @@
+const Mockifiers = [
+  [
+    "Drawing Style",
+    [
+      "Cel Shading",
+      "Children's Drawing",
+      "Crosshatch",
+      "Detailed and Intricate",
+      "Doodle",
+      "Dot Art",
+      "Line Art",
+      "Sketch",
+    ],
+  ],
+  ["Visual Style", ["2D", "8-bit", "16-bit", "Anaglyph", "Anime", "CGI"]],
+];
+
+export default Mockifiers;

ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css

@@ -1,22 +0,0 @@
-.display-panel {
-  padding: 10px;
-}
-
-#display-container {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-#previous-images {
-  margin-left: 30px;
-  display: flex;
-  flex: auto;
-  flex-wrap: wrap;
-}
-
-.previous-image {
-  margin: 0 10px;
-}

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

@@ -0,0 +1,31 @@
+import { style } from "@vanilla-extract/css";
+
+export const displayPanel = style({
+  padding: "10px",
+  // width: '512px',
+  // height: '512px',
+});
+
+export const displayContainer = style({
+  display: "flex",
+  flexDirection: "row",
+  height: "100%",
+  width: "100%",
+  overflow: "hidden",
+});
+
+export const CurrentDisplay = style({
+  width: "512px",
+  height: "100%",
+});
+
+export const previousImages = style({
+  marginLeft: "30px",
+  display: "flex",
+  flex: "auto",
+  flexWrap: "wrap",
+});
+
+export const previousImage = style({
+  margin: "0 10px",
+});

ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/generatedImage.css

@@ -1,19 +0,0 @@
-.generated-image {
-  position: relative;
-}
-
-.image-contain {
-  position: relative;
-}
-
-#save-button {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-}
-
-#use-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
-import { useImageQueue } from "../../../store/imageQueueStore";
+import { useImageQueue } from "../../../stores/imageQueueStore";
 
-import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
+import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
@@ -9,9 +9,16 @@ import { doMakeImage, MakeImageKey } from "../../../api";
 
 import AudioDing from "./audioDing";
 
-import GeneratedImage from "./generatedImage";
+import GeneratedImage from "../../molecules/generatedImage";
+// import DrawImage from "../../molecules/drawImage";
 
-import "./displayPanel.css";
+import {
+  displayPanel,
+  displayContainer,
+  CurrentDisplay,
+  previousImages,
+  previousImage, //@ts-ignore
+} from "./displayPanel.css.ts";
 
 type CompletedImagesType = {
   id: string;
@@ -89,18 +96,22 @@ export default function DisplayPanel() {
   }, [setCompletedImages, queryClient, completedIds]);
 
   return (
-    <div className="display-panel">
-      <h1>Display Panel</h1>
+    <div className={displayPanel}>
       <AudioDing ref={dingRef}></AudioDing>
       {completedImages.length > 0 && (
-        <div id="display-container">
-          <GeneratedImage
-            key={completedImages[0].id}
-            imageData={completedImages[0].data}
-            metadata={completedImages[0].info}
-          />
+        <div className={displayContainer}>
+          <div className={CurrentDisplay}>
+            {/* TODO Put the in painting controls here */}
+            {/* <DrawImage imageData={completedImages[0].data}></DrawImage> */}
 
-          <div id="previous-images">
+            <GeneratedImage
+              key={completedImages[0].id}
+              imageData={completedImages[0].data}
+              metadata={completedImages[0].info}
+            />
+          </div>
+
+          <div className={previousImages}>
             {completedImages.map((image, index) => {
               if (void 0 !== image) {
                 if (index == 0) {
@@ -109,7 +120,7 @@ export default function DisplayPanel() {
 
                 return (
                   <GeneratedImage
-                    className="previous-image"
+                    className={previousImage}
                     key={image.id}
                     imageData={image.data}
                     metadata={image.info}

ui/frontend/build_src/src/main.tsx

@@ -6,9 +6,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import { enableMapSet } from "immer";
-import Editor from "./components/layouts/Home";
+import Editor from "./pages/Home";
 
-import App from "./App";
+import App from "./app";
 
 import "./styles.css.ts";
 

ui/frontend/build_src/src/pages/Experimental/index.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Beta() {
+  return (
+    <div>
+      <h1>Beta</h1>
+    </div>
+  );
+}

ui/frontend/build_src/src/pages/Home/index.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from "react";
+
+import {
+  AppLayout,
+  HeaderLayout,
+  CreateLayout,
+  DisplayLayout,
+  FooterLayout, // @ts-ignore
+} from "./home.css.ts";
+
+import { useQuery } from "@tanstack/react-query";
+import { getSaveDirectory, loadModifications } from "../../api";
+import Mockifiers from "../../components/organisms/creationPanel/imageModifiers/modifiers.mock";
+
+import { useImageCreate } from "../../stores/imageCreateStore";
+
+// Todo - import components here
+import HeaderDisplay from "../../components/organisms/headerDisplay";
+import CreationPanel from "../../components/organisms/creationPanel";
+import DisplayPanel from "../../components/organisms/displayPanel";
+import FooterDisplay from "../../components/organisms/footerDisplay";
+
+function Editor() {
+  // Get the original save directory
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+  const { status: statusSave, data: dataSave } = useQuery(
+    ["SaveDir"],
+    getSaveDirectory
+  );
+  const { status: statusMods, data: dataMoads } = useQuery(
+    ["modifications"],
+    loadModifications
+  );
+
+  const setAllModifiers = useImageCreate((state) => state.setAllModifiers);
+
+  useEffect(() => {
+    if (statusSave === "success") {
+      setRequestOption("save_to_disk_path", dataSave);
+    }
+  }, [setRequestOption, statusSave, dataSave]);
+
+  useEffect(() => {
+    if (statusMods === "success") {
+      setAllModifiers(dataMoads);
+    } else if (statusMods === "error") {
+      // @ts-ignore
+      setAllModifiers(Mockifiers);
+    }
+  }, [setRequestOption, statusMods, dataMoads]);
+
+  return (
+    <div className={AppLayout}>
+      <header className={HeaderLayout}>
+        <HeaderDisplay></HeaderDisplay>
+      </header>
+      <nav className={CreateLayout}>
+        <CreationPanel></CreationPanel>
+      </nav>
+      <main className={DisplayLayout}>
+        <DisplayPanel></DisplayPanel>
+      </main>
+      <footer className={FooterLayout}>
+        <FooterDisplay></FooterDisplay>
+      </footer>
+    </div>
+  );
+}
+
+export default Editor;

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

@@ -5,10 +5,8 @@ import { devtools } from "zustand/middleware";
 import { useRandomSeed } from "../utils";
 
 export type ImageCreationUiOptions = {
-  advancedSettingsIsOpen: boolean;
-  imageModifierIsOpen: boolean;
-  isCheckedUseUpscaling: boolean;
-  isCheckUseFaceCorrection: boolean;
+  // isCheckedUseUpscaling: boolean;
+  // isCheckUseFaceCorrection: boolean;
   isUseRandomSeed: boolean;
   isUseAutoSave: boolean;
   isSoundEnabled: boolean;
@@ -58,31 +56,36 @@ export type ImageRequest = {
   use_full_precision: boolean;
   save_to_disk_path: null | string;
   use_face_correction: null | "GFPGANv1.3";
-  use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B";
+  use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B" | "";
   show_only_filtered_image: boolean;
   init_image: undefined | string;
   prompt_strength: undefined | number;
 };
 
+type ModifiersList = string[];
+type ModifiersOptions = string | ModifiersList[];
+type ModifiersOptionList = ModifiersOptions[];
+
 interface ImageCreateState {
   parallelCount: number;
   requestOptions: ImageRequest;
+  allModifiers: ModifiersOptionList;
   tags: string[];
 
   setParallelCount: (count: number) => void;
   setRequestOptions: (key: keyof ImageRequest, value: any) => void;
   getValueForRequestKey: (key: keyof ImageRequest) => any;
+  setAllModifiers: (modifiers: ModifiersOptionList) => void;
 
+  setModifierOptions: (key: string, value: any) => void;
   toggleTag: (tag: string) => void;
   hasTag: (tag: string) => boolean;
   selectedTags: () => string[];
   builtRequest: () => ImageRequest;
 
   uiOptions: ImageCreationUiOptions;
-  toggleAdvancedSettingsIsOpen: () => void;
-  toggleImageModifiersIsOpen: () => void;
   toggleUseUpscaling: () => void;
-  isUsingUpscaling: () => boolean;
+  // isUsingUpscaling: () => boolean;
   toggleUseFaceCorrection: () => void;
   isUsingFaceCorrection: () => boolean;
   toggleUseRandomSeed: () => void;
@@ -118,8 +121,19 @@ export const useImageCreate = create<ImageCreateState>(
       show_only_filtered_image: true,
     } as ImageRequest,
 
+    // selected tags
     tags: [] as string[],
 
+    uiOptions: {
+      // TODO proper persistence of all UI / user settings centrally somewhere?
+      // localStorage.getItem('ui:advancedSettingsIsOpen') === 'true',
+      isUseRandomSeed: true,
+      isUseAutoSave: false,
+      isSoundEnabled: false,
+    },
+
+    allModifiers: [[[]]] as ModifiersOptionList,
+
     setParallelCount: (count: number) =>
       set(
         produce((state) => {
@@ -139,6 +153,14 @@ export const useImageCreate = create<ImageCreateState>(
       return get().requestOptions[key];
     },
 
+    setAllModifiers: (modifiers: ModifiersOptionList) => {
+      set(
+        produce((state) => {
+          state.allModifiers = modifiers;
+        })
+      );
+    },
+
     toggleTag: (tag: string) => {
       set(
         produce((state) => {
@@ -180,96 +202,33 @@ export const useImageCreate = create<ImageCreateState>(
         // TODO check this
         request.save_to_disk_path = null;
       }
-      // if we arent using face correction clear the face correction
-      if (!state.uiOptions.isCheckUseFaceCorrection) {
-        request.use_face_correction = null;
-      }
 
+      // a bit of a hack. figure out what a clean value to pass to the server is
       // if we arent using upscaling clear the upscaling
-      if (!state.uiOptions.isCheckedUseUpscaling) {
+      if (request.use_upscale === "") {
         request.use_upscale = null;
       }
 
       return request;
     },
 
-    uiOptions: {
-      // TODO proper persistence of all UI / user settings centrally somewhere?
-      // localStorage.getItem('ui:advancedSettingsIsOpen') === 'true',
-      advancedSettingsIsOpen: false,
-      imageModifierIsOpen: false,
-      isCheckedUseUpscaling: false,
-      isCheckUseFaceCorrection: true,
-      isUseRandomSeed: true,
-      isUseAutoSave: false,
-      isSoundEnabled: false,
-    },
-
-    toggleAdvancedSettingsIsOpen: () => {
-      set(
-        produce((state) => {
-          state.uiOptions.advancedSettingsIsOpen =
-            !state.uiOptions.advancedSettingsIsOpen;
-          localStorage.setItem(
-            "ui:advancedSettingsIsOpen",
-            state.uiOptions.advancedSettingsIsOpen
-          );
-        })
-      );
-    },
-
-    toggleImageModifiersIsOpen: () => {
-      set(
-        produce((state) => {
-          state.uiOptions.imageModifierIsOpen =
-            !state.uiOptions.imageModifierIsOpen;
-          localStorage.setItem(
-            "ui:imageModifierIsOpen",
-            state.uiOptions.imageModifierIsOpen
-          );
-        })
-      );
-    },
-
-    toggleUseUpscaling: () => {
-      set(
-        produce((state) => {
-          state.uiOptions.isCheckedUseUpscaling =
-            !state.uiOptions.isCheckedUseUpscaling;
-          state.requestOptions.use_upscale = state.uiOptions
-            .isCheckedUseUpscaling
-            ? "RealESRGAN_x4plus"
-            : undefined;
-          localStorage.setItem(
-            "ui:isCheckedUseUpscaling",
-            state.uiOptions.isCheckedUseUpscaling
-          );
-        })
-      );
-    },
-
-    isUsingUpscaling: () => {
-      return get().uiOptions.isCheckedUseUpscaling;
-    },
-
     toggleUseFaceCorrection: () => {
       set(
         produce((state) => {
-          state.uiOptions.isCheckUseFaceCorrection =
-            !state.uiOptions.isCheckUseFaceCorrection;
-          state.use_face_correction = state.uiOptions.isCheckUseFaceCorrection
-            ? "GFPGANv1.3"
-            : null;
-          // localStorage.setItem(
-          //   "ui:isCheckUseFaceCorrection",
-          //   state.uiOptions.isCheckUseFaceCorrection
-          // );
+          const isSeting =
+            typeof state.getValueForRequestKey("use_face_correction") ===
+            "string"
+              ? null
+              : "GFPGANv1.3";
+          state.requestOptions.use_face_correction = isSeting;
         })
       );
     },
 
     isUsingFaceCorrection: () => {
-      return get().uiOptions.isCheckUseFaceCorrection;
+      const isUsing =
+        typeof get().getValueForRequestKey("use_face_correction") === "string";
+      return isUsing;
     },
 
     toggleUseRandomSeed: () => {

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

@@ -1,8 +1,6 @@
 import create from "zustand";
 import produce from "immer";
 
-// import { devtools } from 'zustand/middleware'
-
 interface ImageDisplayState {
   imageOptions: Map<string, any>;
   currentImage: object | null;

ui/frontend/dist/index.css

@@ -1 +1 @@
-._1cjn8au0{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"}._1cjn8au1{grid-area:header}._1cjn8au2{grid-area:create;overflow:auto}._1cjn8au3{grid-area:display;overflow:auto}._1cjn8au4{grid-area:footer}@media screen and (max-width: 800px){._1cjn8au0{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}.generated-image,.image-contain{position:relative}#save-button{position:absolute;top:10px;left:10px}#use-button{position:absolute;top:10px;right:10px}.display-panel{padding:10px}#display-container{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}#previous-images{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}.previous-image{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"}}.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}