working queue

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

@@ -0,0 +1,9 @@
+import { style } from "@vanilla-extract/css";
+
+import { vars } from "../../../styles/theme/index.css";
+
+import { BrandedButton } from "../../../styles/shared.css";
+
+export const ClearQueueButton = style([BrandedButton, {
+  fontSize: vars.fonts.sizes.Headline,
+}]);

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

@@ -1,7 +1,10 @@
 import React from "react";
 import { doStopImage } from "../../../api";
 import { useRequestQueue } from "../../../stores/requestQueueStore";
-import { BrandedButton } from "../../../styles/shared.css";
+
+import {
+  ClearQueueButton
+} from "./clearQueue.css";
 
 export default function ClearQueue() {
 
@@ -18,8 +21,8 @@ export default function ClearQueue() {
   };
 
   return (
-    <button className={BrandedButton} disabled={!hasQueue} onClick={() => void stopAll()}>
-      Stop ALL
+    <button className={ClearQueueButton} disabled={!hasQueue} onClick={() => void stopAll()}>
+      STOP ALL
     </button>
   );
 }

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

@@ -1,16 +1,13 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 import { vars } from "../../../../../styles/theme/index.css";
 
-export const StopContainer = style({
+export const CreationActionMain = style({
   display: "flex",
+  flexDirection: "column",
   width: "100%",
   marginTop: vars.spacing.medium,
 });
 
-globalStyle(`${StopContainer} button`, {
-  flexGrow: 1,
-});
-
-globalStyle(`${StopContainer} button:first-child`, {
-  marginRight: vars.spacing.small,
-});
+globalStyle(`${CreationActionMain} button`, {
+  marginBottom: vars.spacing.medium,
+});

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

@@ -1,24 +1,18 @@
 import React from "react";
 
 import MakeButton from "../../../../molecules/makeButton";
-// import StopButton from "../../../../molecules/stopButton";
-// import ClearQueue from "../../../../molecules/clearQueue";
 
 import ShowQueue from "../showQueue";
 
 import {
-  StopContainer
+  CreationActionMain
 } from "./creationActions.css";
 
 export default function CreationActions() {
   return (
-    <div>
+    <div className={CreationActionMain}>
       <MakeButton></MakeButton>
       <ShowQueue></ShowQueue>
-      {/* <div className={StopContainer}>
-        <StopButton></StopButton>
-        <ClearQueue></ClearQueue>
-      </div> */}
     </div>
   );
 }

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

@@ -15,7 +15,7 @@ export default function ShowQueue() {
         onChange={() => toggleQueue()}
       >
       </input>
-      Display
+      Display Queue
     </label>
   );
 }

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

@@ -16,7 +16,7 @@ export const QueueListButtons = style({
   flexDirection: "row",
   justifyContent: "space-between",
   alignItems: "center",
-  marginBottom: vars.spacing.medium,
+  marginBottom: vars.spacing.large,
   marginTop: vars.spacing.medium,
 });
 

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

@@ -1,3 +1,5 @@
+/* eslint-disable  @typescript-eslint/naming-convention */
+
 import React from "react";
 
 import {
@@ -10,6 +12,7 @@ import StopButton from '../../../molecules/stopButton';
 
 import {
   QueueItemMain,
+  QueueItemInfo,
   QueueButtons,
   CompleteButtton,
   PauseButton,
@@ -26,9 +29,6 @@ interface QueueItemProps {
 
 export default function QueueItem({ request }: QueueItemProps) {
 
-  // console.log('info', info);
-  // console.log('status', status);
-
   const removeItem = useRequestQueue((state) => state.removeItem);
   const updateStatus = useRequestQueue((state) => state.updateStatus);
   const sendPendingToTop = useRequestQueue((state) => state.sendPendingToTop);
@@ -37,39 +37,45 @@ export default function QueueItem({ request }: QueueItemProps) {
     id,
     options: {
       prompt,
+      num_outputs,
       seed,
       sampler,
+      guidance_scale,
+      num_inference_steps,
+
     },
     status,
   } = request;
 
   const removeFromQueue = () => {
-    console.log('remove from queue');
     removeItem(id);
   }
 
   const pauseItem = () => {
-    console.log('pause item');
     updateStatus(id, QueueStatus.paused);
   }
 
   const retryRequest = () => {
-    console.log('retry request');
     updateStatus(id, QueueStatus.pending);
   }
 
   const sendToTop = () => {
-    console.log('send to top');
     sendPendingToTop(id);
   }
 
   return (
     <div className={[QueueItemMain, status].join(' ')}>
-      {/* @ts-expect-error */}
-      <div>{status}</div>
-      <div>{prompt}</div>
-      <div>{seed}</div>
-      <div>{sampler}</div>
+
+      <div className={QueueItemInfo}>
+        <p>{prompt}</p>
+        <p>Making {num_outputs} concurrent images</p>
+        <p>
+          <span>Seed: {seed} </span>
+          <span>Sampler: {sampler} </span>
+          <span>Guidance Scale: {guidance_scale} </span>
+          <span>Num Inference Steps: {num_inference_steps} </span>
+        </p>
+      </div>
 
       <div className={QueueButtons}>
 

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

@@ -11,9 +11,21 @@ export const QueueItemMain = style({
   display: "flex",
   flexDirection: "column",
   width: "100%",
-  padding: "0.5rem",
+  padding: vars.spacing.small,
+  borderRadius: vars.trim.smallBorderRadius,
+  marginBottom: vars.spacing.medium,
+  boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
 });
 
+export const QueueItemInfo = style({
+
+});
+
+globalStyle(`${QueueItemInfo} p`, {
+  marginBottom: vars.spacing.small,
+});
+
+
 globalStyle(`${QueueItemMain}.${QueueStatus.processing}`, {
   backgroundColor: vars.colors.warning,
 });

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

@@ -84,14 +84,31 @@ export const useRequestQueue = create<RequestQueueState>((set, get) => ({
     set(
       produce((state) => {
         const item = state.requests.find((item: QueuedRequest) => item.id === id);
+
         if (void 0 !== item) {
+          // remove from current position
           const index = state.requests.indexOf(item);
-          // insert infront of the pending requests
-          const pending = get().pendingRequests();
-          const pendingIndex = state.requests.indexOf(pending[0]);
-          console.log()
           state.requests.splice(index, 1);
-          state.requests.splice(pendingIndex, 0, item);
+
+          // find the first available stop and insert it there
+          for (let i = 0; i < state.requests.length; i++) {
+            const curStatus = state.requests[i].status;
+
+            // skip over any items that are not pending or paused
+            if (curStatus === QueueStatus.processing) {
+              continue;
+            }
+            if (curStatus === QueueStatus.complete) {
+              continue;
+            }
+            if (curStatus === QueueStatus.error) {
+              continue;
+            }
+
+            // insert infront of any pending or paused items
+            state.requests.splice(i, 0, item);
+            break;
+          }
         }
       })
     );

ui/frontend/build_src/vite.config.ts.timestamp-1664475745198.mjs

@@ -0,0 +1,36 @@
+// vite.config.ts
+import { defineConfig } from "vite";
+import eslint from "vite-plugin-eslint";
+import react from "@vitejs/plugin-react";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import path from "path";
+var __vite_injected_original_dirname = "C:\\Users\\KC\\stable-diffusion-ui-react\\ui\\frontend\\build_src";
+var vite_config_default = defineConfig({
+  resolve: {
+    alias: {
+      "@stores": path.resolve(__vite_injected_original_dirname, "./src/stores")
+    }
+  },
+  plugins: [
+    eslint(),
+    react(),
+    vanillaExtractPlugin({})
+  ],
+  server: {
+    port: 9001
+  },
+  build: {
+    outDir: "../dist",
+    rollupOptions: {
+      output: {
+        entryFileNames: `[name].js`,
+        chunkFileNames: `[name].js`,
+        assetFileNames: `[name].[ext]`
+      }
+    }
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxLQ1xcXFxzdGFibGUtZGlmZnVzaW9uLXVpLXJlYWN0XFxcXHVpXFxcXGZyb250ZW5kXFxcXGJ1aWxkX3NyY1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiQzpcXFxcVXNlcnNcXFxcS0NcXFxcc3RhYmxlLWRpZmZ1c2lvbi11aS1yZWFjdFxcXFx1aVxcXFxmcm9udGVuZFxcXFxidWlsZF9zcmNcXFxcdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL0M6L1VzZXJzL0tDL3N0YWJsZS1kaWZmdXNpb24tdWktcmVhY3QvdWkvZnJvbnRlbmQvYnVpbGRfc3JjL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSBcInZpdGVcIjtcbmltcG9ydCBlc2xpbnQgZnJvbSBcInZpdGUtcGx1Z2luLWVzbGludFwiO1xuaW1wb3J0IHJlYWN0IGZyb20gXCJAdml0ZWpzL3BsdWdpbi1yZWFjdFwiO1xuaW1wb3J0IHsgdmFuaWxsYUV4dHJhY3RQbHVnaW4gfSBmcm9tIFwiQHZhbmlsbGEtZXh0cmFjdC92aXRlLXBsdWdpblwiO1xuXG5pbXBvcnQgcGF0aCBmcm9tIFwicGF0aFwiO1xuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHJlc29sdmU6IHtcbiAgICBhbGlhczoge1xuICAgICAgLy8gVE9ETyBmaWd1cmUgb3V0IHdoeSB2cyBjb2RlIGNvbXBsYWlucyBhYm91dCB0aGlzIGV2ZW4gdGhvdWdoIGl0IHdvcmtzXG4gICAgICBcIkBzdG9yZXNcIjogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSwgXCIuL3NyYy9zdG9yZXNcIiksXG4gICAgICAvLyBUT0RPIC0gYWRkIG1vcmUgYWxpYXNlc1xuICAgIH0sXG4gIH0sXG5cbiAgcGx1Z2luczogW1xuICAgIGVzbGludCgpLFxuICAgIHJlYWN0KCksXG4gICAgdmFuaWxsYUV4dHJhY3RQbHVnaW4oe1xuICAgICAgLy8gY29uZmlndXJhdGlvblxuICAgIH0pLFxuICBdLFxuXG4gIHNlcnZlcjoge1xuICAgIHBvcnQ6IDkwMDEsXG4gIH0sXG5cbiAgYnVpbGQ6IHtcbiAgICAvLyBtYWtlIHN1cmUgZXZlcnl0aGlnbiBpcyBpbiB0aGUgc2FtZSBkaXJlY3RvcnlcbiAgICBvdXREaXI6IFwiLi4vZGlzdFwiLFxuICAgIHJvbGx1cE9wdGlvbnM6IHtcbiAgICAgIG91dHB1dDoge1xuICAgICAgICAvLyBkb250IGhhc2ggdGhlIGZpbGUgbmFtZXNcbiAgICAgICAgLy8gbWF5YmUgb25jZSB3ZSB1cGRhdGUgdGhlIHB5dGhvbiBzZXJ2ZXI/XG4gICAgICAgIGVudHJ5RmlsZU5hbWVzOiBgW25hbWVdLmpzYCxcbiAgICAgICAgY2h1bmtGaWxlTmFtZXM6IGBbbmFtZV0uanNgLFxuICAgICAgICBhc3NldEZpbGVOYW1lczogYFtuYW1lXS5bZXh0XWAsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59KTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBaVgsU0FBUyxvQkFBb0I7QUFDOVksT0FBTyxZQUFZO0FBQ25CLE9BQU8sV0FBVztBQUNsQixTQUFTLDRCQUE0QjtBQUVyQyxPQUFPLFVBQVU7QUFMakIsSUFBTSxtQ0FBbUM7QUFPekMsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUztBQUFBLElBQ1AsT0FBTztBQUFBLE1BRUwsV0FBVyxLQUFLLFFBQVEsa0NBQVcsY0FBYztBQUFBLElBRW5EO0FBQUEsRUFDRjtBQUFBLEVBRUEsU0FBUztBQUFBLElBQ1AsT0FBTztBQUFBLElBQ1AsTUFBTTtBQUFBLElBQ04scUJBQXFCLENBRXJCLENBQUM7QUFBQSxFQUNIO0FBQUEsRUFFQSxRQUFRO0FBQUEsSUFDTixNQUFNO0FBQUEsRUFDUjtBQUFBLEVBRUEsT0FBTztBQUFBLElBRUwsUUFBUTtBQUFBLElBQ1IsZUFBZTtBQUFBLE1BQ2IsUUFBUTtBQUFBLFFBR04sZ0JBQWdCO0FBQUEsUUFDaEIsZ0JBQWdCO0FBQUEsUUFDaEIsZ0JBQWdCO0FBQUEsTUFDbEI7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==