Merge pull request #1416 from JeLuF/mvemb

Move embeddings and modifiers buttons

ui/index.html

@@ -56,7 +56,15 @@
         <div id="editor">
             <div id="editor-inputs">
                 <div id="editor-inputs-prompt" class="row">
-                    <label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn" class="tertiaryButton">Load from a file</button>
+                    <div id="prompt-toolbar" class="split-toolbar">
+                        <div id="prompt-toolbar-left" class="toolbar-left">
+                            <label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn" class="tertiaryButton smallButton">Load from a file</button>
+                        </div>
+                        <div id="prompt-toolbar-right" class="toolbar-right">
+                            <button id="image-modifier-dropdown" class="tertiaryButton smallButton">+ Image Modifiers</button>
+                            <button id="embeddings-button" class="tertiaryButton smallButton displayNone">+ Embedding</button>
+                        </div>
+                    </div>
                     <textarea id="prompt" class="col-free">a photograph of an astronaut riding a horse</textarea>
                     <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
                     <label for="negative_prompt" class="collapsible" id="negative_prompt_handle">
@@ -64,10 +72,7 @@
                         <a href="https://github.com/easydiffusion/easydiffusion/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top">Click to learn more about Negative Prompts</span></i></a>
                         <small>(optional)</small>
                     </label>
-                    <label for="image-modifiers" data-active="false" id="image-modifier-dropdown">
-                        Image Modifiers
-                        <small>(optional)</small>
-                    </label>
+                    <button id="negative-embeddings-button" class="tertiaryButton smallButton displayNone">+ Embedding</button>
                     <div class="collapsible-content">
                         <textarea id="negative_prompt" name="negative_prompt" placeholder="list the things to remove from the image (e.g. fog, green)"></textarea>
                     </div>
@@ -244,12 +249,6 @@
                         <td><label for="hypernetwork_strength_slider">Hypernetwork Strength:</label></td>
                         <td> <input id="hypernetwork_strength_slider" name="hypernetwork_strength_slider" class="editor-slider" value="100" type="range" min="0" max="100"> <input id="hypernetwork_strength" name="hypernetwork_strength" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td>
                     </tr>
-                    <tr id="embeddings-container" class="pl-5 displayNone">
-                        <td><label for="embeddings-button">Embedding:</label></td>
-                        <td class="diffusers-restart-needed">
-                            <button id="embeddings-button" class="tertiaryButton">Add embedding to prompt</button>
-                        </td>
-                    </tr>
                     <tr id="tiling_container" class="pl-5">
                         <td><label for="tiling">Seamless Tiling:</label></td>
                         <td class="diffusers-restart-needed">
@@ -575,7 +574,10 @@
         <div id="embeddings-dialog-header" class="dialog-header">
             <div id="embeddings-dialog-header-left" class="dialog-header-left">
                 <h4>Embeddings</h4>
-                <span>Add embeddings to the prompt (click) or negative prompt (shift-click)</span>
+                <span>
+                    <span class="displayNone" id="positive-embedding-text"> Add embeddings to the prompt (click) or negative prompt (shift-click)</span>
+                    <span class="displayNone" id="negative-embedding-text"> Add embeddings to the negative prompt</span>
+                <span>
             </div>
             <div id="embeddings-dialog-header-right">
                 <i id="embeddings-dialog-close-button" class="fa-solid fa-xmark fa-lg"></i>

ui/media/css/main.css

@@ -288,12 +288,6 @@ button#resume {
     position: relative;
     cursor: pointer;
 }
-#image-modifier-dropdown[data-active="true"]::before {
-    content: "➖";
-}
-#image-modifier-dropdown[data-active="false"]::before {
-    content: "➕";
-}
 #editor-modifiers {
     max-width: 75vw;
     min-width: 50vw;
@@ -1149,7 +1143,7 @@ input::file-selector-button {
     position: relative;
 }
 
-#promptsFromFileBtn {
+.smallButton {
     font-size: 9pt;
     display: inline;
     padding: 2pt;
@@ -1656,14 +1650,6 @@ body.wait-pause {
     }
 }
 
-#embeddings-button {
-    background-color: var(--background-color3);
-}
-
-#embeddings-button:hover {
-    background-color: var(--button-hover-background);
-}
-
 #embeddings-dialog {
     overflow: clip;
 }
