Display a checkerboard canvas before painting

replicate / outpainter

A web GUI built with Nuxt.js for outpainting with Stable Diffusion using the Replicate API.

https://outpainter.app

MIT License

46 stars 8 forks source link

Display a checkerboard canvas before painting #4

Closed zeke closed 1 year ago

zeke commented 1 year ago

This PR updates the default view to display a checkerboard background around the input image, à la Photoshop and other design tools, to indicate the transparent part of the image that will be filled in.

Screenshot 2023-06-13 at 10 21 35 PM

Screenshot 2023-06-13 at 10 19 14 PM

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
outpainter	✅ Ready (Inspect)	Visit Preview	Jun 14, 2023 5:25am

zeke commented 1 year ago

@Pwntus this mostly works, but could use some improvement:

Works great on a large screen but something weird happens on smaller viewports
It would be nice to animate the output image in somehow, either with opacity or scaling it out from the center of the canvas, beneath the z-index of the input image.

Pwntus commented 1 year ago

@zeke This is actually much better! Thanks for the PR!

I will try to get the final output to fade in instead of just "popping" in. 👍 I'll also check the responsiveness on smaller screens.