Image cropping/ selection component

Most AI image classification tools need to resize or crop input images. Having a tool like this in streamlit will be really helpful. Is anyone working on a component for this?

2 Likes

Hey @johnyquest, welcome to the community !

Thanks for the request ! I don’t think anyone is looking into this for now :slight_smile:. Would Cropper.js fit the need, or do you know of other image cropper Javascript libraries ?

Anyone interested in trying to build a Streamlit Component, I think this one is a perfect usecase which should be easy to integrate (at least if referencing the image from an url. Uploading image data from Python may add a small bump to the implementation) !

Fanilo

1 Like

Hey @andfanilo.!
I have started working on an image cropping component for streamlit.
If everything goes well then, I’ll make a PULL request soon.
Thanks

5 Likes

That’s great ! Looking forward to it :slight_smile: don’t hesitate to ping for feedback :wink:

4 Likes

Great. Thanks for doing this.

Haven’t looked at cropper.js will take a look.
But it will be great to have an integrated streamlit component

@andfanilo I’m on it and it’s about to complete.

5 Likes

@0xPrateek eagerly waiting for the release :slightly_smiling_face:

I needed a cropper desperately for another project I was working on, so I put one together. Let me know what you think:

1 Like

Looks good on the demo posted on GitHub page. Will try it out. Thanks for sharing. It will be great if there was an option for aspect ratio / bounding box dimensions. This is awesome! Thanks a lot. :slightly_smiling_face: :boom: :clap: :checkered_flag:

Looks great :slight_smile: @turner-anderson are you able to update the community tracker with your solution ?

Fanilo

@johnyquest A fixed aspect ratio shouldn’t be hard at all, I actually had to work harder to find a way to unfix the aspect ratio since that was what I was most interested in. I’ll probably also work towards allowing the user to pass a bounding-box-generating function into the cropper that could override the default 20%-80% box. I’ll report back when it’s done.

@andfanilo Great idea, consider it updated!

Awesome. Thanks. For my project, I was planning to use a square aspect ratio. It might be useful for other computer vision projects as most AI models resize images to image with a square aspect ratio. I am working with medical images and changing the aspect ratio might change the properties of object in question.

Tried running this repo on my computer.
Got the following error

StreamlitAPIException: No such component directory: ‘/media/quest/extradrive1/AI_Projects/access_point/streamlit-cropper/streamlit_cropper/frontend/build’

Traceback

File “/media/quest/extradrive1/AI_Projects/access_point/streamlit-cropper/app.py”, line 2, in
from streamlit_cropper import st_cropper
File “/media/quest/extradrive1/AI_Projects/access_point/streamlit-cropper/streamlit_cropper/ init .py”, line 16, in
_component_func = components.declare_component(“st_cropper”, path=build_dir)

I must have uploaded the wrong dist, let me fix that and get the aspect_ratio implemented. I’ll knock that out tonight.

@johnyquest I just pushed the update to include the build directory, as well as add a feature for aspect_ratios. I’m in the process of uploading a new GIF for the readme. Let me know if you still have the issue, sorry for the mixup!

2 Likes

It is working well!
For debugging purposes you might have been printing ‘image/jpeg’ in the terminal. That line hasn’t been commented out. So it is printing ‘image/jpeg’ in the terminal.