Hugging Face's logo

Spaces:
xray918
/
my_gradio
Runtime error

App Files Community
my_gradio / client /js /CHANGELOG.md
xray918's picture
xray918
Upload folder using huggingface_hub
0ad74ed verified
preview code
|
raw
history blame contribute delete
44.1 kB

A newer version of the Gradio SDK is available: 5.6.0

Upgrade

@gradio/client

1.6.0

Features

Fixes

1.6.0-beta.4

Features

  • #9483 8dc7c12 - Send Streaming data over Websocket if possible. Also support base64 output format for images. Thanks @freddyaboulton!

1.6.0-beta.3

Features

1.6.0-beta.2

Features

  • #9323 06babda - Disable liking user message in chatbot by default but make it configurable. Thanks @freddyaboulton!
  • #9339 4c8c6f2 - Ssr part 2. Thanks @pngwn!

Fixes

  • #9299 aa35b07 - Trigger state change event on iterators. Thanks @freddyaboulton!

1.6.0-beta.1

Features

1.6.0-beta.0

Features

  • #9149 3d7a9b8 - Open audio/image input stream only when queue is ready. Thanks @freddyaboulton!
  • #8941 97a7bf6 - Streaming inputs for 5.0. Thanks @freddyaboulton!

1.5.2

Fixes

  • #9163 2b6cbf2 - fix exports and generate types. Thanks @pngwn!

1.5.1

Features

  • #9118 e1c404d - setup npm-previews of all packages. Thanks @pngwn!

1.5.0

Features

Fixes

  • #8847 4d8a473 - fix: wrong named param check for js client. Thanks @freddyaboulton!

1.4.0

Features

  • #8816 9ee6839 - Change optionality of the data param in submit + predict. Thanks @hannahblair!

Fixes

  • #8820 5050b36 - fix: wrong named param check for js client. Thanks @JacobLinCool!

1.3.0

Fixes

  • #8699 012da05 - Ensure JS client status_callback functionality works and improve status messages. Thanks @hannahblair!
  • #8505 2943d6d - Add Timer component. Thanks @aliabid94!
  • #8715 a6b3c6c - Ensure @gradio/client's submit iterator releases as expected. Thanks @pngwn!
  • #8716 e834d30 - ensure @gradio/client always returns the correct data. Thanks @pngwn!
  • #8714 1b5b5b0 - Bind fetch and stream in JS client. Thanks @hannahblair!
  • #8720 936c713 - Documents auth in the guides, in the view API page, and also types the Blocks.config object. Thanks @abidlabs!

1.2.1

Features

  • #8649 4b6c8b1 - ensure File objects are handled in JS client handle_file. Thanks @hannahblair!

1.2.0

Features

  • #8489 c2a0d05 - Control Display of Error, Info, Warning. Thanks @freddyaboulton!
  • #8571 a77877f - First time loading performance optimization. Thanks @baojianting!
  • #8600 7289c4b - Add credentials: include and Cookie header to prevent 401 error. Thanks @yinkiu602!
  • #8522 bdaa678 - add handle_file docs. Thanks @pngwn!

Fixes

  • #8521 900cf25 - Ensure frontend functions work when they don't return a value. Thanks @pngwn!
  • #8548 7fc0f51 - Fix reload mode by implementing close on the client. Thanks @freddyaboulton!

1.1.1

Features

  • #8499 c5f6e77 - Cache break themes on change. Thanks @aliabid94!

1.1.0

Features

  • #8483 e2271e2 - documentation for @gradio/client. Thanks @pngwn!
  • #8485 f8ebace - Ensure all status are reported internally when calling predict. Thanks @pngwn!

1.0.0

Highlights

