Use real paper scribbles

Question

Use real paper scribbles

woutersf opened this issue a year ago · comments

Hi,
Thanks for creating this. It really sparked the creativity for me and my kids. I could not resist thinking about adding the paper scribbels functionality to this.
(if this is not supposed to be a ticket, certainly close it and point me to the right direction.

I have created a fork: Paper sketch diffusion.
https://github.com/woutersf/paper-sketch-diffusion

The idea is to allow your input to also allow a picture of a paper sketch.

Therefor I added a button (not styled yet)

Which then promps the camera permission:

And you are allowed to take a picture of a sketch.

I also transform the sketch to black and white and threshold it (black or white contrast) so that it is "scribblable" .

I then want this image data to flow into the scribble (see red arrow above), This is where I'm stuck now.
I would like to know how to flow the image data I have and not use the canvas that was hand drawn.
You will see in my code that I have no clue about React.
woutersf@14a5f47

You can easily try it out since you don't even need the replicate key to get this working.
Any help is much appreciated.

Zeke Sikelianos · Answer 1 · Thu Mar 02 2023 00:40:45 GMT+0800 (China Standard Time)

Hey @woutersf that's pretty neat. I have also had a lot of fun with my kids on this.

Thanks for opening an issue and describing where you're stuck.

Haven't looked at the code yet, but I think at a high level this should work. Your input will create a bitmap image, and that image should then be uploaded using the upload-file module and used as an alternative input, instead of the "Canvas" output.

woutersf · Answer 2 · Fri Mar 03 2023 20:26:08 GMT+0800 (China Standard Time)

Hi Zeke,
Thanks for that Tip,
i got it working like that.

woutersf · Answer 3 · Fri Mar 03 2023 20:38:23 GMT+0800 (China Standard Time)

This is how it works now:

woutersf · Answer 4 · Fri Mar 03 2023 20:54:54 GMT+0800 (China Standard Time)

I am now wrestling with React to make a PR. 😅

Zeke Sikelianos · Answer 5 · Sat Mar 04 2023 01:27:54 GMT+0800 (China Standard Time)

Nice! Keep me posted. I can help out if needed.

woutersf · Answer 6 · Sat Mar 04 2023 01:56:31 GMT+0800 (China Standard Time)

@zeke I've fabricated something here:
#35
Any help is certainly appreciated.

Pavel Gorbunov · Answer 7 · Fri Aug 18 2023 13:10:51 GMT+0800 (China Standard Time)

so, how's it going with that lovely feature?
i'd prefer simple "upload sketch" button :) i launch it on my pc, but i don't have camera on it. So i tried to use it from my android phone. "Open camera" and "Take photo" doesn't work in chrome(cannot read properties of undefined(reading getUserMedia'')) and firefox(navigator.mediaDevices is undefined).