Add `placeholder` param to Image and ImageEditor to replace upload image text #8930

hannahblair · 2024-07-29T15:45:05Z

Description

Adds the option to add a placeholder parameter to the image components, to allow replacing the upload text on the upload area.

Closes: #3511

🎯 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 and bash scripts/format_frontend.sh

gradio-pr-bot · 2024-07-29T15:45:40Z

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/4cbd45192a6f8d70f953de3fd355f1ec278bbbb8/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@4cbd45192a6f8d70f953de3fd355f1ec278bbbb8#subdirectory=client/python"

Install Gradio JS Client from this PR

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

gradio-pr-bot · 2024-07-29T15:45:53Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`@gradio/atoms`	`minor`
`@gradio/image`	`minor`
`@gradio/imageeditor`	`minor`
`@gradio/simpleimage`	`minor`
`gradio`	`minor`

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

With the following changelog entry.

Add placeholder param to Image and ImageEditor to replace upload image text

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.

…mage

freddyaboulton · 2024-08-05T16:57:03Z

@hannahblair the functionality looks good but two comments:

I think the text is a bit hard to read against the gray background

Should the title be within the block so that it gets covered by the status tracker like for the other form components (Number, Info)

hannahblair · 2024-08-06T13:28:00Z

Yeah you're right. I'll make some changes!

hannahblair · 2024-08-13T11:21:12Z

I think I've found a nice solution. Let me know any thoughts here!

hannahblair · 2024-08-13T12:15:16Z

there's a slight px difference in the chromatic tests so i'll fix that

aliabid94 · 2024-08-13T18:50:23Z

I like the second design but now it covers up too much of the image I feel.

…o info-image

gradio/components/image_editor.py

js/imageeditor/shared/utils/parse_placeholder.ts

abidlabs · 2024-08-19T18:15:28Z

Thanks @hannahblair! I tested this out, and I'm seeing:

as mentioned above, arbitrary HTML/JS can be injected because we don't sanitize the HTML prior to rendering.
Support for headings isn't working for me, not sure why. Am I testing it wrong?

js/imageeditor/shared/utils/parse_placeholder.ts

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

…mage

hannahblair · 2024-08-20T10:38:22Z

js/imageeditor/shared/InteractiveImageEditor.svelte

@@ -292,7 +319,7 @@
 align-items: center;
 color: var(--block-label-text-color);
 line-height: var(--line-md);
- font-size: var(--text-lg);
+ font-size: var(--text-md);


tweaked to be consistent with gr.Image

hannahblair · 2024-08-20T10:40:30Z

js/imageeditor/shared/utils/parse_placeholder.ts

+ const _paragraph = remaining_text || false;
+
+ return [_heading, _paragraph];
+}


@pngwn tweaked this to accommodate headings on new lines - also a general note this only extracts the first heading, which I think is fine

pngwn

Small comment but looks good and works great! Thanks for taking care of this @hannahblair!

js/atoms/src/UploadText.svelte

abidlabs · 2024-08-20T16:52:50Z

Nice @hannahblair. I noticed a couple of things with the heading:

(1) If the placeholder is only a heading, it will repeat twice, like this:

(2) The difference between the heading font size and the regular text in gr.Image is not that noticeable. For ImageEditor, the differences are more noticeable:

Nit: although even for gr.ImageEditor, they both look rather small. I would have expected the size of the regular placeholder text to the around the current size for the heading, and the heading to be slightly larger. (This is just personal preference so feel free to ignore)

js/atoms/src/utils/parse_placeholder.ts

pngwn · 2024-08-20T17:10:41Z

Left a comment about the above issue.

hannahblair · 2024-08-20T20:13:09Z

@abidlabs fixed the dupe heading text. wdyt of this heading text size? I've changed them from lg to xl:

hannahblair · 2024-08-20T20:51:35Z

Confused about why I'm seeing this diff (note the outline) when this is how it looks in main anyway

abidlabs · 2024-08-20T20:55:56Z

@abidlabs fixed the dupe heading text. wdyt of this heading text size? I've changed them from lg to xl:

Looks good to me! Let me do another round of testing

abidlabs · 2024-08-20T21:07:14Z

I'm seeing headings are not rendered in gr.Image -- they are rendered in gr.ImageEditor:

Did you push all of the changes?

abidlabs

LGTM @hannahblair, thanks for accommodating all of the feedback!

hannahblair · 2024-08-20T23:22:05Z

LGTM @hannahblair, thanks for accommodating all of the feedback!

@abidlabs Thank you for the patience with the rereviews 😅

add info to image

6b88d32

add changeset

de97030

hannahblair and others added 5 commits August 2, 2024 16:37

Merge branch 'main' into info-image

b025b77

add to image editor

3ef8013

add changeset

fc06bf0

format

02753c2

Merge branch 'info-image' of github.com:gradio-app/gradio into info-i…

759955b

…mage

hannahblair marked this pull request as ready for review August 5, 2024 14:34

hannahblair added 2 commits August 5, 2024 15:34

Merge branch 'main' into info-image

913ee94

Merge branch 'main' into info-image

1769ac5

hannahblair marked this pull request as draft August 6, 2024 13:28

hannahblair added 2 commits August 13, 2024 13:11

add info to label

41b32f8

Merge branch 'main' into info-image

458fae6

hannahblair marked this pull request as ready for review August 13, 2024 11:21

