diff --git a/ui/frontend/build_src/index.html b/ui/frontend/build_src/index.html
index 9cd2abff..357508a6 100644
--- a/ui/frontend/build_src/index.html
+++ b/ui/frontend/build_src/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark light" />
     <title>Stable Diffusion UI</title>
   </head>
   <body>
@@ -16,12 +17,12 @@
     <!-- THE STYLES ARE BEING USED IN THE REACT APP  -->
     <!-- WE NEED TO PORT OVER THE STYLES OVER TO THE REACT COMPONENTS -->
     <style>
-      body {
+      /* body {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 11pt;
         background-color: rgb(32, 33, 36);
         color: #eee;
-      }
+      } */
       a {
         color: rgb(0, 102, 204);
       }
diff --git a/ui/frontend/build_src/src/App.tsx b/ui/frontend/build_src/src/App.tsx
index eecf8a34..20e7cb1c 100644
--- a/ui/frontend/build_src/src/App.tsx
+++ b/ui/frontend/build_src/src/App.tsx
@@ -1,17 +1,25 @@
+import React, { useState } from "react";
 import { ReactLocation, Router } from "@tanstack/react-location";
 
 import Home from "./pages/Home";
 import Settings from "./pages/Settings";
+import { darkTheme, lightTheme } from "./styles/theme.css";
 
 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;
+  const themeClass = matches ? darkTheme : lightTheme;
+
   return (
     <Router
       location={location}
       routes={[
-        { path: "/", element: <Home /> },
-        { path: "settings", element: <Settings /> },
+        { path: "/", element: <Home className={themeClass} /> },
+        { path: "settings", element: <Settings className={themeClass} /> },
       ]}
     ></Router>
   );
diff --git a/ui/frontend/build_src/src/main.tsx b/ui/frontend/build_src/src/main.tsx
index 0ab77818..0b2ec578 100644
--- a/ui/frontend/build_src/src/main.tsx
+++ b/ui/frontend/build_src/src/main.tsx
@@ -9,7 +9,7 @@ import { enableMapSet } from "immer";
 
 import App from "./app";
 
-import "./styles.css.ts";
+import "./styles/styles.css.ts";
 
 const queryClient = new QueryClient({
   defaultOptions: {
diff --git a/ui/frontend/build_src/src/pages/Home/home.css.ts b/ui/frontend/build_src/src/pages/Home/home.css.ts
index f9be163f..2b9cd76c 100644
--- a/ui/frontend/build_src/src/pages/Home/home.css.ts
+++ b/ui/frontend/build_src/src/pages/Home/home.css.ts
@@ -1,12 +1,15 @@
 import { style } from "@vanilla-extract/css";
+// @ts-ignore
+import { vars } from "../../styles/theme.css.ts";
 
 export const AppLayout = style({
   position: "relative",
+  backgroundColor: vars.colors.background,
   width: "100%",
   height: "100%",
   pointerEvents: "auto",
   display: "grid",
-  backgroundColor: "rgb(32, 33, 36)",
+  // backgroundColor: "rgb(32, 33, 36)",
   gridTemplateColumns: "400px 1fr",
   gridTemplateRows: "100px 1fr 50px",
   gridTemplateAreas: `
diff --git a/ui/frontend/build_src/src/pages/Home/index.tsx b/ui/frontend/build_src/src/pages/Home/index.tsx
index ffcb2ab2..fdfbdd35 100644
--- a/ui/frontend/build_src/src/pages/Home/index.tsx
+++ b/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 Editor() {
+function Home({ className }: { className: string }) {
   // Get the original save directory
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
@@ -51,7 +51,7 @@ function Editor() {
   }, [setRequestOption, statusMods, dataMoads]);
 
   return (
-    <div className={AppLayout}>
+    <div className={[AppLayout, className].join(" ")}>
       <header className={HeaderLayout}>
         <HeaderDisplay></HeaderDisplay>
       </header>
@@ -68,4 +68,4 @@ function Editor() {
   );
 }
 
-export default Editor;
+export default Home;
diff --git a/ui/frontend/build_src/src/pages/Settings/index.tsx b/ui/frontend/build_src/src/pages/Settings/index.tsx
index 3d75c1ef..ce7df5c8 100644
--- a/ui/frontend/build_src/src/pages/Settings/index.tsx
+++ b/ui/frontend/build_src/src/pages/Settings/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function Settings() {
+export default function Settings({ className }: { className: string }) {
   return (
     <div>
       <h1>Settings</h1>
diff --git a/ui/frontend/build_src/src/styles.css.ts b/ui/frontend/build_src/src/styles/styles.css.ts
similarity index 100%
rename from ui/frontend/build_src/src/styles.css.ts
rename to ui/frontend/build_src/src/styles/styles.css.ts
diff --git a/ui/frontend/build_src/src/styles/theme.css.ts b/ui/frontend/build_src/src/styles/theme.css.ts
new file mode 100644
index 00000000..ac448b84
--- /dev/null
+++ b/ui/frontend/build_src/src/styles/theme.css.ts
@@ -0,0 +1,60 @@
+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 };
diff --git a/ui/frontend/dist/index.css b/ui/frontend/dist/index.css
index ec19ae58..6aebcc1b 100644
--- a/ui/frontend/dist/index.css
+++ b/ui/frontend/dist/index.css
@@ -1 +1 @@
-._1qevocv0{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1qevocv1{grid-area:header}._1qevocv2{grid-area:create;position:relative}._1qevocv3{grid-area:display;overflow:auto}._1qevocv4{grid-area:footer}@media screen and (max-width: 800px){._1qevocv0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}._1jo75h0{color:#f0ad4e}._1jo75h1{color:#d9534f}._1jo75h2{color:#5cb85c}._1v2cc580{color:#fff;display:flex;align-items:center;justify-content:center}._1v2cc580>h1{font-size:1.5em;font-weight:700;margin-right:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.fma0ug0{position:relative}.fma0ug0>canvas{position:absolute;top:0;left:0;width:100%;height:100%}.fma0ug0>canvas:first-of-type{opacity:.7}.fma0ug0>img{top:0;left:0}._2yyo4x0{position:relative;width:100%;height:100%;padding:10px}._2yyo4x1{display:flex;flex-direction:row;width:100%;flex-wrap:wrap}._2yyo4x2{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:100%}._2yyo4x2:first-of-type{margin:10px 0}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px;overflow-y:auto}.cjcdm21{position:absolute;top:10px;left:400px;z-index:1;background-color:#00000080}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1hnlbmt0:disabled{background-color:#264d8d80}._1yvg52n0{position:relative;width:512px;height:512px}._1yvg52n1{width:512px;height:512px;background-color:#000;display:flex;justify-content:center;align-items:center}._1yvg52n2{width:512px;height:512px;object-fit:contain}._1yvg52n3{position:absolute;bottom:10px;left:10px}._1yvg52n4{position:absolute;bottom:10px;right:10px}._688lcr0{padding:10px}._688lcr1{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}._688lcr2{width:512px;height:100%}._688lcr3{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}._688lcr4{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}
+:root{--ruay188: 5px;--ruay189: 10px;--ruay18a: 25px;--ruay18b: Georgia, Times, Times New Roman, serif;--ruay18c: system-ui;--ruay18d: var(--ruay180);--ruay18e: var(--ruay181);--ruay18f: var(--ruay182);--ruay18g: var(--ruay183);--ruay18h: var(--ruay184);--ruay18i: var(--ruay185);--ruay18j: var(--ruay186);--ruay18k: var(--ruay187)}.ruay18l{--ruay180: #1E40AF;--ruay181: #DB2777;--ruay182: #EFF6FF;--ruay183: yellow;--ruay184: red;--ruay185: green;--ruay186: #1F2937;--ruay187: #6B7280}.ruay18m{--ruay180: #60A5FA;--ruay181: #F472B6;--ruay182: rgb(32, 33, 36);--ruay183: yellow;--ruay184: red;--ruay185: green;--ruay186: #F9FAFB;--ruay187: #D1D5DB}._1qevocv0{position:relative;background-color:var(--ruay182);width:100%;height:100%;pointer-events:auto;display:grid;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1qevocv1{grid-area:header}._1qevocv2{grid-area:create;position:relative}._1qevocv3{grid-area:display;overflow:auto}._1qevocv4{grid-area:footer}@media screen and (max-width: 800px){._1qevocv0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}._1jo75h0{color:#f0ad4e}._1jo75h1{color:#d9534f}._1jo75h2{color:#5cb85c}._1v2cc580{color:#fff;display:flex;align-items:center;justify-content:center}._1v2cc580>h1{font-size:1.5em;font-weight:700;margin-right:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.fma0ug0{position:relative}.fma0ug0>canvas{position:absolute;top:0;left:0;width:100%;height:100%}.fma0ug0>canvas:first-of-type{opacity:.7}.fma0ug0>img{top:0;left:0}._2yyo4x0{position:relative;width:100%;height:100%;padding:10px}._2yyo4x1{display:flex;flex-direction:row;width:100%;flex-wrap:wrap}._2yyo4x2{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:100%}._2yyo4x2:first-of-type{margin:10px 0}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px;overflow-y:auto}.cjcdm21{position:absolute;top:10px;left:400px;z-index:1;background-color:#00000080}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1hnlbmt0:disabled{background-color:#264d8d80}._1yvg52n0{position:relative;width:512px;height:512px}._1yvg52n1{width:512px;height:512px;background-color:#000;display:flex;justify-content:center;align-items:center}._1yvg52n2{width:512px;height:512px;object-fit:contain}._1yvg52n3{position:absolute;bottom:10px;left:10px}._1yvg52n4{position:absolute;bottom:10px;right:10px}._688lcr0{padding:10px}._688lcr1{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}._688lcr2{width:512px;height:100%}._688lcr3{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}._688lcr4{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}
diff --git a/ui/frontend/dist/index.html b/ui/frontend/dist/index.html
index 5ba294d9..b1968078 100644
--- a/ui/frontend/dist/index.html
+++ b/ui/frontend/dist/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark light" />
     <title>Stable Diffusion UI</title>
     <script type="module" crossorigin src="/index.js"></script>
     <link rel="stylesheet" href="/index.css">
@@ -18,12 +19,12 @@
     <!-- THE STYLES ARE BEING USED IN THE REACT APP  -->
     <!-- WE NEED TO PORT OVER THE STYLES OVER TO THE REACT COMPONENTS -->
     <style>
-      body {
+      /* body {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 11pt;
         background-color: rgb(32, 33, 36);
         color: #eee;
-      }
+      } */
       a {
         color: rgb(0, 102, 204);
       }
diff --git a/ui/frontend/dist/index.js b/ui/frontend/dist/index.js
index 96488035..a757158b 100644
--- a/ui/frontend/dist/index.js
+++ b/ui/frontend/dist/index.js
@@ -80,4 +80,4 @@ Error generating stack: `+o.message+`
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var go=I.exports,Jm=tu.exports;function Zm(e,t){return e===t&&(e!==0||1/e===1/t)||e!==e&&t!==t}var bm=typeof Object.is=="function"?Object.is:Zm,ey=Jm.useSyncExternalStore,ty=go.useRef,ny=go.useEffect,ry=go.useMemo,iy=go.useDebugValue;Yd.useSyncExternalStoreWithSelector=function(e,t,n,r,i){var o=ty(null);if(o.current===null){var l={hasValue:!1,value:null};o.current=l}else l=o.current;o=ry(function(){function u(m){if(!a){if(a=!0,f=m,m=r(m),i!==void 0&&l.hasValue){var y=l.value;if(i(y,m))return c=y}return c=m}if(y=c,bm(f,m))return y;var S=r(m);return i!==void 0&&i(y,S)?y:(f=m,c=S)}var a=!1,f,c,p=n===void 0?null:n;return[function(){return u(t())},p===null?void 0:function(){return u(p())}]},[t,n,r,i]);var s=ey(e,o[0],o[1]);return ny(function(){l.hasValue=!0,l.value=s},[s]),iy(s),s};(function(e){e.exports=Yd})(Xd);const oy=uc(Xd.exports),{useSyncExternalStoreWithSelector:ly}=oy;function sy(e,t=e.getState,n){const r=ly(e.subscribe,e.getState,e.getServerState||e.getState,t,n);return I.exports.useDebugValue(r),r}const ba=e=>{const t=typeof e=="function"?Ym(e):e,n=(r,i)=>sy(t,r,i);return Object.assign(n,t),n},uy=e=>e?ba(e):ba;var pu=uy;const ay=(e,t={})=>(n,r,i)=>{const{enabled:o,anonymousActionType:l,...s}=t;let u;try{u=(o!=null?o:({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0}&&"production")!=="production")&&window.__REDUX_DEVTOOLS_EXTENSION__}catch{}if(!u)return({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0}&&"production")!=="production"&&o&&console.warn("[zustand devtools middleware] Please install/enable Redux devtools extension"),e(n,r,i);const a=u.connect(s);let f=!0;i.setState=(m,y,S)=>{const C=n(m,y);return f&&a.send(S===void 0?{type:l||"anonymous"}:typeof S=="string"?{type:S}:S,r()),C};const c=(...m)=>{const y=f;f=!1,n(...m),f=y},p=e(i.setState,r,i);if(a.init(p),i.dispatchFromDevtools&&typeof i.dispatch=="function"){let m=!1;const y=i.dispatch;i.dispatch=(...S)=>{({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0}&&"production")!=="production"&&S[0].type==="__setState"&&!m&&(console.warn('[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'),m=!0),y(...S)}}return a.subscribe(m=>{var y;switch(m.type){case"ACTION":if(typeof m.payload!="string"){console.error("[zustand devtools middleware] Unsupported action format");return}return el(m.payload,S=>{if(S.type==="__setState"){c(S.state);return}!i.dispatchFromDevtools||typeof i.dispatch=="function"&&i.dispatch(S)});case"DISPATCH":switch(m.payload.type){case"RESET":return c(p),a.init(i.getState());case"COMMIT":return a.init(i.getState());case"ROLLBACK":return el(m.state,S=>{c(S),a.init(i.getState())});case"JUMP_TO_STATE":case"JUMP_TO_ACTION":return el(m.state,S=>{c(S)});case"IMPORT_STATE":{const{nextLiftedState:S}=m.payload,C=(y=S.computedStates.slice(-1)[0])==null?void 0:y.state;if(!C)return;c(C),a.send(null,S);return}case"PAUSE_RECORDING":return f=!f}return}}),p},cy=ay,el=(e,t)=>{let n;try{n=JSON.parse(e)}catch(r){console.error("[zustand devtools middleware] Could not parse the received json",r)}n!==void 0&&t(n)},Yi=e=>t=>{try{const n=e(t);return n instanceof Promise?n:{then(r){return Yi(r)(n)},catch(r){return this}}}catch(n){return{then(r){return this},catch(r){return Yi(r)(n)}}}},fy=(e,t)=>(n,r,i)=>{let o={getStorage:()=>localStorage,serialize:JSON.stringify,deserialize:JSON.parse,partialize:C=>C,version:0,merge:(C,v)=>({...v,...C}),...t},l=!1;const s=new Set,u=new Set;let a;try{a=o.getStorage()}catch{}if(!a)return e((...C)=>{console.warn(`[zustand persist middleware] Unable to update item '${o.name}', the given storage is currently unavailable.`),n(...C)},r,i);const f=Yi(o.serialize),c=()=>{const C=o.partialize({...r()});let v;const d=f({state:C,version:o.version}).then(h=>a.setItem(o.name,h)).catch(h=>{v=h});if(v)throw v;return d},p=i.setState;i.setState=(C,v)=>{p(C,v),c()};const m=e((...C)=>{n(...C),c()},r,i);let y;const S=()=>{var C;if(!a)return;l=!1,s.forEach(d=>d(r()));const v=((C=o.onRehydrateStorage)==null?void 0:C.call(o,r()))||void 0;return Yi(a.getItem.bind(a))(o.name).then(d=>{if(d)return o.deserialize(d)}).then(d=>{if(d)if(typeof d.version=="number"&&d.version!==o.version){if(o.migrate)return o.migrate(d.state,d.version);console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}else return d.state}).then(d=>{var h;return y=o.merge(d,(h=r())!=null?h:m),n(y,!0),c()}).then(()=>{v==null||v(y,void 0),l=!0,u.forEach(d=>d(y))}).catch(d=>{v==null||v(void 0,d)})};return i.persist={setOptions:C=>{o={...o,...C},C.getStorage&&(a=C.getStorage())},clearStorage:()=>{a==null||a.removeItem(o.name)},getOptions:()=>o,rehydrate:()=>S(),hasHydrated:()=>l,onHydrate:C=>(s.add(C),()=>{s.delete(C)}),onFinishHydration:C=>(u.add(C),()=>{u.delete(C)})},S(),y||m},dy=fy;function Rr(){return Math.floor(Math.random()*1e4)}const D=pu(cy((e,t)=>({parallelCount:1,requestOptions:{prompt:"a photograph of an astronaut riding a horse",seed:Rr(),num_outputs:1,num_inference_steps:50,guidance_scale:7.5,width:512,height:512,prompt_strength:.8,turbo:!0,use_cpu:!1,use_full_precision:!0,save_to_disk_path:"null",use_face_correction:"GFPGANv1.3",use_upscale:"RealESRGAN_x4plus",show_only_filtered_image:!0},tags:[],uiOptions:{isUseRandomSeed:!0,isUseAutoSave:!1,isSoundEnabled:!1},allModifiers:[[[]]],isInpainting:!1,setParallelCount:n=>e(se(r=>{r.parallelCount=n})),setRequestOptions:(n,r)=>{e(se(i=>{i.requestOptions[n]=r}))},getValueForRequestKey:n=>t().requestOptions[n],setAllModifiers:n=>{e(se(r=>{r.allModifiers=n}))},toggleTag:n=>{e(se(r=>{const i=r.tags.indexOf(n);i>-1?r.tags.splice(i,1):r.tags.push(n)}))},hasTag:n=>t().tags.indexOf(n)>-1,selectedTags:()=>t().tags,builtRequest:()=>{const n=t(),r=n.requestOptions,i=n.tags,o=`${r.prompt} ${i.join(",")}`,l={...r,prompt:o};return n.uiOptions.isUseAutoSave||(l.save_to_disk_path=null),l.use_upscale===""&&(l.use_upscale=null),l},toggleUseFaceCorrection:()=>{e(se(n=>{const r=typeof n.getValueForRequestKey("use_face_correction")=="string"?null:"GFPGANv1.3";n.requestOptions.use_face_correction=r}))},isUsingFaceCorrection:()=>typeof t().getValueForRequestKey("use_face_correction")=="string",toggleUseRandomSeed:()=>{e(se(n=>{n.uiOptions.isUseRandomSeed=!n.uiOptions.isUseRandomSeed,n.requestOptions.seed=n.uiOptions.isUseRandomSeed?Rr():n.requestOptions.seed,localStorage.setItem("ui:isUseRandomSeed",n.uiOptions.isUseRandomSeed)}))},isRandomSeed:()=>t().uiOptions.isUseRandomSeed,toggleUseAutoSave:()=>{e(se(n=>{n.uiOptions.isUseAutoSave=!n.uiOptions.isUseAutoSave,localStorage.setItem("ui:isUseAutoSave",n.uiOptions.isUseAutoSave)}))},isUseAutoSave:()=>t().uiOptions.isUseAutoSave,toggleSoundEnabled:()=>{e(se(n=>{n.uiOptions.isSoundEnabled=!n.uiOptions.isSoundEnabled}))},isSoundEnabled:()=>t().uiOptions.isSoundEnabled,toggleInpainting:()=>{e(se(n=>{n.isInpainting=!n.isInpainting}))}})));var ec="_1jo75h1",tc="_1jo75h0",hy="_1jo75h2";const nc="Stable Diffusion is starting...",py="Stable Diffusion is ready to use!",rc="Stable Diffusion is not running!";function vy({className:e}){const[t,n]=I.exports.useState(nc),[r,i]=I.exports.useState(tc),{status:o,data:l}=Er(["health"],qm,{refetchInterval:Vm});return I.exports.useEffect(()=>{o==="loading"?(n(nc),i(tc)):o==="error"?(n(rc),i(ec)):o==="success"&&(l[0]==="OK"?(n(py),i(hy)):(n(rc),i(ec)))},[o,l]),w(Lt,{children:w("p",{className:[r,e].join(" "),children:t})})}var my="_1v2cc580";function yy(){const{status:e,data:t}=Er(["config"],Km),[n,r]=I.exports.useState("2.1.0"),[i,o]=I.exports.useState("");return I.exports.useEffect(()=>{if(e==="success"){const{update_branch:l}=t;r("v2.1"),o(l==="main"?"(stable)":"(beta)")}},[e,t,r,r]),R("div",{className:my,children:[R("h1",{children:["Stable Diffusion UI ",n," ",i," "]}),w(vy,{className:"status-display"})]})}const je=pu(dy((e,t)=>({isOpenAdvancedSettings:!1,isOpenAdvImprovementSettings:!1,isOpenAdvPropertySettings:!1,isOpenAdvWorkflowSettings:!1,isOpenAdvGPUSettings:!1,isOpenImageModifier:!1,imageMofidiersMap:{},toggleAdvancedSettings:()=>{e(se(n=>{n.isOpenAdvancedSettings=!n.isOpenAdvancedSettings}))},toggleAdvImprovementSettings:()=>{e(se(n=>{n.isOpenAdvImprovementSettings=!n.isOpenAdvImprovementSettings}))},toggleAdvPropertySettings:()=>{e(se(n=>{n.isOpenAdvPropertySettings=!n.isOpenAdvPropertySettings}))},toggleAdvWorkflowSettings:()=>{e(se(n=>{n.isOpenAdvWorkflowSettings=!n.isOpenAdvWorkflowSettings}))},toggleAdvGPUSettings:()=>{e(se(n=>{n.isOpenAdvGPUSettings=!n.isOpenAdvGPUSettings}))},toggleImageModifier:()=>{e(se(n=>{n.isOpenImageModifier=!n.isOpenImageModifier}))}}),{name:"createUI"}));var ti="_11d5x3d1",gy="_11d5x3d0",So="_11d5x3d2";function Sy(){const e=D(s=>s.isUsingFaceCorrection()),t=D(s=>s.getValueForRequestKey("use_upscale")),n=D(s=>s.getValueForRequestKey("show_only_filtered_image")),r=D(s=>s.toggleUseFaceCorrection),i=D(s=>s.setRequestOptions),o=je(s=>s.isOpenAdvImprovementSettings),l=je(s=>s.toggleAdvImprovementSettings);return R("div",{children:[w("button",{type:"button",className:So,onClick:l,children:w("h4",{children:"Improvement Settings"})}),o&&R(Lt,{children:[w("div",{children:R("label",{children:[w("input",{type:"checkbox",checked:e,onChange:s=>r()}),"Fix incorrect faces and eyes (uses GFPGAN)"]})}),w("div",{children:R("label",{children:["Upscale the image to 4x resolution using",R("select",{id:"upscale_model",name:"upscale_model",value:t,onChange:s=>{i("use_upscale",s.target.value)},children:[w("option",{value:"",children:"No Uscaling"}),w("option",{value:"RealESRGAN_x4plus",children:"RealESRGAN_x4plus"}),w("option",{value:"RealESRGAN_x4plus_anime_6B",children:"RealESRGAN_x4plus_anime_6B"})]})]})}),w("div",{children:R("label",{children:[w("input",{type:"checkbox",checked:n,onChange:s=>i("show_only_filtered_image",s.target.checked)}),"Show only filtered image"]})})]})]})}const ic=[{value:128,label:"128 (*)"},{value:192,label:"192"},{value:256,label:"256 (*)"},{value:320,label:"320"},{value:384,label:"384"},{value:448,label:"448"},{value:512,label:"512 (*)"},{value:576,label:"576"},{value:640,label:"640"},{value:704,label:"704"},{value:768,label:"768 (*)"},{value:832,label:"832"},{value:896,label:"896"},{value:960,label:"960"},{value:1024,label:"1024 (*)"}];function wy(){const e=D(c=>c.setRequestOptions),t=D(c=>c.toggleUseRandomSeed),n=D(c=>c.isRandomSeed()),r=D(c=>c.getValueForRequestKey("seed")),i=D(c=>c.getValueForRequestKey("num_inference_steps")),o=D(c=>c.getValueForRequestKey("guidance_scale")),l=D(c=>c.getValueForRequestKey("prompt_strength")),s=D(c=>c.getValueForRequestKey("width")),u=D(c=>c.getValueForRequestKey("height")),a=je(c=>c.isOpenAdvPropertySettings),f=je(c=>c.toggleAdvPropertySettings);return R("div",{children:[w("button",{type:"button",className:So,onClick:f,children:w("h4",{children:"Property Settings"})}),a&&R(Lt,{children:[R("div",{children:[R("label",{children:["Seed:",w("input",{size:10,value:r,onChange:c=>e("seed",c.target.value),disabled:n,placeholder:"random"})]}),R("label",{children:[w("input",{type:"checkbox",checked:n,onChange:c=>t()})," ","Random Image"]})]}),w("div",{children:R("label",{children:["Number of inference steps:"," ",w("input",{value:i,onChange:c=>{e("num_inference_steps",c.target.value)},size:4})]})}),R("div",{children:[R("label",{children:["Guidance Scale:",w("input",{value:o,onChange:c=>e("guidance_scale",c.target.value),type:"range",min:"0",max:"20",step:".1"})]}),w("span",{children:o})]}),R("div",{className:"mb-4",children:[R("label",{children:["Prompt Strength:"," ",w("input",{value:l,onChange:c=>e("prompt_strength",c.target.value),type:"range",min:"0",max:"1",step:".05"})]}),w("span",{children:l})]}),w("div",{children:R("label",{children:["Width:",w("select",{value:s,onChange:c=>e("width",c.target.value),children:ic.map(c=>w("option",{value:c.value,children:c.label},"width-option_"+c.value))})]})}),w("div",{children:R("label",{children:["Height:",w("select",{value:u,onChange:c=>e("height",c.target.value),children:ic.map(c=>w("option",{value:c.value,children:c.label},"height-option_"+c.value))})]})})]})]})}function _y(){const e=D(c=>c.getValueForRequestKey("num_outputs")),t=D(c=>c.parallelCount),n=D(c=>c.isUseAutoSave()),r=D(c=>c.getValueForRequestKey("save_to_disk_path")),i=D(c=>c.isSoundEnabled()),o=D(c=>c.setRequestOptions),l=D(c=>c.setParallelCount),s=D(c=>c.toggleUseAutoSave),u=D(c=>c.toggleSoundEnabled),a=je(c=>c.isOpenAdvWorkflowSettings),f=je(c=>c.toggleAdvWorkflowSettings);return R("div",{children:[w("button",{type:"button",className:So,onClick:f,children:w("h4",{children:"Workflow Settings"})}),a&&R(Lt,{children:[w("div",{children:R("label",{children:["Number of images to make:"," ",w("input",{type:"number",value:e,onChange:c=>o("num_outputs",parseInt(c.target.value,10)),size:4})]})}),w("div",{children:R("label",{children:["Generate in parallel:",w("input",{type:"number",value:t,onChange:c=>l(parseInt(c.target.value,10)),size:4})]})}),R("div",{children:[R("label",{children:[w("input",{checked:n,onChange:c=>s(),type:"checkbox"}),"Automatically save to"," "]}),R("label",{children:[w("input",{value:r,onChange:c=>o("save_to_disk_path",c.target.value),size:40,disabled:!n}),w("span",{className:"visually-hidden",children:"Path on disk where images will be saved"})]})]}),w("div",{children:R("label",{children:[w("input",{checked:i,onChange:c=>u(),type:"checkbox"}),"Play sound on task completion"]})})]})]})}function ky(){const e=D(l=>l.getValueForRequestKey("turbo")),t=D(l=>l.getValueForRequestKey("use_cpu")),n=D(l=>l.getValueForRequestKey("use_full_precision")),r=D(l=>l.setRequestOptions),i=je(l=>l.isOpenAdvGPUSettings),o=je(l=>l.toggleAdvGPUSettings);return R("div",{children:[w("button",{type:"button",className:So,onClick:o,children:w("h4",{children:"GPU Settings"})}),i&&R(Lt,{children:[w("div",{children:R("label",{children:[w("input",{checked:e,onChange:l=>r("turbo",l.target.checked),type:"checkbox"}),"Turbo mode (generates images faster, but uses an additional 1 GB of GPU memory)"]})}),w("div",{children:R("label",{children:[w("input",{type:"checkbox",checked:t,onChange:l=>r("use_cpu",l.target.checked)}),"Use CPU instead of GPU (warning: this will be *very* slow)"]})}),w("div",{children:R("label",{children:[w("input",{checked:n,onChange:l=>r("use_full_precision",l.target.checked),type:"checkbox"}),"Use full precision (for GPU-only. warning: this will consume more VRAM)"]})})]})]})}function Cy(){return R("ul",{className:gy,children:[w("li",{className:ti,children:w(Sy,{})}),w("li",{className:ti,children:w(wy,{})}),w("li",{className:ti,children:w(_y,{})}),w("li",{className:ti,children:w(ky,{})})]})}function Ey(){const e=je(n=>n.isOpenAdvancedSettings),t=je(n=>n.toggleAdvancedSettings);return R("div",{className:"panel-box",children:[w("button",{type:"button",onClick:t,className:"panel-box-toggle-btn",children:w("h3",{children:"Advanced Settings"})}),e&&w(Cy,{})]})}function Jd({name:e}){const t=D(i=>i.hasTag(e))?"selected":"",n=D(i=>i.toggleTag),r=()=>{n(e)};return w("div",{className:"modifierTag "+t,onClick:r,children:w("p",{children:e})})}function xy({tags:e}){return w("ul",{className:"modifier-list",children:e.map(t=>w("li",{children:w(Jd,{name:t})},t))})}function Py({title:e,tags:t}){const[n,r]=I.exports.useState(!1);return R("div",{className:"modifier-grouping",children:[w("div",{className:"modifier-grouping-header",onClick:()=>{r(!n)},children:w("h5",{children:e})}),n&&w(xy,{tags:t})]})}function Oy(){const e=D(i=>i.allModifiers);console.log("allModifiers",e);const t=je(i=>i.isOpenImageModifier),n=je(i=>i.toggleImageModifier);return R("div",{className:"panel-box",children:[w("button",{type:"button",onClick:()=>{n()},className:"panel-box-toggle-btn",children:w("h4",{children:"Image Modifiers (art styles, tags, ect)"})}),t&&e.map((i,o)=>w(Py,{title:i[0],tags:i[1]},i[0]))]})}var Ry="fma0ug0";function Ny({imageData:e,brushSize:t,brushShape:n,brushColor:r,isErasing:i}){const o=I.exports.useRef(null),l=I.exports.useRef(null),[s,u]=I.exports.useState(!1),[a,f]=I.exports.useState(512),[c,p]=I.exports.useState(512);I.exports.useEffect(()=>{console.log(e);const d=new Image;d.onload=()=>{f(d.width),p(d.height)},d.src=e},[e]),I.exports.useEffect(()=>{if(o.current){const d=o.current.getContext("2d"),h=d.getImageData(0,0,a,c),g=h.data;for(let x=0;x<g.length;x+=4)g[x+3]>0&&(g[x]=parseInt(r,16),g[x+1]=parseInt(r,16),g[x+2]=parseInt(r,16));d.putImageData(h,0,0)}},[r]);const m=d=>{console.log("mouse down",d),u(!0)},y=d=>{u(!1);const h=o.current;h&&h.toDataURL()},S=(d,h,g,x,E)=>{const k=o.current;if(k){const _=k.getContext("2d");if(i){const M=g/2;_.clearRect(d-M,h-M,g,g)}else _.beginPath(),_.lineWidth=g,_.lineCap=x,_.strokeStyle=E,_.moveTo(d,h),_.lineTo(d,h),_.stroke()}},C=(d,h,g,x,E)=>{const k=l.current;if(k){const _=k.getContext("2d");if(_.beginPath(),_.clearRect(0,0,k.width,k.height),i){const M=g/2;_.lineWidth=2,_.lineCap="butt",_.strokeStyle=E,_.moveTo(d-M,h-M),_.lineTo(d+M,h-M),_.lineTo(d+M,h+M),_.lineTo(d-M,h+M),_.lineTo(d-M,h-M),_.stroke()}else _.lineWidth=g,_.lineCap=x,_.strokeStyle=E,_.moveTo(d,h),_.lineTo(d,h),_.stroke()}};return R("div",{className:Ry,children:[w("img",{src:e}),w("canvas",{ref:o,width:a,height:c}),w("canvas",{ref:l,width:a,height:c,onMouseDown:m,onMouseUp:y,onMouseMove:d=>{const{nativeEvent:{offsetX:h,offsetY:g}}=d;C(h,g,t,n,r),s&&S(h,g,t,n,r)}})]})}var oc="_2yyo4x2",Iy="_2yyo4x1",My="_2yyo4x0";function Ty(){const e=I.exports.useRef(null),[t,n]=I.exports.useState("20"),[r,i]=I.exports.useState("round"),[o,l]=I.exports.useState("#fff"),[s,u]=I.exports.useState(!1),a=D(S=>S.getValueForRequestKey("init_image"));return R("div",{className:My,children:[w(Ny,{imageData:a,brushSize:t,brushShape:r,brushColor:o,isErasing:s}),R("div",{className:Iy,children:[R("div",{className:oc,children:[w("button",{onClick:()=>{u(!1)},children:"Mask"}),w("button",{onClick:()=>{u(!0)},children:"Erase"}),w("button",{disabled:!0,onClick:()=>{console.log("fill mask!!",e)},children:"Fill"}),w("button",{disabled:!0,onClick:()=>{console.log("clear all")},children:"Clear"}),R("label",{children:["Brush Size",w("input",{type:"range",min:"1",max:"100",value:t,onChange:S=>{n(S.target.value)}})]})]}),R("div",{className:oc,children:[w("button",{onClick:()=>{i("round")},children:"Cirle Brush"}),w("button",{onClick:()=>{i("square")},children:"Square Brush"}),w("button",{onClick:()=>{l("#000")},children:"Dark Brush"}),w("button",{onClick:()=>{l("#fff")},children:"Light Brush"})]})]})]})}var Dy="cjcdm20",Fy="cjcdm21";var Ly="_1how28i0",Ay="_1how28i1";var zy="_1rn4m8a4",Uy="_1rn4m8a2",jy="_1rn4m8a3",$y="_1rn4m8a0",Qy="_1rn4m8a1",By="_1rn4m8a5";function Vy(e){const t=I.exports.useRef(null),n=D(a=>a.getValueForRequestKey("init_image")),r=D(a=>a.isInpainting),i=D(a=>a.setRequestOptions),o=()=>{var a;(a=t.current)==null||a.click()},l=a=>{const f=a.target.files[0];if(f){const c=new FileReader;c.onload=p=>{p.target&&i("init_image",p.target.result)},c.readAsDataURL(f)}},s=D(a=>a.toggleInpainting);return R("div",{className:$y,children:[R("div",{children:[R("label",{className:Qy,children:[w("b",{children:"Initial Image:"})," (optional)"]}),w("input",{ref:t,className:Uy,name:"init_image",type:"file",onChange:l}),w("button",{className:jy,onClick:o,children:"Select File"})]}),w("div",{className:zy,children:n&&R(Lt,{children:[R("div",{children:[w("img",{src:n,width:"100",height:"100"}),w("button",{className:By,onClick:()=>{i("init_image",void 0),r&&s()},children:"X"})]}),R("label",{children:[w("input",{type:"checkbox",onChange:a=>{s()},checked:r}),"Use for Inpainting"]})]})})]})}function qy(){const e=D(t=>t.selectedTags());return R("div",{className:"selected-tags",children:[w("p",{children:"Active Tags"}),w("ul",{children:e.map(t=>w("li",{children:w(Jd,{name:t})},t))})]})}const or=pu((e,t)=>({images:new Array,completedImageIds:new Array,addNewImage:(n,r,i=!1)=>{e(se(o=>{let{seed:l}=r;i&&(l=Rr()),o.images.push({id:n,options:{...r,seed:l}})}))},hasQueuedImages:()=>t().images.length>0,firstInQueue:()=>t().images[0]||[],removeFirstInQueue:()=>{e(se(n=>{const r=n.images.shift();n.completedImageIds.push(r.id)}))}}));let ni;const Hy=new Uint8Array(16);function Wy(){if(!ni&&(ni=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!ni))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return ni(Hy)}const oe=[];for(let e=0;e<256;++e)oe.push((e+256).toString(16).slice(1));function Ky(e,t=0){return(oe[e[t+0]]+oe[e[t+1]]+oe[e[t+2]]+oe[e[t+3]]+"-"+oe[e[t+4]]+oe[e[t+5]]+"-"+oe[e[t+6]]+oe[e[t+7]]+"-"+oe[e[t+8]]+oe[e[t+9]]+"-"+oe[e[t+10]]+oe[e[t+11]]+oe[e[t+12]]+oe[e[t+13]]+oe[e[t+14]]+oe[e[t+15]]).toLowerCase()}const Gy=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto),lc={randomUUID:Gy};function Xy(e,t,n){if(lc.randomUUID&&!t&&!e)return lc.randomUUID();e=e||{};const r=e.random||(e.rng||Wy)();if(r[6]=r[6]&15|64,r[8]=r[8]&63|128,t){n=n||0;for(let i=0;i<16;++i)t[n+i]=r[i];return t}return Ky(r)}var Yy="_1hnlbmt0";function Jy(){const e=D(s=>s.parallelCount),t=D(s=>s.builtRequest),n=or(s=>s.addNewImage),r=or(s=>s.hasQueuedImages()),i=D(s=>s.isRandomSeed()),o=D(s=>s.setRequestOptions);return w("button",{className:Yy,onClick:()=>{const s=t();let u=[],{num_outputs:a}=s;if(e>a)u.push(a);else for(;a>=1;)a-=e,a<=0?u.push(e):u.push(Math.abs(a));u.forEach((f,c)=>{let p=s.seed;c!==0&&(p=Rr()),n(Xy(),{...s,num_outputs:f,seed:p})}),i&&o("seed",Rr())},disabled:r,children:"Make"})}function Zy(){const e=D(r=>r.getValueForRequestKey("prompt")),t=D(r=>r.setRequestOptions);return R("div",{className:Ly,children:[R("div",{className:Ay,children:[w("p",{children:"Prompt "}),w("textarea",{value:e,onChange:r=>{t("prompt",r.target.value)}})]}),w(Vy,{}),w(qy,{}),w(Jy,{})]})}function by(){const e=D(t=>t.isInpainting);return R(Lt,{children:[R("div",{className:Dy,children:[w(Zy,{}),w(Ey,{}),w(Oy,{})]}),e&&w("div",{className:Fy,children:w(Ty,{})})]})}const eg=`${en}/ding.mp3`,tg=mc.forwardRef((e,t)=>w("audio",{ref:t,style:{display:"none"},children:w("source",{src:eg,type:"audio/mp3"})}));var ng="_1yvg52n0",rg="_1yvg52n2",ig="_1yvg52n1",og="_1yvg52n3",lg="_1yvg52n4";function sc({imageData:e,metadata:t,className:n}){const r=D(s=>s.setRequestOptions),i=()=>{const{prompt:s,seed:u,num_inference_steps:a,guidance_scale:f,use_face_correction:c,use_upscale:p,width:m,height:y}=t;let S=s.replace(/[^a-zA-Z0-9]/g,"_");S=S.substring(0,100);let C=`${S}_Seed-${u}_Steps-${a}_Guidance-${f}`;return c&&(C+=`_FaceCorrection-${c}`),p&&(C+=`_Upscale-${p}`),C+=`_${m}x${y}`,C+=".png",C},o=()=>{const s=document.createElement("a");s.download=i(),s.href=e,s.click()},l=()=>{r("init_image",e)};return R("div",{className:[ng,n].join(" "),children:[w("p",{children:t.prompt}),R("div",{className:ig,children:[w("img",{className:rg,src:e,alt:"generated"}),w("button",{className:og,onClick:o,children:"Save"}),w("button",{className:lg,onClick:l,children:"Use as Input"})]})]})}var sg="_688lcr2",ug="_688lcr1",ag="_688lcr0",cg="_688lcr4",fg="_688lcr3";function dg(){const e=I.exports.useRef(null),t=D(c=>c.isSoundEnabled());D(c=>c.isInpainting);const{id:n,options:r}=or(c=>c.firstInQueue()),i=or(c=>c.removeFirstInQueue),{status:o,data:l}=Er([Ja,n],()=>Gm(r),{enabled:n!==void 0});I.exports.useEffect(()=>{var c;o==="success"&&l.status==="succeeded"&&(t&&((c=e.current)==null||c.play()),i())},[o,l,i,e,t]);const s=Md(),[u,a]=I.exports.useState([]),f=or(c=>c.completedImageIds);return D(c=>c.getValueForRequestKey("init_image")),I.exports.useEffect(()=>{const c=f.map(p=>s.getQueryData([Ja,p]));if(c.length>0){const p=c.map((m,y)=>{if(m!==void 0)return m.output.map(S=>({id:`${f[y]}-${S.seed}`,data:S.data,info:{...m.request,seed:S.seed}}))}).flat().reverse();a(p)}else a([])},[a,s,f]),R("div",{className:ag,children:[w(tg,{ref:e}),w("div",{className:ug,children:u.length>0&&R(Lt,{children:[w("div",{className:sg,children:w(sc,{imageData:u[0].data,metadata:u[0].info},u[0].id)}),w("div",{className:fg,children:u.map((c,p)=>c!==void 0?p==0?null:w(sc,{className:cg,imageData:c.data,metadata:c.info},c.id):(console.warn("image is undefined",c,p),null))})]})})]})}function hg(){return R("div",{id:"footer",className:"panel-box",children:[R("p",{children:["If you found this project useful and want to help keep it alive, please"," ",w("a",{href:"https://ko-fi.com/cmdr2_stablediffusion_ui",target:"_blank",children:w("img",{src:`${en}/kofi.png`,id:"coffeeButton"})})," ","to help cover the cost of development and maintenance! Thank you for your support!"]}),R("p",{children:["Please feel free to join the"," ",w("a",{href:"https://discord.com/invite/u9yhsFmEkB",target:"_blank",children:"discord community"})," ","or"," ",w("a",{href:"https://github.com/cmdr2/stable-diffusion-ui/issues",target:"_blank",children:"file an issue"})," ","if you have any problems or suggestions in using this interface."]}),R("div",{id:"footer-legal",children:[R("p",{children:[w("b",{children:"Disclaimer:"})," The authors of this project are not responsible for any content generated using this interface."]}),R("p",{children:["This license of this software forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm, ",w("br",{}),"spread misinformation and target vulnerable groups. For the full list of restrictions please read"," ",w("a",{href:"https://github.com/cmdr2/stable-diffusion-ui/blob/main/LICENSE",target:"_blank",children:"the license"}),"."]}),w("p",{children:"By using this software, you consent to the terms and conditions of the license."})]})]})}function pg(){const e=D(l=>l.setRequestOptions),{status:t,data:n}=Er(["SaveDir"],Wm),{status:r,data:i}=Er(["modifications"],Hm),o=D(l=>l.setAllModifiers);return I.exports.useEffect(()=>{t==="success"&&e("save_to_disk_path",n)},[e,t,n]),I.exports.useEffect(()=>{r==="success"?o(i):r==="error"&&o(Xm)},[e,r,i]),R("div",{className:Um,children:[w("header",{className:Bm,children:w(yy,{})}),w("nav",{className:jm,children:w(by,{})}),w("main",{className:$m,children:w(dg,{})}),w("footer",{className:Qm,children:w(hg,{})})]})}function vg(){return w("div",{children:w("h1",{children:"Settings"})})}const mg=new km;function yg(){return w(Cm,{location:mg,routes:[{path:"/",element:w(pg,{})},{path:"settings",element:w(vg,{})}]})}const gg=new qv({defaultOptions:{queries:{refetchOnWindowFocus:!1,refetchOnReconnect:!1,refetchOnMount:!1,staleTime:1/0}}});sm();tl.createRoot(document.getElementById("root")).render(w(mc.StrictMode,{children:R(Kv,{client:gg,children:[w(yg,{}),w(em,{initialIsOpen:!0})]})}));
+ */var go=I.exports,Jm=tu.exports;function Zm(e,t){return e===t&&(e!==0||1/e===1/t)||e!==e&&t!==t}var bm=typeof Object.is=="function"?Object.is:Zm,ey=Jm.useSyncExternalStore,ty=go.useRef,ny=go.useEffect,ry=go.useMemo,iy=go.useDebugValue;Yd.useSyncExternalStoreWithSelector=function(e,t,n,r,i){var o=ty(null);if(o.current===null){var l={hasValue:!1,value:null};o.current=l}else l=o.current;o=ry(function(){function u(m){if(!a){if(a=!0,f=m,m=r(m),i!==void 0&&l.hasValue){var y=l.value;if(i(y,m))return c=y}return c=m}if(y=c,bm(f,m))return y;var S=r(m);return i!==void 0&&i(y,S)?y:(f=m,c=S)}var a=!1,f,c,p=n===void 0?null:n;return[function(){return u(t())},p===null?void 0:function(){return u(p())}]},[t,n,r,i]);var s=ey(e,o[0],o[1]);return ny(function(){l.hasValue=!0,l.value=s},[s]),iy(s),s};(function(e){e.exports=Yd})(Xd);const oy=uc(Xd.exports),{useSyncExternalStoreWithSelector:ly}=oy;function sy(e,t=e.getState,n){const r=ly(e.subscribe,e.getState,e.getServerState||e.getState,t,n);return I.exports.useDebugValue(r),r}const ba=e=>{const t=typeof e=="function"?Ym(e):e,n=(r,i)=>sy(t,r,i);return Object.assign(n,t),n},uy=e=>e?ba(e):ba;var pu=uy;const ay=(e,t={})=>(n,r,i)=>{const{enabled:o,anonymousActionType:l,...s}=t;let u;try{u=(o!=null?o:({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0}&&"production")!=="production")&&window.__REDUX_DEVTOOLS_EXTENSION__}catch{}if(!u)return({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0}&&"production")!=="production"&&o&&console.warn("[zustand devtools middleware] Please install/enable Redux devtools extension"),e(n,r,i);const a=u.connect(s);let f=!0;i.setState=(m,y,S)=>{const C=n(m,y);return f&&a.send(S===void 0?{type:l||"anonymous"}:typeof S=="string"?{type:S}:S,r()),C};const c=(...m)=>{const y=f;f=!1,n(...m),f=y},p=e(i.setState,r,i);if(a.init(p),i.dispatchFromDevtools&&typeof i.dispatch=="function"){let m=!1;const y=i.dispatch;i.dispatch=(...S)=>{({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0}&&"production")!=="production"&&S[0].type==="__setState"&&!m&&(console.warn('[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'),m=!0),y(...S)}}return a.subscribe(m=>{var y;switch(m.type){case"ACTION":if(typeof m.payload!="string"){console.error("[zustand devtools middleware] Unsupported action format");return}return el(m.payload,S=>{if(S.type==="__setState"){c(S.state);return}!i.dispatchFromDevtools||typeof i.dispatch=="function"&&i.dispatch(S)});case"DISPATCH":switch(m.payload.type){case"RESET":return c(p),a.init(i.getState());case"COMMIT":return a.init(i.getState());case"ROLLBACK":return el(m.state,S=>{c(S),a.init(i.getState())});case"JUMP_TO_STATE":case"JUMP_TO_ACTION":return el(m.state,S=>{c(S)});case"IMPORT_STATE":{const{nextLiftedState:S}=m.payload,C=(y=S.computedStates.slice(-1)[0])==null?void 0:y.state;if(!C)return;c(C),a.send(null,S);return}case"PAUSE_RECORDING":return f=!f}return}}),p},cy=ay,el=(e,t)=>{let n;try{n=JSON.parse(e)}catch(r){console.error("[zustand devtools middleware] Could not parse the received json",r)}n!==void 0&&t(n)},Yi=e=>t=>{try{const n=e(t);return n instanceof Promise?n:{then(r){return Yi(r)(n)},catch(r){return this}}}catch(n){return{then(r){return this},catch(r){return Yi(r)(n)}}}},fy=(e,t)=>(n,r,i)=>{let o={getStorage:()=>localStorage,serialize:JSON.stringify,deserialize:JSON.parse,partialize:C=>C,version:0,merge:(C,v)=>({...v,...C}),...t},l=!1;const s=new Set,u=new Set;let a;try{a=o.getStorage()}catch{}if(!a)return e((...C)=>{console.warn(`[zustand persist middleware] Unable to update item '${o.name}', the given storage is currently unavailable.`),n(...C)},r,i);const f=Yi(o.serialize),c=()=>{const C=o.partialize({...r()});let v;const d=f({state:C,version:o.version}).then(h=>a.setItem(o.name,h)).catch(h=>{v=h});if(v)throw v;return d},p=i.setState;i.setState=(C,v)=>{p(C,v),c()};const m=e((...C)=>{n(...C),c()},r,i);let y;const S=()=>{var C;if(!a)return;l=!1,s.forEach(d=>d(r()));const v=((C=o.onRehydrateStorage)==null?void 0:C.call(o,r()))||void 0;return Yi(a.getItem.bind(a))(o.name).then(d=>{if(d)return o.deserialize(d)}).then(d=>{if(d)if(typeof d.version=="number"&&d.version!==o.version){if(o.migrate)return o.migrate(d.state,d.version);console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}else return d.state}).then(d=>{var h;return y=o.merge(d,(h=r())!=null?h:m),n(y,!0),c()}).then(()=>{v==null||v(y,void 0),l=!0,u.forEach(d=>d(y))}).catch(d=>{v==null||v(void 0,d)})};return i.persist={setOptions:C=>{o={...o,...C},C.getStorage&&(a=C.getStorage())},clearStorage:()=>{a==null||a.removeItem(o.name)},getOptions:()=>o,rehydrate:()=>S(),hasHydrated:()=>l,onHydrate:C=>(s.add(C),()=>{s.delete(C)}),onFinishHydration:C=>(u.add(C),()=>{u.delete(C)})},S(),y||m},dy=fy;function Rr(){return Math.floor(Math.random()*1e4)}const D=pu(cy((e,t)=>({parallelCount:1,requestOptions:{prompt:"a photograph of an astronaut riding a horse",seed:Rr(),num_outputs:1,num_inference_steps:50,guidance_scale:7.5,width:512,height:512,prompt_strength:.8,turbo:!0,use_cpu:!1,use_full_precision:!0,save_to_disk_path:"null",use_face_correction:"GFPGANv1.3",use_upscale:"RealESRGAN_x4plus",show_only_filtered_image:!0},tags:[],uiOptions:{isUseRandomSeed:!0,isUseAutoSave:!1,isSoundEnabled:!1},allModifiers:[[[]]],isInpainting:!1,setParallelCount:n=>e(se(r=>{r.parallelCount=n})),setRequestOptions:(n,r)=>{e(se(i=>{i.requestOptions[n]=r}))},getValueForRequestKey:n=>t().requestOptions[n],setAllModifiers:n=>{e(se(r=>{r.allModifiers=n}))},toggleTag:n=>{e(se(r=>{const i=r.tags.indexOf(n);i>-1?r.tags.splice(i,1):r.tags.push(n)}))},hasTag:n=>t().tags.indexOf(n)>-1,selectedTags:()=>t().tags,builtRequest:()=>{const n=t(),r=n.requestOptions,i=n.tags,o=`${r.prompt} ${i.join(",")}`,l={...r,prompt:o};return n.uiOptions.isUseAutoSave||(l.save_to_disk_path=null),l.use_upscale===""&&(l.use_upscale=null),l},toggleUseFaceCorrection:()=>{e(se(n=>{const r=typeof n.getValueForRequestKey("use_face_correction")=="string"?null:"GFPGANv1.3";n.requestOptions.use_face_correction=r}))},isUsingFaceCorrection:()=>typeof t().getValueForRequestKey("use_face_correction")=="string",toggleUseRandomSeed:()=>{e(se(n=>{n.uiOptions.isUseRandomSeed=!n.uiOptions.isUseRandomSeed,n.requestOptions.seed=n.uiOptions.isUseRandomSeed?Rr():n.requestOptions.seed,localStorage.setItem("ui:isUseRandomSeed",n.uiOptions.isUseRandomSeed)}))},isRandomSeed:()=>t().uiOptions.isUseRandomSeed,toggleUseAutoSave:()=>{e(se(n=>{n.uiOptions.isUseAutoSave=!n.uiOptions.isUseAutoSave,localStorage.setItem("ui:isUseAutoSave",n.uiOptions.isUseAutoSave)}))},isUseAutoSave:()=>t().uiOptions.isUseAutoSave,toggleSoundEnabled:()=>{e(se(n=>{n.uiOptions.isSoundEnabled=!n.uiOptions.isSoundEnabled}))},isSoundEnabled:()=>t().uiOptions.isSoundEnabled,toggleInpainting:()=>{e(se(n=>{n.isInpainting=!n.isInpainting}))}})));var ec="_1jo75h1",tc="_1jo75h0",hy="_1jo75h2";const nc="Stable Diffusion is starting...",py="Stable Diffusion is ready to use!",rc="Stable Diffusion is not running!";function vy({className:e}){const[t,n]=I.exports.useState(nc),[r,i]=I.exports.useState(tc),{status:o,data:l}=Er(["health"],qm,{refetchInterval:Vm});return I.exports.useEffect(()=>{o==="loading"?(n(nc),i(tc)):o==="error"?(n(rc),i(ec)):o==="success"&&(l[0]==="OK"?(n(py),i(hy)):(n(rc),i(ec)))},[o,l]),w(Lt,{children:w("p",{className:[r,e].join(" "),children:t})})}var my="_1v2cc580";function yy(){const{status:e,data:t}=Er(["config"],Km),[n,r]=I.exports.useState("2.1.0"),[i,o]=I.exports.useState("");return I.exports.useEffect(()=>{if(e==="success"){const{update_branch:l}=t;r("v2.1"),o(l==="main"?"(stable)":"(beta)")}},[e,t,r,r]),R("div",{className:my,children:[R("h1",{children:["Stable Diffusion UI ",n," ",i," "]}),w(vy,{className:"status-display"})]})}const je=pu(dy((e,t)=>({isOpenAdvancedSettings:!1,isOpenAdvImprovementSettings:!1,isOpenAdvPropertySettings:!1,isOpenAdvWorkflowSettings:!1,isOpenAdvGPUSettings:!1,isOpenImageModifier:!1,imageMofidiersMap:{},toggleAdvancedSettings:()=>{e(se(n=>{n.isOpenAdvancedSettings=!n.isOpenAdvancedSettings}))},toggleAdvImprovementSettings:()=>{e(se(n=>{n.isOpenAdvImprovementSettings=!n.isOpenAdvImprovementSettings}))},toggleAdvPropertySettings:()=>{e(se(n=>{n.isOpenAdvPropertySettings=!n.isOpenAdvPropertySettings}))},toggleAdvWorkflowSettings:()=>{e(se(n=>{n.isOpenAdvWorkflowSettings=!n.isOpenAdvWorkflowSettings}))},toggleAdvGPUSettings:()=>{e(se(n=>{n.isOpenAdvGPUSettings=!n.isOpenAdvGPUSettings}))},toggleImageModifier:()=>{e(se(n=>{n.isOpenImageModifier=!n.isOpenImageModifier}))}}),{name:"createUI"}));var ti="_11d5x3d1",gy="_11d5x3d0",So="_11d5x3d2";function Sy(){const e=D(s=>s.isUsingFaceCorrection()),t=D(s=>s.getValueForRequestKey("use_upscale")),n=D(s=>s.getValueForRequestKey("show_only_filtered_image")),r=D(s=>s.toggleUseFaceCorrection),i=D(s=>s.setRequestOptions),o=je(s=>s.isOpenAdvImprovementSettings),l=je(s=>s.toggleAdvImprovementSettings);return R("div",{children:[w("button",{type:"button",className:So,onClick:l,children:w("h4",{children:"Improvement Settings"})}),o&&R(Lt,{children:[w("div",{children:R("label",{children:[w("input",{type:"checkbox",checked:e,onChange:s=>r()}),"Fix incorrect faces and eyes (uses GFPGAN)"]})}),w("div",{children:R("label",{children:["Upscale the image to 4x resolution using",R("select",{id:"upscale_model",name:"upscale_model",value:t,onChange:s=>{i("use_upscale",s.target.value)},children:[w("option",{value:"",children:"No Uscaling"}),w("option",{value:"RealESRGAN_x4plus",children:"RealESRGAN_x4plus"}),w("option",{value:"RealESRGAN_x4plus_anime_6B",children:"RealESRGAN_x4plus_anime_6B"})]})]})}),w("div",{children:R("label",{children:[w("input",{type:"checkbox",checked:n,onChange:s=>i("show_only_filtered_image",s.target.checked)}),"Show only filtered image"]})})]})]})}const ic=[{value:128,label:"128 (*)"},{value:192,label:"192"},{value:256,label:"256 (*)"},{value:320,label:"320"},{value:384,label:"384"},{value:448,label:"448"},{value:512,label:"512 (*)"},{value:576,label:"576"},{value:640,label:"640"},{value:704,label:"704"},{value:768,label:"768 (*)"},{value:832,label:"832"},{value:896,label:"896"},{value:960,label:"960"},{value:1024,label:"1024 (*)"}];function wy(){const e=D(c=>c.setRequestOptions),t=D(c=>c.toggleUseRandomSeed),n=D(c=>c.isRandomSeed()),r=D(c=>c.getValueForRequestKey("seed")),i=D(c=>c.getValueForRequestKey("num_inference_steps")),o=D(c=>c.getValueForRequestKey("guidance_scale")),l=D(c=>c.getValueForRequestKey("prompt_strength")),s=D(c=>c.getValueForRequestKey("width")),u=D(c=>c.getValueForRequestKey("height")),a=je(c=>c.isOpenAdvPropertySettings),f=je(c=>c.toggleAdvPropertySettings);return R("div",{children:[w("button",{type:"button",className:So,onClick:f,children:w("h4",{children:"Property Settings"})}),a&&R(Lt,{children:[R("div",{children:[R("label",{children:["Seed:",w("input",{size:10,value:r,onChange:c=>e("seed",c.target.value),disabled:n,placeholder:"random"})]}),R("label",{children:[w("input",{type:"checkbox",checked:n,onChange:c=>t()})," ","Random Image"]})]}),w("div",{children:R("label",{children:["Number of inference steps:"," ",w("input",{value:i,onChange:c=>{e("num_inference_steps",c.target.value)},size:4})]})}),R("div",{children:[R("label",{children:["Guidance Scale:",w("input",{value:o,onChange:c=>e("guidance_scale",c.target.value),type:"range",min:"0",max:"20",step:".1"})]}),w("span",{children:o})]}),R("div",{className:"mb-4",children:[R("label",{children:["Prompt Strength:"," ",w("input",{value:l,onChange:c=>e("prompt_strength",c.target.value),type:"range",min:"0",max:"1",step:".05"})]}),w("span",{children:l})]}),w("div",{children:R("label",{children:["Width:",w("select",{value:s,onChange:c=>e("width",c.target.value),children:ic.map(c=>w("option",{value:c.value,children:c.label},"width-option_"+c.value))})]})}),w("div",{children:R("label",{children:["Height:",w("select",{value:u,onChange:c=>e("height",c.target.value),children:ic.map(c=>w("option",{value:c.value,children:c.label},"height-option_"+c.value))})]})})]})]})}function _y(){const e=D(c=>c.getValueForRequestKey("num_outputs")),t=D(c=>c.parallelCount),n=D(c=>c.isUseAutoSave()),r=D(c=>c.getValueForRequestKey("save_to_disk_path")),i=D(c=>c.isSoundEnabled()),o=D(c=>c.setRequestOptions),l=D(c=>c.setParallelCount),s=D(c=>c.toggleUseAutoSave),u=D(c=>c.toggleSoundEnabled),a=je(c=>c.isOpenAdvWorkflowSettings),f=je(c=>c.toggleAdvWorkflowSettings);return R("div",{children:[w("button",{type:"button",className:So,onClick:f,children:w("h4",{children:"Workflow Settings"})}),a&&R(Lt,{children:[w("div",{children:R("label",{children:["Number of images to make:"," ",w("input",{type:"number",value:e,onChange:c=>o("num_outputs",parseInt(c.target.value,10)),size:4})]})}),w("div",{children:R("label",{children:["Generate in parallel:",w("input",{type:"number",value:t,onChange:c=>l(parseInt(c.target.value,10)),size:4})]})}),R("div",{children:[R("label",{children:[w("input",{checked:n,onChange:c=>s(),type:"checkbox"}),"Automatically save to"," "]}),R("label",{children:[w("input",{value:r,onChange:c=>o("save_to_disk_path",c.target.value),size:40,disabled:!n}),w("span",{className:"visually-hidden",children:"Path on disk where images will be saved"})]})]}),w("div",{children:R("label",{children:[w("input",{checked:i,onChange:c=>u(),type:"checkbox"}),"Play sound on task completion"]})})]})]})}function ky(){const e=D(l=>l.getValueForRequestKey("turbo")),t=D(l=>l.getValueForRequestKey("use_cpu")),n=D(l=>l.getValueForRequestKey("use_full_precision")),r=D(l=>l.setRequestOptions),i=je(l=>l.isOpenAdvGPUSettings),o=je(l=>l.toggleAdvGPUSettings);return R("div",{children:[w("button",{type:"button",className:So,onClick:o,children:w("h4",{children:"GPU Settings"})}),i&&R(Lt,{children:[w("div",{children:R("label",{children:[w("input",{checked:e,onChange:l=>r("turbo",l.target.checked),type:"checkbox"}),"Turbo mode (generates images faster, but uses an additional 1 GB of GPU memory)"]})}),w("div",{children:R("label",{children:[w("input",{type:"checkbox",checked:t,onChange:l=>r("use_cpu",l.target.checked)}),"Use CPU instead of GPU (warning: this will be *very* slow)"]})}),w("div",{children:R("label",{children:[w("input",{checked:n,onChange:l=>r("use_full_precision",l.target.checked),type:"checkbox"}),"Use full precision (for GPU-only. warning: this will consume more VRAM)"]})})]})]})}function Cy(){return R("ul",{className:gy,children:[w("li",{className:ti,children:w(Sy,{})}),w("li",{className:ti,children:w(wy,{})}),w("li",{className:ti,children:w(_y,{})}),w("li",{className:ti,children:w(ky,{})})]})}function Ey(){const e=je(n=>n.isOpenAdvancedSettings),t=je(n=>n.toggleAdvancedSettings);return R("div",{className:"panel-box",children:[w("button",{type:"button",onClick:t,className:"panel-box-toggle-btn",children:w("h3",{children:"Advanced Settings"})}),e&&w(Cy,{})]})}function Jd({name:e}){const t=D(i=>i.hasTag(e))?"selected":"",n=D(i=>i.toggleTag),r=()=>{n(e)};return w("div",{className:"modifierTag "+t,onClick:r,children:w("p",{children:e})})}function xy({tags:e}){return w("ul",{className:"modifier-list",children:e.map(t=>w("li",{children:w(Jd,{name:t})},t))})}function Py({title:e,tags:t}){const[n,r]=I.exports.useState(!1);return R("div",{className:"modifier-grouping",children:[w("div",{className:"modifier-grouping-header",onClick:()=>{r(!n)},children:w("h5",{children:e})}),n&&w(xy,{tags:t})]})}function Oy(){const e=D(i=>i.allModifiers);console.log("allModifiers",e);const t=je(i=>i.isOpenImageModifier),n=je(i=>i.toggleImageModifier);return R("div",{className:"panel-box",children:[w("button",{type:"button",onClick:()=>{n()},className:"panel-box-toggle-btn",children:w("h4",{children:"Image Modifiers (art styles, tags, ect)"})}),t&&e.map((i,o)=>w(Py,{title:i[0],tags:i[1]},i[0]))]})}var Ry="fma0ug0";function Ny({imageData:e,brushSize:t,brushShape:n,brushColor:r,isErasing:i}){const o=I.exports.useRef(null),l=I.exports.useRef(null),[s,u]=I.exports.useState(!1),[a,f]=I.exports.useState(512),[c,p]=I.exports.useState(512);I.exports.useEffect(()=>{console.log(e);const d=new Image;d.onload=()=>{f(d.width),p(d.height)},d.src=e},[e]),I.exports.useEffect(()=>{if(o.current){const d=o.current.getContext("2d"),h=d.getImageData(0,0,a,c),g=h.data;for(let x=0;x<g.length;x+=4)g[x+3]>0&&(g[x]=parseInt(r,16),g[x+1]=parseInt(r,16),g[x+2]=parseInt(r,16));d.putImageData(h,0,0)}},[r]);const m=d=>{console.log("mouse down",d),u(!0)},y=d=>{u(!1);const h=o.current;h&&h.toDataURL()},S=(d,h,g,x,E)=>{const k=o.current;if(k){const _=k.getContext("2d");if(i){const M=g/2;_.clearRect(d-M,h-M,g,g)}else _.beginPath(),_.lineWidth=g,_.lineCap=x,_.strokeStyle=E,_.moveTo(d,h),_.lineTo(d,h),_.stroke()}},C=(d,h,g,x,E)=>{const k=l.current;if(k){const _=k.getContext("2d");if(_.beginPath(),_.clearRect(0,0,k.width,k.height),i){const M=g/2;_.lineWidth=2,_.lineCap="butt",_.strokeStyle=E,_.moveTo(d-M,h-M),_.lineTo(d+M,h-M),_.lineTo(d+M,h+M),_.lineTo(d-M,h+M),_.lineTo(d-M,h-M),_.stroke()}else _.lineWidth=g,_.lineCap=x,_.strokeStyle=E,_.moveTo(d,h),_.lineTo(d,h),_.stroke()}};return R("div",{className:Ry,children:[w("img",{src:e}),w("canvas",{ref:o,width:a,height:c}),w("canvas",{ref:l,width:a,height:c,onMouseDown:m,onMouseUp:y,onMouseMove:d=>{const{nativeEvent:{offsetX:h,offsetY:g}}=d;C(h,g,t,n,r),s&&S(h,g,t,n,r)}})]})}var oc="_2yyo4x2",Iy="_2yyo4x1",My="_2yyo4x0";function Ty(){const e=I.exports.useRef(null),[t,n]=I.exports.useState("20"),[r,i]=I.exports.useState("round"),[o,l]=I.exports.useState("#fff"),[s,u]=I.exports.useState(!1),a=D(S=>S.getValueForRequestKey("init_image"));return R("div",{className:My,children:[w(Ny,{imageData:a,brushSize:t,brushShape:r,brushColor:o,isErasing:s}),R("div",{className:Iy,children:[R("div",{className:oc,children:[w("button",{onClick:()=>{u(!1)},children:"Mask"}),w("button",{onClick:()=>{u(!0)},children:"Erase"}),w("button",{disabled:!0,onClick:()=>{console.log("fill mask!!",e)},children:"Fill"}),w("button",{disabled:!0,onClick:()=>{console.log("clear all")},children:"Clear"}),R("label",{children:["Brush Size",w("input",{type:"range",min:"1",max:"100",value:t,onChange:S=>{n(S.target.value)}})]})]}),R("div",{className:oc,children:[w("button",{onClick:()=>{i("round")},children:"Cirle Brush"}),w("button",{onClick:()=>{i("square")},children:"Square Brush"}),w("button",{onClick:()=>{l("#000")},children:"Dark Brush"}),w("button",{onClick:()=>{l("#fff")},children:"Light Brush"})]})]})]})}var Dy="cjcdm20",Fy="cjcdm21";var Ly="_1how28i0",Ay="_1how28i1";var zy="_1rn4m8a4",Uy="_1rn4m8a2",jy="_1rn4m8a3",$y="_1rn4m8a0",Qy="_1rn4m8a1",By="_1rn4m8a5";function Vy(e){const t=I.exports.useRef(null),n=D(a=>a.getValueForRequestKey("init_image")),r=D(a=>a.isInpainting),i=D(a=>a.setRequestOptions),o=()=>{var a;(a=t.current)==null||a.click()},l=a=>{const f=a.target.files[0];if(f){const c=new FileReader;c.onload=p=>{p.target&&i("init_image",p.target.result)},c.readAsDataURL(f)}},s=D(a=>a.toggleInpainting);return R("div",{className:$y,children:[R("div",{children:[R("label",{className:Qy,children:[w("b",{children:"Initial Image:"})," (optional)"]}),w("input",{ref:t,className:Uy,name:"init_image",type:"file",onChange:l}),w("button",{className:jy,onClick:o,children:"Select File"})]}),w("div",{className:zy,children:n&&R(Lt,{children:[R("div",{children:[w("img",{src:n,width:"100",height:"100"}),w("button",{className:By,onClick:()=>{i("init_image",void 0),r&&s()},children:"X"})]}),R("label",{children:[w("input",{type:"checkbox",onChange:a=>{s()},checked:r}),"Use for Inpainting"]})]})})]})}function qy(){const e=D(t=>t.selectedTags());return R("div",{className:"selected-tags",children:[w("p",{children:"Active Tags"}),w("ul",{children:e.map(t=>w("li",{children:w(Jd,{name:t})},t))})]})}const or=pu((e,t)=>({images:new Array,completedImageIds:new Array,addNewImage:(n,r,i=!1)=>{e(se(o=>{let{seed:l}=r;i&&(l=Rr()),o.images.push({id:n,options:{...r,seed:l}})}))},hasQueuedImages:()=>t().images.length>0,firstInQueue:()=>t().images[0]||[],removeFirstInQueue:()=>{e(se(n=>{const r=n.images.shift();n.completedImageIds.push(r.id)}))}}));let ni;const Hy=new Uint8Array(16);function Wy(){if(!ni&&(ni=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!ni))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return ni(Hy)}const oe=[];for(let e=0;e<256;++e)oe.push((e+256).toString(16).slice(1));function Ky(e,t=0){return(oe[e[t+0]]+oe[e[t+1]]+oe[e[t+2]]+oe[e[t+3]]+"-"+oe[e[t+4]]+oe[e[t+5]]+"-"+oe[e[t+6]]+oe[e[t+7]]+"-"+oe[e[t+8]]+oe[e[t+9]]+"-"+oe[e[t+10]]+oe[e[t+11]]+oe[e[t+12]]+oe[e[t+13]]+oe[e[t+14]]+oe[e[t+15]]).toLowerCase()}const Gy=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto),lc={randomUUID:Gy};function Xy(e,t,n){if(lc.randomUUID&&!t&&!e)return lc.randomUUID();e=e||{};const r=e.random||(e.rng||Wy)();if(r[6]=r[6]&15|64,r[8]=r[8]&63|128,t){n=n||0;for(let i=0;i<16;++i)t[n+i]=r[i];return t}return Ky(r)}var Yy="_1hnlbmt0";function Jy(){const e=D(s=>s.parallelCount),t=D(s=>s.builtRequest),n=or(s=>s.addNewImage),r=or(s=>s.hasQueuedImages()),i=D(s=>s.isRandomSeed()),o=D(s=>s.setRequestOptions);return w("button",{className:Yy,onClick:()=>{const s=t();let u=[],{num_outputs:a}=s;if(e>a)u.push(a);else for(;a>=1;)a-=e,a<=0?u.push(e):u.push(Math.abs(a));u.forEach((f,c)=>{let p=s.seed;c!==0&&(p=Rr()),n(Xy(),{...s,num_outputs:f,seed:p})}),i&&o("seed",Rr())},disabled:r,children:"Make"})}function Zy(){const e=D(r=>r.getValueForRequestKey("prompt")),t=D(r=>r.setRequestOptions);return R("div",{className:Ly,children:[R("div",{className:Ay,children:[w("p",{children:"Prompt "}),w("textarea",{value:e,onChange:r=>{t("prompt",r.target.value)}})]}),w(Vy,{}),w(qy,{}),w(Jy,{})]})}function by(){const e=D(t=>t.isInpainting);return R(Lt,{children:[R("div",{className:Dy,children:[w(Zy,{}),w(Ey,{}),w(Oy,{})]}),e&&w("div",{className:Fy,children:w(Ty,{})})]})}const eg=`${en}/ding.mp3`,tg=mc.forwardRef((e,t)=>w("audio",{ref:t,style:{display:"none"},children:w("source",{src:eg,type:"audio/mp3"})}));var ng="_1yvg52n0",rg="_1yvg52n2",ig="_1yvg52n1",og="_1yvg52n3",lg="_1yvg52n4";function sc({imageData:e,metadata:t,className:n}){const r=D(s=>s.setRequestOptions),i=()=>{const{prompt:s,seed:u,num_inference_steps:a,guidance_scale:f,use_face_correction:c,use_upscale:p,width:m,height:y}=t;let S=s.replace(/[^a-zA-Z0-9]/g,"_");S=S.substring(0,100);let C=`${S}_Seed-${u}_Steps-${a}_Guidance-${f}`;return c&&(C+=`_FaceCorrection-${c}`),p&&(C+=`_Upscale-${p}`),C+=`_${m}x${y}`,C+=".png",C},o=()=>{const s=document.createElement("a");s.download=i(),s.href=e,s.click()},l=()=>{r("init_image",e)};return R("div",{className:[ng,n].join(" "),children:[w("p",{children:t.prompt}),R("div",{className:ig,children:[w("img",{className:rg,src:e,alt:"generated"}),w("button",{className:og,onClick:o,children:"Save"}),w("button",{className:lg,onClick:l,children:"Use as Input"})]})]})}var sg="_688lcr2",ug="_688lcr1",ag="_688lcr0",cg="_688lcr4",fg="_688lcr3";function dg(){const e=I.exports.useRef(null),t=D(c=>c.isSoundEnabled());D(c=>c.isInpainting);const{id:n,options:r}=or(c=>c.firstInQueue()),i=or(c=>c.removeFirstInQueue),{status:o,data:l}=Er([Ja,n],()=>Gm(r),{enabled:n!==void 0});I.exports.useEffect(()=>{var c;o==="success"&&l.status==="succeeded"&&(t&&((c=e.current)==null||c.play()),i())},[o,l,i,e,t]);const s=Md(),[u,a]=I.exports.useState([]),f=or(c=>c.completedImageIds);return D(c=>c.getValueForRequestKey("init_image")),I.exports.useEffect(()=>{const c=f.map(p=>s.getQueryData([Ja,p]));if(c.length>0){const p=c.map((m,y)=>{if(m!==void 0)return m.output.map(S=>({id:`${f[y]}-${S.seed}`,data:S.data,info:{...m.request,seed:S.seed}}))}).flat().reverse();a(p)}else a([])},[a,s,f]),R("div",{className:ag,children:[w(tg,{ref:e}),w("div",{className:ug,children:u.length>0&&R(Lt,{children:[w("div",{className:sg,children:w(sc,{imageData:u[0].data,metadata:u[0].info},u[0].id)}),w("div",{className:fg,children:u.map((c,p)=>c!==void 0?p==0?null:w(sc,{className:cg,imageData:c.data,metadata:c.info},c.id):(console.warn("image is undefined",c,p),null))})]})})]})}function hg(){return R("div",{id:"footer",className:"panel-box",children:[R("p",{children:["If you found this project useful and want to help keep it alive, please"," ",w("a",{href:"https://ko-fi.com/cmdr2_stablediffusion_ui",target:"_blank",children:w("img",{src:`${en}/kofi.png`,id:"coffeeButton"})})," ","to help cover the cost of development and maintenance! Thank you for your support!"]}),R("p",{children:["Please feel free to join the"," ",w("a",{href:"https://discord.com/invite/u9yhsFmEkB",target:"_blank",children:"discord community"})," ","or"," ",w("a",{href:"https://github.com/cmdr2/stable-diffusion-ui/issues",target:"_blank",children:"file an issue"})," ","if you have any problems or suggestions in using this interface."]}),R("div",{id:"footer-legal",children:[R("p",{children:[w("b",{children:"Disclaimer:"})," The authors of this project are not responsible for any content generated using this interface."]}),R("p",{children:["This license of this software forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm, ",w("br",{}),"spread misinformation and target vulnerable groups. For the full list of restrictions please read"," ",w("a",{href:"https://github.com/cmdr2/stable-diffusion-ui/blob/main/LICENSE",target:"_blank",children:"the license"}),"."]}),w("p",{children:"By using this software, you consent to the terms and conditions of the license."})]})]})}function pg({className:e}){const t=D(s=>s.setRequestOptions),{status:n,data:r}=Er(["SaveDir"],Wm),{status:i,data:o}=Er(["modifications"],Hm),l=D(s=>s.setAllModifiers);return I.exports.useEffect(()=>{n==="success"&&t("save_to_disk_path",r)},[t,n,r]),I.exports.useEffect(()=>{i==="success"?l(o):i==="error"&&l(Xm)},[t,i,o]),R("div",{className:[Um,e].join(" "),children:[w("header",{className:Bm,children:w(yy,{})}),w("nav",{className:jm,children:w(by,{})}),w("main",{className:$m,children:w(dg,{})}),w("footer",{className:Qm,children:w(hg,{})})]})}function vg({className:e}){return w("div",{children:w("h1",{children:"Settings"})})}var mg="ruay18m";const yg=new km;function gg(){const e=mg;return w(Cm,{location:yg,routes:[{path:"/",element:w(pg,{className:e})},{path:"settings",element:w(vg,{className:e})}]})}const Sg=new qv({defaultOptions:{queries:{refetchOnWindowFocus:!1,refetchOnReconnect:!1,refetchOnMount:!1,staleTime:1/0}}});sm();tl.createRoot(document.getElementById("root")).render(w(mc.StrictMode,{children:R(Kv,{client:Sg,children:[w(gg,{}),w(em,{initialIsOpen:!0})]})}));
