PDF component custom component guide #6344

freddyaboulton · 2023-11-08T21:42:54Z

Description

Closes #2031

We should have a series of step-by-step guides for creating custom components.
Rendering a PDF in js is actually tricky. So we should have easier guides too and order them by difficulty.

🎯 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 · 2023-11-08T21:43:11Z

🪼 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/7d3ece8e4e9af57911fa6d3d32bb1e737c07e446/gradio-4.2.0-py3-none-any.whl

Install Gradio Python Client from this PR

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

gradio-pr-bot · 2023-11-08T21:43:54Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`website`	`minor`

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

With the following changelog entry.

PDF component custom component guide

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.

guides/05_custom-components/07_pdf-component-example.md

abidlabs · 2023-11-10T01:12:10Z

guides/05_custom-components/07_pdf-component-example.md

+Make sure you have gradio 4.0 installed.
+As of the time of publication, the latest release is 4.1.1.


Gets outdated, I don't think we need to mention the specific version

Suggested change

Make sure you have gradio 4.0 installed.

As of the time of publication, the latest release is 4.1.1.

Make sure you have gradio 4.0 or higher installed (run `pip install --upgrade gradio`).

Its likely we're going to make improvements to the CLI experience or some internal APIs so I want to mention the version so that someone can follow this guide exactly.

Got it. We can upgrade to 4.2.0

guides/05_custom-components/07_pdf-component-example.md

abidlabs · 2023-11-10T01:15:49Z

guides/05_custom-components/07_pdf-component-example.md

