Remove the styles from the Image/Video primitive components and Fix the container styles #6726

whitphx · 2023-12-09T23:55:02Z

This PR contains these:

Remove the styles from the reusable media primitive components

Remove the styles from js/image/shared/Image.svelte and js/video/shared/Video.svelte, which are reusable components and shouldn't have their own styles.
Instead, apply the styles to them by adding the <container-selector> :global(img or video) style to the user components.

Fix the gap between the borders and the inner contents

See Remove the styles from the Image/Video primitive components and Fix the container styles #6726 (comment)

Fix style inconsistency

Also fixed two inconsistent styles. Plz see the following comments (Remove the styles from the Image/Video primitive components and Fix the container styles #6726 (comment) and Remove the styles from the Image/Video primitive components and Fix the container styles #6726 (comment)). Plz let me know what you think.

…he container styles

gradio-pr-bot · 2023-12-09T23:55:16Z

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
	Visual tests	all good!	Build review
🦄	Changes	detected!	Details

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/9ec17f1ea21c6d10bb242d97a7704255eba94948/gradio-4.8.0-py3-none-any.whl

Install Gradio Python Client from this PR

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

gradio-pr-bot · 2023-12-09T23:55:47Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`@gradio/image`	`minor`
`@gradio/video`	`minor`
`gradio`	`minor`

Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Remove the styles from the Image/Video primitive components and Fix the container styles

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.

whitphx · 2023-12-10T00:02:31Z

js/video/Example.svelte

+	.container :global(video) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: cover;


I found the current object-fit style of the video examples are different from the image ones whose object-fit is cover:

gradio/js/image/Example.svelte

Line 37 in 9a5811d

object-fit: cover;

So fixed it for consistency.

As a result, the video example changes as below. (This example is demo/kitchen_sink/run.py)

WDYT?

This PR main

I don't see an issue with this

whitphx · 2023-12-10T00:08:23Z

This PR also fixes the corner styles.
The latest ver. has gaps between the border and the inner image/video.

This PR	v4.8.0
Video: Image:	Video: Image:

whitphx · 2023-12-10T00:15:05Z

Also, the round corners have been removed from image/video previews.
These have not been consistent in the previous versions both v3 and v4 as well, so this PR makes them consistent removing all the rounded corners from these components, which is same as the image input component in v3.

If rounded corners are preferable, plz let me know.
It can be done by adding border-radius to the parent components.

This PR	v4.8.0	v3.50.2
Video: Image:	Video: Image:	Video: Image:

Image sample: demo/image-simple/run.py
Video sample: demo/video_component/run.py

aliabd · 2023-12-11T08:35:38Z

@whitphx how come on the image_mod demo (demo/image_mod/run.py) the image examples have this weird corner styling that doesn't match the screenshots you shared?

whitphx · 2023-12-11T11:08:43Z

Sorry I missed it, and fixed it now.

As a part of the fix, for the border and border-radius to work correctly, I remove the border style on the <Example> components of type=gallery which are duplicated with the outer component:

gradio/js/dataset/Index.svelte

Line 258 in 9a5811d

border: 1px solid var(--border-color-primary);

As a result, the border became thiner. WDYT? (I think it looks nice)

Video <Example> too:

hannahblair · 2023-12-11T16:10:37Z

This PR also fixes the corner styles.
The latest ver. has gaps between the border and the inner image/video.

The borders look so much better!

pngwn · 2023-12-11T20:18:25Z

Yeh looks great to me too! Thanks @whitphx!

whitphx · 2023-12-11T22:15:14Z

Thanks!

…he container styles (#6726) * Remove the styles from the Image/Video primitive components and Fix the container styles * add changeset * Fix image example size styles * Remove border from image/Example with type=gallery --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

* fix * add changeset * tests * Update package.json * Hotfix: version on changelog (#6559) * clog version * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Fix version in other changelog (#6561) * Fix version in other changelog why do we have 2? * remove changeset * Ensure Chatbot messages are properly aligned when `rtl` is true (#6574) * fix text alignment when rtl is true * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Improve like/dislike functionality (#6572) * amend like/dislike logic * add like/dislike to chatbot demo and add e2e test * add changeset * e2e test changes * revert chatbot_component changes * tweak * generate notebooks * tweak --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Fix typo envrion -> environ (#6585) * Feat: make UploadButton accept icon (#6584) * feat: make UploadButton accept icon * add changeset * add proxy url prop * add stories --------- Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Make FileExplorer work on python 3.8 and 3.9. Also make it update on changes to root, glob, or glob_dir (#6550) * Add code * add changeset * add changeset * Add test * fix --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Fix uploaded file wasn't moved to custom temp dir at different disks (#6565) * Fix uploaded file wasn't moved to custom temp dir at different disks * add changeset * Update routes.py --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com> * Fix the docstring decoration (#5885) * Fix the docstring of the `Slider` class * add changeset * Update the JSON file generator to output a new field .styled_description to render the inline code syntax in the description field * add changeset * Update style_types() to deal with backticks and single asterisks * Update the inline style converter to use regex for the curly bracket syntax as well * Revert `style_types()` not to touch the `description` field and update the frontend code to apply styling to such formatted texts on Svelte's side * Apply the inline styler to other `.description` field appearances * Apply the inline styler to `.preprocessing`, `.postprocessing`, `.examples-format`, `.events`, and `*.parameters.doc` * Stop applying HTML styles to the JSON data, instaed apply HTML escaping * Escape HTML tokens in .parameters[]["doc"] too * fixes --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> * chore(deps): update all non-major dependencies (#6593) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency jsdom to v23 (#6582) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Update zh-CN.json (#6512) * Update zh-CN.json * add changeset * format --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Fix: Gradio Client work with private Spaces (#6602) * client with private space * add changeset * lint * add test --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Update file_explorer.py - Fixing error if nothing selected in file_count=single mode (return None rather) (#6607) * Update file_explorer.py Fixing error if nothing selected in file_count=single mode (return None rather) * add changeset * added unit tests --------- Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Remove 2 slider demos from docs (#6624) * remove 2 slider demos * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Fix encoding issue #6364 of reload mode (#6622) * fix: configure default encoding as utf-8 * apply doc change for the fix * apply cn doc change for the fix * add changeset * Lint --------- Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Quick Image + Text Component Fixes (#6635) * fixes * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Improve video trimming and error handling (#6566) * amend trimming logic and return original file when error occurs * add interactive story test * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Add `show_recording_waveform` to Audio (#6551) * add show_recording_waveform * add changeset * add animation * Refactor audio component and waveform options * formatting * add margin before audio controls * amend default values * expose gr.WaveformOptions * Tweak waveform options types and handle none * add waveform_options to reverse_audio * tweak bool typing * notebook --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * chore(deps): update dependency chromatic to v10 (#6619) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update chromaui/action action to v10 (#6618) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Add concurrency_limit to ChatInterface, add IDE support for concurrency_limit (#6653) * concurrency limit chat interface * add changeset * Update gradio/chat_interface.py Co-authored-by: Abubakar Abid <abubakar@huggingface.co> --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * format (#6658) * Removes smooth scrolling from website (#6650) * smooth scrolling with css * add changeset * formatting * remove smooth scrolling * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * chore: update versions (#6575) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Fix reload mode warning about not being able to find the app (#6660) * Fix warning * add changeset * Use * --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Update HF token used in CI tests (#6671) * fix tests * format * fixes * add changeset * fixes * fix * fix * update * update * test client * format * hf token 2 * add changeset * add env * add envs * tests * env * fixes * test external * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * use gr.Error for audio length errors (#6672) * use gr.Error for audio length errors * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Issue 5245: consolidate usage of requests and httpx (#6598) * issue 5245 commit 1 * formatted * add changeset * fixes * fixes * make changes in client too * remove requests from client * add changeset * add changeset * Fixes to test_utils.py in client * fixes in client utils.py and test_utils.py --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Remove Discourse Forum Link from Website (#6679) * remove forum link * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Tweak to our bug issue template (#6677) * template * add timeouts * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Set gradio api server from env (#6666) * Use GRADIO_API_SERVER env * Format the code * add changeset * Use env GRADIO_SHARE_SERVER_ADDRESS as default share_server_address --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Render each app in the PR's spaces preview in a separate page (#6657) * Use template response * minor fix * Return type hint * add changeset * Remove return types * response_class=None * Use relative path * SPA * remove pydantic pin * Revert * delete changeset * Overflow hidden on body * text gray * Collapsible sidebar * max-height * Use search params * document.location.search --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * perf guide (#6673) * switch from black to ruff formatter (#6543) * migrate from black to ruff * fix script and dependencies * applying ruff * add changeset * add changeset * address ruff feedback * replace linter * fixed typing * fix typing --------- Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Cause `gr.ClearButton` to reset the value of `gr.State` (#6680) * state * note * add changeset * buttons * clear button * lint * if * clear' * reset state * fix test --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Fix dropdown blur bug when values are provided as tuples (#6694) * fix dropdown blur bug * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * type fix * test * Remove the styles from the Image/Video primitive components and Fix the container styles (#6726) * Remove the styles from the Image/Video primitive components and Fix the container styles * add changeset * Fix image example size styles * Remove border from image/Example with type=gallery --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * test fix * add changeset * test fix * add changeset * test * test fix * test fix audio video * format * fix obj file issue --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: Hannah <hannahblair@users.noreply.github.com> Co-authored-by: Simon Duerr <dev@simonduerr.eu> Co-authored-by: Xiang Liao <liao1120x@gmail.com> Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com> Co-authored-by: Dody Suria Wijaya <dody@cryptolab.net> Co-authored-by: Yuichiro Tachibana (Tsuchiya) <t.yic.yt@gmail.com> Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: yanlin <59528590+cibimo@users.noreply.github.com> Co-authored-by: v-chabaux <149407738+v-chabaux@users.noreply.github.com> Co-authored-by: Lihao Lei <leilei199708@gmail.com> Co-authored-by: pngwn <hello@pngwn.io> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: cswamy <101974014+cswamy@users.noreply.github.com> Co-authored-by: aisensiy <aisensiy@163.com> Co-authored-by: D V <77478658+DarhkVoyd@users.noreply.github.com>

Remove the styles from the Image/Video primitive components and Fix t…

b12c7f1

…he container styles

add changeset

244be78

whitphx commented Dec 10, 2023

View reviewed changes

whitphx requested review from abidlabs, aliabd and pngwn December 10, 2023 00:24

whitphx marked this pull request as ready for review December 10, 2023 00:25

whitphx added 2 commits December 11, 2023 11:50

Fix image example size styles

b288571

Remove border from image/Example with type=gallery

c980b0a

hannahblair approved these changes Dec 11, 2023

View reviewed changes

whitphx merged commit 21cfb0a into main Dec 11, 2023
22 checks passed

whitphx deleted the image-video-style branch December 11, 2023 22:15

pngwn mentioned this pull request Dec 11, 2023

chore: update versions #6670

Merged

hannahblair mentioned this pull request Dec 13, 2023

How to use video trim function in Blocks #6751

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove the styles from the Image/Video primitive components and Fix the container styles #6726

Remove the styles from the Image/Video primitive components and Fix the container styles #6726

whitphx commented Dec 9, 2023 •

edited

Loading

gradio-pr-bot commented Dec 9, 2023 •

edited

Loading

gradio-pr-bot commented Dec 9, 2023 •

edited

Loading

Something isn't right?

whitphx Dec 10, 2023 •

edited

Loading

hannahblair Dec 11, 2023

whitphx commented Dec 10, 2023 •

edited

Loading

whitphx commented Dec 10, 2023 •

edited

Loading

aliabd commented Dec 11, 2023

whitphx commented Dec 11, 2023

hannahblair commented Dec 11, 2023

pngwn commented Dec 11, 2023

whitphx commented Dec 11, 2023

Remove the styles from the Image/Video primitive components and Fix the container styles #6726

Remove the styles from the Image/Video primitive components and Fix the container styles #6726

Conversation

whitphx commented Dec 9, 2023 • edited Loading

Remove the styles from the reusable media primitive components

Fix the gap between the borders and the inner contents

Fix style inconsistency

gradio-pr-bot commented Dec 9, 2023 • edited Loading

🪼 branch checks and previews

gradio-pr-bot commented Dec 9, 2023 • edited Loading

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

whitphx Dec 10, 2023 • edited Loading

Choose a reason for hiding this comment

hannahblair Dec 11, 2023

Choose a reason for hiding this comment

whitphx commented Dec 10, 2023 • edited Loading

whitphx commented Dec 10, 2023 • edited Loading

aliabd commented Dec 11, 2023

whitphx commented Dec 11, 2023

hannahblair commented Dec 11, 2023

pngwn commented Dec 11, 2023

whitphx commented Dec 11, 2023

whitphx commented Dec 9, 2023 •

edited

Loading

gradio-pr-bot commented Dec 9, 2023 •

edited

Loading

gradio-pr-bot commented Dec 9, 2023 •

edited

Loading

whitphx Dec 10, 2023 •

edited

Loading

whitphx commented Dec 10, 2023 •

edited

Loading

whitphx commented Dec 10, 2023 •

edited

Loading