Gradio

1. Gradio

https://www.gradio.app/

머신러닝 모델을 간단히 웹 애플리케이션 형태로 배포할 수 있게 해주는 파이썬 라이브러리입니다. 이를 통해 사용자는 인터랙티브 웹 인터페이스를 통해 모델을 테스트하고 공유할 수 있습니다. Gradio는 머신러닝 엔지니어, 데이터 과학자, 연구자들이 복잡한 웹 개발 지식 없이도 직관적인 UI를 생성할 수 있도록 설계되었습니다. 모델의 입력과 출력을 정의하면 Gradio가 자동으로 웹 기반 인터페이스를 생성하며, 이를 로컬에서 실행하거나 웹에 배포할 수 있습니다.

 2. 가상환경 구축하기
    
    python -m venv 가상환경이름

    python -m venv venv

    venv|Scripts|activate.bat

3. 패키지 확인

    pip list

    pip install gradio

4. vscode 파이썬 실행 단축키 설정

    왼쪽 하단 설정버튼 -> Keyboard Shortcuts -> python run 으로 검색 후 python: run python file에 수정 버튼 클릭

 

1. Gradio의 주요 인터페이스 유형

Gradio는 입력과 출력을 위한 다양한 위젯을 제공합니다. 주요 인터페이스는 다음과 같습니다:

입력(Input) 위젯

• 텍스트: gr.Textbox, gr.TextArea
• 버튼: gr.Button
• 숫자: gr.Number, gr.Slider
• 파일: gr.File, gr.Files
• 이미지: gr.Image
• 오디오: gr.Audio
• 라디오 버튼: gr.Radio
• 드롭다운: gr.Dropdown
• 체크박스: gr.Checkbox, gr.CheckboxGroup

출력(Output) 위젯

• 텍스트: text
• 숫자: number
• 이미지: image
• 오디오: audio
• 비디오: video
• HTML: html
• JSON: json
• 라벨(Label): label

Textbox & Text 출력

import gradio as gr

def reverse_text(input_text):
    return input_text[::-1]

interface = gr.Interface(
    fn=reverse_text,
    inputs=gr.Textbox(label="문자열 입력"),
    outputs="text",
    title="문자열 뒤집기",
    description="입력한 문자열을 뒤집어서 출력합니다."
)

interface.launch()

Number & Slider

def multiply_by_two(number):
    return number * 2

interface = gr.Interface(
    fn=multiply_by_two,
    inputs=gr.Number(label="숫자를 입력하세요"),
    outputs="number",
    title="숫자 곱하기",
    description="입력한 숫자를 2배로 출력합니다."
)

interface.launch()

Radio & Dropdown

def favorite_color(color):
    return f"선택한 색상은 {color}입니다!"

interface = gr.Interface(
    fn=favorite_color,
    inputs=gr.Radio(["빨강", "파랑", "초록"], label="좋아하는 색상을 선택하세요"),
    outputs="text",
    title="좋아하는 색상 선택",
    description="라디오 버튼에서 색상을 선택하세요."
)

interface.launch()

File Upload

def read_file(file):
    return file.name

interface = gr.Interface(
    fn=read_file,
    inputs=gr.File(label="파일을 업로드하세요"),
    outputs="text",
    title="파일 이름 표시",
    description="업로드한 파일의 이름을 출력합니다."
)

interface.launch()

Image

from PIL import Image

def grayscale_image(img):
    return img.convert("L")

interface = gr.Interface(
    fn=grayscale_image,
    inputs=gr.Image(type="pil", label="이미지를 업로드하세요"),
    outputs="image",
    title="이미지 흑백 변환",
    description="업로드한 이미지를 흑백으로 변환합니다."
)

interface.launch()

Audio

def get_audio_duration(audio):
    import wave
    with wave.open(audio, "rb") as f:
        return f.getnframes() / f.getframerate()

interface = gr.Interface(
    fn=get_audio_duration,
    inputs=gr.Audio(type="file", label="오디오 파일 업로드"),
    outputs="number",
    title="오디오 길이 계산",
    description="업로드한 오디오 파일의 길이를 초 단위로 출력합니다."
)

interface.launch()

Checkbox & CheckboxGroup

def selected_features(features):
    return f"선택된 기능: {', '.join(features)}"

interface = gr.Interface(
    fn=selected_features,
    inputs=gr.CheckboxGroup(["AI", "데이터 분석", "웹 개발"], label="관심 있는 기능을 선택하세요"),
    outputs="text",
    title="체크박스 그룹 선택",
    description="관심 있는 기능을 체크박스로 선택하세요."
)

interface.launch()

Video

def video_info(video):
    return f"업로드된 비디오 파일: {video}"

interface = gr.Interface(
    fn=video_info,
    inputs=gr.Video(label="비디오 업로드"),
    outputs="text",
    title="비디오 파일 처리",
    description="업로드한 비디오 파일의 정보를 출력합니다."
)

interface.launch()

HTML

def display_html(input_text):
    return f"<h1 style='color:blue;'>입력한 내용: {input_text}</h1>"

