updated parallel logic

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

@@ -22,7 +22,10 @@ export const healthPing = async () => {
  * the local list of modifications
  */
 export const loadModifications = async () => {
-  const response = await fetch(`${API_URL}/modifiers.json`);
+  const url = `${API_URL}/modifications`;
+
+  console.log('loadModifications', url);
+  const response = await fetch(url);
   const data = await response.json();
   return data;
 }
@@ -40,6 +43,9 @@ export const getSaveDirectory = async () => {
 export const MakeImageKey = 'MakeImage';
 export const doMakeImage = async (reqBody: ImageRequest) => {
 
+  const {seed, num_outputs} = reqBody;
+  console.log('doMakeImage', seed, num_outputs);
+
   const res = await fetch(`${API_URL}/image`, {
     method: 'POST',
     headers: {

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

@@ -23,8 +23,8 @@ const IMAGE_DIMENSIONS = [
 
 function SettingsList() {
 
-  const requestCount = useImageCreate((state) => state.requestCount);
-  const setRequestCount = useImageCreate((state) => state.setRequestCount);
+  const parallelCount = useImageCreate((state) => state.parallelCount);
+  const setParallelCount = useImageCreate((state) => state.setParallelCount);
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
  
@@ -134,9 +134,9 @@ function SettingsList() {
         Number of images to make:{" "}
         <input
           type="number"
-          value={requestCount}
+          value={num_outputs}
           onChange={(e) =>
-            setRequestCount(parseInt(e.target.value, 10))
+            setRequestOption("num_outputs", parseInt(e.target.value, 10))
           }
           size={4}
         />
@@ -145,9 +145,9 @@ function SettingsList() {
         Generate in parallel:
         <input
           type="number"
-          value={num_outputs}
+          value={parallelCount}
           onChange={(e) =>
-            setRequestOption("num_outputs", parseInt(e.target.value, 10))
+            setParallelCount(parseInt(e.target.value, 10))
           }
           size={4}
         />

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

@@ -1,24 +1,60 @@
 import React, {useEffect, useState}from "react";
 
 import { useImageCreate } from "../../../store/imageCreateStore";
-// import { useImageDisplay } from "../../../store/imageDisplayStore";
 import { useImageQueue } from "../../../store/imageQueueStore"; 
-// import { doMakeImage } from "../../../api"; 
 import {v4 as uuidv4} from 'uuid';
 
+import { useRandomSeed } from "../../../utils";
+
 export default function MakeButton() {
 
+  const parallelCount = useImageCreate((state) => state.parallelCount);
   const builtRequest = useImageCreate((state) => state.builtRequest);
   const addNewImage = useImageQueue((state) => state.addNewImage);
   
-  const makeImage = () => {
-    // todo turn this into a loop and adjust the parallel count
-    // 
-    const req =  builtRequest();
-    addNewImage(uuidv4(), req)
+  const makeImages = () => {
+    const req = builtRequest();
+    let requests = [];
+    let { num_outputs } = req;
+
+    if( parallelCount > num_outputs ) {
+      requests.push(num_outputs);
+    }
+    
+    else {
+      while (num_outputs >= 1) {
+        num_outputs -= parallelCount;
+        if(num_outputs <= 0) {
+          requests.push(parallelCount)
+        }
+        else {
+          requests.push(Math.abs(num_outputs))
+        }
+      }
+    }
+
+    console.log('requests', requests);
+
+    requests.forEach((num, index) => {
+
+      console.log('num', num);
+      let seed = req.seed;
+      if(index !== 0) {
+        seed = useRandomSeed();
+      }
+
+      // debugger;
+
+      addNewImage(uuidv4(), {
+        ...req, 
+        num_outputs: num,
+        seed: seed
+      })
+    });
+    
   };
   
   return (
-     <button onClick={makeImage}>Make</button>
+     <button onClick={makeImages}>Make</button>
   );
 }

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

@@ -14,7 +14,6 @@ export default function CurrentImage() {
   const {id, options} = useImageQueue((state) => state.firstInQueue());
   console.log('CurrentImage id', id)
 
-
   const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
   
   const { status, data } = useQuery(

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

@@ -35,11 +35,11 @@ export type ImageRequest = {
  };
 
 interface ImageCreateState {
-  requestCount: number;
+  parallelCount: number;
   requestOptions: ImageRequest;
   tags: string[];
 
-  setRequestCount: (count: number) => void;
+  setParallelCount: (count: number) => void;
   setRequestOptions: (key: keyof ImageRequest, value: any) => void;
   getValueForRequestKey: (key: keyof ImageRequest) => any;
 
@@ -67,7 +67,7 @@ interface ImageCreateState {
 // @ts-ignore
 export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
   
-  requestCount: 1,
+  parallelCount: 1,
 
   requestOptions:{
     prompt: 'a photograph of an astronaut riding a horse',
@@ -90,8 +90,8 @@ export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
 
   tags: [] as string[],
 
-  setRequestCount: (count: number) => set(produce((state) => {
-    state.requestCount = count;
+  setParallelCount: (count: number) => set(produce((state) => {
+    state.parallelCount = count;
   })),
 
   setRequestOptions: (key: keyof ImageRequest, value: any) => {
@@ -127,14 +127,12 @@ export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
   // this is a computed value, just adding the tags to the request
   builtRequest: () => {
 
-    console.log('builtRequest');
     const state = get();
     const requestOptions = state.requestOptions;
     const tags = state.tags;  
 
     // join all the tags with a comma and add it to the prompt
     const prompt = `${requestOptions.prompt} ${tags.join(',')}`;
-    console.log('builtRequest return1');
 
     const request = {
       ...requestOptions,
@@ -146,22 +144,15 @@ export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
       // TODO check this
       request.save_to_disk_path = null;
     }
-    console.log('builtRequest return2');
     // if we arent using face correction clear the face correction
     if(!state.uiOptions.isCheckUseFaceCorrection){
       request.use_face_correction = null;
     }
-    console.log('builtRequest return3');
     // if we arent using upscaling clear the upscaling
     if(!state.uiOptions.isCheckedUseUpscaling){
       request.use_upscale = null;
     }
 
-    // const request = {
-    //   ...requestOptions,
-    //   prompt
-    // }
-    console.log('builtRequest return last');
     return request;
   },