Nhúng Space của bạn vào một trang web khác

Khi Space của bạn đã hoạt động, bạn có thể muốn nhúng nó vào một trang web hoặc blog của mình. Việc nhúng hoặc chia sẻ Space là một cách tuyệt vời để cho phép khán giả tương tác với các tác phẩm và bản demo của bạn mà không cần họ phải thiết lập gì thêm. Để nhúng một Space, mức độ hiển thị của nó phải là public hoặc protected. Các Space protected giữ mã nguồn riêng tư trên Hub trong khi vẫn có thể truy cập công khai thông qua URL nhúng của chúng (và custom domains, khi được cấu hình). Xem Space visibility để biết thêm chi tiết.

URL trực tiếp

Một Space được gán một URL duy nhất mà bạn có thể sử dụng để chia sẻ Space của mình hoặc nhúng nó vào một trang web.

URL này có dạng: "https://<space-subdomain>.hf.space". Ví dụ, Space NimaBoscarino/hotdog-gradio có URL tương ứng là "https://huggingface.co/proxy/nimaboscarino-hotdog-gradio.hf.space". Subdomain là duy nhất và chỉ thay đổi khi bạn di chuyển hoặc đổi tên Space của mình.

Space của bạn luôn được phục vụ từ gốc của subdomain này.

Bạn có thể tìm thấy URL của Space cùng với các đoạn mã mẫu về cách nhúng nó trực tiếp từ menu tùy chọn:

Nhúng bằng IFrames

Phương pháp nhúng mặc định cho một Space là sử dụng IFrames. Thêm phần tử sau vào vị trí HTML nơi bạn muốn nhúng Space của mình:

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

Ví dụ, sử dụng Space NimaBoscarino/hotdog-gradio:

Nhúng bằng WebComponents

Nếu Space bạn muốn nhúng dựa trên Gradio, bạn có thể sử dụng Web Components để nhúng Space của mình. WebComponents nhanh hơn IFrames và tự động điều chỉnh theo trang web của bạn nên bạn không cần cấu hình width hoặc height cho phần tử của mình. Đầu tiên, bạn cần nhập thư viện Gradio JS tương ứng với phiên bản Gradio trong Space bằng cách thêm script sau vào HTML của bạn.

Sau đó, thêm một phần tử gradio-app vào vị trí bạn muốn nhúng Space của mình.

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

Xem tài liệu Gradio để biết thêm chi tiết.