웹페이지에 Dataset Viewer 임베드하기

iframe을 사용해 Dataset Viewer를 자신의 웹페이지에 임베드할 수 있어요.

출처: 문서

본문

사용할 URL은 https://huggingface.co/datasets/<namespace>/<dataset-name>/embed/viewer예요. 여기서 <namespace>는 데이터셋의 소유자(사용자 또는 조직), <dataset-name>은 데이터셋 이름이에요. subset, split, filter, search, selected row 같은 다른 파라미터도 전달할 수 있어요.

예를 들어 다음 iframe은 nyu-mll 조직의 glue 데이터셋에 대한 Dataset Viewer를 임베드해요.

<iframe
  src="https://huggingface.co/datasets/nyu-mll/glue/embed/viewer"
  frameborder="0"
  width="100%"
  height="560px"
></iframe>

Dataset Viewer 인터페이스에서 직접 임베드 코드를 얻을 수도 있어요. Dataset Viewer 오른쪽 위의 Embed 버튼을 클릭하세요.

웹페이지에 복사해 붙여넣을 수 있는 iframe 코드가 담긴 모달이 열려요.

파라미터

데이터셋 뷰어 페이지의 모든 파라미터는 iframe URL에 추가해 임베드된 뷰어에도 전달할 수 있어요(filter, search, 특정 split 등). 예를 들어 nyu-mll/glue 데이터셋의 rte subset에 있는 test split에서 mangrove를 검색한 결과를 보여주려면 다음 URL을 사용할 수 있어요.

<iframe
  src="https://huggingface.co/datasets/nyu-mll/glue/embed/viewer/rte/split?search=mangrove"
  frameborder="0"
  width="100%"
  height="560px"
></iframe>

이 코드는 Dataset Viewer 인터페이스에서 검색을 수행한 뒤 ⋮ 버튼을 클릭하고 Embed를 선택해 직접 얻을 수 있어요.

웹페이지에 복사해 붙여넣을 수 있는 iframe 코드가 담긴 모달이 열려요.

예시

임베드된 데이터셋 뷰어는 여러 ML 도구와 플랫폼에서 데이터셋을 표시하는 데 사용돼요. 몇 가지 예시를 살펴볼게요.

이 섹션에 소개되고 싶다면 pull request를 열어주세요!

도구: ZenML

htahir1은 ZenML 통합과 Dataset Viewer를 함께 사용해 ZenML 파이프라인 안에서 Hugging Face 데이터셋을 시각화하는 방법을 보여주는 블로그 포스트를 공유했어요.

도구: Metaflow + Outbounds

eddie-OB는 Outbounds의 Metaflow 카드에 데이터셋 뷰어를 포함하는 방법을 데모 비디오로 보여줘요.

도구: AutoTrain

abhishek은 데모 비디오에서 데이터셋 뷰어가 AutoTrain에 어떻게 통합되는지 소개해요.

데이터셋: Alpaca 스타일 데이터셋 갤러리

davanstrien은 스페이스에서 Alpaca 스타일 데이터셋 컬렉션을 소개해요.

데이터셋: Docmatix

andito는 DocVQA(Document Visual Question Answering)를 위한 대규모 데이터셋인 Docmatix 릴리스 발표 블로그 포스트에서 임베드된 뷰어를 사용해요.

앱: Masader - 아랍어 NLP 데이터 카탈로그

Zaid는 Masader - 아랍어 NLP 데이터 카탈로그에서 데이터셋 뷰어를 소개해요.

더 알아보기 (Learn more)

/embed/viewer 경로에 iframe을 걸면 쉽게 데이터셋 뷰어를 내 웹페이지에 넣을 수 있어요. URL에 subset·split·search 같은 파라미터를 붙이면 특정 뷰를 바로 보여줄 수 있고, 뷰어 UI의 Embed 버튼으로 생성되는 코드를 그대로 복사하면 돼요. ZenML·AutoTrain 같은 ML 도구들이 실제로 이 방식을 쓰고 있어요.