Hub documentation
Static HTML Spaces
Static HTML Spaces
Spaces cũng hỗ trợ HTML tùy chỉnh cho ứng dụng của bạn thay vì sử dụng Streamlit hoặc Gradio. Đặt sdk: static bên trong khối YAML ở đầu tệp README.md của Spaces. Sau đó, bạn có thể đặt mã HTML của mình trong tệp index.html.
Static Spaces miễn phí cho tất cả mọi người: chúng được phục vụ trực tiếp mà không chạy trên compute, vì vậy khác với Spaces Gradio và Docker, việc tạo chúng không bao giờ yêu cầu gói trả phí.
Dưới đây là một số ví dụ về Spaces sử dụng HTML tùy chỉnh:
- NPC thông minh hơn: Hiển thị một dự án PlayCanvas bằng iframe trong Spaces.
- Huggingfab: Hiển thị mô hình Sketchfab trong Spaces.
- Khuếch tán phần còn lại: Vẽ và khuếch tán phần còn lại
Thêm bước build trước khi phục vụ
Static Spaces hỗ trợ thêm một bước build tùy chỉnh trước khi phục vụ các tài sản tĩnh của bạn. Điều này hữu ích cho các framework frontend như React, Svelte và Vue, vốn yêu cầu một quy trình build trước khi phục vụ ứng dụng. Lệnh build sẽ chạy tự động khi Space của bạn được cập nhật.
Thêm app_build_command vào khối YAML ở đầu tệp README.md của Spaces và app_file.
Ví dụ:
app_build_command: npm run buildapp_file: dist/index.html
Các không gian ví dụ:
Bên trong, nó sẽ khởi chạy một quy trình build, lưu các tệp được tạo vào ref đặc biệt refs/convert/build.
Biến không gian
Các biến môi trường tùy chỉnh có thể được truyền vào Space của bạn. Thông tin OAuth như client ID và scope cũng có sẵn dưới dạng biến môi trường, nếu bạn đã bật OAuth cho Space của mình.
Để sử dụng các biến này trong JavaScript, bạn có thể dùng đối tượng window.huggingface.variables. Ví dụ, để truy cập biến OAUTH_CLIENT_ID, bạn có thể dùng window.huggingface.variables.OAUTH_CLIENT_ID.
Dưới đây là một ví dụ về Space sử dụng các biến môi trường tùy chỉnh và bật oauth, hiển thị các biến trong HTML:
Update on GitHub