Clients 1.0 Launch! (#8468 7cc0a0c)

We're excited to unveil the first major release of the Gradio clients. We've made it even easier to turn any Gradio application into a production endpoint thanks to the clients' ergonomic, transparent, and portable design.

Ergonomic API 💆

Stream From a Gradio app in 5 lines

Use the submit method to get a job you can iterate over:

from gradio_client import Client

client = Client("gradio/llm_stream")

for result in client.submit("What's the best UI framework in Python?"):
    print(result)

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

const client = await Client.connect("gradio/llm_stream")
const job = client.submit("/predict", {"text": "What's the best UI framework in Python?"})

for await (const msg of job) console.log(msg.data)

Use the same keyword arguments as the app

from gradio_client import Client

client = Client("http://127.0.0.1:7860/")
result = client.predict(
        message="Hello!!",
        system_prompt="You are helpful AI.",
        tokens=10,
        api_name="/chat"
)
print(result)

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

const client = await Client.connect("http://127.0.0.1:7860/");
const result = await client.predict("/chat", { 		
        message: "Hello!!", 		
        system_prompt: "Hello!!", 		
        tokens: 10, 
});

console.log(result.data);

Better Error Messages

If something goes wrong in the upstream app, the client will raise the same exception as the app provided that show_error=True in the original app's launch() function, or it's a gr.Error exception.

Transparent Design 🪟

Anything you can do in the UI, you can do with the client:

  • 🔒 Authentication
  • 🛑 Job Cancelling
  • ℹ️ Access Queue Position and API
  • 📕 View the API information

Here's an example showing how to display the queue position of a pending job:

from gradio_client import Client

client = Client("gradio/diffusion_model")

job = client.submit("A cute cat")
while not job.done():
    status = job.status()
    print(f"Current in position {status.rank} out of {status.queue_size}")

Portable Design ⛺️

The client can run from pretty much any python and javascript environment (node, deno, the browser, Service Workers).

Here's an example using the client from a Flask server using gevent:

from gevent import monkey
monkey.patch_all()

from gradio_client import Client
from flask import Flask, send_file
import time

app = Flask(__name__)

imageclient = Client("gradio/diffusion_model")

@app.route("/gen")
def gen():
      result = imageclient.predict(
                "A cute cat",
                api_name="/predict"
              )
      return send_file(result)

if __name__ == "__main__":
      app.run(host="0.0.0.0", port=5000)

1.0 Migration Guide and Breaking Changes

Python

  • The serialize argument of the Client class was removed. Has no effect.
  • The upload_files argument of the Client was removed.
  • All filepaths must be wrapped in the handle_file method. Example:
from gradio_client import Client, handle_file

client = Client("gradio/image_captioner")
client.predict(handle_file("cute_cat.jpg"))
  • The output_dir argument was removed. It is not specified in the download_files argument.

Javascript The client has been redesigned entirely. It was refactored from a function into a class. An instance can now be constructed by awaiting the connect method.

const app = await Client.connect("gradio/whisper")

The app variable has the same methods as the python class (submit, predict, view_api, duplicate).

Additional Changes

  • #8243 - Set orig_name in python client file uploads.
  • #8264 - Make exceptions in the Client more specific.
  • #8247 - Fix api recorder.
  • #8276 - Fix bug where client could not connect to apps that had self signed certificates.
  • #8245 - Cancel server progress from the python client.
  • #8200 - Support custom components in gr.load
  • #8182 - Convert sse calls in client from async to sync.
  • #7732 - Adds support for kwargs and default arguments in the python client, and improves how parameter information is displayed in the "view API" page.
  • #7888 - Cache view_api info in server and python client.
  • #7575 - Files should now be supplied as file(...) in the Client, and some fixes to gr.load() as well.
  • #8401 - Add CDN installation to JS docs.
  • #8299 - Allow JS Client to work with authenticated spaces 🍪.
  • #8408 - Connect heartbeat if state created in render. Also fix config cleanup bug #8407.
  • #8258 - Improve URL handling in JS Client.
  • #8322 - ensure the client correctly handles all binary data.
  • #8296 - always create a jwt when connecting to a space if a hf_token is present.
  • #8285 - use the correct query param to pass the jwt to the heartbeat event.
  • #8272 - ensure client works for private spaces.
  • #8197 - Add support for passing keyword args to data in JS client.
  • #8252 - Client node fix.
  • #8209 - Rename eventSource_Factory and fetch_implementation.
  • #8109 - Implement JS Client tests.
  • #8211 - remove redundant event source logic.
  • #8179 - rework upload to be a class method + pass client into each component.
  • #8181 - Ensure connectivity to private HF spaces with SSE protocol.
  • #8169 - Only connect to heartbeat if needed.
  • #8118 - Add eventsource polyfill for Node.js and browser environments.
  • #7646 - Refactor JS Client.
  • #7974 - Fix heartbeat in the js client to be Lite compatible.
  • #7926 - Fixes streaming event race condition.

Thanks @freddyaboulton!

Features

  • #8370 48eeea4 - Refactor Cancelling Logic To Use /cancel. Thanks @freddyaboulton!

Fixes

  • #8477 d5a9604 - Fix js client bundle. Thanks @pngwn!
  • #8451 9d2d605 - Change client submit API to be an AsyncIterable and support more platforms. Thanks @pngwn!
  • #8462 6447dfa - Improve file handling in JS Client. Thanks @hannahblair!
  • #8439 63d36fb - Handle gradio apps using state in the JS Client. Thanks @hannahblair!

0.20.1

Features

0.20.0

Features

  • #8401 d078621 - Add CDN installation to JS docs. Thanks @hannahblair!
  • #8243 55f664f - Add event listener support to render blocks. Thanks @aliabid94!
  • #8398 945ac83 - Improve rendering. Thanks @aliabid94!
  • #8299 ab65360 - Allow JS Client to work with authenticated spaces 🍪. Thanks @hannahblair!

Fixes

  • #8408 e86dd01 - Connect heartbeat if state created in render. Also fix config cleanup bug #8407. Thanks @freddyaboulton!
  • #8258 1f8e5c4 - Improve URL handling in JS Client. Thanks @hannahblair!

0.19.4

Fixes

  • #8322 47012a0 - ensure the client correctly handles all binary data. Thanks @Saghen!

0.19.3

Features

  • #8229 7c81897 - chore(deps): update dependency esbuild to ^0.21.0. Thanks @renovate!

Fixes

  • #8296 929d216 - always create a jwt when connecting to a space if a hf_token is present. Thanks @pngwn!

0.19.2

Fixes

  • #8285 7d9d8ea - use the correct query param to pass the jwt to the heartbeat event. Thanks @pngwn!

0.19.1

Fixes

  • #8272 fbf4edd - ensure client works for private spaces. Thanks @pngwn!

0.19.0

Features

  • #8110 5436031 - Render decorator 2. Thanks @aliabid94!
  • #8197 e09b4e8 - Add support for passing keyword args to data in JS client. Thanks @hannahblair!

Fixes

0.18.0

Features

  • #8121 f5b710c - chore(deps): update dependency eslint to v9. Thanks @renovate!
  • #8209 b9afe93 - Rename eventSource_Factory and fetch_implementation. Thanks @hannahblair!
  • #8109 bed2f82 - Implement JS Client tests. Thanks @hannahblair!
  • #8211 91b5cd6 - remove redundant event source logic. Thanks @hannahblair!

Fixes

  • #8179 6a218b4 - rework upload to be a class method + pass client into each component. Thanks @pngwn!
  • #8181 cf52ca6 - Ensure connectivity to private HF spaces with SSE protocol. Thanks @hannahblair!
  • #8169 3a6f1a5 - Only connect to heartbeat if needed. Thanks @freddyaboulton!
  • #8118 7aca673 - Add eventsource polyfill for Node.js and browser environments. Thanks @hannahblair!

0.17.0

Highlights

Setting File Upload Limits (#7909 2afca65)

We have added a max_file_size size parameter to launch() that limits to size of files uploaded to the server. This limit applies to each individual file. This parameter can be specified as a string or an integer (corresponding to the size in bytes).

The following code snippet sets a max file size of 5 megabytes.

import gradio as gr

demo = gr.Interface(lambda x: x, "image", "image")

demo.launch(max_file_size="5mb")
# or
demo.launch(max_file_size=5 * gr.FileSize.MB)

max_file_size_upload

Error states can now be cleared

When a component encounters an error, the error state shown in the UI can now be cleared by clicking on the x icon in the top right of the component. This applies to all types of errors, whether it's raised in the UI or the server.

error_modal_calculator

Thanks @freddyaboulton!

Features

  • #8056 2e469a5 - Using keys to preserve values between reloads. Thanks @aliabid94!
  • #7646 450b8cc - Refactor JS Client. Thanks @hannahblair!
  • #8061 17e83c9 - Docs Reorg and Intro Page. Thanks @aliabd!

Fixes

  • #8066 624f9b9 - make gradio dev tools a local dependency rather than bundling. Thanks @pngwn!

0.16.0

Features

  • #7845 dbb7373 - ensure ImageEditor events work as expected. Thanks @pngwn!

Fixes

  • #7974 79e0aa8 - Fix heartbeat in the js client to be Lite compatible. Thanks @whitphx!

0.15.1

Fixes

  • #7926 9666854 - Fixes streaming event race condition. Thanks @aliabid94!

0.15.0

Highlights

Automatically delete state after user has disconnected from the webpage (#7829 6a4bf7a)

Gradio now automatically deletes gr.State variables stored in the server's RAM when users close their browser tab. The deletion will happen 60 minutes after the server detected a disconnect from the user's browser. If the user connects again in that timeframe, their state will not be deleted.

Additionally, Gradio now includes a Blocks.unload() event, allowing you to run arbitrary cleanup functions when users disconnect (this does not have a 60 minute delay). You can think of the unload event as the opposite of the load event.

with gr.Blocks() as demo:
    gr.Markdown(
"""# State Cleanup Demo
🖼️ Images are saved in a user-specific directory and deleted when the users closes the page via demo.unload.
""")
    with gr.Row():
        with gr.Column(scale=1):
            with gr.Row():
                img = gr.Image(label="Generated Image", height=300, width=300)
            with gr.Row():
                gen = gr.Button(value="Generate")
            with gr.Row():
                history = gr.Gallery(label="Previous Generations", height=500, columns=10)
                state = gr.State(value=[], delete_callback=lambda v: print("STATE DELETED"))

    demo.load(generate_random_img, [state], [img, state, history]) 
    gen.click(generate_random_img, [state], [img, state, history])
    demo.unload(delete_directory)


demo.launch(auth=lambda user,pwd: True,
            auth_message="Enter any username and password to continue")

Thanks @freddyaboulton!

0.14.0

Features

  • #7691 84f81fe - Closing stream from the backend. Thanks @aliabid94!

Fixes

  • #7564 5d1e8da - batch UI updates on a per frame basis. Thanks @pngwn!

0.13.0

Fixes

  • #7575 d0688b3 - Files should now be supplied as file(...) in the Client, and some fixes to gr.load() as well. Thanks @abidlabs!

0.12.2

Features

0.12.1

Fixes

  • #7411 32b317f - Set root correctly for Gradio apps that are deployed behind reverse proxies. Thanks @abidlabs!

0.12.0

Features

  • #7183 49d9c48 - [WIP] Refactor file normalization to be in the backend and remove it from the frontend of each component. Thanks @abidlabs!

0.11.0

Features

  • #7102 68a54a7 - Improve chatbot streaming performance with diffs. Thanks @aliabid94!/n Note that this PR changes the API format for generator functions, which would be a breaking change for any clients reading the EventStream directly

0.10.1

Fixes

0.10.0

Features

0.9.4

Fixes

0.9.3

Features

  • #6814 828fb9e - Refactor queue so that there are separate queues for each concurrency id. Thanks @aliabid94!

0.9.2

Features

0.9.1

Fixes

  • #6693 34f9431 - Python client properly handles hearbeat and log messages. Also handles responses longer than 65k. Thanks @freddyaboulton!

0.9.0

Features

Fixes

0.8.2

Features

  • #6511 71f1a1f99 - Mark FileData.orig_name optional on the frontend aligning the type definition on the Python side. Thanks @whitphx!

0.8.1

Fixes

0.8.0

Features

0.7.2

Fixes

0.7.1

Features

0.7.0

Features

0.7.0-beta.1

Features

0.7.0-beta.0

Features

Fixes

0.6.0

Features

  • #5972 11a300791 - Lite: Support opening the entrypoint HTML page directly in browser via the file: protocol. Thanks @whitphx!

0.5.2

Fixes

  • #5840 4e62b8493 - Ensure websocket polyfill doesn't load if there is already a global.Webocket property set. Thanks @Jay2theWhy!

0.5.1

Fixes

0.5.0

Highlights

new FileExplorer component (#5672 e4a307ed6)

Thanks to a new capability that allows components to communicate directly with the server without passing data via the value, we have created a new FileExplorer component.

This component allows you to populate the explorer by passing a glob, but only provides the selected file(s) in your prediction function.

Users can then navigate the virtual filesystem and select files which will be accessible in your predict function. This component will allow developers to build more complex spaces, with more flexible input options.

output

For more information check the FileExplorer documentation.

Thanks @aliabid94!

Features

  • #5787 caeee8bf7 - ensure the client does not depend on window when running in a node environment. Thanks @gibiee!

Fixes

0.4.2

Features

0.4.1

Fixes

  • #5705 78e7cf516 - ensure internal data has updated before dispatching success or then events. Thanks @pngwn!

0.4.0

Features

0.3.1

Fixes

0.3.0

Features

0.2.1

Features

0.2.0

Features

Fixes

0.1.4

Patch Changes

0.1.3

Patch Changes

0.1.2

Patch Changes

0.1.1

Patch Changes

  • #4201 da5b4ee1 Thanks @pngwn! - Ensure semiver is bundled so CDN links work correctly.

  • #4202 a26e9afd Thanks @pngwn! - Ensure all URLs returned by the client are complete URLs with the correct host instead of an absolute path relative to a server.

0.1.0

Minor Changes

Patch Changes