diff --git a/.changeset/seven-hands-kiss.md b/.changeset/seven-hands-kiss.md new file mode 100644 index 0000000000000..a5f868c57aca5 --- /dev/null +++ b/.changeset/seven-hands-kiss.md @@ -0,0 +1,6 @@ +--- +"gradio": patch +"gradio_client": patch +--- + +feat:Update Guides related to deploying Gradio chatbots to Discord, Slack, and website widgets diff --git a/client/python/gradio_client/client.py b/client/python/gradio_client/client.py index 49669d97dabca..36e17a1a8cef0 100644 --- a/client/python/gradio_client/client.py +++ b/client/python/gradio_client/client.py @@ -915,7 +915,9 @@ def deploy_discord( hf_token: HF api token with write priviledges in order to upload the files to HF space. Can be ommitted if logged in via the HuggingFace CLI, unless the upstream space is private. Obtain from: https://huggingface.co/settings/token private: Whether the space hosting the discord bot is private. The visibility of the discord bot itself is set via the discord website. See https://huggingface.co/spaces/freddyaboulton/test-discord-bot-v1 """ - + warnings.warn( + "This method is deprecated and may be removed in the future. Please see the documentation on how to create a discord bot with Gradio: https://www.gradio.app/guides/creating-a-discord-bot-from-a-gradio-app" + ) if self.config["mode"] == "chat_interface" and not api_names: api_names = [("chat", "chat")] diff --git a/guides/05_chatbots/01_creating-a-chatbot-fast.md b/guides/05_chatbots/01_creating-a-chatbot-fast.md index 4ed8b95a40379..9581a7f3372ee 100644 --- a/guides/05_chatbots/01_creating-a-chatbot-fast.md +++ b/guides/05_chatbots/01_creating-a-chatbot-fast.md @@ -331,11 +331,15 @@ $code_chatinterface_echo_multimodal ## Using Your Chatbot via API -Once you've built your Gradio chat interface and are hosting it on [Hugging Face Spaces](https://hf.space) or somewhere else, then you can query it with a simple API at the `/chat` endpoint. The endpoint just expects the user's message (and potentially additional inputs if you have set any using the `additional_inputs` parameter), and will return the response, internally keeping track of the messages sent so far. +Once you've built your Gradio chat interface and are hosting it on [Hugging Face Spaces](https://hf.space) or somewhere else, then you can query it with a simple API at the `/chat` endpoint. The endpoint just expects the user's message and will return the response, internally keeping track of the message history. -[](https://github.com/gradio-app/gradio/assets/1778297/7b10d6db-6476-4e2e-bebd-ecda802c3b8f) +![](https://github.com/gradio-app/gradio/assets/1778297/7b10d6db-6476-4e2e-bebd-ecda802c3b8f) -To use the endpoint, you should use either the [Gradio Python Client](/guides/getting-started-with-the-python-client) or the [Gradio JS client](/guides/getting-started-with-the-js-client). Or, you can deploy your Chat Interface to other platforms, such as [Discord](../guides/creating-a-discord-bot-from-a-gradio-app). +To use the endpoint, you should use either the [Gradio Python Client](/guides/getting-started-with-the-python-client) or the [Gradio JS client](/guides/getting-started-with-the-js-client). Or, you can deploy your Chat Interface to other platforms, such as a: + +* Discord bot [[tutorial]](../guides/creating-a-discord-bot-from-a-gradio-app) +* Slack bot [[tutorial]](../guides/creating-a-slack-bot-from-a-gradio-app) +* Website widget [[tutorial]](../guides/creating-a-website-widget-from-a-gradio-chatbot) ## What's Next? diff --git a/guides/05_chatbots/06_creating-a-discord-bot-from-a-gradio-app.md b/guides/05_chatbots/06_creating-a-discord-bot-from-a-gradio-app.md index 3a0569e19471a..d2d90eb088745 100644 --- a/guides/05_chatbots/06_creating-a-discord-bot-from-a-gradio-app.md +++ b/guides/05_chatbots/06_creating-a-discord-bot-from-a-gradio-app.md @@ -1,137 +1,162 @@ -# 🚀 Creating Discord Bots from Gradio Apps 🚀 +# 🚀 Creating Discord Bots with Gradio 🚀 -Tags: NLP, TEXT, CHAT +Tags: CHAT, DEPLOY, DISCORD -We're excited to announce that Gradio can now automatically create a discord bot from a deployed app! 🤖 +You can make your Gradio app available as a Discord bot to let users in your Discord server interact with it directly. -Discord is a popular communication platform that allows users to chat and interact with each other in real-time. By turning your Gradio app into a Discord bot, you can bring cutting edge AI to your discord server and give your community a whole new way to interact. +## How does it work? -## 💻 How does it work? 💻 +The Discord bot will listen to messages mentioning it in channels. When it receives a message (which can include text as well as files), it will send it to your Gradio app via Gradio's built-in API. Your bot will reply with the response it receives from the API. -With `gradio_client` version `0.3.0`, any gradio `ChatInterface` app on the internet can automatically be deployed as a discord bot via the `deploy_discord` method of the `Client` class. +Because Gradio's API is very flexible, you can create Discord bots that support text, images, audio, streaming, chat history, and a wide variety of other features very easily. -Technically, any gradio app that exposes an api route that takes in a single string and outputs a single string can be deployed to discord. In this guide, we will focus on `gr.ChatInterface` as those apps naturally lend themselves to discord's chat functionality. +![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/Screen%20Recording%202024-12-18%20at%204.26.55%E2%80%AFPM.gif) -## 🛠️ Requirements 🛠️ +## Prerequisites -Make sure you have the latest `gradio_client` and `gradio` versions installed. +* Install the latest version of `gradio` and the `discord.py` libraries: -```bash -pip install gradio_client>=0.3.0 gradio>=3.38.0 +``` +pip install --upgrade gradio discord.py~=2.0 ``` -Also, make sure you have a [Hugging Face account](https://huggingface.co/) and a [write access token](https://huggingface.co/docs/hub/security-tokens). - -⚠️ Tip ⚠️: Make sure you login to the Hugging Face Hub by running `huggingface-cli login`. This will let you skip passing your token in all subsequent commands in this guide. +* Have a running Gradio app. This app can be running locally or on Hugging Face Spaces. In this example, we will be using the [Gradio Playground Space](https://huggingface.co/spaces/abidlabs/gradio-playground-bot), which takes in an image and/or text and generates the code to generate the corresponding Gradio app. -## 🏃‍♀️ Quickstart 🏃‍♀️ +Now, we are ready to get started! -### Step 1: Implementing our chatbot -Let's build a very simple Chatbot using `ChatInterface` that simply repeats the user message. Write the following code into an `app.py` +### 1. Create a Discord application -```python -import gradio as gr +First, go to the [Discord apps dashboard](https://discord.com/developers/applications). Look for the "New Application" button and click it. Give your application a name, and then click "Create". -def slow_echo(message, history): - return message - -demo = gr.ChatInterface(slow_echo).queue().launch() -``` +![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/discord-4.png) -### Step 2: Deploying our App +On the resulting screen, you will see basic information about your application. Under the Settings section, click on the "Bot" option. You can update your bot's username if you would like. -In order to create a discord bot for our app, it must be accessible over the internet. In this guide, we will use the `gradio deploy` command to deploy our chatbot to Hugging Face spaces from the command line. Run the following command. +Then click on the "Reset Token" button. A new token will be generated. Copy it as we will need it for the next step. -```bash -gradio deploy --title echo-chatbot --app-file app.py -``` +Scroll down to the section that says "Privileged Gateway Intents". Your bot will need certain permissions to work correctly. In this tutorial, we will only be using the "Message Content Intent" so click the toggle to enable this intent. Save the changes. -This command will ask you some questions, e.g. requested hardware, requirements, but the default values will suffice for this guide. -Note the URL of the space that was created. Mine is https://huggingface.co/spaces/freddyaboulton/echo-chatbot +![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/discord-3.png) -### Step 3: Creating a Discord Bot -Turning our space into a discord bot is also a one-liner thanks to the `gradio deploy-discord`. Run the following command: -```bash -gradio deploy-discord --src freddyaboulton/echo-chatbot -``` +### 2. Write a Discord bot -❗️ Advanced ❗️: If you already have a discord bot token you can pass it to the `deploy-discord` command. Don't worry, if you don't have one yet! +Let's start by writing a very simple Discord bot, just to make sure that everything is working. Write the following Python code in a file called `bot.py`, pasting the discord bot token from the previous step: -```bash -gradio deploy-discord --src freddyaboulton/echo-chatbot --discord-bot-token -``` +```python +# bot.py +import discord -Note the URL that gets printed out to the console. Mine is https://huggingface.co/spaces/freddyaboulton/echo-chatbot-gradio-discord-bot +TOKEN = #PASTE YOUR DISCORD BOT TOKEN HERE -### Step 4: Getting a Discord Bot Token +client = discord.Client() -If you didn't have a discord bot token for step 3, go to the URL that got printed in the console and follow the instructions there. -Once you obtain a token, run the command again but this time pass in the token: +@client.event +async def on_ready(): + print(f'{client.user} has connected to Discord!') -```bash -gradio deploy-discord --src freddyaboulton/echo-chatbot --discord-bot-token +client.run(TOKEN) ``` -### Step 5: Add the bot to your server +Now, run this file: `python bot.py`, which should run and print a message like: -Visit the space of your discord bot. You should see "Add this bot to your server by clicking this link:" followed by a URL. Go to that URL and add the bot to your server! +```text +We have logged in as GradioPlaygroundBot#1451 +``` -### Step 6: Use your bot! +If that is working, we are ready to add Gradio-specific code. We will be using the [Gradio Python Client](https://www.gradio.app/guides/getting-started-with-the-python-client) to query the Gradio Playground Space mentioned above. Here's the updated `bot.py` file: -By default the bot can be called by starting a message with `/chat`, e.g. `/chat `. +```python +import discord +from gradio_client import Client, handle_file +import httpx +import os + +TOKEN = #PASTE YOUR DISCORD BOT TOKEN HERE + +intents = discord.Intents.default() +intents.message_content = True + +client = discord.Client(intents=intents) +gradio_client = Client("abidlabs/gradio-playground-bot") + +def download_image(attachment): + response = httpx.get(attachment.url) + image_path = f"./images/{attachment.filename}" + os.makedirs("./images", exist_ok=True) + with open(image_path, "wb") as f: + f.write(response.content) + return image_path + +@client.event +async def on_ready(): + print(f'We have logged in as {client.user}') + +@client.event +async def on_message(message): + # Ignore messages from the bot itself + if message.author == client.user: + return + + # Check if the bot is mentioned in the message and reply + if client.user in message.mentions: + # Extract the message content without the bot mention + clean_message = message.content.replace(f"<@{client.user.id}>", "").strip() + + # Handle images (only the first image is used) + files = [] + if message.attachments: + for attachment in message.attachments: + if any(attachment.filename.lower().endswith(ext) for ext in ['png', 'jpg', 'jpeg', 'gif', 'webp']): + image_path = download_image(attachment) + files.append(handle_file(image_path)) + break + + # Stream the responses to the channel + for response in gradio_client.submit( + message={"text": clean_message, "files": files}, + ): + await message.channel.send(response[-1]) + +client.run(TOKEN) +``` -⚠️ Tip ⚠️: If either of the deployed spaces goes to sleep, the bot will stop working. By default, spaces go to sleep after 48 hours of inactivity. You can upgrade the hardware of your space to prevent it from going to sleep. See this [guide](https://huggingface.co/docs/hub/spaces-gpus#using-gpu-spaces) for more information. +### 3. Add the bot to your Discord Server - +Now we are ready to install the bot on our server. Go back to the [Discord apps dashboard](https://discord.com/developers/applications). Under the Settings section, click on the "OAuth2" option. Scroll down to the "OAuth2 URL Generator" box and select the "bot" checkbox: -### Using the `gradio_client.Client` Class +![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/discord-2.png) -You can also create a discord bot from a deployed gradio app with python. -```python -import gradio_client as grc -grc.Client("freddyaboulton/echo-chatbot").deploy_discord() -``` -## 🦾 Using State of The Art LLMs 🦾 +Then in "Bot Permissions" box that pops up underneath, enable the following permissions: -We have created an organization on Hugging Face called [gradio-discord-bots](https://huggingface.co/gradio-discord-bots) containing several template spaces that explain how to deploy state of the art LLMs powered by gradio as discord bots. +![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/discord-1.png) -The easiest way to get started is by deploying Meta's Llama 2 LLM with 70 billion parameter. Simply go to this [space](https://huggingface.co/spaces/gradio-discord-bots/Llama-2-70b-chat-hf) and follow the instructions. -The deployment can be done in one line! 🤯 +Copy the generated URL that appears underneath, which should look something like: -```python -import gradio_client as grc -grc.Client("ysharma/Explore_llamav2_with_TGI").deploy_discord(to_id="llama2-70b-discord-bot") +```text +https://discord.com/oauth2/authorize?client_id=1319011745452265575&permissions=377957238784&integration_type=0&scope=bot ``` -## 🦜 Additional LLMs 🦜 +Paste it into your browser, which should allow you to add the Discord bot to any Discord server that you manage. -In addition to Meta's 70 billion Llama 2 model, we have prepared template spaces for the following LLMs and deployment options: -- [gpt-3.5-turbo](https://huggingface.co/spaces/gradio-discord-bots/gpt-35-turbo), powered by openai. Required OpenAI key. -- [falcon-7b-instruct](https://huggingface.co/spaces/gradio-discord-bots/falcon-7b-instruct) powered by Hugging Face Inference Endpoints. -- [Llama-2-13b-chat-hf](https://huggingface.co/spaces/gradio-discord-bots/Llama-2-13b-chat-hf) powered by Hugging Face Inference Endpoints. -- [Llama-2-13b-chat-hf](https://huggingface.co/spaces/gradio-discord-bots/llama-2-13b-chat-transformers) powered by Hugging Face transformers. +### 4. That's it! -To deploy any of these models to discord, simply follow the instructions in the linked space for that model. +Now you can mention your bot from any channel in your Discord server, optionally attach an image, and it will respond with generated Gradio app code! -## Deploying non-chat gradio apps to discord +The bot will: +1. Listen for mentions +2. Process any attached images +3. Send the text and images to your Gradio app +4. Stream the responses back to the Discord channel -As mentioned above, you don't need a `gr.ChatInterface` if you want to deploy your gradio app to discord. All that's needed is an api route that takes in a single string and outputs a single string. - -The following code will deploy a space that translates english to german as a discord bot. - -```python -import gradio_client as grc -client = grc.Client("freddyaboulton/english-to-german") -client.deploy_discord(api_names=['german']) -``` + This is just a basic example - you can extend it to handle more types of files, add error handling, or integrate with different Gradio apps. -## Conclusion +![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/Screen%20Recording%202024-12-18%20at%204.26.55%E2%80%AFPM.gif) -That's it for this guide! We're really excited about this feature. Tag [@Gradio](https://twitter.com/Gradio) on twitter and show us how your discord community interacts with your discord bots. +If you build a Discord bot from a Gradio app, feel free to share it on X and tag [the Gradio account](https://x.com/Gradio), and we are happy to help you amplify! \ No newline at end of file diff --git a/guides/05_chatbots/07_creating-a-slack-bot-from-a-gradio-app.md b/guides/05_chatbots/07_creating-a-slack-bot-from-a-gradio-app.md new file mode 100644 index 0000000000000..dedb686685f84 --- /dev/null +++ b/guides/05_chatbots/07_creating-a-slack-bot-from-a-gradio-app.md @@ -0,0 +1,144 @@ +# 🚀 Creating a Slack Bot from a Gradio App 🚀 + +Tags: CHAT, DEPLOY, SLACK + +You can make your Gradio app available as a Slack bot to let users in your Slack workspace interact with it directly. + +## How does it work? + +The Slack bot will listen to messages mentioning it in channels. When it receives a message (which can include text as well as files), it will send it to your Gradio app via Gradio's built-in API. Your bot will reply with the response it receives from the API. + +Because Gradio's API is very flexible, you can create Slack bots that support text, images, audio, streaming, chat history, and a wide variety of other features very easily. + +![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/Screen%20Recording%202024-12-19%20at%203.30.00%E2%80%AFPM.gif) + +## Prerequisites + +* Install the latest version of `gradio` and the `slack-bolt` library: + +```bash +pip install --upgrade gradio slack-bolt~=1.0 +``` + +* Have a running Gradio app. This app can be running locally or on Hugging Face Spaces. In this example, we will be using the [Gradio Playground Space](https://huggingface.co/spaces/abidlabs/gradio-playground-bot), which takes in an image and/or text and generates the code to generate the corresponding Gradio app. + +Now, we are ready to get started! + +### 1. Create a Slack App + +1. Go to [api.slack.com/apps](https://api.slack.com/apps) and click "Create New App" +2. Choose "From scratch" and give your app a name +3. Select the workspace where you want to develop your app +4. Under "OAuth & Permissions", scroll to "Scopes" and add these Bot Token Scopes: + - `app_mentions:read` + - `chat:write` + - `files:read` + - `files:write` +5. In the same "OAuth & Permissions" page, scroll back up and click the button to install the app to your workspace. +6. Note the "Bot User OAuth Token" (starts with `xoxb-`) that appears as we'll need it later +7. Click on "Socket Mode" in the menu bar. When the page loads, click the toggle to "Enable Socket Mode" +8. Give your token a name, such as `socket-token` and copy the token that is generated (starts with `xapp-`) as we'll need it later. +9. Finally, go to the "Event Subscription" option in the menu bar. Click the toggle to "Enable Events" and subscribe to the `app_mention` bot event. + +### 2. Write a Slack bot + +Let's start by writing a very simple Slack bot, just to make sure that everything is working. Write the following Python code in a file called `bot.py`, pasting the two tokens from step 6 and step 8 in the previous section. + +```py +from slack_bolt import App +from slack_bolt.adapter.socket_mode import SocketModeHandler + +SLACK_BOT_TOKEN = # PASTE YOUR SLACK BOT TOKEN HERE +SLACK_APP_TOKEN = # PASTE YOUR SLACK APP TOKEN HERE + +app = App(token=SLACK_BOT_TOKEN) + +@app.event("app_mention") +def handle_app_mention_events(body, say): + user_id = body["event"]["user"] + say(f"Hi <@{user_id}>! You mentioned me and said: {body['event']['text']}") + +if __name__ == "__main__": + handler = SocketModeHandler(app, SLACK_APP_TOKEN) + handler.start() +``` + +If that is working, we are ready to add Gradio-specific code. We will be using the [Gradio Python Client](https://www.gradio.app/guides/getting-started-with-the-python-client) to query the Gradio Playground Space mentioned above. Here's the updated `bot.py` file: + +```python +from slack_bolt import App +from slack_bolt.adapter.socket_mode import SocketModeHandler + +SLACK_BOT_TOKEN = # PASTE YOUR SLACK BOT TOKEN HERE +SLACK_APP_TOKEN = # PASTE YOUR SLACK APP TOKEN HERE + +app = App(token=SLACK_BOT_TOKEN) +gradio_client = Client("abidlabs/gradio-playground-bot") + +def download_image(url, filename): + headers = {"Authorization": f"Bearer {SLACK_BOT_TOKEN}"} + response = httpx.get(url, headers=headers) + image_path = f"./images/{filename}" + os.makedirs("./images", exist_ok=True) + with open(image_path, "wb") as f: + f.write(response.content) + return image_path + +def slackify_message(message): + # Replace markdown links with slack format and remove code language specifier after triple backticks + pattern = r'\[(.*?)\]\((.*?)\)' + cleaned = re.sub(pattern, r'<\2|\1>', message) + cleaned = re.sub(r'```\w+\n', '```', cleaned) + return cleaned.strip() + +@app.event("app_mention") +def handle_app_mention_events(body, say): + # Extract the message content without the bot mention + text = body["event"]["text"] + bot_user_id = body["authorizations"][0]["user_id"] + clean_message = text.replace(f"<@{bot_user_id}>", "").strip() + + # Handle images if present + files = [] + if "files" in body["event"]: + for file in body["event"]["files"]: + if file["filetype"] in ["png", "jpg", "jpeg", "gif", "webp"]: + image_path = download_image(file["url_private_download"], file["name"]) + files.append(handle_file(image_path)) + break + + # Submit to Gradio and send responses back to Slack + for response in gradio_client.submit( + message={"text": clean_message, "files": files}, + ): + cleaned_response = slackify_message(response[-1]) + say(cleaned_response) + +if __name__ == "__main__": + handler = SocketModeHandler(app, SLACK_APP_TOKEN) + handler.start() +``` +### 3. Add the bot to your Slack Workplace + +Now, create a new channel or navigate to an existing channel in your Slack workspace where you want to use the bot. Click the "+" button next to "Channels" in your Slack sidebar and follow the prompts to create a new channel. + +Finally, invite your bot to the channel: +1. In your new channel, type `/invite @YourBotName` +2. Select your bot from the dropdown +3. Click "Invite to Channel" + +### 4. That's it! + +Now you can mention your bot in any channel it's in, optionally attach an image, and it will respond with generated Gradio app code! + +The bot will: +1. Listen for mentions +2. Process any attached images +3. Send the text and images to your Gradio app +4. Stream the responses back to the Slack channel + +This is just a basic example - you can extend it to handle more types of files, add error handling, or integrate with different Gradio apps! + +![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/Screen%20Recording%202024-12-19%20at%203.30.00%E2%80%AFPM.gif) + +If you build a Slack bot from a Gradio app, feel free to share it on X and tag [the Gradio account](https://x.com/Gradio), and we are happy to help you amplify! \ No newline at end of file diff --git a/guides/05_chatbots/08_creating-a-website-widget-from-a-gradio-chatbot.md b/guides/05_chatbots/08_creating-a-website-widget-from-a-gradio-chatbot.md new file mode 100644 index 0000000000000..56ee89897fdb9 --- /dev/null +++ b/guides/05_chatbots/08_creating-a-website-widget-from-a-gradio-chatbot.md @@ -0,0 +1,211 @@ +# 🚀 Creating a Website Chat Widget with Gradio 🚀 + +Tags: CHAT, DEPLOY, WEB + +You can make your Gradio Chatbot available as an embedded chat widget on your website, similar to popular customer service widgets like Intercom. This is particularly useful for: + +- Adding AI assistance to your documentation pages +- Providing interactive help on your portfolio or product website +- Creating a custom chatbot interface for your Gradio app + +![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/Screen%20Recording%202024-12-19%20at%203.32.46%E2%80%AFPM.gif) + +## How does it work? + +The chat widget appears as a small button in the corner of your website. When clicked, it opens a chat interface that communicates with your Gradio app via the JavaScript Client API. Users can ask questions and receive responses directly within the widget. + + +## Prerequisites + +* A running Gradio app (local or on Hugging Face Spaces). In this example, we'll use the [Gradio Playground Space](https://huggingface.co/spaces/abidlabs/gradio-playground-bot), which helps generate code for Gradio apps based on natural language descriptions. + +### 1. Create and Style the Chat Widget + +First, add this HTML and CSS to your website: + +```html +
+ + +
+ + +``` + +### 2. Add the JavaScript + +Then, add the following JavaScript code (which uses the Gradio JavaScript Client to connect to the Space) to your website by including this in the `` section of your website: + +```html + +``` + +### 3. That's it! + +Your website now has a chat widget that connects to your Gradio app! Users can click the chat button to open the widget and start interacting with your app. + +### Customization + +You can customize the appearance of the widget by modifying the CSS. Some ideas: +- Change the colors to match your website's theme +- Adjust the size and position of the widget +- Add animations for opening/closing +- Modify the message styling + +![](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/Screen%20Recording%202024-12-19%20at%203.32.46%E2%80%AFPM.gif) + +If you build a website widget from a Gradio app, feel free to share it on X and tag [the Gradio account](https://x.com/Gradio), and we are happy to help you amplify! \ No newline at end of file diff --git a/guides/09_gradio-clients-and-lite/02_getting-started-with-the-js-client.md b/guides/09_gradio-clients-and-lite/02_getting-started-with-the-js-client.md index 2207381825cce..a0388145ce698 100644 --- a/guides/09_gradio-clients-and-lite/02_getting-started-with-the-js-client.md +++ b/guides/09_gradio-clients-and-lite/02_getting-started-with-the-js-client.md @@ -43,11 +43,30 @@ This command adds @gradio/client to your project dependencies, allowing you to i 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 - +```html + ``` -Be sure to add this to the `` 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. +Be sure to add this to the `` 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. A complete example would look like this: + +```html + + + + + + +``` ## Connecting to a running Gradio App