From e506d988e2635f431319055b98a396e6c78d1b92 Mon Sep 17 00:00:00 2001 From: caranicas Date: Thu, 29 Sep 2022 09:02:43 -0400 Subject: [PATCH] wip --- .../src/components/atoms/clearQueue/index.tsx | 20 ++++++- .../organisms/creationPanel/creationPanel.css | 56 ------------------- ...eationpane.css.ts => creationPanel.css.ts} | 8 +++ .../creationPanel/creationPanelUIStore.ts | 14 ++++- .../organisms/creationPanel/index.tsx | 27 ++++++++- .../organisms/queueDisplay/index.tsx | 25 +++++++++ .../queueDisplay/queueDisplay.css.ts | 10 ++++ .../queueDisplay/queueItem/index.tsx | 38 +++++++++++++ .../queueDisplay/queueItem/queueItem.css.ts | 9 +++ 9 files changed, 145 insertions(+), 62 deletions(-) delete mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css rename ui/frontend/build_src/src/components/organisms/creationPanel/{creationpane.css.ts => creationPanel.css.ts} (69%) create mode 100644 ui/frontend/build_src/src/components/organisms/queueDisplay/index.tsx create mode 100644 ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts create mode 100644 ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx create mode 100644 ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts diff --git a/ui/frontend/build_src/src/components/atoms/clearQueue/index.tsx b/ui/frontend/build_src/src/components/atoms/clearQueue/index.tsx index d57c340f..1818672d 100644 --- a/ui/frontend/build_src/src/components/atoms/clearQueue/index.tsx +++ b/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 ( - + <> + + + ); } \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css deleted file mode 100644 index f22af7af..00000000 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css +++ /dev/null @@ -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; -} diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css.ts similarity index 69% rename from ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts rename to ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css.ts index d336f339..5ac371c0 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts +++ b/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)", +}); \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts index 2c2d646b..6a615dee 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts +++ b/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( @@ -27,6 +29,7 @@ export const useCreateUI = create( isOpenAdvPropertySettings: false, isOpenAdvWorkflowSettings: false, isOpenImageModifier: false, + showQueue: false, toggleAdvancedSettings: () => { set( @@ -68,6 +71,15 @@ export const useCreateUI = create( }) ); }, + + toggleQueue: () => { + set( + produce((state: ImageCreationUIOptions) => { + state.showQueue = !state.showQueue; + }) + ); + }, + }), { name: "createUI", diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx index 883b21b3..141e0001 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx +++ b/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 ( <>
@@ -33,6 +47,13 @@ export default function CreationPanel() {
)} + + {(showQueue) && ( +
+ +
+ )} + ); } diff --git a/ui/frontend/build_src/src/components/organisms/queueDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/queueDisplay/index.tsx new file mode 100644 index 00000000..46e0cc82 --- /dev/null +++ b/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 ( +
+ {images.map((image) => { + return ; + })} +
+ ); +} diff --git a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts new file mode 100644 index 00000000..f2d6d204 --- /dev/null +++ b/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)', + +}); diff --git a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx new file mode 100644 index 00000000..15d95508 --- /dev/null +++ b/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 ( +
+
{id}
+
{prompt}
+
{seed}
+
{sampler}
+ +
+ ); +} \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts new file mode 100644 index 00000000..6fd48e1c --- /dev/null +++ b/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", +}); \ No newline at end of file