Merge pull request #7 from caranicas/beta-react-file-responses

file metadata and saveing

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

@@ -22,10 +22,7 @@ export const healthPing = async () => {
  * the local list of modifications
  */
 export const loadModifications = async () => {
-  const url = `${API_URL}/modifiers.json`;
-
-  console.log('loadModifications', url);
-  const response = await fetch(url);
+  const response = await fetch(`${API_URL}/modifiers.json`);
   const data = await response.json();
   return data;
 }

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

@@ -201,7 +201,6 @@ function SettingsList() {
         <input
           value={steps}
           onChange={(e) => {
-            console.log('ON CHNAGE num_inference_steps', e.target.value)
             setRequestOption("num_inference_steps", e.target.value)
           }}
           size={4}

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

@@ -37,10 +37,8 @@ function ModifierGrouping({title, tags}: ModifierGroupingProps) {
   // and persist if we wanted to
   const [isExpanded, setIsExpanded] = useState(false);
 
-  // console.log('grouping', title, tags)
 
   const _toggleExpand = () => {
-    // console.log('toggle expand')
     setIsExpanded(!isExpanded);
   };
 
@@ -64,13 +62,8 @@ export default function ImageModifers() {
     (state) => state.toggleImageModifiersIsOpen
   );
 
-  // useEffect(() => {
-  //   console.log("imageModifers", status, data);
-  // }, [status, data]);
-
 
   const handleClick = () => {
-    // debugger;
     toggleImageModifiersIsOpen();
   };
 

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

@@ -22,17 +22,13 @@ export default function CreationPanel() {
   };
 
   const _handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
-    //console.log("file select", event);
     //@ts-ignore
     const file = event.target.files[0];
 
-    // console.log("file", file);
-
     if (file) {
       const reader = new FileReader();
       reader.onload = (e) => {
         if (e.target) {
-          debugger;
           setRequestOption("init_image", e.target.result);
         }
       };

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

@@ -11,7 +11,6 @@ export default function ModifierTag({name}: ModifierTagProps) {
   const hasTag = useImageCreate((state) => state.hasTag(name)) ? "selected" : "";
   const toggleTag = useImageCreate((state) => state.toggleTag);
 
-  console.log('has tag', hasTag)
 
   const _toggleTag = () => {
     toggleTag(name);

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

@@ -6,13 +6,12 @@ import { doMakeImage, MakeImageKey } from "../../../api";
 import { useQuery } from "@tanstack/react-query";
 import GeneratedImage from "../generatedImage";
 
-
+// TODO move this logic to the display panel
 export default function CurrentImage() {
 
   const [imageData, setImageData] = useState(null);
   // @ts-ignore
   const {id, options} = useImageQueue((state) => state.firstInQueue());
-  console.log('CurrentImage id', id)
 
   const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
   
@@ -27,11 +26,9 @@ export default function CurrentImage() {
     useEffect(() => {
     // query is done
     if(status === 'success') {
-      console.log("success");
 
       // check to make sure that the image was created
       if(data.status === 'succeeded') {
-        console.log("succeeded");
         setImageData(data.output[0].data);
         removeFirstInQueue();
       }
@@ -40,10 +37,12 @@ export default function CurrentImage() {
   }, [status, data, removeFirstInQueue]);
 
 
+
   return (
-    <div className="current-display">
-      <h1>Current Image</h1>
-      {imageData && <GeneratedImage imageData={imageData} />}
-    </div>
+    <></>
+    // <div className="current-display">
+    //   <h1>Current Image</h1>
+    //   {imageData && <GeneratedImage imageData={imageData} />}
+    // </div>
   );
 };

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

@@ -1,15 +1,59 @@
-import React from "react";
+import React, {useCallback} from "react";
 
 
-import { useImageCreate } from "../../../store/imageCreateStore";
+import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
 
-export default function GeneratedImage({ imageData }: { imageData: string }) {
+type GeneretaedImageProps = {
+  imageData: string;
+  metadata: ImageRequest;
+}
 
 
+export default function GeneratedImage({ imageData, metadata}: GeneretaedImageProps) {
+
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+  
+  const createFileName = () => {
+
+    const { 
+      prompt, 
+      seed, 
+      num_inference_steps, 
+      guidance_scale, 
+      use_face_correction, 
+      use_upscale,
+      width,
+      height,
+    } = metadata;
+
+    //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}`;
+    }
+    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;
+  }
+  
   const _handleSave = () => {
     const link = document.createElement("a");
-    link.download = "image.png";
+    link.download = createFileName();
     link.href = imageData;
     link.click();
   };

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

@@ -16,6 +16,7 @@ import GeneratedImage from "./generatedImage";
 type CompletedImagesType = {
   id: string;
   data: string;
+  info: ImageRequest;
 }
 export default function DisplayPanel() {
 
@@ -31,17 +32,15 @@ export default function DisplayPanel() {
       return imageData;
     });
 
-    console.log('completedQueries', completedQueries);
-
     if (completedQueries.length > 0) {
       // map the completedImagesto a new array 
       // and then set the state
       const temp = completedQueries.map((query, index ) => {
-        // debugger;
         if(void 0 !== query) {
           //@ts-ignore
           return query.output.map((data)=>{
-            return {id: `${completedIds[index]}-${data.seed}`, data: data.data}
+            // @ts-ignore
+            return {id: `${completedIds[index]}-${data.seed}`, data: data.data, info: {...query.request, seed:data.seed } }
           })
         }
         
@@ -61,11 +60,11 @@ export default function DisplayPanel() {
       <div>
         <CurrentImage />
         {completedImages.map((image, index) => {
-          if(index == 0){
-            return null;
-          }
+          // if(index == 0){
+          //   return null;
+          // }
           if(void 0 !== image) {
-            return <GeneratedImage key={image.id} imageData={image.data} />;
+            return <GeneratedImage key={image.id} imageData={image.data} metadata={image.info}/>;
           }
           else {
             console.warn('image is undefined', image, index);

ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx

@@ -15,18 +15,12 @@ export default function StatusDisplay({className}: {className?: string}) {
   const [statusClass, setStatusClass] = useState('starting');
 
 
-  // doing this here for the time being, to show the data getting loaded
   // but this will be moved to the status display when it is created
   const {status, data} = useQuery(['health'], healthPing, {refetchInterval: HEALTH_PING_INTERVAL});
-  useEffect(() => {
-    console.log('health data', data);
-  }, [data]);
 
 
-  // const data = {};
 
   useEffect(() => {
-    console.log('status', status);
 
     if (status === 'loading') {
       setStatusMessage(startingMessage);

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

@@ -67,13 +67,13 @@ interface ImageCreateState {
 // @ts-ignore
 export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
   
-  parallelCount: 1,
+  parallelCount: 2,
 
   requestOptions:{
     prompt: 'a photograph of an astronaut riding a horse',
     seed: useRandomSeed(),
-    num_outputs: 1,
-    num_inference_steps: 50,
+    num_outputs: 2,
+    num_inference_steps: 5,
     guidance_scale: 7.5,
     width: 512,
     height: 512,