다른 웹사이트에 Space 임베드하기
다른 웹사이트에 Space 임베드하기
Space가 실행되고 나면 웹사이트나 블로그에 임베드하고 싶을 거예요. Space를 임베드·공유하면 방문객이 별도 설정 없이 내 작업과 데모와 상호작용하게 할 수 있는 훌륭한 방법이에요.
Space를 임베드하려면 가시성이 public 또는 protected여야 해요. Protected Spaces는 소스 코드는 Hub에서 비공개로 유지하면서 임베드 URL(그리고 구성 시 custom domains)을 통해 공개적으로 접근 가능하게 해요. 자세한 내용은 Space visibility를 참고해요.
출처: 문서
본문
직접 URL (Direct URL)
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로 임베드할 수 있어요. WebComponents는 IFrames보다 빠르고 웹 페이지에 자동으로 맞춰져서 요소에 width나 height를 구성할 필요가 없어요.
먼저 HTML에 다음 스크립트를 추가해 Space의 Gradio 버전에 해당하는 Gradio JS 라이브러리를 임포트해야 해요.
그런 다음 Space를 임베드할 위치에 gradio-app 요소를 추가해요.
<gradio-app src="https://<space-subdomain>.hf.space"></gradio-app>
자세한 내용은 Gradio 문서를 확인해요.