From 224483f6ac515300d42b93dc08c89e80a964083c Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Mon, 17 Oct 2022 13:45:08 +0530
Subject: [PATCH] Rearrange the prompts box - move the prompt load button to
 the top, hide negative prompts behind a collapsible

---
 ui/index.html     | 18 ++++++++++--------
 ui/media/main.css |  4 ++++
 ui/media/main.js  | 13 +++++++++++++
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 0785d529..4fef3a46 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=24">
+    <link rel="stylesheet" href="/media/main.css?v=25">
     <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.25 <span id="updateBranchLabel"></span></small></h1>
+            <h1>Stable Diffusion UI <small>v2.26 <span id="updateBranchLabel"></span></small></h1>
         </div>
         <ul id="top-nav-items">
             <li class="dropdown">
@@ -62,16 +62,18 @@
             </div>
             <div id="editor-inputs">
                 <div id="editor-inputs-prompt" class="row">
-                    <label for="prompt">Prompt</label>
+                    <label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn">Load from a file</button>
                     <textarea id="prompt" class="col-free">a photograph of an astronaut riding a horse</textarea>
-                    <small>(or)</small> <button id="promptsFromFileBtn">Load prompts from a file</button> <small>(one prompt per line)</small>
                     <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
+
+                    <label for="negative_prompt" class="collapsible" id="negative_prompt_handle">Negative Prompt <small>(optional)</small></label>
+                    <div class="collapsible-content">
+                        <input id="negative_prompt" name="negative_prompt" placeholder="list the things to remove from the image (e.g. fog, green)">
+                    </div>
                 </div>
 
-                <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/>
+                    <label for="init_image">Initial Image (img2img) <small>(optional)</small> </label> <input id="init_image" name="init_image" type="file" /><br/>
 
                     <div id="init_image_preview_container" class="image_preview_container">
                         <div id="init_image_wrapper">
@@ -247,7 +249,7 @@
 </body>
 
 <script src="media/auto-save.js?v=1"></script>
-<script src="media/main.js?v=35"></script>
+<script src="media/main.js?v=36"></script>
 <script>
 async function init() {
     await loadModifiers()
diff --git a/ui/media/main.css b/ui/media/main.css
index 0f01e04f..c51f72d6 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -712,3 +712,7 @@ input[type="range"]::-moz-range-thumb {
     padding: 10px;
     transform: translate(50%, -50%) scaleX(130%);
 }
+
+#promptsFromFileBtn {
+    font-size: 9pt;
+}
\ No newline at end of file
diff --git a/ui/media/main.js b/ui/media/main.js
index 26eb5ef5..a407ecd5 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -7,6 +7,7 @@ const USE_TURBO_MODE_KEY = "useTurboMode"
 const DISK_PATH_KEY = "diskPath"
 const ADVANCED_PANEL_OPEN_KEY = "advancedPanelOpen"
 const MODIFIERS_PANEL_OPEN_KEY = "modifiersPanelOpen"
+const NEGATIVE_PROMPT_PANEL_OPEN_KEY = "negativePromptPanelOpen"
 const USE_FACE_CORRECTION_KEY = "useFaceCorrection"
 const USE_UPSCALING_KEY = "useUpscaling"
 const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage"
@@ -76,6 +77,7 @@ let clearAllPreviewsBtn = document.querySelector("#clear-all-previews")
 // let maskImagePreviewContainer = document.querySelector('#mask_preview_container')
 // let maskImageClearBtn = document.querySelector('#mask_clear')
 let maskSetting = document.querySelector('#enable_mask')
+let negativePromptPanelHandle = document.querySelector('#negative_prompt_handle')
 
 let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
 let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
@@ -210,6 +212,10 @@ function isModifiersPanelOpenEnabled() {
     return getLocalStorageBoolItem(MODIFIERS_PANEL_OPEN_KEY, false)
 }
 
+function isNegativePromptPanelOpenEnabled() {
+    return getLocalStorageBoolItem(NEGATIVE_PROMPT_PANEL_OPEN_KEY, false)
+}
+
 function isStreamImageProgressEnabled() {
     return getLocalStorageBoolItem(STREAM_IMAGE_PROGRESS_KEY, false)
 }
@@ -1083,6 +1089,10 @@ if (isModifiersPanelOpenEnabled()) {
     setPanelOpen(modifiersPanelHandle)
 }
 
+if (isNegativePromptPanelOpenEnabled()) {
+    setPanelOpen(negativePromptPanelHandle)
+}
+
 makeImageBtn.addEventListener('click', makeImage)
 
 
@@ -1387,6 +1397,9 @@ function createCollapsibles(node) {
             } else if (this == modifiersPanelHandle) {
                 let state = (content.style.display === 'block' ? 'true' : 'false')
                 localStorage.setItem(MODIFIERS_PANEL_OPEN_KEY, state)
+            } else if (this == negativePromptPanelHandle) {
+                let state = (content.style.display === 'block' ? 'true' : 'false')
+                localStorage.setItem(NEGATIVE_PROMPT_PANEL_OPEN_KEY, state)
             }
         })
     })