### Install Gradio Client via npm

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Installs the Gradio JavaScript Client library from npm. This is the primary method for including the client in your project for use with JavaScript or TypeScript.

```bash
npm i @gradio/client
```

--------------------------------

### Include Gradio Client via jsDelivr CDN

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Includes the Gradio JavaScript Client directly in an HTML file using the jsDelivr CDN. This is a quick way to add the library without a formal installation process.

```html
<script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
```

--------------------------------

### Access Gradio Application Configuration

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Shows how to access the configuration object of the connected Gradio application. This `config` property may contain important metadata about the application's setup.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
console.log(app.config);
```

--------------------------------

### app.predict()

Source: https://www.npmjs.com/package/@gradio/client/index_activeTab=readme

Calls an API endpoint of a connected Gradio app to get a prediction result.

```APIDOC
## app.predict()

### Description
Allows you to call an API endpoint and get a prediction result from a connected Gradio app.

### Method
`app.predict(endpoint, payload)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

#### `endpoint` (string) - Required
The endpoint for an API request. Defaults to `"/predict"` for `gradio.Interface`. Custom endpoints have a specific name found on the "View API" page of a space.

#### `payload` (object) - Optional
The data to send with the API request.

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const result = await app.predict("/predict", { data: ["input_value"] });
```

### Response
#### Success Response (any)
A promise that resolves to the prediction result from the Gradio API.

#### Response Example
```javascript
// Example response for a successful prediction
// The structure depends on the Gradio app's output
const predictionResult = { ... }; 
```
```

--------------------------------

### Prediction API

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependents

The `predict` method allows you to call an API endpoint on a connected Gradio app and get a prediction result.

```APIDOC
## POST /predict

### Description
Allows you to call an API endpoint and get a prediction result from a connected Gradio app.

### Method
POST

### Endpoint
/predict

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **endpoint** (string) - Required - The endpoint for an API request. Defaults to `"/predict"` for `gradio.Interface`.
- **payload** (object) - Optional - The data payload for the prediction request.

### Request Example
```json
{
  "endpoint": "/predict",
  "payload": { 
    "data": [
      "input_value_1",
      "input_value_2"
    ]
  }
}
```

### Response
#### Success Response (200)
A promise that resolves to the prediction result.

#### Response Example
```json
{
  "data": [
    "output_value_1",
    "output_value_2"
  ]
}
```
```

--------------------------------

### Predict API

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=versions

The `predict` method allows you to call an API endpoint within a connected Gradio app and get a prediction result.

```APIDOC
## app.predict

### Description
Allows you to call an API endpoint and get a prediction result from a connected Gradio app.

### Method
`app.predict(endpoint, payload?)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
#### `endpoint` (string) - Required
This is the endpoint for an API request. The default endpoint for a `gradio.Interface` is `"/predict"`. Explicitly named endpoints have a custom name. The endpoint names can be found on the "View API" page of a space.

#### `payload` (object) - Optional
An object containing the data to be sent to the API endpoint for prediction.

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");

// Call the default /predict endpoint
const result = await app.predict("/predict");

// Call a custom endpoint with a payload
const customResult = await app.predict("/generate_image", { prompt: "A cat wearing a hat" });
```

### Response
A promise that resolves to the prediction result.

#### Success Response (200)
The result of the prediction, the structure of which depends on the specific Gradio API endpoint.

#### Response Example
```json
{
  "data": [
    "This is the prediction result."
  ]
}
```
```

--------------------------------

### Duplicate Gradio Space with Hardware Options (JavaScript)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Illustrates duplicating a Gradio space and specifying custom hardware using the `hardware` option within `Client.duplicate`. It lists various available hardware configurations, from basic CPUs to high-performance GPUs. Billing information may be required for non-basic tiers.

```javascript
import { Client } from "@gradio/client";

const app = await Client.duplicate("user/space-name", {
	token: "hf_...",
	private: true,
	hardware: "a10g-small"
});
```

--------------------------------

### Initialize Gradio Client Connection

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=versions

Connects to a Gradio app's API using the `Client.connect()` method. This establishes a connection to the specified Gradio space, returning an object ready for API calls. The `source` parameter is the URL or name of the Gradio app.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
```

--------------------------------

### Client.connect()

Source: https://www.npmjs.com/package/@gradio/client/index_activeTab=readme

Initializes and establishes a connection to a Gradio app's API.

```APIDOC
## Client.connect()

### Description
Connects to the API of a hosted Gradio space and returns an object that allows you to make calls to that API.

### Method
`Client.connect(source, options)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

#### `source` (string) - Required
The url or name of the Gradio app whose API you wish to connect to.

