invoke-ai/InvokeAI

[enhancement]: Unified Canvas/Mask mode - change "Erase bounding box" to "Erase masked content"

Open

#4208 opened on Aug 9, 2023

View on GitHub
 (1 comment) (1 reaction) (0 assignees)TypeScript (20,358 stars) (2,164 forks)batch import
enhancementgood first issueunified canvas

Description

Is there an existing issue for this?

  • I have searched the existing issues

Contact Details

No response

What should this feature add?

There has been an existing issue for this that went inactive back in December '22 (https://github.com/invoke-ai/InvokeAI/issues/1823), but I feel it is worth mentioning again, as it makes a lot of sense.

In Unified Canvas and while in Mask mode, the button "Erase Bounding Box" should be changed to "Erase masked content". If you want to inpaint something masked with completely new imagery and not img2img based, you currently need to draw the mask and then erase the underlying image beneath the mask, which can be quite finicky and requires multiple passes of adjusting the mask.

It would be a huge improvement if you could paint in a mask and remove the image data "beneath" that mask with one click. Changing the "Erase Bounding box (Del/Backspc)" to "Erase masked content" would accomplish that. I can't think of a use case where you would mask an area and would want to remove the content of the bounding box in this content, so the button could be repurposed.

Alternatives

No response

Aditional Content

No response

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScriptReactCanvas component understanding
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
Locate the 'Unified Canvas' component in the frontend source, likely under `src/features/canvas`. Find the 'Erase bounding box' button in the mask mode UI. Review the existing logic for erasing the bounding box vs. masked content. Refer to the previous issue #1823 for discussion. The change involves updating the button label and modifying the action to erase only the masked area.