From ee621fa09133b5634b0612aa5c5e831b68bbba04 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 15:23:48 -0700
Subject: [PATCH 01/10] pruned out all the auto-settings saving stuff

---
 ui/index.html     |  18 -----
 ui/media/main.css |  49 --------------
 ui/media/main.js  | 166 ----------------------------------------------
 3 files changed, 233 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index b968bb1c..f36cfd6e 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -39,12 +39,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>
@@ -221,17 +215,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">
@@ -253,7 +236,6 @@ async function init() {
     await getDiskPath()
     await getAppConfig()
     await getModels()
-    await initSettings()
 
     setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
     healthCheck()
diff --git a/ui/media/main.css b/ui/media/main.css
index 759e8fae..b720b47b 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -517,52 +517,3 @@ input[type="range"]::-moz-range-thumb {
     height: 24px;
     border-radius: 12px;
 } */
-
-#auto_save_settings:not(:checked) ~ button {
-    display: none;
-}
-
-#save-settings-config {
-    position: fixed;
-    background: rgba(32, 33, 36, 50%);
-    top: 0px;
-    left: 0px;
-    width: 100vw;
-    height: 100vh;
-    z-index: 1000;
-}
-
-#save-settings-config > div {
-    background: rgb(44, 45, 48);
-    max-width: 600px;
-    margin: auto;
-    margin-top: 100px;
-    border-radius: 6px;
-    padding: 30px;
-    text-align: center;
-}
-
-#save-settings-config-table {
-    margin: auto;
-} 
-
-#save-settings-config-table td:first-child,
-#save-settings-config-table th:first-child {
-    float: right;
-} 
-
-#save-settings-config-table td:last-child,
-#save-settings-config-table th:last-child {
-    float: left;
-} 
-
-#save-settings-config-table td small {
-    color: rgb(153, 153, 153);
-}
-
-#save-settings-config-close-btn {
-    float: right;
-    cursor: pointer;
-    padding: 10px;
-    transform: translate(50%, -50%) scaleX(130%);
-}
\ No newline at end of file
diff --git a/ui/media/main.js b/ui/media/main.js
index 6d68c9e1..dc9b198d 100644
--- 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
@@ -44,9 +43,6 @@ let useCPUField = document.querySelector('#use_cpu')
 let useFullPrecisionField = document.querySelector('#use_full_precision')
 let saveToDiskField = document.querySelector('#save_to_disk')
 let diskPathField = document.querySelector('#diskPath')
-let autoSaveSettingsField = document.querySelector('#auto_save_settings')
-let configureSettingsSaveBtn = document.querySelector('#configureSettingsSaveBtn')
-let restoreDefaultSettingsBtn = document.querySelector('#restoreDefaultSettingsBtn')
 // let allowNSFWField = document.querySelector("#allow_nsfw")
 let useBetaChannelField = document.querySelector("#use_beta_channel")
 let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
@@ -83,10 +79,6 @@ let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
 let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
 let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
 
-let saveSettingsConfigOverlay = document.querySelector('#save-settings-config')
-let saveSettingsConfigTable = document.querySelector('#save-settings-config-table')
-let saveSettingsConfigCloseBtn = document.querySelector('#save-settings-config-close-btn')
-
 let imagePreview = document.querySelector("#preview")
 let previewImageField = document.querySelector('#preview-image')
 previewImageField.onchange = () => changePreviewImages(previewImageField.value)
@@ -196,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)
 }
@@ -1035,9 +1023,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()
 
@@ -1620,154 +1605,3 @@ async function loadModifiers() {
         console.log('error fetching modifiers', e)
     }
 }