#### `options` (object) - Optional
An object with optional properties `token` and `status_callback`.

##### `token` (string) - Optional
A Hugging Face personal access token, required for private Gradio APIs. Should start with `"hf_"`.

##### `status_callback` (function) - Optional
A function that notifies of the status of a Gradio space if it is not running. This function is only effective for Hugging Face spaces.

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const result = await app.predict("/predict");
```

### Response
#### Success Response (object)
An object representing the connected Gradio app, with methods to interact with its API.

#### Response Example
```javascript
// Result of a successful connection
// (The actual object structure will depend on the Gradio app's API)
const app = { ... }; 
```
```

--------------------------------

### Connect to Gradio App and Predict (JavaScript)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Demonstrates the basic usage of the Gradio JavaScript Client. It shows how to connect to a Gradio app and make a prediction using the default '/predict' endpoint.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const result = await app.predict("/predict");
```

--------------------------------

### Handle Various File Inputs with `handle_file` (JavaScript)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Shows the versatile `handle_file` utility function for processing different file inputs (URLs, Buffers, Blobs, and local file paths) before sending them to a Gradio application. This function abstracts the complexity of preparing files for the client, returning a standardized reference.

```javascript
import { handle_file } from "@gradio/client";

const app = await Client.connect("user/space-name");
const result = await app.predict("/predict", {
	single: handle_file(file),
	flat: [handle_file(url), handle_file(buffer)],
	nested: {
		image: handle_file(url),
		layers: [handle_file(buffer)]
	},
	deeply_nested: {
		image: handle_file(url),
		layers: [{
			layer1: handle_file(buffer),
			layer2: handle_file(buffer)
		}]
	}
});
```

--------------------------------

### Handle Blob with `handle_file` (JavaScript)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Illustrates using `handle_file` with a `Blob` object. The `Blob` is prepared for upload, and the actual upload is initiated when `app.predict` or `app.submit` is called. The function returns a reference that the Gradio client can interpret.

```javascript
import { handle_file } from "@gradio/client";

// not uploaded yet
const blob_ref = handle_file(new Blob(["Hello, world!"]));

const app = await Client.connect("user/space-name");

// upload happens here
const result = await app.predict("/predict", {
	blob: blob_ref,
});
```

--------------------------------

### Handle URL with `handle_file` (JavaScript)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Shows how to use `handle_file` with a URL. The function converts the URL into a client-understandable reference, which is then used when making a prediction request. The actual fetching or upload occurs implicitly when the Gradio client processes the request.

```javascript
import { handle_file } from "@gradio/client";

const url_ref = handle_file("https://example.com/file.png");

const app = await Client.connect("user/space-name");
const result = await app.predict("/predict", {
	url: url_ref,
});
```

--------------------------------

### Connect and Predict with Gradio Client

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Demonstrates how to connect to a Gradio space using the Client library and make a prediction. The `predict` method takes an endpoint and a payload object, returning the prediction result. Ensure the 'predict' endpoint exists and the payload matches its expected input.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const result = await app.predict("/predict", {
	input: 1,
	word_1: "Hello",
	word_2: "friends"
});
```

--------------------------------

### Client Connection API

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=versions

The Client class is used to initialize and establish a connection to a Gradio app, or duplicate one. It allows interaction with the Gradio app's API.

```APIDOC
## Client.connect

### Description
Connects to the API of a hosted Gradio space and returns an object that allows you to make calls to that API.

### Method
`Client.connect(source, options?)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
#### `source` (string) - Required
This is the url or name of the Gradio app whose API you wish to connect to.

#### `options` (object) - Optional
An options object with the following properties:

##### `token` (string) - Optional
This should be a Hugging Face personal access token and is required if you wish to make calls to a private Gradio API. Must start with `"hf_"`.

##### `status_callback` (function) - Optional
This function will be called to notify you of the status of a space if it is not running. This is only effective for Hugging Face spaces.

### Request Example
```javascript
import { Client } from "@gradio/client";

// Connect to a public Gradio space
const app = await Client.connect("user/space-name");

// Connect to a private Gradio space with a token
const appPrivate = await Client.connect("user/private-space", { token: "hf_..." });

// Connect with a status callback
const appWithCallback = await Client.connect("user/space-name", {
	space_status: (space_status) => console.log(space_status)
});
```

### Response
An object that allows you to make calls to the Gradio API.

#### Success Response (200)
An instance of the `Client` class.

