Close: JS Client guide/Vercel templates #3800 by providing documentaion and deployable vercel template

[W-Samik]

Description

This PR adds the requested documention as well as a deployable vercel template that integrate gradio client by JS along with a vercel_template_guide.md to provide documentation of the template.

The changes due to this PR in order are as follows:-

• added folder 'gradio_client' on path 'client/js/gradio_client'
• added folder 'template' on path 'client/js/gradio_client/template' (following convention from path 'client/python/gradio_client/template')
• added 'vercel_template_guide.md' markdown file to provide detailed procedure and documentation of the template along with used gradio official sources and links
• added 'js_template.py' source code of the placeholder gradio app that was used as a online hosted median on hugging face to call from gradio client in the vercel template used.
• added 'vercel_template.zip' a zip containg the source code of the vercel_template for the users to use and download if needed (the zip was created to maintain github repo integrity as it give git error when the source code is pushed directly)

points to take into consideration:-

• the whole deployable site is made using react with js.
• The source code of the 'vercel_template.zip' is also available on 'https://github.com/W-Samik/background_remover' for review if needed.
• the documentation has the links to my github repository for vercel_template that is soley added for the convinence of user's to fork vercel_template instead of downloading the zip file 'vercel_template.zip'.
• both the gradio app and the vercel_template source code github repository are 'public'
• the gradio app is hosted at link or https://huggingface.co/spaces/w-samik/background_remover
• the vercel_template is hosted at link or https://background-remover-kappa-nine.vercel.app

delpoyable vercel template:-

Timeline.1.mov

Closes: #3800

AI Disclosure

We encourage the use of AI tooling in creating PRs, but the any non-trivial use of AI needs be disclosed. E.g. if you used Claude to write a first draft, you should mention that. Trivial tab-completion doesn't need to be disclosed. You should self-review all PRs, especially if they were generated with AI.

• [✅] I used AI to make the front react with js along with the integrate gradio client to get inference in vercel_template.
• [✅] I did not use AI 'vercel_template_guide.md' documentaion, 'js_template.py'.

[gradio-pr-bot]

🪼 branch checks and previews

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

---

Install Gradio from this PR

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

Install Gradio Python Client from this PR

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

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/b9de3b280fa94abbaa98293c80f0198797516270/gradio-client-1.19.1.tgz

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/client	minor
gradio	minor

---

• Close: JS Client guide/Vercel templates JS Client guide/Vercel templates #3800 by providing documentaion and deployable vercel template

---

‼️ Changeset not approved. Ensure the version bump is appropriate for all packages before approving.

• Maintainers can approve the changeset by checking this checkbox.

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.

[freddyaboulton]

Hi @W-Samik ! Thank you for this nice contribution. I don't think we should add this template to the client/js repo. Instead, upload your code to a HuggingFace space or github repository. Then write a guide in the gradio-clients-and-lite section that explains this code. We can call the guide "Using the js client in vercel" or something like that.

Thank you!

[W-Samik]

Thank you for your review and feedback! @freddyaboulton Should I open a new issue for this contribution, or should I make the suggested changes and pr them through this existing issue?

[freddyaboulton]

Hi @W-Samik ! Please update this PR

[abidlabs]

Any update on this @W-Samik?

[W-Samik]

@abidlabs working on it will get done by the weekend for review.

[W-Samik]

@abidlabs @freddyaboulton the <guide.md> is shifted to the designated location guides/08_gradio_clients_and_lite section and all the assets and other resources are made avialiable at a single github repo as suggested, the changes have been made and is ready for review.