-
-// Saving settings 
-const SETTINGS_KEY = "user_settings";
-var SETTINGS_SHOULD_SAVE_MAP = {}; // key=id. dict initialized in initSettings
-var SETTINGS_VALUES = {}; // key=id. dict initialized in initSettings
-var SETTINGS_DEFAULTS = {}; // key=id. dict initialized in initSettings
-var SETTINGS_TO_SAVE = [
-    promptField,
-    seedField,
-    randomSeedField,
-    numOutputsTotalField,
-    numOutputsParallelField,
-    stableDiffusionModelField,
-    samplerField,
-    widthField,
-    heightField,
-    numInferenceStepsField,
-    guidanceScaleSlider,
-    promptStrengthSlider,
-    outputFormatField,
-    negativePromptField,
-    streamImageProgressField,
-    useFaceCorrectionField,
-    useUpscalingField,
-    showOnlyFilteredImageField,
-    upscaleModelField,
-    previewImageField,
-    modifierCardSizeSlider
-];
-
-function getSetting(element) {
-    if (element.type == "checkbox") {
-        return element.checked;
-    }
-    return element.value;
-}
-function setSetting(element, value) {
-    if (getSetting(element) == value) {
-        return; // no setting necessary
-    }
-    if (element.type == "checkbox") {
-        element.checked = value;
-    }
-    else {
-        element.value = value;
-    }
-    element.dispatchEvent(new Event("input"));
-    element.dispatchEvent(new Event("change"));
-}
-
-function saveSettings() {
-    localStorage.setItem(SETTINGS_KEY, JSON.stringify({
-        values: SETTINGS_VALUES,
-        should_save: SETTINGS_SHOULD_SAVE_MAP
-    }));
-}
-
-var CURRENTLY_LOADING_SETTINGS = false;
-function loadSettings() {
-    if (!autoSaveSettingsField.checked) {
-        return;
-    }
-    var saved_settings = JSON.parse(localStorage.getItem(SETTINGS_KEY));
-    if (saved_settings) {
-        var values = saved_settings.values;
-        var should_save = saved_settings.should_save;
-        CURRENTLY_LOADING_SETTINGS = true;
-        SETTINGS_TO_SAVE.forEach(element => {
-            if (element.id in values) {
-                SETTINGS_SHOULD_SAVE_MAP[element.id] = should_save[element.id];
-                SETTINGS_VALUES[element.id] = values[element.id];
-                if (SETTINGS_SHOULD_SAVE_MAP[element.id]) {
-                    setSetting(element, SETTINGS_VALUES[element.id]);
-                }
-            }
-        });
-        CURRENTLY_LOADING_SETTINGS = false;
-    }
-    else {
-        saveSettings();
-    }
-}
-
-restoreDefaultSettingsBtn.addEventListener('click', loadDefaultSettings);
-function loadDefaultSettings() {
-    CURRENTLY_LOADING_SETTINGS = true;
-    SETTINGS_TO_SAVE.forEach(element => {
-        SETTINGS_VALUES[element.id] = SETTINGS_DEFAULTS[element.id];
-        setSetting(element, SETTINGS_VALUES[element.id]);
-    });
-    CURRENTLY_LOADING_SETTINGS = false;
-    saveSettings();
-}
-
-function settingChangeHandler(event) {
-    if (!CURRENTLY_LOADING_SETTINGS) {
-        var element = event.target;
-        var value = getSetting(element);
-        if (value != SETTINGS_VALUES[element.id]) {
-            SETTINGS_VALUES[element.id] = value;
-            saveSettings();
-        }
-    }
-}
-async function initSettings() {
-    SETTINGS_TO_SAVE.forEach(element => {
-        SETTINGS_SHOULD_SAVE_MAP[element.id] = true;
-        SETTINGS_DEFAULTS[element.id] = getSetting(element);
-        SETTINGS_VALUES[element.id] = getSetting(element);
-        element.addEventListener("input", settingChangeHandler);
-        element.addEventListener("change", settingChangeHandler);
-    });
-    loadSettings();
-    fillSaveSettingsConfigTable();
-}
-
-function fillSaveSettingsConfigTable() {
-    SETTINGS_TO_SAVE.forEach(element => {
-        var caption = element.id;
-        var label = document.querySelector(`label[for='${element.id}']`);
-        if (label) {
-            caption = label.innerText;
-            var truncate_length = 25;
-            if (caption.length > truncate_length) {
-                caption = caption.substring(0, truncate_length - 3) + "...";
-            }
-        }
-        var default_value = SETTINGS_DEFAULTS[element.id];
-        var checkbox_id = `shouldsave_${element.id}`;
-        var is_checked = SETTINGS_SHOULD_SAVE_MAP[element.id] ? "checked" : "";
-        var newrow = `<tr><td><label for="${checkbox_id}">${caption}</label></td><td><input id="${checkbox_id}" name="${checkbox_id}" ${is_checked} type="checkbox" ></td><td><small>(${default_value})</small></td></tr>`;
-        saveSettingsConfigTable.insertAdjacentHTML("beforeend", newrow);
-        var checkbox = document.getElementById(checkbox_id)
-        checkbox.addEventListener("input", event => {
-            SETTINGS_SHOULD_SAVE_MAP[element.id] = checkbox.checked;
-            saveSettings();
-        });
-    });
-}
-
-saveSettingsConfigCloseBtn.addEventListener('click', () => {
-    saveSettingsConfigOverlay.style.display = 'none';
-});
-configureSettingsSaveBtn.addEventListener('click', () => {
-    saveSettingsConfigOverlay.style.display = 'block';
-});
-saveSettingsConfigOverlay.addEventListener('click', (event) => {
-    if (event.target.id == saveSettingsConfigOverlay.id) {
-        saveSettingsConfigOverlay.style.display = 'none';
-    }
-});
\ No newline at end of file