#### Response Example
```javascript
// Example of the returned object structure (simplified)
{
  "predict": async (endpoint, payload) => { /* ... */ },
  // ... other methods
}
```
```

--------------------------------

### Handle Various File Inputs with `handle_file`

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependencies

Illustrates the usage of the `handle_file` utility function from `@gradio/client` to process diverse file inputs for Gradio API predictions. This function simplifies handling local filepaths (Node.js only), URLs, Blobs, and Buffers by converting them into a format the Gradio client understands.

```javascript
import { handle_file } from "@gradio/client";

const app = await Client.connect("user/space-name");
const result = await app.predict("/predict", {
	single: handle_file(file),
	flat: [handle_file(url), handle_file(buffer)],
	nested: {
		image: handle_file(url),
		layers: [handle_file(buffer)]
	},
	deeply_nested: {
		image: handle_file(url),
		layers: [{
			layer1: handle_file(buffer),
			layer2: handle_file(buffer)
		}]
	}
});
```

```javascript
import { handle_file } from "@gradio/client";

// not uploaded yet
const file_ref = handle_file("path/to/file");

const app = await Client.connect("user/space-name");

// upload happens here
const result = await app.predict("/predict", {
	file: file_ref,
});
```

```javascript
import { handle_file } from "@gradio/client";

const url_ref = handle_file("https://example.com/file.png");

const app = await Client.connect("user/space-name");
const result = await app.predict("/predict", {
	url: url_ref,
});
```

```javascript
import { handle_file } from "@gradio/client";

// not uploaded yet
const blob_ref = handle_file(new Blob(["Hello, world!"]));

const app = await Client.connect("user/space-name");

// upload happens here
const result = await app.predict("/predict", {
	blob: blob_ref,
});
```

```javascript
import { handle_file } from "@gradio/client";
import { readFileSync } from "fs";

// not uploaded yet
const buffer_ref = handle_file(readFileSync("file.png"));

const app = await Client.connect("user/space-name");

// upload happens here
const result = await app.predict("/predict", {
	buffer: buffer_ref,
});
```

--------------------------------

### Client Connection API

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependents

The Client class is used to initialize and establish a connection to a Gradio app, or duplicate an existing one. It allows interaction with the Gradio app's API.

```APIDOC
## POST /connect

### Description
Connects to the API of a hosted Gradio space and returns an object that allows you to make calls to that API.

### Method
POST

### Endpoint
/connect

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **source** (string) - Required - The url or name of the gradio app whose API you wish to connect to.
- **options** (object) - Optional - An object with connection options.
  - **token** (string) - Optional - A Hugging Face personal access token, required for private APIs. Must start with `"hf_"`.
  - **status_callback** (function) - Optional - A function that notifies of the status of a space if it is not running.

### Request Example
```json
{
  "source": "user/space-name",
  "options": {
    "token": "hf_...",
    "status_callback": "(space_status) => console.log(space_status)"
  }
}
```

### Response
#### Success Response (200)
An object that allows you to make calls to the Gradio API.

#### Response Example
```json
{
  "message": "Successfully connected to Gradio app"
}
```
```

--------------------------------

### Handle Buffer with `handle_file` (Node.js JavaScript)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Demonstrates using `handle_file` with a Buffer object in a Node.js environment. Similar to filepaths and Blobs, the Buffer is converted into a reference, and the upload occurs when `app.predict` is invoked. This is useful for handling binary data read from files or generated programmatically.

```javascript
import { handle_file } from "@gradio/client";
import { readFileSync } from "fs";

// not uploaded yet
const buffer_ref = handle_file(readFileSync("file.png"));

const app = await Client.connect("user/space-name");

// upload happens here
const result = await app.predict("/predict", {
	buffer: buffer_ref,
});
```

--------------------------------

### View Gradio API Information

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Explains how to retrieve detailed information about the connected Gradio API, including all named and unnamed endpoints, their accepted arguments, and return values. The `view_api()` method requires no arguments and returns a JavaScript object containing the API schema.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const api_info = await app.view_api();

console.log(api_info);
```

--------------------------------

### Duplicate Gradio Space with Options

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependencies

Demonstrates how to duplicate an existing Gradio space using the `Client.duplicate` method. It shows how to configure the duplicated space with options like `token`, `private`, `timeout`, and `hardware`. The `private` option defaults to `true` for duplicated spaces.

```javascript
import { Client } from "@gradio/client";

const app = await Client.duplicate("user/space-name", {
	token: "hf_...",
	private: true
});
```

```javascript
import { Client } from "@gradio/client";

const app = await Client.duplicate("user/space-name", {
	token: "hf_...",
	private: true,
	timeout: 5
});
```

```javascript
import { Client } from "@gradio/client";

const app = await Client.duplicate("user/space-name", {
	token: "hf_...",
	private: true,
	hardware: "a10g-small"
});
```

