Merge branch 'beta' into mdiller_beta

ui/index.html

@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="/media/favicon-16x16.png" sizes="16x16">
     <link rel="icon" type="image/png" href="/media/favicon-32x32.png" sizes="32x32">
-    <link rel="stylesheet" href="/media/main.css?v=23">
+    <link rel="stylesheet" href="/media/main.css?v=24">
     <link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <link rel="stylesheet" href="/media/drawingboard.min.css">
@@ -15,7 +15,7 @@
 <div id="container">
     <div id="top-nav">
         <div id="logo">
-            <h1>Stable Diffusion UI <small>v2.23 <span id="updateBranchLabel"></span></small></h1>
+            <h1>Stable Diffusion UI <small>v2.24 <span id="updateBranchLabel"></span></small></h1>
         </div>
         <ul id="top-nav-items">
             <li class="dropdown">
@@ -38,12 +38,6 @@
                         <li><input id="turbo" name="turbo" type="checkbox" checked> <label for="turbo">Turbo mode <small>(generates images faster, but uses an additional 1 GB of GPU memory)</small></label></li>
                         <li><input id="use_cpu" name="use_cpu" type="checkbox"> <label for="use_cpu">Use CPU instead of GPU <small>(warning: this will be *very* slow)</small></label></li>
                         <li><input id="use_full_precision" name="use_full_precision" type="checkbox"> <label for="use_full_precision">Use full precision <small>(for GPU-only. warning: this will consume more VRAM)</small></label></li>
-                        <li>
-                            <input id="auto_save_settings" name="auto_save_settings" type="checkbox">
-                            <label for="auto_save_settings">Automatically save settings <small>(settings restored on browser load)</small></label>
-                            <button id="configureSettingsSaveBtn">Configure</button>
-                            <button id="restoreDefaultSettingsBtn">Restore Defaults</button>
-                        </li>
                         <!-- <li><input id="allow_nsfw" name="allow_nsfw" type="checkbox"> <label for="allow_nsfw">Allow NSFW Content (You confirm you are above 18 years of age)</label></li> -->
                         <br/>
                         <li><input id="use_beta_channel" name="use_beta_channel" type="checkbox"> <label for="use_beta_channel">🔥Beta channel. Get the latest features immediately (but could be less stable). Please restart the program after changing this.</label></li>
@@ -67,7 +61,7 @@
                     <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
                 </div>
 
-                <label for="negative_prompt">Negative Prompt <small>(optional)</small>:</label> <input id="negative_prompt" name="negative_prompt" size="50"><br/><br/>
+                <label for="negative_prompt">Negative Prompt <small>(optional)</small>:</label> <input id="negative_prompt" name="negative_prompt"><br/><br/>
 
                 <div id="editor-inputs-init-image" class="row">
                     <label for="init_image"><b>Initial Image (img2img):</b> <small>(optional)</small> </label> <input id="init_image" name="init_image" type="file" /><br/>
@@ -215,17 +209,6 @@
         </div>
     </div>
 
-    <div id="save-settings-config" style="display:none">
-        <div>
-            <span id="save-settings-config-close-btn">X</span>
-            <h1>Save Settings Configuration</h1>
-            <p>Select which settings should be saved and reloaded when restarting the browser</p>
-            <table id="save-settings-config-table">
-                <tr><th>Setting</th><th></th><th>Default value</th></tr>
-            </table>
-        </div>
-    </div>
-
     <div class="line-separator">&nbsp;</div>
 
     <div id="footer" class="panel-box">
@@ -241,14 +224,13 @@
 </body>
 
 <script src="media/auto-save.js?v=1"></script>
-<script src="media/main.js?v=34"></script>
+<script src="media/main.js?v=35"></script>
 <script>
 async function init() {
     await loadModifiers()
     await getDiskPath()
     await getAppConfig()
     await getModels()
-    await initSettings()
 
     setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
     healthCheck()

ui/media/main.css

@@ -1,8 +1,99 @@
+:root {
+    --background-color1: rgb(32, 33, 36); /* main parts of the page */
+    --background-color2: rgb(44, 45, 48); /* main panels */
+    --background-color3: rgb(47, 49, 53);
+    --background-color4: rgb(18, 18, 19); /* settings dropdowns */
+
+    --accent-hue: 266;
+    --accent-lightness: 36%;
+
+    --text-color: #eee;
+
+    --input-text-color: black;
+    --input-background-color: #e9e9ed; 
+    --input-border-color: #8f8f9d; 
+
+    --button-text-color: var(--input-text-color);
+    --button-color: #e9e9ed;
+    --button-border: 1px solid #8f8f9d;
+
+    /* other */
+    --input-border-radius: 4px;
+    --input-border-size: 1px; 
+    --accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
+    --make-image-border: 2px solid hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) - 21%));
+}
+
+
+/* Light Theme */
+/* :root {
+    --background-color1: white; 
+    --background-color2: #dddddd;
+    --background-color3: #e7e9eb;
+    --background-color4: #cccccc;
+
+    --text-color: black;
+
+    --input-text-color: black;
+    --input-background-color: #f8f9fa; 
+    --input-border-color: grey; 
+} */
+
+
+/* Discord Theme */
+/* :root {
+    --background-color1: #36393f;
+    --background-color2: #2f3136;
+    --background-color3: #292b2f;
+    --background-color4: #202225;
+    
+    --accent-hue: 235;
+    --accent-lightness: 65%;
+    --make-image-border: none;
+    
+    --button-color: var(--accent-color);
+    --button-border: none;
+
+    --input-text-color: #ccc;
+    --input-border-size: 2px; 
+    --input-background-color: #202225; 
+    --input-border-color: var(--input-background-color); 
+} */
+
+/* Example "Custom" Theme */
+/* :root {
+    --main-hue: 222;
+	--main-saturation: 18%;
+	--value-base: 19%;
+	--value-step: 3%;
+	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
+	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
+	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
+	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
+    
+    --accent-hue: 212;
+    --make-image-border: none;
+
+    --button-color: var(--accent-color);
+    --button-border: none;
+    
+    --input-border-size: 1px; 
+    --input-background-color: var(--background-color3);
+	--input-text-color: #ccc;
+	--input-border-color: var(--background-color4);
+} */
+
+
+* {
+    font-family: Work Sans, Verdana, Geneva, sans-serif;
+    box-sizing: border-box;
+}
+
 body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11pt;