From 231961c0175fbe309821ddebac8b473ea5b0d0e7 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 15:25:36 -0700
Subject: [PATCH 02/10] removed newline from end of mainjs file

---
 ui/media/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/media/main.js b/ui/media/main.js
index dc9b198d..3c5be85e 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -1604,4 +1604,4 @@ async function loadModifiers() {
     } catch (e) {
         console.log('error fetching modifiers', e)
     }
-}
+}
\ No newline at end of file

From 9aefdf35a157cc7a71911468aab8820d7e5546f3 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 15:30:04 -0700
Subject: [PATCH 03/10] fixed bug with prompt strength showing up during
 non-img2img stuff

---
 ui/index.html    | 2 +-
 ui/media/main.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index f36cfd6e..7bffdf63 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -163,7 +163,7 @@
                     </td></tr>
                     <tr class="pl-5"><td><label for="num_inference_steps">Inference Steps:</label></td><td> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25"></td></tr>
                     <tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="10" max="500"> <input id="guidance_scale" name="guidance_scale" size="4"></td></tr>
-                    <tr class="pl-5"><span id="prompt_strength_container"></span><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4"><br/></td></tr></span>
+                    <tr id="prompt_strength_container" class="pl-5"><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4"><br/></td></tr></span>
                     <tr class="pl-5"><td><label for="output_format">Output Format:</label></td><td>
                         <select id="output_format" name="output_format">
                             <option value="jpeg" selected>jpeg</option>
diff --git a/ui/media/main.js b/ui/media/main.js
index 3c5be85e..cf7041ed 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -389,7 +389,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'
 
@@ -1198,7 +1198,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
     })

From 2a25ac084765b5389ec448a0ce1c3b26a40dd993 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 16:41:38 -0700
Subject: [PATCH 04/10] reorganized colors to make them themeable

---
 ui/media/main.css | 97 ++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 75 insertions(+), 22 deletions(-)

diff --git a/ui/media/main.css b/ui/media/main.css
index b720b47b..31d0c656 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -1,11 +1,66 @@
+: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: #ccc;
+    --input-background-color: hsl(225, 11.1%, 14%); 
+    --input-border-color: hsl(225, 11.1%, 10%); 
+
+    /* non-theme stuff */
+    --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;
+
+    --input-background-color: #202225; 
+    --input-border-color: var(--input-background-color); 
+}
+*/
+
+
 * {
     font-family: Work Sans, Verdana, Geneva, sans-serif;
 }
 
 body {
     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);
@@ -76,7 +131,7 @@ label {
 }
 .imgSeedLabel {
     font-size: 0.8em;
-    background-color: rgb(44, 45, 48);
+    background-color: var(--background-color2);
     border-radius: 3px;
     padding: 5px;
 }
@@ -149,14 +204,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;
@@ -200,8 +255,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;
@@ -352,7 +407,7 @@ img {
     padding-right: 2pt;
 }
 #community-links li a {
