mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-31 12:20:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add CDN installation to JS docs (#8401)

Browse Source 
* add cdn copy

* add changeset

* tweak

* tweak

* add changeset

* Update guides/08_gradio-clients-and-lite/02_getting-started-with-the-js-client.md

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

* remove version from cdn link

* tweak

* tweak

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
Hannah 2024-05-29 19:11:29 +01:00 committed by GitHub
parent 89d6a176b3
commit d078621928
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/better-dingos-bet.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/client": patch
"gradio": patch
---
feat:Add CDN installation to JS docs

9
client/js/README.md
View File

@ -1,6 +1,7 @@
## JavaScript Client Library
A JavaScript (and TypeScript) Client to call Gradio APIs.
Interact with Gradio APIs using our JavaScript (and TypeScript) client.
## Installation
@ -10,6 +11,12 @@ The Gradio JavaScript Client is available on npm as `@gradio/client`. You can in
npm i @gradio/client
```
Or, you can include it directly in your HTML via the jsDelivr CDN:
```shell
<script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
```
## Usage
The JavaScript Gradio Client exposes the Client class, `Client`, along with various other utility functions. `Client` is used to initialise and establish a connection to, or duplicate, a Gradio app.

16
guides/08_gradio-clients-and-lite/02_getting-started-with-the-js-client.md
View File

@ -29,14 +29,26 @@ The Gradio Client works with any hosted Gradio app, whether it be an image gener
**Prequisites**: To use the Gradio client, you do _not_ need to know the `gradio` library in great detail. However, it is helpful to have general familiarity with Gradio's concepts of input and output components.
## Installation
## Installation via npm
The lightweight `@gradio/client` package can be installed from the npm registry with a package manager of your choice and support node version 18 and above:
Install the @gradio/client package to interact with Gradio APIs using Node.js version >=18.0.0 or in browser-based projects. Use npm or any compatible package manager:
```bash
npm i @gradio/client
```
This command adds @gradio/client to your project dependencies, allowing you to import it in your JavaScript or TypeScript files.
## Installation via CDN
For quick addition to your web project, you can use the jsDelivr CDN to load the latest version of @gradio/client directly into your HTML:
```bash
<script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
```
Be sure to add this to the `<head>` of your HTML. This will install the latest version but we advise hardcoding the version in production. You can find all available versions [here](https://www.jsdelivr.com/package/npm/@gradio/client). This approach is ideal for experimental or prototying purposes, though has some limitations.
## Connecting to a running Gradio App
Start by connecting instantiating a `client` instance and connecting it to a Gradio app that is running on Hugging Face Spaces or generally anywhere on the web.