Giter VIP home page Giter VIP logo

sd-webui-photopea-embed's Introduction

🦜 Photopea Stable Diffusion WebUI Extension

Demo video

Photopea is essentially Photoshop in a browser. This is a simple extension to add a Photopea tab to AUTOMATIC1111 Stable Diffusion WebUI.

In the tab, you will have an embedded Photopea editor and a few buttons to send the image to different WebUI sections, and also buttons to send generated content to the embeded Photopea.

Consider supporting Photopea by going premium!

Also consider using the much better integrated (and more actively maintained) Stable Diffusion PS Pea extension by huchenlei!

Installation

On your Stable Diffusion WebUI, click the Extensions tab, then the Install from URL internal tab in that section. Paste the URL for this repo and click Install.

Usage

In the Photopea extension tab, you will have the embedded Photopea window. It literally just embeds the exact same Photopea you'd have when accessing the website directly. You can learn how to use Photopea in their official documentation.

Options:

  • Active Layer Only: if this box is ticked, only the currently selected layer in Photopea will be sent to the WebUI when using one of the buttons.
  • iFrame height: by default, the Photopea embed is 768px tall, and 100% wide. If you have more or less monitor real estate, you can use the slider to increase or decrease the size of the Photopea window in your tab.

Buttons:

  • Send to Extras: sends the currently opened image's flattened contents to the Extras tab. Useful for upscaling etc.
  • Send to img2img: same as above, but sends the image to the img2img tab.
  • Inpaint Selection: in case there's an area selected in the active document, will create a mask with that shape and send both the mask and the image to img2img's "Inpaint Upload" tab.

ControlNet:

In case you have the ControlNet extension installed, you'll also have:

  • ControlNet model index dropdown menu: in the WebUI Settings tab, you can set up more than one ControlNet to be run at the same time. This dropdown lets you choose which model the image will be sent to.
  • Send to txt2img ControlNet button: sends the image to ControlNet in the txt2img tab.
  • Send to img2img ControlNet button: sends the image to ControlNet in the ixt2img tab.

WebUI image galleries

In the txt2txt, img2img and extras tab galleries (where your generated images appear), there will also be a Send to Photopea button. You can press it to send the currently selected image back to the Photopea tab. It will be added as a new rasterized layer to the currently open document.

You can also copy and paste the generated results normally into Photopea, and have multiple documents open etc.

