1580158
/
Auto-Photoshop-StableDiffusion-Plugin
mirror of https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin into horde_native

pull/92/head
Abdullah Alfaraj 2023-02-10 19:58:42 +03:00
parent ecd739061e f06f975bb8
commit 6e00f0a960
9 changed files with 74 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -64,10 +64,15 @@ for advance/professional users who want to use the smart masking mode, we have a
# Demo: # Demo:
[![Click Here to Watch Demo](https://i3.ytimg.com/vi/VL_gbQai79E/maxresdefault.jpg)](https://youtu.be/VL_gbQai79E "Stable diffusion AI Photoshop Plugin Free and Open Source") [![Click Here to Watch Demo](https://i3.ytimg.com/vi/VL_gbQai79E/maxresdefault.jpg)](https://youtu.be/VL_gbQai79E "Stable diffusion AI Photoshop Plugin Free and Open Source")
# How to install Video Tutorial: # How to install Video Tutorial:
we recommend you use [the one click installer](#one-click-installer) watch the video to know how to install Automatic1111 Stable Diffusion we recommend you use [the one click installer](#one-click-installer). However watch the video on left if you don't have Automatic1111 Stable Diffusion installed, and the video on the right by Vladimir Chopine for clear instruction on how to install the plugin using UXP.
[![Click Here to Watch How To Install Tutorial](https://user-images.githubusercontent.com/7842232/215471551-2d39c6c2-a765-4eca-bc54-7b386aa25662.png)](https://youtu.be/BNzdhEpFHrg "How To Install Auto Photoshop Stable Diffusion Plugin")
<a href="https://www.youtube.com/watch?v=evjSIfYIQq0&ab_channel=Abdsart" title="How To Install Auto Photoshop Stable Diffusion Plugin by Abdullah Alfaraj" rel="Click Here to Watch How To Install Tutorial by Abdullah Alfaraj"><img src="https://user-images.githubusercontent.com/7842232/217941315-8d4a3b25-1a83-4dac-b921-79b3f82e0536.png" style="width:500px"></a>
<a href="https://www.youtube.com/watch?v=CJuTZw39Reg&t=145s&ab_channel=VladimirChopine%5BGeekatPlay%5D" title="How To Install Auto Photoshop Stable Diffusion Plugin by Vladimir Chopine" rel="Click Here to Watch How To Install Tutorial by Vladimir Chopine"><img src="https://i3.ytimg.com/vi/CJuTZw39Reg/maxresdefault.jpg" style="width:500px"></a>
# Instructional Tutorial (outpaint, inpaint, img2img and txt2img): # Instructional Tutorial (outpaint, inpaint, img2img and txt2img):
we recommend you check the [tutorials](https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin/wiki) section to master the tool.
[![Click Here to Watch Tutorial](http://i3.ytimg.com/vi/evjSIfYIQq0/hqdefault.jpg)](https://www.youtube.com/watch?v=evjSIfYIQq0&ab_channel=Abdsart "Tutorial - Auto Photoshop Stable Diffusion Plugin") [![Click Here to Watch Tutorial](http://i3.ytimg.com/vi/evjSIfYIQq0/hqdefault.jpg)](https://www.youtube.com/watch?v=evjSIfYIQq0&ab_channel=Abdsart "Tutorial - Auto Photoshop Stable Diffusion Plugin")
# How to install: # How to install:
@ -77,7 +82,8 @@ we recommend you use [the one click installer](#one-click-installer)
``` ```
git clone https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin.git git clone https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin.git
``` ```
2) run "start_server.bat" inside "Auto-Photoshop-StableDiffusion-Plugin" directory 2) run "start_se![Uploading How to Install Tutorial 1.png…]()
rver.bat" inside "Auto-Photoshop-StableDiffusion-Plugin" directory
3) go to where you have [automatic1111](https://github.com/AUTOMATIC1111/stable-diffusion-webui) installed. 3) go to where you have [automatic1111](https://github.com/AUTOMATIC1111/stable-diffusion-webui) installed.
Edit the "webui-user.bat" in automatic1111 Edit the "webui-user.bat" in automatic1111
change this line change this line

10
helper.js
View File

@ -107,4 +107,14 @@ async function unSelect() {
return result return result
} }
/**
* Convert 1d index to 2d array
* @param {number} index sequential index
* @param {number} width width of 2d array
* @returns {number[]} [x,y]
*/
function indexToXY(index, width) {
return [index % width, Math.floor(index / width)]
}
module.exports = {} module.exports = {}

1
icon/accept_all.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#32cd32;}.cls-3{fill:none;}.cls-4{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="check_all"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25,3.25,3.25,0,0,0-3.25-3.25Zm-.86,5.23L11,13.78a.19.19,0,0,1,0-.26l.38-.38a.19.19,0,0,1,.26,0l1,1,2.23-2.23a.19.19,0,0,1,.26,0l.38.38a.19.19,0,0,1,0,.26l-2.74,2.74A.19.19,0,0,1,12.46,15.29Z"/><path class="cls-3" d="M3.74,7.78,9,10.46l5.26-2.68L16.56,9c.06,0,.09.07.09.11v-4s0,.08-.09.11L9.21,8.91a.45.45,0,0,1-.42,0L1.44,5.18c-.12-.07-.12-.17,0-.23L8.79,1.21A.5.5,0,0,1,9,1.16H1.35v7.9s0-.08.09-.11Z"/><path class="cls-3" d="M1.44,13.18q-.09-.06-.09-.12V17H9a.39.39,0,0,1-.21-.06Z"/><path class="cls-3" d="M9.21,16.91A.39.39,0,0,1,9,17h3a3.94,3.94,0,0,1-1.3-.8Z"/><path class="cls-3" d="M16.56,5c.06,0,.09.07.09.11V1.16H9a.5.5,0,0,1,.21.05Z"/><path class="cls-3" d="M15.16,9.89a4,4,0,0,1,1.49,1.41V9.06s0,.08-.09.12Z"/><path class="cls-3" d="M3.74,11.78,9,14.46l.53-.27a3.59,3.59,0,0,1-.12-.88,3.19,3.19,0,0,1,.06-.53l-.26.13a.45.45,0,0,1-.42,0L1.44,9.18q-.09-.06-.09-.12v4s0-.08.09-.11Z"/><path class="cls-4" d="M1.44,5c-.12.06-.12.16,0,.23L8.79,8.91a.45.45,0,0,0,.42,0l7.35-3.74c.06,0,.09-.07.09-.11h0s0-.08-.09-.11L9.21,1.21A.5.5,0,0,0,9,1.16H9a.5.5,0,0,0-.21.05Z"/><path class="cls-4" d="M10.69,16.17a3.84,3.84,0,0,1-1.16-2L9,14.46,3.74,11.78,1.44,13c-.06,0-.09.07-.09.11s0,.08.09.12l7.35,3.73a.4.4,0,0,0,.42,0Z"/><path class="cls-4" d="M8.79,12.91a.45.45,0,0,0,.42,0l.26-.13a3.89,3.89,0,0,1,3.85-3.37,3.82,3.82,0,0,1,1.84.48l1.4-.71q.09-.06.09-.12h0s0-.08-.09-.11l-2.3-1.17L9,10.46,3.74,7.78,1.44,9c-.06,0-.09.07-.09.11s0,.08.09.12Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
icon/accept_selected.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#32cd32;}.cls-3{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="check_one"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25,3.25,3.25,0,0,0-3.25-3.25Zm-.86,5.23L11,13.78a.19.19,0,0,1,0-.26l.38-.38a.19.19,0,0,1,.26,0l1,1,2.23-2.23a.19.19,0,0,1,.26,0l.38.38a.19.19,0,0,1,0,.26l-2.74,2.74A.19.19,0,0,1,12.46,15.29Z"/><path class="cls-3" d="M16.65,9.06s0-.08-.09-.11L9.21,5.21a.51.51,0,0,0-.42,0L3.71,7.8,1.44,9c-.12.06-.12.16,0,.23l7.35,3.73a.45.45,0,0,0,.42,0l.26-.13a3.89,3.89,0,0,1,3.85-3.37,3.82,3.82,0,0,1,1.84.48l1.4-.71q.09-.06.09-.12Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 770 B

14
icon/camera_icon.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;fill-opacity:0;}
.st1{fill:#FFFFFF;}
</style>
<rect id="Canvas" class="st0" width="18" height="18"/>
<path class="st1" d="M9,6C7.3,6,6,7.3,6,9s1.3,3,3,3s3-1.3,3-3S10.7,6,9,6z"/>
<path class="st1" d="M16.5,4h-3l-1.7-1.8C11.7,2.1,11.6,2,11.4,2H6.6C6.4,2,6.3,2.1,6.2,2.2L4.5,4h-3C1.2,4,1,4.2,1,4.5v10
C1,14.8,1.2,15,1.5,15h15c0.3,0,0.5-0.2,0.5-0.5v-10C17,4.2,16.8,4,16.5,4z M9,13.1c-2.3,0-4.1-1.8-4.1-4.1c0-2.3,1.8-4.1,4.1-4.1
c2.3,0,4.1,1.8,4.1,4.1S11.3,13.1,9,13.1L9,13.1z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 873 B

1
icon/discard_all.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#ff4500;}.cls-3{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="cross_all"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25A3.25,3.25,0,0,0,13.32,10.06ZM15,14.55a.31.31,0,0,1-.44.44l-1.23-1.24L12.08,15h0a.31.31,0,0,1-.44-.44l1.24-1.24-1.24-1.23a.31.31,0,0,1,0-.44.31.31,0,0,1,.44,0l1.24,1.23,1.23-1.23h0a.3.3,0,0,1,.44,0,.3.3,0,0,1,0,.44l-1.23,1.23Z"/><path class="cls-3" d="M16.56,5,9.21,1.21A.5.5,0,0,0,9,1.16H9a.5.5,0,0,0-.21.05L1.44,5c-.12.06-.12.16,0,.23L8.79,8.91a.45.45,0,0,0,.42,0l7.35-3.74c.06,0,.09-.07.09-.11h0S16.62,5,16.56,5Z"/><path class="cls-3" d="M9,14.46,3.74,11.78,1.44,13c-.06,0-.09.07-.09.11s0,.08.09.12l7.35,3.73a.4.4,0,0,0,.42,0l1.48-.74a3.84,3.84,0,0,1-1.16-2Z"/><path class="cls-3" d="M14.26,7.78,9,10.46,3.74,7.78,1.44,9c-.06,0-.09.07-.09.11s0,.08.09.12l7.35,3.73a.45.45,0,0,0,.42,0l.26-.13a3.89,3.89,0,0,1,3.85-3.37,3.82,3.82,0,0,1,1.84.48l1.4-.71q.09-.06.09-.12h0s0-.08-.09-.11Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
icon/discard_selected.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#ff4500;}.cls-3{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="cross_one"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25A3.25,3.25,0,0,0,13.32,10.06ZM15,14.55a.31.31,0,0,1-.44.44l-1.23-1.24L12.08,15h0a.31.31,0,0,1-.44-.44l1.24-1.24-1.24-1.23a.31.31,0,0,1,0-.44.31.31,0,0,1,.44,0l1.24,1.23,1.23-1.23h0a.3.3,0,0,1,.44,0,.3.3,0,0,1,0,.44l-1.23,1.23Z"/><path class="cls-3" d="M16.65,9h0s0-.08-.09-.11L9.21,5.15a.45.45,0,0,0-.42,0L1.44,8.89c-.12.06-.12.16,0,.22l7.35,3.74a.45.45,0,0,0,.42,0l.26-.13a3.91,3.91,0,0,1,3.85-3.31,3.84,3.84,0,0,1,1.78.44l1.46-.74C16.62,9.08,16.65,9,16.65,9Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 814 B

BIN
icon/reset_settings2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 536 B

83
index.html
View File

@ -137,14 +137,18 @@
background-color: #777; background-color: #777;
color: white; color: white;
cursor: pointer; cursor: pointer;
border: none; border: none;
text-align: left; text-align: left;
outline: none; outline: none;
font-size: 15px; font-size: 15px;
margin: 0; margin: 0;
} }
#btnRefreshModels:hover {
background-color: #333;
}
.btnSquare:hover {
background-color: #333;
}
#btnUpdate { #btnUpdate {
background-color: #3555ac; background-color: #3555ac;
color: white; color: white;
@ -418,8 +422,8 @@
.acceptAllImgBtn { .acceptAllImgBtn {
font-family: Arial, Verdana; font-family: Arial, Verdana;
background-image: url(./icon/accept_all.png); background-image: url(./icon/accept_all.svg);
background-color: transparent; background-color: #777;
background-size: 30px; background-size: 30px;
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -428,8 +432,8 @@
.acceptSelectedImgBtn { .acceptSelectedImgBtn {
font-family: Arial, Verdana; font-family: Arial, Verdana;
background-image: url(./icon/accept_selected.png); background-image: url(./icon/accept_selected.svg);
background-color: transparent; background-color: #777;
background-size: 30px; background-size: 30px;
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -438,8 +442,8 @@
.discardAllImgBtn { .discardAllImgBtn {
font-family: Arial, Verdana; font-family: Arial, Verdana;
background-image: url(./icon/discard_all_border.png); background-image: url(./icon/discard_all.svg);
background-color: transparent; background-color: #777;
background-size: 30px; background-size: 30px;
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -448,9 +452,9 @@
.discardSelectedImgBtn { .discardSelectedImgBtn {
font-family: Arial, Verdana; font-family: Arial, Verdana;
background-image: url(./icon/discard_selected_border.png); background-image: url(./icon/discard_selected.svg);
background-color: transparent; background-color: #777;
background-size: 24px; background-size: 30px;
width: 30px; width: 30px;
height: 30px; height: 30px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -458,8 +462,8 @@
.resetButton { .resetButton {
font-family: Arial, Verdana; font-family: Arial, Verdana;
background-image: url(./icon/reset_settings.png); background-image: url(./icon/reset_settings2.png);
background-color: transparent; background-color: #777;
background-size: 30px; background-size: 30px;
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -468,8 +472,8 @@
.snapshotButton { .snapshotButton {
font-family: Arial, Verdana; font-family: Arial, Verdana;
background-image: url(./icon/camera_icon.png); background-image: url(./icon/camera_icon.svg);
background-color: transparent; background-color: #777;
background-size: 30px; background-size: 30px;
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -526,27 +530,16 @@
</div> </div>
<div></div> <div></div>
<div> <div>
<button class="btnSquare" id="btnSetMaskViewer"> <button class="btnSquare" id="btnSetMaskViewer"> Set Mask </button>
Set Mask <button class="btnSquare" id="btnSetInitImageViewer"> Set Init Image </button>
</button> <button class="btnSquare btnGenerateClass" id="btnGenerate"> Generate txt2img </button>
<button class="btnSquare" id="btnSetInitImageViewer">
Set Init Image
</button>
<button class="btnSquare btnGenerateClass" id="btnGenerate">
Generate txt2img
</button>
<button <button
class="btnSquare btnInterruptClass" class="btnSquare btnInterruptClass"
id="btnInterruptViewer" id="btnInterruptViewer"
style="display: none" style="display: none"
> > Interrupt </button>
Interrupt <button class="btnSquare" id="btnSelectionArea"> Selection Area </button>
</button> <div style="display: flex; justify-content: flex-start; padding-top: 3px;">
<button class="btnSquare" id="btnSelectionArea">
Selection Area
</button>
<div style="display: flex; justify-content: space-between">
<!-- <button class="btnSquare acceptClass acceptAllImgBtn" style="display:none;">Accept All</button> <!-- <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 discardClass discardAllImgBtn" style="display:none;">Discard All</button>
<button class="btnSquare acceptSelectedClass acceptSelectedImgBtn" style="display:none;">Accept Selected</button> <button class="btnSquare acceptSelectedClass acceptSelectedImgBtn" style="display:none;">Accept Selected</button>
@ -554,22 +547,22 @@
<button <button
title="Keep all generated images on the canvas" title="Keep all generated images on the canvas"
class="btnSquare acceptClass acceptAllImgBtn" class="btnSquare acceptClass acceptAllImgBtn"
style="display: none" style="display: none; margin-right: 3px;"
></button> ></button>
<button <button
title="Delete all generated images from the canvas" title="Delete all generated images from the canvas"
class="btnSquare discardClass discardAllImgBtn" class="btnSquare discardClass discardAllImgBtn"
style="display: none" style="display: none; margin-right: 3px;"
></button> ></button>
<button <button
title="Keep only the highlighted images" title="Keep only the highlighted images"
class="btnSquare acceptSelectedClass acceptSelectedImgBtn" class="btnSquare acceptSelectedClass acceptSelectedImgBtn"
style="display: none" style="display: none; margin-right: 3px;"
></button> ></button>
<button <button
title="Delete only the highlighted images" title="Delete only the highlighted images"
class="btnSquare discardSelectedClass discardSelectedImgBtn" class="btnSquare discardSelectedClass discardSelectedImgBtn"
style="display: none" style="display: none; margin-right: 3px;"
></button> ></button>
</div> </div>
@ -804,7 +797,7 @@
id="sp-stable-diffusion-ui-tab-page" id="sp-stable-diffusion-ui-tab-page"
> >
<div id="menu-bar-container"> <div id="menu-bar-container">
<sp-picker size="m" label="Selection type"> <sp-picker size="m" label="Selection type" style="margin-right: 3px;">
<sp-menu id="mModelsMenu" slot="options"> <sp-menu id="mModelsMenu" slot="options">
<!-- <sp-menu-item> item </sp-menu-item> --> <!-- <sp-menu-item> item </sp-menu-item> -->
</sp-menu> </sp-menu>
@ -840,6 +833,7 @@
<button <button
class="btnSquare" class="btnSquare"
id="btnLayerToSelection" id="btnLayerToSelection"
style="margin-right: 3px;"
title="Move and reSize the highlighted layer to fit into the Selection Area " title="Move and reSize the highlighted layer to fit into the Selection Area "
> >
L2S L2S
@ -863,33 +857,30 @@
<div <div
style=" style="
display: inline-flex; display: inline-flex;
justify-content: space-between; justify-content: flex-start;
width: 133px; width: 133px;
" "
> >
<button <button
class="btnSquare acceptClass acceptAllImgBtn" class="btnSquare acceptClass acceptAllImgBtn"
style="display: none" style="display: none; margin-right: 3px"
></button> ></button>
<button <button
class="btnSquare discardClass discardAllImgBtn" class="btnSquare discardClass discardAllImgBtn"
style="display: none" style="display: none; margin-right: 3px"
></button> ></button>
<!-- <button class="btnSquare customClass" style="display:none;">Accept Selected</button> --> <!-- <button class="btnSquare customClass" style="display:none;">Accept Selected</button> -->
<button <button
class="btnSquare snapshotButton" class="btnSquare snapshotButton"
id="btnSnapshot" id="btnSnapshot"
style="margin-right: 3px;"
title="create a snapshot of what you see on the canvas and place on a new layer" title="create a snapshot of what you see on the canvas and place on a new layer"
> ></button>
Snapshot
</button>
<button <button
class="btnSquare resetButton" class="btnSquare resetButton"
id="btnResetSettings" id="btnResetSettings"
title="reset the ui settings to their default values" title="reset the ui settings to their default values"
> ></button>
Reset Settings
</button>
<!-- <button class="btnSquare" id="btnLinkCurrentDocument">Link Current Document</button> --> <!-- <button class="btnSquare" id="btnLinkCurrentDocument">Link Current Document</button> -->
</div> </div>