Merge pull request #23 from caranicas/beta-react-prompt-and-beta

Beta react prompt gate, beta checkmark, styling iteration

ui/frontend/build_src/index.html

@@ -17,19 +17,7 @@
     <!-- THE STYLES ARE BEING USED IN THE REACT APP  -->
     <!-- WE NEED TO PORT OVER THE STYLES OVER TO THE REACT COMPONENTS -->
     <style>
-      /* body {
-        font-family: Arial, Helvetica, sans-serif;
-        font-size: 11pt;
-        background-color: rgb(32, 33, 36);
-        color: #eee;
-      } */
-      a {
-        color: rgb(0, 102, 204);
-      }
-      a:visited {
-        color: rgb(0, 102, 204);
-      }
-      label {
+      /* label {
         font-size: 10pt;
       }
       #prompt {
@@ -71,7 +59,7 @@
       }
       #guidance_scale {
         transform: translateY(30%);
-      }
+      } */
       #outputMsg {
         font-size: small;
       }

ui/frontend/build_src/package-lock.json

@@ -12,6 +12,7 @@
         "@tanstack/react-query": "^4.2.3",
         "@tanstack/react-query-devtools": "^4.2.3",
         "@vanilla-extract/css": "^1.9.0",
+        "@vanilla-extract/recipes": "^0.2.5",
         "@vanilla-extract/vite-plugin": "^3.5.0",
         "immer": "^9.0.15",
         "react": "^18.2.0",
@@ -776,6 +777,14 @@
       "resolved": "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz",
       "integrity": "sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ=="
     },
+    "node_modules/@vanilla-extract/recipes": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/recipes/-/recipes-0.2.5.tgz",
+      "integrity": "sha512-OWXUUiFJdswD3+Xg8f8avuw/vAHZRFS4oHqFeoV1TcO8cfbDQ0zmkreBHvyspoJU+qsyWK48yPHKSptqNRPy9Q==",
+      "peerDependencies": {
+        "@vanilla-extract/css": "^1.0.0"
+      }
+    },
     "node_modules/@vanilla-extract/vite-plugin": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.5.0.tgz",
@@ -2489,6 +2498,12 @@
       "resolved": "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz",
       "integrity": "sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ=="
     },
+    "@vanilla-extract/recipes": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/recipes/-/recipes-0.2.5.tgz",
+      "integrity": "sha512-OWXUUiFJdswD3+Xg8f8avuw/vAHZRFS4oHqFeoV1TcO8cfbDQ0zmkreBHvyspoJU+qsyWK48yPHKSptqNRPy9Q==",
+      "requires": {}
+    },
     "@vanilla-extract/vite-plugin": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.5.0.tgz",

ui/frontend/build_src/package.json

@@ -14,6 +14,7 @@
     "@tanstack/react-query": "^4.2.3",
     "@tanstack/react-query-devtools": "^4.2.3",
     "@vanilla-extract/css": "^1.9.0",
+    "@vanilla-extract/recipes": "^0.2.5",
     "@vanilla-extract/vite-plugin": "^3.5.0",
     "immer": "^9.0.15",
     "react": "^18.2.0",

ui/frontend/build_src/src/App.tsx

@@ -3,12 +3,12 @@ import { ReactLocation, Router } from "@tanstack/react-location";
 
 import Home from "./pages/Home";
 import Settings from "./pages/Settings";