--------------------------------

### Handle Gradio Client Events (Data and Status)

Source: https://www.npmjs.com/package/@gradio/client/index_activeTab=readme

Connects to a Gradio space and configures it to listen for both 'data' and 'status' events. It then iterates over the submission to process these events.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name", {
	events: ["data", "status"]
});

const submission = app
	.submit("/predict", { name: "Chewbacca" })

	for await (const msg of submission) {
		if (msg.type === "data") {
			console.log(msg.data);
		}

		if (msg.type === "status") {
			console.log(msg);
		}
	}
```

--------------------------------

### Access Configuration

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=code

The `config` property provides access to the configuration settings of the connected Gradio application, which may contain useful meta-information.

```APIDOC
## GET /config

### Description
Retrieves the configuration object for the Gradio application.

### Method
GET

### Endpoint
/config

### Parameters
(No parameters)

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
console.log(app.config);
```

### Response
#### Success Response (200)
- **config** (object) - The configuration settings of the Gradio application.

#### Response Example
```json
{
  "root": "/",
  "title": "My Gradio App",
  "..."
}
```
```

--------------------------------

### Handle Local Filepath with `handle_file` (Node.js JavaScript)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Demonstrates using `handle_file` with a local file path in a Node.js environment. The file is uploaded to the client server upon calling `app.predict`, returning a reference the client can use. This feature is specific to Node.js.

```javascript
import { handle_file } from "@gradio/client";

// not uploaded yet
const file_ref = handle_file("path/to/file");

const app = await Client.connect("user/space-name");

// upload happens here
const result = await app.predict("/predict", {
	file: file_ref,
});
```

--------------------------------

### Connect to Gradio App with Authentication Token (JavaScript)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Shows how to connect to a private Gradio API by providing a Hugging Face personal access token. This is necessary for accessing restricted Gradio spaces.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name", { token: "hf_..." });
```

--------------------------------

### Access Configuration

Source: https://www.npmjs.com/package/@gradio/client/index_activeTab=readme

The `config` property provides access to the configuration settings of the connected Gradio application, which may include useful meta-information.

```APIDOC
## GET /config

### Description
Retrieves the configuration object for the Gradio application.

### Method
GET

### Endpoint
/config

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
console.log(app.config);
```

### Response
#### Success Response (200)
- **config** (object) - The configuration object for the Gradio application.

#### Response Example
```json
{
  "config": {
    "example_setting": "example_value"
  }
}
```
```

--------------------------------

### Client Connection with Event Subscriptions

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=versions

This snippet illustrates how to connect to a Gradio space and specify which events to listen for. By default, only 'data' events are received. You can explicitly request 'data' and 'status' events by passing an 'events' array to the `Client.connect` method.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name", {
	events: ["data", "status"]
});
```

--------------------------------

### Handle Gradio Events (Data and Status)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Illustrates how to configure the Gradio client to receive both 'data' and 'status' events and how to iterate through the submission object to process these events. This allows for granular control over displaying prediction outputs and monitoring job progress.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name", {
	events: ["data", "status"]
});

const submission = app
	.submit("/predict", { name: "Chewbacca" })

for await (const msg of submission) {
	if (msg.type === "data") {
		console.log(msg.data);
	}

	if (msg.type === "status") {
		console.log(msg);
	}
}
```

--------------------------------

### Access Configuration

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependencies

The `config` property provides access to the configuration settings of the connected Gradio application, which may include useful meta-information about the application.

```APIDOC
## GET /config

### Description
Accesses the configuration object of the Gradio application.

### Method
GET

### Endpoint
/config

### Parameters
None

### Request Example
```javascript
const config = app.config;
console.log(config);
```

### Response
#### Success Response (200)
- **config** (object) - An object containing the Gradio application's configuration settings.

#### Response Example
```json
{
  "version": "3.x.x",
  "title": "My Gradio App"
}
```
```

--------------------------------

### Connect to Gradio App with Status Callback (JavaScript)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Illustrates connecting to a Gradio app while providing a status callback function. This function is invoked to notify about the status of the Gradio space, especially useful for non-Hugging Face hosted spaces or those in non-running states.

```javascript
import { Client, type SpaceStatus } from "@gradio/client";

const app = await Client.connect("user/space-name", {
	// The space_status parameter does not need to be manually annotated, this is just for illustration.
	space_status: (space_status: SpaceStatus) => console.log(space_status)
});
```

--------------------------------

### Iterating Submission Events for Data and Status

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=versions

