Close: JS Client guide/Vercel templates #3800 by providing documentaion and deployable vercel template #12067
Conversation
🪼 branch checks and previews
Install Gradio from this PR pip install https://gradio-pypi-previews.s3.amazonaws.com/b9de3b280fa94abbaa98293c80f0198797516270/gradio-5.49.1-py3-none-any.whlInstall 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 |
🦄 no changes detectedThis Pull Request does not include changes to any packages.__No changes detected. __
|
|
Hi @W-Samik ! Thank you for this nice contribution. I don't think we should add this template to the Thank you! |
|
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? |
|
Hi @W-Samik ! Please update this PR |
|
Any update on this @W-Samik? |
|
@abidlabs working on it will get done by the weekend for review. |
|
@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. |
freddyaboulton
left a comment
freddyaboulton
left a comment
There was a problem hiding this comment.
Hi @W-Samik ! Thanks for addressing the previous feedback. The content is good but there are a lot of typos and the grammar could be improved. I've left some suggestions, but I would recommend reworking the whole draft.
|
|
||
| Example: a background remover powered by ai.<br> (orginal -> background removed) | ||
|
|
||
| the code below is refers the gradio app we build for infrence at |
There was a problem hiding this comment.
Suggestion:
The following code refers to the Gradio app built for inference:
| the code below is refers the gradio app we build for infrence at | ||
| [app_template](https://github.com/W-Samik/Gradio-JS-Client-Vercel_Template-/blob/main/js_template.py) | ||
|
|
||
| check out resources to get a better grasp of how gradio works. [Gradio JS Client on NPM](https://www.npmjs.com/package/@gradio/client) , [Gradio Docs](https://gradio.app/docs/) |
There was a problem hiding this comment.
Suggestion:
Refer to these resources for a better understanding of how Gradio works
|
|
||
| # **3. Hosting on Hugging Face** | ||
|
|
||
| Step 1: got to [hugging face spaces](https://huggingface.co/spaces/) (a platform host gradio app for inference free of cost) |
There was a problem hiding this comment.
Suggestion
Go to [Hugging Face Spaces]
| demo.launch() | ||
| ``` | ||
|
|
||
| # **3. Hosting on Hugging Face** |
There was a problem hiding this comment.
I don't think we need to cover these steps. They are covered elsewhere. I would just link to the hugging face docs on spaces.
|
|
||
| **RESULT**: On pushing the files your app will be deployed on the hugging face which you can use to make inference for your website | ||
|
|
||
| # 4. Making Inference Script |
There was a problem hiding this comment.
This should be an h3 (### Making Inference Script)
|
|
||
| for demo purposes we will make a plain infrence script using gradio client for better understanding | ||
|
|
||
| <h2>Installation JS Gradio Client</h2> |
There was a problem hiding this comment.
We don't need an <h2> here. Please just use prose, Install the JS client with the following lines:
|
|
||
| **RESULT**: On pushing the files your app will be deployed on the hugging face which you can use to make inference for your website | ||
|
|
||
| # 4. Making Inference Script |
There was a problem hiding this comment.
Rename this section Using The Space Via the Client
|
|
||
| # 5. Integrating Gradio Client in React website | ||
|
|
||
| make a github repo for the react website project or clone [template](https://github.com/W-Samik/background_remover) or download the [vercel_template.zip](https://github.com/W-Samik/Gradio-JS-Client-Vercel_Template-/blob/main/vercel_template.zip) from gradio github repository. |
There was a problem hiding this comment.
Please capitalize all sentences
| @@ -0,0 +1,231 @@ | |||
|
|
|||
| <div style="text-align: center;"> | |||
|
|
||
| <i>we have achived a website that is easily integrated with the power of gradio js client to produce full functional production websites. </i> | ||
|
|
||
| <div style="text-align: center; margin-top: 50px;"> |
There was a problem hiding this comment.
Use a bulleted list here instead.
5 participants
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:-
points to take into consideration:-
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.