wip

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

@@ -3,11 +3,17 @@ import { doStopImage } from "../../../api";
 import { useImageQueue } from "../../../stores/imageQueueStore";
 import { BrandedButton } from "../../../styles/shared.css";
 
+import { useCreateUI } from "../../../components/organisms/creationPanel/creationPanelUIStore";
+
 export default function ClearQueue() {
 
   const hasQueue = useImageQueue((state) => state.hasQueuedImages());
   const clearQueue = useImageQueue((state) => state.clearQueue);
 
+  const showQueue = useCreateUI((state) => state.showQueue);
+  const toggleQueue = useCreateUI((state) => state.toggleQueue);
+
+
   const stopAll = async () => {
     console.log("stopAll");
     try {
@@ -17,9 +23,19 @@ export default function ClearQueue() {
       console.log(e);
     }
   };
-  // / disabled={!hasQueue}
 
   return (
-    <button className={BrandedButton} disabled={!hasQueue} onClick={() => void stopAll()}>Clear Queue</button>
+    <>
+      <button className={BrandedButton} disabled={!hasQueue} onClick={() => void stopAll()}>Clear Queue</button>
+      <label>
+        <input
+          type="checkbox"
+          checked={showQueue}
+          onChange={() => toggleQueue()}
+        >
+        </input>
+        Display
+      </label>
+    </>
   );
 }

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

@@ -1,56 +0,0 @@
-.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: rgb(38, 77, 141);
-  color: #fff;
-  border-radius: 5px;
-  margin: 5px;
-}
-
-.modifierTag.selected {
-  background-color: rgb(131, 11, 121);
-}
-
-.modifierTag p {
-  margin: 0;
-} */
-
-input[type="file"] {
-  /* Dont show the file name */
-  color: transparent;
-}

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

@@ -15,3 +15,11 @@ export const InpaintingSlider = style({
   zIndex: 1,
   backgroundColor: "rgba(0, 0, 0, 0.5)",
 });
+
+export const QueueSlider = style({
+  position: "absolute",
+  top: "10px",
+  left: "400px",
+  zIndex: 1,
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+});

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

@@ -8,6 +8,7 @@ export interface ImageCreationUIOptions {
   isOpenAdvPropertySettings: boolean;
   isOpenAdvWorkflowSettings: boolean;
   isOpenImageModifier: boolean;
+  showQueue: boolean;
 
   toggleAdvancedSettings: () => void;
   toggleAdvImprovementSettings: () => void;
@@ -15,7 +16,8 @@ export interface ImageCreationUIOptions {
   toggleAdvWorkflowSettings: () => void;
 
   toggleImageModifier: () => void;
-  // addImageModifier: (modifier: string) => void;
+  toggleQueue: () => void;
+
 }
 
 export const useCreateUI = create<ImageCreationUIOptions>(
@@ -27,6 +29,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(
       isOpenAdvPropertySettings: false,
       isOpenAdvWorkflowSettings: false,
       isOpenImageModifier: false,
+      showQueue: false,
 
       toggleAdvancedSettings: () => {
         set(
@@ -68,6 +71,15 @@ export const useCreateUI = create<ImageCreationUIOptions>(
           })
         );
       },
+
+      toggleQueue: () => {
+        set(
+          produce((state: ImageCreationUIOptions) => {
+            state.showQueue = !state.showQueue;
+          })
+        );
+      },
+
     }),
     {
       name: "createUI",

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

@@ -1,25 +1,39 @@
 import React, { ChangeEvent } from "react";
 
+import BasicCreation from "./basicCreation";
 import AdvancedSettings from "./advancedSettings";
 import ImageModifiers from "./imageModifiers";
 import InpaintingPanel from "./inpaintingPanel";
 
+import QueueDisplay from "../queueDisplay";
+
 // this works but causes type errors so its not worth it for now
 // import { useImageCreate } from "@stores/imageCreateStore.ts";
 
 import { useImageCreate } from "../../../stores/imageCreateStore";
+import { useImageQueue } from "../../../stores/imageQueueStore";
 
-import "./creationPanel.css";
+import { useCreateUI } from "./creationPanelUIStore";
+
+// import "./creationPanel.css";
 
 import {
   CreationPaneMain,
   InpaintingSlider,
-} from "./creationpane.css";
+  QueueSlider,
+} from "./creationPanel.css";
+
 
-import BasicCreation from "./basicCreation";
 
 export default function CreationPanel() {
   const isInPaintingMode = useImageCreate((state) => state.isInpainting);
+
+  const showQueue = useCreateUI((state) => state.showQueue);
+  const hasQueue = useImageQueue((state) => state.hasQueuedImages());
+
+  // console.log('hasQueue', hasQueue);
+  console.log('showQueue', showQueue);
+
   return (
     <>
       <div className={CreationPaneMain}>
@@ -33,6 +47,13 @@ export default function CreationPanel() {
           <InpaintingPanel></InpaintingPanel>
         </div>
       )}
+
+      {(showQueue) && (
+        <div className={QueueSlider}>
+          <QueueDisplay></QueueDisplay>
+        </div>
+      )}
+
     </>
   );
 }

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

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { useImageQueue } from "../../../stores/imageQueueStore";
+
+
+import {
+  QueueDisplayMain
+} from "./queueDisplay.css";
+
+import QueueItem from "./queueItem";
+
+export default function QueueDisplay() {
+
+  const images = useImageQueue((state) => state.images);
+  console.log('images', images);
+
+
+  return (
+    <div className={QueueDisplayMain}>
+      {images.map((image) => {
+        return <QueueItem key={image.id} info={image}></QueueItem>;
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+import { style } from "@vanilla-extract/css";
+
+export const QueueDisplayMain = style({
+  display: "flex",
+  flexDirection: "column",
+  width: '400px',
+  height: '100%',
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+
+});

ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+import {
+  QueueItemMain
+} from "./queueItem.css";
+
+import {
+  ImageRequest
+} from '../../../../api'
+
+interface QueueItemProps {
+  info: ImageRequest
+}
+
+export default function QueueItem({ info }: QueueItemProps) {
+
+  console.log('info', info);
+
+  const {
+    id,
+    options: {
+      prompt,
+      seed,
+      sampler,
+    },
+    // status,
+  } = info;
+
+  return (
+    <div className={QueueItemMain}>
+      <div>{id}</div>
+      <div>{prompt}</div>
+      <div>{seed}</div>
+      <div>{sampler}</div>
+
+    </div>
+  );
+}

ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts

@@ -0,0 +1,9 @@
+import { style } from "@vanilla-extract/css";
+
+
+export const QueueItemMain = style({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  padding: "0.5rem",
+});