Spaces의 기본 내장 SDK로 Streamlit을 사용하는 옵션은 더 이상 지원되지 않습니다. Streamlit로 Space를 배포하려면 Docker SDK를 선택한 후 Streamlit 템플릿을 사용하세요.

Streamlit Spaces

Streamlit는 반응형 방식으로 Python을 사용해 기능적인 웹 앱을 구축할 수 있는 자유도를 제공합니다. 앱의 상태가 변경될 때마다 코드가 다시 실행됩니다. Streamlit은 데이터 시각화에도 탁월하며 Bokeh, Plotly, Altair와 같은 여러 차트 라이브러리를 지원합니다. Spaces에서 Streamlit 앱을 구축하고 호스팅하는 방법에 대한 이 블로그 게시물을 읽어보세요.

새로운 Space를 생성할 때 Streamlit을 SDK로 선택하면 README.md 파일의 YAML 블록에서 sdk 속성을 streamlit으로 설정하여 최신 버전의 Streamlit로 Space가 초기화됩니다. Streamlit 버전을 변경하려면 sdk_version 속성을 편집할 수 있습니다.

Space에서 Streamlit을 사용하려면 New Space 양식을 통해 Space를 생성할 때 SDK로 Streamlit을 선택하세요. 그러면 다음 속성이 포함된 YAML 구성 블록이 있는 README.md가 포함된 저장소가 생성됩니다:

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

sdk_version를 수정할 수 있지만, 지원되지 않는 Streamlit 버전을 사용하면 문제가 발생할 수 있습니다. 모든 Streamlit 버전이 지원되는 것은 아니므로, 사용 가능한 버전을 확인하려면 참조 섹션을 참고하세요.

Streamlit에 대한 자세한 정보는 Streamlit 문서를 참조하세요.

Streamlit Spaces에는 8501 포트만 허용됩니다(기본 포트). 따라서 Space에 config.toml 파일을 제공하는 경우 기본 포트가 재정의되지 않도록 확인하세요.

첫 번째 Streamlit Space: 핫도그 분류기

다음 섹션에서는 Space를 만들고, 설정하며, 코드를 배포하는 기본 사항을 학습합니다. Streamlit을 사용하여 Hot Dog Classifier Space를 만들고, 주어진 사진에 핫도그가 포함되어 있는지 감지할 수 있는 julien-c/hotdog-not-hotdog 모델을 데모로 사용할 것입니다 🌭

완성된 버전은 NimaBoscarino/hotdog-streamlit에서 확인할 수 있습니다.

새로운 Streamlit Space 만들기

새로운 Space를 생성하고 SDK로 Streamlit을 선택하는 것부터 시작합니다. Hugging Face Spaces는 Git 저장소이므로 커밋을 푸시하여 Space를 점진적으로(그리고 협업하여) 작업할 수 있습니다. 계속하기 전에 파일을 생성하고 편집하는 방법에 대해 Getting Started with Repositories 가이드를 참고해 보세요.

의존성을 추가

Hot Dog Classifier에서는 모델을 사용하려면 🤗 Transformers pipeline을 사용하므로, 먼저 몇 가지 의존성을 설치해야 합니다. 이를 위해 저장소에 requirements.txt 파일을 생성하고, 아래 의존성을 추가하면 됩니다:

transformers
torch

Spaces 런타임이 종속성을 설치하는 작업을 처리합니다!

Streamlit 앱 만들기

Streamlit 앱을 만들려면 저장소에 app.py라는 새 파일을 만들고 다음 코드를 추가하세요:

import streamlit as st
from transformers import pipeline
from PIL import Image

pipeline = pipeline(task="image-classification", model="julien-c/hotdog-not-hotdog")

st.title("Hot Dog? Or Not?")

file_name = st.file_uploader("Upload a hot dog candidate image")

if file_name is not None:
    col1, col2 = st.columns(2)

    image = Image.open(file_name)
    col1.image(image, use_column_width=True)
    predictions = pipeline(image)

    col2.header("Probabilities")
    for p in predictions:
        col2.subheader(f"{ p['label'] }: { round(p['score'] * 100, 1)}%")

이 Python 스크립트는 🤗 Transformers pipeline을 사용하여 Streamlit 인터페이스에서 사용하는 julien-c/hotdog-not-hotdog 모델을 로드합니다. Streamlit 앱은 이미지를 업로드하도록 요구하며, 업로드된 이미지를 hot dog 또는 not hot dog로 분류합니다. 코드를 app.py 파일로 저장한 후 App 탭을 방문하여 앱을 실행하는 모습을 확인해 보세요!

다른 웹페이지에 Streamlit Spaces 임베드

HTML <iframe> 태그를 사용하여 Streamlit Space를 다른 웹페이지에 인라인 프레임으로 임베드할 수 있습니다. .hf.space 접미사로 끝나는 Space의 URL을 포함하기만 하면 됩니다. Space의 URL을 찾으려면 Spaces 옵션의 “Embed this Space” 버튼을 사용할 수 있습니다.

예를 들어, 위의 데모는 다음 태그를 사용하여 이 문서에 삽입할 수 있습니다:

<iframe
  src="https://huggingface.co/proxy/NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
  title="My awesome Streamlit Space"
></iframe>

URL에 ?embed=true를 추가하여 Streamlit 앱의 임베드 모드를 활성화했습니다. 이를 통해 일부 여백과 푸터가 제거되어 슬림한 임베드가 됩니다.

자동 크기 조절되는 IFrames로 Streamlit Spaces 임베드

Streamlit은 1.17.0부터 자동 iframe 리사이징을 지원하여, 임베드된 Streamlit 애플리케이션의 콘텐츠 양에 맞춰 부모 iframe의 크기가 자동으로 조정됩니다.

이 기능은 iFrame Resizer 라이브러리에 의존하며, 아래 예시와 같이 몇 줄의 코드를 추가해야 합니다.

• id은 자동 리사이즈 대상 지정을 위해 <iframe />으로 설정됩니다.
• iFrame Resizer는 script 태그를 통해 로드됩니다.
• iFrameResize() 함수는 대상 iframe 요소의 ID를 인수로 받아, 크기가 자동으로 변경되도록 호출됩니다.

iFrameResize()의 첫 번째 인자에 옵션을 전달할 수 있습니다. 자세한 내용은 문서를 참고하세요.

<iframe
	id="your-iframe-id"
	src="https://<space-subdomain>.hf.space"
	frameborder="0"
	width="850"
	height="450"
></iframe>
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.4/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, "#your-iframe-id")
</script>

또한 문서를 확인해 보실 수 있습니다.