Rearrange the prompts box - move the prompt load button to the top, hide negative prompts behind a collapsible

This commit is contained in:
cmdr2 2022-10-17 13:45:08 +05:30
parent c61574b782
commit 224483f6ac
3 changed files with 27 additions and 8 deletions

View File

@ -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()

View File

@ -712,3 +712,7 @@ input[type="range"]::-moz-range-thumb {
padding: 10px;
transform: translate(50%, -50%) scaleX(130%);
}
#promptsFromFileBtn {
font-size: 9pt;
}

View File

@ -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)
}
})
})