remove blocktitle changes

77f0253

test

305f583

hannahblair and others added 7 commits August 13, 2024 20:51

fix typecheck

934d027

revert info changes and add placeholder

23f7d50

tweak

6310f08

add changeset

81e50d4

amend story

6cbbfa9

Merge branch 'info-image' of https://github.com/gradio-app/gradio int…

e9d04a6

…o info-image

image editor placeholder

17593ae

abidlabs reviewed Aug 19, 2024

View reviewed changes

gradio/components/image_editor.py Outdated Show resolved Hide resolved

abidlabs reviewed Aug 19, 2024

View reviewed changes

js/imageeditor/shared/utils/parse_placeholder.ts Outdated Show resolved Hide resolved

pngwn reviewed Aug 19, 2024

View reviewed changes

js/imageeditor/shared/utils/parse_placeholder.ts Outdated Show resolved Hide resolved

js/imageeditor/shared/utils/parse_placeholder.ts Outdated Show resolved Hide resolved

hannahblair and others added 7 commits August 20, 2024 12:32

manually inject html, remove @html use

b825f25

Update gradio/components/image.py

39d97b7

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

Update gradio/components/image_editor.py

4653b3b

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

Merge branch 'main' into info-image

8f35cb4

amend story

0adaf15

Merge branch 'info-image' of github.com:gradio-app/gradio into info-i…

4fe403e

…mage

tweak py copy

6c846ba

hannahblair commented Aug 20, 2024

View reviewed changes

fix tests

f583b05

pngwn approved these changes Aug 20, 2024

View reviewed changes

js/atoms/src/UploadText.svelte Outdated Show resolved Hide resolved

pngwn reviewed Aug 20, 2024

View reviewed changes

js/atoms/src/utils/parse_placeholder.ts Outdated Show resolved Hide resolved

hannahblair added 2 commits August 20, 2024 22:05

fix duplicate heading logic

1b2242a

make h2 text bigger

39ca07f

add !important

4cbd451

abidlabs approved these changes Aug 20, 2024

View reviewed changes

hannahblair merged commit 41d5ab9 into main Aug 20, 2024
20 of 21 checks passed

hannahblair deleted the info-image branch August 20, 2024 23:22

gradio-pr-bot mentioned this pull request Aug 20, 2024

chore: update versions #9072

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `placeholder` param to Image and ImageEditor to replace upload image text #8930

Add `placeholder` param to Image and ImageEditor to replace upload image text #8930

hannahblair commented Jul 29, 2024 •

edited

Loading

gradio-pr-bot commented Jul 29, 2024 •

edited

Loading

gradio-pr-bot commented Jul 29, 2024 •

edited

Loading

Something isn't right?

freddyaboulton commented Aug 5, 2024 •

edited

Loading

hannahblair commented Aug 6, 2024

hannahblair commented Aug 13, 2024

hannahblair commented Aug 13, 2024

aliabid94 commented Aug 13, 2024

abidlabs commented Aug 19, 2024

hannahblair Aug 20, 2024

hannahblair Aug 20, 2024 •

edited

Loading

pngwn left a comment

abidlabs commented Aug 20, 2024

pngwn commented Aug 20, 2024

hannahblair commented Aug 20, 2024 •

edited

Loading

hannahblair commented Aug 20, 2024

abidlabs commented Aug 20, 2024

abidlabs commented Aug 20, 2024

abidlabs left a comment

hannahblair commented Aug 20, 2024

Add placeholder param to Image and ImageEditor to replace upload image text #8930

Add placeholder param to Image and ImageEditor to replace upload image text #8930

Conversation

hannahblair commented Jul 29, 2024 • edited Loading

Description

🎯 PRs Should Target Issues

Tests

gradio-pr-bot commented Jul 29, 2024 • edited Loading

🪼 branch checks and previews

gradio-pr-bot commented Jul 29, 2024 • edited Loading

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

freddyaboulton commented Aug 5, 2024 • edited Loading

hannahblair commented Aug 6, 2024

hannahblair commented Aug 13, 2024

hannahblair commented Aug 13, 2024

aliabid94 commented Aug 13, 2024

abidlabs commented Aug 19, 2024

hannahblair Aug 20, 2024

Choose a reason for hiding this comment

hannahblair Aug 20, 2024 • edited Loading

Choose a reason for hiding this comment

pngwn left a comment

Choose a reason for hiding this comment

abidlabs commented Aug 20, 2024

pngwn commented Aug 20, 2024

hannahblair commented Aug 20, 2024 • edited Loading

hannahblair commented Aug 20, 2024

abidlabs commented Aug 20, 2024

abidlabs commented Aug 20, 2024

abidlabs left a comment

Choose a reason for hiding this comment

hannahblair commented Aug 20, 2024

Add `placeholder` param to Image and ImageEditor to replace upload image text #8930

Add `placeholder` param to Image and ImageEditor to replace upload image text #8930

hannahblair commented Jul 29, 2024 •

edited

Loading

gradio-pr-bot commented Jul 29, 2024 •

edited

Loading

gradio-pr-bot commented Jul 29, 2024 •

edited

Loading

freddyaboulton commented Aug 5, 2024 •

edited

Loading

hannahblair Aug 20, 2024 •

edited

Loading

hannahblair commented Aug 20, 2024 •

edited

Loading