Merge pull request #25 from caranicas/beta-react-filter-fix

fix filter and some styling

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useImageCreate } from "../../../../../stores/imageCreateStore";
 
 import { useCreateUI } from "../../creationPanelUIStore";
@@ -13,6 +13,8 @@ export default function ImprovementSettings() {
     state.isUsingFaceCorrection()
   );
 
+  const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
+
   const use_upscale = useImageCreate((state) =>
     state.getValueForRequestKey("use_upscale")
   );
@@ -30,10 +32,25 @@ export default function ImprovementSettings() {
   const improvementOpen = useCreateUI(
     (state) => state.isOpenAdvImprovementSettings
   );
+
   const toggleImprovementOpen = useCreateUI(
     (state) => state.toggleAdvImprovementSettings
   );
 
+  const [isFilteringDisabled, setIsFilteringDisabled] = useState(false);
+  // should probably be a store selector
+  useEffect(() => {
+    console.log("isUsingUpscaling", isUsingUpscaling);
+    console.log("isUsingFaceCorrection", isUsingFaceCorrection);
+
+    // if either are true we arent disabled
+    if (isUsingFaceCorrection || use_upscale) {
+      setIsFilteringDisabled(false);
+    } else {
+      setIsFilteringDisabled(true);
+    }
+  }, [isUsingFaceCorrection, isUsingUpscaling, setIsFilteringDisabled]);
+
   return (
     <div>
       <button
@@ -77,6 +94,7 @@ export default function ImprovementSettings() {
           <div>
             <label>
               <input
+                disabled={isFilteringDisabled}
                 type="checkbox"
                 checked={show_only_filtered_image}
                 onChange={(e) =>

ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts

@@ -14,7 +14,7 @@ export const completedImagesMain = style({
 });
 
 export const imageContain = style({
-  width: "112px",
+  width: "206px",
   backgroundColor: "black",
   display: "flex",
   justifyContent: "center",
@@ -22,6 +22,8 @@ export const imageContain = style({
   flexShrink: 0,
   border: "0 none",
   padding: "0",
+  marginLeft: vars.spacing.medium,
+  cursor: "pointer",
 });
 
 globalStyle(`${imageContain} img`, {

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

@@ -17,35 +17,19 @@ export default function CompletedImages({
   setCurrentDisplay,
 }: CurrentDisplayProps) {
   const _handleSetCurrentDisplay = (index: number) => {
-    debugger;
     const image = images![index];
     setCurrentDisplay(image);
   };
 
-  console.log("COMP{LETED IMAGES", images);
   return (
     <div className={completedImagesMain}>
       {images &&
         images.map((image, index) => {
-          // if (void 0 !== image) {
-          //   return null;
-          // }
-
           return (
-            // <div className={imageContain} key={index} value={index} onClick={() => {
-            //   debugger;
-            //   const image = images[index];
-            //   _handleSetCurrentDisplay(image);
-            // }}>
-            //   <img src={image.data} alt={image.info.prompt} />
-            // </div>
-
             <button
               key={index}
               className={imageContain}
               onClick={() => {
-                console.log("CLICKED", index);
-                debugger;
                 _handleSetCurrentDisplay(index);
               }}
             >

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

@@ -18,5 +18,5 @@ export const displayContainer = style({
 });
 
 export const previousImages = style({
-  height: "150px",
+  // height: "150px",
 });

ui/frontend/build_src/src/pages/Home/home.css.ts

@@ -11,7 +11,7 @@ export const AppLayout = style({
   display: "grid",
   // backgroundColor: "rgb(32, 33, 36)",
   gridTemplateColumns: "400px 1fr",
-  gridTemplateRows: "100px 1fr 50px",
+  gridTemplateRows: "100px 1fr 115px",
   gridTemplateAreas: `
     "header header header"
     "create display display"
@@ -21,7 +21,7 @@ export const AppLayout = style({
   "@media": {
     "screen and (max-width: 800px)": {
       gridTemplateColumns: "1fr",
-      gridTemplateRows: "100px 1fr 1fr 50px",
+      gridTemplateRows: "100px 300px 1fr 100px",
       gridTemplateAreas: `
         "header"
         "create"

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

@@ -87,6 +87,7 @@ interface ImageCreateState {
   // isUsingUpscaling: () => boolean;
   toggleUseFaceCorrection: () => void;
   isUsingFaceCorrection: () => boolean;
+  isUsingUpscaling: () => boolean;
   toggleUseRandomSeed: () => void;
   isRandomSeed: () => boolean;
   toggleUseAutoSave: () => void;
@@ -205,14 +206,25 @@ export const useImageCreate = create<ImageCreateState>(
         request.save_to_disk_path = null;
       }
 
+      if (void 0 === request.init_image) {
+        request.prompt_strength = undefined;
+      }
+
       // a bit of a hack. figure out what a clean value to pass to the server is
       // if we arent using upscaling clear the upscaling
       if (request.use_upscale === "") {
         request.use_upscale = null;
       }
 
-      if (void 0 === requestOptions.init_image) {
+      // make sure you look above for the "null" value
-        request.prompt_strength = undefined;
+      // this patches over a a backend issue if you dont ask for a filtered image
+      // you get nothing back
+
+      if (
+        null === request.use_upscale &&
+        null === request.use_face_correction
+      ) {
+        request.show_only_filtered_image = false;
       }
 
       return request;
@@ -237,6 +249,11 @@ export const useImageCreate = create<ImageCreateState>(
       return isUsing;
     },
 
+    isUsingUpscaling: () => {
+      const isUsing = get().getValueForRequestKey("use_upscale") != "";
+      return isUsing;
+    },
+
     toggleUseRandomSeed: () => {
       set(
         produce((state) => {