Space를 다른 웹사이트에 임베드

Space가 설정되고 실행되면 웹사이트나 블로그에 이를 임베드하고 싶을 수 있습니다. Space를 임베드하거나 공유하는 것은 청중이 별도의 설정 없이도 사용자의 작업과 데모를 상호작용할 수 있게 하는 훌륭한 방법입니다. Space를 임베드하려면 가시성이 public 또는 protected여야 합니다. Protected Space는 Hub에서 소스 코드를 비공개로 유지하면서 임베드 URL(및 설정된 경우 custom domains)을 통해 공개적으로 접근할 수 있습니다. 자세한 내용은 Space visibility를 참조하세요.

직접 URL

Space에는 Space를 공유하거나 웹사이트에 임베드할 수 있는 고유한 URL이 할당됩니다.

이 URL은 "https://<space-subdomain>.hf.space" 형식입니다. 예를 들어, Space NimaBoscarino/hotdog-gradio의 해당 URL은 "https://nimaboscarino-hotdog-gradio.hf.space"입니다. 서브도메인은 고유하며, Space를 이동하거나 이름을 변경할 때만 변경됩니다.

space는 항상 이 서브도메인의 루트에서 제공됩니다.

옵션 메뉴에서 Space URL과 이를 직접 임베드하는 예제 스니펫을 확인할 수 있습니다:

IFrames를 사용한 임베딩

Space의 기본 임베딩 방법은 IFrames를 사용하는 것입니다. Space를 임베드하려는 HTML 위치에 다음 요소를 추가하세요:

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

예를 들어 NimaBoscarino/hotdog-gradio Space를 사용하는 경우:

WebComponents를 사용한 임베딩

임베드하려는 Space가 Gradio 기반이라면 Web Components를 사용하여 Space를 임베드할 수 있습니다. WebComponents는 IFrames보다 빠르고 웹 페이지에 자동으로 조정되므로 요소의 width 또는 height를 설정할 필요가 없습니다. 먼저, Space의 Gradio 버전에 해당하는 Gradio JS 라이브러리를 가져와야 합니다. 이를 위해 다음 스크립트를 HTML에 추가하세요.

그 다음, Space를 삽입하려는 위치에 gradio-app 요소를 추가합니다.

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

자세한 내용은 Gradio 문서를 참고하세요.