B컷전문 | 개발과 인생의 이야기

Gradio는 텍스트, 이미지, 오디오 등 다양한 컴포넌트를 통해 AI 모델 인터페이스를 구성할 수 있습니다. 본 글에서는 주요 입력/출력 컴포넌트를 분류하고 실전 예제와 함께 활용법을 소개합니다.

---

Gradio의 강점 중 하나는 UI 컴포넌트를 구성하는 방식이 매우 직관적이라는 점입니다.
복잡한 프론트엔드 지식 없이도 몇 줄의 Python 코드로 모델에 적합한 인터페이스를 만들 수 있습니다.

이번 편에서는 Gradio의 핵심 컴포넌트들을 정리하고,
어떤 타입을 어떤 상황에서 활용할 수 있는지 실전 중심으로 살펴보겠습니다.

---

Gradio의 입력/출력 컴포넌트 분류

Gradio의 컴포넌트는 크게 다음과 같이 분류할 수 있습니다:

분류 예시

텍스트 기반	Textbox, Textarea, Dropdown, Radio, Checkbox
이미지/비주얼	Image, Video, Sketchpad, Gallery
오디오/음성	Audio, Microphone
파일/데이터	File, Dataframe, JSON, Label
출력 특화	Highlight, HTML, Chatbot, Plot

---

1. 텍스트 입력/출력 컴포넌트

Textbox, Textarea

• Textbox: 한 줄 입력
• Textarea: 여러 줄 입력

gr.Textbox(lines=1, placeholder="이름을 입력하세요")
gr.Textarea(lines=5, placeholder="자기소개를 입력하세요")

활용 예

• 이름, 질문 등 간단한 입력
• 긴 문장, 뉴스 기사 요약 등의 입력

Dropdown, Radio, Checkbox

gr.Dropdown(choices=["자동차", "기차", "비행기"])
gr.Radio(["남성", "여성", "기타"])
gr.Checkbox(label="개인정보 동의")

• Dropdown: 선택지 목록 중 하나 선택
• Radio: 목록 중 하나 선택 (수평 정렬)
• Checkbox: True/False 선택

📌 사용 팁: 모델에 조건이나 옵션을 넘겨야 할 때 유용

---

2. 이미지 입력/출력

Image

gr.Image(type="pil", label="이미지를 업로드하세요")

• type="pil": PIL 이미지로 처리
• type="numpy": NumPy 배열로 처리
• tool="editor": 자르기/그리기 기능 활성화

출력 예시

def invert(img):
    return ImageOps.invert(img)

gr.Interface(fn=invert, inputs=gr.Image(), outputs=gr.Image())

활용 예

• 얼굴 인식, 객체 탐지, 스타일 변환, 불량 이미지 분류

---

3. 오디오 입력/출력

Audio, Microphone

gr.Audio(source="microphone", type="filepath")

• source="upload": 파일 업로드
• source="microphone": 마이크 녹음
• type="filepath" 또는 numpy 선택 가능

활용 예

• 음성 인식(Whisper), 감정 분석, 발음 평가

출력 예시

def echo_audio(audio):
    return audio  # 단순 재생용 반환

gr.Interface(fn=echo_audio, inputs=gr.Audio(), outputs=gr.Audio())

---

4. 파일 및 데이터 구조 입력

File, Dataframe, JSON

gr.File(file_types=[".txt", ".csv"])
gr.Dataframe(headers=["이름", "나이"])
gr.JSON()

• 대용량 데이터 입력이나 구조화된 정보 처리에 적합
• 특히 DataFrame은 Pandas와 연동하여 처리 가능

활용 예

• CSV 업로드 후 통계 분석
• JSON 기반 설정 정보 처리

---

5. 출력 특화 컴포넌트

Label, HTML, Chatbot

gr.Label()
gr.HTML("<h3>처리 완료!</h3>")
gr.Chatbot()

• Label: 모델 분류 결과를 시각적으로 보여줌
• HTML: 자유로운 HTML 기반 출력 지원
• Chatbot: 메시지 기반 대화형 출력 구현

예시

gr.Interface(fn=predict_class, inputs=gr.Image(), outputs=gr.Label(num_top_classes=3))

---

컴포넌트 선택 가이드

목적 추천 컴포넌트

간단한 입력	Textbox, Dropdown
이미지 업로드	Image
음성 입력	Audio, Microphone
복잡한 입력	Dataframe, File
결과 시각화	Label, HTML, Chatbot

---

실무 팁: 컴포넌트 커스터마이징

Gradio는 각 컴포넌트에 대해 다양한 속성 설정을 지원합니다.

• label: UI에 보여질 이름
• value: 초기값
• interactive: 사용자 입력 허용 여부
• visible: 조건부 노출 가능
• every: 자동 실행 주기 설정 (센서, 영상 입력 등)

---

마무리 – 컴포넌트는 Gradio의 UI 언어

Gradio의 컴포넌트는 모델과 사용자 간 상호작용을 구성하는 언어입니다.
각 컴포넌트를 어떻게 배치하고 조합하느냐에 따라 완전히 다른 사용자 경험을 만들 수 있습니다.

다음 화에서는 Gradio Blocks 구조에서 이런 컴포넌트를 활용해 어떻게 UI를 구성하는지, 그리고 Row, Column, Tabs 등의 고급 구조를 실전 예제로 다뤄보겠습니다.