@@ -1708,7 +1694,7 @@ body.wait-pause {
 }
 
 #embeddings-list::-webkit-scrollbar-thumb {
-  background: var(--background-color3);
+    background: var(--background-color3);
 }
 
 .model_entry .model_name {
@@ -1725,6 +1711,30 @@ body.wait-pause {
     top: 4pt;
 }
 
+.split-toolbar {  display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas: "toolbar-left toolbar-right";
+}
+
+.toolbar-left {
+    justify-self: start;
+    align-self: center;
+    grid-area: toolbar-left;
+}
+
+.toolbar-right {
+    justify-self: end;
+    align-self: center;
+    grid-area: toolbar-right;
+}
+
+#negative-embeddings-button {
+    float: right;
+}
+
 .diffusers-disabled-on-startup .diffusers-restart-needed {
     font-size: 0;
 }

ui/media/js/main.js

@@ -114,11 +114,15 @@ let thumbnailSizeField = document.querySelector("#thumbnail_size-input")
 let autoscrollBtn = document.querySelector("#auto_scroll_btn")
 let autoScroll = document.querySelector("#auto_scroll")
 let embeddingsButton = document.querySelector("#embeddings-button")
+let negativeEmbeddingsButton = document.querySelector("#negative-embeddings-button")
 let embeddingsDialog = document.querySelector("#embeddings-dialog")
 let embeddingsDialogCloseBtn = embeddingsDialog.querySelector("#embeddings-dialog-close-button")
 let embeddingsSearchBox = document.querySelector("#embeddings-search-box")
 let embeddingsList = document.querySelector("#embeddings-list")
 let embeddingsModeField = document.querySelector("#embeddings-mode")
+
+let positiveEmbeddingText = document.querySelector("#positive-embedding-text")
+let negativeEmbeddingText = document.querySelector("#negative-embedding-text")
 let embeddingsCollapsiblesBtn = document.querySelector("#embeddings-action-collapsibles-btn")
 
 let makeImageBtn = document.querySelector("#makeImage")
@@ -2176,16 +2180,17 @@ function updateEmbeddingsList(filter = "") {
 
     function onButtonClick(e) {
         let text = e.target.dataset["embedding"]
+        const insertIntoNegative = e.shiftKey || positiveEmbeddingText.classList.contains("displayNone")
 
         if (embeddingsModeField.value == "insert") {
-            if (e.shiftKey) {
+            if (insertIntoNegative) {
                 insertAtCursor(negativePromptField, text)
             } else {
                 insertAtCursor(promptField, text)
             }
         } else {
             let pad = ""
-            if (e.shiftKey) {
+            if (insertIntoNegative) {
                 if (!negativePromptField.value.endsWith(" ")) {
                     pad = " "
                 }
@@ -2219,10 +2224,20 @@ function updateEmbeddingsList(filter = "") {
     }
 }
 
-embeddingsButton.addEventListener("click", () => {
+function showEmbeddingDialog() {
     updateEmbeddingsList()
     embeddingsSearchBox.value = ""
     embeddingsDialog.showModal()
+}
+embeddingsButton.addEventListener("click", () => {
+    positiveEmbeddingText.classList.remove("displayNone")
+    negativeEmbeddingText.classList.add("displayNone")
+    showEmbeddingDialog()
+})
+negativeEmbeddingsButton.addEventListener("click", () => {
+    positiveEmbeddingText.classList.add("displayNone")
+    negativeEmbeddingText.classList.remove("displayNone")
+    showEmbeddingDialog()
 })
 embeddingsDialogCloseBtn.addEventListener("click", (e) => {
     embeddingsDialog.close()

ui/media/js/parameters.js

@@ -449,7 +449,8 @@ async function getAppConfig() {
                 option.disabled = true
             })
             document.querySelector("#clip_skip_config").classList.remove("displayNone")
-            document.querySelector("#embeddings-container").classList.remove("displayNone")
+            document.querySelector("#embeddings-button").classList.remove("displayNone")
+            document.querySelector("#negative-embeddings-button").classList.remove("displayNone")
         }
 
         console.log("get config status response", config)