-import { darkTheme, lightTheme } from "./styles/theme.css";
+// @ts-ignore
+import { darkTheme, lightTheme } from "./styles/theme/index.css.ts";
 
 const location = new ReactLocation();
 
 function App() {
-
   // just check for the theme one 1 time
   // var { matches } = window.matchMedia('(prefers-color-scheme: dark)')
   const matches = true;
@@ -19,7 +19,7 @@ function App() {
       location={location}
       routes={[
         { path: "/", element: <Home className={themeClass} /> },
-        { path: "settings", element: <Settings className={themeClass} /> },
+        { path: "/settings", element: <Settings className={themeClass} /> },
       ]}
     ></Router>
   );

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

@@ -31,9 +31,24 @@ export const getSaveDirectory = async () => {
   return data[0];
 };
 
+export const KEY_CONFIG = "config";
 export const getConfig = async () => {
   const response = await fetch(`${API_URL}/app_config`);
-  console.log("getConfig response", response);
+  const data = await response.json();
+  return data;
+};
+
+export const KEY_TOGGLE_CONFIG = "toggle_config";
+export const toggleBetaConfig = async (branch: string) => {
+  const response = await fetch(`${API_URL}/app_config`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      update_branch: branch,
+    }),
+  });
   const data = await response.json();
   return data;
 };

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

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+
+import {
+  KEY_CONFIG,
+  getConfig,
+  KEY_TOGGLE_CONFIG,
+  toggleBetaConfig,
+} from "../../../api";
+
+export default function BetaMode() {
+  // gate for the toggle
+  const [shouldSetCofig, setShouldSetConfig] = useState(false);
+  // next branch to get
+  const [branchToGetNext, setBranchToGetNext] = useState("beta");
+
+  // our basic config
+  const { status: configStatus, data: configData } = useQuery(
+    [KEY_CONFIG],
+    getConfig
+  );
+  const queryClient = useQueryClient();
+
+  // the toggle config
+  const { status: toggleStatus, data: toggleData } = useQuery(
+    [KEY_TOGGLE_CONFIG],
+    () => toggleBetaConfig(branchToGetNext),
+    {
+      enabled: shouldSetCofig,
+    }
+  );
+
+  // this is also in the Header Display
+  // TODO: make this a custom hook
+  useEffect(() => {
+    if (configStatus === "success") {
+      const { update_branch } = configData;
+
+      if (update_branch === "main") {
+        setBranchToGetNext("beta");
+      } else {
+        // setIsBeta(true);
+        setBranchToGetNext("main");
+      }
+    }
+  }, [configStatus, configData]);
+
+  useEffect(() => {
+    if (toggleStatus === "success") {
+      if (toggleData[0] == "OK") {
+        // force a refetch of the config
+        queryClient.invalidateQueries([KEY_CONFIG]);
+      }
+      setShouldSetConfig(false);
+    }
+  }, [toggleStatus, toggleData, setShouldSetConfig]);
+
+  return (
+    <label>
+      <input
+        disabled={true}
+        type="checkbox"
+        checked={branchToGetNext === "main"}
+        onChange={(e) => {
+          setShouldSetConfig(true);
+        }}
+      />
+      Enable Beta Mode
+    </label>
+  );
+}

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

