From fd3b0c20b6a3c372da57f6d25246dcae28c04f19 Mon Sep 17 00:00:00 2001
From: caranicas <kendrick.caranicas@gmail.com>
Date: Thu, 15 Sep 2022 15:35:41 -0400
Subject: [PATCH] advanced panels

---
 .../advancedSettings/advancedsettings.css.ts  |  35 +++-
 .../advancedSettings/gpuSettings/index.tsx    |  85 ++++----
 .../improvementSettings/index.tsx             | 118 ++++++-----
 .../creationPanel/advancedSettings/index.tsx  |   8 +-
 .../propertySettings/index.tsx                | 194 +++++++++---------
 .../workflowSettings/index.tsx                | 139 +++++++------
 .../creationPanel/creationpane.css.ts         |  12 +-
 ui/frontend/build_src/src/styles.css.ts       |   4 +-
 8 files changed, 314 insertions(+), 281 deletions(-)

diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
index 88808cd7..74d2f6e2 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
@@ -1,4 +1,4 @@
-import { style, globalStyle } from '@vanilla-extract/css';
+import { style, globalStyle } from "@vanilla-extract/css";
 
 export const AdvancedSettingsList = style({
   // font-size: 9pt;
@@ -6,17 +6,32 @@ export const AdvancedSettingsList = style({
   // padding-left: 10px;
   // list-style-type: none;
 
-  fontSize: '9pt',
-  marginBottom: '5px',
-  paddingLeft: '10px',
-  listStyleType: 'none',
-
+  fontSize: "9pt",
+  marginBottom: "5px",
+  paddingLeft: "10px",
+  listStyleType: "none",
 });
 
 export const AdvancedSettingItem = style({
-  paddingBottom: '5px',
+  paddingBottom: "5px",
 });
 
-globalStyle( 'button > h4', {
-  color:'lightgrey' 
-});
\ No newline at end of file
+export const MenuButton = style({
+  display: "block",
+  width: "100%",
+  textAlign: "left",
+  backgroundColor: "transparent",
+  color: "#fff",
+  border: "0 none",
+  cursor: "pointer",
+  padding: "0",
+  marginBottom: "10px",
+});
+
+globalStyle(`${MenuButton}> h4`, {
+  color: '#e7ba71',
+  marginTop:"5px !important",
+
+});
+
+
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx
index db42a828..0c0f6811 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx
@@ -1,9 +1,12 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { useImageCreate } from "../../../../../store/imageCreateStore";
 
+import { MenuButton } 
+from //@ts-ignore
+'../advancedsettings.css.ts'
+
 
 export default function GpuSettings() {
-
   const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo"));
   const use_cpu = useImageCreate((state) =>
     state.getValueForRequestKey("use_cpu")
@@ -24,47 +27,49 @@ export default function GpuSettings() {
     <div>
       <button
         type="button"
-        className="panel-box-toggle-btn"
+        className={MenuButton}
         onClick={toggleGpuOpen}
       >
         <h4>GPU Settings</h4>
       </button>
-      {gpuOpen && <>
-      <div>
-        <label>
-          <input
-            checked={turbo}
-            onChange={(e) => setRequestOption("turbo", e.target.checked)}
-            type="checkbox"
-          />
-          Turbo mode (generates images faster, but uses an additional 1 GB of
-          GPU memory)
-        </label>
-      </div>
-      <div>
-        <label>
-          <input
-            type="checkbox"
-            checked={use_cpu}
-            onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
-          />
-          Use CPU instead of GPU (warning: this will be *very* slow)
-        </label>
-      </div>
-      <div>
-        <label>
-          <input
-            checked={use_full_precision}
-            onChange={(e) =>
-              setRequestOption("use_full_precision", e.target.checked)
-            }
-            type="checkbox"
-          />
-          Use full precision (for GPU-only. warning: this will consume more
-          VRAM)
-        </label>
-      </div>
-      </>}
+      {gpuOpen && (
+        <>
+          <div>
+            <label>
+              <input
+                checked={turbo}
+                onChange={(e) => setRequestOption("turbo", e.target.checked)}
+                type="checkbox"
+              />
+              Turbo mode (generates images faster, but uses an additional 1 GB
+              of GPU memory)
+            </label>
+          </div>
+          <div>
+            <label>
+              <input
+                type="checkbox"
+                checked={use_cpu}
+                onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
+              />
+              Use CPU instead of GPU (warning: this will be *very* slow)
+            </label>
+          </div>
+          <div>
+            <label>
+              <input
+                checked={use_full_precision}
+                onChange={(e) =>
+                  setRequestOption("use_full_precision", e.target.checked)
+                }
+                type="checkbox"
+              />
+              Use full precision (for GPU-only. warning: this will consume more
+              VRAM)
+            </label>
+          </div>
+        </>
+      )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
index 49f3f727..7e4369ce 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
@@ -1,16 +1,21 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { useImageCreate } from "../../../../../store/imageCreateStore";
 
-export default function ImprovementSettings() {
+import { MenuButton } 
+from //@ts-ignore
+'../advancedsettings.css.ts';
 
+export default function ImprovementSettings() {
   // these are conditionals that should be retired and inferred from the store
   const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
-  const isUsingFaceCorrection = useImageCreate((state) =>state.isUsingFaceCorrection());
+  const isUsingFaceCorrection = useImageCreate((state) =>
+    state.isUsingFaceCorrection()
+  );
 
   const use_upscale = useImageCreate((state) =>
     state.getValueForRequestKey("use_upscale")
   );
-  
+
   const show_only_filtered_image = useImageCreate((state) =>
     state.getValueForRequestKey("show_only_filtered_image")
   );
@@ -31,64 +36,65 @@ export default function ImprovementSettings() {
     setImprovementOpen(!improvementOpen);
   };
 
-
   return (
     <div>
-     <button
+      <button
         type="button"
-        className="panel-box-toggle-btn"
+        className={MenuButton}
         onClick={toggleImprovementOpen}
       >
         <h4>Improvement Settings</h4>
       </button>
-      {improvementOpen && <>
-        <div>
-          <label>
-            <input
-              type="checkbox"
-              checked={isUsingFaceCorrection}
-              onChange={(e) => toggleUseFaceCorrection()}
-            />
-            Fix incorrect faces and eyes (uses GFPGAN)
-          </label>
-        </div>
-        <div>
-          <label>
-            <input
-              type="checkbox"
-              checked={isUsingUpscaling}
-              onChange={(e) => toggleUseUpscaling()}
-            />
-            Upscale the image to 4x resolution using
-            <select
-              id="upscale_model"
-              name="upscale_model"
-              disabled={!isUsingUpscaling}
-              value={use_upscale}
-              onChange={(e) => {
-                setRequestOption("use_upscale", e.target.value);
-              }}
-            >
-              <option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
-              <option value="RealESRGAN_x4plus_anime_6B">
-                RealESRGAN_x4plus_anime_6B
-              </option>
-            </select>
-          </label>
-        </div>
-        <div>
-          <label>
-            <input
-              type="checkbox"
-              checked={show_only_filtered_image}
-              onChange={(e) =>
-                setRequestOption("show_only_filtered_image", e.target.checked)
-              }
-            />
-            Show only filtered image
-          </label>
-        </div>
-      </>}
+      {improvementOpen && (
+        <>
+          <div>
+            <label>
+              <input
+                type="checkbox"
+                checked={isUsingFaceCorrection}
+                onChange={(e) => toggleUseFaceCorrection()}
+              />
+              Fix incorrect faces and eyes (uses GFPGAN)
+            </label>
+          </div>
+          <div>
+            <label>
+              <input
+                type="checkbox"
+                checked={isUsingUpscaling}
+                onChange={(e) => toggleUseUpscaling()}
+              />
+              Upscale the image to 4x resolution using
+              <select
+                id="upscale_model"
+                name="upscale_model"
+                disabled={!isUsingUpscaling}
+                value={use_upscale}
+                onChange={(e) => {
+                  setRequestOption("use_upscale", e.target.value);
+                }}
+              >
+                <option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
+                <option value="RealESRGAN_x4plus_anime_6B">
+                  RealESRGAN_x4plus_anime_6B
+                </option>
+              </select>
+            </label>
+          </div>
+          <div>
+            <label>
+              <input
+                type="checkbox"
+                checked={show_only_filtered_image}
+                onChange={(e) =>
+                  setRequestOption("show_only_filtered_image", e.target.checked)
+                }
+              />
+              Show only filtered image
+            </label>
+          </div>
+        </>
+      )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
index 938e4d44..5295d593 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
@@ -1,10 +1,9 @@
 import React, { useEffect } from "react";
 import { useImageCreate } from "../../../../store/imageCreateStore";
-import { 
+import {
   AdvancedSettingsList,
-  AdvancedSettingItem
-} // @ts-ignore 
-from "./advancedsettings.css.ts";
+  AdvancedSettingItem, // @ts-ignore
+} from "./advancedsettings.css.ts";
 
 import ImprovementSettings from "./improvementSettings";
 import PropertySettings from "./propertySettings";
@@ -12,7 +11,6 @@ import WorkflowSettings from "./workflowSettings";
 import GpuSettings from "./gpuSettings";
 
 function SettingsList() {
-
   return (
     <ul className={AdvancedSettingsList}>
       <li className={AdvancedSettingItem}>
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
index a9378e00..7452e46b 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
@@ -1,7 +1,9 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { useImageCreate } from "../../../../../store/imageCreateStore";
 
-
+import { MenuButton } 
+from //@ts-ignore
+'../advancedsettings.css.ts'
 // todo: move this someplace more global
 const IMAGE_DIMENSIONS = [
   { value: 128, label: "128 (*)" },
@@ -21,10 +23,7 @@ const IMAGE_DIMENSIONS = [
   { value: 1024, label: "1024 (*)" },
 ];
 
-
 export default function PropertySettings() {
-
-
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
   const toggleUseRandomSeed = useImageCreate(
     (state) => state.toggleUseRandomSeed
@@ -56,14 +55,15 @@ export default function PropertySettings() {
     <div>
       <button
         type="button"
-        className="panel-box-toggle-btn"
+        className={MenuButton}
         onClick={togglePropertyOpen}
       >
         <h4>Property Settings</h4>
       </button>
-      {propertyOpen && <>
-        <div>
-          <label>
+      {propertyOpen && (
+        <>
+          <div>
+            <label>
               Seed:
               <input
                 size={10}
@@ -72,102 +72,104 @@ export default function PropertySettings() {
                 disabled={isRandomSeed}
                 placeholder="random"
               />
-          </label>
-          <label>
+            </label>
+            <label>
               <input
                 type="checkbox"
                 checked={isRandomSeed}
                 onChange={(e) => toggleUseRandomSeed()}
               />{" "}
               Random Image
-          </label>
-        </div>
-    
-        <div>
-          <label>
-            Number of inference steps:{" "}
-            <input
-              value={steps}
-              onChange={(e) => {
-                setRequestOption("num_inference_steps", e.target.value);
-              }}
-              size={4}
-            />
-          </label>
-        </div>
+            </label>
+          </div>
 
-        <div>
-          <label>
-            Guidance Scale:
-            <input
-              value={guidance_scale}
-              onChange={(e) => setRequestOption("guidance_scale", e.target.value)}
-              type="range"
-              min="0"
-              max="20"
-              step=".1"
-            />
-          </label>
-          <span>{guidance_scale}</span>
-        </div>
+          <div>
+            <label>
+              Number of inference steps:{" "}
+              <input
+                value={steps}
+                onChange={(e) => {
+                  setRequestOption("num_inference_steps", e.target.value);
+                }}
+                size={4}
+              />
+            </label>
+          </div>
 
-        <div className="mb-4">
-          <label>
-            Prompt Strength:{" "}
-            <input
-              value={prompt_strength}
-              onChange={(e) =>
-                // setImageOptions({ promptStrength: Number(e.target.value) })
-                setRequestOption("prompt_strength", e.target.value)
-              }
-              type="range"
-              min="0"
-              max="1"
-              step=".05"
-            />
-          </label>
-          <span>{prompt_strength}</span>
-        </div>
+          <div>
+            <label>
+              Guidance Scale:
+              <input
+                value={guidance_scale}
+                onChange={(e) =>
+                  setRequestOption("guidance_scale", e.target.value)
+                }
+                type="range"
+                min="0"
+                max="20"
+                step=".1"
+              />
+            </label>
+            <span>{guidance_scale}</span>
+          </div>
 
-        <div>
-          <label>
-            Width:
-            <select
-              value={width}
-              onChange={(e) => setRequestOption("width", e.target.value)}
-            >
-              {IMAGE_DIMENSIONS.map((dimension) => (
-                <option
-                  key={"width-option_" + dimension.value}
-                  value={dimension.value}
-                >
-                  {dimension.label}
-                </option>
-              ))}
-            </select>
-          </label>
-        </div>
+          <div className="mb-4">
+            <label>
+              Prompt Strength:{" "}
+              <input
+                value={prompt_strength}
+                onChange={(e) =>
+                  // setImageOptions({ promptStrength: Number(e.target.value) })
+                  setRequestOption("prompt_strength", e.target.value)
+                }
+                type="range"
+                min="0"
+                max="1"
+                step=".05"
+              />
+            </label>
+            <span>{prompt_strength}</span>
+          </div>
 
-        <div>
-          <label>
-            Height:
-            <select
-              value={height}
-              onChange={(e) => setRequestOption("height", e.target.value)}
-            >
-              {IMAGE_DIMENSIONS.map((dimension) => (
-                <option
-                  key={"height-option_" + dimension.value}
-                  value={dimension.value}
-                >
-                  {dimension.label}
-                </option>
-              ))}
-            </select>
-          </label>
-        </div>
-      
-      </>}
+          <div>
+            <label>
+              Width:
+              <select
+                value={width}
+                onChange={(e) => setRequestOption("width", e.target.value)}
+              >
+                {IMAGE_DIMENSIONS.map((dimension) => (
+                  <option
+                    key={"width-option_" + dimension.value}
+                    value={dimension.value}
+                  >
+                    {dimension.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+
+          <div>
+            <label>
+              Height:
+              <select
+                value={height}
+                onChange={(e) => setRequestOption("height", e.target.value)}
+              >
+                {IMAGE_DIMENSIONS.map((dimension) => (
+                  <option
+                    key={"height-option_" + dimension.value}
+                    value={dimension.value}
+                  >
+                    {dimension.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+        </>
+      )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
index 4633e0a7..781aa020 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
@@ -1,16 +1,20 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { useImageCreate } from "../../../../../store/imageCreateStore";
 
+import { MenuButton } 
+from //@ts-ignore
+'../advancedsettings.css.ts';
+
+
 export default function WorkflowSettings() {
- 
   const num_outputs = useImageCreate((state) =>
     state.getValueForRequestKey("num_outputs")
   );
   const parallelCount = useImageCreate((state) => state.parallelCount);
   const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave());
   const save_to_disk_path = useImageCreate((state) =>
-  state.getValueForRequestKey("save_to_disk_path")
-);
+    state.getValueForRequestKey("save_to_disk_path")
+  );
   const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
 
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
@@ -20,7 +24,6 @@ export default function WorkflowSettings() {
     (state) => state.toggleSoundEnabled
   );
 
-
   const [workflowOpen, setWorkflowOpen] = useState(true);
 
   const toggleWorkflowOpen = () => {
@@ -29,72 +32,74 @@ export default function WorkflowSettings() {
 
   return (
     <div>
-       <button
+      <button
         type="button"
-        className="panel-box-toggle-btn"
+        className={MenuButton}
         onClick={toggleWorkflowOpen}
       >
         <h4>Workflow Settings</h4>
       </button>
-      {workflowOpen && <>
-        <div>
-          <label>
-            Number of images to make:{" "}
-            <input
-              type="number"
-              value={num_outputs}
-              onChange={(e) =>
-                setRequestOption("num_outputs", parseInt(e.target.value, 10))
-              }
-              size={4}
-            />
-          </label>
-        </div>
-        <div>
-          <label>
-            Generate in parallel:
-            <input
-              type="number"
-              value={parallelCount}
-              onChange={(e) => setParallelCount(parseInt(e.target.value, 10))}
-              size={4}
-            />
-          </label>
-        </div>
-        <div>
-          <label>
-            <input
-              checked={isUseAutoSave}
-              onChange={(e) => toggleUseAutoSave()}
-              type="checkbox"
-            />
-            Automatically save to{" "}
-          </label>
-          <label>
-            <input
-              value={save_to_disk_path}
-              onChange={(e) =>
-                setRequestOption("save_to_disk_path", e.target.value)
-              }
-              size={40}
-              disabled={!isUseAutoSave}
-            />
-            <span className="visually-hidden">
-              Path on disk where images will be saved
-            </span>
-          </label>
-        </div>
-        <div>
-          <label>
-            <input
-              checked={isSoundEnabled}
-              onChange={(e) => toggleSoundEnabled()}
-              type="checkbox"
-            />
-            Play sound on task completion
-          </label>
-        </div>
-      </>}
+      {workflowOpen && (
+        <>
+          <div>
+            <label>
+              Number of images to make:{" "}
+              <input
+                type="number"
+                value={num_outputs}
+                onChange={(e) =>
+                  setRequestOption("num_outputs", parseInt(e.target.value, 10))
+                }
+                size={4}
+              />
+            </label>
+          </div>
+          <div>
+            <label>
+              Generate in parallel:
+              <input
+                type="number"
+                value={parallelCount}
+                onChange={(e) => setParallelCount(parseInt(e.target.value, 10))}
+                size={4}
+              />
+            </label>
+          </div>
+          <div>
+            <label>
+              <input
+                checked={isUseAutoSave}
+                onChange={(e) => toggleUseAutoSave()}
+                type="checkbox"
+              />
+              Automatically save to{" "}
+            </label>
+            <label>
+              <input
+                value={save_to_disk_path}
+                onChange={(e) =>
+                  setRequestOption("save_to_disk_path", e.target.value)
+                }
+                size={40}
+                disabled={!isUseAutoSave}
+              />
+              <span className="visually-hidden">
+                Path on disk where images will be saved
+              </span>
+            </label>
+          </div>
+          <div>
+            <label>
+              <input
+                checked={isSoundEnabled}
+                onChange={(e) => toggleSoundEnabled()}
+                type="checkbox"
+              />
+              Play sound on task completion
+            </label>
+          </div>
+        </>
+      )}
     </div>
   );
-};
\ No newline at end of file
+}
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
index c4ae4a45..da211031 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
@@ -1,8 +1,8 @@
-import { style } from '@vanilla-extract/css';
+import { style } from "@vanilla-extract/css";
 
 export const CreationPaneMain = style({
-  position: 'relative',
-  width: '100%',
-  height: '100%',
-  padding:'0 10px',
-});
\ No newline at end of file
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  padding: "0 10px",
+});
diff --git a/ui/frontend/build_src/src/styles.css.ts b/ui/frontend/build_src/src/styles.css.ts
index 13234aa5..d31ec36b 100644
--- a/ui/frontend/build_src/src/styles.css.ts
+++ b/ui/frontend/build_src/src/styles.css.ts
@@ -19,7 +19,9 @@ globalStyle(`*`, {
   boxSizing: "border-box",
 });
 
-globalStyle(`p`, {
+
+/** RESET  */
+globalStyle(`p, h3, h4`, {
   margin: 0,
 });