-    color: white;
+    color: var(--text-color);
     text-decoration: none;
 }
 .dropdown {
@@ -363,8 +418,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;
@@ -375,7 +430,7 @@ img {
 }
 
 .imageTaskContainer {
-    border: 1px solid #333;
+    border: 1px solid var(--background-color2);
     margin-bottom: 10pt;
     padding: 5pt;
     border-radius: 5pt;
@@ -384,7 +439,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;
@@ -447,8 +502,8 @@ img {
     right: 0px;
     bottom: 3px;
     padding: 3px;
-    background: rgb(32, 33, 36);
-    color: #ccc;
+    background: var(--background-color1);
+    color: var(--input-text-color);
     opacity: 70%;
     font-size: 12px;
     border-radius: 6px 0px;
@@ -474,14 +529,12 @@ select {
 input,
 select,
 textarea {
-    background: hsl(225, 11.1%, 95%);
-    border: 2px solid hsl(225, 11.1%, 50%);
     border-radius: 6px;
     padding: 4px;
-    accent-color: rgb(80, 0, 185);
-    background: hsl(225, 11.1%, 14%);
-    border: 2px solid hsl(225, 11.1%, 10%); 
-    color: #ccc;
+    accent-color: var(--accent-color);
+    background: var(--input-background-color);
+    border: 2px solid var(--input-border-color); 
+    color: var(--input-text-color);
 }
 
 input { 
@@ -491,7 +544,7 @@ input {
 input:focus,
 select:focus,
 textarea:focus {
-    outline: 2px solid rgb(80, 0, 185);
+    outline: 2px solid var(--accent-color);
 }
 
 input[disabled],

From 1b0d5b710ed6ba9d5c8de40d54a94fc08431ad76 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 17:26:52 -0700
Subject: [PATCH 05/10] fixed styling to work properly for mobile

---
 ui/index.html     |  2 +-
 ui/media/main.css | 50 +++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 7bffdf63..f50e9204 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -62,7 +62,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/>
diff --git a/ui/media/main.css b/ui/media/main.css
index 31d0c656..47896983 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -55,6 +55,7 @@
 
 * {
     font-family: Work Sans, Verdana, Geneva, sans-serif;
+    box-sizing: border-box;
 }
 
 body {
@@ -74,12 +75,6 @@ label {
 #prompt {
     width: 100%;
     height: 65pt;
-    box-sizing: border-box;
-}
-@media screen and (max-width: 600px) {
-    #prompt {
-        width: 95%;
-    }
 }
 .image_preview_container {
     /* display: none; */
@@ -228,6 +223,7 @@ label {
 }
 .flex-container {
     display: flex;
+    width: 100%;
 }
 .col-50 {
     flex: 50%;
@@ -517,6 +513,11 @@ img {
 #editor-settings-entries table td:first-child {
     float: right;
     padding-right: 4px;
+    white-space: nowrap;
+}
+
+#negative_prompt {
+    width: 100%;
 }
 
 button,
@@ -570,3 +571,40 @@ input[type="range"]::-moz-range-thumb {
     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;
+    }
+}

From 72a65218beee85309bbae90ab27ad51645325cb8 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 18:04:41 -0700
Subject: [PATCH 06/10] updated some of the styling and positioning of some
 stuff

---
 ui/media/main.css | 50 ++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 9 deletions(-)

diff --git a/ui/media/main.css b/ui/media/main.css
index 47896983..20f8726a 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -9,11 +9,13 @@
 
     --text-color: #eee;
 
-    --input-text-color: #ccc;
-    --input-background-color: hsl(225, 11.1%, 14%); 
-    --input-border-color: hsl(225, 11.1%, 10%); 
+    --input-text-color: black;
+    --input-background-color: #e9e9ed; 
+    --input-border-color: #8f8f9d; 
 
-    /* non-theme stuff */
+    /* 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%));
 }
@@ -36,7 +38,7 @@
 */
 
 /* Discord Theme */
-/* 
+/*  
 :root {
     --background-color1: #36393f;
     --background-color2: #2f3136;
@@ -47,10 +49,30 @@
     --accent-lightness: 65%;
     --make-image-border: none;
 
+    --input-border-size: 2px; 
     --input-background-color: #202225; 
     --input-border-color: var(--input-background-color); 
-}
-*/
+} */
+
+/* Dillerm 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;
+    
+    --input-border-size: 1px; 
+    --input-background-color: var(--background-color3);
+	--input-text-color: #ccc;
+	--input-border-color: var(--background-color4);
+} */
 
 
 * {
@@ -75,6 +97,7 @@ label {
 #prompt {
     width: 100%;
     height: 65pt;
+    font-size: 13px;
 }
 .image_preview_container {
     /* display: none; */
@@ -530,11 +553,11 @@ select {
 input,
 select,
 textarea {
-    border-radius: 6px;
+    border-radius: var(--input-border-radius);
     padding: 4px;
     accent-color: var(--accent-color);
     background: var(--input-background-color);
-    border: 2px solid var(--input-border-color); 
+    border: var(--input-border-size) solid var(--input-border-color); 
     color: var(--input-text-color);
 }
 
@@ -554,6 +577,15 @@ textarea[disabled] {
     opacity: 0.5;
 }
 
+input[type="file"] {
+    width: 100%;
+    padding: 2px;
+}
+
+input::file-selector-button {
+    padding: 0px 4px;
+}
+
 /* input[type="range"] {
     -webkit-appearance: none;
     appearance: none;

From 58d8a5ce466de12cc9cf1347809a0464b9387953 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 18:34:59 -0700
Subject: [PATCH 07/10] added support for theming buttons

---
 ui/media/main.css | 34 +++++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/ui/media/main.css b/ui/media/main.css
index 20f8726a..4d852f45 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -13,6 +13,10 @@
     --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; 
@@ -22,8 +26,7 @@
 
 
 /* Light Theme */
-/*
-:root {
+/* :root {
     --background-color1: white; 
     --background-color2: #dddddd;
     --background-color3: #e7e9eb;
@@ -34,12 +37,11 @@
     --input-text-color: black;
     --input-background-color: #f8f9fa; 
     --input-border-color: grey; 
-}
-*/
+} */
+
 
 /* Discord Theme */
-/*  
-:root {
+/* :root {
     --background-color1: #36393f;
     --background-color2: #2f3136;
     --background-color3: #292b2f;
@@ -48,13 +50,17 @@
     --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); 
 } */
 
-/* Dillerm Theme */
+/* Example "Custom" Theme */
 /* :root {
     --main-hue: 222;
 	--main-saturation: 18%;
@@ -67,6 +73,9 @@
     
     --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);
@@ -98,6 +107,7 @@ label {
     width: 100%;
     height: 65pt;
     font-size: 13px;
+    margin-bottom: 6px;
 }
 .image_preview_container {
     /* display: none; */
@@ -582,8 +592,18 @@ input[type="file"] {
     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"] {

From f80602b51a6160b72ca8e3d7f8f7c518a9fe194f Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 18:39:56 -0700
Subject: [PATCH 08/10] tweaked styling of the size hint for the image

---
 ui/media/main.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/media/main.css b/ui/media/main.css
index 4d852f45..684ad311 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -531,9 +531,10 @@ img {
     right: 0px;
     bottom: 3px;
     padding: 3px;
-    background: var(--background-color1);
-    color: var(--input-text-color);
-    opacity: 70%;
+    background: black;
+    color: white;
+    text-shadow: 0px 0px 4px black;
+    opacity: 60%;
     font-size: 12px;
     border-radius: 6px 0px;
 }

From cb4d66d6feac6e4aa288d2de2b539a6d673d393d Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 21:15:11 -0700
Subject: [PATCH 09/10] removed temporary thing from env start script

---
 scripts/on_env_start.bat | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/on_env_start.bat b/scripts/on_env_start.bat
index 1ebea8e8..a73198ce 100644
--- a/scripts/on_env_start.bat
+++ b/scripts/on_env_start.bat
@@ -34,8 +34,8 @@ if "%update_branch%"=="" (
 
     @cd sd-ui-files
 
-    @REM @call git reset --hard
-    @REM @call git checkout "%update_branch%"
+    @call git reset --hard
+    @call git checkout "%update_branch%"
     @call git pull
 
     @cd ..

From edf2b2df6fc82c3ada132a1d40b5a82565196900 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Mon, 17 Oct 2022 11:21:35 +0530
Subject: [PATCH 10/10] Bump version; Shrink the size of the editor panel and
 font size

---
 ui/index.html     | 6 +++---
 ui/media/main.css | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index f50e9204..581f91f2 100644
--- 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">
@@ -16,7 +16,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">
@@ -229,7 +229,7 @@
 </div>
 </body>
 
-<script src="media/main.js?v=34"></script>
+<script src="media/main.js?v=35"></script>
 <script>
 async function init() {
     await loadModifiers()
diff --git a/ui/media/main.css b/ui/media/main.css
index 684ad311..c2b777cc 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -101,7 +101,7 @@ a:visited {
     color: rgb(0, 102, 204);
 }
 label {
-    font-size: 10pt;
+    font-size: 9pt;
 }
 #prompt {
     width: 100%;
@@ -262,7 +262,7 @@ label {
     flex: 50%;
 }
 .col-fixed-10 {
-    flex: 0 0 380pt;
+    flex: 0 0 350pt;
 }
 .col-free {
     flex: 1;
@@ -570,6 +570,7 @@ textarea {
     background: var(--input-background-color);
     border: var(--input-border-size) solid var(--input-border-color); 
     color: var(--input-text-color);
+    font-size: 9pt;
 }
 
 input {