@@ -31,7 +31,6 @@ export default function DrawImage({
   const [canvasHeight, setCanvasHeight] = useState(512);
 
   useEffect(() => {
-    console.log(imageData);
     const img = new Image();
     img.onload = () => {
       setCanvasWidth(img.width);
@@ -61,7 +60,6 @@ export default function DrawImage({
   const _handleMouseDown = (
     e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
   ) => {
-    console.log("mouse down", e);
 
     const {
       nativeEvent: { offsetX, offsetY },

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts

@@ -1,19 +1,17 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-export const AdvancedSettingsList = style({
-  // font-size: 9pt;
-  // margin-bottom: 5px;
-  // padding-left: 10px;
-  // list-style-type: none;
+// @ts-ignore
+import { vars } from "../../../../styles/theme/index.css.ts";
 
-  fontSize: "9pt",
-  marginBottom: "5px",
-  paddingLeft: "10px",
+export const AdvancedSettingsList = style({
+  fontSize: vars.fonts.sizes.Body,
+  marginBottom: vars.spacing.small,
+  paddingLeft: vars.spacing.medium,
   listStyleType: "none",
 });
 
 export const AdvancedSettingItem = style({
-  paddingBottom: "5px",
+  paddingBottom: vars.spacing.small,
 });
 
 export const MenuButton = style({
@@ -21,11 +19,11 @@ export const MenuButton = style({
   width: "100%",
   textAlign: "left",
   backgroundColor: "transparent",
-  color: "#fff",
+  color: vars.colors.text.normal,
   border: "0 none",
   cursor: "pointer",
   padding: "0",
-  marginBottom: "10px",
+  marginBottom: vars.spacing.small,
 });
 
 globalStyle(`${MenuButton}> h4`, {

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

@@ -11,6 +11,8 @@ import PropertySettings from "./propertySettings";
 import WorkflowSettings from "./workflowSettings";
 import GpuSettings from "./gpuSettings";
 
+import BetaMode from "../../../molecules/betaMode";
+
 function SettingsList() {
   return (
     <ul className={AdvancedSettingsList}>
@@ -26,6 +28,10 @@ function SettingsList() {
       <li className={AdvancedSettingItem}>
         <GpuSettings />
       </li>
+
+      <li className={AdvancedSettingItem}>
+        <BetaMode />
+      </li>
     </ul>
   );
 }

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

@@ -38,9 +38,15 @@ export default function PropertySettings() {
   const guidance_scale = useImageCreate((state) =>
     state.getValueForRequestKey("guidance_scale")
   );
+
+  const init_image = useImageCreate((state) =>
+    state.getValueForRequestKey("init_image")
+  );
+
   const prompt_strength = useImageCreate((state) =>
     state.getValueForRequestKey("prompt_strength")
   );
+
   const width = useImageCreate((state) => state.getValueForRequestKey("width"));
   const height = useImageCreate((state) =>
     state.getValueForRequestKey("height")
@@ -109,23 +115,24 @@ export default function PropertySettings() {
             <span>{guidance_scale}</span>
           </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>
+          {init_image && (
+            <div>
+              <label>
+                Prompt Strength:{" "}
+                <input
+                  value={prompt_strength}
+                  onChange={(e) =>
+                    setRequestOption("prompt_strength", e.target.value)
+                  }
+                  type="range"
+                  min="0"
+                  max="1"
+                  step=".05"
+                />
+              </label>
+              <span>{prompt_strength}</span>
+            </div>
+          )}
 
           <div>
             <label>

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

@@ -1,15 +1,31 @@
 import { style } from "@vanilla-extract/css";
 
+// @ts-ignore
+import { vars } from "../../../../../styles/theme/index.css.ts";
+
 export const MakeButtonStyle = style({
   width: "100%",
-  backgroundColor: "rgb(38, 77, 141)",
-  fontSize: "1.5em",
+  backgroundColor: vars.colors.brand,
+  fontSize: vars.fonts.sizes.Headline,
   fontWeight: "bold",
-  color: "white",
-  padding: "8px",
-  borderRadius: "5px",
+  color: vars.colors.text.normal,
+  padding: vars.spacing.small,
+  borderRadius: vars.trim.smallBorderRadius,
+
+  ":hover": {
+    backgroundColor: vars.colors.brandHover,
+  },
+
+  ":active": {
+    backgroundColor: vars.colors.brandActive,
+  },
 
   ":disabled": {
-    backgroundColor: "rgb(38, 77, 141, 0.5)",
+    backgroundColor: vars.colors.brandDimmed,
+    color: vars.colors.text.dimmed,
+  },
+
+  ":focus": {
+    outline: "none",
   },
 });

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

@@ -1,12 +1,14 @@
 import { style } from "@vanilla-extract/css";
 
+// @ts-ignore
+import { vars } from "../../../../../styles/theme/index.css.ts";
+
 export const ImageInputDisplay = style({
   display: "flex",
-  // justifyContent:'space-around',
 });
 
 export const InputLabel = style({
-  marginBottom: "5px",
+  marginBottom: vars.spacing.small,
   display: "block",
 });
 
@@ -15,12 +17,25 @@ export const ImageInput = style({
 });
 
 export const ImageInputButton = style({
-  backgroundColor: "rgb(38, 77, 141)",
-  fontSize: "1.2em",
+  backgroundColor: vars.colors.brand,
+  fontSize: vars.fonts.sizes.Subheadline,
   fontWeight: "bold",
-  color: "white",
-  padding: "8px",
-  borderRadius: "5px",
+  color: vars.colors.text.normal,
+  padding: vars.spacing.small,
+  borderRadius: vars.trim.smallBorderRadius,
+
+  ":hover": {
+    backgroundColor: vars.colors.brandHover,
+  },
+
+  ":active": {
+    backgroundColor: vars.colors.brandActive,
+  },
+
+  ":disabled": {
+    backgroundColor: vars.colors.brandDimmed,
+    color: vars.colors.text.dimmed,
+  },
 });
 
 // this is needed to fix an issue with the image input text
@@ -29,6 +44,8 @@ export const ImageFixer = style({
   marginLeft: "20px",
 });
 
+// just a 1 off component for now
+// dont bother bringing in line with the rest of the app
 export const XButton = style({
   position: "absolute",
   transform: "translateX(-50%) translateY(-35%)",

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

@@ -1,9 +1,10 @@
 import { style } from "@vanilla-extract/css";
 
+// @ts-ignore
+import { vars } from "../../../styles/theme/index.css.ts";
+
 export const displayPanel = style({
-  padding: "10px",
-  // width: '512px',
-  // height: '512px',
+  padding: vars.spacing.medium,
 });
 
 export const displayContainer = style({
@@ -20,12 +21,12 @@ export const CurrentDisplay = style({
 });
 
 export const previousImages = style({
-  marginLeft: "30px",
+  marginLeft: vars.spacing.large,
   display: "flex",
   flex: "auto",
   flexWrap: "wrap",
 });
 
 export const previousImage = style({
-  margin: "0 10px",
+  margin: `0 ${vars.spacing.small}`,
 });

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

@@ -1,14 +1,16 @@
 import { style, globalStyle } from "@vanilla-extract/css";
+//@ts-ignore
+import { vars } from "../../../styles/theme/index.css.ts";
 
 export const HeaderDisplayMain = style({
-  color: "#ffffff",
+  color: vars.colors.text.normal,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
 });
 
 globalStyle(`${HeaderDisplayMain} > h1`, {
-  fontSize: "1.5em",
+  fontSize: vars.fonts.sizes.Title,
   fontWeight: "bold",
-  marginRight: "10px",
+  marginRight: vars.spacing.medium,
 });

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { useQuery } from "@tanstack/react-query";
-import { getConfig } from "../../../api";
+import { KEY_CONFIG, getConfig } from "../../../api";
 
 import StatusDisplay from "./statusDisplay";
 
@@ -10,12 +10,13 @@ import {
 } from "./headerDisplay.css.ts";
 
 export default function HeaderDisplay() {
-  // but this will be moved to the status display when it is created
-  const { status, data } = useQuery(["config"], getConfig);
+  const { status, data } = useQuery([KEY_CONFIG], getConfig);
 
   const [version, setVersion] = useState("2.1.0");
   const [release, setRelease] = useState("");
 
+  // this is also in the Beta Mode
+  // TODO: make this a custom hook
   useEffect(() => {
     if (status === "success") {
       // TODO also pass down the actual version

ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css.ts

@@ -1,14 +1,16 @@
 import { style } from "@vanilla-extract/css";
 
-// TODO  MOVE TO GLOBAL CSS
+// @ts-ignore
+import { vars } from "../../../../styles/theme/index.css.ts";
+
 export const StartingStatus = style({
-  color: "#f0ad4e",
+  color: vars.colors.warning,
 });
 
 export const ErrorStatus = style({
-  color: "#d9534f",
+  color: vars.colors.error,
 });
 
 export const SuccessStatus = style({
-  color: "#5cb85c",
+  color: vars.colors.success,
 });

ui/frontend/build_src/src/main.tsx

@@ -7,9 +7,9 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import { enableMapSet } from "immer";
 
-import App from "./app";
+import App from "./App";
 
-import "./styles/styles.css.ts";
+import "./styles/index.css.ts";
 
 const queryClient = new QueryClient({
   defaultOptions: {

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

@@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";
 // @ts-ignore
-import { vars } from "../../styles/theme.css.ts";
+import { vars } from "../../styles/theme/index.css.ts";
 
 export const AppLayout = style({
   position: "relative",

ui/frontend/build_src/src/pages/Home/index.tsx

@@ -20,7 +20,7 @@ import CreationPanel from "../../components/organisms/creationPanel";
 import DisplayPanel from "../../components/organisms/displayPanel";
 import FooterDisplay from "../../components/organisms/footerDisplay";
 
-function Home({ className }: { className: string }) {
+function Home({ className }: { className: any }) {
   // Get the original save directory
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 

ui/frontend/build_src/src/pages/Settings/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function Settings({ className }: { className: string }) {
+export default function Settings({ className }: { className: any }) {
   return (
     <div>
       <h1>Settings</h1>

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

@@ -211,6 +211,10 @@ export const useImageCreate = create<ImageCreateState>(
         request.use_upscale = null;
       }
 
+      if (void 0 === requestOptions.init_image) {
+        request.prompt_strength = undefined;
+      }
+
       return request;
     },
 

ui/frontend/build_src/src/styles/index.css.ts

@@ -1,11 +1,16 @@
 import { globalStyle } from "@vanilla-extract/css";
+// @ts-ignore
+import { vars } from "./theme/index.css.ts";
 
+// baisc body style
 globalStyle("body", {
   margin: 0,
   minWidth: "320px",
   minHeight: "100vh",
+  fontFamily: vars.fonts.body,
 });
 
+// single page style
 globalStyle("#root", {
   position: "absolute",
   top: 0,
@@ -15,11 +20,12 @@ globalStyle("#root", {
   overflow: "hidden",
 });
 
+// border box all
 globalStyle(`*`, {
   boxSizing: "border-box",
 });
 
-/** RESET  */
+/** RESETS */
 globalStyle(`p, h3, h4`, {
   margin: 0,
 });

ui/frontend/build_src/src/styles/recipes/index.css.ts

@@ -0,0 +1,22 @@
+import { recipe } from "@vanilla-extract/recipes";
+
+export const button = recipe({
+  variants: {
+    color: {
+      neutral: { background: "whitesmoke" },
+      brand: { background: "blueviolet" },
+      accent: { background: "slateblue" },
+    },
+    size: {
+      small: { padding: 12 },
+      medium: { padding: 16 },
+      large: { padding: 24 },
+    },
+  },
+});
+
+// export const card = recipe({
+//   variants: {
+//     color: {
+
+//       alt: { background: 'whitesmoke' },

ui/frontend/build_src/src/styles/theme.css.ts

@@ -1,60 +0,0 @@
-import {
-  createGlobalThemeContract,
-  createGlobalTheme,
-  createThemeContract,
-  createTheme,
-} from "@vanilla-extract/css";
-
-const colors = createThemeContract({
-  primary: null,
-  secondary: null,
-  background: null,
-  warning: "yellow",
-  error: "red",
-  success: "green",
-  text: {
-    normal: null,
-    dimmed: null,
-  },
-});
-
-const app = createGlobalTheme(":root", {
-  spacing: {
-    small: "5px",
-    medium: "10px",
-    large: "25px",
-  },
-  fonts: {
-    heading: "Georgia, Times, Times New Roman, serif",
-    body: "system-ui",
-  },
-  colors: colors,
-});
-
-export const lightTheme = createTheme(colors, {
-  primary: "#1E40AF",
-  secondary: "#DB2777",
-  background: "#EFF6FF",
-  warning: "yellow",
-  error: "red",
-  success: "green",
-  text: {
-    normal: "#1F2937",
-    dimmed: "#6B7280",
-  },
-});
-
-export const darkTheme = createTheme(colors, {
-  primary: "#60A5FA",
-  secondary: "#F472B6",
-  background: "rgb(32, 33, 36)",
-  warning: "yellow",
-  error: "red",
-  success: "green",
-  text: {
-    normal: "#F9FAFB",
-    dimmed: "#D1D5DB",
-  },
-});
-
-export const vars = { ...app, colors };

ui/frontend/build_src/src/styles/theme/index.css.ts

@@ -0,0 +1,156 @@
+import {
+  createGlobalTheme,
+  createThemeContract,
+  createTheme,
+} from "@vanilla-extract/css";
+
+/**
+ * Colors are all the same across the themes, this is just to set up a contract
+ * Colors can be decided later. I am just the architect.
+ * Tried to pull things from the original app.
+ *
+ * Lots of these arent used yet, but once they are defined and useable then they can be set.
+ */
+
+// Link color 0, 102, 204
+
+const colors = createThemeContract({
+  brand: null,
+  brandDimmed: null,
+  brandHover: null,
+  brandActive: null,
+  brandAccent: null,
+  brandAccentDimmed: null,
+  brandAccentActive: null,
+
+  secondary: null,
+  secondaryDimmed: null,
+  secondaryHover: null,
+  secondaryActive: null,
+  secondaryAccent: null,
+  secondaryAccentDimmed: null,
+  secondaryAccentActive: null,
+
+  background: null,
+  backgroundAccent: null,
+  backgroundAlt: null,
+  backgroundAltAccent: null,
+
+  text: {
+    normal: null,
+    dimmed: null,
+
+    secondary: null,
+    secondaryDimmed: null,
+
+    accent: null,
+    accentDimmed: null,
+  },
+
+  warning: null,
+  error: null,
+  success: null,
+});
+
+const app = createGlobalTheme(":root", {
+  spacing: {
+    small: "5px",
+    medium: "10px",
+    large: "25px",
+  },
+
+  trim: {
+    smallBorderRadius: "5px",
+  },
+
+  fonts: {
+    body: "Arial, Helvetica, sans-serif;",
+    sizes: {
+      Title: "2em",
+      Headline: "1.5em",
+      Subheadline: "1.20em",
+      Body: "1em",
+      Caption: ".75em",
+      Overline: ".5em",
+    },
+  },
+  colors: colors,
+});
+
+export const darkTheme = createTheme(colors, {
+  brand: "#5000b9", // purple
+  brandDimmed: "#433852", // muted purple
+  brandHover: "#5d00d6", // bringhter purple
+  brandActive: "#5d00d6", // bringhter purple
+  brandAccent: "#28004e", // darker purple
+  brandAccentDimmed: "#28004e", // darker purple
+  brandAccentActive: "#28004e", // darker purple
+
+  secondary: "#0b8334", // green
+  secondaryDimmed: "#0b8334", // green
+  secondaryHover: "#0b8334", // green
+  secondaryActive: "#0b8334", // green
+  secondaryAccent: "#0b8334", // green
+  secondaryAccentDimmed: "#0b8334", // green
+  secondaryAccentActive: "#0b8334", // green
+
+  background: "#202124", // dark grey
+  backgroundAccent: " #383838", // lighter grey
+  backgroundAlt: "#2c2d30", // med grey
+  backgroundAltAccent: "#383838", // lighter grey
+
+  text: {
+    normal: "#ffffff", // white
+    dimmed: "#d1d5db", // off white
+
+    secondary: "#ffffff", // white
+    secondaryDimmed: "#d1d5db", // off white
+
+    accent: "#e7ba71", // orange
+    accentDimmed: "#7d6641", // muted orange
+  },
+
+  warning: "#f0ad4e",
+  error: "#d9534f",
+  success: "#5cb85c",
+});
+
+// Generated by co-pilot
+export const lightTheme = createTheme(colors, {
+  brand: "#1E40AF",
+  brandDimmed: "#1E40AF",
+  brandHover: "#1E40AF",
+  brandActive: "#1E40AF",
+  brandAccent: "#1E40AF",
+  brandAccentDimmed: "#1E40AF",
+  brandAccentActive: "#1E40AF",
+
+  secondary: "#DB2777",
+  secondaryDimmed: "#DB2777",
+  secondaryHover: "#DB2777",
+  secondaryActive: "#DB2777",
+  secondaryAccent: "#DB2777",
+  secondaryAccentDimmed: "#DB2777",
+  secondaryAccentActive: "#DB2777",
+
+  background: "#EFF6FF",
+  backgroundAccent: "#EFF6FF",
+  backgroundAlt: "#EFF6FF",
+  backgroundAltAccent: "#EFF6FF",
+  text: {
+    normal: "#1F2937",
+    dimmed: "#6B7280",
+
+    secondary: "#1F2937",
+    secondaryDimmed: "#6B7280",
+
+    accent: "#1F2937",
+    accentDimmed: "#6B7280",
+  },
+
+  warning: "yellow",
+  error: "red",
+  success: "green",
+});
+
+export const vars = { ...app, colors };

ui/frontend/dist/index.html

@@ -19,19 +19,7 @@
     <!-- THE STYLES ARE BEING USED IN THE REACT APP  -->
     <!-- WE NEED TO PORT OVER THE STYLES OVER TO THE REACT COMPONENTS -->
     <style>
-      /* body {
-        font-family: Arial, Helvetica, sans-serif;
-        font-size: 11pt;
-        background-color: rgb(32, 33, 36);
-        color: #eee;
-      } */
-      a {
-        color: rgb(0, 102, 204);
-      }
-      a:visited {
-        color: rgb(0, 102, 204);
-      }
-      label {
+      /* label {
         font-size: 10pt;
       }
       #prompt {
@@ -73,7 +61,7 @@
       }
       #guidance_scale {
         transform: translateY(30%);
-      }
+      } */
       #outputMsg {
         font-size: small;
       }

ui/index.html

@@ -1172,12 +1172,9 @@ function showInitImagePreview() {
     let file = initImageSelector.files[0]
 
     reader.addEventListener('load', function() {
-        // console.log(file.name, reader.result)
         initImagePreview.src = reader.result
         initImagePreviewContainer.style.display = 'block'
         promptStrengthContainer.style.display = 'block'
-
-        // maskSetting.style.display = 'block'
     })
 
     if (file) {