Embed HuggingFace spaces in personal websites

Posted on by

A HuggingFace Space is assigned a unique URL you can use to share your Space or embed it in your own website.

This URL is of the form: "https://<space-subdomain>.hf.space".

For instance, my Space  https://huggingface.co/spaces/mbarnig/My_first_AI_Image has the corresponding direct URL  https://mbarnig-my-first-ai-image.hf.space . It can be embedded in a website with an iFrame or with a Web Component. The subdomain is unique and only changes if you move or rename your Space.

iFrame

<iframe
	src="https://mbarnig-my-first-ai-image.hf.space"
	frameborder="0"
	width="850"
	height="600"
></iframe>

Example :

Web Component

<script
	type="module"
	src="https://gradio.s3-us-west-2.amazonaws.com/5.0.1/gradio.js"
></script>

<gradio-app src="https://mbarnig-my-first-ai-image.hf.space"></gradio-app>

Example