This snippet demonstrates how to iterate over the results of an API submission using the `submit` method. It shows how to check the `type` of each message received, distinguishing between 'data' updates and 'status' updates, and logging their respective content.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const submission = app
	.submit("/predict", { name: "Chewbacca" })

for await (const msg of submission) {
	if (msg.type === "data") {
		console.log(msg.data);
	}

	if (msg.type === "status") {
		console.log(msg);
	}
}
```

--------------------------------

### Duplicate Gradio Space (JavaScript)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Demonstrates duplicating a Gradio space using the `Client.duplicate` method. It shows how to set optional parameters like `token`, `private`, and `timeout` for the duplicated space. The `private` option defaults to public if not specified.

```javascript
import { Client } from "@gradio/client";

const app = await Client.duplicate("user/space-name", {
	token: "hf_...",
	private: true
});
```

```javascript
import { Client } from "@gradio/client";

const app = await Client.duplicate("user/space-name", {
	token: "hf_...",
	private: true,
	timeout: 5
});
```

--------------------------------

### Duplicate Space

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=code

The `duplicate` function creates a copy of a specified Gradio space. If the space has already been duplicated, it connects to the existing duplicate. Authentication via a Hugging Face token is required.

```APIDOC
## POST /duplicate

### Description
Duplicates a Gradio space and returns a client instance connected to the new duplicate. Requires a Hugging Face token.

### Method
POST

### Endpoint
/duplicate

### Parameters
#### Path Parameters
- **source** (string) - Required - The identifier of the space to duplicate (e.g., "user/space-name").

#### Request Body
- **options** (object) - Optional - Additional options for duplication.
  - **token** (string) - Required - Your Hugging Face API token.
  - **private** (boolean) - Optional - Whether the duplicated space should be private (default is public).

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.duplicate("user/space-name", {
	token: "hf_...",
	private: true
});
```

### Response
#### Success Response (200)
- **client** (Client) - An instance of the Client connected to the duplicated space.

#### Response Example
(Returns a Client object, not a JSON response)
```

--------------------------------

### Duplicate Space

Source: https://www.npmjs.com/package/@gradio/client/index_activeTab=readme

The `duplicate` function attempts to create a copy of a specified Gradio space. If a duplicate already exists, it connects to the existing one. A Hugging Face token is required.

```APIDOC
## POST /duplicate

### Description
Duplicates a Gradio space and returns a client instance connected to the duplicated space.

### Method
POST

### Endpoint
/duplicate

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **source** (string) - Required - The identifier of the space to duplicate (e.g., "user/space-name").
- **options** (object) - Optional - Additional options for duplication.
  - **token** (string) - Required - A Hugging Face token for authentication.
  - **private** (boolean) - Optional - If true, the duplicated space will be private.

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.duplicate("user/space-name", {
	token: "hf_..."
});
```

### Response
#### Success Response (200)
- **client** (Client) - An instance of the `Client` connected to the duplicated space.

#### Response Example
(No specific response body described, success is indicated by returning a Client instance)
```

--------------------------------

### Duplicate Space

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependencies

The `duplicate` function creates a copy of a specified Gradio space. It returns a client instance connected to the newly duplicated space or an existing one if it has already been duplicated. A Hugging Face token is required.

```APIDOC
## POST /duplicate

### Description
Duplicates a Gradio space and returns a client connected to the duplicated instance.

### Method
POST

### Endpoint
/duplicate

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **source** (string) - Required - The identifier of the space to duplicate (e.g., "user/space-name").
- **options** (object) - Optional - Configuration options for duplication.
  - **token** (string) - Required - A Hugging Face token for authentication.
  - **private** (boolean) - Optional - Whether the duplicated space should be private.
```

--------------------------------

### View API Information

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=code

The `view_api` method retrieves detailed information about the connected Gradio application's API, including all named and unnamed endpoints, their accepted arguments, and return values.

```APIDOC
## GET /api/info

### Description
Retrieves metadata about the Gradio application's API, including endpoints and their specifications.

### Method
GET

### Endpoint
/api/info

### Parameters
(This method does not accept arguments.)

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const api_info = await app.view_api();

console.log(api_info);
```

### Response
#### Success Response (200)
- **api_info** (object) - An object detailing the API structure, endpoints, and their parameters/return types.

#### Response Example
```json
{
  "named_endpoints": { ... },
  "unnamed_endpoints": [ ... ]
}
```
```

--------------------------------

### View API Information

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependencies

The `view_api` method retrieves detailed information about the connected Gradio application's API, including all named and unnamed endpoints, their accepted arguments, and return values.