-    background-color: rgb(32, 33, 36);
+    background-color: var(--background-color1);
-    color: #eee;
+    color: var(--text-color);
 }
 a {
     color: rgb(0, 102, 204);
@@ -11,17 +102,13 @@ a:visited {
     color: rgb(0, 102, 204);
 }
 label {
-    font-size: 10pt;
+    font-size: 9pt;
 }
 #prompt {
     width: 100%;
     height: 65pt;
-    box-sizing: border-box;
+    font-size: 13px;
-}
+    margin-bottom: 6px;
-@media screen and (max-width: 600px) {
-    #prompt {
-        width: 95%;
-    }
 }
 .image_preview_container {
     /* display: none; */
@@ -71,7 +158,7 @@ label {
 }
 .imgSeedLabel {
     font-size: 0.8em;
-    background-color: rgb(44, 45, 48);
+    background-color: var(--background-color2);
     border-radius: 3px;
     padding: 5px;
 }
@@ -143,14 +230,14 @@ label {
 }
 #makeImage {
     flex: 0 0 70px;
-    background: rgb(80, 0, 185);
+    background: var(--accent-color);
-    border: 2px solid rgb(40, 0, 78);
+    border: var(--make-image-border);
     color: rgb(255, 221, 255);
     width: 100%;
     height: 30pt;
 }
 #makeImage:hover {
-    background: rgb(93, 0, 214);
+    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
 }
 #stopImage {
     flex: 0 0 70px;
