Sematkan Space Anda di situs web lain

Setelah Space Anda aktif dan berjalan, Anda mungkin ingin menyematkannya di situs web atau blog Anda. Menyematkan atau membagikan Space Anda adalah cara yang bagus untuk memungkinkan audiens Anda berinteraksi dengan karya dan demonstrasi Anda tanpa memerlukan pengaturan apa pun di sisi mereka. Untuk menyematkan Space, visibilitasnya harus public atau protected. Space yang protected menjaga kode sumbernya tetap privat di Hub sambil tetap dapat diakses secara publik melalui URL sematan mereka (dan custom domains, jika dikonfigurasi). Lihat Space visibility untuk detail lebih lanjut.

URL langsung

Space diberikan URL unik yang dapat Anda gunakan untuk membagikan Space Anda atau memetakannya ke dalam situs web.

URL ini memiliki bentuk: "https://<space-subdomain>.hf.space". Misalnya, Space NimaBoscarino/hotdog-gradio memiliki URL yang sesuai yaitu "https://huggingface.co/proxy/nimaboscarino-hotdog-gradio.hf.space". Subdomain bersifat unik dan hanya berubah jika Anda memindahkan atau mengganti nama Space Anda.

Ruang Anda selalu disajikan dari akar subdomain ini.

Anda dapat menemukan URL Space beserta contoh cuplikan cara men-embed-nya langsung dari menu opsi:

Embedding dengan IFrames

Metode embedding default untuk sebuah Space adalah menggunakan IFrames. Tambahkan elemen berikut di lokasi HTML tempat Anda ingin meng-embed Space Anda:

<iframe
    src="https://<space-subdomain>.hf.space"
    frameborder="0"
    width="850"
    height="450"
></iframe>

Sebagai contoh, menggunakan Space NimaBoscarino/hotdog-gradio:

Embedding dengan WebComponents

Jika Space yang ingin Anda sematkan berbasis Gradio, Anda dapat menggunakan Web Components untuk menyematkan Space Anda. WebComponents lebih cepat daripada IFrames dan secara otomatis menyesuaikan diri dengan halaman web Anda sehingga Anda tidak perlu mengonfigurasi width atau height untuk elemen Anda. Pertama, Anda perlu mengimpor pustaka JS Gradio yang sesuai dengan versi Gradio di Space dengan menambahkan skrip berikut ke HTML Anda.

Lalu, tambahkan elemen gradio-app di tempat Anda ingin menautkan Space Anda.

<gradio-app src="https://<space-subdomain>.hf.space"></gradio-app>

Lihat dokumentasi Gradio untuk detail lebih lanjut.