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
Improve source selection UX #6766
Conversation
Use SourceSelect in Image component
tweak source selection ux
Set sources[0] to active_source in Image
Does this solve #6751 by any chance? |
🪼 branch checks and previews
Install Gradio from this PR pip install https://gradio-builds.s3.amazonaws.com/46dc324d0ebccf8fce8328e09a3f0591f9a5e70f/gradio-4.10.0-py3-none-any.whl Install Gradio Python Client from this PR pip install "gradio-client @ git+https://github.com/gradio-app/gradio@46dc324d0ebccf8fce8328e09a3f0591f9a5e70f#subdirectory=client/python" |
|
Thanks @hannahblair! I'll mark it as a regression then |
🦄 change detectedThis Pull Request includes changes to the following packages.
With the following changelog entry.
Maintainers or the PR author can modify the PR title to modify this entry.
|
…io into improve-source-selection
@abidlabs scrap my comment above, it does fix it |
Great! Perhaps @dawoodkhan82 or @aliabid94 could review the PR |
change T<sources> -> T<source_types>
…io into improve-source-selection
…io into improve-source-selection
Thanks for those changes, will take a look! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me. Thanks @hannahblair!
…io into improve-source-selection
…io into improve-source-selection
* Add new source option styling for pasting from clipboard Use SourceSelect in Image component * prevent device selection cut off tweak source selection ux * Check for dupe sources in source selection Set sources[0] to active_source in Image * tweaks * tweak * add image interaction test * more tests * improve light/dark mode color contrast * add changeset * remove unused prop * add no device found placeholder change T<sources> -> T<source_types> * style tweak * allow pasting on click + add e2e test * fix e2e tests * formatting * add timeout to e2e test * tweak * tweak test * change `getByLabel` to `getByText` * value tweak * logic tweak * test * formatting --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Description
This PR
select
andoption
elements so a little a11y win)gr.Image
to use the source selection component used in Audio and Video for alignment (extra benefit is seeing the selected source icon styling)active_source
logic slightly: 1) it can be any of the sources, not justwebcam
ornull
. 2)active_tool
renamed toactive_source
for a tiny bit of consistency cc @pngwnactive_source
is clipboardTest Demo
gr.Image
gr.Image
gr.Video
gr.Video
(can now be small in mobile)Closes: #6710
Closes: #6751
🎯 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
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
You may need to run the linters:
bash scripts/format_backend.sh
andbash scripts/format_frontend.sh