@@ -167,12 +254,13 @@ label {
 }
 .flex-container {
     display: flex;
+    width: 100%;
 }
 .col-50 {
     flex: 50%;
 }
 .col-fixed-10 {
-    flex: 0 0 380pt;
+    flex: 0 0 350pt;
 }
 .col-free {
     flex: 1;
@@ -194,8 +282,8 @@ label {
     padding-right: 5px;
 }
 .panel-box {
-    background: rgb(44, 45, 48);
+    background: var(--background-color2);
-    border: 1px solid rgb(47, 49, 53);
+    border: 1px solid var(--background-color3);
     border-radius: 7px;
     padding: 5px;
     margin-bottom: 15px;
@@ -346,7 +434,7 @@ img {
     padding-right: 2pt;
 }
 #community-links li a {
-    color: white;
+    color: var(--text-color);
     text-decoration: none;
 }
 .dropdown {
@@ -357,8 +445,8 @@ img {
     position: absolute;
     z-index: 2;
 
-    background: rgb(18, 18, 19);
+    background: var(--background-color4);
-    border: 2px solid rgb(37, 38, 41);
+    border: 2px solid var(--background-color2);
     border-radius: 7px;
     padding: 5px;
     margin-bottom: 15px;
@@ -369,7 +457,7 @@ img {
 }
 
 .imageTaskContainer {
-    border: 1px solid #333;
+    border: 1px solid var(--background-color2);
     margin-bottom: 10pt;
     padding: 5pt;
     border-radius: 5pt;
@@ -378,7 +466,7 @@ img {
 .taskStatusLabel {
     float: left;
     font-size: 8pt;
-    background:rgb(44, 45, 48);
+    background:var(--background-color2);
     border: 1px solid rgb(61, 62, 66);
     padding: 2pt 4pt;
     border-radius: 2pt;
@@ -459,11 +547,159 @@ img {
 
 #save-settings-config-table td small {
     color: rgb(153, 153, 153);
+
+#init_image_preview {
+    max-width: 150px;
+    max-height: 150px;
+	object-fit: contain;
+    border-radius: 6px;
+    transition: all 1s ease-in-out;
 }
 
-#save-settings-config-close-btn {
+#init_image_preview:hover {
-    float: right;
+    max-width: 500px;
-    cursor: pointer;
+    max-height: 1000px;
-    padding: 10px;
+    transition: all 1s 0.5s ease-in-out;
-    transform: translate(50%, -50%) scaleX(130%);
+}
+
+#init_image_wrapper {
+    position: relative;
+    width: fit-content;
+}
+
+#init_image_size_box {
+    position: absolute;
+    right: 0px;
+    bottom: 3px;
+    padding: 3px;
+    background: black;
+    color: white;
+    text-shadow: 0px 0px 4px black;
+    opacity: 60%;
+    font-size: 12px;
+    border-radius: 6px 0px;
+}
+
+#editor-settings-entries table td {
+    padding: 0px;
+    line-height: 28px;
+}
+
+#editor-settings-entries table td:first-child {
+    float: right;
+    padding-right: 4px;
+    white-space: nowrap;
+}
+
+#negative_prompt {
+    width: 100%;
+}
+
+button,
+input[type="file"],
+input[type="checkbox"],
+select {
+    cursor: pointer;
+}
+
+input,
+select,
+textarea {
+    border-radius: var(--input-border-radius);
+    padding: 4px;
+    accent-color: var(--accent-color);
+    background: var(--input-background-color);
+    border: var(--input-border-size) solid var(--input-border-color); 
+    color: var(--input-text-color);
+    font-size: 9pt;
+}
+
+input { 
+    padding: 4px 6px;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    outline: 2px solid var(--accent-color);
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled] {
+    opacity: 0.5;
+}
+
+input[type="file"] {
+    width: 100%;
+    padding: 2px;
+}
+
+button,
+input::file-selector-button { 
+    padding: 2px 4px;
+    border-radius: 4px;
+    background: var(--button-color);
+    color: var(--button-text-color);
+    border: var(--button-border);
+}
+
+input::file-selector-button {
+    padding: 0px 4px;
+    height: 19px;
+}
+
+/* input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0px;
+    padding: 0px;
+    cursor: pointer;
+    line-height: 29px;
+}
+
+input[type="range"]::-webkit-slider-thumb,
+input[type="range"]::-moz-range-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+} */
+
+@media screen and (max-width: 700px) {
+    body {
+        margin: 0px;
+    }
+    #container {
+        margin: 0px;
+        padding: 10px
+    }
+    .flex-container {
+        flex-direction: column;
+    }
+    #preview {
+        margin: 0px;
+        padding: 0px;
+    }
+    #preview .collapsible-content {
+        padding: 0px;
+    }
+    #preview .collapsible-content {
+        padding: 0px;
+    }
+    .imgItem {
+        margin-right: 0px;
+    }
+    .imgItem img {
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+    }
+    .dropdown-content {
+        width: auto !important;
+        transform: none !important;
+        left: 0px;
+        right: 0px;
+    }
 }

ui/media/main.js

@@ -12,7 +12,6 @@ const USE_UPSCALING_KEY = "useUpscaling"
 const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage"
 const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress"
 const OUTPUT_FORMAT_KEY = "outputFormat"
-const AUTO_SAVE_SETTINGS_KEY = "autoSaveSettings"
 const HEALTH_PING_INTERVAL = 5 // seconds
 const MAX_INIT_IMAGE_DIMENSION = 768
 const INPAINTING_EDITOR_SIZE = 450
@@ -189,10 +188,6 @@ function isUseFullPrecisionEnabled() {
     return getLocalStorageBoolItem(USE_FULL_PRECISION_KEY, false)
 }
 
-function isAutoSaveSettingsEnabled() {
-    return getLocalStorageBoolItem(AUTO_SAVE_SETTINGS_KEY, false)
-}
-
 function isUseTurboModeEnabled() {
     return getLocalStorageBoolItem(USE_TURBO_MODE_KEY, true)
 }
@@ -389,7 +384,7 @@ function getUseAsInputHandler(imageItemElem) {
 
         initImagePreviewContainer.style.display = 'block'
         inpaintingEditorContainer.style.display = 'none'
-        promptStrengthContainer.style.display = 'block'
+        promptStrengthContainer.style.display = 'table-row'
         maskSetting.checked = false
         samplerSelectionContainer.style.display = 'none'
 
@@ -1023,9 +1018,6 @@ useCPUField.checked = isUseCPUEnabled()
 useFullPrecisionField.addEventListener('click', handleBoolSettingChange(USE_FULL_PRECISION_KEY))
 useFullPrecisionField.checked = isUseFullPrecisionEnabled()
 
-autoSaveSettingsField.addEventListener('click', handleBoolSettingChange(AUTO_SAVE_SETTINGS_KEY))
-autoSaveSettingsField.checked = isAutoSaveSettingsEnabled()
-
 turboField.addEventListener('click', handleBoolSettingChange(USE_TURBO_MODE_KEY))
 turboField.checked = isUseTurboModeEnabled()
 
@@ -1201,7 +1193,7 @@ function showInitImagePreview() {
         initImagePreview.src = reader.result
         initImagePreviewContainer.style.display = 'block'
         inpaintingEditorContainer.style.display = 'none'
-        promptStrengthContainer.style.display = 'block'
+        promptStrengthContainer.style.display = 'table-row'
         samplerSelectionContainer.style.display = 'none'
         // maskSetting.checked = false
     })