정적 HTML Spaces

Spaces는 Streamlit이나 Gradio 대신 앱에 커스텀 HTML을 사용하는 것도 지원해요. Spaces의 README.md 파일 맨 위 YAML 블록 안에 sdk: static을 설정하면 되고, 그러면 index.html 파일 안에 HTML 코드를 넣을 수 있어요.

방문객이 웹 브라우저로 바로 사용할 수 있죠.

출처: 문서

본문

Static Spaces는 모든 사용자에게 무료예요. 컴퓨팅 없이 바로 서비스되기 때문에 Gradio나 Docker Spaces와 달리 유료 플랜이 없어도 만들 수 있어요.

커스텀 HTML을 사용하는 Spaces 예시를 몇 가지 볼게요:

Smarter NPC: Spaces에서 iframe으로 PlayCanvas 프로젝트를 보여줘요.
Huggingfab: Spaces에서 Sketchfab 모델을 보여줘요.
Diffuse the rest: 그리고 나머지를 확산(diffuse)해요.

서빙 전 빌드 단계 추가하기

Static Spaces는 정적 자산을 서빙하기 전에 커스텀 빌드 단계를 추가하는 것을 지원해요. 이 기능은 React, Svelte, Vue처럼 앱을 서빙하기 전에 빌드 과정이 필요한 프론트엔드 프레임워크에 유용해요. 빌드 명령은 Space가 업데이트될 때 자동으로 실행돼요.

Spaces README.md 파일 맨 위 YAML 블록 안에 app_build_command를 추가하고 app_file도 추가하면 돼요.

예를 들어:

app_build_command: npm run build
app_file: dist/index.html

예시 Spaces:

내부적으로는 빌드를 시작해서 생성된 파일을 특별한 refs/convert/build ref에 저장해요.

Space 변수

커스텀 환경 변수를 Space에 전달할 수 있어요. Space에 OAuth를 활성화했다면 클라이언트 ID, scope 같은 OAuth 정보도 환경 변수로 사용할 수 있어요.

JavaScript에서 이 변수들을 쓰려면 window.huggingface.variables 객체를 사용하면 돼요. 예를 들어 OAUTH_CLIENT_ID 변수에 접근하려면 window.huggingface.variables.OAUTH_CLIENT_ID를 쓰면 돼요.

커스텀 환경 변수와 OAuth를 켜고 HTML에 변수를 보여주는 Space 예시:

Static Variables

더 알아보기 (Learn more)

Static Spaces는 빌드 없이 바로 정적 HTML을 서빙할 수 있는 가벼운 방식을 원할 때 써요.
빌드가 필요한 프론트엔드라면 app_build_command와 app_file로 빌드 단계를 추가해요.
Spaces 개요와 Spaces SDK 문서에서 더 자세한 내용을 확인할 수 있어요.