diff --git a/CHANGELOG.md b/CHANGELOG.md index e5206d8751..75013e2359 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -50,7 +50,9 @@ io = gr.Interface(echo, "textbox", "textbox").launch() No changes to highlight. ## Documentation Changes: -No changes to highlight. +* Updated documentation for embedding Gradio demos on Spaces as web components by +[@abidlabs](https://github.com/abidlabs) in [PR 2698](https://github.com/gradio-app/gradio/pull/2698) + ## Testing and Infrastructure Changes: No changes to highlight. diff --git a/guides/01_getting_started/03_sharing_your_app.md b/guides/01_getting_started/03_sharing_your_app.md index c8cae57a66..833302def6 100644 --- a/guides/01_getting_started/03_sharing_your_app.md +++ b/guides/01_getting_started/03_sharing_your_app.md @@ -28,7 +28,9 @@ You can either drag and drop a folder containing your Gradio model and all relat Once you have hosted your app on Hugging Face Spaces, you may want to embed the demo on a different website, such as your blog or your portfolio. Embedding an interactive demo allows people to try out the machine learning model that you have built, without needing to download or install anything — right in their browser! The best part is that you can embed interative demos even in static websites, such as GitHub pages. -There are two ways to embed your Gradio demos, hosted on Hugging Face Spaces. +There are two ways to embed your Gradio demos, hosted on Hugging Face Spaces. You can find quick links to both options directly on the Space page, in the "Embed this Space" dropdown option: + +![Embed this Space dropdown option](/assets/guides/embed_this_space.png) ### Embedding with Web Components @@ -44,12 +46,12 @@ src="https://gradio.s3-us-west-2.amazonaws.com/{GRADIO_VERSION}/gradio.js"> 2. Add ```html -<gradio-app space="$user/$space_name"></gradio-app> +<gradio-app src="https://$your_space_host.hf.space"></gradio-app> ``` -element where you want to place the app. Set the `space=` attribute with your user and space name. For example: +element where you want to place the app. Set the `src=` attribute to your Space's embed URL, which you can find in the Embed this Space button. For example: ```html -<gradio-app space="abidlabs/pytorch-image-classifier"></gradio-app> +<gradio-app src="https://abidlabs-pytorch-image-classifier.hf.space"></gradio-app> ```