Merge branch 'beta' into mdiller_beta

2022-10-17 11:34:50 +05:30 · 2022-10-17 11:34:50 +05:30 · 1ec023b435
commit 1ec023b435
parent fd21eeb477 edf2b2df6f
3 changed files with 267 additions and 57 deletions
--- a/ui/index.html
+++ b/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()
--- a/ui/media/main.css
+++ b/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);
-    color: #eee;
+    background-color: var(--background-color1);
+    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;
-}
-@media screen and (max-width: 600px) {
-    #prompt {
-        width: 95%;
-    }
+    font-size: 13px;
+    margin-bottom: 6px;
 }
 .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);
-    border: 2px solid rgb(40, 0, 78);
+    background: var(--accent-color);
+    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);
-    border: 1px solid rgb(47, 49, 53);
+    background: var(--background-color2);
+    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);
-    border: 2px solid rgb(37, 38, 41);
+    background: var(--background-color4);
+    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 {
+    max-width: 500px;
+    max-height: 1000px;
+    transition: all 1s 0.5s ease-in-out;
+}
+
+#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;
-    padding: 10px;
-    transform: translate(50%, -50%) scaleX(130%);
-}
+}
+
+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;
+    }
+}
--- a/ui/media/main.js
+++ b/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
    })