diff --git a/ui/index.html b/ui/index.html index 4374c5ee..ea244f93 100644 --- a/ui/index.html +++ b/ui/index.html @@ -56,7 +56,15 @@
- or +
+
+ or +
+
+ + +
+
- +
@@ -244,12 +249,6 @@
- - - - - - @@ -575,7 +574,10 @@

Embeddings

- Add embeddings to the prompt (click) or negative prompt (shift-click) + + Add embeddings to the prompt (click) or negative prompt (shift-click) + Add embeddings to the negative prompt +
diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 73ba6e31..7506c46f 100644 --- a/ui/media/css/main.css +++ b/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; } diff --git a/ui/media/js/main.js b/ui/media/js/main.js index ba38c0df..0b936066 100644 --- a/ui/media/js/main.js +++ b/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() diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js index 7e8042f4..ded09206 100644 --- a/ui/media/js/parameters.js +++ b/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)