Static HTML Spaces

Spaces에서는 Streamlit이나 Gradio 대신 앱에 맞춤 HTML을 사용할 수 있습니다. Spaces의 README.md 파일 상단의 YAML 블록 안에 sdk: static을 설정합니다. 그런 다음 HTML 코드를 index.html 파일에 배치할 수 있습니다.

Static Spaces는 모든 사용자에게 무료입니다: 컴퓨트에서 실행되지 않고 직접 서빙되므로, Gradio 및 Docker Spaces와 달리 생성 시 유료 플랜이 필요하지 않습니다.

custom HTML을 사용하는 Spaces의 몇 가지 예시입니다:

• Smarter NPC: Spaces에서 iframe을 사용하여 PlayCanvas 프로젝트를 표시합니다.
• Huggingfab: Spaces에서 Sketchfab 모델을 표시합니다.
• 나머지 확산: 나머지 부분을 그려서 확산

서빙 전 빌드 단계 추가

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

예시 스페이스:

• Svelte 앱
• React 앱

내부적으로 빌드를 시작하여 생성된 파일을 특수한 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의 예시입니다:

• 정적 변수

Update on GitHub