607 lines
19 KiB
HTML
607 lines
19 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: 150px;
|
|
height: 150px;
|
|
margin: 0;
|
|
}
|
|
.viewer-image, .history-image{
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0;
|
|
}
|
|
.column-item {
|
|
|
|
margin: 0;
|
|
}
|
|
|
|
.button-style {
|
|
background-color: #777;
|
|
color: white;
|
|
cursor: pointer;
|
|
|
|
width: 100%;
|
|
border: none;
|
|
text-align: left;
|
|
outline: none;
|
|
font-size: 15px;
|
|
margin: 0;
|
|
}
|
|
|
|
.btnSquare,
|
|
#btnRefreshModels {
|
|
background-color: #777;
|
|
color: white;
|
|
cursor: pointer;
|
|
|
|
border: none;
|
|
|
|
text-align: left;
|
|
outline: none;
|
|
font-size: 15px;
|
|
margin: 0;
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
#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;
|
|
|
|
}
|
|
|
|
.labelNumber {
|
|
color: aliceblue;
|
|
}
|
|
|
|
#lNameInpaintPdding {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* 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 {
|
|
display: none;
|
|
flex: 1 1 auto;
|
|
overflow: scroll;
|
|
padding: 12px 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
</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"><sp-label>Stable Diffusion UI</sp-label></div>
|
|
<div class="sp-tab" id="sp-viewer-tab"><sp-label>Viewer</sp-label></div>
|
|
<div class="sp-tab" id="sp-history-tab"><sp-label>History</sp-label></div>
|
|
<div class="sp-tab" id="sp-prompts-library-tab"><sp-label>Prompts library</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="flexContainer">
|
|
|
|
<sp-label slot="label">View your generated images on the canvas</sp-label>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
</div>
|
|
<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">Progress...</sp-label>
|
|
</sp-progressbar>
|
|
</div>
|
|
<button class="btnSquare btnGenerateClass" id="btnGenerate">Generate</button>
|
|
<button class="btnSquare btnInterruptClass" id="btnInterruptViewer" style="display:none;">Interrupt</button>
|
|
<button class="btnSquare acceptClass" id="btnAcceptViewer" style="display:none;">Accept</button>
|
|
<button class="btnSquare discardClass" id="btnDiscardViewer" style="display:none;">Discard</button>
|
|
|
|
<!-- <button class="btnSquare" id="btnLoadViewer">Load</button> -->
|
|
|
|
</div>
|
|
<div class="" id="divViewerImagesContainer">
|
|
<img class="viewer-image" id="viewer_image_test" data-metadata_json_string='{"a":1}' src='https://source.unsplash.com/random' />
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sp-tab-page" id="sp-history-tab-page">
|
|
<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>
|
|
<button class="btnSquare" id="btnLoadHistory">Load</button>
|
|
<div class="" 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-prompts-library-tab-page">
|
|
<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>
|
|
<button class="btnSquare" id="btnLoadPromptShortcut">Load</button>
|
|
<button class="btnSquare" id="btnSavePromptShortcut">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sp-tab-page" id="sp-settings-tab-page">
|
|
<!-- settings tab page -->
|
|
<div>
|
|
|
|
<sp-label>SD Url:</sp-label><sp-textfield id="tiSdUrl" type="text" placeholder="http://127.0.0.1:7860"
|
|
value=""></sp-textfield><button class="btnSquare" id="btnSdUrl">Submit</button>
|
|
</div>
|
|
<sp-checkbox id="chUseSharpMask">use sharp mask</sp-checkbox>
|
|
|
|
</div>
|
|
|
|
<div class="sp-tab-page visible" id="sp-stable-diffusion-ui-tab-page">
|
|
<div id="menu-bar-container">
|
|
<sp-picker size="m" label="Selection type">
|
|
<sp-menu id="mModelsMenu" slot="options">
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
|
|
<button class="" id="btnRefreshModels">Refresh</button>
|
|
<!-- <sp-label slot="label"
|
|
id="lVersionNumber">v0.0.0</sp-label> -->
|
|
</div>
|
|
|
|
<!-- stable diffusion tab page -->
|
|
|
|
<div>
|
|
|
|
<button class="btnSquare" id="btnLayerToSelection">Layer To Selection</button>
|
|
<button class="btnSquare btnGenerateClass">Generate</button>
|
|
<button class="btnSquare btnInterruptClass" id="btnInterrupt" style="display:none;">Interrupt</button>
|
|
<!-- <button class="btnSquare btnInterruptClass" style="display:none;">Interrupt More</button> -->
|
|
<!-- <button class="btnSquare" id="btnCleanLayers">Clean Layers</button> -->
|
|
<button class="btnSquare acceptClass" id="btnAccept" style="display:none;">Accept</button>
|
|
<button class="btnSquare discardClass" id="btnDiscard" style="display:none;">Discard</button>
|
|
<button class="btnSquare" id="btnResetSettings" title="reset the ui settings to their default values">Reset</button>
|
|
<!-- <button class="btnSquare" id="btnLinkCurrentDocument">Link Current Document</button> -->
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
<div id="progressContainer" class="">
|
|
|
|
<sp-progressbar class="pProgressBars" id="pProgressBar" max=100 value=0>
|
|
<sp-label slot="label">Progress...</sp-label>
|
|
</sp-progressbar>
|
|
<sp-checkbox id="chUsePromptShortcut" checked>prompt shortcut</sp-checkbox>
|
|
</div>
|
|
<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 class="rbMode" checked value="txt2img">txt2img</sp-radio>
|
|
<sp-radio class="rbMode" value="img2img">img2img</sp-radio>
|
|
<sp-radio class="rbMode" value="inpaint">inpaint</sp-radio>
|
|
<sp-radio class="rbMode" id="rbOutpaintMode" value="outpaint" title="Use this mode when you want to fill empty areas of the canvas">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" id="bSetInitImage">Set Init 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" id="bSetInitImageMask">Set Mask</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div id="batchNumberSdUiTabContainer">
|
|
<div id="batchNumberUi">
|
|
<sp-label>Images:</sp-label><sp-textfield id="tiNumberOfImages" type="number" placeholder="1"
|
|
value="1"></sp-textfield>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<sp-label>Steps:</sp-label><sp-textfield id="tiNumberOfSteps" type="number" placeholder="20"
|
|
value="20"></sp-textfield>
|
|
</div>
|
|
<div>
|
|
<sp-slider show-value="false" id="slWidth" min="1" max="32" value="8">
|
|
<sp-label slot="label">Width:</sp-label>
|
|
<sp-label class="labelNumber" slot="label" id="lWidth">512</sp-label>
|
|
</sp-slider>
|
|
<sp-slider show-value="false" id="slHeight" min="1" max="32" value="8">
|
|
<sp-label slot="label">Height:</sp-label>
|
|
<sp-label class="labelNumber" slot="label" id="lHeight">512</sp-label>
|
|
</sp-slider>
|
|
</div>
|
|
<sp-slider 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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
<sp-checkbox id="chInpaintFullRes">Inpaint at full resolution</sp-checkbox>
|
|
<sp-checkbox id="chHiResFixs">Hi Res Fix</sp-checkbox>
|
|
</div>
|
|
<div id="HiResDiv" style="display:none;">
|
|
<sp-picker size="m" label="Upscaler Options">
|
|
<sp-menu id="hrModelsMenu" slot="options">
|
|
<!-- <sp-menu-item> item </sp-menu-item> -->
|
|
</sp-menu>
|
|
</sp-picker>
|
|
<sp-label>Hr Steps:</sp-label><sp-textfield id="hrNumberOfSteps" type="number" placeholder="20"
|
|
value="20"></sp-textfield>
|
|
<sp-slider show-value="false" id="hrWidth" min="1" max="32" value="8">
|
|
<sp-label slot="label">Hi Res Output 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 Output 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"> High Res Denoising Strength:</sp-label>
|
|
<sp-label slot="label" id="hDenoisingStrength">0.7</sp-label>
|
|
</sp-slider>
|
|
</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>
|
|
<div>
|
|
<sp-label>Seed:</sp-label><sp-textfield id="tiSeed" placeholder="Seed" value="-1"></sp-textfield>
|
|
<button class="btnSquare" id="btnRandomSeed">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>
|
|
</body>
|
|
|
|
</html> |