Skip to content

feat(ui): img2img UX 2 #7090

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 10, 2024
Merged

feat(ui): img2img UX 2 #7090

merged 7 commits into from
Oct 10, 2024

Conversation

psychedelicious
Copy link
Collaborator

Summary

  • Clean up canvas add layer hooks
  • Add layer post-init callback system
  • Add mutex to CanvasEntityTransformer to prevent concurrent operations
  • Use new init callback and transform mutex to implement New Img2Img from Image
  • Disable the "new X from image" actions when canvas is busy

Related Issues / Discussions

Scattered discord & offline discussions

QA Instructions

To test the functionality

  • Right click an image in gallery
  • Click New Img2Img from Image, which should:
    • Reset the Canvas
    • Optimize the bbox size, retaining the image's aspect ratio
    • Fit the image exactly to the bbox
  • You should be able to click Invoke immediately after this and it should do img2img.

Discussion points

  • I've left New Canvas from Image and New Img2Img from Image separate, but maybe it's better to not add a new button for img2img and instead update the behaviour of New Canvas from Image.

  • Because the image can be of any size (e.g. not perfect multiples of 8/16), we will typically need to make a small concession with the image or bbox size. Two approaches:

    1. The image is fit to the bbox using the fill strategy, so its final aspect ratio may be slightly different, but it will fit the bbox perfectly. This is the approach used in this PR. I think it's closer to what the user wants, and better replicates the old img2img flow.
    2. The image retains its aspect ratio exactly, and we do a conservative bbox fit. This would typically leave some edges of the image outside the bbox.

Merge Plan

n/a

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • Documentation added / updated (if applicable)

If an entity needs to do something after init, it can use this system. For example, if a layer should be transformed immediately after initializing, it can use an init callback.
This replicates the img2img flow:
- Reset the canvas
- Resize the bbox to the image's aspect ratio at the optimal size for the selected model
- Add the image as a raster layer
- Resizes the layer to fit the bbox using the 'fill' strategy

After this completes, the user can immediately click Invoke and it will do img2img.
@github-actions github-actions bot added the frontend PRs that change frontend files label Oct 10, 2024
@hipsterusername
Copy link
Member

I agree about the “New Canvas” resizing automatically. I think we’ve gotta streamline that

Regarding the size, I think you’ve made the right call. Having leftover pixels would be confusing for users. We will just need to explain that well enough

@hipsterusername hipsterusername merged commit 236c065 into main Oct 10, 2024
14 checks passed
@hipsterusername hipsterusername deleted the psyche/feat/ui/img2img-ux-2 branch October 10, 2024 11:43
@hipsterusername
Copy link
Member

Have merged this in any case, change to the button can be done as a follow on.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend PRs that change frontend files
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants