Hub documentation

Статические HTML Spaces

Hugging Face's logo
Join the Hugging Face community

and get access to the augmented documentation experience

to get started

Статические HTML Spaces

Spaces также поддерживают пользовательский HTML для вашего приложения вместо использования Streamlit или Gradio. Укажите sdk: static внутри блока YAML в начале файла README.md вашего Spaces. Затем вы можете разместить ваш HTML-код в файле index.html.

Статические Spaces бесплатны для всех: они обслуживаются напрямую без запуска на вычислительных ресурсах, поэтому, в отличие от Spaces на базе Gradio и Docker, для их создания никогда не требуется платный тариф.

Вот несколько примеров Spaces с использованием пользовательского HTML:

Добавление шага сборки перед обслуживанием

Статические Spaces поддерживают добавление пользовательского шага сборки перед раздачей статических ресурсов. Это полезно для фронтенд-фреймворков, таких как React, Svelte и Vue, которые требуют процесса сборки перед запуском приложения. Команда сборки выполняется автоматически при обновлении вашего Space.

Добавьте app_build_command внутри блока YAML в начале файла README.md вашего Spaces, а также app_file.

Например:

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

Примеры пространств:

Под капотом он запускает сборку, сохраняя сгенерированные файлы в специальной ссылке refs/convert/build.

Переменные пространства

Пользовательские переменные окружения можно передать вашему Space. Если для вашего Space включён OAuth, информация OAuth, такая как client ID и scope, также доступна в виде переменных окружения.

Чтобы использовать эти переменные в JavaScript, можно воспользоваться объектом window.huggingface.variables. Например, чтобы получить доступ к переменной OAUTH_CLIENT_ID, можно использовать window.huggingface.variables.OAUTH_CLIENT_ID.

Вот пример Space, использующего пользовательские переменные окружения и oauth, с выводом переменных в HTML:

Update on GitHub