```APIDOC
## GET /api/info

### Description
Retrieves metadata about the Gradio application's API, detailing all available endpoints and their input/output schemas.

### Method
GET

### Endpoint
/api/info

### Parameters
None

### Request Example
```javascript
const api_info = await app.view_api();
console.log(api_info);
```

### Response
#### Success Response (200)
- **api_info** (object) - A JavaScript object containing information about all API endpoints, their parameters, and return types.

#### Response Example
```json
{
  "endpoints": [
    {
      "name": "predict",
      "inputs": [{"label": "Name", "type": "text"}],
      "outputs": [{"label": "Result", "type": "text"}]
    }
  ]
}
```
```

--------------------------------

### Iterate Submission Events for Data and Status

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependents

Demonstrates how to iterate over the results of an API submission using `submit`. It shows how to differentiate between 'data' and 'status' messages received from the Gradio space and log them accordingly. This enables real-time handling of prediction outputs and processing states.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const submission = app
	.submit("/predict", { name: "Chewbacca" })

	for await (const msg of submission) {
		if (msg.type === "data") {
			console.log(msg.data);
		}

		if (msg.type === "status") {
			console.log(msg);
		}
	}
```

--------------------------------

### Submit API Endpoint

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependencies

The `submit` method offers a more advanced way to call API endpoints, providing real-time status updates and supporting complex endpoint types. It returns an async iterator that yields 'data' and 'status' events.

```APIDOC
## POST /predict (submit)

### Description
Submits a request to an API endpoint and provides progress updates. Returns an async iterator for data and status events.

### Method
POST

### Endpoint
/predict

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **payload** (object) - Required - The data payload for the API request.
- **events** (array of strings) - Optional - Specifies the types of events to listen for (e.g., 'data', 'status'). Defaults to ['data'].

### Request Example
```json
{
  "name": "Chewbacca"
}
```

### Response
#### Success Response (200)
- **submission** (AsyncIterator) - An async iterator yielding 'data' and 'status' events.

#### Response Example
```javascript
// Example of iterating through submission events
for await (const msg of submission) {
  if (msg.type === "data") {
    console.log(msg.data);
  }
  if (msg.type === "status") {
    console.log(msg);
  }
}
```

### Status Payload Structure
```json
{
  "queue": boolean,
  "code": "string",
  "success": boolean,
  "stage": "pending" | "error" | "complete" | "generating",
  "size": number,
  "position": number,
  "eta": number,
  "message": "string",
  "progress_data": [
    {
      "progress": number | null,
      "index": number | null,
      "length": number | null,
      "unit": "string" | null,
      "desc": "string" | null
    }
  ],
  "time": "Date"
}
```
```

--------------------------------

### View API Information

Source: https://www.npmjs.com/package/@gradio/client/index_activeTab=readme

The `view_api` method retrieves detailed information about the connected Gradio application's API, including all named and unnamed endpoints and their accepted/returned values.

```APIDOC
## GET /api/info

### Description
Retrieves information about the Gradio application's API endpoints and their structures.

### Method
GET

### Endpoint
/api/info

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const api_info = await app.view_api();

console.log(api_info);
```

### Response
#### Success Response (200)
- **api_info** (object) - An object containing details about the API, including endpoints, parameters, and return types.

#### Response Example
```json
{
  "api_info": {
    "example_endpoint": {
      "name": "example_endpoint",
      "parameters": {},
      "returns": {}
    }
  }
}
```
```

--------------------------------

### Submit API Endpoint

Source: https://www.npmjs.com/package/@gradio/client/index_activeTab=readme

The `submit` method offers a more flexible way to call API endpoints, providing real-time status updates and supporting complex endpoint types. It returns an async iterator, not a promise.

```APIDOC
## POST /predict (with streaming updates)

### Description
Submits a prediction request to the specified API endpoint and provides real-time updates on its progress.

### Method
POST

### Endpoint
/predict

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **payload** (object) - Required - The data to be sent to the API endpoint. The structure of the payload depends on the specific API.

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const submission = app.submit("/predict", { name: "Chewbacca" });

for await (const msg of submission) {
	if (msg.type === "data") {
		console.log(msg.data);
	}

	if (msg.type === "status") {
		console.log(msg);
	}
}
```

### Response
#### Success Response (Stream)
- **data** (any) - Emitted when the API computes a value.
- **status** (object) - Emitted when the status of a request changes. See `Status` interface in documentation for shape.

#### Response Example (Data)
```json
{
  "type": "data",
  "data": "example_streaming_data"
}
```

#### Response Example (Status)
```json
{
  "type": "status",
  "queue": true,
  "stage": "pending",
  "size": 1,
  "position": 0,
  "eta": 10,
  "progress_data": []
}
```
```

--------------------------------

### Submit Endpoint

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=code

The `submit` method offers a more advanced way to call API endpoints, providing real-time status updates and supporting streaming of results. It returns an async iterator instead of a promise.

```APIDOC
## POST /predict (with submit)

### Description
Submits a prediction request to the specified endpoint and returns an async iterator for progress and data updates.

### Method
POST

### Endpoint
/predict

### Parameters
#### Request Body
- **payload** (object) - Required - The data payload for the prediction request.

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const submission = app.submit("/predict", { name: "Chewbacca" });

for await (const msg of submission) {
	if (msg.type === "data") {
		console.log(msg.data);
	}

	if (msg.type === "status") {
		console.log(msg);
	}
}
```

### Response
- **Async Iterator**: Yields `data` and `status` update events.

#### Status Event Payload Example
```json
{
  "queue": true,
  "code": null,
  "success": null,
  "stage": "pending",
  "size": null,
  "position": 1,
  "eta": null,
  "message": null,
  "progress_data": [],
  "time": "2023-10-27T10:00:00.000Z"
}
```
```

--------------------------------

### Submit Gradio Job with Progress Updates

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Shows how to submit a job to a Gradio endpoint using the `submit` method, which returns an async iterator for real-time updates. This method is non-blocking and provides `cancel` functionality. It's suitable for long-running tasks where progress monitoring is needed.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const submission = app.submit("/predict", { name: "Chewbacca" });
```

--------------------------------

### Duplicate Gradio Space

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Details how to duplicate an existing Gradio space using the `duplicate` method. This function requires a Hugging Face token and allows specifying whether the duplicated space should be public or private. It returns a client instance connected to the newly created or existing duplicated space.

```javascript
import { Client } from "@gradio/client";

const app = await Client.duplicate("user/space-name", {
	token: "hf_..."
});
```

--------------------------------

### Duplicate Gradio Space with Timeout Option

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependents

Shows how to duplicate a Gradio space and configure a timeout duration using the 'duplicate' method. The 'timeout' option specifies the time in minutes before the duplicated space goes to sleep. This is useful for managing resource usage.

```javascript
import { Client } from "@gradio/client";

const app = await Client.duplicate("user/space-name", {
	token: "hf_...",
	private: true,
	timeout: 5
});
```

--------------------------------

### Handle Gradio Space Status Updates

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=versions

Implements a status callback function to receive notifications about a Gradio space's status. This is useful for providing user feedback when spaces are not immediately available, such as when they are sleeping or building.

```javascript
import { Client, type SpaceStatus } from "@gradio/client";

const app = await Client.connect("user/space-name", {
	space_status: (space_status: SpaceStatus) => console.log(space_status)
});
```

--------------------------------

### Gradio Space Status Interfaces (TypeScript)

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Defines the TypeScript interfaces for `SpaceStatusNormal` and `SpaceStatusError`, which represent the possible states and details of a Gradio space. These interfaces are used to type the status callback function.

```typescript
interface SpaceStatusNormal {
	status: "sleeping" | "running" | "building" | "error" | "stopped";
	detail:
		| "SLEEPING"
		| "RUNNING"
		| "RUNNING_BUILDING"
		| "BUILDING"
		| "NOT_FOUND";
	load_status: "pending" | "error" | "complete" | "generating";
	message: string;
}

interface SpaceStatusError {
	status: "space_error";
	detail: "NO_APP_FILE" | "CONFIG_ERROR" | "BUILD_ERROR" | "RUNTIME_ERROR";
	load_status: "error";
	message: string;
	discussions_enabled: boolean;
}

type SpaceStatus = SpaceStatusNormal | SpaceStatusError;
```

--------------------------------

### Define Gradio Space Status Interface

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=code

Defines the TypeScript interfaces for `SpaceStatusNormal` and `SpaceStatusError`, which represent the possible states and details of a Gradio space. This helps in type-checking status updates received from the client.

```typescript
interface SpaceStatusNormal {
	status: "sleeping" | "running" | "building" | "error" | "stopped";
	detail:
		| "SLEEPING"
		| "RUNNING"
		| "RUNNING_BUILDING"
		| "BUILDING"
		| "NOT_FOUND";
	load_status: "pending" | "error" | "complete" | "generating";
	message: string;
}

interface SpaceStatusError {
	status: "space_error";
	detail: "NO_APP_FILE" | "CONFIG_ERROR" | "BUILD_ERROR" | "RUNTIME_ERROR";
	load_status: "error";
	message: string;
	discussions_enabled: boolean;

}

