2815 lines
115 KiB
HTML
2815 lines
115 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="index.js"></script>
|
|
</head>
|
|
<style>
|
|
sp-textarea,
|
|
textarea {
|
|
width: 100%;
|
|
height: 100px;
|
|
}
|
|
|
|
#taPromptShortcut {
|
|
height: 300px;
|
|
margin: 3px auto;
|
|
}
|
|
|
|
#taPrompt {
|
|
box-sizing: border-box;
|
|
background: rgb(37, 37, 37);
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
padding-left: 3%;
|
|
padding-right: 3%;
|
|
}
|
|
|
|
sp-progressbar {
|
|
margin-bottom: 3px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.prompt-container {
|
|
width: 100%;
|
|
padding-left: 5%;
|
|
padding-right: 5%;
|
|
}
|
|
|
|
#collapsible {
|
|
background-color: #777;
|
|
color: white;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
width: 100%;
|
|
border: none;
|
|
text-align: left;
|
|
outline: none;
|
|
font-size: 15px;
|
|
}
|
|
|
|
#collapsible:hover {
|
|
background-color: #333;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 18px;
|
|
display: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.grid-container {
|
|
display: inline-flex;
|
|
grid-template-columns: auto auto auto;
|
|
}
|
|
|
|
.column-item-image {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0;
|
|
}
|
|
|
|
.viewer-image,
|
|
.history-image,
|
|
.image-search {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0;
|
|
position: relative;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.viewer-image-button {
|
|
display: none;
|
|
/* background-color: #495b79; */
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
/* height: 20px; */
|
|
margin: 0;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.viewer-image-container {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0;
|
|
}
|
|
|
|
.viewer-image-container:hover .viewer-image-button {
|
|
display: flex;
|
|
}
|
|
|
|
.viewer-image-container:hover .thumbnail-image-button {
|
|
display: flex;
|
|
}
|
|
|
|
.viewer-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.thumbnail-image-button {
|
|
display: none;
|
|
/* background-color: #495b79; */
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
/* bottom: 0;
|
|
left: 0; */
|
|
width: 100%;
|
|
/* height: 20px; */
|
|
margin: 0;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.thumbnail-image-button:nth-child(2) {
|
|
border-color: green;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.thumbnail-image-button:nth-child(3) {
|
|
border-color: pink;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.thumbnail-image-button:nth-child(4) {
|
|
border-color: yellow;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.thumbnail-image-button:nth-child(5) {
|
|
border-color: red;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.column-item {
|
|
margin: 0;
|
|
}
|
|
|
|
.button-style {
|
|
background-color: #777;
|
|
color: white;
|
|
cursor: pointer;
|
|
width: 100px;
|
|
border: none;
|
|
text-align: left;
|
|
outline: none;
|
|
font-size: 15px;
|
|
margin: 0;
|
|
}
|
|
|
|
.disableBtn {
|
|
opacity: 0.65;
|
|
cursor: not-allowed !important;
|
|
}
|
|
.btnSquare,
|
|
#btnRefreshModels {
|
|
background-color: #777;
|
|
color: white;
|
|
cursor: pointer;
|
|
border: none;
|
|
text-align: left;
|
|
outline: none;
|
|
font-size: 15px;
|
|
margin: 0;
|
|
}
|
|
#btnRefreshModels:hover {
|
|
background-color: #333;
|
|
}
|
|
#btnRefreshModels:focus {
|
|
background-color: #f0f0f0;
|
|
}
|
|
.btnSquare:not(.btnGenerateClass):hover {
|
|
background-color: #333;
|
|
}
|
|
.btnSquare:focus {
|
|
background-color: #f0f0f0;
|
|
}
|
|
#btnUpdate {
|
|
background-color: #3555ac;
|
|
color: white;
|
|
cursor: pointer;
|
|
|
|
border: none;
|
|
|
|
text-align: left;
|
|
outline: none;
|
|
font-size: 15px;
|
|
margin-left: 3px;
|
|
}
|
|
#btnUpdate:hover {
|
|
background-color: #3f68d6;
|
|
}
|
|
.button-style2 {
|
|
background-color: #777;
|
|
color: white;
|
|
cursor: pointer;
|
|
|
|
border: 1px;
|
|
|
|
text-align: left;
|
|
outline-style: solid;
|
|
outline: solid;
|
|
font-size: 15px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
/* overflow: auto; */
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#progressContainer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#lVersionNumber {
|
|
display: flex;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.flexContainer {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
#historySeedLabelContainer {
|
|
display: flex;
|
|
margin-left: auto;
|
|
}
|
|
|
|
#menu-bar-container {
|
|
width: 100%;
|
|
display: flex;
|
|
/* justify-content: space-between; */
|
|
margin: 3px auto;
|
|
}
|
|
|
|
#sdBtnContainer {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.labelNumber {
|
|
color: aliceblue;
|
|
}
|
|
|
|
#lNameInpaintPdding {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#pProgressBar {
|
|
width: 150px;
|
|
}
|
|
/* tabs */
|
|
.sp-tabs {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-bottom: 2px solid #3e3e3e;
|
|
}
|
|
|
|
.sp-tab {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.sp-tab sp-label {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
.sp-tab:hover sp-label {
|
|
color: white;
|
|
}
|
|
|
|
.sp-tab.selected {
|
|
border-bottom: 2px solid white;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.sp-tab.selected sp-label {
|
|
color: white;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light), (prefers-color-scheme: lightest) {
|
|
.sp-tabs {
|
|
border-bottom: 2px solid #b8b8b8;
|
|
}
|
|
|
|
.sp-tab sp-label {
|
|
color: rgba(0, 0, 0, 0.66);
|
|
}
|
|
|
|
.sp-tab:hover sp-label {
|
|
color: black;
|
|
}
|
|
|
|
.sp-tab.selected {
|
|
border-bottom: 2px solid black;
|
|
}
|
|
|
|
.sp-tab.selected sp-label {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
.sp-tab-page {
|
|
visibility: hidden;
|
|
/* display: none; */
|
|
flex: 1 1 auto;
|
|
/* overflow: scroll; */
|
|
overflow-y: scroll;
|
|
padding: 12px 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sp-tab-page.visible-hack {
|
|
display: flex;
|
|
/* overflow: hidden; */
|
|
/* overflow-y: scroll; */
|
|
/* position: fixed; */
|
|
top: 25px;
|
|
visibility: visible;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
/* margin: 0px; */
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.sp-tab-page.visible {
|
|
display: flex;
|
|
}
|
|
|
|
.sp-tab-page > * {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.viewerImgSelected {
|
|
border: 3px solid #6db579;
|
|
}
|
|
|
|
.viewerImgActive {
|
|
border: 3px solid #fb9700;
|
|
}
|
|
|
|
.generate-more {
|
|
background-color: #6db579;
|
|
}
|
|
|
|
.generate {
|
|
background-color: #ff595e;
|
|
}
|
|
|
|
.connected {
|
|
color: #6db579;
|
|
}
|
|
|
|
.disconnected {
|
|
color: #ff595e;
|
|
}
|
|
|
|
#slWidth {
|
|
width: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#slHeight {
|
|
width: 50%;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#hrWidth {
|
|
width: 33%;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#hrHeight {
|
|
width: 33%;
|
|
margin-left: 10px;
|
|
}
|
|
#hrScaleSlider,
|
|
#hrDenoisingStrength {
|
|
width: 50%;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#tiNumberOfSteps {
|
|
width: 50%;
|
|
}
|
|
|
|
#tiNumberOfSteps {
|
|
width: auto;
|
|
}
|
|
|
|
.rbMaskContent {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
#rbSelectionModeLabel,
|
|
.rbSelectionMode {
|
|
font-size: 1em;
|
|
margin-right: 12px;
|
|
}
|
|
#BackendTypeLabel,
|
|
.rbBackendType {
|
|
font-size: 1.05em;
|
|
margin-right: 12px;
|
|
}
|
|
.checkbox {
|
|
font-size: 1em;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#slCfgScale {
|
|
width: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
#slImageCfgScale {
|
|
width: 100%;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#slDenoisingStrength {
|
|
width: 50%;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#slInpaintingMaskWeight {
|
|
width: 100%;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.disabled-btn {
|
|
opacity: 0.65;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.buttonImage {
|
|
padding: 8px 8px 8px 32px;
|
|
font-family: Arial, Verdana;
|
|
background: #f0f0f0
|
|
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABfUlEQVQ4y42TP2tUQRTFf3PnPYiLIAiKiKhIsLbxS9hZaykWNmKjgqT0A6SxslRIFRsRv0QwdZB1YyGipImbzWbfnHst3sZdZF92Bw7D/LmH37nDpL1NAyAlHgDXWW18j+A9QBXTnQhu3H704TXS2aU5s/f2/qvTZeXx78goDdE0Z9anusYDmxn4zMAlYglBMsN9zkAzgxwrGGCGnLzIwELCVZbUG+oicDWoLOtBhZwcAQFUZd6gCC/dBPW5Hr+/7VPaCHci2DU5TJVDBe+Q5cyvwT4ucfdleS7noQdURfMEDd4Rwc04OvzDtfWbjCYTitpG/hehoI4IZhmpjTgcj09jUGmeQAVXB4EypbRxjk5O0JTAvgygOBSnap9xsUJC0/nx4BLFW3p78c7Z6SeOJ2ktvL2wUC7G4zHh4uBgxPEkre30Ewb0NrZ0+XDEeUtGXdULZckYDodYMp59vLD9eZftjS31EnARuPr0Xn6yfoVbq/zlrz/pb37SG+DHXyrMGdFXikHpAAAAAElFTkSuQmCC);
|
|
background-position: 8px 8px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.reverse_image_serach {
|
|
font-family: Arial, Verdana;
|
|
background-image: url(./icon/image-search.svg);
|
|
background-color: #777;
|
|
background-size: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.search-button {
|
|
font-family: Arial, Verdana;
|
|
background-image: url(./icon/search.svg);
|
|
background-color: #777;
|
|
background-size: 20px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-repeat: no-repeat;
|
|
|
|
background-position: center;
|
|
}
|
|
.layerToSelection {
|
|
font-family: Arial, Verdana;
|
|
background-image: url(./icon/layer_to_selection.svg);
|
|
background-color: #777;
|
|
background-size: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.linkSlider {
|
|
margin-top: 25px;
|
|
font-family: Arial, Verdana;
|
|
/* background-image: url(./icon/chain.svg); */
|
|
/* background-color: #777; */
|
|
background-color: transparent;
|
|
|
|
background-size: 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.whiteChain {
|
|
background-image: url(./icon/chain_white.svg);
|
|
}
|
|
.blackChain {
|
|
background-image: url(./icon/chain_black.svg);
|
|
}
|
|
.acceptAllImgBtn {
|
|
font-family: Arial, Verdana;
|
|
background-image: url(./icon/accept_all.svg);
|
|
background-color: #777;
|
|
background-size: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.acceptSelectedImgBtn {
|
|
font-family: Arial, Verdana;
|
|
background-image: url(./icon/accept_selected.svg);
|
|
background-color: #777;
|
|
background-size: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.discardAllImgBtn {
|
|
font-family: Arial, Verdana;
|
|
background-image: url(./icon/discard_all.svg);
|
|
background-color: #777;
|
|
background-size: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.discardSelectedImgBtn {
|
|
font-family: Arial, Verdana;
|
|
background-image: url(./icon/discard_selected.svg);
|
|
background-color: #777;
|
|
background-size: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.resetButton {
|
|
font-family: Arial, Verdana;
|
|
background-image: url(./icon/reset_settings2.png);
|
|
background-color: #777;
|
|
background-size: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.snapshotButton {
|
|
font-family: Arial, Verdana;
|
|
background-image: url(./icon/camera_icon.svg);
|
|
background-color: #777;
|
|
background-size: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.interrogateButton {
|
|
font-family: Arial, Verdana;
|
|
background-image: url(./icon/writing-icon.svg);
|
|
/* background-color: transparent; */
|
|
background-size: 25px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-position-x: 4px;
|
|
}
|
|
.svg-buttons-container *:not(:last-child) {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.divBtn {
|
|
display: block;
|
|
padding: 10px;
|
|
border: 1px solid black;
|
|
background: red;
|
|
font-size: 16px;
|
|
color: black;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
padding: 15px;
|
|
margin: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.line-divider {
|
|
background-color: #3e3e3e;
|
|
}
|
|
.res-increase {
|
|
color: #6db579;
|
|
}
|
|
.res-decrease {
|
|
color: #ff595e;
|
|
}
|
|
.controlNetImaageContainer {
|
|
margin-right: 3px;
|
|
}
|
|
#divInitImageViewerContainer {
|
|
display: flex;
|
|
}
|
|
.rbSubTab {
|
|
font-size: 0.9em;
|
|
}
|
|
.rbSubTab:last-child {
|
|
margin-right: 0;
|
|
}
|
|
#lexicaPrompt {
|
|
position: static;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
<style>
|
|
.custom-menu {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.custom-menu input[type='radio'] {
|
|
display: none;
|
|
}
|
|
.custom-menu label {
|
|
display: block;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
li input[type='radio']:checked + label {
|
|
border-bottom: 2px solid white;
|
|
}
|
|
|
|
li .sub-menu-tab-class + label {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
li:hover .sp-menu-tab-class:hover + label {
|
|
color: white;
|
|
}
|
|
|
|
/* li .sp-tab.selected {
|
|
border-bottom: 2px solid white;
|
|
margin-bottom: -2px;
|
|
} */
|
|
|
|
/* .sp-tab.selected sp-label {
|
|
color: white;
|
|
} */
|
|
</style>
|
|
|
|
<body>
|
|
<!-- <sp-textarea id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-textarea> -->
|
|
<!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
|
|
|
|
<div class="container wrapper">
|
|
<div class="sp-tabs">
|
|
<div
|
|
class="sp-tab selected"
|
|
id="sp-stable-diffusion-ui-tab"
|
|
title="Stable Diffusion UI"
|
|
>
|
|
<sp-label>Stable Diffusion</sp-label>
|
|
</div>
|
|
<div class="sp-tab" id="sp-viewer-tab">
|
|
<sp-label>Viewer</sp-label>
|
|
</div>
|
|
<div class="sp-tab" id="sp-control_net-tab">
|
|
<sp-label>ControlNet</sp-label>
|
|
</div>
|
|
<div class="sp-tab" id="sp-history-tab" style="display: none">
|
|
<sp-label>History</sp-label>
|
|
</div>
|
|
<div class="sp-tab" id="sp-lexica-tab" style="display: none">
|
|
<sp-label>Lexica</sp-label>
|
|
</div>
|
|
<div
|
|
class="sp-tab"
|
|
id="sp-image_search-tab"
|
|
style="display: none"
|
|
>
|
|
<sp-label>Image Search</sp-label>
|
|
</div>
|
|
|
|
<div
|
|
class="sp-tab"
|
|
id="sp-prompts-library-tab"
|
|
style="display: none"
|
|
>
|
|
<sp-label>Prompts library</sp-label>
|
|
</div>
|
|
<div class="sp-tab" id="sp-horde-tab">
|
|
<sp-label>Horde</sp-label>
|
|
</div>
|
|
<div class="sp-tab" id="sp-extras-tab">
|
|
<sp-label>Extras</sp-label>
|
|
</div>
|
|
<div class="sp-tab" id="sp-presets-tab" style="display: none">
|
|
<sp-label>Presets</sp-label>
|
|
</div>
|
|
<div class="sp-tab" id="sp-settings-tab">
|
|
<sp-label>Settings</sp-label>
|
|
</div>
|
|
<div>
|
|
<span
|
|
class="disconnected"
|
|
id="automaticStatus"
|
|
title="'A' for Automatic1111 server (webui-user.bat), Green is connected. Red Means there is a problem with your Automatic1111. Run 'webui-user.bat' and hit 'Refresh' button "
|
|
>A</span
|
|
>
|
|
<span
|
|
class="disconnected"
|
|
id="proxyServerStatus"
|
|
title="'P' for proxy server (start_server.bat), Green is connected. Red means you need to run 'start_server.bat' or hit Refresh button"
|
|
>P</span
|
|
>
|
|
</div>
|
|
<sp-label slot="label" id="lVersionNumber">v0.0.0</sp-label>
|
|
</div>
|
|
|
|
<div class="sp-tab-page" id="sp-viewer-tab-page">
|
|
<div class="subTabOptionsContainer">
|
|
<div data-container-class="subTabOptionsContainer">
|
|
<ul id="viewer-sub-menu" class="custom-menu">
|
|
<!-- <li>
|
|
<input
|
|
type="radio"
|
|
id="option1"
|
|
name="options"
|
|
checked
|
|
class="sub-menu-tab-class"
|
|
/>
|
|
<label for="option1">Option 1</label>
|
|
</li>
|
|
<li>
|
|
<input
|
|
type="radio"
|
|
id="option2"
|
|
name="options"
|
|
class="sub-menu-tab-class"
|
|
/>
|
|
<label for="option2">Option 2</label>
|
|
</li>
|
|
<li>
|
|
<input
|
|
type="radio"
|
|
id="option3"
|
|
name="options"
|
|
/>
|
|
<label for="option3">Option 3</label>
|
|
</li> -->
|
|
</ul>
|
|
<sp-divider
|
|
class="line-divider"
|
|
size="small"
|
|
></sp-divider>
|
|
</div>
|
|
<sp-radio-group
|
|
id="rgSubTab"
|
|
class="rbMaskContent"
|
|
data-container-class="subTabOptionsContainer"
|
|
style="display: none"
|
|
>
|
|
<sp-radio
|
|
title=""
|
|
class="rbSubTab"
|
|
checked
|
|
value="viewer"
|
|
data-tab-name="sp-viewer-tab"
|
|
>Viewer</sp-radio
|
|
>
|
|
<sp-radio
|
|
title=""
|
|
class="rbSubTab"
|
|
id="rbHistoryTab"
|
|
value="history"
|
|
data-tab-name="sp-history-tab"
|
|
>History</sp-radio
|
|
>
|
|
<sp-radio
|
|
title=""
|
|
class="rbSubTab"
|
|
id="rbImageSearch"
|
|
data-tab-name="sp-image_search-tab"
|
|
value="image_search"
|
|
>Image Search</sp-radio
|
|
>
|
|
<sp-radio
|
|
title=""
|
|
class="rbSubTab"
|
|
id="rbPromptsLibrary"
|
|
data-tab-name="sp-prompts-library-tab"
|
|
value="prompts-library"
|
|
>Prompts Library</sp-radio
|
|
>
|
|
<sp-radio
|
|
title=""
|
|
class="rbSubTab"
|
|
id="rbLexica"
|
|
data-tab-name="sp-lexica-tab"
|
|
value="lexica"
|
|
>Lexica</sp-radio
|
|
>
|
|
</sp-radio-group>
|
|
</div>
|
|
<div id="viewerSubTab">
|
|
<div class="flexContainer">
|
|
<sp-label slot="label"
|
|
>View your generated images on the canvas</sp-label
|
|
>
|
|
</div>
|
|
<div></div>
|
|
<div>
|
|
<button class="btnSquare" id="btnSetMaskViewer">
|
|
Set Mask
|
|
</button>
|
|
<button class="btnSquare" id="btnSetInitImageViewer">
|
|
Set Init Image
|
|
</button>
|
|
<button
|
|
class="btnSquare btnGenerateClass"
|
|
id="btnGenerate"
|
|
>
|
|
Generate txt2img
|
|
</button>
|
|
<button
|
|
class="btnSquare btnInterruptClass"
|
|
id="btnInterruptViewer"
|
|
style="display: none"
|
|
>
|
|
Interrupt
|
|
</button>
|
|
<button class="btnSquare" id="btnSelectionArea">
|
|
Selection Area
|
|
</button>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding-top: 3px;
|
|
"
|
|
>
|
|
<!-- <button class="btnSquare acceptClass acceptAllImgBtn" style="display:none;">Accept All</button>
|
|
<button class="btnSquare discardClass discardAllImgBtn" style="display:none;">Discard All</button>
|
|
<button class="btnSquare acceptSelectedClass acceptSelectedImgBtn" style="display:none;">Accept Selected</button>
|
|
<button class="btnSquare discardSelectedClass discardSelectedImgBtn" style="display:none;">Discard Selected</button> -->
|
|
<button
|
|
title="Keep all generated images on the canvas"
|
|
class="btnSquare acceptClass acceptAllImgBtn"
|
|
style="display: none; margin-right: 3px"
|
|
></button>
|
|
<button
|
|
title="Delete all generated images from the canvas"
|
|
class="btnSquare discardClass discardAllImgBtn"
|
|
style="display: none; margin-right: 3px"
|
|
></button>
|
|
<button
|
|
title="Keep only the highlighted images"
|
|
class="btnSquare acceptSelectedClass acceptSelectedImgBtn"
|
|
style="display: none; margin-right: 3px"
|
|
></button>
|
|
<button
|
|
title="Delete only the highlighted images"
|
|
class="btnSquare discardSelectedClass discardSelectedImgBtn"
|
|
style="display: none; margin-right: 3px"
|
|
></button>
|
|
</div>
|
|
|
|
<div style="display: inline-flex">
|
|
<div id="batchNumberViewerTabContainer">
|
|
<!-- we will append here batch number field here -->
|
|
<!-- <sp-label>Images:</sp-label> -->
|
|
<!-- <sp-textfield id="tiNumberOfImages" type="number" placeholder="1"
|
|
value="1"></sp-textfield> -->
|
|
</div>
|
|
<sp-progressbar
|
|
class="pProgressBars"
|
|
id="pViewerProgressBar"
|
|
max="100"
|
|
value="0"
|
|
style="margin-left: 10px; width: 100px"
|
|
>
|
|
<sp-label slot="label" class="lProgressLabel"
|
|
>Progress...</sp-label
|
|
>
|
|
</sp-progressbar>
|
|
<input
|
|
title="Toggle the visibility of the Preview Image on the canvas"
|
|
type="checkbox"
|
|
name="optionCheckbox"
|
|
class="chLiveProgressImageClass"
|
|
/>
|
|
</div>
|
|
|
|
<!-- <button class="btnSquare" id="btnLoadViewer">Load</button> -->
|
|
</div>
|
|
<div style="display: flex">
|
|
<sp-slider
|
|
show-value="true"
|
|
id="slThumbnailSize"
|
|
min="1"
|
|
max="10"
|
|
value="5"
|
|
style="width: 100%"
|
|
>
|
|
<sp-label slot="label">Thumbnail Size:</sp-label>
|
|
</sp-slider>
|
|
<sp-checkbox
|
|
class="checkbox"
|
|
id="chSquareThumbnail"
|
|
style="margin-left: 20px"
|
|
>Square 1:1</sp-checkbox
|
|
>
|
|
</div>
|
|
<div class="" id="divProgressImageViewerContainer">
|
|
<!-- <img
|
|
class=""
|
|
id="progressImage"
|
|
src="https://source.unsplash.com/random"
|
|
style="width: 100px; height: 100px; max-width: 100%"
|
|
/> -->
|
|
</div>
|
|
<!-- <hr class="line-divider" /> -->
|
|
<sp-divider></sp-divider>
|
|
|
|
<div class="" id="divInitImageViewerContainer">
|
|
<!-- <img class="viewer-image" id="viewer_init_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
|
|
</div>
|
|
<!-- <hr class="line-divider" /> -->
|
|
<sp-divider></sp-divider>
|
|
<div class="" id="divInitMaskViewerContainer">
|
|
<!-- <img class="viewer-image" id="viewer_mask_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
|
|
</div>
|
|
<!-- <hr class="line-divider" /> -->
|
|
<sp-divider></sp-divider>
|
|
<div class="viewer-container" id="divViewerImagesContainer">
|
|
<!-- <img class="viewer-image" id="viewer_output_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' /> -->
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|
|
</div>
|
|
<div class="sp-tab-page" id="sp-control_net-tab-page">
|
|
<!-- control net tab page -->
|
|
<sp-picker
|
|
title="auto fill the ControlNet with smart settings, to speed up your working process."
|
|
size="m"
|
|
label="ControlNet Preset"
|
|
>
|
|
<sp-menu id="mControlNetPresetMenu" slot="options">
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
<div></div>
|
|
<div
|
|
id="control_net_image_container"
|
|
class="imgContainer controlNetImaageContainer"
|
|
>
|
|
<!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->
|
|
<!--
|
|
<div>
|
|
<img
|
|
id="all_control_net_image"
|
|
class="column-item-image"
|
|
src="https://source.unsplash.com/random"
|
|
width="300px"
|
|
height="100px"
|
|
/>
|
|
</div> -->
|
|
<div class="imgButton">
|
|
<button
|
|
class="column-item button-style btnSquare"
|
|
id="bSetAllControlImage"
|
|
>
|
|
Set All CtrlNet Images
|
|
</button>
|
|
</div>
|
|
<sp-checkbox id="chDisableControlNetTab"
|
|
>Disable ControlNet Tab</sp-checkbox
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
id="controlnet_settings_template"
|
|
data-index="0"
|
|
style="display: none"
|
|
>
|
|
<div class="flexContainer">
|
|
<sp-label slot="label " class="controlnet_unit_label_"
|
|
>Control Net Settings Slot 0</sp-label
|
|
>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div
|
|
id="control_net_image_container_0"
|
|
class="imgContainer controlNetImaageContainer"
|
|
>
|
|
<!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->
|
|
|
|
<div>
|
|
<img
|
|
id="control_net_image_0"
|
|
class="column-item-image control_net_image_"
|
|
src="https://source.unsplash.com/random"
|
|
width="300px"
|
|
height="100px"
|
|
/>
|
|
</div>
|
|
<div class="imgButton">
|
|
<button
|
|
class="column-item button-style btnSquare bSetControlImage_"
|
|
id="bSetControlImage_0"
|
|
>
|
|
Set CtrlNet Img
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="control_net_mask_container_0"
|
|
class="imgContainer controlNetImaageContainer"
|
|
>
|
|
<!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->
|
|
|
|
<div>
|
|
<img
|
|
id="control_net_mask_0"
|
|
class="column-item-image control_net_mask_"
|
|
src="https://source.unsplash.com/random"
|
|
width="300px"
|
|
height="100px"
|
|
/>
|
|
</div>
|
|
<div class="imgButton btnClass">
|
|
<button
|
|
class="column-item button-style btnSquare bControlMask_"
|
|
id="bControlMask_0"
|
|
>
|
|
Preview Annotator
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<sp-checkbox
|
|
id="chEnableControlNet_0"
|
|
class="chEnableControlNet_"
|
|
>Enable</sp-checkbox
|
|
>
|
|
<sp-checkbox checked id="chlowVram_0" class="chlowVram_"
|
|
>Low VRAM</sp-checkbox
|
|
>
|
|
<sp-checkbox id="chGuessMode_0" class="chGuessMode_"
|
|
>Guess Mode</sp-checkbox
|
|
>
|
|
|
|
<div>
|
|
<div>
|
|
<sp-slider
|
|
show-value="false"
|
|
id="slControlNetWeight_0"
|
|
class="slControlNetWeight_"
|
|
min="0"
|
|
max="100"
|
|
value="50"
|
|
title="2 will keep the composition; 0 will allow composition to change"
|
|
>
|
|
<sp-label slot="label">Weight:</sp-label>
|
|
<sp-label
|
|
slot="label"
|
|
id="lControlNetWeight_0"
|
|
class="lControlNetWeight_"
|
|
>1.0</sp-label
|
|
>
|
|
</sp-slider>
|
|
<sp-slider
|
|
show-value="false"
|
|
id="slControlNetGuidanceStrengthStart_0"
|
|
class="slControlNetGuidanceStrengthStart_"
|
|
min="0"
|
|
max="100"
|
|
value="0"
|
|
>
|
|
<sp-label slot="label"
|
|
>Guidance strength start:</sp-label
|
|
>
|
|
<sp-label
|
|
slot="label"
|
|
id="lControlNetGuidanceStrengthStart_0"
|
|
class="lControlNetGuidanceStrengthStart_"
|
|
>0.0</sp-label
|
|
>
|
|
</sp-slider>
|
|
<sp-slider
|
|
show-value="false"
|
|
id="slControlNetGuidanceStrengthEnd_0"
|
|
class="slControlNetGuidanceStrengthEnd_"
|
|
min="0"
|
|
max="100"
|
|
value="100"
|
|
>
|
|
<sp-label slot="label"
|
|
>Guidance strength end:</sp-label
|
|
>
|
|
<sp-label
|
|
slot="label"
|
|
id="lControlNetGuidanceStrengthEnd_0"
|
|
class="lControlNetGuidanceStrengthEnd_"
|
|
>1.0</sp-label
|
|
>
|
|
</sp-slider>
|
|
<sp-slider
|
|
show-value="true"
|
|
id="slControlNetProcessorRes_0"
|
|
class="slControlNetProcessorRes_"
|
|
min="64"
|
|
max="2048"
|
|
value="512"
|
|
>
|
|
<sp-label
|
|
slot="label"
|
|
class="labelControlNetProcessorRes_"
|
|
>Annotator resolution</sp-label
|
|
>
|
|
<!-- <sp-label
|
|
slot="label"
|
|
id="lControlNetProcessorRes_0"
|
|
class="lControlNetProcessorRes_"
|
|
>1.0</sp-label
|
|
> -->
|
|
</sp-slider>
|
|
<sp-slider
|
|
show-value="false"
|
|
class="slControlNetThreshold_A_"
|
|
min="0"
|
|
max="100"
|
|
value="50"
|
|
data-sd_min="64"
|
|
data-sd_max="1024"
|
|
>
|
|
<sp-label
|
|
slot="label"
|
|
class="labelControlNetThreshold_A_"
|
|
>Threshold A:
|
|
</sp-label>
|
|
<sp-label
|
|
slot="label"
|
|
class="lControlNetThreshold_A_"
|
|
>0.0</sp-label
|
|
>
|
|
</sp-slider>
|
|
<sp-slider
|
|
show-value="false"
|
|
class="slControlNetThreshold_B_"
|
|
min="0"
|
|
max="100"
|
|
value="50"
|
|
data-sd_min="64"
|
|
data-sd_max="1024"
|
|
>
|
|
<sp-label
|
|
slot="label"
|
|
class="labelControlNetThreshold_B_"
|
|
>Threshold B:
|
|
</sp-label>
|
|
<sp-label
|
|
slot="label"
|
|
class="lControlNetThreshold_B_"
|
|
>0.0</sp-label
|
|
>
|
|
</sp-slider>
|
|
</div>
|
|
</div>
|
|
<div id="menu-bar-control_net_0" style="display: flex">
|
|
<sp-picker size="m" label="Select Module">
|
|
<sp-menu
|
|
id="mModulesMenuControlNet_0"
|
|
class="mModulesMenuControlNet_"
|
|
slot="options"
|
|
>
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
<sp-picker size="m" label="Selection type">
|
|
<sp-menu
|
|
id="mModelsMenuControlNet_0"
|
|
class="mModelsMenuControlNet_"
|
|
slot="options"
|
|
>
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
|
|
<!-- <button class="btnSquare" id="btnRefreshModelsHorde">
|
|
Refresh Models
|
|
</button> -->
|
|
</div>
|
|
<div></div>
|
|
<sp-divider class="line-divider" size="large"></sp-divider>
|
|
<sp-divider class="line-divider" size="large"></sp-divider>
|
|
<div></div>
|
|
|
|
<div>
|
|
<sp-divider
|
|
class="line-divider"
|
|
size="large"
|
|
></sp-divider>
|
|
</div>
|
|
</div>
|
|
<div id="controlnet_parent_container"></div>
|
|
</div>
|
|
<div class="sp-tab-page" id="sp-history-tab-page">
|
|
<div class="subTabOptionsContainer"></div>
|
|
|
|
<div class="flexContainer">
|
|
<sp-label slot="label"
|
|
>history of all the images you generated</sp-label
|
|
>
|
|
<div id="historySeedLabelContainer">
|
|
<sp-label slot="label">Seed:</sp-label
|
|
><sp-label slot="label" id="historySeedLabel"
|
|
>00000000000</sp-label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
<div>
|
|
<button class="btnSquare" id="btnLoadHistory">
|
|
Load Previous Generations
|
|
</button>
|
|
<button class="btnSquare" id="btnClearHistoryCache">
|
|
Clear Results
|
|
</button>
|
|
</div>
|
|
<div class="viewer-container" id="divHistoryImagesContainer">
|
|
<img
|
|
class="history-image"
|
|
id="history_image_test"
|
|
data-metadata_json_string='{"a":1}'
|
|
src="https://source.unsplash.com/random"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="sp-tab-page" id="sp-lexica-tab-page">
|
|
<div class="subTabOptionsContainer"></div>
|
|
<!-- <sp-textarea id="lexicaPrompt"> </sp-textarea> -->
|
|
<div class="flexContainer">
|
|
<sp-label slot="label"
|
|
>Explore Lexica for prompts and inspiration</sp-label
|
|
>
|
|
</div>
|
|
<div></div>
|
|
<div>
|
|
<sp-textfield
|
|
id="LexicaSearchField"
|
|
type="text"
|
|
placeholder="cute cats"
|
|
value=""
|
|
><sp-label slot="label">Search:</sp-label></sp-textfield
|
|
>
|
|
|
|
<button
|
|
class="btnSquare search-button"
|
|
id="btnSearchLexica"
|
|
title="user prompt(text) to Search Lexica"
|
|
></button>
|
|
|
|
<button
|
|
class="btnSquare reverse_image_serach"
|
|
id="btnReverseSearchLexica"
|
|
title="User the selected area (image) on canvas to Search Lexica"
|
|
></button>
|
|
</div>
|
|
<sp-textarea id="lexicaPrompt" style="margin-bottom: 3px">
|
|
</sp-textarea>
|
|
<div class="viewer-container" id="divLexicaImagesContainer">
|
|
<img
|
|
class="history-image"
|
|
id="history_image_test"
|
|
data-metadata_json_string='{"a":1}'
|
|
src="https://source.unsplash.com/random"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sp-tab-page" id="sp-image_search-tab-page">
|
|
<div class="subTabOptionsContainer"></div>
|
|
|
|
<div class="flexContainer">
|
|
<sp-label slot="label">Image Search Engine</sp-label>
|
|
</div>
|
|
<div></div>
|
|
<div>
|
|
<sp-textfield
|
|
id="imageSearchField"
|
|
type="text"
|
|
placeholder="cute cats"
|
|
value=""
|
|
><sp-label slot="label">Search:</sp-label></sp-textfield
|
|
>
|
|
|
|
<button class="btnSquare" id="btnImageSearch">
|
|
Image Search
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="viewer-container"
|
|
id="divImageSearchImagesContainer"
|
|
>
|
|
<img
|
|
class="history-image"
|
|
id="search_image_placeholder"
|
|
data-metadata_json_string='{"a":1}'
|
|
src="https://source.unsplash.com/random"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="sp-tab-page" id="sp-prompts-library-tab-page">
|
|
<div class="subTabOptionsContainer"></div>
|
|
<sp-label slot="label"
|
|
>Prompt Shortcut: a single word that represent a
|
|
prompt</sp-label
|
|
>
|
|
<div class="">
|
|
<sp-label slot="label"
|
|
>Key for new prompt shortcut</sp-label
|
|
>
|
|
<sp-textarea
|
|
id="KeyPromptShortcut"
|
|
placeholder="to be replaced"
|
|
value=""
|
|
></sp-textarea>
|
|
</div>
|
|
<div class="">
|
|
<sp-label slot="label"
|
|
>Value for new prompt shortcut</sp-label
|
|
>
|
|
<sp-textarea
|
|
id="ValuePromptShortcut"
|
|
placeholder="to be replaced with"
|
|
value=""
|
|
></sp-textarea>
|
|
<button class="btnSquare" id="btnUpdatePromptShortcut">
|
|
Add to Prompt Shortcut
|
|
</button>
|
|
</div>
|
|
<div class="">
|
|
<sp-textarea
|
|
id="taPromptShortcut"
|
|
placeholder="prompt shortcut"
|
|
value=""
|
|
></sp-textarea>
|
|
</div>
|
|
<div>
|
|
<sp-picker size="m" label="Selection a prompt">
|
|
<sp-menu id="mPromptShortcutMenu" slot="options">
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
<button class="btnSquare" id="btnRefreshPromptShortcutMenu">
|
|
Refresh Menu
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button class="btnSquare" id="btnLoadPromptShortcut">
|
|
Load
|
|
</button>
|
|
<button class="btnSquare" id="btnSavePromptShortcut">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="sp-tab-page" id="sp-horde-tab-page">
|
|
<!-- Horde tab page -->
|
|
<div></div>
|
|
<div>
|
|
<sp-label>Horde Key:</sp-label
|
|
><sp-textfield
|
|
id="tiHordeApiKey"
|
|
type="password"
|
|
placeholder="0000000000"
|
|
value=""
|
|
></sp-textfield>
|
|
<button class="btnSquare" id="btnSaveHordeSettings">
|
|
Save
|
|
</button>
|
|
</div>
|
|
|
|
<sp-radio-group>
|
|
<sp-label id="BackendTypeLabel" slot="label"
|
|
>Select Backend:</sp-label
|
|
>
|
|
<!-- <sp-label slot="label">Select a Mode:</sp-label> -->
|
|
<sp-radio
|
|
title="use the horde with the plugin no need to install anything else"
|
|
class="rbBackendType"
|
|
value="horde_native"
|
|
>Native Horde</sp-radio
|
|
>
|
|
<sp-radio
|
|
title="Use the horde extension from Automatic1111 Extension tab"
|
|
class="rbBackendType"
|
|
value="auto1111_horde_extension"
|
|
>Auto1111 Horde Extension</sp-radio
|
|
>
|
|
<sp-radio
|
|
title="use Auto1111 disable the Horde"
|
|
class="rbBackendType"
|
|
value="auto1111"
|
|
checked
|
|
>Auto1111 Only</sp-radio
|
|
>
|
|
<!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
|
|
</sp-radio-group>
|
|
|
|
<div id="menu-bar-container_horde" style="display: flex">
|
|
<sp-picker size="m" label="Selection type">
|
|
<sp-menu id="mModelsMenuHorde" slot="options">
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
|
|
<button class="btnSquare" id="btnRefreshModelsHorde">
|
|
Refresh Models
|
|
</button>
|
|
<!-- <sp-label slot="label"
|
|
id="lVersionNumber">v0.0.0</sp-label> -->
|
|
</div>
|
|
<div>
|
|
<sp-checkbox id="chUseNSFW">NSFW</sp-checkbox>
|
|
<sp-checkbox id="chUseSharedLaion"
|
|
>Share with LION</sp-checkbox
|
|
>
|
|
<sp-slider
|
|
style="display: none"
|
|
show-value="true"
|
|
id="slSeedVariation"
|
|
min="1"
|
|
max="30"
|
|
value="1"
|
|
>
|
|
<sp-label slot="label">Seed variation:</sp-label>
|
|
</sp-slider>
|
|
</div>
|
|
</div>
|
|
<div class="sp-tab-page" id="sp-extras-tab-page">
|
|
<div style="padding-bottom: 5px">
|
|
<!-- extras tab page -->
|
|
<sp-slider
|
|
style="display: block"
|
|
show-value="false"
|
|
id="slUpscaleSize"
|
|
min="10"
|
|
max="80"
|
|
value="20"
|
|
title="Resize scale of current selection size"
|
|
>
|
|
<sp-label slot="label">Resize</sp-label>
|
|
<sp-label
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="lUpscaleSize"
|
|
>2</sp-label
|
|
>
|
|
</sp-slider>
|
|
</div>
|
|
<div
|
|
style="
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
padding-bottom: 5px;
|
|
"
|
|
>
|
|
<button
|
|
class="btnSquare btnGenerateClass"
|
|
id="btnGenerateUpscale"
|
|
>
|
|
Generate upscale
|
|
</button>
|
|
<button
|
|
class="btnSquare btnInterruptClass"
|
|
id="btnInterruptUpscale"
|
|
style="display: none"
|
|
>
|
|
Interrupt
|
|
</button>
|
|
<div style="padding-left: 5px">
|
|
<button
|
|
class="btnSquare acceptClass acceptAllImgBtn"
|
|
style="display: none; margin-right: 3px"
|
|
></button>
|
|
<button
|
|
class="btnSquare discardClass discardAllImgBtn"
|
|
style="display: none; margin-right: 3px"
|
|
></button>
|
|
<button
|
|
class="btnSquare snapshotButton"
|
|
id="btnSnapshotUpscale"
|
|
style="margin-right: 3px"
|
|
title="create a snapshot of what you see on the canvas and place on a new layer"
|
|
></button>
|
|
<button
|
|
class="btnSquare resetButton"
|
|
id="btnResetSettingsUpscale"
|
|
title="reset the ui settings to their default values"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="progressContainerUpscale"
|
|
class=""
|
|
style="padding-bottom: 5px"
|
|
>
|
|
<sp-label slot="label" class="lProgressLabel"
|
|
>No work in progress</sp-label
|
|
>
|
|
</div>
|
|
<div style="padding-bottom: 5px">
|
|
<sp-label style="width: 60px; display: inline-block"
|
|
>Upscaler 1:
|
|
</sp-label>
|
|
<sp-picker size="m" label="Upscaler Options">
|
|
<sp-menu
|
|
id="hrModelsMenuUpscale1"
|
|
class="hrExtrasUpscaleModelsMenuClass"
|
|
slot="options"
|
|
>
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
<div></div>
|
|
<sp-label style="width: 60px; display: inline-block"
|
|
>Upscaler 2:
|
|
</sp-label>
|
|
<sp-picker size="m" label="Upscaler Options">
|
|
<sp-menu
|
|
id="hrModelsMenuUpscale2"
|
|
class="hrExtrasUpscaleModelsMenuClass"
|
|
slot="options"
|
|
>
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
</div>
|
|
<div style="padding-bottom: 5px">
|
|
<!-- extras tab page -->
|
|
<sp-slider
|
|
style="display: block"
|
|
show-value="false"
|
|
id="slUpscaler2Visibility"
|
|
min="0"
|
|
max="10"
|
|
value="0"
|
|
>
|
|
<sp-label
|
|
style="width: 110px; display: inline-block"
|
|
slot="label"
|
|
>Upscaler 2 visibility:
|
|
</sp-label>
|
|
<sp-label
|
|
style="display: inline-block"
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="lUpscaler2Visibility"
|
|
>0</sp-label
|
|
>
|
|
</sp-slider>
|
|
</div>
|
|
<div style="padding-bottom: 5px">
|
|
<!-- extras tab page -->
|
|
<sp-slider
|
|
style="display: block"
|
|
show-value="false"
|
|
id="slGFPGANVisibility"
|
|
min="0"
|
|
max="10"
|
|
value="0"
|
|
>
|
|
<sp-label
|
|
style="width: 110px; display: inline-block"
|
|
slot="label"
|
|
>GFPGAN visibility:
|
|
</sp-label>
|
|
<sp-label
|
|
style="display: inline-block"
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="lGFPGANVisibility"
|
|
>0</sp-label
|
|
>
|
|
</sp-slider>
|
|
</div>
|
|
<div style="padding-bottom: 5px">
|
|
<!-- extras tab page -->
|
|
<sp-slider
|
|
style="display: block"
|
|
show-value="false"
|
|
id="slCodeFormerVisibility"
|
|
min="0"
|
|
max="10"
|
|
value="0"
|
|
>
|
|
<sp-label
|
|
style="width: 110px; display: inline-block"
|
|
slot="label"
|
|
>CodeFormer visibility:
|
|
</sp-label>
|
|
<sp-label
|
|
style="display: inline-block"
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="lCodeFormerVisibility"
|
|
>0</sp-label
|
|
>
|
|
</sp-slider>
|
|
</div>
|
|
<div style="padding-bottom: 5px">
|
|
<!-- extras tab page -->
|
|
<sp-slider
|
|
style="display: block"
|
|
show-value="false"
|
|
id="slCodeFormerWeight"
|
|
min="0"
|
|
max="10"
|
|
value="0"
|
|
>
|
|
<sp-label
|
|
style="width: 110px; display: inline-block"
|
|
slot="label"
|
|
>CodeFormer weight:
|
|
</sp-label>
|
|
<sp-label
|
|
style="display: inline-block"
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="lCodeFormerWeight"
|
|
>0</sp-label
|
|
>
|
|
</sp-slider>
|
|
</div>
|
|
</div>
|
|
<div class="sp-tab-page" id="sp-presets-tab-page">
|
|
<!-- settings tab page -->
|
|
<div class="SettingsSubTabOptionsContainer"></div>
|
|
<div>
|
|
<sp-textfield
|
|
id="tiPresetName"
|
|
type="text"
|
|
placeholder="Preset Name"
|
|
value=""
|
|
style="width: 160px"
|
|
></sp-textfield
|
|
><button
|
|
class="btnSquare"
|
|
id="btnNewPreset"
|
|
style="margin-left: 5px"
|
|
>
|
|
New Preset
|
|
</button>
|
|
<div>
|
|
<sp-radio-group id="rgPresetType">
|
|
<sp-label slot="label">Preset Type:</sp-label>
|
|
<!-- <sp-label slot="label">Select a Mode:</sp-label> -->
|
|
<sp-radio
|
|
title="Use to create Stable Diffusion tab Preset"
|
|
class="rbPresetType"
|
|
value="sd_preset"
|
|
checked
|
|
>SD Preset</sp-radio
|
|
>
|
|
<sp-radio
|
|
title="Use to create a ControlNet preset"
|
|
class="rbPresetType"
|
|
value="controlnet_preset"
|
|
>ControlNet Preset</sp-radio
|
|
>
|
|
</sp-radio-group>
|
|
</div>
|
|
<!-- <button
|
|
class="btnSquare"
|
|
id="btnEditPresetName"
|
|
style="margin-left: 5px"
|
|
>
|
|
Edit Name
|
|
</button> -->
|
|
|
|
<button
|
|
class="btnSquare"
|
|
id="btnSavePreset"
|
|
style="margin-left: 5px"
|
|
>
|
|
Save Preset
|
|
</button>
|
|
<button
|
|
class="btnSquare"
|
|
id="btnDeletePreset"
|
|
style="margin-left: 5px"
|
|
>
|
|
Delete Preset
|
|
</button>
|
|
<div style="display: inline-flex">
|
|
<sp-picker
|
|
title="auto fill the plugin with smart settings, to speed up your working process."
|
|
size="s"
|
|
label="Smart Preset"
|
|
>
|
|
<sp-menu id="mSettingTabPresetMenu" slot="options">
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
</div>
|
|
<div>
|
|
<sp-label id="lPresetName"></sp-label>
|
|
</div>
|
|
<div class="">
|
|
<sp-textarea
|
|
id="taPresetSettings"
|
|
placeholder="{}"
|
|
value=""
|
|
></sp-textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sp-tab-page" id="sp-settings-tab-page">
|
|
<!-- settings tab page -->
|
|
<div class="SettingsSubTabOptionsContainer">
|
|
<sp-radio-group
|
|
id="rgSubTab"
|
|
class="rbMaskContent"
|
|
data-container-class="SettingsSubTabOptionsContainer"
|
|
>
|
|
<sp-radio
|
|
title=""
|
|
class="rbSubTab"
|
|
id="rbSettingsTab"
|
|
checked
|
|
value="settings"
|
|
data-tab-name="sp-settings-tab"
|
|
>Settings</sp-radio
|
|
>
|
|
<sp-radio
|
|
title=""
|
|
class="rbSubTab"
|
|
id="rbPresetsTab"
|
|
value="presets"
|
|
data-tab-name="sp-presets-tab"
|
|
>Custom Presets</sp-radio
|
|
>
|
|
</sp-radio-group>
|
|
</div>
|
|
<div>
|
|
<sp-label>SD Url:</sp-label
|
|
><sp-textfield
|
|
id="tiSdUrl"
|
|
type="text"
|
|
placeholder="http://127.0.0.1:7860"
|
|
value=""
|
|
style="width: 160px"
|
|
></sp-textfield
|
|
><button
|
|
class="btnSquare"
|
|
id="btnSdUrl"
|
|
style="margin-left: 5px"
|
|
>
|
|
Submit
|
|
</button>
|
|
<button class="btnSquare" id="btnSaveSettingsTabs">
|
|
Save
|
|
</button>
|
|
</div>
|
|
<sp-checkbox id="chUseSharpMask">use sharp mask</sp-checkbox>
|
|
<sp-checkbox checked id="chUseSmartObject"
|
|
>Smart Object</sp-checkbox
|
|
>
|
|
<sp-checkbox
|
|
checked
|
|
id="chLiveProgressImage"
|
|
class="chLiveProgressImageClass"
|
|
>Live Progress Image</sp-checkbox
|
|
>
|
|
|
|
<sp-checkbox checked id="chUseOriginalPrompt"
|
|
>Restore Original Prompt</sp-checkbox
|
|
>
|
|
<sp-checkbox
|
|
checked
|
|
id="chUseImageCfgScaleSlider"
|
|
title="image cfg slider for pix2pix mode"
|
|
>Image Cfg Scale Slider</sp-checkbox
|
|
>
|
|
|
|
<sp-checkbox checked id="chUseSilentMode" style="display: none"
|
|
>Use Silent Mode</sp-checkbox
|
|
>
|
|
<sp-radio-group>
|
|
<sp-label slot="label"
|
|
>Your PC Speed(optimization):</sp-label
|
|
>
|
|
<!-- <sp-label slot="label">Select a Mode:</sp-label> -->
|
|
<sp-radio title="" class="rbPCSpeed" value="slow"
|
|
>Slow PC</sp-radio
|
|
>
|
|
<sp-radio title="" class="rbPCSpeed" value="fast" checked
|
|
>Fast PC</sp-radio
|
|
>
|
|
|
|
<!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
|
|
</sp-radio-group>
|
|
<!-- <a href="https://colab.research.google.com/drive/1nbcx_WOneRmYv9idBO33pN5CbxXrqZHu?usp=sharing" target="_blank">Don't have GPU, use Colab</a> -->
|
|
<sp-link
|
|
href="https://colab.research.google.com/drive/1nbcx_WOneRmYv9idBO33pN5CbxXrqZHu?usp=sharing"
|
|
>Use Colab</sp-link
|
|
>
|
|
<div>
|
|
<sp-radio-group>
|
|
<sp-label slot="label">Select Extension:</sp-label>
|
|
<!-- <sp-label slot="label">Select a Mode:</sp-label> -->
|
|
<sp-radio
|
|
title="use the proxy server, need to run 'start_server.bat' "
|
|
class="rbExtensionType"
|
|
value="proxy_server"
|
|
>Proxy Server</sp-radio
|
|
>
|
|
<sp-radio
|
|
title="use Automatic1111 Photoshop SD Extension, need to install the extension in Auto1111"
|
|
class="rbExtensionType"
|
|
value="auto1111_extension"
|
|
checked
|
|
>Auto111 Extension</sp-radio
|
|
>
|
|
<sp-radio
|
|
title="Use the Plugin Only No Additional Component"
|
|
class="rbExtensionType"
|
|
value="none"
|
|
>None</sp-radio
|
|
>
|
|
<!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
|
|
</sp-radio-group>
|
|
</div>
|
|
<div>
|
|
<sp-textfield
|
|
title="copy paste the address to access the folder where the images are stored"
|
|
id="tiDocPath"
|
|
type="text"
|
|
placeholder=""
|
|
value=""
|
|
>
|
|
<sp-label slot="label"
|
|
>Folder Path (read only):</sp-label
|
|
>
|
|
</sp-textfield>
|
|
<button class="btnSquare" id="btnGetDocPath">
|
|
Get Path
|
|
</button>
|
|
</div>
|
|
|
|
<sp-slider
|
|
show-value="true"
|
|
id="slMultiControlNetSize"
|
|
min="1"
|
|
max="8"
|
|
value="3"
|
|
>
|
|
<sp-label slot="label">Multi ControlNet Size: </sp-label>
|
|
<!-- <sp-label
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="lWidth"
|
|
>512</sp-label
|
|
> -->
|
|
</sp-slider>
|
|
</div>
|
|
|
|
<div
|
|
class="sp-tab-page visible-hack"
|
|
id="sp-stable-diffusion-ui-tab-page"
|
|
>
|
|
<div id="menu-bar-container">
|
|
<sp-picker
|
|
size="m"
|
|
label="Selection type"
|
|
style="margin-right: 3px"
|
|
>
|
|
<sp-menu id="mModelsMenu" slot="options">
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
|
|
<button
|
|
title="Refresh the plugin, only fixes minor issues."
|
|
class=""
|
|
id="btnRefreshModels"
|
|
>
|
|
Refresh
|
|
</button>
|
|
<button
|
|
title="Update the plugin if you encounter bugs. Get the latest features"
|
|
class="btnSquare"
|
|
id="btnUpdate"
|
|
>
|
|
Update
|
|
</button>
|
|
<!-- <sp-label slot="label"
|
|
id="lVersionNumber">v0.0.0</sp-label> -->
|
|
</div>
|
|
|
|
<!-- stable diffusion tab page -->
|
|
|
|
<div id="sdBtnContainer">
|
|
<!-- <button
|
|
class="btnSquare layerToSelection"
|
|
id="btnLayerToSelection"
|
|
style="margin-right: 3px"
|
|
title="Move and reSize the highlighted layer to fit into the Selection Area "
|
|
></button> -->
|
|
<sp-picker
|
|
title="use lora in your prompt"
|
|
size="m"
|
|
label="Lora"
|
|
style="width: 199px; margin-right: 5px"
|
|
>
|
|
<sp-menu id="mLoraModelMenu" slot="options"> </sp-menu>
|
|
</sp-picker>
|
|
<sp-checkbox
|
|
title="use {keyword} form the prompts library"
|
|
id="chUsePromptShortcut"
|
|
checked
|
|
style="display: none"
|
|
>prompt shortcut</sp-checkbox
|
|
>
|
|
|
|
<button
|
|
class="btnSquare btnGenerateClass"
|
|
style="
|
|
margin-top: 1px;
|
|
margin-bottom: 3px;
|
|
display: inline-block;
|
|
"
|
|
>
|
|
Generate txt2img
|
|
</button>
|
|
<!-- <div class="divBtn btnSquare btnGenerateClass">
|
|
Generate txt2img
|
|
</div> -->
|
|
|
|
<button
|
|
class="btnSquare btnInterruptClass"
|
|
id="btnInterrupt"
|
|
style="display: none"
|
|
>
|
|
Interrupt
|
|
</button>
|
|
|
|
<!-- <div
|
|
style="
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
width: 133px;
|
|
"
|
|
>
|
|
<button
|
|
class="btnSquare acceptClass acceptAllImgBtn"
|
|
style="display: none; margin-right: 3px"
|
|
></button>
|
|
<button
|
|
class="btnSquare discardClass discardAllImgBtn"
|
|
style="display: none; margin-right: 3px"
|
|
></button>
|
|
|
|
<button
|
|
class="btnSquare snapshotButton"
|
|
id="btnSnapshot"
|
|
style="margin-right: 3px"
|
|
title="create a snapshot of what you see on the canvas and place on a new layer"
|
|
></button>
|
|
<button
|
|
class="btnSquare resetButton"
|
|
id="btnResetSettings"
|
|
title="reset the ui settings to their default values"
|
|
></button>
|
|
<button
|
|
class="btnSquare interrogateButton"
|
|
id="btnInterrogate"
|
|
title="Interrogate the selected area, convert Image to Prompt"
|
|
></button>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div>
|
|
<div id="progressContainer" class="">
|
|
<div style="display: flex">
|
|
<sp-progressbar
|
|
class="pProgressBars"
|
|
id="pProgressBar"
|
|
max="100"
|
|
value="0"
|
|
style="width: 120px"
|
|
>
|
|
<sp-label slot="label" class="lProgressLabel"
|
|
>Progress...</sp-label
|
|
>
|
|
</sp-progressbar>
|
|
<input
|
|
title="Toggle the visibility of the Preview Image on the canvas"
|
|
type="checkbox"
|
|
name="optionCheckbox"
|
|
class="chLiveProgressImageClass"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="svg-buttons-container"
|
|
style="
|
|
display: inline-flex;
|
|
justify-content: flex-end;
|
|
width: 133px;
|
|
"
|
|
>
|
|
<button
|
|
title="Keep all generated images on the canvas"
|
|
class="btnSquare acceptClass acceptAllImgBtn"
|
|
style="display: none"
|
|
></button>
|
|
<button
|
|
title="Delete all generated images from the canvas"
|
|
class="btnSquare discardClass discardAllImgBtn"
|
|
style="display: none"
|
|
></button>
|
|
|
|
<button
|
|
class="btnSquare layerToSelection"
|
|
id="btnLayerToSelection"
|
|
title="Move and reSize the highlighted layer to fit into the Selection Area "
|
|
></button>
|
|
<button
|
|
class="btnSquare snapshotButton"
|
|
id="btnSnapshot"
|
|
title="create a snapshot of what you see on the canvas and place on a new layer"
|
|
></button>
|
|
<button
|
|
class="btnSquare resetButton"
|
|
id="btnResetSettings"
|
|
title="reset the ui settings to their default values"
|
|
></button>
|
|
<button
|
|
class="btnSquare interrogateButton"
|
|
id="btnInterrogate"
|
|
title="Interrogate the selected area, convert Image to Prompt"
|
|
></button>
|
|
</div>
|
|
<!-- <sp-picker
|
|
title="use lora in your prompt"
|
|
size="s"
|
|
label="Lora"
|
|
>
|
|
<sp-menu id="mLoraModelMenu" slot="options">
|
|
|
|
</sp-menu>
|
|
</sp-picker>
|
|
<sp-checkbox
|
|
title="use {keyword} form the prompts library"
|
|
id="chUsePromptShortcut"
|
|
checked
|
|
style="display: none"
|
|
>prompt shortcut</sp-checkbox
|
|
> -->
|
|
</div>
|
|
<div>
|
|
<!-- icon only svg button -->
|
|
<sp-action-button
|
|
id="svg_sp_btn"
|
|
style="
|
|
padding: 0;
|
|
max-width: 32px;
|
|
max-height: 32px;
|
|
display: none;
|
|
"
|
|
>
|
|
<div slot="icon" style="fill: currentColor">
|
|
<svg
|
|
viewBox="0 0 36 36"
|
|
style="width: 18px; height: 18px"
|
|
>
|
|
<path
|
|
d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</sp-action-button>
|
|
|
|
<!-- icon with svg button -->
|
|
<sp-action-button style="display: none">
|
|
<div slot="icon" style="fill: currentColor">
|
|
<svg
|
|
viewBox="0 0 36 36"
|
|
style="width: 18px; height: 18px"
|
|
>
|
|
<path
|
|
d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
Edit Text
|
|
</sp-action-button>
|
|
<sp-action-button
|
|
id="svg_sp_btn_datadownload"
|
|
style="
|
|
padding: 0;
|
|
max-width: 32px;
|
|
max-height: 32px;
|
|
display: none;
|
|
"
|
|
>
|
|
<div slot="icon" style="fill: currentColor">
|
|
<svg
|
|
viewBox="0 0 18 18"
|
|
style="width: 18px; height: 18px"
|
|
>
|
|
<path
|
|
d="M5.3885,12.5895a1.211,1.211,0,0,1-.314-.8C3.2305,11.478,1.509,10.942,1,10.135V14.5C1,15.8805,4.582,17,9,17c.1385,0,.2735-.0045.4105-.0065Z"
|
|
/>
|
|
<path
|
|
d="M16.5,6.5V9.3635A1.18,1.18,0,0,0,17,8.5V5.135A5.06144,5.06144,0,0,1,14.3855,6.5Z"
|
|
/>
|
|
<path
|
|
d="M6.315,10.5H8.5V7.13C5.953,7.059,1.8365,6.4625,1,5.135V8.5c0,.996,1.868,1.8535,4.565,2.255A1.21847,1.21847,0,0,1,6.315,10.5Z"
|
|
/>
|
|
<path
|
|
d="M17.573,12.427A.25.25,0,0,0,17.3965,12H15V8H10v4H7.6035a.25.25,0,0,0-.1765.427L12.5,18Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</sp-action-button>
|
|
<!-- <img width="15px" height="15px" src="./icon/ftcopy.svg"> -->
|
|
</div>
|
|
<img
|
|
id="webp_container"
|
|
src="https://www.keycdn.com/img/blog/convert-to-webp-the-successor-of-jpeg-lg.webp"
|
|
/>
|
|
<!-- <custom-element>hello custom element</custom-element> -->
|
|
<div class="prompts">
|
|
<!-- <sp-label slot="label">Prompt</sp-label> -->
|
|
<div class="">
|
|
<sp-textarea
|
|
id="taPrompt"
|
|
placeholder="Prompt"
|
|
value="cute cat, {painterly_style_1}"
|
|
></sp-textarea>
|
|
<!-- <textarea id="taPrompt" placeholder="Prompt" value="cute cat"></textarea> -->
|
|
</div>
|
|
|
|
<div class="">
|
|
<sp-textarea
|
|
id="taNegativePrompt"
|
|
placeholder="Negative Prompt"
|
|
id="taNegativePrompt"
|
|
value="{ugly}"
|
|
multiline
|
|
grows
|
|
></sp-textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<sp-radio-group>
|
|
<!-- <sp-label slot="label">Select a Mode:</sp-label> -->
|
|
<sp-radio
|
|
title="use this mode to generate images from text only"
|
|
class="rbMode"
|
|
checked
|
|
value="txt2img"
|
|
>txt2img</sp-radio
|
|
>
|
|
<sp-radio
|
|
title="use this mode to generate variation of an image"
|
|
class="rbMode"
|
|
value="img2img"
|
|
>img2img</sp-radio
|
|
>
|
|
<sp-radio
|
|
title="use this mode to generate variation of a small area of an image, while keeping the rest of the image intact"
|
|
class="rbMode"
|
|
id="rbModeInpaint"
|
|
value="inpaint"
|
|
>inpaint</sp-radio
|
|
>
|
|
<sp-radio
|
|
title="use this mode to (1) fill any missing area of an image,(2) expand an image"
|
|
class="rbMode"
|
|
id="rbOutpaintMode"
|
|
value="outpaint"
|
|
>outpaint</sp-radio
|
|
>
|
|
<!-- <sp-tooltip id="tool_tip" open placement="top">use this when you want to fill empty areas of the canvas</sp-tooltip> -->
|
|
</sp-radio-group>
|
|
|
|
<div id="image_viewer">
|
|
<div class="imgButton">
|
|
<!--
|
|
<button class="button-style2" id="btnInitInpaint">Init inpaint
|
|
Mask</button> -->
|
|
<!-- <button button class="button-style2" id="btnInitOutpaint">Init Outpaint
|
|
Mask</button> -->
|
|
</div>
|
|
|
|
<!-- <sp-detail>Image from Web:</sp-detail> -->
|
|
|
|
<!--
|
|
<img id="init_image" src='' width="100" height="100">
|
|
<img id="init_image_mask" src='' width="100" height="100"> -->
|
|
<!-- <sp-checkbox id="chUseMaskImage">use mask image</sp-checkbox> -->
|
|
<table id="tableInitImageContainer">
|
|
<tr>
|
|
<td id="initImageColumn">
|
|
<div
|
|
id="init_image_container"
|
|
class="imgContainer"
|
|
>
|
|
<!-- <button class="column-item button-style" id="btnSnapAndFill">Snap And Fill</button> -->
|
|
|
|
<div>
|
|
<img
|
|
id="init_image"
|
|
class="column-item-image"
|
|
src="https://source.unsplash.com/random"
|
|
width="300px"
|
|
height="100px"
|
|
/>
|
|
</div>
|
|
<div class="imgButton">
|
|
<button
|
|
class="column-item button-style disabled-btn"
|
|
disabled
|
|
id="bSetInitImage"
|
|
>
|
|
Image
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div
|
|
id="init_image_mask_container"
|
|
class="imgContainer"
|
|
>
|
|
<div>
|
|
<img
|
|
id="init_image_mask"
|
|
class="column-item-image"
|
|
src="https://source.unsplash.com/random"
|
|
width="100px"
|
|
height="100px"
|
|
/>
|
|
</div>
|
|
<div class="imgButton">
|
|
<button
|
|
class="column-item button-style disabled-btn"
|
|
disabled
|
|
id="bSetInitImageMask"
|
|
>
|
|
Mask
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div id="batchNumber-steps-container">
|
|
<div id="batchNumberUi">
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
"
|
|
>
|
|
<div
|
|
id="batchNumberSdUiTabContainer"
|
|
style="
|
|
width: 35%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
"
|
|
>
|
|
<sp-label>Batch Size:</sp-label
|
|
><sp-textfield
|
|
style="width: 100%"
|
|
title="the number of images to generate at once.The larger the number more VRAM stable diffusion will use."
|
|
id="tiNumberOfBatchSize"
|
|
type="number"
|
|
placeholder="1"
|
|
value="1"
|
|
></sp-textfield>
|
|
</div>
|
|
<div
|
|
id="batchNumberSdUiTabContainer"
|
|
style="
|
|
width: 20%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
"
|
|
>
|
|
<sp-label>Batch Count:</sp-label
|
|
><sp-textfield
|
|
style="width: 100%"
|
|
title="the number of images to generate in queue. The larger the number the longer will take."
|
|
id="tiNumberOfBatchCount"
|
|
type="number"
|
|
placeholder="1"
|
|
value="1"
|
|
></sp-textfield>
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 35%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
"
|
|
>
|
|
<sp-label>Steps:</sp-label
|
|
><sp-textfield
|
|
style="width: 100%"
|
|
title="the higher the steps the longer it will take to generate an image"
|
|
id="tiNumberOfSteps"
|
|
type="number"
|
|
placeholder="20"
|
|
value="20"
|
|
></sp-textfield>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="selectionMode">
|
|
<div>
|
|
<sp-label id="rbSelectionModeLabel" slot="label"
|
|
>Selection Mode:</sp-label
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
id="menu-bar-container_preset"
|
|
style="display: inline-flex"
|
|
>
|
|
<sp-radio-group id="selectionModeGroup" class="">
|
|
<sp-radio
|
|
class="rbSelectionMode"
|
|
checked
|
|
value="ratio"
|
|
>ratio</sp-radio
|
|
>
|
|
<sp-radio
|
|
title="use the selection area width and height to fill the width and height sliders"
|
|
class="rbSelectionMode"
|
|
value="precise"
|
|
>precise</sp-radio
|
|
>
|
|
<sp-radio
|
|
title="fill the width and height sliders manually"
|
|
class="rbSelectionMode"
|
|
value="ignore"
|
|
>ignore</sp-radio
|
|
>
|
|
</sp-radio-group>
|
|
|
|
<sp-picker
|
|
title="auto fill the plugin with smart settings, to speed up your working process."
|
|
size="s"
|
|
label="Smart Preset"
|
|
>
|
|
<sp-menu id="mPresetMenu" slot="options">
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
</div>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<sp-slider
|
|
show-value="false"
|
|
id="slWidth"
|
|
min="1"
|
|
max="32"
|
|
value="8"
|
|
data-old_value="512"
|
|
>
|
|
<sp-label slot="label">Width:</sp-label>
|
|
<sp-label
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="lWidth"
|
|
>512</sp-label
|
|
>
|
|
</sp-slider>
|
|
<button
|
|
class="btnSquare linkSlider whiteChain"
|
|
id="linkWidthHeight"
|
|
title="maintain the ratio between width and height slider"
|
|
data-b_link="true"
|
|
></button>
|
|
<sp-slider
|
|
show-value="false"
|
|
id="slHeight"
|
|
min="1"
|
|
max="32"
|
|
value="8"
|
|
data-old_value="512"
|
|
>
|
|
<sp-label slot="label">Height:</sp-label>
|
|
<sp-label
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="lHeight"
|
|
>512</sp-label
|
|
>
|
|
|
|
<sp-label
|
|
class="res-increase"
|
|
id="res-difference"
|
|
slot="label"
|
|
></sp-label>
|
|
</sp-slider>
|
|
<!-- <sp-label slot="label"
|
|
>512x512 => 1024x1024</sp-label >-->
|
|
</div>
|
|
<!-- <div id='hi-res-sliders-container' style="display:none;">
|
|
<sp-slider show-value="false" id="hrWidth" min="1" max="32" value="8">
|
|
<sp-label slot="label">Hi Res Width:</sp-label>
|
|
<sp-label class="labelNumber" slot="label" id="hWidth">512</sp-label>
|
|
</sp-slider>
|
|
<sp-slider show-value="false" id="hrHeight" min="1" max="32" value="8">
|
|
<sp-label slot="label">Hi Res Height:</sp-label>
|
|
<sp-label class="labelNumber" slot="label" id="hHeight">512</sp-label>
|
|
</sp-slider>
|
|
<sp-slider show-value="false" id="hrDenoisingStrength" min="0" max="100" value="70">
|
|
<sp-label slot="label">Hi Res Denoising:</sp-label>
|
|
<sp-label class="labelNumber" slot="label" id="hDenoisingStrength">0.7</sp-label>
|
|
</sp-slider>
|
|
</div> -->
|
|
<div style="display: flex">
|
|
<sp-slider
|
|
title="larger value will put more emphasis on the prompt"
|
|
show-value="true"
|
|
id="slCfgScale"
|
|
min="1"
|
|
max="30"
|
|
value="7"
|
|
>
|
|
<sp-label slot="label">CFG Scale:</sp-label>
|
|
<!-- <sp-label slot="label" id="lCfgScale">7</sp-label> -->
|
|
</sp-slider>
|
|
|
|
<sp-slider
|
|
show-value="false"
|
|
id="slDenoisingStrength"
|
|
min="0"
|
|
max="100"
|
|
value="70"
|
|
>
|
|
<sp-label slot="label"
|
|
>Denoising Strength:</sp-label
|
|
>
|
|
<sp-label slot="label" id="lDenoisingStrength"
|
|
>0.7</sp-label
|
|
>
|
|
</sp-slider>
|
|
</div>
|
|
<sp-slider
|
|
title="Pix2Pix CFG Scale (larger value will put more emphasis on the image)"
|
|
show-value="false"
|
|
id="slImageCfgScale"
|
|
min="0"
|
|
max="30"
|
|
value="15"
|
|
style="display: none"
|
|
>
|
|
<sp-label slot="label">Image CFG Scale:</sp-label>
|
|
<sp-label slot="label" id="lImageCfgScale"
|
|
>1.5</sp-label
|
|
>
|
|
</sp-slider>
|
|
|
|
<sp-slider
|
|
show-value="true"
|
|
id="slMaskBlur"
|
|
min="0"
|
|
max="64"
|
|
value="7"
|
|
>
|
|
<sp-label slot="label">Mask Blur:</sp-label>
|
|
<!-- <sp-label slot="label" id="lDenoisingStrength">0.7</sp-label> -->
|
|
</sp-slider>
|
|
<sp-slider
|
|
show-value="true"
|
|
id="slMaskExpansion"
|
|
min="0"
|
|
max="256"
|
|
value="40"
|
|
title="the larger the value the more the mask will expand, '0' means use precise masking, use in combination with the mask blur"
|
|
>
|
|
<sp-label slot="label">Mask Expansion:</sp-label>
|
|
<!-- <sp-label slot="label" id="lDenoisingStrength">0.7</sp-label> -->
|
|
</sp-slider>
|
|
|
|
<div style="display: flex">
|
|
<sp-slider
|
|
show-value="false"
|
|
id="slInpaintingMaskWeight"
|
|
min="0"
|
|
max="100"
|
|
value="100"
|
|
title="0 will keep the composition; 1 will allow composition to change"
|
|
>
|
|
<sp-label slot="label"
|
|
>Inpainting conditioning mask
|
|
strength:</sp-label
|
|
>
|
|
<sp-label
|
|
slot="label"
|
|
id="lInpaintingMaskWeight"
|
|
>1</sp-label
|
|
>
|
|
</sp-slider>
|
|
</div>
|
|
|
|
<div id="slInpainting_fill">
|
|
<sp-radio-group id="Inpainting_fill_group" class="">
|
|
<sp-label slot="label">Mask Content:</sp-label>
|
|
<sp-radio
|
|
class="rbMaskContent"
|
|
checked
|
|
value="0"
|
|
>fill</sp-radio
|
|
>
|
|
<sp-radio class="rbMaskContent" value="1"
|
|
>original</sp-radio
|
|
>
|
|
<sp-radio class="rbMaskContent" value="2"
|
|
>latent noise</sp-radio
|
|
>
|
|
<sp-radio class="rbMaskContent" value="3"
|
|
>latent nothing</sp-radio
|
|
>
|
|
</sp-radio-group>
|
|
</div>
|
|
|
|
<div style="display: flex">
|
|
<sp-checkbox class="checkbox" id="chInpaintFullRes"
|
|
>Inpaint at Full Res</sp-checkbox
|
|
>
|
|
<sp-checkbox class="checkbox" id="chRestoreFaces"
|
|
>Restore Faces</sp-checkbox
|
|
>
|
|
<sp-checkbox class="checkbox" id="chHiResFixs"
|
|
>Hi Res Fix</sp-checkbox
|
|
>
|
|
</div>
|
|
<div id="HiResDiv" style="display: none">
|
|
<div style="display: flex">
|
|
<div>
|
|
<sp-label>Upscaler: </sp-label>
|
|
<sp-picker
|
|
size="m"
|
|
label="Upscaler Options"
|
|
>
|
|
<sp-menu
|
|
id="hrModelsMenu"
|
|
class="hrModelsMenuClass"
|
|
slot="options"
|
|
>
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
</div>
|
|
<div>
|
|
<sp-label>Hi Res Steps:</sp-label
|
|
><sp-textfield
|
|
id="hrNumberOfSteps"
|
|
type="number"
|
|
placeholder="0"
|
|
value="0"
|
|
style="margin-top: 3px; width: auto"
|
|
></sp-textfield>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="hi-res-sliders-container"
|
|
style="display: flex"
|
|
>
|
|
<sp-slider
|
|
show-value="false"
|
|
id="hrScaleSlider"
|
|
min="1"
|
|
max="100"
|
|
value="50"
|
|
>
|
|
<sp-label slot="label"
|
|
>Hi Res Scale:</sp-label
|
|
>
|
|
<sp-label
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="hrScaleLabel"
|
|
>2</sp-label
|
|
>
|
|
<sp-label
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="lHrScaleFromTo"
|
|
>512x512 -> 1024x1024
|
|
</sp-label>
|
|
</sp-slider>
|
|
|
|
<sp-slider
|
|
show-value="false"
|
|
id="hrDenoisingStrength"
|
|
min="0"
|
|
max="100"
|
|
value="70"
|
|
>
|
|
<sp-label slot="label">
|
|
High Res Denoising Strength:</sp-label
|
|
>
|
|
<sp-label
|
|
slot="label"
|
|
id="hDenoisingStrength"
|
|
>0.7</sp-label
|
|
>
|
|
</sp-slider>
|
|
|
|
<!-- remove hrWidth slider from the ui, use hrScale instead -->
|
|
<sp-slider
|
|
show-value="false"
|
|
id="hrWidth"
|
|
min="1"
|
|
max="32"
|
|
value="8"
|
|
style="display: none"
|
|
>
|
|
<sp-label slot="label"
|
|
>Hi Res Output Width:</sp-label
|
|
>
|
|
<sp-label
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="hWidth"
|
|
>512</sp-label
|
|
>
|
|
</sp-slider>
|
|
<!-- remove hrHeight slider from the ui, use hrScale instead -->
|
|
<sp-slider
|
|
show-value="false"
|
|
id="hrHeight"
|
|
min="1"
|
|
max="32"
|
|
value="8"
|
|
style="display: none"
|
|
>
|
|
<sp-label slot="label"
|
|
>Hi Res Output Height:</sp-label
|
|
>
|
|
<sp-label
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="hHeight"
|
|
>512</sp-label
|
|
>
|
|
</sp-slider>
|
|
</div>
|
|
</div>
|
|
<sp-slider
|
|
show-value="false"
|
|
id="slInpaintPadding"
|
|
min="0"
|
|
max="64"
|
|
value="0"
|
|
>
|
|
<sp-label slot="label" id="lNameInpaintPdding"
|
|
>Inpaint Padding:</sp-label
|
|
>
|
|
<sp-label
|
|
class="labelNumber"
|
|
slot="label"
|
|
id="lInpaintPadding"
|
|
>0</sp-label
|
|
>
|
|
</sp-slider>
|
|
<!-- <sp-slider id="slInpainting_fill" min="0" max="3" value="1">
|
|
<sp-label slot="label">Inpainting fill:</sp-label>
|
|
</sp-slider> -->
|
|
</div>
|
|
<div>
|
|
<!-- <sp-checkbox id="chHiResFixs">Hi Res Fix</sp-checkbox> -->
|
|
<div style="display: flex">
|
|
<sp-label>Seed:</sp-label
|
|
><sp-textfield
|
|
id="tiSeed"
|
|
placeholder="Seed"
|
|
value="-1"
|
|
></sp-textfield>
|
|
<button
|
|
class="btnSquare"
|
|
id="btnRandomSeed"
|
|
style="margin-right: 3px; margin-left: 3px"
|
|
>
|
|
Random
|
|
</button>
|
|
<button class="btnSquare" id="btnLastSeed">
|
|
Last
|
|
</button>
|
|
</div>
|
|
<button type="button" id="collapsible">
|
|
Show Samplers
|
|
</button>
|
|
<sp-radio-group id="sampler_group" class="content">
|
|
<sp-label slot="label">Select Sampler:</sp-label>
|
|
<sp-radio class="rbSampler" checked value="Euler a"
|
|
>Euler a</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="Euler"
|
|
>Euler</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="LMS"
|
|
>LMS</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="Heun"
|
|
>Heun</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="DPM2"
|
|
>DPM2</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="DPM2 a"
|
|
>DPM2 a</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="DPM++ 2S a"
|
|
>DPM++ 2S a</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="DPM++ 2M"
|
|
>DPM++ 2M</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="DPM++ SDE"
|
|
>DPM++ SDE</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="DPM fast"
|
|
>DPM fast</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="DPM adaptive"
|
|
>DPM adaptive</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="LMS Karras"
|
|
>LMS Karras</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="DPM2 Karras"
|
|
>DPM2 Karras</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="DPM2 a Karras"
|
|
>DPM2 a Karras</sp-radio
|
|
>
|
|
<sp-radio
|
|
class="rbSampler"
|
|
value="DPM++ 2S a Karras"
|
|
>DPM++ 2S a Karras</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="DPM++ 2M Karras"
|
|
>DPM++ 2M Karras</sp-radio
|
|
>
|
|
<sp-radio class="rbSampler" value="DPM++ SDE Karras"
|
|
>DPM++ SDE Karras</sp-radio
|
|
>
|
|
</sp-radio-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|