# Gradio Spaces

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

Selecting **Gradio** as the SDK when [creating a new Space](https://huggingface.co/new-space) will initialize your Space with the latest version of Gradio by setting the `sdk` property to `gradio` in your `README.md` file's YAML block. If you'd like to change the Gradio version, you can edit the `sdk_version` property.

[Gradio 문서](https://gradio.app/docs/)에서 모든 기능을 자세히 알아보고, 시작을 돕는 유용한 튜토리얼을 담은 [Gradio Guides](https://gradio.app/guides/)를 확인해 보세요!

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

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

완성된 버전은 [NimaBoscarino/hotdog-gradio](https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio)에서 확인할 수 있습니다.

## 새로운 Gradio Space 만들기

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

## 의존성을 추가

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

```
transformers
torch
```

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

## Gradio 인터페이스 생성

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

```python
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](https://huggingface.co/julien-c/hotdog-not-hotdog) 모델을 로드하기 위해 [🤗 Transformers pipeline](https://huggingface.co/docs/transformers/pipeline_tutorial)을 사용합니다. Gradio 앱은 이미지를 업로드하도록 요구하며, 업로드된 이미지를 *hot dog* 또는 *not hot dog*로 분류합니다. 코드를 **app.py** 파일로 저장한 후 **App** 탭을 방문하여 앱을 실행하는 모습을 확인해 보세요!

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

Web Components 또는 HTML `<iframe>` 태그를 사용하여 다른 웹페이지에 Gradio Space를 임베드할 수 있습니다. 자세한 내용은 [문서](./spaces-embed) 또는 [Gradio 문서](https://www.gradio.app/guides/sharing-your-app#embedding-hosted-spaces)를 참고하세요.