type SpaceStatus = SpaceStatusNormal | SpaceStatusError;
```

--------------------------------

### Predict Endpoint

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=code

This section details how to use the `predict` method to call an API endpoint with a payload. The `payload` is generally required and its structure is defined by the specific API endpoint.

```APIDOC
## POST /predict

### Description
Sends a prediction request to the specified endpoint with the given payload.

### Method
POST

### Endpoint
/predict

### Parameters
#### Request Body
- **payload** (object) - Required - The data payload for the prediction request. Refer to the "View API" page or `view_api()` method for specific payload structure.

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const result = await app.predict("/predict", {
	input: 1,
	word_1: "Hello",
	word_2: "friends"
});
```

### Response
#### Success Response (200)
- **data** (any) - The prediction result from the API.

#### Response Example
```json
{
  "output": "..."
}
```
```

--------------------------------

### Predict API Endpoint

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependencies

The `predict` method is used to call an API endpoint with a given payload. The payload typically includes input arguments required by the API. The data format for the payload is detailed on the 'View API' page or accessible via the `view_api()` method.

```APIDOC
## POST /predict

### Description
Invokes a specific API endpoint with the provided payload.

### Method
POST

### Endpoint
/predict

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **payload** (object) - Required - The data payload for the API request, containing input values for the endpoint.

### Request Example
```json
{
  "input": 1,
  "word_1": "Hello",
  "word_2": "friends"
}
```

### Response
#### Success Response (200)
- **result** (any) - The result returned by the API endpoint.

#### Response Example
```json
{
  "output": "Some result"
}
```
```

--------------------------------

### Duplicate Gradio Space with Private Option

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependents

Demonstrates how to duplicate a Gradio space and set it as private using the 'duplicate' method. The 'private' option within the duplicate's options object controls the visibility of the duplicated space. By default, duplicated spaces are public.

```javascript
import { Client } from "@gradio/client";

const app = await Client.duplicate("user/space-name", {
	token: "hf_...",
	private: true
});
```

--------------------------------

### Predict API Endpoint

Source: https://www.npmjs.com/package/@gradio/client/index_activeTab=readme

The `predict` method is used to call a specific API endpoint with a given payload. It returns a promise that resolves with the result of the prediction.

```APIDOC
## POST /predict

### Description
Submits a prediction request to the specified API endpoint.

### Method
POST

### Endpoint
/predict

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **payload** (object) - Required - The data to be sent to the API endpoint. The structure of the payload depends on the specific API.

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const result = await app.predict("/predict", {
	input: 1,
	word_1: "Hello",
	word_2: "friends"
});
```

### Response
#### Success Response (200)
- **data** (any) - The result of the prediction.

#### Response Example
```json
{
  "data": "example_response_data"
}
```
```

--------------------------------

### Cancel Gradio Job Submission

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=readme

Demonstrates how to cancel a previously submitted Gradio job using the `cancel` method on the submission object. This is useful for stopping potentially infinite or long-running processes initiated via `app.submit()`.

```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const submission = app
	.submit("/predict", { name: "Chewbacca" })


// later

submission.cancel();
```

--------------------------------

### Cancel Submission

Source: https://www.npmjs.com/package/@gradio/client/package/%40gradio/client_activetab=dependencies

The `cancel` method is used to stop ongoing or potentially indefinite Gradio function executions, preventing further updates from being issued.

```APIDOC
## POST /predict (cancel)

### Description
Cancels an ongoing or potentially indefinite API submission.

### Method
POST

### Endpoint
/predict

### Parameters
None (operates on an existing submission object)

### Request Example
```javascript
// Assuming 'submission' is an object returned by app.submit()
submission.cancel();
```

### Response
#### Success Response (200)
- **void** - Indicates that the cancellation request was processed.

#### Response Example
None (operation is on the submission object)
```

--------------------------------

### Cancel Submission

Source: https://www.npmjs.com/package/@gradio/client/index_activeTab=readme

The `cancel` method can be called on a submission object to stop an ongoing or potentially indefinite API operation.

```APIDOC
## PUT /predict/{submission_id}/cancel

### Description
Cancels an ongoing submission.

### Method
PUT

### Endpoint
/predict/{submission_id}/cancel

### Parameters
#### Path Parameters
- **submission_id** (string) - Required - The ID of the submission to cancel.

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
import { Client } from "@gradio/client";

const app = await Client.connect("user/space-name");
const submission = app.submit("/predict", { name: "Chewbacca" });

// later

submission.cancel();
```

### Response
#### Success Response (200)
Indicates that the cancellation request was successful.

#### Response Example
(No specific response body described, success is indicated by absence of errors)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.