Gradio Spaces

Gradio는 입력 목록으로 모델을 실행하고 이미지, 오디오, 3D 객체 등 다양한 형식으로 출력을 표시할 수 있는 쉽고 직관적인 인터페이스를 제공합니다. Gradio는 이제 Matplotlib, Bokeh, Plotly로 데이터 시각화를 만들 수 있는 Plot output component도 갖추고 있습니다. 자세한 내용은 Gradio 팀의 Getting started 가이드를 참고하세요.

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

Gradio 문서에서 모든 기능을 자세히 알아보고, 시작을 돕는 유용한 튜토리얼을 담은 Gradio Guides를 확인해 보세요!

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

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

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

새로운 Gradio Space 만들기

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

의존성을 추가

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

transformers
torch

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

Gradio 인터페이스 생성

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

import gradio as gr
from transformers import pipeline

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

def predict(input_img):
    predictions = pipeline(input_img)
    return input_img, {p["label"]: p["score"] for p in predictions} 

gradio_app = gr.Interface(
    predict,
    inputs=gr.Image(label="Select hot dog candidate", sources=['upload', 'webcam'], type="pil"),
    outputs=[gr.Image(label="Processed Image"), gr.Label(label="Result", num_top_classes=2)],
    title="Hot Dog? Or Not?",
)

if __name__ == "__main__":
    gradio_app.launch()

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

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

Web Components 또는 HTML <iframe> 태그를 사용하여 다른 웹페이지에 Gradio Space를 임베드할 수 있습니다. 자세한 내용은 문서 또는 Gradio 문서를 참고하세요.