Add Text tools section

[iliasiovis]

This is awesome! Thank you for the extension.

Here is my idea: By adding a few simple text tools (font-family, font-size, weight etc, already available in fabricJS) we can solve the generation of crisp and clear text on AI generated images by having a depth map with the text exactly where we need it!

You can check this small jsfiddle on how text editing could be implemented using Fabric.js https://jsfiddle.net/gislef/Lvfpq57h/

would be awesome to solve actual text generation (for logos, signs on photos, etc) once and for all without the need of a separate photo editor!

[WebDev9000]

Nice find @iliasiovis, and thanks for the jsfiddle link.
Just sent in a PR. (#19 )

Check it out if you'd like.

[iliasiovis]

thanks a lot! works great (I just need to find the sweet spot in controlnet for some generations)

I dont know if it is possible in fabricJS to add element distortion (transform each corner individually to allow for perspective changes)? That could also be applied to the depth images too.

[jexom]

Yeah, the thing is I've been working on it already, but I might take some stuff from your pr. Not gonna merge for now but until I roll out the thing myself, pull this fork instead https://github.com/WebDev9000/sd-webui-depth-lib/tree/add-text

[WebDev9000]

thanks a lot! works great (I just need to find the sweet spot in controlnet for some generations)

Glad it works for you. I tried a few before submitting and had pretty good luck with things like T-Shirts using canny map instead of depth. Fun tip by the way: Try emoji in the text entry. (On Windows, Win + . ) Makes for a readily available shape library.

I dont know if it is possible in fabricJS to add element distortion (transform each corner individually to allow for perspective changes)? That could also be applied to the depth images too.

Nice idea, but seemingly it isn't readily possible on 2D canvases. See here for example. Several years old, but similar asks on Fabric's boards come back the same.

As the link says, you could do it with something like ThreeJS probably, but that's a bit out of scope of this project. The WebUI could use a whole suite of basic image post-processing and manipulation tools in the Extras tab IMO.

Yeah, the thing is I've been working on it already, but I might take some stuff from your pr. Not gonna merge for now

Oh well, no worries. I made it for myself and thought I'd share.