diff --git a/README.md b/README.md index ff06db8d21..f540e7be75 100644 --- a/README.md +++ b/README.md @@ -2,21 +2,102 @@ ![project hero](https://github.com/invoke-ai/InvokeAI/assets/31807370/6e3728c7-e90e-4711-905c-3b55844ff5be) -# Invoke - Professional Creative AI Tools for Visual Media -## To learn more about Invoke, or implement our Business solutions, visit [invoke.com](https://www.invoke.com/about) - +# Invoke - Professional Creative AI Tools for Visual Media +#### To learn more about Invoke, or implement our Business solutions, visit [invoke.com] -[![discord badge]][discord link] +[![discord badge]][discord link] [![latest release badge]][latest release link] [![github stars badge]][github stars link] [![github forks badge]][github forks link] [![CI checks on main badge]][CI checks on main link] [![latest commit to main badge]][latest commit to main link] [![github open issues badge]][github open issues link] [![github open prs badge]][github open prs link] [![translation status badge]][translation status link] -[![latest release badge]][latest release link] [![github stars badge]][github stars link] [![github forks badge]][github forks link] + -[![CI checks on main badge]][CI checks on main link] [![latest commit to main badge]][latest commit to main link] +Invoke is a leading creative engine built to empower professionals and enthusiasts alike. Generate and create stunning visual media using the latest AI-driven technologies. Invoke offers an industry leading web-based UI, and serves as the foundation for multiple commercial products. -[![github open issues badge]][github open issues link] [![github open prs badge]][github open prs link] [![translation status badge]][translation status link] +[Installation][installation docs] - [Documentation and Tutorials][docs home] - [Bug Reports][github issues] - [Contributing][contributing docs] +
+ +![Highlighted Features - Canvas and Workflows](https://github.com/invoke-ai/InvokeAI/assets/31807370/708f7a82-084f-4860-bfbe-e2588c53548d) + +
+ +## Quick Start + +1. Download and unzip the installer from the bottom of the [latest release][latest release link]. +2. Run the installer script. + + - **Windows**: Double-click on the `install.bat` script. + - **macOS**: Open a Terminal window, drag the file `install.sh` from Finder into the Terminal, and press enter. + - **Linux**: Run `install.sh`. + +3. When prompted, enter a location for the install and select your GPU type. +4. Once the install finishes, find the directory you selected during install. The default location is `C:\Users\Username\invokeai` for Windows or `~/invokeai` for Linux/macOS. +5. Run the launcher script (`invoke.bat` for Windows, `invoke.sh` for macOS and Linux) the same way you ran the installer script in step 2. +6. Select option 1 to start the application. Once it starts up, open your browser and go to . +7. Open the model manager tab to install a starter model and then you'll be ready to generate. + +More detail, including hardware requirements and manual install instructions, are available in the [installation documentation][installation docs]. + +## Troubleshooting, FAQ and Support + +Please review our [FAQ][faq] for solutions to common installation problems and other issues. + +For more help, please join our [Discord][discord link]. + +## Features + +Full details on features can be found in [our documentation][features docs]. + +### Web Server & UI + +Invoke runs a locally hosted web server & React UI with an industry-leading user experience. + +### Unified Canvas + +The Unified Canvas is a fully integrated canvas implementation with support for all core generation capabilities, in/out-painting, brush tools, and more. This creative tool unlocks the capability for artists to create with AI as a creative collaborator, and can be used to augment AI-generated imagery, sketches, photography, renders, and more. + +### Workflows & Nodes + +Invoke offers a fully featured workflow management solution, enabling users to combine the power of node-based workflows with the easy of a UI. This allows for customizable generation pipelines to be developed and shared by users looking to create specific workflows to support their production use-cases. + +### Board & Gallery Management + +Invoke features an organized gallery system for easily storing, accessing, and remixing your content in the Invoke workspace. Images can be dragged/dropped onto any Image-base UI element in the application, and rich metadata within the Image allows for easy recall of key prompts or settings used in your workflow. + +### Other features + +- Support for both ckpt and diffusers models +- SD1.5, SD2.0, and SDXL support +- Upscaling Tools +- Embedding Manager & Support +- Model Manager & Support +- Workflow creation & management +- Node-Based Architecture + +## Contributing + +Anyone who wishes to contribute to this project - whether documentation, features, bug fixes, code cleanup, testing, or code reviews - is very much encouraged to do so. + +Get started with contributing by reading our [contribution documentation][contributing docs], joining the [#dev-chat] or the GitHub discussion board. + +We hope you enjoy using Invoke as much as we enjoy creating it, and we hope you will elect to become part of our community. + +## Thanks + +Invoke is a combined effort of [passionate and talented people from across the world][contributors]. We thank them for their time, hard work and effort. + +Original portions of the software are Copyright © 2024 by respective contributors. + +[features docs]: https://invoke-ai.github.io/InvokeAI/features/ +[faq]: https://invoke-ai.github.io/InvokeAI/help/FAQ/ +[contributors]: https://invoke-ai.github.io/InvokeAI/other/CONTRIBUTORS/ +[invoke.com]: https://www.invoke.com/about +[github issues]: https://github.com/invoke-ai/InvokeAI/issues +[docs home]: https://invoke-ai.github.io/InvokeAI +[installation docs]: https://invoke-ai.github.io/InvokeAI/installation/INSTALLATION/ +[#dev-chat]: https://discord.com/channels/1020123559063990373/1049495067846524939 +[contributing docs]: https://invoke-ai.github.io/InvokeAI/contributing/CONTRIBUTING/ [CI checks on main badge]: https://flat.badgen.net/github/checks/invoke-ai/InvokeAI/main?label=CI%20status%20on%20main&cache=900&icon=github -[CI checks on main link]:https://github.com/invoke-ai/InvokeAI/actions?query=branch%3Amain +[CI checks on main link]: https://github.com/invoke-ai/InvokeAI/actions?query=branch%3Amain [discord badge]: https://flat.badgen.net/discord/members/ZmtBAhwWhy?icon=discord [discord link]: https://discord.gg/ZmtBAhwWhy [github forks badge]: https://flat.badgen.net/github/forks/invoke-ai/InvokeAI?icon=github @@ -30,402 +111,6 @@ [latest commit to main badge]: https://flat.badgen.net/github/last-commit/invoke-ai/InvokeAI/main?icon=github&color=yellow&label=last%20dev%20commit&cache=900 [latest commit to main link]: https://github.com/invoke-ai/InvokeAI/commits/main [latest release badge]: https://flat.badgen.net/github/release/invoke-ai/InvokeAI/development?icon=github -[latest release link]: https://github.com/invoke-ai/InvokeAI/releases +[latest release link]: https://github.com/invoke-ai/InvokeAI/releases/latest [translation status badge]: https://hosted.weblate.org/widgets/invokeai/-/svg-badge.svg [translation status link]: https://hosted.weblate.org/engage/invokeai/ - - - -InvokeAI is a leading creative engine built to empower professionals -and enthusiasts alike. Generate and create stunning visual media using -the latest AI-driven technologies. InvokeAI offers an industry leading -Web Interface, interactive Command Line Interface, and also serves as -the foundation for multiple commercial products. - -**Quick links**: [[How to - Install](https://invoke-ai.github.io/InvokeAI/installation/INSTALLATION/)] [Discord Server] [Documentation and - Tutorials] - [Bug Reports] - [Discussion, - Ideas & Q&A] - [Contributing] - -
- - -![Highlighted Features - Canvas and Workflows](https://github.com/invoke-ai/InvokeAI/assets/31807370/708f7a82-084f-4860-bfbe-e2588c53548d) - - -
- -## Table of Contents - -Table of Contents 📝 - -**Getting Started** -1. 🏁 [Quick Start](#quick-start) -3. 🖥️ [Hardware Requirements](#hardware-requirements) - -**More About Invoke** -1. 🌟 [Features](#features) -2. 📣 [Latest Changes](#latest-changes) -3. 🛠️ [Troubleshooting](#troubleshooting) - -**Supporting the Project** -1. 🤝 [Contributing](#contributing) -2. 👥 [Contributors](#contributors) -3. 💕 [Support](#support) - -## Quick Start - -For full installation and upgrade instructions, please see: -[InvokeAI Installation Overview](https://invoke-ai.github.io/InvokeAI/installation/INSTALLATION/) - -If upgrading from version 2.3, please read [Migrating a 2.3 root -directory to 3.0](#migrating-to-3) first. - -### Automatic Installer (suggested for 1st time users) - -1. Go to the bottom of the [Latest Release Page](https://github.com/invoke-ai/InvokeAI/releases/latest) - -2. Download the .zip file for your OS (Windows/macOS/Linux). - -3. Unzip the file. - -4. **Windows:** double-click on the `install.bat` script. **macOS:** Open a Terminal window, drag the file `install.sh` from Finder -into the Terminal, and press return. **Linux:** run `install.sh`. - -5. You'll be asked to confirm the location of the folder in which -to install InvokeAI and its image generation model files. Pick a -location with at least 15 GB of free memory. More if you plan on -installing lots of models. - -6. Wait while the installer does its thing. After installing the software, -the installer will launch a script that lets you configure InvokeAI and -select a set of starting image generation models. - -7. Find the folder that InvokeAI was installed into (it is not the -same as the unpacked zip file directory!) The default location of this -folder (if you didn't change it in step 5) is `~/invokeai` on -Linux/Mac systems, and `C:\Users\YourName\invokeai` on Windows. This directory will contain launcher scripts named `invoke.sh` and `invoke.bat`. - -8. On Windows systems, double-click on the `invoke.bat` file. On -macOS, open a Terminal window, drag `invoke.sh` from the folder into -the Terminal, and press return. On Linux, run `invoke.sh` - -9. Press 2 to open the "browser-based UI", press enter/return, wait a -minute or two for Stable Diffusion to start up, then open your browser -and go to http://localhost:9090. - -10. Type `banana sushi` in the box on the top left and click `Invoke` - -### Command-Line Installation (for developers and users familiar with Terminals) - -You must have Python 3.10 through 3.11 installed on your machine. Earlier or -later versions are not supported. -Node.js also needs to be installed along with `pnpm` (can be installed with -the command `npm install -g pnpm` if needed) - -1. Open a command-line window on your machine. The PowerShell is recommended for Windows. -2. Create a directory to install InvokeAI into. You'll need at least 15 GB of free space: - - ```terminal - mkdir invokeai - ```` - -3. Create a virtual environment named `.venv` inside this directory and activate it: - - ```terminal - cd invokeai - python -m venv .venv --prompt InvokeAI - ``` - -4. Activate the virtual environment (do it every time you run InvokeAI) - - _For Linux/Mac users:_ - - ```sh - source .venv/bin/activate - ``` - - _For Windows users:_ - - ```ps - .venv\Scripts\activate - ``` - -5. Install the InvokeAI module and its dependencies. Choose the command suited for your platform & GPU. - - _For Windows/Linux with an NVIDIA GPU:_ - - ```terminal - pip install "InvokeAI[xformers]" --use-pep517 --extra-index-url https://download.pytorch.org/whl/cu121 - ``` - - _For Linux with an AMD GPU:_ - - ```sh - pip install InvokeAI --use-pep517 --extra-index-url https://download.pytorch.org/whl/rocm5.6 - ``` - - _For non-GPU systems:_ - ```terminal - pip install InvokeAI --use-pep517 --extra-index-url https://download.pytorch.org/whl/cpu - ``` - - _For Macintoshes, either Intel or M1/M2/M3:_ - - ```sh - pip install InvokeAI --use-pep517 - ``` - -6. Configure InvokeAI and install a starting set of image generation models (you only need to do this once): - - ```terminal - invokeai-configure --root . - ``` - Don't miss the dot at the end! - -7. Launch the web server (do it every time you run InvokeAI): - - ```terminal - invokeai-web - ``` - -8. Point your browser to http://localhost:9090 to bring up the web interface. - -9. Type `banana sushi` in the box on the top left and click `Invoke`. - -Be sure to activate the virtual environment each time before re-launching InvokeAI, -using `source .venv/bin/activate` or `.venv\Scripts\activate`. - -## Detailed Installation Instructions - -This fork is supported across Linux, Windows and Macintosh. Linux -users can use either an Nvidia-based card (with CUDA support) or an -AMD card (using the ROCm driver). For full installation and upgrade -instructions, please see: -[InvokeAI Installation Overview](https://invoke-ai.github.io/InvokeAI/installation/INSTALL_SOURCE/) - - -### Migrating a v2.3 InvokeAI root directory - -The InvokeAI root directory is where the InvokeAI startup file, -installed models, and generated images are stored. It is ordinarily -named `invokeai` and located in your home directory. The contents and -layout of this directory has changed between versions 2.3 and 3.0 and -cannot be used directly. - -We currently recommend that you use the installer to create a new root -directory named differently from the 2.3 one, e.g. `invokeai-3` and -then use a migration script to copy your 2.3 models into the new -location. However, if you choose, you can upgrade this directory in -place. This section gives both recipes. - -#### Creating a new root directory and migrating old models - -This is the safer recipe because it leaves your old root directory in -place to fall back on. - -1. Follow the instructions above to create and install InvokeAI in a -directory that has a different name from the 2.3 invokeai directory. -In this example, we will use "invokeai-3" - -2. When you are prompted to select models to install, select a minimal -set of models, such as stable-diffusion-v1.5 only. - -3. After installation is complete launch `invokeai.sh` (Linux/Mac) or -`invokeai.bat` and select option 8 "Open the developers console". This -will take you to the command line. - -4. Issue the command `invokeai-migrate3 --from /path/to/v2.3-root --to -/path/to/invokeai-3-root`. Provide the correct `--from` and `--to` -paths for your v2.3 and v3.0 root directories respectively. - -This will copy and convert your old models from 2.3 format to 3.0 -format and create a new `models` directory in the 3.0 directory. The -old models directory (which contains the models selected at install -time) will be renamed `models.orig` and can be deleted once you have -confirmed that the migration was successful. - - If you wish, you can pass the 2.3 root directory to both `--from` and -`--to` in order to update in place. Warning: this directory will no -longer be usable with InvokeAI 2.3. - -#### Migrating in place - -For the adventurous, you may do an in-place upgrade from 2.3 to 3.0 -without touching the command line. ***This recipe does not work on -Windows platforms due to a bug in the Windows version of the 2.3 -upgrade script.** See the next section for a Windows recipe. - -##### For Mac and Linux Users: - -1. Launch the InvokeAI launcher script in your current v2.3 root directory. - -2. Select option [9] "Update InvokeAI" to bring up the updater dialog. - -3. Select option [1] to upgrade to the latest release. - -4. Once the upgrade is finished you will be returned to the launcher -menu. Select option [6] "Re-run the configure script to fix a broken -install or to complete a major upgrade". - -This will run the configure script against the v2.3 directory and -update it to the 3.0 format. The following files will be replaced: - - - The invokeai.init file, replaced by invokeai.yaml - - The models directory - - The configs/models.yaml model index - -The original versions of these files will be saved with the suffix -".orig" appended to the end. Once you have confirmed that the upgrade -worked, you can safely remove these files. Alternatively you can -restore a working v2.3 directory by removing the new files and -restoring the ".orig" files' original names. - -##### For Windows Users: - -Windows Users can upgrade with the - -1. Enter the 2.3 root directory you wish to upgrade -2. Launch `invoke.sh` or `invoke.bat` -3. Select the "Developer's console" option [8] -4. Type the following commands - -``` -pip install "invokeai @ https://github.com/invoke-ai/InvokeAI/archive/refs/tags/v3.0.0" --use-pep517 --upgrade -invokeai-configure --root . -``` -(Replace `v3.0.0` with the current release number if this document is out of date). - -The first command will install and upgrade new software to run -InvokeAI. The second will prepare the 2.3 directory for use with 3.0. -You may now launch the WebUI in the usual way, by selecting option [1] -from the launcher script - -#### Migrating Images - -The migration script will migrate your invokeai settings and models, -including textual inversion models, LoRAs and merges that you may have -installed previously. However it does **not** migrate the generated -images stored in your 2.3-format outputs directory. To do this, you -need to run an additional step: - -1. From a working InvokeAI 3.0 root directory, start the launcher and -enter menu option [8] to open the "developer's console". - -2. At the developer's console command line, type the command: - -```bash -invokeai-import-images -``` - -3. This will lead you through the process of confirming the desired - source and destination for the imported images. The images will - appear in the gallery board of your choice, and contain the - original prompt, model name, and other parameters used to generate - the image. - -(Many kudos to **techjedi** for contributing this script.) - -## Hardware Requirements - -InvokeAI is supported across Linux, Windows and macOS. Linux -users can use either an Nvidia-based card (with CUDA support) or an -AMD card (using the ROCm driver). - -### System - -You will need one of the following: - -- An NVIDIA-based graphics card with 4 GB or more VRAM memory. 6-8 GB - of VRAM is highly recommended for rendering using the Stable - Diffusion XL models -- An Apple computer with an M1 chip. -- An AMD-based graphics card with 4GB or more VRAM memory (Linux - only), 6-8 GB for XL rendering. - -We do not recommend the GTX 1650 or 1660 series video cards. They are -unable to run in half-precision mode and do not have sufficient VRAM -to render 512x512 images. - -**Memory** - At least 12 GB Main Memory RAM. - -**Disk** - At least 12 GB of free disk space for the machine learning model, Python, and all its dependencies. - -## Features - -Feature documentation can be reviewed by navigating to [the InvokeAI Documentation page](https://invoke-ai.github.io/InvokeAI/features/) - -### *Web Server & UI* - -InvokeAI offers a locally hosted Web Server & React Frontend, with an industry leading user experience. The Web-based UI allows for simple and intuitive workflows, and is responsive for use on mobile devices and tablets accessing the web server. - -### *Unified Canvas* - -The Unified Canvas is a fully integrated canvas implementation with support for all core generation capabilities, in/outpainting, brush tools, and more. This creative tool unlocks the capability for artists to create with AI as a creative collaborator, and can be used to augment AI-generated imagery, sketches, photography, renders, and more. - -### *Workflows & Nodes* - -InvokeAI offers a fully featured workflow management solution, enabling users to combine the power of nodes based workflows with the easy of a UI. This allows for customizable generation pipelines to be developed and shared by users looking to create specific workflows to support their production use-cases. - -### *Board & Gallery Management* - -Invoke AI provides an organized gallery system for easily storing, accessing, and remixing your content in the Invoke workspace. Images can be dragged/dropped onto any Image-base UI element in the application, and rich metadata within the Image allows for easy recall of key prompts or settings used in your workflow. - -### Other features - -- *Support for both ckpt and diffusers models* -- *SD 2.0, 2.1, XL support* -- *Upscaling Tools* -- *Embedding Manager & Support* -- *Model Manager & Support* -- *Workflow creation & management* -- *Node-Based Architecture* - - -### Latest Changes - -For our latest changes, view our [Release -Notes](https://github.com/invoke-ai/InvokeAI/releases) and the -[CHANGELOG](docs/CHANGELOG.md). - -### Troubleshooting / FAQ - -Please check out our **[FAQ](https://invoke-ai.github.io/InvokeAI/help/FAQ/)** to get solutions for common installation -problems and other issues. For more help, please join our [Discord][discord link] - -## Contributing - -Anyone who wishes to contribute to this project, whether documentation, features, bug fixes, code -cleanup, testing, or code reviews, is very much encouraged to do so. - -Get started with contributing by reading our [Contribution documentation](https://invoke-ai.github.io/InvokeAI/contributing/CONTRIBUTING/), joining the [#dev-chat](https://discord.com/channels/1020123559063990373/1049495067846524939) or the GitHub discussion board. - -If you are unfamiliar with how -to contribute to GitHub projects, we have a new contributor checklist you can follow to get started contributing: -[New Contributor Checklist](https://invoke-ai.github.io/InvokeAI/contributing/contribution_guides/newContributorChecklist/). - -We hope you enjoy using our software as much as we enjoy creating it, -and we hope that some of those of you who are reading this will elect -to become part of our community. - -Welcome to InvokeAI! - -### Contributors - -This fork is a combined effort of various people from across the world. -[Check out the list of all these amazing people](https://invoke-ai.github.io/InvokeAI/other/CONTRIBUTORS/). We thank them for -their time, hard work and effort. - -### Support - -For support, please use this repository's GitHub Issues tracking service, or join the [Discord][discord link]. - -Original portions of the software are Copyright (c) 2023 by respective contributors. - diff --git a/docs/features/CONFIGURATION.md b/docs/features/CONFIGURATION.md index 41f7a3ced3..d6bfe44901 100644 --- a/docs/features/CONFIGURATION.md +++ b/docs/features/CONFIGURATION.md @@ -51,13 +51,11 @@ The settings in this file will override the defaults. You only need to change this file if the default for a particular setting doesn't work for you. +You'll find an example file next to `invokeai.yaml` that shows the default values. + Some settings, like [Model Marketplace API Keys], require the YAML to be formatted correctly. Here is a [basic guide to YAML files]. -You can fix a broken `invokeai.yaml` by deleting it and running the -configuration script again -- option [6] in the launcher, "Re-run the -configure script". - #### Custom Config File Location You can use any config file with the `--config` CLI arg. Pass in the path to the `invokeai.yaml` file you want to use. diff --git a/invokeai/app/invocations/controlnet_image_processors.py b/invokeai/app/invocations/controlnet_image_processors.py index 12a2ae9c96..fd34f18e76 100644 --- a/invokeai/app/invocations/controlnet_image_processors.py +++ b/invokeai/app/invocations/controlnet_image_processors.py @@ -35,6 +35,7 @@ from invokeai.app.invocations.model import ModelIdentifierField from invokeai.app.invocations.primitives import ImageOutput from invokeai.app.invocations.util import validate_begin_end_step, validate_weights from invokeai.app.services.shared.invocation_context import InvocationContext +from invokeai.app.util.controlnet_utils import CONTROLNET_MODE_VALUES, CONTROLNET_RESIZE_VALUES from invokeai.backend.image_util.canny import get_canny_edges from invokeai.backend.image_util.depth_anything import DepthAnythingDetector from invokeai.backend.image_util.dw_openpose import DWOpenposeDetector @@ -44,14 +45,6 @@ from invokeai.backend.image_util.lineart_anime import LineartAnimeProcessor from .baseinvocation import BaseInvocation, BaseInvocationOutput, invocation, invocation_output -CONTROLNET_MODE_VALUES = Literal["balanced", "more_prompt", "more_control", "unbalanced"] -CONTROLNET_RESIZE_VALUES = Literal[ - "just_resize", - "crop_resize", - "fill_resize", - "just_resize_simple", -] - class ControlField(BaseModel): image: ImageField = Field(description="The control image") diff --git a/invokeai/app/invocations/latent.py b/invokeai/app/invocations/latent.py index 4534df89c1..66d6a70e40 100644 --- a/invokeai/app/invocations/latent.py +++ b/invokeai/app/invocations/latent.py @@ -51,6 +51,7 @@ from invokeai.app.util.controlnet_utils import prepare_control_image from invokeai.backend.ip_adapter.ip_adapter import IPAdapter, IPAdapterPlus from invokeai.backend.lora import LoRAModelRaw from invokeai.backend.model_manager import BaseModelType, LoadedModel +from invokeai.backend.model_manager.config import MainConfigBase, ModelVariantType from invokeai.backend.model_patcher import ModelPatcher from invokeai.backend.stable_diffusion import PipelineIntermediateState, set_seamless from invokeai.backend.stable_diffusion.diffusion.conditioning_data import ( @@ -185,7 +186,7 @@ class GradientMaskOutput(BaseInvocationOutput): title="Create Gradient Mask", tags=["mask", "denoise"], category="latents", - version="1.0.0", + version="1.1.0", ) class CreateGradientMaskInvocation(BaseInvocation): """Creates mask for denoising model run.""" @@ -198,6 +199,32 @@ class CreateGradientMaskInvocation(BaseInvocation): minimum_denoise: float = InputField( default=0.0, ge=0, le=1, description="Minimum denoise level for the coherence region", ui_order=4 ) + image: Optional[ImageField] = InputField( + default=None, + description="OPTIONAL: Only connect for specialized Inpainting models, masked_latents will be generated from the image with the VAE", + title="[OPTIONAL] Image", + ui_order=6, + ) + unet: Optional[UNetField] = InputField( + description="OPTIONAL: If the Unet is a specialized Inpainting model, masked_latents will be generated from the image with the VAE", + default=None, + input=Input.Connection, + title="[OPTIONAL] UNet", + ui_order=5, + ) + vae: Optional[VAEField] = InputField( + default=None, + description="OPTIONAL: Only connect for specialized Inpainting models, masked_latents will be generated from the image with the VAE", + title="[OPTIONAL] VAE", + input=Input.Connection, + ui_order=7, + ) + tiled: bool = InputField(default=False, description=FieldDescriptions.tiled, ui_order=8) + fp32: bool = InputField( + default=DEFAULT_PRECISION == "float32", + description=FieldDescriptions.fp32, + ui_order=9, + ) @torch.no_grad() def invoke(self, context: InvocationContext) -> GradientMaskOutput: @@ -233,8 +260,27 @@ class CreateGradientMaskInvocation(BaseInvocation): expanded_mask_image = Image.fromarray((expanded_mask.squeeze(0).numpy() * 255).astype(np.uint8), mode="L") expanded_image_dto = context.images.save(expanded_mask_image) + masked_latents_name = None + if self.unet is not None and self.vae is not None and self.image is not None: + # all three fields must be present at the same time + main_model_config = context.models.get_config(self.unet.unet.key) + assert isinstance(main_model_config, MainConfigBase) + if main_model_config.variant is ModelVariantType.Inpaint: + mask = blur_tensor + vae_info: LoadedModel = context.models.load(self.vae.vae) + image = context.images.get_pil(self.image.image_name) + image_tensor = image_resized_to_grid_as_tensor(image.convert("RGB")) + if image_tensor.dim() == 3: + image_tensor = image_tensor.unsqueeze(0) + img_mask = tv_resize(mask, image_tensor.shape[-2:], T.InterpolationMode.BILINEAR, antialias=False) + masked_image = image_tensor * torch.where(img_mask < 0.5, 0.0, 1.0) + masked_latents = ImageToLatentsInvocation.vae_encode( + vae_info, self.fp32, self.tiled, masked_image.clone() + ) + masked_latents_name = context.tensors.save(tensor=masked_latents) + return GradientMaskOutput( - denoise_mask=DenoiseMaskField(mask_name=mask_name, masked_latents_name=None, gradient=True), + denoise_mask=DenoiseMaskField(mask_name=mask_name, masked_latents_name=masked_latents_name, gradient=True), expanded_mask_area=ImageField(image_name=expanded_image_dto.image_name), ) diff --git a/invokeai/app/invocations/mask.py b/invokeai/app/invocations/mask.py index a7f3207764..6f54660847 100644 --- a/invokeai/app/invocations/mask.py +++ b/invokeai/app/invocations/mask.py @@ -1,7 +1,8 @@ +import numpy as np import torch -from invokeai.app.invocations.baseinvocation import BaseInvocation, InvocationContext, invocation -from invokeai.app.invocations.fields import InputField, TensorField, WithMetadata +from invokeai.app.invocations.baseinvocation import BaseInvocation, Classification, InvocationContext, invocation +from invokeai.app.invocations.fields import ImageField, InputField, TensorField, WithMetadata from invokeai.app.invocations.primitives import MaskOutput @@ -34,3 +35,86 @@ class RectangleMaskInvocation(BaseInvocation, WithMetadata): width=self.width, height=self.height, ) + + +@invocation( + "alpha_mask_to_tensor", + title="Alpha Mask to Tensor", + tags=["conditioning"], + category="conditioning", + version="1.0.0", + classification=Classification.Beta, +) +class AlphaMaskToTensorInvocation(BaseInvocation): + """Convert a mask image to a tensor. Opaque regions are 1 and transparent regions are 0.""" + + image: ImageField = InputField(description="The mask image to convert.") + invert: bool = InputField(default=False, description="Whether to invert the mask.") + + def invoke(self, context: InvocationContext) -> MaskOutput: + image = context.images.get_pil(self.image.image_name) + mask = torch.zeros((1, image.height, image.width), dtype=torch.bool) + if self.invert: + mask[0] = torch.tensor(np.array(image)[:, :, 3] == 0, dtype=torch.bool) + else: + mask[0] = torch.tensor(np.array(image)[:, :, 3] > 0, dtype=torch.bool) + + return MaskOutput( + mask=TensorField(tensor_name=context.tensors.save(mask)), + height=mask.shape[1], + width=mask.shape[2], + ) + + +@invocation( + "invert_tensor_mask", + title="Invert Tensor Mask", + tags=["conditioning"], + category="conditioning", + version="1.0.0", + classification=Classification.Beta, +) +class InvertTensorMaskInvocation(BaseInvocation): + """Inverts a tensor mask.""" + + mask: TensorField = InputField(description="The tensor mask to convert.") + + def invoke(self, context: InvocationContext) -> MaskOutput: + mask = context.tensors.load(self.mask.tensor_name) + inverted = ~mask + + return MaskOutput( + mask=TensorField(tensor_name=context.tensors.save(inverted)), + height=inverted.shape[1], + width=inverted.shape[2], + ) + + +@invocation( + "image_mask_to_tensor", + title="Image Mask to Tensor", + tags=["conditioning"], + category="conditioning", + version="1.0.0", +) +class ImageMaskToTensorInvocation(BaseInvocation, WithMetadata): + """Convert a mask image to a tensor. Converts the image to grayscale and uses thresholding at the specified value.""" + + image: ImageField = InputField(description="The mask image to convert.") + cutoff: int = InputField(ge=0, le=255, description="Cutoff (<)", default=128) + invert: bool = InputField(default=False, description="Whether to invert the mask.") + + def invoke(self, context: InvocationContext) -> MaskOutput: + image = context.images.get_pil(self.image.image_name, mode="L") + + mask = torch.zeros((1, image.height, image.width), dtype=torch.bool) + if self.invert: + mask[0] = torch.tensor(np.array(image)[:, :] >= self.cutoff, dtype=torch.bool) + else: + mask[0] = torch.tensor(np.array(image)[:, :] < self.cutoff, dtype=torch.bool) + + return MaskOutput( + mask=TensorField(tensor_name=context.tensors.save(mask)), + height=mask.shape[1], + width=mask.shape[2], + ) diff --git a/invokeai/app/invocations/metadata.py b/invokeai/app/invocations/metadata.py index a02d0a57ef..9c7264a9bb 100644 --- a/invokeai/app/invocations/metadata.py +++ b/invokeai/app/invocations/metadata.py @@ -3,7 +3,6 @@ from typing import Any, Literal, Optional, Union from pydantic import BaseModel, ConfigDict, Field from invokeai.app.invocations.baseinvocation import BaseInvocation, BaseInvocationOutput, invocation, invocation_output -from invokeai.app.invocations.controlnet_image_processors import CONTROLNET_MODE_VALUES, CONTROLNET_RESIZE_VALUES from invokeai.app.invocations.fields import ( FieldDescriptions, ImageField, @@ -14,6 +13,7 @@ from invokeai.app.invocations.fields import ( ) from invokeai.app.invocations.model import ModelIdentifierField from invokeai.app.services.shared.invocation_context import InvocationContext +from invokeai.app.util.controlnet_utils import CONTROLNET_MODE_VALUES, CONTROLNET_RESIZE_VALUES from ...version import __version__ diff --git a/invokeai/app/invocations/t2i_adapter.py b/invokeai/app/invocations/t2i_adapter.py index e550a7b313..b22a089d3f 100644 --- a/invokeai/app/invocations/t2i_adapter.py +++ b/invokeai/app/invocations/t2i_adapter.py @@ -8,11 +8,11 @@ from invokeai.app.invocations.baseinvocation import ( invocation, invocation_output, ) -from invokeai.app.invocations.controlnet_image_processors import CONTROLNET_RESIZE_VALUES from invokeai.app.invocations.fields import FieldDescriptions, ImageField, Input, InputField, OutputField, UIType from invokeai.app.invocations.model import ModelIdentifierField from invokeai.app.invocations.util import validate_begin_end_step, validate_weights from invokeai.app.services.shared.invocation_context import InvocationContext +from invokeai.app.util.controlnet_utils import CONTROLNET_RESIZE_VALUES class T2IAdapterField(BaseModel): diff --git a/invokeai/app/services/model_install/model_install_default.py b/invokeai/app/services/model_install/model_install_default.py index 32c86ad3a3..92512baec9 100644 --- a/invokeai/app/services/model_install/model_install_default.py +++ b/invokeai/app/services/model_install/model_install_default.py @@ -3,7 +3,6 @@ import locale import os import re -import signal import threading import time from pathlib import Path @@ -42,6 +41,7 @@ from invokeai.backend.model_manager.metadata.metadata_base import HuggingFaceMet from invokeai.backend.model_manager.probe import ModelProbe from invokeai.backend.model_manager.search import ModelSearch from invokeai.backend.util import InvokeAILogger +from invokeai.backend.util.catch_sigint import catch_sigint from invokeai.backend.util.devices import TorchDevice from invokeai.backend.util.util import slugify @@ -112,17 +112,6 @@ class ModelInstallService(ModelInstallServiceBase): def start(self, invoker: Optional[Invoker] = None) -> None: """Start the installer thread.""" - # Yes, this is weird. When the installer thread is running, the - # thread masks the ^C signal. When we receive a - # sigINT, we stop the thread, reset sigINT, and send a new - # sigINT to the parent process. - def sigint_handler(signum, frame): - self.stop() - signal.signal(signal.SIGINT, signal.SIG_DFL) - signal.raise_signal(signal.SIGINT) - - signal.signal(signal.SIGINT, sigint_handler) - with self._lock: if self._running: raise Exception("Attempt to start the installer service twice") @@ -132,7 +121,8 @@ class ModelInstallService(ModelInstallServiceBase): # In normal use, we do not want to scan the models directory - it should never have orphaned models. # We should only do the scan when the flag is set (which should only be set when testing). if self.app_config.scan_models_on_startup: - self._register_orphaned_models() + with catch_sigint(): + self._register_orphaned_models() # Check all models' paths and confirm they exist. A model could be missing if it was installed on a volume # that isn't currently mounted. In this case, we don't want to delete the model from the database, but we do diff --git a/invokeai/app/services/object_serializer/object_serializer_disk.py b/invokeai/app/services/object_serializer/object_serializer_disk.py index 935fec3060..8edd29e150 100644 --- a/invokeai/app/services/object_serializer/object_serializer_disk.py +++ b/invokeai/app/services/object_serializer/object_serializer_disk.py @@ -1,6 +1,6 @@ +import shutil import tempfile import typing -from dataclasses import dataclass from pathlib import Path from typing import TYPE_CHECKING, Optional, TypeVar @@ -17,12 +17,6 @@ if TYPE_CHECKING: T = TypeVar("T") -@dataclass -class DeleteAllResult: - deleted_count: int - freed_space_bytes: float - - class ObjectSerializerDisk(ObjectSerializerBase[T]): """Disk-backed storage for arbitrary python objects. Serialization is handled by `torch.save` and `torch.load`. @@ -35,6 +29,12 @@ class ObjectSerializerDisk(ObjectSerializerBase[T]): self._ephemeral = ephemeral self._base_output_dir = output_dir self._base_output_dir.mkdir(parents=True, exist_ok=True) + + if self._ephemeral: + # Remove dangling tempdirs that might have been left over from an earlier unplanned shutdown. + for temp_dir in filter(Path.is_dir, self._base_output_dir.glob("tmp*")): + shutil.rmtree(temp_dir) + # Must specify `ignore_cleanup_errors` to avoid fatal errors during cleanup on Windows self._tempdir = ( tempfile.TemporaryDirectory(dir=self._base_output_dir, ignore_cleanup_errors=True) if ephemeral else None diff --git a/invokeai/app/util/controlnet_utils.py b/invokeai/app/util/controlnet_utils.py index b3e2560211..fde8d52ee6 100644 --- a/invokeai/app/util/controlnet_utils.py +++ b/invokeai/app/util/controlnet_utils.py @@ -1,13 +1,21 @@ -from typing import Union +from typing import Any, Literal, Union import cv2 import numpy as np import torch -from controlnet_aux.util import HWC3 -from diffusers.utils import PIL_INTERPOLATION from einops import rearrange from PIL import Image +from invokeai.backend.image_util.util import nms, normalize_image_channel_count + +CONTROLNET_RESIZE_VALUES = Literal[ + "just_resize", + "crop_resize", + "fill_resize", + "just_resize_simple", +] +CONTROLNET_MODE_VALUES = Literal["balanced", "more_prompt", "more_control", "unbalanced"] + ################################################################### # Copy of scripts/lvminthin.py from Mikubill/sd-webui-controlnet ################################################################### @@ -68,17 +76,6 @@ def lvmin_thin(x, prunings=True): return y -def nake_nms(x): - f1 = np.array([[0, 0, 0], [1, 1, 1], [0, 0, 0]], dtype=np.uint8) - f2 = np.array([[0, 1, 0], [0, 1, 0], [0, 1, 0]], dtype=np.uint8) - f3 = np.array([[1, 0, 0], [0, 1, 0], [0, 0, 1]], dtype=np.uint8) - f4 = np.array([[0, 0, 1], [0, 1, 0], [1, 0, 0]], dtype=np.uint8) - y = np.zeros_like(x) - for f in [f1, f2, f3, f4]: - np.putmask(y, cv2.dilate(x, kernel=f) == x, x) - return y - - ################################################################################ # copied from Mikubill/sd-webui-controlnet external_code.py and modified for InvokeAI ################################################################################ @@ -134,98 +131,122 @@ def pixel_perfect_resolution( return int(np.round(estimation)) +def clone_contiguous(x: np.ndarray[Any, Any]) -> np.ndarray[Any, Any]: + """Get a memory-contiguous clone of the given numpy array, as a safety measure and to improve computation efficiency.""" + return np.ascontiguousarray(x).copy() + + +def np_img_to_torch(np_img: np.ndarray[Any, Any], device: torch.device) -> torch.Tensor: + """Convert a numpy image to a PyTorch tensor. The image is normalized to 0-1, rearranged to BCHW format and sent to + the specified device.""" + + torch_img = torch.from_numpy(np_img) + normalized = torch_img.float() / 255.0 + bchw = rearrange(normalized, "h w c -> 1 c h w") + on_device = bchw.to(device) + return on_device.clone() + + +def heuristic_resize(np_img: np.ndarray[Any, Any], size: tuple[int, int]) -> np.ndarray[Any, Any]: + """Resizes an image using a heuristic to choose the best resizing strategy. + + - If the image appears to be an edge map, special handling will be applied to ensure the edges are not distorted. + - Single-pixel edge maps use NMS and thinning to keep the edges as single-pixel lines. + - Low-color-count images are resized with nearest-neighbor to preserve color information (for e.g. segmentation maps). + - The alpha channel is handled separately to ensure it is resized correctly. + + Args: + np_img (np.ndarray): The input image. + size (tuple[int, int]): The target size for the image. + + Returns: + np.ndarray: The resized image. + + Adapted from https://github.com/Mikubill/sd-webui-controlnet. + """ + + # Return early if the image is already at the requested size + if np_img.shape[0] == size[1] and np_img.shape[1] == size[0]: + return np_img + + # If the image has an alpha channel, separate it for special handling later. + inpaint_mask = None + if np_img.ndim == 3 and np_img.shape[2] == 4: + inpaint_mask = np_img[:, :, 3] + np_img = np_img[:, :, 0:3] + + new_size_is_smaller = (size[0] * size[1]) < (np_img.shape[0] * np_img.shape[1]) + new_size_is_bigger = (size[0] * size[1]) > (np_img.shape[0] * np_img.shape[1]) + unique_color_count = np.unique(np_img.reshape(-1, np_img.shape[2]), axis=0).shape[0] + is_one_pixel_edge = False + is_binary = False + + if unique_color_count == 2: + # If the image has only two colors, it is likely binary. Check if the image has one-pixel edges. + is_binary = np.min(np_img) < 16 and np.max(np_img) > 240 + if is_binary: + eroded = cv2.erode(np_img, np.ones(shape=(3, 3), dtype=np.uint8), iterations=1) + dilated = cv2.dilate(eroded, np.ones(shape=(3, 3), dtype=np.uint8), iterations=1) + one_pixel_edge_count = np.where(dilated < np_img)[0].shape[0] + all_edge_count = np.where(np_img > 127)[0].shape[0] + is_one_pixel_edge = one_pixel_edge_count * 2 > all_edge_count + + if 2 < unique_color_count < 200: + # With a low color count, we assume this is a map where exact colors are important. Near-neighbor preserves + # the colors as needed. + interpolation = cv2.INTER_NEAREST + elif new_size_is_smaller: + # This works best for downscaling + interpolation = cv2.INTER_AREA + else: + # Fall back for other cases + interpolation = cv2.INTER_CUBIC # Must be CUBIC because we now use nms. NEVER CHANGE THIS + + # This may be further transformed depending on the binary nature of the image. + resized = cv2.resize(np_img, size, interpolation=interpolation) + + if inpaint_mask is not None: + # Resize the inpaint mask to match the resized image using the same interpolation method. + inpaint_mask = cv2.resize(inpaint_mask, size, interpolation=interpolation) + + # If the image is binary, we will perform some additional processing to ensure the edges are preserved. + if is_binary: + resized = np.mean(resized.astype(np.float32), axis=2).clip(0, 255).astype(np.uint8) + if is_one_pixel_edge: + # Use NMS and thinning to keep the edges as single-pixel lines. + resized = nms(resized) + _, resized = cv2.threshold(resized, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU) + resized = lvmin_thin(resized, prunings=new_size_is_bigger) + else: + _, resized = cv2.threshold(resized, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU) + resized = np.stack([resized] * 3, axis=2) + + # Restore the alpha channel if it was present. + if inpaint_mask is not None: + inpaint_mask = (inpaint_mask > 127).astype(np.float32) * 255.0 + inpaint_mask = inpaint_mask[:, :, None].clip(0, 255).astype(np.uint8) + resized = np.concatenate([resized, inpaint_mask], axis=2) + + return resized + + ########################################################################### # Copied from detectmap_proc method in scripts/detectmap_proc.py in Mikubill/sd-webui-controlnet # modified for InvokeAI ########################################################################### -# def detectmap_proc(detected_map, module, resize_mode, h, w): -def np_img_resize(np_img: np.ndarray, resize_mode: str, h: int, w: int, device: torch.device = torch.device("cpu")): - # if 'inpaint' in module: - # np_img = np_img.astype(np.float32) - # else: - # np_img = HWC3(np_img) - np_img = HWC3(np_img) +def np_img_resize( + np_img: np.ndarray, + resize_mode: CONTROLNET_RESIZE_VALUES, + h: int, + w: int, + device: torch.device = torch.device("cpu"), +) -> tuple[torch.Tensor, np.ndarray[Any, Any]]: + np_img = normalize_image_channel_count(np_img) - def safe_numpy(x): - # A very safe method to make sure that Apple/Mac works - y = x - - # below is very boring but do not change these. If you change these Apple or Mac may fail. - y = y.copy() - y = np.ascontiguousarray(y) - y = y.copy() - return y - - def get_pytorch_control(x): - # A very safe method to make sure that Apple/Mac works - y = x - - # below is very boring but do not change these. If you change these Apple or Mac may fail. - y = torch.from_numpy(y) - y = y.float() / 255.0 - y = rearrange(y, "h w c -> 1 c h w") - y = y.clone() - # y = y.to(devices.get_device_for("controlnet")) - y = y.to(device) - y = y.clone() - return y - - def high_quality_resize(x: np.ndarray, size): - # Written by lvmin - # Super high-quality control map up-scaling, considering binary, seg, and one-pixel edges - inpaint_mask = None - if x.ndim == 3 and x.shape[2] == 4: - inpaint_mask = x[:, :, 3] - x = x[:, :, 0:3] - - new_size_is_smaller = (size[0] * size[1]) < (x.shape[0] * x.shape[1]) - new_size_is_bigger = (size[0] * size[1]) > (x.shape[0] * x.shape[1]) - unique_color_count = np.unique(x.reshape(-1, x.shape[2]), axis=0).shape[0] - is_one_pixel_edge = False - is_binary = False - if unique_color_count == 2: - is_binary = np.min(x) < 16 and np.max(x) > 240 - if is_binary: - xc = x - xc = cv2.erode(xc, np.ones(shape=(3, 3), dtype=np.uint8), iterations=1) - xc = cv2.dilate(xc, np.ones(shape=(3, 3), dtype=np.uint8), iterations=1) - one_pixel_edge_count = np.where(xc < x)[0].shape[0] - all_edge_count = np.where(x > 127)[0].shape[0] - is_one_pixel_edge = one_pixel_edge_count * 2 > all_edge_count - - if 2 < unique_color_count < 200: - interpolation = cv2.INTER_NEAREST - elif new_size_is_smaller: - interpolation = cv2.INTER_AREA - else: - interpolation = cv2.INTER_CUBIC # Must be CUBIC because we now use nms. NEVER CHANGE THIS - - y = cv2.resize(x, size, interpolation=interpolation) - if inpaint_mask is not None: - inpaint_mask = cv2.resize(inpaint_mask, size, interpolation=interpolation) - - if is_binary: - y = np.mean(y.astype(np.float32), axis=2).clip(0, 255).astype(np.uint8) - if is_one_pixel_edge: - y = nake_nms(y) - _, y = cv2.threshold(y, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU) - y = lvmin_thin(y, prunings=new_size_is_bigger) - else: - _, y = cv2.threshold(y, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU) - y = np.stack([y] * 3, axis=2) - - if inpaint_mask is not None: - inpaint_mask = (inpaint_mask > 127).astype(np.float32) * 255.0 - inpaint_mask = inpaint_mask[:, :, None].clip(0, 255).astype(np.uint8) - y = np.concatenate([y, inpaint_mask], axis=2) - - return y - - # if resize_mode == external_code.ResizeMode.RESIZE: if resize_mode == "just_resize": # RESIZE - np_img = high_quality_resize(np_img, (w, h)) - np_img = safe_numpy(np_img) - return get_pytorch_control(np_img), np_img + np_img = heuristic_resize(np_img, (w, h)) + np_img = clone_contiguous(np_img) + return np_img_to_torch(np_img, device), np_img old_h, old_w, _ = np_img.shape old_w = float(old_w) @@ -236,7 +257,6 @@ def np_img_resize(np_img: np.ndarray, resize_mode: str, h: int, w: int, device: def safeint(x: Union[int, float]) -> int: return int(np.round(x)) - # if resize_mode == external_code.ResizeMode.OUTER_FIT: if resize_mode == "fill_resize": # OUTER_FIT k = min(k0, k1) borders = np.concatenate([np_img[0, :, :], np_img[-1, :, :], np_img[:, 0, :], np_img[:, -1, :]], axis=0) @@ -245,23 +265,23 @@ def np_img_resize(np_img: np.ndarray, resize_mode: str, h: int, w: int, device: # Inpaint hijack high_quality_border_color[3] = 255 high_quality_background = np.tile(high_quality_border_color[None, None], [h, w, 1]) - np_img = high_quality_resize(np_img, (safeint(old_w * k), safeint(old_h * k))) + np_img = heuristic_resize(np_img, (safeint(old_w * k), safeint(old_h * k))) new_h, new_w, _ = np_img.shape pad_h = max(0, (h - new_h) // 2) pad_w = max(0, (w - new_w) // 2) high_quality_background[pad_h : pad_h + new_h, pad_w : pad_w + new_w] = np_img np_img = high_quality_background - np_img = safe_numpy(np_img) - return get_pytorch_control(np_img), np_img + np_img = clone_contiguous(np_img) + return np_img_to_torch(np_img, device), np_img else: # resize_mode == "crop_resize" (INNER_FIT) k = max(k0, k1) - np_img = high_quality_resize(np_img, (safeint(old_w * k), safeint(old_h * k))) + np_img = heuristic_resize(np_img, (safeint(old_w * k), safeint(old_h * k))) new_h, new_w, _ = np_img.shape pad_h = max(0, (new_h - h) // 2) pad_w = max(0, (new_w - w) // 2) np_img = np_img[pad_h : pad_h + h, pad_w : pad_w + w] - np_img = safe_numpy(np_img) - return get_pytorch_control(np_img), np_img + np_img = clone_contiguous(np_img) + return np_img_to_torch(np_img, device), np_img def prepare_control_image( @@ -269,12 +289,12 @@ def prepare_control_image( width: int, height: int, num_channels: int = 3, - device="cuda", - dtype=torch.float16, - do_classifier_free_guidance=True, - control_mode="balanced", - resize_mode="just_resize_simple", -): + device: str = "cuda", + dtype: torch.dtype = torch.float16, + control_mode: CONTROLNET_MODE_VALUES = "balanced", + resize_mode: CONTROLNET_RESIZE_VALUES = "just_resize_simple", + do_classifier_free_guidance: bool = True, +) -> torch.Tensor: """Pre-process images for ControlNets or T2I-Adapters. Args: @@ -292,26 +312,15 @@ def prepare_control_image( resize_mode (str, optional): Defaults to "just_resize_simple". Raises: - NotImplementedError: If resize_mode == "crop_resize_simple". - NotImplementedError: If resize_mode == "fill_resize_simple". ValueError: If `resize_mode` is not recognized. ValueError: If `num_channels` is out of range. Returns: torch.Tensor: The pre-processed input tensor. """ - if ( - resize_mode == "just_resize_simple" - or resize_mode == "crop_resize_simple" - or resize_mode == "fill_resize_simple" - ): + if resize_mode == "just_resize_simple": image = image.convert("RGB") - if resize_mode == "just_resize_simple": - image = image.resize((width, height), resample=PIL_INTERPOLATION["lanczos"]) - elif resize_mode == "crop_resize_simple": - raise NotImplementedError(f"prepare_control_image is not implemented for resize_mode='{resize_mode}'.") - elif resize_mode == "fill_resize_simple": - raise NotImplementedError(f"prepare_control_image is not implemented for resize_mode='{resize_mode}'.") + image = image.resize((width, height), resample=Image.LANCZOS) nimage = np.array(image) nimage = nimage[None, :] nimage = np.concatenate([nimage], axis=0) @@ -328,8 +337,7 @@ def prepare_control_image( resize_mode=resize_mode, h=height, w=width, - # device=torch.device('cpu') - device=device, + device=torch.device(device), ) else: raise ValueError(f"Unsupported resize_mode: '{resize_mode}'.") diff --git a/invokeai/backend/image_util/hed.py b/invokeai/backend/image_util/hed.py index 378e3b96e9..97706df8b9 100644 --- a/invokeai/backend/image_util/hed.py +++ b/invokeai/backend/image_util/hed.py @@ -8,7 +8,7 @@ from huggingface_hub import hf_hub_download from PIL import Image from invokeai.backend.image_util.util import ( - non_maximum_suppression, + nms, normalize_image_channel_count, np_to_pil, pil_to_np, @@ -134,7 +134,7 @@ class HEDProcessor: detected_map = cv2.resize(detected_map, (width, height), interpolation=cv2.INTER_LINEAR) if scribble: - detected_map = non_maximum_suppression(detected_map, 127, 3.0) + detected_map = nms(detected_map, 127, 3.0) detected_map = cv2.GaussianBlur(detected_map, (0, 0), 3.0) detected_map[detected_map > 4] = 255 detected_map[detected_map < 255] = 0 diff --git a/invokeai/backend/image_util/util.py b/invokeai/backend/image_util/util.py index 7cfe0ad1a5..f704f068e3 100644 --- a/invokeai/backend/image_util/util.py +++ b/invokeai/backend/image_util/util.py @@ -1,4 +1,5 @@ from math import ceil, floor, sqrt +from typing import Optional import cv2 import numpy as np @@ -153,10 +154,13 @@ def resize_image_to_resolution(input_image: np.ndarray, resolution: int) -> np.n return cv2.resize(input_image, (w, h), interpolation=cv2.INTER_AREA) -def non_maximum_suppression(image: np.ndarray, threshold: int, sigma: float): +def nms(np_img: np.ndarray, threshold: Optional[int] = None, sigma: Optional[float] = None) -> np.ndarray: """ Apply non-maximum suppression to an image. + If both threshold and sigma are provided, the image will blurred before the suppression and thresholded afterwards, + resulting in a binary output image. + This function is adapted from https://github.com/lllyasviel/ControlNet. Args: @@ -166,23 +170,36 @@ def non_maximum_suppression(image: np.ndarray, threshold: int, sigma: float): Returns: The image after non-maximum suppression. + + Raises: + ValueError: If only one of threshold and sigma provided. """ - image = cv2.GaussianBlur(image.astype(np.float32), (0, 0), sigma) + # Raise a value error if only one of threshold and sigma is provided + if (threshold is None) != (sigma is None): + raise ValueError("Both threshold and sigma must be provided if one is provided.") + + if sigma is not None and threshold is not None: + # Blurring the image can help to thin out features + np_img = cv2.GaussianBlur(np_img.astype(np.float32), (0, 0), sigma) filter_1 = np.array([[0, 0, 0], [1, 1, 1], [0, 0, 0]], dtype=np.uint8) filter_2 = np.array([[0, 1, 0], [0, 1, 0], [0, 1, 0]], dtype=np.uint8) filter_3 = np.array([[1, 0, 0], [0, 1, 0], [0, 0, 1]], dtype=np.uint8) filter_4 = np.array([[0, 0, 1], [0, 1, 0], [1, 0, 0]], dtype=np.uint8) - y = np.zeros_like(image) + nms_img = np.zeros_like(np_img) for f in [filter_1, filter_2, filter_3, filter_4]: - np.putmask(y, cv2.dilate(image, kernel=f) == image, image) + np.putmask(nms_img, cv2.dilate(np_img, kernel=f) == np_img, np_img) - z = np.zeros_like(y, dtype=np.uint8) - z[y > threshold] = 255 - return z + if sigma is not None and threshold is not None: + # We blurred - now threshold to get a binary image + thresholded = np.zeros_like(nms_img, dtype=np.uint8) + thresholded[nms_img > threshold] = 255 + return thresholded + + return nms_img def safe_step(x: np.ndarray, step: int = 2) -> np.ndarray: diff --git a/invokeai/backend/model_manager/config.py b/invokeai/backend/model_manager/config.py index 1a5d95b7d8..9e30d96016 100644 --- a/invokeai/backend/model_manager/config.py +++ b/invokeai/backend/model_manager/config.py @@ -301,12 +301,12 @@ class MainConfigBase(ModelConfigBase): default_settings: Optional[MainModelDefaultSettings] = Field( description="Default settings for this model", default=None ) + variant: ModelVariantType = ModelVariantType.Normal class MainCheckpointConfig(CheckpointConfigBase, MainConfigBase): """Model config for main checkpoint models.""" - variant: ModelVariantType = ModelVariantType.Normal prediction_type: SchedulerPredictionType = SchedulerPredictionType.Epsilon upcast_attention: bool = False diff --git a/invokeai/backend/model_manager/probe.py b/invokeai/backend/model_manager/probe.py index bf21a7fe7b..8f33e4b49f 100644 --- a/invokeai/backend/model_manager/probe.py +++ b/invokeai/backend/model_manager/probe.py @@ -51,6 +51,7 @@ LEGACY_CONFIGS: Dict[BaseModelType, Dict[ModelVariantType, Union[str, Dict[Sched }, BaseModelType.StableDiffusionXL: { ModelVariantType.Normal: "sd_xl_base.yaml", + ModelVariantType.Inpaint: "sd_xl_inpaint.yaml", }, BaseModelType.StableDiffusionXLRefiner: { ModelVariantType.Normal: "sd_xl_refiner.yaml", diff --git a/invokeai/backend/model_manager/starter_models.py b/invokeai/backend/model_manager/starter_models.py index f92f5e08d5..31b16d9c8a 100644 --- a/invokeai/backend/model_manager/starter_models.py +++ b/invokeai/backend/model_manager/starter_models.py @@ -155,7 +155,7 @@ STARTER_MODELS: list[StarterModel] = [ StarterModel( name="IP Adapter", base=BaseModelType.StableDiffusion1, - source="InvokeAI/ip_adapter_sd15", + source="https://huggingface.co/InvokeAI/ip_adapter_sd15/resolve/main/ip-adapter_sd15.safetensors", description="IP-Adapter for SD 1.5 models", type=ModelType.IPAdapter, dependencies=[ip_adapter_sd_image_encoder], @@ -163,7 +163,7 @@ STARTER_MODELS: list[StarterModel] = [ StarterModel( name="IP Adapter Plus", base=BaseModelType.StableDiffusion1, - source="InvokeAI/ip_adapter_plus_sd15", + source="https://huggingface.co/InvokeAI/ip_adapter_plus_sd15/resolve/main/ip-adapter-plus_sd15.safetensors", description="Refined IP-Adapter for SD 1.5 models", type=ModelType.IPAdapter, dependencies=[ip_adapter_sd_image_encoder], @@ -171,7 +171,7 @@ STARTER_MODELS: list[StarterModel] = [ StarterModel( name="IP Adapter Plus Face", base=BaseModelType.StableDiffusion1, - source="InvokeAI/ip_adapter_plus_face_sd15", + source="https://huggingface.co/InvokeAI/ip_adapter_plus_face_sd15/resolve/main/ip-adapter-plus-face_sd15.safetensors", description="Refined IP-Adapter for SD 1.5 models, adapted for faces", type=ModelType.IPAdapter, dependencies=[ip_adapter_sd_image_encoder], @@ -179,7 +179,7 @@ STARTER_MODELS: list[StarterModel] = [ StarterModel( name="IP Adapter SDXL", base=BaseModelType.StableDiffusionXL, - source="InvokeAI/ip_adapter_sdxl", + source="https://huggingface.co/InvokeAI/ip_adapter_sdxl_vit_h/resolve/main/ip-adapter_sdxl_vit-h.safetensors", description="IP-Adapter for SDXL models", type=ModelType.IPAdapter, dependencies=[ip_adapter_sdxl_image_encoder], diff --git a/invokeai/backend/util/catch_sigint.py b/invokeai/backend/util/catch_sigint.py new file mode 100644 index 0000000000..b9735d94f9 --- /dev/null +++ b/invokeai/backend/util/catch_sigint.py @@ -0,0 +1,29 @@ +""" +This module defines a context manager `catch_sigint()` which temporarily replaces +the sigINT handler defined by the ASGI in order to allow the user to ^C the application +and shut it down immediately. This was implemented in order to allow the user to interrupt +slow model hashing during startup. + +Use like this: + + from invokeai.backend.util.catch_sigint import catch_sigint + with catch_sigint(): + run_some_hard_to_interrupt_process() +""" + +import signal +from contextlib import contextmanager +from typing import Generator + + +def sigint_handler(signum, frame): # type: ignore + signal.signal(signal.SIGINT, signal.SIG_DFL) + signal.raise_signal(signal.SIGINT) + + +@contextmanager +def catch_sigint() -> Generator[None, None, None]: + original_handler = signal.getsignal(signal.SIGINT) + signal.signal(signal.SIGINT, sigint_handler) + yield + signal.signal(signal.SIGINT, original_handler) diff --git a/invokeai/configs/stable-diffusion/sd_xl_inpaint.yaml b/invokeai/configs/stable-diffusion/sd_xl_inpaint.yaml new file mode 100644 index 0000000000..eea5c15a49 --- /dev/null +++ b/invokeai/configs/stable-diffusion/sd_xl_inpaint.yaml @@ -0,0 +1,98 @@ +model: + target: sgm.models.diffusion.DiffusionEngine + params: + scale_factor: 0.13025 + disable_first_stage_autocast: True + + denoiser_config: + target: sgm.modules.diffusionmodules.denoiser.DiscreteDenoiser + params: + num_idx: 1000 + + weighting_config: + target: sgm.modules.diffusionmodules.denoiser_weighting.EpsWeighting + scaling_config: + target: sgm.modules.diffusionmodules.denoiser_scaling.EpsScaling + discretization_config: + target: sgm.modules.diffusionmodules.discretizer.LegacyDDPMDiscretization + + network_config: + target: sgm.modules.diffusionmodules.openaimodel.UNetModel + params: + adm_in_channels: 2816 + num_classes: sequential + use_checkpoint: True + in_channels: 9 + out_channels: 4 + model_channels: 320 + attention_resolutions: [4, 2] + num_res_blocks: 2 + channel_mult: [1, 2, 4] + num_head_channels: 64 + use_spatial_transformer: True + use_linear_in_transformer: True + transformer_depth: [1, 2, 10] # note: the first is unused (due to attn_res starting at 2) 32, 16, 8 --> 64, 32, 16 + context_dim: 2048 + spatial_transformer_attn_type: softmax-xformers + legacy: False + + conditioner_config: + target: sgm.modules.GeneralConditioner + params: + emb_models: + # crossattn cond + - is_trainable: False + input_key: txt + target: sgm.modules.encoders.modules.FrozenCLIPEmbedder + params: + layer: hidden + layer_idx: 11 + # crossattn and vector cond + - is_trainable: False + input_key: txt + target: sgm.modules.encoders.modules.FrozenOpenCLIPEmbedder2 + params: + arch: ViT-bigG-14 + version: laion2b_s39b_b160k + freeze: True + layer: penultimate + always_return_pooled: True + legacy: False + # vector cond + - is_trainable: False + input_key: original_size_as_tuple + target: sgm.modules.encoders.modules.ConcatTimestepEmbedderND + params: + outdim: 256 # multiplied by two + # vector cond + - is_trainable: False + input_key: crop_coords_top_left + target: sgm.modules.encoders.modules.ConcatTimestepEmbedderND + params: + outdim: 256 # multiplied by two + # vector cond + - is_trainable: False + input_key: target_size_as_tuple + target: sgm.modules.encoders.modules.ConcatTimestepEmbedderND + params: + outdim: 256 # multiplied by two + + first_stage_config: + target: sgm.models.autoencoder.AutoencoderKLInferenceWrapper + params: + embed_dim: 4 + monitor: val/rec_loss + ddconfig: + attn_type: vanilla-xformers + double_z: true + z_channels: 4 + resolution: 256 + in_channels: 3 + out_ch: 3 + ch: 128 + ch_mult: [1, 2, 4, 4] + num_res_blocks: 2 + attn_resolutions: [] + dropout: 0.0 + lossconfig: + target: torch.nn.Identity \ No newline at end of file diff --git a/invokeai/frontend/web/.storybook/preview.tsx b/invokeai/frontend/web/.storybook/preview.tsx index 791a48ab9e..8b21b48230 100644 --- a/invokeai/frontend/web/.storybook/preview.tsx +++ b/invokeai/frontend/web/.storybook/preview.tsx @@ -11,6 +11,7 @@ import { createStore } from '../src/app/store/store'; // @ts-ignore import translationEN from '../public/locales/en.json'; import { ReduxInit } from './ReduxInit'; +import { $store } from 'app/store/nanostores/store'; i18n.use(initReactI18next).init({ lng: 'en', @@ -25,6 +26,7 @@ i18n.use(initReactI18next).init({ }); const store = createStore(undefined, false); +$store.set(store); $baseUrl.set('http://localhost:9090'); const preview: Preview = { diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index aabaa17c73..a591e654a7 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -25,7 +25,7 @@ "typegen": "node scripts/typegen.js", "preview": "vite preview", "lint:knip": "knip", - "lint:dpdm": "dpdm --no-warning --no-tree --transform --exit-code circular:1 src/main.tsx", + "lint:dpdm": "dpdm --no-warning --no-tree --transform --exit-code circular:0 src/main.tsx", "lint:eslint": "eslint --max-warnings=0 .", "lint:prettier": "prettier --check .", "lint:tsc": "tsc --noEmit", @@ -95,6 +95,7 @@ "reactflow": "^11.10.4", "redux-dynamic-middlewares": "^2.2.0", "redux-remember": "^5.1.0", + "redux-undo": "^1.1.0", "rfdc": "^1.3.1", "roarr": "^7.21.1", "serialize-error": "^11.0.3", diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml index bf423c3d46..c0cbc59ad2 100644 --- a/invokeai/frontend/web/pnpm-lock.yaml +++ b/invokeai/frontend/web/pnpm-lock.yaml @@ -140,6 +140,9 @@ dependencies: redux-remember: specifier: ^5.1.0 version: 5.1.0(redux@5.0.1) + redux-undo: + specifier: ^1.1.0 + version: 1.1.0 rfdc: specifier: ^1.3.1 version: 1.3.1 @@ -11962,6 +11965,10 @@ packages: redux: 5.0.1 dev: false + /redux-undo@1.1.0: + resolution: {integrity: sha512-zzLFh2qeF0MTIlzDhDLm9NtkfBqCllQJ3OCuIl5RKlG/ayHw6GUdIFdMhzMS9NnrnWdBX5u//ExMOHpfudGGOg==} + dev: false + /redux@5.0.1: resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==} dev: false diff --git a/invokeai/frontend/web/public/assets/images/transparent_bg.png b/invokeai/frontend/web/public/assets/images/transparent_bg.png new file mode 100644 index 0000000000..e1a3c339ce Binary files /dev/null and b/invokeai/frontend/web/public/assets/images/transparent_bg.png differ diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 87ea9de27d..c130b11ba6 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -84,6 +84,8 @@ "direction": "Direction", "ipAdapter": "IP Adapter", "t2iAdapter": "T2I Adapter", + "positivePrompt": "Positive Prompt", + "negativePrompt": "Negative Prompt", "discordLabel": "Discord", "dontAskMeAgain": "Don't ask me again", "error": "Error", @@ -136,7 +138,9 @@ "red": "Red", "green": "Green", "blue": "Blue", - "alpha": "Alpha" + "alpha": "Alpha", + "selected": "Selected", + "viewer": "Viewer" }, "controlnet": { "controlAdapter_one": "Control Adapter", @@ -893,6 +897,7 @@ "denoisingStrength": "Denoising Strength", "downloadImage": "Download Image", "general": "General", + "globalSettings": "Global Settings", "height": "Height", "imageFit": "Fit Initial Image To Output Size", "images": "Images", @@ -1183,6 +1188,10 @@ "heading": "Resize Mode", "paragraphs": ["Method to fit Control Adapter's input image size to the output generation size."] }, + "ipAdapterMethod": { + "heading": "Method", + "paragraphs": ["Method by which to apply the current IP Adapter."] + }, "controlNetWeight": { "heading": "Weight", "paragraphs": [ @@ -1501,5 +1510,27 @@ }, "app": { "storeNotInitialized": "Store is not initialized" + }, + "regionalPrompts": { + "deleteAll": "Delete All", + "addLayer": "Add Layer", + "moveToFront": "Move to Front", + "moveToBack": "Move to Back", + "moveForward": "Move Forward", + "moveBackward": "Move Backward", + "brushSize": "Brush Size", + "regionalControl": "Regional Control (ALPHA)", + "enableRegionalPrompts": "Enable $t(regionalPrompts.regionalPrompts)", + "globalMaskOpacity": "Global Mask Opacity", + "autoNegative": "Auto Negative", + "toggleVisibility": "Toggle Layer Visibility", + "deletePrompt": "Delete Prompt", + "resetRegion": "Reset Region", + "debugLayers": "Debug Layers", + "rectangle": "Rectangle", + "maskPreviewColor": "Mask Preview Color", + "addPositivePrompt": "Add $t(common.positivePrompt)", + "addNegativePrompt": "Add $t(common.negativePrompt)", + "addIPAdapter": "Add $t(common.ipAdapter)" } } diff --git a/invokeai/frontend/web/src/app/logging/logger.ts b/invokeai/frontend/web/src/app/logging/logger.ts index d0e6340625..00389d8c4f 100644 --- a/invokeai/frontend/web/src/app/logging/logger.ts +++ b/invokeai/frontend/web/src/app/logging/logger.ts @@ -27,7 +27,8 @@ export type LoggerNamespace = | 'socketio' | 'session' | 'queue' - | 'dnd'; + | 'dnd' + | 'regionalPrompts'; export const logger = (namespace: LoggerNamespace) => $logger.get().child({ namespace }); diff --git a/invokeai/frontend/web/src/app/store/store.ts b/invokeai/frontend/web/src/app/store/store.ts index b538a3eaeb..a21879cfcb 100644 --- a/invokeai/frontend/web/src/app/store/store.ts +++ b/invokeai/frontend/web/src/app/store/store.ts @@ -21,6 +21,11 @@ import { workflowPersistConfig, workflowSlice } from 'features/nodes/store/workf import { generationPersistConfig, generationSlice } from 'features/parameters/store/generationSlice'; import { postprocessingPersistConfig, postprocessingSlice } from 'features/parameters/store/postprocessingSlice'; import { queueSlice } from 'features/queue/store/queueSlice'; +import { + regionalPromptsPersistConfig, + regionalPromptsSlice, + regionalPromptsUndoableConfig, +} from 'features/regionalPrompts/store/regionalPromptsSlice'; import { sdxlPersistConfig, sdxlSlice } from 'features/sdxl/store/sdxlSlice'; import { configSlice } from 'features/system/store/configSlice'; import { systemPersistConfig, systemSlice } from 'features/system/store/systemSlice'; @@ -30,6 +35,7 @@ import { defaultsDeep, keys, omit, pick } from 'lodash-es'; import dynamicMiddlewares from 'redux-dynamic-middlewares'; import type { SerializeFunction, UnserializeFunction } from 'redux-remember'; import { rememberEnhancer, rememberReducer } from 'redux-remember'; +import undoable from 'redux-undo'; import { serializeError } from 'serialize-error'; import { api } from 'services/api'; import { authToastMiddleware } from 'services/api/authToastMiddleware'; @@ -59,6 +65,7 @@ const allReducers = { [queueSlice.name]: queueSlice.reducer, [workflowSlice.name]: workflowSlice.reducer, [hrfSlice.name]: hrfSlice.reducer, + [regionalPromptsSlice.name]: undoable(regionalPromptsSlice.reducer, regionalPromptsUndoableConfig), [api.reducerPath]: api.reducer, }; @@ -103,6 +110,7 @@ const persistConfigs: { [key in keyof typeof allReducers]?: PersistConfig } = { [loraPersistConfig.name]: loraPersistConfig, [modelManagerV2PersistConfig.name]: modelManagerV2PersistConfig, [hrfPersistConfig.name]: hrfPersistConfig, + [regionalPromptsPersistConfig.name]: regionalPromptsPersistConfig, }; const unserialize: UnserializeFunction = (data, key) => { @@ -114,6 +122,7 @@ const unserialize: UnserializeFunction = (data, key) => { try { const { initialState, migrate } = persistConfig; const parsed = JSON.parse(data); + // strip out old keys const stripped = pick(parsed, keys(initialState)); // run (additive) migrations @@ -141,7 +150,9 @@ const serialize: SerializeFunction = (data, key) => { if (!persistConfig) { throw new Error(`No persist config for slice "${key}"`); } - const result = omit(data, persistConfig.persistDenylist); + // Heuristic to determine if the slice is undoable - could just hardcode it in the persistConfig + const isUndoable = 'present' in data && 'past' in data && 'future' in data && '_latestUnfiltered' in data; + const result = omit(isUndoable ? data.present : data, persistConfig.persistDenylist); return JSON.stringify(result); }; diff --git a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx index 68ffa5369e..25b129f678 100644 --- a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx +++ b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx @@ -26,7 +26,7 @@ const sx: ChakraProps['sx'] = { const colorPickerStyles: CSSProperties = { width: '100%' }; -const numberInputWidth: ChakraProps['w'] = '4.2rem'; +const numberInputWidth: ChakraProps['w'] = '3.5rem'; const IAIColorPicker = (props: IAIColorPickerProps) => { const { color, onChange, withNumberInput, ...rest } = props; @@ -41,7 +41,7 @@ const IAIColorPicker = (props: IAIColorPickerProps) => { {withNumberInput && ( - {t('common.red')} + {t('common.red')[0]} { /> - {t('common.green')} + {t('common.green')[0]} { /> - {t('common.blue')} + {t('common.blue')[0]} { /> - {t('common.alpha')} + {t('common.alpha')[0]} & { + withNumberInput?: boolean; +}; + +const colorPickerPointerStyles: NonNullable = { + width: 6, + height: 6, + borderColor: 'base.100', +}; + +const sx: ChakraProps['sx'] = { + '.react-colorful__hue-pointer': colorPickerPointerStyles, + '.react-colorful__saturation-pointer': colorPickerPointerStyles, + '.react-colorful__alpha-pointer': colorPickerPointerStyles, + gap: 5, + flexDir: 'column', +}; + +const colorPickerStyles: CSSProperties = { width: '100%' }; + +const numberInputWidth: ChakraProps['w'] = '3.5rem'; + +const RgbColorPicker = (props: RgbColorPickerProps) => { + const { color, onChange, withNumberInput, ...rest } = props; + const { t } = useTranslation(); + const handleChangeR = useCallback((r: number) => onChange({ ...color, r }), [color, onChange]); + const handleChangeG = useCallback((g: number) => onChange({ ...color, g }), [color, onChange]); + const handleChangeB = useCallback((b: number) => onChange({ ...color, b }), [color, onChange]); + return ( + + + {withNumberInput && ( + + + {t('common.red')[0]} + + + + {t('common.green')[0]} + + + + {t('common.blue')[0]} + + + + )} + + ); +}; + +export default memo(RgbColorPicker); diff --git a/invokeai/frontend/web/src/common/util/arrayUtils.test.ts b/invokeai/frontend/web/src/common/util/arrayUtils.test.ts new file mode 100644 index 0000000000..5d0fd090f7 --- /dev/null +++ b/invokeai/frontend/web/src/common/util/arrayUtils.test.ts @@ -0,0 +1,85 @@ +import { moveBackward, moveForward, moveToBack, moveToFront } from 'common/util/arrayUtils'; +import { describe, expect, it } from 'vitest'; + +describe('Array Manipulation Functions', () => { + const originalArray = ['a', 'b', 'c', 'd']; + describe('moveForwardOne', () => { + it('should move an item forward by one position', () => { + const array = [...originalArray]; + const result = moveForward(array, (item) => item === 'b'); + expect(result).toEqual(['a', 'c', 'b', 'd']); + }); + + it('should do nothing if the item is at the end', () => { + const array = [...originalArray]; + const result = moveForward(array, (item) => item === 'd'); + expect(result).toEqual(['a', 'b', 'c', 'd']); + }); + + it("should leave the array unchanged if the item isn't in the array", () => { + const array = [...originalArray]; + const result = moveForward(array, (item) => item === 'z'); + expect(result).toEqual(originalArray); + }); + }); + + describe('moveToFront', () => { + it('should move an item to the front', () => { + const array = [...originalArray]; + const result = moveToFront(array, (item) => item === 'c'); + expect(result).toEqual(['c', 'a', 'b', 'd']); + }); + + it('should do nothing if the item is already at the front', () => { + const array = [...originalArray]; + const result = moveToFront(array, (item) => item === 'a'); + expect(result).toEqual(['a', 'b', 'c', 'd']); + }); + + it("should leave the array unchanged if the item isn't in the array", () => { + const array = [...originalArray]; + const result = moveToFront(array, (item) => item === 'z'); + expect(result).toEqual(originalArray); + }); + }); + + describe('moveBackwardsOne', () => { + it('should move an item backward by one position', () => { + const array = [...originalArray]; + const result = moveBackward(array, (item) => item === 'c'); + expect(result).toEqual(['a', 'c', 'b', 'd']); + }); + + it('should do nothing if the item is at the beginning', () => { + const array = [...originalArray]; + const result = moveBackward(array, (item) => item === 'a'); + expect(result).toEqual(['a', 'b', 'c', 'd']); + }); + + it("should leave the array unchanged if the item isn't in the array", () => { + const array = [...originalArray]; + const result = moveBackward(array, (item) => item === 'z'); + expect(result).toEqual(originalArray); + }); + }); + + describe('moveToBack', () => { + it('should move an item to the back', () => { + const array = [...originalArray]; + const result = moveToBack(array, (item) => item === 'b'); + expect(result).toEqual(['a', 'c', 'd', 'b']); + }); + + it('should do nothing if the item is already at the back', () => { + const array = [...originalArray]; + const result = moveToBack(array, (item) => item === 'd'); + expect(result).toEqual(['a', 'b', 'c', 'd']); + }); + + it("should leave the array unchanged if the item isn't in the array", () => { + const array = [...originalArray]; + const result = moveToBack(array, (item) => item === 'z'); + expect(result).toEqual(originalArray); + }); + }); +}); diff --git a/invokeai/frontend/web/src/common/util/arrayUtils.ts b/invokeai/frontend/web/src/common/util/arrayUtils.ts new file mode 100644 index 0000000000..38c99b63ec --- /dev/null +++ b/invokeai/frontend/web/src/common/util/arrayUtils.ts @@ -0,0 +1,37 @@ +export const moveForward = (array: T[], callback: (item: T) => boolean): T[] => { + const index = array.findIndex(callback); + if (index >= 0 && index < array.length - 1) { + //@ts-expect-error - These indicies are safe per the previous check + [array[index], array[index + 1]] = [array[index + 1], array[index]]; + } + return array; +}; + +export const moveToFront = (array: T[], callback: (item: T) => boolean): T[] => { + const index = array.findIndex(callback); + if (index > 0) { + const [item] = array.splice(index, 1); + //@ts-expect-error - These indicies are safe per the previous check + array.unshift(item); + } + return array; +}; + +export const moveBackward = (array: T[], callback: (item: T) => boolean): T[] => { + const index = array.findIndex(callback); + if (index > 0) { + //@ts-expect-error - These indicies are safe per the previous check + [array[index], array[index - 1]] = [array[index - 1], array[index]]; + } + return array; +}; + +export const moveToBack = (array: T[], callback: (item: T) => boolean): T[] => { + const index = array.findIndex(callback); + if (index >= 0 && index < array.length - 1) { + const [item] = array.splice(index, 1); + //@ts-expect-error - These indicies are safe per the previous check + array.push(item); + } + return array; +}; diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts index ef6a74ae9c..1434bc9afc 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts @@ -10,6 +10,18 @@ import { clamp } from 'lodash-es'; import type { MutableRefObject } from 'react'; import { useCallback } from 'react'; +export const calculateNewBrushSize = (brushSize: number, delta: number) => { + // This equation was derived by fitting a curve to the desired brush sizes and deltas + // see https://github.com/invoke-ai/InvokeAI/pull/5542#issuecomment-1915847565 + const targetDelta = Math.sign(delta) * 0.7363 * Math.pow(1.0394, brushSize); + // This needs to be clamped to prevent the delta from getting too large + const finalDelta = clamp(targetDelta, -20, 20); + // The new brush size is also clamped to prevent it from getting too large or small + const newBrushSize = clamp(brushSize + finalDelta, 1, 500); + + return newBrushSize; +}; + const useCanvasWheel = (stageRef: MutableRefObject) => { const dispatch = useAppDispatch(); const stageScale = useAppSelector((s) => s.canvas.stageScale); @@ -36,15 +48,7 @@ const useCanvasWheel = (stageRef: MutableRefObject) => { } if ($ctrl.get() || $meta.get()) { - // This equation was derived by fitting a curve to the desired brush sizes and deltas - // see https://github.com/invoke-ai/InvokeAI/pull/5542#issuecomment-1915847565 - const targetDelta = Math.sign(delta) * 0.7363 * Math.pow(1.0394, brushSize); - // This needs to be clamped to prevent the delta from getting too large - const finalDelta = clamp(targetDelta, -20, 20); - // The new brush size is also clamped to prevent it from getting too large or small - const newBrushSize = clamp(brushSize + finalDelta, 1, 500); - - dispatch(setBrushSize(newBrushSize)); + dispatch(setBrushSize(calculateNewBrushSize(brushSize, delta))); } else { const cursorPos = stageRef.current.getPointerPosition(); let delta = e.evt.deltaY; diff --git a/invokeai/frontend/web/src/features/canvas/util/blobToDataURL.ts b/invokeai/frontend/web/src/features/canvas/util/blobToDataURL.ts index 2443396105..f29010c99c 100644 --- a/invokeai/frontend/web/src/features/canvas/util/blobToDataURL.ts +++ b/invokeai/frontend/web/src/features/canvas/util/blobToDataURL.ts @@ -7,3 +7,22 @@ export const blobToDataURL = (blob: Blob): Promise => { reader.readAsDataURL(blob); }); }; + +export function imageDataToDataURL(imageData: ImageData): string { + const { width, height } = imageData; + + // Create a canvas to transfer the ImageData to + const canvas = document.createElement('canvas'); + canvas.width = width; + canvas.height = height; + + // Draw the ImageData onto the canvas + const ctx = canvas.getContext('2d'); + if (!ctx) { + throw new Error('Unable to get canvas context'); + } + ctx.putImageData(imageData, 0, 0); + + // Convert the canvas to a data URL (base64) + return canvas.toDataURL(); +} diff --git a/invokeai/frontend/web/src/features/canvas/util/colorToString.ts b/invokeai/frontend/web/src/features/canvas/util/colorToString.ts index a4b619c5de..25d79fed5a 100644 --- a/invokeai/frontend/web/src/features/canvas/util/colorToString.ts +++ b/invokeai/frontend/web/src/features/canvas/util/colorToString.ts @@ -1,6 +1,11 @@ -import type { RgbaColor } from 'react-colorful'; +import type { RgbaColor, RgbColor } from 'react-colorful'; export const rgbaColorToString = (color: RgbaColor): string => { const { r, g, b, a } = color; return `rgba(${r}, ${g}, ${b}, ${a})`; }; + +export const rgbColorToString = (color: RgbColor): string => { + const { r, g, b } = color; + return `rgba(${r}, ${g}, ${b})`; +}; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterIPMethod.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterIPMethod.tsx index c7aaa9f26c..7d531e2106 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterIPMethod.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterIPMethod.tsx @@ -52,7 +52,7 @@ const ParamControlAdapterIPMethod = ({ id }: Props) => { return ( - + {t('controlnet.ipAdapterMethod')} diff --git a/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts b/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts index 9a1ce5e984..3e335f4cc3 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts +++ b/invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts @@ -6,6 +6,7 @@ import { deepClone } from 'common/util/deepClone'; import { buildControlAdapter } from 'features/controlAdapters/util/buildControlAdapter'; import { buildControlAdapterProcessor } from 'features/controlAdapters/util/buildControlAdapterProcessor'; import { zModelIdentifierField } from 'features/nodes/types/common'; +import { maskLayerIPAdapterAdded } from 'features/regionalPrompts/store/regionalPromptsSlice'; import { merge, uniq } from 'lodash-es'; import type { ControlNetModelConfig, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types'; import { socketInvocationError } from 'services/events/actions'; @@ -382,6 +383,10 @@ export const controlAdaptersSlice = createSlice({ builder.addCase(socketInvocationError, (state) => { state.pendingControlImages = []; }); + + builder.addCase(maskLayerIPAdapterAdded, (state, action) => { + caAdapter.addOne(state, buildControlAdapter(action.meta.uuid, 'ip_adapter')); + }); }, }); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx index 8f6cef2c20..a6d0481b89 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui-library'; +import { Box, Flex, IconButton, Tooltip, useShiftModifier } from '@invoke-ai/ui-library'; import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { isString } from 'lodash-es'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; @@ -9,18 +9,19 @@ import { PiCopyBold, PiDownloadSimpleBold } from 'react-icons/pi'; type Props = { label: string; - data: object | string; + data: unknown; fileName?: string; withDownload?: boolean; withCopy?: boolean; + extraCopyActions?: { label: string; getData: (data: unknown) => unknown }[]; }; const overlayscrollbarsOptions = getOverlayScrollbarsParams('scroll', 'scroll').options; const DataViewer = (props: Props) => { - const { label, data, fileName, withDownload = true, withCopy = true } = props; + const { label, data, fileName, withDownload = true, withCopy = true, extraCopyActions } = props; const dataString = useMemo(() => (isString(data) ? data : JSON.stringify(data, null, 2)), [data]); - + const shift = useShiftModifier(); const handleCopy = useCallback(() => { navigator.clipboard.writeText(dataString); }, [dataString]); @@ -67,6 +68,10 @@ const DataViewer = (props: Props) => { /> )} + {shift && + extraCopyActions?.map(({ label, getData }) => ( + + ))} ); @@ -78,3 +83,27 @@ const overlayScrollbarsStyles: CSSProperties = { height: '100%', width: '100%', }; + +type ExtraCopyActionProps = { + label: string; + data: unknown; + getData: (data: unknown) => unknown; +}; +const ExtraCopyAction = ({ label, data, getData }: ExtraCopyActionProps) => { + const { t } = useTranslation(); + const handleCopy = useCallback(() => { + navigator.clipboard.writeText(JSON.stringify(getData(data), null, 2)); + }, [data, getData]); + + return ( + + } + variant="ghost" + opacity={0.7} + onClick={handleCopy} + /> + + ); +}; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/ControlNetOrT2IAdapterDefaultSettings.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/ControlNetOrT2IAdapterDefaultSettings.tsx index 93750348c0..dcdc4e2a36 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/ControlNetOrT2IAdapterDefaultSettings.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/ControlNetOrT2IAdapterDefaultSettings.tsx @@ -1,4 +1,4 @@ -import { Button, Flex, Heading, Text } from '@invoke-ai/ui-library'; +import { Button, Flex, Heading, SimpleGrid, Text } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useControlNetOrT2IAdapterDefaultSettings } from 'features/modelManagerV2/hooks/useControlNetOrT2IAdapterDefaultSettings'; import { DefaultPreprocessor } from 'features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/DefaultPreprocessor'; @@ -92,13 +92,9 @@ export const ControlNetOrT2IAdapterDefaultSettings = () => { - - - - - - - + + + ); }; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/MainModelDefaultSettings.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/MainModelDefaultSettings.tsx index 0027bd12e3..e096b11209 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/MainModelDefaultSettings.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/MainModelDefaultSettings.tsx @@ -1,4 +1,4 @@ -import { Button, Flex, Heading, Text } from '@invoke-ai/ui-library'; +import { Button, Flex, Heading, SimpleGrid, Text } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useMainModelDefaultSettings } from 'features/modelManagerV2/hooks/useMainModelDefaultSettings'; import { DefaultHeight } from 'features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/DefaultHeight'; @@ -122,40 +122,16 @@ export const MainModelDefaultSettings = () => { - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + ); }; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx index c73b6e52ed..1f8e50b9da 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx @@ -6,6 +6,7 @@ import { FormLabel, Heading, Input, + SimpleGrid, Text, Textarea, } from '@invoke-ai/ui-library'; @@ -66,25 +67,21 @@ export const ModelEdit = ({ form }: Props) => { {t('modelManager.modelSettings')} - + {t('modelManager.baseModel')} - - {data.type === 'main' && data.format === 'checkpoint' && ( - <> - + + {t('modelManager.variant')} + + + {data.type === 'main' && data.format === 'checkpoint' && ( + <> {t('modelManager.pathToConfig')} - - {t('modelManager.variant')} - - - - {t('modelManager.predictionType')} @@ -93,9 +90,9 @@ export const ModelEdit = ({ form }: Props) => { {t('modelManager.upcastAttention')} - - - )} + + )} + diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx index 0618af5dd0..83ae94c9bb 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Text } from '@invoke-ai/ui-library'; +import { Box, Flex, SimpleGrid, Text } from '@invoke-ai/ui-library'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppSelector } from 'app/store/storeHooks'; import { ControlNetOrT2IAdapterDefaultSettings } from 'features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/ControlNetOrT2IAdapterDefaultSettings'; @@ -24,57 +24,32 @@ export const ModelView = () => { return ( - - - - - - - - - - + + + + + + {data.type === 'main' && } {data.type === 'main' && data.format === 'diffusers' && data.repo_variant && ( - - - + )} - {data.type === 'main' && data.format === 'checkpoint' && ( <> - - - - - - - - + + + )} - {data.type === 'ip_adapter' && data.format === 'invokeai' && ( - - - + )} - + + + + {data.type === 'main' && data.base !== 'sdxl-refiner' && } + {(data.type === 'controlnet' || data.type === 't2i_adapter') && } + {(data.type === 'main' || data.type === 'lora') && } - {data.type === 'main' && data.base !== 'sdxl-refiner' && ( - - - - )} - {(data.type === 'controlnet' || data.type === 't2i_adapter') && ( - - - - )} - {(data.type === 'main' || data.type === 'lora') && ( - - - - )} ); }; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/TriggerPhrases.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/TriggerPhrases.tsx index ec707352c7..9352d7996c 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/TriggerPhrases.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/TriggerPhrases.tsx @@ -77,9 +77,17 @@ export const TriggerPhrases = () => { [updateModel, selectedModelKey, triggerPhrases] ); + const onTriggerPhraseAddFormSubmit = useCallback( + (e: React.FormEvent) => { + e.preventDefault(); + addTriggerPhrase(); + }, + [addTriggerPhrase] + ); + return ( -
+ {t('modelManager.triggerPhrases')} diff --git a/invokeai/frontend/web/src/features/nodes/store/types.ts b/invokeai/frontend/web/src/features/nodes/store/types.ts index 2074f1f342..89b4855193 100644 --- a/invokeai/frontend/web/src/features/nodes/store/types.ts +++ b/invokeai/frontend/web/src/features/nodes/store/types.ts @@ -23,6 +23,7 @@ export type NodesState = { nodeOpacity: number; shouldSnapToGrid: boolean; shouldColorEdges: boolean; + shouldShowEdgeLabels: boolean; selectedNodes: string[]; selectedEdges: string[]; nodeExecutionStates: Record; @@ -32,7 +33,6 @@ export type NodesState = { isAddNodePopoverOpen: boolean; addNewNodePosition: XYPosition | null; selectionMode: SelectionMode; - shouldShowEdgeLabels: boolean; }; export type WorkflowMode = 'edit' | 'view'; diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts index 568b24ccfd..0a90622e04 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts @@ -19,12 +19,14 @@ export const addIPAdapterToLinearGraph = async ( graph: NonNullableGraph, baseNodeId: string ): Promise => { - const validIPAdapters = selectValidIPAdapters(state.controlAdapters).filter(({ model, controlImage, isEnabled }) => { - const hasModel = Boolean(model); - const doesBaseMatch = model?.base === state.generation.model?.base; - const hasControlImage = controlImage; - return isEnabled && hasModel && doesBaseMatch && hasControlImage; - }); + const validIPAdapters = selectValidIPAdapters(state.controlAdapters) + .filter(({ model, controlImage, isEnabled }) => { + const hasModel = Boolean(model); + const doesBaseMatch = model?.base === state.generation.model?.base; + const hasControlImage = controlImage; + return isEnabled && hasModel && doesBaseMatch && hasControlImage; + }) + .filter((ca) => !state.regionalPrompts.present.layers.some((l) => l.ipAdapterIds.includes(ca.id))); if (validIPAdapters.length) { // Even though denoise_latents' ip adapter input is collection or scalar, keep it simple and always use a collect diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addRegionalPromptsToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addRegionalPromptsToGraph.ts new file mode 100644 index 0000000000..8d7a3a6c9a --- /dev/null +++ b/invokeai/frontend/web/src/features/nodes/util/graph/addRegionalPromptsToGraph.ts @@ -0,0 +1,346 @@ +import { getStore } from 'app/store/nanostores/store'; +import type { RootState } from 'app/store/store'; +import { selectAllIPAdapters } from 'features/controlAdapters/store/controlAdaptersSlice'; +import { + IP_ADAPTER_COLLECT, + NEGATIVE_CONDITIONING, + NEGATIVE_CONDITIONING_COLLECT, + POSITIVE_CONDITIONING, + POSITIVE_CONDITIONING_COLLECT, + PROMPT_REGION_INVERT_TENSOR_MASK_PREFIX, + PROMPT_REGION_MASK_TO_TENSOR_PREFIX, + PROMPT_REGION_NEGATIVE_COND_PREFIX, + PROMPT_REGION_POSITIVE_COND_INVERTED_PREFIX, + PROMPT_REGION_POSITIVE_COND_PREFIX, +} from 'features/nodes/util/graph/constants'; +import { isVectorMaskLayer } from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { getRegionalPromptLayerBlobs } from 'features/regionalPrompts/util/getLayerBlobs'; +import { size } from 'lodash-es'; +import { imagesApi } from 'services/api/endpoints/images'; +import type { CollectInvocation, Edge, IPAdapterInvocation, NonNullableGraph, S } from 'services/api/types'; +import { assert } from 'tsafe'; + +export const addRegionalPromptsToGraph = async (state: RootState, graph: NonNullableGraph, denoiseNodeId: string) => { + if (!state.regionalPrompts.present.isEnabled) { + return; + } + const { dispatch } = getStore(); + const isSDXL = state.generation.model?.base === 'sdxl'; + const layers = state.regionalPrompts.present.layers + // Only support vector mask layers now + // TODO: Image masks + .filter(isVectorMaskLayer) + // Only visible layers are rendered on the canvas + .filter((l) => l.isVisible) + // Only layers with prompts get added to the graph + .filter((l) => { + const hasTextPrompt = Boolean(l.positivePrompt || l.negativePrompt); + const hasIPAdapter = l.ipAdapterIds.length !== 0; + return hasTextPrompt || hasIPAdapter; + }); + + const regionalIPAdapters = selectAllIPAdapters(state.controlAdapters).filter( + ({ id, model, controlImage, isEnabled }) => { + const hasModel = Boolean(model); + const doesBaseMatch = model?.base === state.generation.model?.base; + const hasControlImage = controlImage; + const isRegional = layers.some((l) => l.ipAdapterIds.includes(id)); + return isEnabled && hasModel && doesBaseMatch && hasControlImage && isRegional; + } + ); + + const layerIds = layers.map((l) => l.id); + const blobs = await getRegionalPromptLayerBlobs(layerIds); + assert(size(blobs) === size(layerIds), 'Mismatch between layer IDs and blobs'); + + // TODO: We should probably just use conditioning collectors by default, and skip all this fanagling with re-routing + // the existing conditioning nodes. + + // With regional prompts we have multiple conditioning nodes which much be routed into collectors. Set those up + const posCondCollectNode: CollectInvocation = { + id: POSITIVE_CONDITIONING_COLLECT, + type: 'collect', + }; + graph.nodes[POSITIVE_CONDITIONING_COLLECT] = posCondCollectNode; + const negCondCollectNode: CollectInvocation = { + id: NEGATIVE_CONDITIONING_COLLECT, + type: 'collect', + }; + graph.nodes[NEGATIVE_CONDITIONING_COLLECT] = negCondCollectNode; + + // Re-route the denoise node's OG conditioning inputs to the collect nodes + const newEdges: Edge[] = []; + for (const edge of graph.edges) { + if (edge.destination.node_id === denoiseNodeId && edge.destination.field === 'positive_conditioning') { + newEdges.push({ + source: edge.source, + destination: { + node_id: POSITIVE_CONDITIONING_COLLECT, + field: 'item', + }, + }); + } else if (edge.destination.node_id === denoiseNodeId && edge.destination.field === 'negative_conditioning') { + newEdges.push({ + source: edge.source, + destination: { + node_id: NEGATIVE_CONDITIONING_COLLECT, + field: 'item', + }, + }); + } else { + newEdges.push(edge); + } + } + graph.edges = newEdges; + + // Connect collectors to the denoise nodes - must happen _after_ rerouting else you get cycles + graph.edges.push({ + source: { + node_id: POSITIVE_CONDITIONING_COLLECT, + field: 'collection', + }, + destination: { + node_id: denoiseNodeId, + field: 'positive_conditioning', + }, + }); + graph.edges.push({ + source: { + node_id: NEGATIVE_CONDITIONING_COLLECT, + field: 'collection', + }, + destination: { + node_id: denoiseNodeId, + field: 'negative_conditioning', + }, + }); + + if (!graph.nodes[IP_ADAPTER_COLLECT] && regionalIPAdapters.length > 0) { + const ipAdapterCollectNode: CollectInvocation = { + id: IP_ADAPTER_COLLECT, + type: 'collect', + is_intermediate: true, + }; + graph.nodes[IP_ADAPTER_COLLECT] = ipAdapterCollectNode; + graph.edges.push({ + source: { node_id: IP_ADAPTER_COLLECT, field: 'collection' }, + destination: { + node_id: denoiseNodeId, + field: 'ip_adapter', + }, + }); + } + + // Upload the blobs to the backend, add each to graph + // TODO: Store the uploaded image names in redux to reuse them, so long as the layer hasn't otherwise changed. This + // would be a great perf win - not only would we skip re-uploading the same image, but we'd be able to use the node + // cache (currently, when we re-use the same mask data, since it is a different image, the node cache is not used). + for (const layer of layers) { + const blob = blobs[layer.id]; + assert(blob, `Blob for layer ${layer.id} not found`); + + const file = new File([blob], `${layer.id}_mask.png`, { type: 'image/png' }); + const req = dispatch( + imagesApi.endpoints.uploadImage.initiate({ file, image_category: 'mask', is_intermediate: true }) + ); + req.reset(); + + // TODO: This will raise on network error + const { image_name } = await req.unwrap(); + + // The main mask-to-tensor node + const maskToTensorNode: S['AlphaMaskToTensorInvocation'] = { + id: `${PROMPT_REGION_MASK_TO_TENSOR_PREFIX}_${layer.id}`, + type: 'alpha_mask_to_tensor', + image: { + image_name, + }, + }; + graph.nodes[maskToTensorNode.id] = maskToTensorNode; + + if (layer.positivePrompt) { + // The main positive conditioning node + const regionalPositiveCondNode: S['SDXLCompelPromptInvocation'] | S['CompelInvocation'] = isSDXL + ? { + type: 'sdxl_compel_prompt', + id: `${PROMPT_REGION_POSITIVE_COND_PREFIX}_${layer.id}`, + prompt: layer.positivePrompt, + style: layer.positivePrompt, // TODO: Should we put the positive prompt in both fields? + } + : { + type: 'compel', + id: `${PROMPT_REGION_POSITIVE_COND_PREFIX}_${layer.id}`, + prompt: layer.positivePrompt, + }; + graph.nodes[regionalPositiveCondNode.id] = regionalPositiveCondNode; + + // Connect the mask to the conditioning + graph.edges.push({ + source: { node_id: maskToTensorNode.id, field: 'mask' }, + destination: { node_id: regionalPositiveCondNode.id, field: 'mask' }, + }); + + // Connect the conditioning to the collector + graph.edges.push({ + source: { node_id: regionalPositiveCondNode.id, field: 'conditioning' }, + destination: { node_id: posCondCollectNode.id, field: 'item' }, + }); + + // Copy the connections to the "global" positive conditioning node to the regional cond + for (const edge of graph.edges) { + if (edge.destination.node_id === POSITIVE_CONDITIONING && edge.destination.field !== 'prompt') { + graph.edges.push({ + source: edge.source, + destination: { node_id: regionalPositiveCondNode.id, field: edge.destination.field }, + }); + } + } + } + + if (layer.negativePrompt) { + // The main negative conditioning node + const regionalNegativeCondNode: S['SDXLCompelPromptInvocation'] | S['CompelInvocation'] = isSDXL + ? { + type: 'sdxl_compel_prompt', + id: `${PROMPT_REGION_NEGATIVE_COND_PREFIX}_${layer.id}`, + prompt: layer.negativePrompt, + style: layer.negativePrompt, + } + : { + type: 'compel', + id: `${PROMPT_REGION_NEGATIVE_COND_PREFIX}_${layer.id}`, + prompt: layer.negativePrompt, + }; + graph.nodes[regionalNegativeCondNode.id] = regionalNegativeCondNode; + + // Connect the mask to the conditioning + graph.edges.push({ + source: { node_id: maskToTensorNode.id, field: 'mask' }, + destination: { node_id: regionalNegativeCondNode.id, field: 'mask' }, + }); + + // Connect the conditioning to the collector + graph.edges.push({ + source: { node_id: regionalNegativeCondNode.id, field: 'conditioning' }, + destination: { node_id: negCondCollectNode.id, field: 'item' }, + }); + + // Copy the connections to the "global" negative conditioning node to the regional cond + for (const edge of graph.edges) { + if (edge.destination.node_id === NEGATIVE_CONDITIONING && edge.destination.field !== 'prompt') { + graph.edges.push({ + source: edge.source, + destination: { node_id: regionalNegativeCondNode.id, field: edge.destination.field }, + }); + } + } + } + + // If we are using the "invert" auto-negative setting, we need to add an additional negative conditioning node + if (layer.autoNegative === 'invert' && layer.positivePrompt) { + // We re-use the mask image, but invert it when converting to tensor + const invertTensorMaskNode: S['InvertTensorMaskInvocation'] = { + id: `${PROMPT_REGION_INVERT_TENSOR_MASK_PREFIX}_${layer.id}`, + type: 'invert_tensor_mask', + }; + graph.nodes[invertTensorMaskNode.id] = invertTensorMaskNode; + + // Connect the OG mask image to the inverted mask-to-tensor node + graph.edges.push({ + source: { + node_id: maskToTensorNode.id, + field: 'mask', + }, + destination: { + node_id: invertTensorMaskNode.id, + field: 'mask', + }, + }); + + // Create the conditioning node. It's going to be connected to the negative cond collector, but it uses the + // positive prompt + const regionalPositiveCondInvertedNode: S['SDXLCompelPromptInvocation'] | S['CompelInvocation'] = isSDXL + ? { + type: 'sdxl_compel_prompt', + id: `${PROMPT_REGION_POSITIVE_COND_INVERTED_PREFIX}_${layer.id}`, + prompt: layer.positivePrompt, + style: layer.positivePrompt, + } + : { + type: 'compel', + id: `${PROMPT_REGION_POSITIVE_COND_INVERTED_PREFIX}_${layer.id}`, + prompt: layer.positivePrompt, + }; + graph.nodes[regionalPositiveCondInvertedNode.id] = regionalPositiveCondInvertedNode; + // Connect the inverted mask to the conditioning + graph.edges.push({ + source: { node_id: invertTensorMaskNode.id, field: 'mask' }, + destination: { node_id: regionalPositiveCondInvertedNode.id, field: 'mask' }, + }); + // Connect the conditioning to the negative collector + graph.edges.push({ + source: { node_id: regionalPositiveCondInvertedNode.id, field: 'conditioning' }, + destination: { node_id: negCondCollectNode.id, field: 'item' }, + }); + // Copy the connections to the "global" positive conditioning node to our regional node + for (const edge of graph.edges) { + if (edge.destination.node_id === POSITIVE_CONDITIONING && edge.destination.field !== 'prompt') { + graph.edges.push({ + source: edge.source, + destination: { node_id: regionalPositiveCondInvertedNode.id, field: edge.destination.field }, + }); + } + } + } + + for (const ipAdapterId of layer.ipAdapterIds) { + const ipAdapter = selectAllIPAdapters(state.controlAdapters) + .filter(({ id, model, controlImage, isEnabled }) => { + const hasModel = Boolean(model); + const doesBaseMatch = model?.base === state.generation.model?.base; + const hasControlImage = controlImage; + const isRegional = layers.some((l) => l.ipAdapterIds.includes(id)); + return isEnabled && hasModel && doesBaseMatch && hasControlImage && isRegional; + }) + .find((ca) => ca.id === ipAdapterId); + + if (!ipAdapter?.model) { + return; + } + const { id, weight, model, clipVisionModel, method, beginStepPct, endStepPct, controlImage } = ipAdapter; + + assert(controlImage, 'IP Adapter image is required'); + + const ipAdapterNode: IPAdapterInvocation = { + id: `ip_adapter_${id}`, + type: 'ip_adapter', + is_intermediate: true, + weight: weight, + method: method, + ip_adapter_model: model, + clip_vision_model: clipVisionModel, + begin_step_percent: beginStepPct, + end_step_percent: endStepPct, + image: { + image_name: controlImage, + }, + }; + + graph.nodes[ipAdapterNode.id] = ipAdapterNode; + + // Connect the mask to the conditioning + graph.edges.push({ + source: { node_id: maskToTensorNode.id, field: 'mask' }, + destination: { node_id: ipAdapterNode.id, field: 'mask' }, + }); + + graph.edges.push({ + source: { node_id: ipAdapterNode.id, field: 'ip_adapter' }, + destination: { + node_id: IP_ADAPTER_COLLECT, + field: 'item', + }, + }); + } + } +}; diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts index 242fc15298..347027c539 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/addVAEToGraph.ts @@ -9,6 +9,7 @@ import { CANVAS_TEXT_TO_IMAGE_GRAPH, IMAGE_TO_IMAGE_GRAPH, IMAGE_TO_LATENTS, + INPAINT_CREATE_MASK, INPAINT_IMAGE, LATENTS_TO_IMAGE, MAIN_MODEL_LOADER, @@ -145,6 +146,16 @@ export const addVAEToGraph = async ( field: 'vae', }, }, + { + source: { + node_id: isSeamlessEnabled ? SEAMLESS : isAutoVae ? modelLoaderNodeId : VAE_LOADER, + field: 'vae', + }, + destination: { + node_id: INPAINT_CREATE_MASK, + field: 'vae', + }, + }, { source: { diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasInpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasInpaintGraph.ts index 372f7d8fe5..f8390b8b9a 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasInpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasInpaintGraph.ts @@ -133,6 +133,8 @@ export const buildCanvasInpaintGraph = async ( coherence_mode: canvasCoherenceMode, minimum_denoise: canvasCoherenceMinDenoise, edge_radius: canvasCoherenceEdgeSize, + tiled: false, + fp32: fp32, }, [DENOISE_LATENTS]: { type: 'denoise_latents', @@ -182,6 +184,16 @@ export const buildCanvasInpaintGraph = async ( field: 'clip', }, }, + { + source: { + node_id: modelLoaderNodeId, + field: 'unet', + }, + destination: { + node_id: INPAINT_CREATE_MASK, + field: 'unet', + }, + }, // Connect CLIP Skip to Conditioning { source: { @@ -331,6 +343,16 @@ export const buildCanvasInpaintGraph = async ( field: 'mask', }, }, + { + source: { + node_id: INPAINT_IMAGE_RESIZE_UP, + field: 'image', + }, + destination: { + node_id: INPAINT_CREATE_MASK, + field: 'image', + }, + }, // Resize Down { source: { diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasOutpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasOutpaintGraph.ts index 6a59c51872..39eab4aa50 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasOutpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasOutpaintGraph.ts @@ -157,6 +157,8 @@ export const buildCanvasOutpaintGraph = async ( coherence_mode: canvasCoherenceMode, edge_radius: canvasCoherenceEdgeSize, minimum_denoise: canvasCoherenceMinDenoise, + tiled: false, + fp32: fp32, }, [DENOISE_LATENTS]: { type: 'denoise_latents', @@ -207,6 +209,16 @@ export const buildCanvasOutpaintGraph = async ( field: 'clip', }, }, + { + source: { + node_id: modelLoaderNodeId, + field: 'unet', + }, + destination: { + node_id: INPAINT_CREATE_MASK, + field: 'unet', + }, + }, // Connect CLIP Skip to Conditioning { source: { @@ -453,6 +465,16 @@ export const buildCanvasOutpaintGraph = async ( field: 'image', }, }, + { + source: { + node_id: INPAINT_IMAGE_RESIZE_UP, + field: 'image', + }, + destination: { + node_id: INPAINT_CREATE_MASK, + field: 'image', + }, + }, // Resize Results Down { source: { diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLInpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLInpaintGraph.ts index 6a648a0ea4..6a33a6ef99 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLInpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLInpaintGraph.ts @@ -135,6 +135,8 @@ export const buildCanvasSDXLInpaintGraph = async ( coherence_mode: canvasCoherenceMode, minimum_denoise: refinerModel ? Math.max(0.2, canvasCoherenceMinDenoise) : canvasCoherenceMinDenoise, edge_radius: canvasCoherenceEdgeSize, + tiled: false, + fp32: fp32, }, [SDXL_DENOISE_LATENTS]: { type: 'denoise_latents', @@ -214,6 +216,16 @@ export const buildCanvasSDXLInpaintGraph = async ( field: 'clip2', }, }, + { + source: { + node_id: modelLoaderNodeId, + field: 'unet', + }, + destination: { + node_id: INPAINT_CREATE_MASK, + field: 'unet', + }, + }, // Connect Everything To Inpaint Node { source: { @@ -342,6 +354,16 @@ export const buildCanvasSDXLInpaintGraph = async ( field: 'mask', }, }, + { + source: { + node_id: INPAINT_IMAGE_RESIZE_UP, + field: 'image', + }, + destination: { + node_id: INPAINT_CREATE_MASK, + field: 'image', + }, + }, // Resize Down { source: { diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLOutpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLOutpaintGraph.ts index 87ad3e29a7..7cb215d5ec 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLOutpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLOutpaintGraph.ts @@ -157,6 +157,8 @@ export const buildCanvasSDXLOutpaintGraph = async ( coherence_mode: canvasCoherenceMode, edge_radius: canvasCoherenceEdgeSize, minimum_denoise: refinerModel ? Math.max(0.2, canvasCoherenceMinDenoise) : canvasCoherenceMinDenoise, + tiled: false, + fp32: fp32, }, [SDXL_DENOISE_LATENTS]: { type: 'denoise_latents', @@ -237,6 +239,16 @@ export const buildCanvasSDXLOutpaintGraph = async ( field: 'clip2', }, }, + { + source: { + node_id: modelLoaderNodeId, + field: 'unet', + }, + destination: { + node_id: INPAINT_CREATE_MASK, + field: 'unet', + }, + }, // Connect Infill Result To Inpaint Image { source: { @@ -451,6 +463,16 @@ export const buildCanvasSDXLOutpaintGraph = async ( field: 'image', }, }, + { + source: { + node_id: INPAINT_IMAGE_RESIZE_UP, + field: 'image', + }, + destination: { + node_id: INPAINT_CREATE_MASK, + field: 'image', + }, + }, // Take combined mask and resize { source: { diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLTextToImageGraph.ts index 7dadb8c3e9..b0b1140d5b 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLTextToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLTextToImageGraph.ts @@ -1,6 +1,7 @@ import { logger } from 'app/logging/logger'; import type { RootState } from 'app/store/store'; import { fetchModelConfigWithTypeGuard } from 'features/metadata/util/modelFetchingHelpers'; +import { addRegionalPromptsToGraph } from 'features/nodes/util/graph/addRegionalPromptsToGraph'; import { isNonRefinerMainModelConfig, type NonNullableGraph } from 'services/api/types'; import { addControlNetToLinearGraph } from './addControlNetToLinearGraph'; @@ -273,6 +274,8 @@ export const buildLinearSDXLTextToImageGraph = async (state: RootState): Promise await addT2IAdaptersToLinearGraph(state, graph, SDXL_DENOISE_LATENTS); + await addRegionalPromptsToGraph(state, graph, SDXL_DENOISE_LATENTS); + // NSFW & watermark - must be last thing added to graph if (state.system.shouldUseNSFWChecker) { // must add before watermarker! diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearTextToImageGraph.ts index aac1270e0d..90101add6d 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearTextToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearTextToImageGraph.ts @@ -1,6 +1,7 @@ import { logger } from 'app/logging/logger'; import type { RootState } from 'app/store/store'; import { fetchModelConfigWithTypeGuard } from 'features/metadata/util/modelFetchingHelpers'; +import { addRegionalPromptsToGraph } from 'features/nodes/util/graph/addRegionalPromptsToGraph'; import { getBoardField, getIsIntermediate } from 'features/nodes/util/graph/graphBuilderUtils'; import { isNonRefinerMainModelConfig, type NonNullableGraph } from 'services/api/types'; @@ -255,6 +256,8 @@ export const buildLinearTextToImageGraph = async (state: RootState): Promise { + return ( + + + + ); +}); + +AspectRatioCanvasPreview.displayName = 'AspectRatioCanvasPreview'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioIconPreview.tsx similarity index 92% rename from invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx rename to invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioIconPreview.tsx index e662acae7d..3ed7d0d802 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioIconPreview.tsx @@ -2,7 +2,7 @@ import { useSize } from '@chakra-ui/react-use-size'; import { Flex, Icon } from '@invoke-ai/ui-library'; import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; import { AnimatePresence, motion } from 'framer-motion'; -import { useMemo, useRef } from 'react'; +import { memo, useMemo, useRef } from 'react'; import { PiFrameCorners } from 'react-icons/pi'; import { @@ -15,7 +15,7 @@ import { MOTION_ICON_INITIAL, } from './constants'; -export const AspectRatioPreview = () => { +export const AspectRatioIconPreview = memo(() => { const ctx = useImageSizeContext(); const containerRef = useRef(null); const containerSize = useSize(containerRef); @@ -70,4 +70,6 @@ export const AspectRatioPreview = () => { ); -}; +}); + +AspectRatioIconPreview.displayName = 'AspectRatioIconPreview'; diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx index 811578263a..0c702c77f1 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx @@ -1,6 +1,5 @@ import type { FormLabelProps } from '@invoke-ai/ui-library'; import { Flex, FormControlGroup } from '@invoke-ai/ui-library'; -import { AspectRatioPreview } from 'features/parameters/components/ImageSize/AspectRatioPreview'; import { AspectRatioSelect } from 'features/parameters/components/ImageSize/AspectRatioSelect'; import type { ImageSizeContextInnerValue } from 'features/parameters/components/ImageSize/ImageSizeContext'; import { ImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext'; @@ -13,10 +12,11 @@ import { memo } from 'react'; type ImageSizeProps = ImageSizeContextInnerValue & { widthComponent: ReactNode; heightComponent: ReactNode; + previewComponent: ReactNode; }; export const ImageSize = memo((props: ImageSizeProps) => { - const { widthComponent, heightComponent, ...ctx } = props; + const { widthComponent, heightComponent, previewComponent, ...ctx } = props; return ( @@ -33,7 +33,7 @@ export const ImageSize = memo((props: ImageSizeProps) => { - + {previewComponent} diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts b/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts index b8c46005e6..0e435e795e 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts +++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts @@ -1,7 +1,6 @@ import type { ComboboxOption } from '@invoke-ai/ui-library'; import type { AspectRatioID, AspectRatioState } from './types'; - // When the aspect ratio is between these two values, we show the icon (experimentally determined) export const ICON_LOW_CUTOFF = 0.23; export const ICON_HIGH_CUTOFF = 1 / ICON_LOW_CUTOFF; @@ -25,7 +24,6 @@ export const ICON_CONTAINER_STYLES = { alignItems: 'center', justifyContent: 'center', }; - export const ASPECT_RATIO_OPTIONS: ComboboxOption[] = [ { label: 'Free' as const, value: 'Free' }, { label: '16:9' as const, value: '16:9' }, diff --git a/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts b/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts index 75693cd47f..a18cc7f86d 100644 --- a/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts +++ b/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts @@ -196,3 +196,8 @@ const zLoRAWeight = z.number(); type ParameterLoRAWeight = z.infer; export const isParameterLoRAWeight = (val: unknown): val is ParameterLoRAWeight => zLoRAWeight.safeParse(val).success; // #endregion + +// #region Regional Prompts AutoNegative +const zAutoNegative = z.enum(['off', 'invert']); +export type ParameterAutoNegative = z.infer; +// #endregion diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx index a26a7d4360..b719ae0a92 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx @@ -3,6 +3,7 @@ import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataView import { useCancelBatch } from 'features/queue/hooks/useCancelBatch'; import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem'; import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps'; +import { get } from 'lodash-es'; import type { ReactNode } from 'react'; import { memo, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -92,7 +93,15 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => { )} - {queueItem ? : } + {queueItem ? ( + get(data, 'session.graph') }]} + /> + ) : ( + + )} ); diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/AddLayerButton.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/AddLayerButton.tsx new file mode 100644 index 0000000000..8acfc18c56 --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/AddLayerButton.tsx @@ -0,0 +1,22 @@ +import { Button } from '@invoke-ai/ui-library'; +import { useAppDispatch } from 'app/store/storeHooks'; +import { layerAdded } from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { memo, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { PiPlusBold } from 'react-icons/pi'; + +export const AddLayerButton = memo(() => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const onClick = useCallback(() => { + dispatch(layerAdded('vector_mask_layer')); + }, [dispatch]); + + return ( + + ); +}); + +AddLayerButton.displayName = 'AddLayerButton'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/AddPromptButtons.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/AddPromptButtons.tsx new file mode 100644 index 0000000000..2f1d4e8f4d --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/AddPromptButtons.tsx @@ -0,0 +1,70 @@ +import { Button, Flex } from '@invoke-ai/ui-library'; +import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { + isVectorMaskLayer, + maskLayerIPAdapterAdded, + maskLayerNegativePromptChanged, + maskLayerPositivePromptChanged, + selectRegionalPromptsSlice, +} from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { PiPlusBold } from 'react-icons/pi'; +import { assert } from 'tsafe'; +type AddPromptButtonProps = { + layerId: string; +}; + +export const AddPromptButtons = ({ layerId }: AddPromptButtonProps) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const selectValidActions = useMemo( + () => + createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => { + const layer = regionalPrompts.present.layers.find((l) => l.id === layerId); + assert(isVectorMaskLayer(layer), `Layer ${layerId} not found or not an RP layer`); + return { + canAddPositivePrompt: layer.positivePrompt === null, + canAddNegativePrompt: layer.negativePrompt === null, + }; + }), + [layerId] + ); + const validActions = useAppSelector(selectValidActions); + const addPositivePrompt = useCallback(() => { + dispatch(maskLayerPositivePromptChanged({ layerId, prompt: '' })); + }, [dispatch, layerId]); + const addNegativePrompt = useCallback(() => { + dispatch(maskLayerNegativePromptChanged({ layerId, prompt: '' })); + }, [dispatch, layerId]); + const addIPAdapter = useCallback(() => { + dispatch(maskLayerIPAdapterAdded(layerId)); + }, [dispatch, layerId]); + + return ( + + + + + + ); +}; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/BrushSize.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/BrushSize.tsx new file mode 100644 index 0000000000..e06e259f6e --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/BrushSize.tsx @@ -0,0 +1,63 @@ +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, + Popover, + PopoverArrow, + PopoverBody, + PopoverContent, + PopoverTrigger, +} from '@invoke-ai/ui-library'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { brushSizeChanged, initialRegionalPromptsState } from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { memo, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; + +const marks = [0, 100, 200, 300]; +const formatPx = (v: number | string) => `${v} px`; + +export const BrushSize = memo(() => { + const dispatch = useAppDispatch(); + const { t } = useTranslation(); + const brushSize = useAppSelector((s) => s.regionalPrompts.present.brushSize); + const onChange = useCallback( + (v: number) => { + dispatch(brushSizeChanged(v)); + }, + [dispatch] + ); + return ( + + {t('regionalPrompts.brushSize')} + + + + + + + + + + + + + ); +}); + +BrushSize.displayName = 'BrushSize'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/DeleteAllLayersButton.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/DeleteAllLayersButton.tsx new file mode 100644 index 0000000000..4306e3f3f3 --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/DeleteAllLayersButton.tsx @@ -0,0 +1,22 @@ +import { Button } from '@invoke-ai/ui-library'; +import { useAppDispatch } from 'app/store/storeHooks'; +import { allLayersDeleted } from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { memo, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { PiTrashSimpleBold } from 'react-icons/pi'; + +export const DeleteAllLayersButton = memo(() => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const onClick = useCallback(() => { + dispatch(allLayersDeleted()); + }, [dispatch]); + + return ( + + ); +}); + +DeleteAllLayersButton.displayName = 'DeleteAllLayersButton'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/GlobalMaskLayerOpacity.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/GlobalMaskLayerOpacity.tsx new file mode 100644 index 0000000000..8386f522a2 --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/GlobalMaskLayerOpacity.tsx @@ -0,0 +1,70 @@ +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, + Popover, + PopoverArrow, + PopoverBody, + PopoverContent, + PopoverTrigger, +} from '@invoke-ai/ui-library'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { + globalMaskLayerOpacityChanged, + initialRegionalPromptsState, +} from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { memo, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; + +const marks = [0, 25, 50, 75, 100]; +const formatPct = (v: number | string) => `${v} %`; + +export const GlobalMaskLayerOpacity = memo(() => { + const dispatch = useAppDispatch(); + const { t } = useTranslation(); + const globalMaskLayerOpacity = useAppSelector((s) => + Math.round(s.regionalPrompts.present.globalMaskLayerOpacity * 100) + ); + const onChange = useCallback( + (v: number) => { + dispatch(globalMaskLayerOpacityChanged(v / 100)); + }, + [dispatch] + ); + return ( + + {t('regionalPrompts.globalMaskOpacity')} + + + + + + + + + + + + + ); +}); + +GlobalMaskLayerOpacity.displayName = 'GlobalMaskLayerOpacity'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerAutoNegativeCheckbox.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerAutoNegativeCheckbox.tsx new file mode 100644 index 0000000000..454c30a6d2 --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerAutoNegativeCheckbox.tsx @@ -0,0 +1,51 @@ +import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library'; +import { createSelector } from '@reduxjs/toolkit'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { + isVectorMaskLayer, + maskLayerAutoNegativeChanged, + selectRegionalPromptsSlice, +} from 'features/regionalPrompts/store/regionalPromptsSlice'; +import type { ChangeEvent } from 'react'; +import { memo, useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { assert } from 'tsafe'; + +type Props = { + layerId: string; +}; + +const useAutoNegative = (layerId: string) => { + const selectAutoNegative = useMemo( + () => + createSelector(selectRegionalPromptsSlice, (regionalPrompts) => { + const layer = regionalPrompts.present.layers.find((l) => l.id === layerId); + assert(isVectorMaskLayer(layer), `Layer ${layerId} not found or not an RP layer`); + return layer.autoNegative; + }), + [layerId] + ); + const autoNegative = useAppSelector(selectAutoNegative); + return autoNegative; +}; + +export const RPLayerAutoNegativeCheckbox = memo(({ layerId }: Props) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const autoNegative = useAutoNegative(layerId); + const onChange = useCallback( + (e: ChangeEvent) => { + dispatch(maskLayerAutoNegativeChanged({ layerId, autoNegative: e.target.checked ? 'invert' : 'off' })); + }, + [dispatch, layerId] + ); + + return ( + + {t('regionalPrompts.autoNegative')} + + + ); +}); + +RPLayerAutoNegativeCheckbox.displayName = 'RPLayerAutoNegativeCheckbox'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerColorPicker.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerColorPicker.tsx new file mode 100644 index 0000000000..851cd8b13f --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerColorPicker.tsx @@ -0,0 +1,67 @@ +import { Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger, Tooltip } from '@invoke-ai/ui-library'; +import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import RgbColorPicker from 'common/components/RgbColorPicker'; +import { rgbColorToString } from 'features/canvas/util/colorToString'; +import { + isVectorMaskLayer, + maskLayerPreviewColorChanged, + selectRegionalPromptsSlice, +} from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { memo, useCallback, useMemo } from 'react'; +import type { RgbColor } from 'react-colorful'; +import { useTranslation } from 'react-i18next'; +import { assert } from 'tsafe'; + +type Props = { + layerId: string; +}; + +export const RPLayerColorPicker = memo(({ layerId }: Props) => { + const { t } = useTranslation(); + const selectColor = useMemo( + () => + createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => { + const layer = regionalPrompts.present.layers.find((l) => l.id === layerId); + assert(isVectorMaskLayer(layer), `Layer ${layerId} not found or not an vector mask layer`); + return layer.previewColor; + }), + [layerId] + ); + const color = useAppSelector(selectColor); + const dispatch = useAppDispatch(); + const onColorChange = useCallback( + (color: RgbColor) => { + dispatch(maskLayerPreviewColorChanged({ layerId, color })); + }, + [dispatch, layerId] + ); + return ( + + + + + + + + + + + + + + + ); +}); + +RPLayerColorPicker.displayName = 'RPLayerColorPicker'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerDeleteButton.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerDeleteButton.tsx new file mode 100644 index 0000000000..237b710062 --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerDeleteButton.tsx @@ -0,0 +1,28 @@ +import { IconButton } from '@invoke-ai/ui-library'; +import { useAppDispatch } from 'app/store/storeHooks'; +import { layerDeleted } from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { memo, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { PiTrashSimpleBold } from 'react-icons/pi'; + +type Props = { layerId: string }; + +export const RPLayerDeleteButton = memo(({ layerId }: Props) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const deleteLayer = useCallback(() => { + dispatch(layerDeleted(layerId)); + }, [dispatch, layerId]); + return ( + } + onClick={deleteLayer} + /> + ); +}); + +RPLayerDeleteButton.displayName = 'RPLayerDeleteButton'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerIPAdapterList.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerIPAdapterList.tsx new file mode 100644 index 0000000000..c5d1ca62e9 --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerIPAdapterList.tsx @@ -0,0 +1,34 @@ +import { Flex } from '@invoke-ai/ui-library'; +import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; +import { useAppSelector } from 'app/store/storeHooks'; +import ControlAdapterConfig from 'features/controlAdapters/components/ControlAdapterConfig'; +import { selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { memo, useMemo } from 'react'; +import { assert } from 'tsafe'; + +type Props = { + layerId: string; +}; + +export const RPLayerIPAdapterList = memo(({ layerId }: Props) => { + const selectIPAdapterIds = useMemo( + () => + createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => { + const layer = regionalPrompts.present.layers.find((l) => l.id === layerId); + assert(layer, `Layer ${layerId} not found`); + return layer.ipAdapterIds; + }), + [layerId] + ); + const ipAdapterIds = useAppSelector(selectIPAdapterIds); + + return ( + + {ipAdapterIds.map((id, index) => ( + + ))} + + ); +}); + +RPLayerIPAdapterList.displayName = 'RPLayerIPAdapterList'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerListItem.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerListItem.tsx new file mode 100644 index 0000000000..ef98a659ac --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerListItem.tsx @@ -0,0 +1,87 @@ +import { Badge, Flex, Spacer } from '@invoke-ai/ui-library'; +import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { rgbColorToString } from 'features/canvas/util/colorToString'; +import { RPLayerColorPicker } from 'features/regionalPrompts/components/RPLayerColorPicker'; +import { RPLayerDeleteButton } from 'features/regionalPrompts/components/RPLayerDeleteButton'; +import { RPLayerIPAdapterList } from 'features/regionalPrompts/components/RPLayerIPAdapterList'; +import { RPLayerMenu } from 'features/regionalPrompts/components/RPLayerMenu'; +import { RPLayerNegativePrompt } from 'features/regionalPrompts/components/RPLayerNegativePrompt'; +import { RPLayerPositivePrompt } from 'features/regionalPrompts/components/RPLayerPositivePrompt'; +import RPLayerSettingsPopover from 'features/regionalPrompts/components/RPLayerSettingsPopover'; +import { RPLayerVisibilityToggle } from 'features/regionalPrompts/components/RPLayerVisibilityToggle'; +import { + isVectorMaskLayer, + layerSelected, + selectRegionalPromptsSlice, +} from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { memo, useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { assert } from 'tsafe'; + +import { AddPromptButtons } from './AddPromptButtons'; + +type Props = { + layerId: string; +}; + +export const RPLayerListItem = memo(({ layerId }: Props) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const selector = useMemo( + () => + createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => { + const layer = regionalPrompts.present.layers.find((l) => l.id === layerId); + assert(isVectorMaskLayer(layer), `Layer ${layerId} not found or not an RP layer`); + return { + color: rgbColorToString(layer.previewColor), + hasPositivePrompt: layer.positivePrompt !== null, + hasNegativePrompt: layer.negativePrompt !== null, + hasIPAdapters: layer.ipAdapterIds.length > 0, + isSelected: layerId === regionalPrompts.present.selectedLayerId, + autoNegative: layer.autoNegative, + }; + }), + [layerId] + ); + const { autoNegative, color, hasPositivePrompt, hasNegativePrompt, hasIPAdapters, isSelected } = + useAppSelector(selector); + const onClickCapture = useCallback(() => { + // Must be capture so that the layer is selected before deleting/resetting/etc + dispatch(layerSelected(layerId)); + }, [dispatch, layerId]); + return ( + + + + + + + {autoNegative === 'invert' && ( + + {t('regionalPrompts.autoNegative')} + + )} + + + + + {!hasPositivePrompt && !hasNegativePrompt && !hasIPAdapters && } + {hasPositivePrompt && } + {hasNegativePrompt && } + {hasIPAdapters && } + + + ); +}); + +RPLayerListItem.displayName = 'RPLayerListItem'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerMenu.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerMenu.tsx new file mode 100644 index 0000000000..f3c5317e10 --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerMenu.tsx @@ -0,0 +1,120 @@ +import { IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@invoke-ai/ui-library'; +import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { + isVectorMaskLayer, + layerDeleted, + layerMovedBackward, + layerMovedForward, + layerMovedToBack, + layerMovedToFront, + layerReset, + maskLayerIPAdapterAdded, + maskLayerNegativePromptChanged, + maskLayerPositivePromptChanged, + selectRegionalPromptsSlice, +} from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { memo, useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + PiArrowCounterClockwiseBold, + PiArrowDownBold, + PiArrowLineDownBold, + PiArrowLineUpBold, + PiArrowUpBold, + PiDotsThreeVerticalBold, + PiPlusBold, + PiTrashSimpleBold, +} from 'react-icons/pi'; +import { assert } from 'tsafe'; + +type Props = { layerId: string }; + +export const RPLayerMenu = memo(({ layerId }: Props) => { + const dispatch = useAppDispatch(); + const { t } = useTranslation(); + const selectValidActions = useMemo( + () => + createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => { + const layer = regionalPrompts.present.layers.find((l) => l.id === layerId); + assert(isVectorMaskLayer(layer), `Layer ${layerId} not found or not an RP layer`); + const layerIndex = regionalPrompts.present.layers.findIndex((l) => l.id === layerId); + const layerCount = regionalPrompts.present.layers.length; + return { + canAddPositivePrompt: layer.positivePrompt === null, + canAddNegativePrompt: layer.negativePrompt === null, + canMoveForward: layerIndex < layerCount - 1, + canMoveBackward: layerIndex > 0, + canMoveToFront: layerIndex < layerCount - 1, + canMoveToBack: layerIndex > 0, + }; + }), + [layerId] + ); + const validActions = useAppSelector(selectValidActions); + const addPositivePrompt = useCallback(() => { + dispatch(maskLayerPositivePromptChanged({ layerId, prompt: '' })); + }, [dispatch, layerId]); + const addNegativePrompt = useCallback(() => { + dispatch(maskLayerNegativePromptChanged({ layerId, prompt: '' })); + }, [dispatch, layerId]); + const addIPAdapter = useCallback(() => { + dispatch(maskLayerIPAdapterAdded(layerId)); + }, [dispatch, layerId]); + const moveForward = useCallback(() => { + dispatch(layerMovedForward(layerId)); + }, [dispatch, layerId]); + const moveToFront = useCallback(() => { + dispatch(layerMovedToFront(layerId)); + }, [dispatch, layerId]); + const moveBackward = useCallback(() => { + dispatch(layerMovedBackward(layerId)); + }, [dispatch, layerId]); + const moveToBack = useCallback(() => { + dispatch(layerMovedToBack(layerId)); + }, [dispatch, layerId]); + const resetLayer = useCallback(() => { + dispatch(layerReset(layerId)); + }, [dispatch, layerId]); + const deleteLayer = useCallback(() => { + dispatch(layerDeleted(layerId)); + }, [dispatch, layerId]); + return ( + + } /> + + }> + {t('regionalPrompts.addPositivePrompt')} + + }> + {t('regionalPrompts.addNegativePrompt')} + + }> + {t('regionalPrompts.addIPAdapter')} + + + }> + {t('regionalPrompts.moveToFront')} + + }> + {t('regionalPrompts.moveForward')} + + }> + {t('regionalPrompts.moveBackward')} + + }> + {t('regionalPrompts.moveToBack')} + + + }> + {t('accessibility.reset')} + + } color="error.300"> + {t('common.delete')} + + + + ); +}); + +RPLayerMenu.displayName = 'RPLayerMenu'; diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerNegativePrompt.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerNegativePrompt.tsx new file mode 100644 index 0000000000..382b698b8f --- /dev/null +++ b/invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerNegativePrompt.tsx @@ -0,0 +1,58 @@ +import { Box, Textarea } from '@invoke-ai/ui-library'; +import { useAppDispatch } from 'app/store/storeHooks'; +import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper'; +import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton'; +import { PromptPopover } from 'features/prompt/PromptPopover'; +import { usePrompt } from 'features/prompt/usePrompt'; +import { RPLayerPromptDeleteButton } from 'features/regionalPrompts/components/RPLayerPromptDeleteButton'; +import { useLayerNegativePrompt } from 'features/regionalPrompts/hooks/layerStateHooks'; +import { maskLayerNegativePromptChanged } from 'features/regionalPrompts/store/regionalPromptsSlice'; +import { memo, useCallback, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; + +type Props = { + layerId: string; +}; + +export const RPLayerNegativePrompt = memo(({ layerId }: Props) => { + const prompt = useLayerNegativePrompt(layerId); + const dispatch = useAppDispatch(); + const textareaRef = useRef(null); + const { t } = useTranslation(); + const _onChange = useCallback( + (v: string) => { + dispatch(maskLayerNegativePromptChanged({ layerId, prompt: v })); + }, + [dispatch, layerId] + ); + const { onChange, isOpen, onClose, onOpen, onSelect, onKeyDown } = usePrompt({ + prompt, + textareaRef, + onChange: _onChange, + }); + + return ( + + +