Streamlit Spaces

Streamlit은 Python으로 리액티브한 방식의 풀 기능 웹 앱을 구축할 자유를 사용자에게 줍니다. 앱 상태가 바뀔 때마다 코드가 다시 실행됩니다. Streamlit은 데이터 시각화에도 훌륭하며 Bokeh, Plotly, Altair 같은 여러 차트 라이브러리를 지원해요.

출처: 문서

본문

Streamlit은 사용자가 Python으로 리액티브한 방식의 풀 기능 웹 앱을 구축할 자유를 줍니다. 앱 상태가 바뀔 때마다 코드가 다시 실행돼요. Streamlit은 데이터 시각화에도 훌륭하며 Bokeh, Plotly, Altair 같은 여러 차트 라이브러리를 지원합니다. Spaces에서 Streamlit 앱을 구축·호스팅하는 방법은 이 블로그 포스트를 읽어보세요.

새 Space를 만들 때 SDK로 Streamlit을 선택하면 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 버전이 지원되는 것은 아니므로 어떤 버전을 쓸 수 있는지 reference 섹션을 참고하세요.

Streamlit에 대한 깊이 있는 정보는 Streamlit 문서를 참고하세요.

[!WARNING] Streamlit Spaces에는 포트 8501만 허용됩니다(기본 포트). 따라서 Space에 config.toml 파일을 제공한다면 기본 포트를 덮어쓰지 않도록 하세요.

첫 Streamlit Space: 핫도그 분류기 (Your First Streamlit Space: Hot Dog Classifier)

다음 섹션에서 Space 생성, 구성, 코드 배포의 기본을 배웁니다. Streamlit으로 Hot Dog Classifier Space를 만들 거예요. 이 앱은 주어진 사진에 핫도그가 포함되어 있는지 감지하는 julien-c/hotdog-not-hotdog 모델을 데모합니다 🌭

완성된 버전은 NimaBoscarino/hotdog-streamlit에서 호스팅됩니다.

새 Streamlit Space 만들기 (Create a new Streamlit Space)

완전히 새로운 Space를 만들고 SDK로 Streamlit을 선택하는 것으로 시작합니다. Hugging Face Spaces는 Git 리포지토리이므로 커밋을 푸시하며 Space를 점진적으로(그리고 협업으로) 작업할 수 있습니다. 계속하기 전에 Getting Started with Repositories 가이드에서 파일을 만들고 편집하는 방법을 알아보세요.

의존성 추가하기 (Add the dependencies)

Hot Dog Classifier에는 🤗 Transformers 파이프라인을 사용해 모델을 사용합니다. 따라서 몇 가지 의존성을 설치해야 해요. 리포지토리에 requirements.txt 파일을 만들고 다음 의존성을 추가하면 됩니다:

transformers
torch

Spaces 런타임이 의존성 설치를 처리할 거예요!

Streamlit 앱 만들기 (Create the Streamlit app)

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 파이프라인으로 julien-c/hotdog-not-hotdog 모델을 불러오며, Streamlit 인터페이스가 이 모델을 사용합니다. Streamlit 앱은 이미지 업로드를 기대하며, 업로드된 이미지를 hot dog 또는 not hot dog로 분류합니다. 코드를 app.py 파일에 저장한 뒤 App 탭에서 앱이 동작하는 모습을 확인하세요!

다른 웹페이지에 Streamlit Spaces 임베드하기 (Embed Streamlit Spaces on other webpages)

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

예를 들어 위 데모는 다음 태그로 이 문서에 임베드할 수 있습니다:

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