Known bugs:

  • When large files are passed in, they might not instantly be rasterized (this happens due to Photopea loading the image asynchronously, but sending the response to the load request before the image is fully loaded).
  • In some scenarios, the `Send to Photopea`` buttons do not work. This appears to happen when they are created before the galleries are fully initialized. If you encounter this, try restarting the UI. If you have clear repro steps, please create an issue or comment to an existing one.

Changelog

2023-09-30

  • Fixes a bug that would not properly show ControlNet index dropdown
  • Fixes a bug where it would not be possible to send to different ControlNet units
  • Changes the Send to Photopea button to match the new UI style, officially adopting 🦜 as a mascot

2023-06-17

  • Fixed ControlNet tab auto-uncollapse when sending images from Photopea.
  • Patched Send to Photopea on Vladmandic fork (solution suggested by bananasss00)
  • Fixed a bug where Send to Photopea would not appear when using --hide-ui-dir-config (solution suggested by Odls)

2023-05-13

  • Added Send to Photopea button in the extras tab.
  • Fixed a bug where exporting a single layer, or using inpaint selection, would not work on documents with folders in them.

Code & Usage Licenses

I've tried to comment the code thoroughly, especially because it's mostly JS hacks. Feel free to take it apart and reuse it.

When it comes to usage of the extension, I'm adding restriction guidelines from CreativeML Open RAIL-M license.

You agree not to use the extension or derivatives of the extension:

  • In any way that violates any applicable national, federal, state, local or international law or regulation;

  • For the purpose of exploiting, harming or attempting to exploit or harm minors in any way;

  • To generate or disseminate verifiably false information and/or content with the purpose of harming others;

  • To generate or disseminate personal identifiable information that can be used to harm an individual;

  • To defame, disparage or otherwise harass others;

  • For fully automated decision making that adversely impacts an individual’s legal rights or otherwise creates or modifies a binding, enforceable obligation;

  • For any use intended to or which has the effect of discriminating against or harming individuals or groups based on online or offline social behavior or known or predicted personal or personality characteristics;

  • To exploit any of the vulnerabilities of a specific group of persons based on their age, social, physical or mental characteristics, in order to materially distort the behavior of a person pertaining to that group in a manner that causes or is likely to cause that person or another person physical or psychological harm;

  • For any use intended to or which has the effect of discriminating against individuals or groups based on legally protected characteristics or categories;

  • To provide medical advice and medical results interpretation;

  • To generate or disseminate information for the purpose to be used for administration of justice, law enforcement, immigration or asylum processes, such as predicting an individual will commit fraud/crime commitment (e.g. by text profiling, drawing causal relationships between assertions made in documents, indiscriminate and arbitrarily-targeted use).


sd-webui-photopea-embed's People

Contributors

yankooliveira avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sd-webui-photopea-embed's Issues

Add the button to send from extras(upscale tab) to photopea

Add the button to send from upscale tab to photopea. It would have been extremely nice if that button had been there.
изображение
Right now I only see the button from the photopea tab in extras. If there was a send button from extras, this case would work:

txt2img -> photopea(edit some part) -> extras -> back to photopea with upscaled image.

Can't normalize the view

Screenshot 2023-10-12 220832
When I load Automatic1111 I have a window almost fully occupied by a "grey" zone. I can't remove or slide it aside so my working area stays drastically small. If I send a image from img2img it just appears in a small area on the left side.
I tried to delete extention and re-install it but all is the same. Updated to latest version of photopea
Before it was ok, I had no issues

"Sent to" buttons are broken

Steps:

  1. Generate image on txt2img tab
  2. Sent to photopea
  3. Press send to img2img / send to extras tab
    Expected result: Image is visible and you can work with it
    Actual result:
    Image is not loaded
    image

Same happens if you add step 2.1: Select part of and object and click to inpaint selection. It never loads both image and mask properly

Here is some console output.
File "D:\automatic-stable-diffusion\system\python\lib\site-packages\gradio\processing_utils.py", line 59, in decode_base64_to_image
img = Image.open(BytesIO(base64.b64decode(image_encoded)))
File "D:\automatic-stable-diffusion\system\python\lib\site-packages\PIL\Image.py", line 3298, in open
raise UnidentifiedImageError(msg)
PIL.UnidentifiedImageError: cannot identify image file <_io.BytesIO object at 0x000001A5DC5EE930>

Working window width

The width of the entire iFrame is reserved, but the width of the working Window is narrow. Is there any way to fix this?

2023-06-14_0000_NoName

Magic Replace tool

Will you be adding an update allowing the new Magic Replace tool to be visible/active? I see it on the online version, but it is not loading in the Stable Diffusion version.
magicReplace

no selection in active document

I can't send the image over to inpaint.

all the other buttons work such as:

  1. send to img2img controlnet
  2. send to extras
  3. send to txt2img controlnet
  4. send to img2img

inpaint selection I get a "no selection in active document"

DBFE3330-316F-44F0-9834-3712830C7AF9.MP4

[Feature Request]: Support tablets

Using a mouse when trying to "paint" delicate forms can get quite cumbersome fast.
I would like to suggest to support pens and tablets like we use in Photoshop. If necessary even as a checkbox option to switch on and off.
Would be really great! 🙂

Can't see the layers panel on a zoomed page :-)

My laptop's screen resolution is 2560x1440. So I need to load pages in FF in 133%. And I don't see the layers panel. Only the canvas and the left side of photopea. Even if I toggle page width resizing the window, Photopea will not resize its frame.

If I reload my webui in 100% scale and open Photopea then all works fine. Even if I rescale it back in 133% - I see all the Photopea panels in 133%.

Is it possible to change the frame width or something like that? :-)

Sending to "inpaint upload" doesn't work

I can use all other functions, but sending a active selection in photopea to "inpaint upload" doesn't work. I deactivated my other extensions and restarted A1111, but that didn't change anything
This both doesn't work on Opera and Chrome Browser under Windows 11 for me

bilingual-localization break 'Inpaint selection' button

My main language is Chinese, so I have been using [bilingual-localization] to display both Chinese and English.

In the file photopea-bindings.js, at line 63, the [Inpaint selection] button get Inpaint tab using the following code:

Array.from(allButtons).find(button => button.textContent === 'Inpaint upload ');

However, [bilingual-localization] changes the value of textContent to '修復上傳 Inpaint upload ', which causes [Inpaint selection] can't find the Inpaint tab and therefore not work correctly.

In my own copy, I have modified it to:

Array.from(allButtons).find(button => button.textContent.endsWith('Inpaint upload '));

This works fine for me, but there might be other users who did not using bilingual-localization but the original localization feature of SD-WebUI.
This could result in the disappearance of the latter part of 'Inpaint upload ', leaving only the text in another language.
Using 'endsWith' might not be a solution for them.

Is there a more precise way to get Inpaint tab that avoids the localization break [Inpaint selection] functionality?

When using the --hide-ui-dir-config parameter, [Send to Photopea] button is not displayed.

In the photopea-bindings.js file at line 32, this code generates the [Send to Photopea] button:

function createSendToPhotopeaButton(queryId, gallery) {
    const existingButton = gradioApp().querySelector(`#${queryId} button`);
    const newButton = existingButton.cloneNode(true);
    newButton.id = `${queryId}_open_in_photopea`;
    newButton.textContent = "Send to Photopea";
    newButton.addEventListener("click", () => openImageInPhotopea(gallery));
    gradioApp().querySelector(`#${queryId}`).appendChild(newButton);
}

