mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-12-23 23:49:11 +01:00
made first large swathe of changes for ui reorganization
This commit is contained in:
Malcolm Diller
parent
5e22360cb1
commit
484e53cc08
@ -20,28 +20,31 @@
|
||||
<div id="logo">
|
||||
<h1>Stable Diffusion UI <small>v2.3.9 <span id="updateBranchLabel"></span></small></h1>
|
||||
</div>
|
||||
<ul id="top-nav-items">
|
||||
<li class="dropdown">
|
||||
<span><i class="fa fa-comments icon"></i> Help & Community</span>
|
||||
<div id="server-status">
|
||||
<div id="server-status-color">●</div>
|
||||
<span id="server-status-msg">Stable Diffusion is starting..</span>
|
||||
</div>
|
||||
<div id="tab-container">
|
||||
<span class="active">
|
||||
<span><i class="fa fa-image icon"></i> Generate</span>
|
||||
</span>
|
||||
<span id="settings-button" class="dropdown">
|
||||
<span><i class="fa fa-gear icon"></i> Settings</span>
|
||||
</span>
|
||||
<span class="dropdown">
|
||||
<span><i class="fa fa-circle-info icon"></i> About</span>
|
||||
<ul id="community-links" class="dropdown-content">
|
||||
<li><a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" target="_blank"><i class="fa-solid fa-circle-question fa-fw"></i> Usual problems and solutions</a></li>
|
||||
<li><a href="https://discord.com/invite/u9yhsFmEkB" target="_blank"><i class="fa-brands fa-discord fa-fw"></i> Discord user community</a></li>
|
||||
<li><a href="https://www.reddit.com/r/StableDiffusionUI/" target="_blank"><i class="fa-brands fa-reddit fa-fw"></i> Reddit community</a></li>
|
||||
<li><a href="https://github.com/cmdr2/stable-diffusion-ui" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="settings-button" class="dropdown">
|
||||
<span><i class="fa fa-gear icon"></i> Settings</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-container">
|
||||
<div id="editor" class="col-fixed-10">
|
||||
<div id="server-status">
|
||||
<div id="server-status-color">●</div>
|
||||
<span id="server-status-msg">Stable Diffusion is starting..</span>
|
||||
</div>
|
||||
<div id="tab-content" class="flex-container">
|
||||
<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">Load from a file</button>
|
||||
@ -79,19 +82,19 @@
|
||||
<button id="stopImage" class="secondaryButton">Stop All</button>
|
||||
</div>
|
||||
|
||||
<div class="line-separator"> </div>
|
||||
<span class="line-separator"></span>
|
||||
|
||||
<div id="editor-settings" class="panel-box settings-box">
|
||||
<div id="editor-settings" class="settings-box">
|
||||
<h4 class="collapsible">
|
||||
Image Settings
|
||||
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left">
|
||||
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button">
|
||||
<span class="simple-tooltip right">
|
||||
Reset Image Settings
|
||||
</span>
|
||||
</i>
|
||||
</h4>
|
||||
<ul id="editor-settings-entries" class="collapsible-content">
|
||||
<li><table>
|
||||
<div id="editor-settings-entries" class="collapsible-content">
|
||||
<div><table>
|
||||
<tr><b class="settings-subheader">Image Settings</b></tr>
|
||||
<tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked><label for="random_seed">Random</label></td></tr>
|
||||
<tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td><td><input id="num_outputs_total" name="num_outputs_total" value="1" size="1"> <label><small>(total)</small></label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1"> <label for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr>
|
||||
@ -167,10 +170,9 @@
|
||||
<option value="png">png</option>
|
||||
</select>
|
||||
</td></tr>
|
||||
</li></table>
|
||||
|
||||
<br/>
|
||||
</table></div>
|
||||
|
||||
<div><ul>
|
||||
<li><b class="settings-subheader">Render Settings</b></li>
|
||||
<li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview <small>(uses more VRAM, slightly slower image creation)</small></label></li>
|
||||
<li class="pl-5"><input id="use_face_correction" name="use_face_correction" type="checkbox" checked> <label for="use_face_correction">Fix incorrect faces and eyes <small>(uses GFPGAN)</small></label></li>
|
||||
@ -182,12 +184,21 @@
|
||||
</select>
|
||||
</li>
|
||||
<li class="pl-5"><input id="show_only_filtered_image" name="show_only_filtered_image" type="checkbox" checked> <label for="show_only_filtered_image">Show only the corrected/upscaled image</label></li>
|
||||
</ul>
|
||||
</ul></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="editor-modifiers" class="panel-box">
|
||||
<button id="modifier-settings-btn" title="Add custom modifiers"><i class="fa fa-gear"></i></button>
|
||||
<h4 class="collapsible">Image Modifiers (art styles, tags etc)</h4>
|
||||
<span class="line-separator"></span>
|
||||
|
||||
<div id="editor-modifiers">
|
||||
<h4 class="collapsible">
|
||||
Image Modifiers
|
||||
<i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
|
||||
<span class="simple-tooltip right">
|
||||
Add Custom Modifiers
|
||||
</span>
|
||||
</i>
|
||||
</h4>
|
||||
<div id="editor-modifiers-entries" class="collapsible-content">
|
||||
<div id="editor-modifiers-entries-toolbar">
|
||||
<label for="preview-image">Image Style:</label>
|
||||
@ -243,7 +254,7 @@
|
||||
|
||||
<div class="line-separator"> </div>
|
||||
|
||||
<div id="footer" class="panel-box">
|
||||
<div id="footer">
|
||||
<p>If you found this project useful and want to help keep it alive, please <a href="https://ko-fi.com/cmdr2_stablediffusion_ui" target="_blank"><img src="/media/images/kofi.png" id="coffeeButton"></a> to help cover the cost of development and maintenance! Thank you for your support!</p>
|
||||
<p>Please feel free to join the <a href="https://discord.com/invite/u9yhsFmEkB" target="_blank">discord community</a> or <a href="https://github.com/cmdr2/stable-diffusion-ui/issues" target="_blank">file an issue</a> if you have any problems or suggestions in using this interface.</p>
|
||||
<div id="footer-legal">
|
||||
|
||||
@ -30,23 +30,6 @@
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
|
||||
#reset-image-settings {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
padding: 8px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5;
|
||||
}
|
||||
|
||||
.collapsible:not(.active) #reset-image-settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#reset-image-settings.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#system-settings .form-table td {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -8,8 +8,9 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 11pt;
|
||||
background-color: var(--background-color1);
|
||||
background-color: var(--background-color2);
|
||||
color: var(--text-color);
|
||||
}
|
||||
a {
|
||||
@ -104,37 +105,39 @@ label {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
#container {
|
||||
width: 95%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@media screen and (max-width: 1800px) {
|
||||
#container {
|
||||
width: 100%;
|
||||
}
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
#logo small {
|
||||
font-size: 11pt;
|
||||
}
|
||||
#editor {
|
||||
padding: 5px;
|
||||
background: var(--background-color2);
|
||||
padding: 8px 8px 24px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#editor label {
|
||||
font-weight: normal;
|
||||
}
|
||||
#editor h4 {
|
||||
margin: 0px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#editor .collapsible-content {
|
||||
width: 100%;
|
||||
}
|
||||
.settings-box label small {
|
||||
color: rgb(153, 153, 153);
|
||||
margin-right: 10px;
|
||||
}
|
||||
#preview {
|
||||
padding: 5px;
|
||||
padding: 8px;
|
||||
background: var(--background-color1);
|
||||
}
|
||||
#preview .collapsible-content {
|
||||
padding: 0px 15px;
|
||||
}
|
||||
#editor-inputs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#editor-inputs-prompt {
|
||||
flex: 1;
|
||||
}
|
||||
@ -189,7 +192,7 @@ label {
|
||||
cursor: pointer;
|
||||
}
|
||||
.collapsible-content {
|
||||
display: none;
|
||||
display: block;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.collapsible-content h5 {
|
||||
@ -201,41 +204,47 @@ label {
|
||||
color: white;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.collapsible:not(.active) ~ .collapsible-content {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.panel-box {
|
||||
background: var(--background-color2);
|
||||
border: 1px solid var(--background-color3);
|
||||
border-radius: 7px;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.panel-box h4 {
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
#editor-modifiers {
|
||||
max-width: 600px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#editor-modifiers .editor-modifiers-leaf {
|
||||
padding-top: 10pt;
|
||||
padding-bottom: 10pt;
|
||||
}
|
||||
#preview {
|
||||
margin-left: 10pt;
|
||||
}
|
||||
img {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.line-separator {
|
||||
background: rgb(56, 56, 56);
|
||||
height: 1pt;
|
||||
margin: 15pt 0;
|
||||
background: var(--background-color3);
|
||||
height: 8px;
|
||||
margin: 16px 0px;
|
||||
}
|
||||
#editor-inputs-tags-container {
|
||||
margin-top: 5pt;
|
||||
display: none;
|
||||
}
|
||||
#server-status {
|
||||
display: inline;
|
||||
float: right;
|
||||
transform: translateY(-5pt);
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: right;
|
||||
}
|
||||
#server-status-color {
|
||||
/* width: 8pt;
|
||||
@ -288,8 +297,9 @@ img {
|
||||
}
|
||||
|
||||
#top-nav {
|
||||
padding-top: 3pt;
|
||||
padding-bottom: 15pt;
|
||||
position: relative;
|
||||
background: var(--background-color4);
|
||||
display: flex;
|
||||
}
|
||||
#top-nav .icon {
|
||||
padding-right: 4pt;
|
||||
@ -298,6 +308,7 @@ img {
|
||||
}
|
||||
#logo {
|
||||
display: inline;
|
||||
padding: 12px;
|
||||
}
|
||||
#logo h1 {
|
||||
display: inline;
|
||||
@ -450,6 +461,20 @@ img {
|
||||
border-radius: 6px 0px;
|
||||
}
|
||||
|
||||
#editor-settings-entries {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#editor-settings-entries > div {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#editor-settings-entries ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#editor-settings-entries table td {
|
||||
padding: 0px;
|
||||
line-height: 28px;
|
||||
@ -525,12 +550,14 @@ input::file-selector-button {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
#top-nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
#container {
|
||||
margin: 0px;
|
||||
padding: 10px
|
||||
}
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
@ -565,11 +592,31 @@ input::file-selector-button {
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
#reset-image-settings {
|
||||
.section-button {
|
||||
position: relative;
|
||||
transform: translateY(-13%);
|
||||
}
|
||||
|
||||
.section-button {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
padding: 8px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5;
|
||||
}
|
||||
|
||||
.section-button {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
padding: 8px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5;
|
||||
}
|
||||
|
||||
.collapsible:not(.active) .section-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.simple-tooltip {
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
@ -706,6 +753,60 @@ input::file-selector-button {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
#settings-button {
|
||||
#tab-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#tab-container > span {
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
background: var(--background-color2);
|
||||
opacity: 50%;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
#tab-container > span:hover {
|
||||
opacity: 75%;
|
||||
}
|
||||
|
||||
#tab-container > span.active {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
#tab-content {
|
||||
border-top: 8px solid var(--background-color2);
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 700px) {
|
||||
#editor {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
|
||||
/* FLOATING FIXED STUFF */
|
||||
#tab-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#editor {
|
||||
flex-direction: row;
|
||||
max-width: none;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
#editor .line-separator {
|
||||
height: inherit;
|
||||
flex-basis: 8px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin: 0px 16px;
|
||||
}
|
||||
|
||||
#editor-settings-entries {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
@ -70,7 +70,8 @@ async function initSettings() {
|
||||
SETTINGS_SECTIONS.forEach(section => {
|
||||
var name = section.name
|
||||
var element = document.getElementById(section.id)
|
||||
var children = Array.from(element.querySelectorAll(unsorted_settings_ids.map(id => `#${id}`).join(",")))
|
||||
var unsorted_ids = unsorted_settings_ids.map(id => `#${id}`).join(",")
|
||||
var children = unsorted_ids == "" ? [] : Array.from(element.querySelectorAll(unsorted_ids));
|
||||
section.keys = []
|
||||
children.forEach(e => {
|
||||
section.keys.push(e.id)
|
||||
|
||||
@ -75,7 +75,6 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
|
||||
|
||||
if (initiallyExpanded === true) {
|
||||
titleEl.className += ' active'
|
||||
modifiersEl.style.display = 'block'
|
||||
}
|
||||
|
||||
modifiers.forEach(modObj => {
|
||||
|
||||
@ -29,11 +29,9 @@ function toggleCollapsible(element) {
|
||||
var handle = element.querySelector(".collapsible-handle");
|
||||
collapsibleHeader.classList.toggle("active")
|
||||
let content = getNextSibling(collapsibleHeader, '.collapsible-content')
|
||||
if (content.style.display === "block") {
|
||||
content.style.display = "none"
|
||||
if (!collapsibleHeader.classList.contains("active")) {
|
||||
handle.innerHTML = '➕' // plus
|
||||
} else {
|
||||
content.style.display = "block"
|
||||
handle.innerHTML = '➖' // minus
|
||||
}
|
||||
|
||||
@ -65,7 +63,7 @@ function createCollapsibles(node) {
|
||||
let handle = document.createElement('span')
|
||||
handle.className = 'collapsible-handle'
|
||||
|
||||
if (c.className.indexOf('active') !== -1) {
|
||||
if (c.classList.contains("active")) {
|
||||
handle.innerHTML = '➖' // minus
|
||||
} else {
|
||||
handle.innerHTML = '➕' // plus
|
||||
|
||||
Loading…
Reference in New Issue
Block a user