Embeds don't seem to be working in Quarto

[ForBo7]

Hello!

I have a Gradio app hosted on a Huggingspace Space. Gradio offers the ability to embed an app hosted on a Huggingspace Space in another website. The docs for doing so are here: https://gradio.app/sharing_your_app/#embedding-hosted-spaces.

I have a Quarto website (ignore the text on the website in the screenshots below) and wanted to try and embed my app to it. I first do so by using web components.

<script type="module"
src="https://gradio.s3-us-west-2.amazonaws.com/3.3.1/gradio.js">
</script>
<gradio-app space="$ForBo7/$FloodDetector"></gradio-app>

I add this snippet to my index.qmd file.

However, when I then preview my site, the Gradio logo along with a loading animation momentarily appears, and then the page goes blank.

I then tried using an iframe. I put the following snippet into my index.qmd file.

<iframe src="https://hf.space/embed/$ForBo7/$FloodDetector/+"></iframe>

But similarly, nothing appears. However, if I highlight the page, there is an element for the iframe.

I'm using Quarto 1.2.134, macOS Monterey 12.5.1, and an M1 device.

Is there something I'm doing wrong (perhaps I have to add some specific front matter to index.qmd?), is this a bug, or is this something not supported yet?

I appreciate any input!

[dragonstyle]

I was able to successfully load their example app both using a script and an embed, using:

<iframe src="https://hf.space/embed/abidlabs/pytorch-image-classifier/+"></iframe>

<script type="module"
src="https://gradio.s3-us-west-2.amazonaws.com/3.3.1/gradio.js">
</script>
<gradio-app space="abidlabs/pytorch-image-classifier"></gradio-app>

I am guessing that your url includes extraneous $ characters that should be removed:

<script type="module"
src="https://gradio.s3-us-west-2.amazonaws.com/3.3.1/gradio.js">
</script>
<gradio-app space="ForBo7/FloodDetector"></gradio-app>

[ForBo7]

Ahh, the smallest of mistakes! I got it to work too after removing the $ character.

Thank you for the response!

[peter-gy]

For users looking at embedding Gradio apps into Quarto documents, the previous approach required deploying Gradio applications to a Python server and then embedding the hosted app. With the release of Gradio Lite, however, Gradio apps can now run completely within the browser.

To simplify the process, I've developed a Quarto extension (quarto-gradio) that allows you to embed Gradio apps directly into your qmd documents or ipynb notebooks. Using this extension, you can generate fully serverless Quarto web bundles that include your app as a Gradio Lite bundle.