It clones the first button inside #${queryId}, which is [Open images output directory] button.

When using the --hide-ui-dir-config parameter, this button is hidden, and the cloned [Send to Photopea] button is also hidden.

Set display to "flex" in createSendToPhotopeaButton should solve this problem:

newButton.style.display = "flex";

send to inpaint is missing...

Theres only send to img2img and inpaint upload, but not send to inpaint which is the one i personally use the most, can you add that in?

[Feature Request] Inpaint masked instead of selected

Selection is often short-lived, and users generally have less control on the selection than mask on an image. Should we consider use the actual mask attached to the image in Photopea as the inpaint mask in A1111?

Interface looks wired

After installing the extension and reloading the ui, the photopea interface shows like below.截屏2023-06-13 14 30 31

[Feature Request]: Controlnet masking for replacement Adobe Firefly Generative Fill

Here are some new control net features instructions.
Mikubill/sd-webui-controlnet#1464
The above functionality shows how to use Controlnet to mimic Adobe Firefly Generative Fill.

As a replacement for Adobe Firefly Generative Fill, how about adding the ability to send the same functionality as inpaint selection to text to image control net?

Currently, Controlnet's masking capabilities are clearly limited to completely masking the desired area.

[Bug] Not correctly handle layer.typename

Following code has issue checking whether a layer is of type LayerSet.

    // Gets all layers recursively, including the ones inside folders.
    function getAllArtLayers (document, layerCollection){
        for (var i = 0; i < document.layers.length; i++){
            var currentLayer = document.layers[i];
            if (currentLayer.typename === "ArtLayer"){
                layerCollection.push(currentLayer);
            } else {
                getAllArtLayers(currentLayer, layerCollection);
            }
        }
        return layerCollection;
    }

There are many other layer types other than ArtLayer and LayerSet:

  1. ArtLayer: This is the most basic type of layer, containing raster images, text, or solid colors.

  2. LayerSet: A layer set, or a group of layers, which can contain other ArtLayers or LayerSets.

  3. TextItem: This represents a text layer. It is not a type of layer by itself, but an object contained in an ArtLayer that you can manipulate if the ArtLayer.kind property is LayerKind.TEXT.

  4. SolidFill: This represents a solid color fill layer. Similar to TextItem, it's an object you would manipulate if ArtLayer.kind is LayerKind.SOLIDFILL.

  5. SmartObjectLayer: This represents a Smart Object layer. Smart Objects are layers that contain image data from raster or vector images, and they preserve an image’s source content with all its original characteristics.

  6. AdjustmentLayer: This represents an adjustment layer. Adjustment layers are used to apply color and tonal adjustments without permanently changing the underlying pixel values.

So if any of those layers appears on the canvas but don't have layers defined on them, the program will error out.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.