Skip to content
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

Allow drag and replace image in gr.Image and Multimodal textbox #9031

Merged
merged 26 commits into from
Aug 19, 2024

Conversation

hannahblair
Copy link
Collaborator

@hannahblair hannahblair commented Aug 6, 2024

Description

Allows dragging an image over an Image and ImageEditor component even when an image is already in place.

Closes: #8535

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests

  1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh

  2. You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

@hannahblair hannahblair changed the title Allow drag and replace image gr.Image and gr.ImageEditor Allow drag and replace image in gr.Image and gr.ImageEditor Aug 6, 2024
@hannahblair hannahblair changed the title Allow drag and replace image in gr.Image and gr.ImageEditor Allow drag and replace image in gr.Image and gr.ImageEditor Aug 6, 2024
@gradio-pr-bot
Copy link
Collaborator

gradio-pr-bot commented Aug 6, 2024

🪼 branch checks and previews

Name Status URL
Spaces ready! Spaces preview
Website building...
Storybook ready! Storybook preview
🦄 Changes detecting...

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/ea00cb2d25b6adadd4753d09648d91bbc8a61df9/gradio-4.41.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@ea00cb2d25b6adadd4753d09648d91bbc8a61df9#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/ea00cb2d25b6adadd4753d09648d91bbc8a61df9/gradio-client-1.5.0.tgz

@gradio-pr-bot
Copy link
Collaborator

gradio-pr-bot commented Aug 7, 2024

🦄 change detected

This Pull Request includes changes to the following packages.

Package Version
@gradio/image patch
@gradio/multimodaltextbox patch
@gradio/upload patch
gradio patch
  • Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Allow drag and replace image in gr.Image and Multimodal textbox

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

  • Maintainers can change the version label to modify the version bump.
  • If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

@hannahblair hannahblair marked this pull request as ready for review August 14, 2024 13:36
@@ -14,7 +14,6 @@
export let upload: Client["upload"];
export let stream_handler: Client["stream"];

let upload_component: Upload;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed bc not used

flex-grow: 0;
}

.hidden :global(svg) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hides the webcam icon

@abidlabs abidlabs added the v: patch A change that requires a patch release label Aug 14, 2024
@hannahblair
Copy link
Collaborator Author

I have no idea why the story tests are showing a dataframe diff

@aliabid94
Copy link
Collaborator

Works great for gr.Image but image_editor demo didn't allow a second drop:
Recording 2024-08-14 at 13 15 06

@hannahblair hannahblair changed the title Allow drag and replace image in gr.Image and gr.ImageEditor Allow drag and replace image in gr.Image Aug 15, 2024
@hannahblair
Copy link
Collaborator Author

hannahblair commented Aug 15, 2024

Hmm, it was working at one point, but I realised that when it was working, you couldn't actually draw or erase because the upload container z-index was too high, but we need it at a certain z-index for us to recognise that we're actually dragging an image. I think the ImageEditor functionality might need to be done in separate PR else I'll sink too much time into it.

Copy link
Collaborator

@freddyaboulton freddyaboulton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great @hannahblair ! Makes sense to do ImageEditor in a different PR

hannahblair and others added 4 commits August 16, 2024 14:42
* allow uploading files via drag

* wrap tweak

* * fix input
* improve a11y
* fix thumbnail scrolling

* tweak
@hannahblair
Copy link
Collaborator Author

hannahblair commented Aug 16, 2024

merged #9125 here as that PR will fix the failing chatbot tests cc @dawoodkhan82

@hannahblair hannahblair changed the title Allow drag and replace image in gr.Image Allow drag and replace image in gr.Image and Multimodal textbox Aug 19, 2024
@hannahblair hannahblair merged commit 04b7d32 into main Aug 19, 2024
22 checks passed
@hannahblair hannahblair deleted the upload-drag branch August 19, 2024 14:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v: patch A change that requires a patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature request for gr.Image: drop to replace image even if one is already loaded
7 participants