interface = gr.Interface(
    fn=display_html,
    inputs=gr.Textbox(label="HTML로 표시할 텍스트를 입력하세요"),
    outputs="html",
    title="HTML 출력",
    description="HTML로 스타일을 적용한 텍스트를 표시합니다."
)

interface.launch()

Label

def classify_language(language):
    if language in ["Python", "JavaScript", "Java"]:
        return {"프로그래밍 언어": language}
    return {"기타": language}

interface = gr.Interface(
    fn=classify_language,
    inputs=gr.Textbox(label="언어를 입력하세요"),
    outputs="label",
    title="언어 분류",
    description="입력된 언어를 프로그래밍 언어인지 분류합니다."
)

interface.launch()

 

다중 입력/출력 예제

Gradio는 위의 기본 인터페이스 외에도 다중 입력/출력 및 실시간 업데이트를 지원합니다.

def calculate_area_and_perimeter(length, width):
    area = length * width
    perimeter = 2 * (length + width)
    return area, perimeter

interface = gr.Interface(
    fn=calculate_area_and_perimeter,
    inputs=[gr.Number(label="길이"), gr.Number(label="너비")],
    outputs=[gr.Number(label="넓이"), gr.Number(label="둘레")],
    title="넓이와 둘레 계산기",
    description="직사각형의 길이와 너비를 입력하여 넓이와 둘레를 계산합니다."
)

interface.launch()

 

간단한 그라디오 응용 실습

import gradio as gr

def favorite_language(language):
    messages = {
        "Python": "Python은 데이터 과학, 웹 개발, AI에 아주 적합한 언어입니다!",
        "JavaScript": "JavaScript는 웹 개발에 강력하며, 프론트엔드와 백엔드에서 모두 사용됩니다.",
        "Java": "Java는 안정성과 성능으로 유명하며, 대규모 시스템에 적합합니다.",
        "C++": "C++는 고성능 애플리케이션과 게임 개발에 자주 사용됩니다."
    }
    return messages.get(language, '선택된 언어에 대한 정보가 없습니다')

interface = gr.Interface(
    fn=favorite_language,
    inputs = gr.Radio(['Python', 'JavaScript', 'Java', 'C++'], label='좋아하는 언어'),
    outputs = 'text',
    title='좋아하는 언어',
    description='라디오 버튼에서 좋아하는 프로그래밍 언어를 선택하세요'
)

interface.launch()

 

def favorite_language(language):
    messages = {
        "Python": "Python은 데이터 과학, 웹 개발, AI에 아주 적합한 언어입니다!",
        "JavaScript": "JavaScript는 웹 개발에 강력하며, 프론트엔드와 백엔드에서 모두 사용됩니다.",
        "Java": "Java는 안정성과 성능으로 유명하며, 대규모 시스템에 적합합니다.",
        "C++": "C++는 고성능 애플리케이션과 게임 개발에 자주 사용됩니다."
    }
    return messages.get(language, '선택된 언어에 대한 정보가 없습니다')

• favorite_language 함수는 사용자가 선택한 언어에 따라 미리 정의된 메시지를 반환합니다.
• messages 딕셔너리:
  • 키: 언어 이름.
  • 값: 해당 언어의 간단한 설명.
• messages.get(language, '선택된 언어에 대한 정보가 없습니다'):
  • 사용자가 선택한 언어가 딕셔너리에 없을 경우 기본 메시지를 반환합니다.

 

interface = gr.Interface(
    fn=favorite_language,
    inputs=gr.Radio(['Python', 'JavaScript', 'Java', 'C++'], label='좋아하는 언어'),
    outputs='text',
    title='좋아하는 언어',
    description='라디오 버튼에서 좋아하는 프로그래밍 언어를 선택하세요'
)

 

 

• gr.Interface:
  • Gradio의 핵심 클래스. 웹 인터페이스를 생성합니다.
• 주요 매개변수:
  1. fn:
     • 사용자가 상호작용하면 실행될 파이썬 함수입니다.
     • 여기서는 favorite_language가 사용됩니다.
  2. inputs:
     • 사용자가 선택하거나 입력할 수 있는 위젯을 정의합니다.
     • gr.Radio:
       • 라디오 버튼을 생성합니다.
       • ['Python', 'JavaScript', 'Java', 'C++']: 선택 가능한 언어 목록.
       • label='좋아하는 언어': 라디오 버튼에 표시할 레이블.
  3. outputs:
     • 함수의 반환 값을 표시하는 출력 타입.
     • 여기서는 텍스트('text')로 출력.
  4. title:
     • 웹 애플리케이션의 제목.
     • 예: "좋아하는 언어".
  5. description:
     • 애플리케이션의 간단한 설명.
     • 예: "라디오 버튼에서 좋아하는 프로그래밍 언어를 선택하세요".

#인터페이스 실행
interface.launch()

 

 

 

• 웹 인터페이스를 로컬 호스트에서 실행합니다.
• 실행 후 제공된 URL(예: http://127.0.0.1:7860)에서 인터페이스를 확인할 수 있습니다.
• launch() 주요 옵션:
  • share=True: 생성된 애플리케이션을 외부 사용자와 공유할 수 있는 URL 제공.