forked from extern/easydiffusion
Move embeddings and modifiers buttons
This commit is contained in:
JeLuF
parent
6f065918e9
commit
de6fec5fd7
@ -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>
|
||||
@ -241,9 +246,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>
|
||||
<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>
|
||||
<select id="tiling" name="tiling">
|
||||
<option value="none" selected>None</option>
|
||||
@ -566,7 +568,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>
|
||||
|
||||
@ -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;
|
||||
@ -1145,7 +1139,7 @@ input::file-selector-button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#promptsFromFileBtn {
|
||||
.smallButton {
|
||||
font-size: 9pt;
|
||||
display: inline;
|
||||
padding: 2pt;
|
||||
@ -1652,14 +1646,6 @@ body.wait-pause {
|
||||
}
|
||||
}
|
||||
|
||||
#embeddings-button {
|
||||
background-color: var(--background-color3);
|
||||
}
|
||||
|
||||
#embeddings-button:hover {
|
||||
background-color: var(--button-hover-background);
|
||||
}
|
||||
|
||||
#embeddings-dialog {
|
||||
overflow: clip;
|
||||
}
|
||||
@ -1676,9 +1662,33 @@ body.wait-pause {
|
||||
}
|
||||
|
||||
#embeddings-list::-webkit-scrollbar-thumb {
|
||||
background: var(--background-color3);
|
||||
background: var(--background-color3);
|
||||
}
|
||||
|
||||
.model_entry .model_name {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -114,11 +114,14 @@ 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 makeImageBtn = document.querySelector("#makeImage")
|
||||
let stopImageBtn = document.querySelector("#stopImage")
|
||||
@ -2159,17 +2162,17 @@ function updateEmbeddingsList(filter = "") {
|
||||
|
||||
function onButtonClick(e) {
|
||||
let text = e.target.dataset["embedding"]
|
||||
console.log(e.shiftKey, text)
|
||||
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 = " "
|
||||
}
|
||||
@ -2199,10 +2202,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()
|
||||
|
||||
@ -439,7 +439,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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user