Upload folder using huggingface_hub (#1)

34097e9 almost 3 years ago

129 kB

	<!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>
	<sp-label
	id="controlnetMissingError"
	style="color: #ff595e; display: none; white-space: normal"
	>
	The Controlnet Extension is missing from Automatic1111.
	Please install it to use it through the plugin.
	</sp-label>
	<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_"
	style="display: none"
	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_"
	style="display: none"
	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_"
	style="display: none"
	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>
	</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"> -->
	<sp-action-button
	id="svg_sp_btn_search"
	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="M31.5,28.9l-7.4-7.4c1.8-2.3,2.9-5.2,2.9-8.4c0-7.2-5.8-13-13-13S1,6.3,1,13.5s5.8,13,13,13c3.2,0,6.1-1.1,8.4-2.9l7.4,7.4 c0.4,0.4,0.9,0.6,1.5,0.6s1.1-0.2,1.5-0.6C32.3,31.1,32.3,29.7,31.5,28.9z M14,22c-4.7,0-8.5-3.8-8.5-8.5S9.3,5,14,5s8.5,3.8,8.5,8.5 S18.7,22,14,22z"
	/>
	</svg>
	</div>
	<!-- Search -->
	</sp-action-button>
	<sp-action-button
	id="svg_sp_btn_canvas"
	style="
	padding: 0;
	max-width: 32px;
	max-height: 32px;
	display: none;
	"
	>
	<div slot="icon" style="fill: currentColor">
	<svg
	version="1.0"
	xmlns="http://www.w3.org/2000/svg"
	width="18.000000pt"
	height="18.000000pt"
	viewBox="0 0 127.000000 127.000000"
	preserveAspectRatio="xMidYMid meet"
	style="
	width: 32px;
	height: 27px;
	position: absolute;
	top: 3px;
	left: -1px;
	"
	>
	<g
	transform="translate(0.000000,115.000000) scale(0.100000,-0.100000)"
	fill="#000000"
	stroke="none"
	>
	<path
	d="M577 1172 c-10 -11 -17 -36 -17 -60 l0 -42 -133 0 c-117 0 -136 -2
	-150 -18 -15 -16 -17 -49 -17 -254 l0 -236 -24 -6 c-53 -13 -74 -67 -38 -99
	15 -13 39 -17 115 -17 53 0 97 -4 97 -9 0 -5 -13 -69 -30 -143 -35 -155 -36
	-169 -12 -191 45 -41 84 -11 104 78 l13 60 150 0 150 0 13 -60 c15 -67 35 -95
	67 -95 27 0 55 29 55 56 0 11 -13 78 -30 150 -16 71 -30 135 -30 142 0 9 26
	12 98 12 83 0 102 3 115 18 33 36 14 85 -39 98 l-24 6 0 238 c0 217 -2 238
	-18 253 -15 14 -42 17 -150 17 l-132 0 0 43 c0 30 -6 49 -18 60 -26 23 -94 22
	-115 -1z m393 -377 l0 -235 -335 0 -335 0 0 235 0 235 335 0 335 0 0 -235z
	m77 -291 c3 -9 0 -20 -8 -25 -18 -11 -790 -11 -808 0 -8 5 -11 16 -8 25 6 14
	49 16 412 16 363 0 406 -2 412 -16z m-293 -133 c9 -39 16 -75 16 -80 0 -7 -47
	-11 -135 -11 -88 0 -135 4 -135 11 0 5 7 41 16 80 l16 69 103 0 103 0 16 -69z"
	/>
	</g>
	</svg>
	</div>
	</sp-action-button>

	<sp-action-button
	id="svg_sp_btn_preview"
	style="
	padding: 0;
	max-width: 32px;
	max-height: 32px;
	display: none;
	"
	>
	<div slot="icon" style="fill: currentColor">
	<svg
	version="1.0"
	xmlns="http://www.w3.org/2000/svg"
	width="512.000000pt"
	height="512.000000pt"
	viewBox="0 0 512.000000 512.000000"
	preserveAspectRatio="xMidYMid meet"
	style="
	width: 32px;
	height: 32px;
	position: absolute;
	top: 0px;
	left: -1px;
	"
	>
	<g
	transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
	fill="#000000"
	stroke="none"
	>
	<path
	d="M920 4311 c-118 -36 -212 -129 -259 -254 -18 -50 -21 -79 -21 -217
	l0 -160 80 0 80 0 0 128 c0 147 14 208 60 264 51 62 99 78 231 78 63 0 131 3
	152 6 l37 7 0 78 0 79 -167 -1 c-93 0 -179 -4 -193 -8z"
	/>
	<path
	d="M3840 4242 l0 -79 38 -7 c20 -3 88 -6 151 -6 132 0 180 -16 231 -78
	46 -56 60 -117 60 -264 l0 -128 80 0 80 0 0 158 c0 131 -3 169 -19 215 -36
	104 -104 182 -204 234 -50 27 -58 28 -234 31 l-183 4 0 -80z"
	/>
	<path
	d="M2450 3404 c-252 -30 -471 -107 -694 -243 -199 -122 -420 -320 -578
	-519 -32 -40 -58 -79 -58 -85 0 -20 105 -146 213 -256 296 -302 597 -483 937
	-562 122 -29 364 -37 495 -16 318 51 613 200 903 457 102 90 249 249 310 334
	l32 44 -47 62 c-67 90 -253 281 -358 368 -248 208 -538 351 -802 397 -90 16
	-290 27 -353 19z m279 -317 c189 -54 340 -214 386 -409 79 -338 -192 -670
	-549 -669 -158 0 -278 47 -390 151 -123 116 -177 238 -178 400 0 161 54 284
	178 400 153 143 345 187 553 127z"
	/>
	<path
	d="M2485 2841 c-59 -17 -86 -31 -129 -71 -153 -141 -103 -397 92 -471
	116 -43 262 -7 333 82 46 59 62 106 63 184 0 52 -6 82 -23 117 -27 55 -94 121
	-148 143 -45 19 -146 28 -188 16z"
	/>
	<path
	d="M640 1280 c0 -138 3 -167 21 -217 40 -107 103 -178 202 -230 50 -27
	58 -28 235 -31 l182 -4 0 80 0 79 -37 7 c-21 3 -89 6 -152 6 -132 0 -180 16
	-231 78 -46 56 -60 117 -60 264 l0 128 -80 0 -80 0 0 -160z"
	/>
	<path
	d="M4320 1312 c0 -147 -14 -208 -60 -264 -51 -62 -99 -78 -231 -78 -63
	0 -131 -3 -151 -6 l-38 -7 0 -79 0 -80 183 4 c176 3 184 4 234 31 99 52 162
	123 202 230 18 50 21 79 21 217 l0 160 -80 0 -80 0 0 -128z"
	/>
	</g>
	</svg>
	</div>
	</sp-action-button>

	<sp-action-button
	id="svg_sp_btn_expand"
	style="
	padding: 0;
	max-width: 32px;
	max-height: 32px;
	display: none;
	"
	>
	<div slot="icon" style="fill: currentColor">
	<svg
	version="1.0"
	xmlns="http://www.w3.org/2000/svg"
	width="200.000000pt"
	height="200.000000pt"
	viewBox="0 0 200.000000 200.000000"
	preserveAspectRatio="xMidYMid meet"
	style="
	width: 28px;
	height: 32px;
	position: absolute;
	top: -1px;
	left: 1px;
	"
	>
	<g
	transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
	fill="#000000"
	stroke="none"
	>
	<path
	d="M246 1775 c-11 -6 -23 -21 -27 -35 -9 -31 -9 -275 0 -315 9 -41 50
	-61 89 -43 26 13 27 17 30 97 l3 84 178 -176 c123 -123 184 -177 200 -177 12
	0 33 11 46 25 14 13 25 34 25 46 0 16 -54 77 -177 200 l-176 178 84 3 c80 3
	84 4 97 31 11 22 11 32 0 55 l-13 27 -170 5 c-104 3 -177 1 -189 -5z"
	/>
	<path
	d="M1406 1775 c-32 -16 -43 -58 -22 -89 16 -26 18 -26 146 -26 l129 0 3
	-132 3 -133 28 -13 c22 -11 32 -11 55 0 l27 13 3 179 c2 120 -1 183 -9 192
	-14 17 -332 25 -363 9z"
	/>
	<path
	d="M1515 1600 c-11 -4 -84 -73 -162 -152 -153 -155 -162 -170 -118 -213
	43 -44 58 -36 219 124 132 131 149 153 149 181 0 22 -7 39 -22 52 -25 20 -36
	21 -66 8z"
	/>
	<path
	d="M700 783 c-8 -3 -93 -82 -187 -177 l-173 -171 0 82 c0 78 -2 84 -26
	99 -32 22 -73 10 -92 -26 -18 -35 -13 -330 7 -354 12 -14 36 -16 195 -14 l181
	3 13 28 c11 22 11 32 0 55 -13 26 -17 27 -98 30 l-84 3 174 174 c153 153 173
	177 173 206 0 47 -40 77 -83 62z"
	/>
	<path
	d="M1252 780 c-28 -12 -45 -52 -33 -82 5 -13 84 -97 175 -188 l166 -165
	-82 -5 c-78 -5 -84 -6 -96 -33 -11 -22 -11 -32 0 -55 l13 -27 181 -3 c146 -2
	183 0 193 12 8 9 11 67 9 192 l-3 178 -28 16 c-24 13 -30 13 -55 0 -26 -15
	-27 -20 -30 -100 l-3 -84 -172 171 c-95 94 -181 173 -192 176 -11 3 -30 1 -43
	-3z"
	/>
	</g>
	</svg>
	</div>
	</sp-action-button>
	</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>
	<sp-divider class="line-divider" size="large"></sp-divider>
	<sp-divider class="line-divider" size="large"></sp-divider>
	<div id="scriptsContainer"></div>
	</div>
	</div>
	</div>
	</body>
	</html>