+ENV TRANSFORMERS_CACHE=/tmp/cache/
+```
+
+## Conclusion


Perhaps we can add a quick section on how to use this component in a Gradio app.

Yea good idea!

Nit: you could use gr.Interface with examples to showcase the Example version of the component

abidlabs · 2023-11-10T01:16:54Z

js/_website/src/routes/[[version]]/guides/+page.svelte

Are these changes intentional? I don't see the new Guide here btw: https://gradio-18ln1n3gs-hugging-face.vercel.app/guides

cc @aliabd

@aliabd Changed this because otherwise new guides don't load. I see the new guide in the preview now

Hmm for some reason I still don't see it

And shouldn't they be pinned at the top as they are here? Or did you remove intentionally

@aliabd removed the pin at the top intentionally

@abidlabs are you checking on main? https://gradio-18ln1n3gs-hugging-face.vercel.app/main/guides

Ah whoops you’re right, LGTM. Let’s do a release today to get this out

abidlabs · 2023-11-10T01:17:57Z

Very cool stuff @freddyaboulton! Just left a few comments above

I think we can also close this issue: #2031 and provide an example of how to use this custom component there.

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

* focus and blur events * format * add changeset * fixes * fixes * format --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

* Fix upload * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

abidlabs

LGTM @freddyaboulton -- the only part that's not working for me is the website preview. Perhaps @aliabd could help us figure that out

pngwn

Love this! Left a few nits but otherwise looks great! Thanks @freddyaboulton!

pngwn · 2023-11-13T08:58:28Z

guides/05_custom-components/07_pdf-component-example.md

+We're going to use the [pdfjs](https://mozilla.github.io/pdf.js/) javascript library to display the pdfs in the frontend. 
+Let's start off by adding it to our frontend project's dependencies, as well as adding a couple of other projects we'll need.
+
+In the `dependencies` key, remove `svelte-json-view` and add the following dependencies: `@gradio/client`, `@gradio/upload`, `@gradio/icons`, `@gradio/button`, and `pdfjs-dist`.


We should tell them to npm install or pnpm install here. Adding dependencies manually is error prone.

It's fine to remove them manually but you can also npm uninstall package

guides/05_custom-components/07_pdf-component-example.md

pngwn · 2023-11-13T09:10:29Z

guides/05_custom-components/07_pdf-component-example.md

+This is the most advanced javascript part.
+It took me a while to figure it out!
+Do not worry if you have trouble, the important thing is to not be discouraged 💪
+Ask for help in the gradio [discord](https://discord.gg/hugging-face-879548962464493619) if you need and ask for help.


Should we create a channel on discord just for svelte/ js/ front end questions?

Cc @yvrjsharma @abidlabs

guides/05_custom-components/07_pdf-component-example.md

freddyaboulton · 2023-11-13T19:52:52Z

Thank you so much everyone!!

WIP guide

27b49e6

freddyaboulton and others added 6 commits November 8, 2023 17:33

Add remaining

ff03057

build command

a8873eb

remove pin from guides

6f2217a

add changeset

8d18be3

Tweaks

935510e

Merge branch 'main' into pdf-component-case-study

5433872

freddyaboulton requested review from aliabd, pngwn, abidlabs, aliabid94, dawoodkhan82, hannahblair and yvrjsharma November 9, 2023 21:31

freddyaboulton changed the title ~~WIP: PDF component custom component guide~~ PDF component custom component guide Nov 9, 2023

freddyaboulton marked this pull request as ready for review November 9, 2023 21:32

gradio-pr-bot and others added 2 commits November 9, 2023 21:32

add changeset

65d896a

format

6dc1b11

abidlabs reviewed Nov 10, 2023

View reviewed changes

guides/05_custom-components/07_pdf-component-example.md Show resolved Hide resolved

abidlabs reviewed Nov 10, 2023

View reviewed changes

guides/05_custom-components/07_pdf-component-example.md Outdated Show resolved Hide resolved

abidlabs reviewed Nov 10, 2023

View reviewed changes

guides/05_custom-components/07_pdf-component-example.md Outdated Show resolved Hide resolved

abidlabs reviewed Nov 10, 2023

View reviewed changes

freddyaboulton and others added 3 commits November 10, 2023 10:06

Update guides/05_custom-components/07_pdf-component-example.md

9a9ecc1

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

Redesign file upload (#6356)

d6068a4

Textbox and Code Component Blur/Focus Fixes (#6323)

db3dae2

* focus and blur events * format * add changeset * fixes * fixes * format --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

freddyaboulton and others added 4 commits November 10, 2023 11:20

Fix image upload (#6363)

c197609

* Fix upload * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

Add demo to the beginning

ab1a119

Add example and note about the name

97d4409

Merge branch 'main' into pdf-component-case-study

e4657af

abidlabs approved these changes Nov 13, 2023

View reviewed changes

pngwn approved these changes Nov 13, 2023

View reviewed changes

Incorporate feedback

6effb86

freddyaboulton merged commit 7471970 into main Nov 13, 2023
13 checks passed

freddyaboulton deleted the pdf-component-case-study branch November 13, 2023 19:52

pngwn mentioned this pull request Nov 13, 2023

chore: update versions #6381

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PDF component custom component guide #6344

PDF component custom component guide #6344

freddyaboulton commented Nov 8, 2023 •

edited

gradio-pr-bot commented Nov 8, 2023 •

edited

gradio-pr-bot commented Nov 8, 2023 •

edited

Something isn't right?

abidlabs Nov 10, 2023

freddyaboulton Nov 10, 2023

abidlabs Nov 13, 2023

abidlabs Nov 10, 2023

freddyaboulton Nov 10, 2023

freddyaboulton Nov 10, 2023

abidlabs Nov 13, 2023

abidlabs Nov 10, 2023

freddyaboulton Nov 10, 2023

abidlabs Nov 13, 2023 •

edited

freddyaboulton Nov 13, 2023

aliabd Nov 13, 2023

abidlabs Nov 13, 2023

abidlabs commented Nov 10, 2023

abidlabs left a comment

pngwn left a comment

pngwn Nov 13, 2023

pngwn Nov 13, 2023

freddyaboulton commented Nov 13, 2023

		Make sure you have gradio 4.0 installed.
		As of the time of publication, the latest release is 4.1.1.

	Make sure you have gradio 4.0 installed.
	As of the time of publication, the latest release is 4.1.1.
	Make sure you have gradio 4.0 or higher installed (run `pip install --upgrade gradio`).

PDF component custom component guide #6344

PDF component custom component guide #6344

Conversation

freddyaboulton commented Nov 8, 2023 • edited

Description

🎯 PRs Should Target Issues

Tests

gradio-pr-bot commented Nov 8, 2023 • edited

🪼 branch checks and previews

gradio-pr-bot commented Nov 8, 2023 • edited

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abidlabs Nov 13, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abidlabs commented Nov 10, 2023

abidlabs left a comment

Choose a reason for hiding this comment

pngwn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

freddyaboulton commented Nov 13, 2023

freddyaboulton commented Nov 8, 2023 •

edited

gradio-pr-bot commented Nov 8, 2023 •

edited

gradio-pr-bot commented Nov 8, 2023 •

edited

abidlabs Nov 13, 2023 •

edited