[Gen AI] 그라디오(Gradio)

이전 내용

[Gen AI] OpenAI API 사용해보기 (로컬, 주피터노트북)

---

그라디오(Gradio)

 

그라디오(Gradio)란, 사용자가 UI를 빠르게 제작하여 머신러닝이나 API 등을 사용할 수 있도록 해 주는 파이썬 오픈소스 패키지이다. 그라디오 사용 시 외부에서 접근할 수 있도록 URL도 제공해 주기 때문에 간단한 모델 배포에 사용하기 좋으며, 허깅 페이스 사이트의 모델을 바로 사용할 수도 있다.

Gradio

 

---

그라디오 설치하기 (아나콘다 프롬프트)

 

아나콘다 프롬프트(anaconda prompt)를 켜고 그라디오를 설치하는 명령어를 입력한다.

pip install gradio

 

---

그라디오 실행하기(주피터 노트북)

 

주피터노트북을 실행한 뒤, 그라디오로 고객 이름을 넣으면 인사를 해 주는 어플리케이션을 만들어본다.

◆ Single input, output

아래 코드는 하나의 컴포넌트를 입력받고 출력하는 그라디오 예제이다.

import gradio as gr

def user_greeting(name):
    return "안녕하세요! " + name + " 고객님, 헤이마트에 오신 것을 환영합니다."

app = gr.Interface(fn=user_greeting, inputs="textbox", outputs="textbox")
app.launch()

※ 필자의 경우, submit 버튼을 누르면 output 부분에 error가 뜨는 오류가 계속 발생했었는데, gradio 버전을 낮춘 뒤에 위와 같이 해결되었다. 

pip uninstall gradio
pip install gradio==2.5.3

▶ 그라디오 버전이 너무 낮아서, 여러가지 기능이 실현이 되지 않고, 코드도 최신 버전과 너무 달라서

가상 환경을 새로 만들고 (파이썬 3.9버전), gradio를 최신 버전(4.44.1)으로 깔아준 뒤 다시 시작했다.

[문제 해결] 주피터노트북에 GPU 연결하기

 

◆ Multiple input, output

아래는 여러 개의 컴포넌트를 입력받고 출력하는 예제이다. (그라디오 버전마다 코드가 다르다.)

import gradio as gr

def display(text1, text2, image):
    return text1 + text2, image

app=gr.Interface(fn=display,
inputs=["text", "text", gr.Image(height=200, width=200)],
outputs=["text", gr.Image(height=200, width=200)]
)
app.launch()

-------- Running on local URL: http://127.0.0.1:7862/
To create a public link, set `share=True` in `launch()`.

상단에 나오는 URL을 클릭하면, 웹브라우저에서 해당 기능을 수행할 수 있다.

---

인터페이스 (Interface)

 

인터페이스는 Gradio의 주요 고급 클래스이며, 몇 줄의 코드로 머신 러닝 모델(또는 모든 Python 함수)을 중심으로 웹 기반 GUI/데모를 만들 수 있다. 세 가지 매개변수를 지정해야 한다.

• fn: 그라디오에서 매핑된 함수명 (호출할 함수명) 
• inputs: 원하는 입력 구성 요소(text, image, mic)
• outputs: 원하는 출력 구성 요소(text, image, label)

추가 매개변수를 사용하여 데모의 모양과 동작을 제어할 수 있다.

[추가 매개변수]

Gradio Docs

 

◆ Tabbed Interface

그라디오에서 여러 개의 인터페이스를 사용할 경우, 인터페이스 결합을 위해 사용하는 클래스 중 하나이다.

import gradio as gr

def display(text):
    return text

def display1(text):
    return text

app1 = gr.Interface(fn=display, inputs="text", outputs="text")
app2 = gr.Interface(fn=display1, inputs="text", outputs="text")

app = gr.TabbedInterface([app1, app2], ["Tap1","Tap2"])

app.launch()

▶ Tap1에는 app1 인터페이스, Tap2에는 app2 인터페이스가 들어가게 되며, 실행하면 상단의 화면처럼 두 개의 탭이 생성되는 것을 확인할 수 있다.

---

◆ 블록스(Blocks)

블록스는 그라디오에서 보다 유연하게 레이아웃을 구성하는 데 사용된다. 인터페이스에서는 버튼 등이 자동으로 생성되었다면 블록스를 사용하면 보다 복잡한 UI 및 데이터 처리 등을 할 수 있다.

def display(text):
    return text

with gr.Blocks() as app:
    text1=gr.Textbox(label="Name")
    text2=gr.Textbox(label="Output")
    btn=gr.Button(value="submit")
    btn.click(fn=display, inputs=text1, outputs=text2)

app.launch()

▶ 블록스를 생성할 때는 아래와 같은 명령어를 사용해야 한다.

with gr.Blocks() as 앱변수:
    코드
앱변수.launch()

 

◆ 챗인터페이스(ChatInterface)

그라디오에서 챗봇을 구현할 때 사용된다. 챗봇을 만들 때는 보여 주는 디스플레이와 대화를 입력하는 창, 대화를 전송하는 창 등 많은 레이아웃 및 컴포넌트를 구성해야 하는데, 이러한 것을 한꺼번에 지원해 주는 것이 바로 챗인터페이스이다.

def display(message, history):
    return message

app = gr.ChatInterface(fn=display, title="헤이마트 Bot")

app.launch()

▶ gr.ChatInterface()에서 fn 매개변수는 [Submit] 버튼을 클릭했을 때 호출되는 함수로, 이 코드에서는 dispaly()를 호출하도록 하였다.

 

챗인터페이스에서는 다양한 매개변수를 사용할 수 있다.

• fn: [Submit] 버튼 클릭 시 호출되는 함수
• textbox: 대화 입력 창 설정
• title: 챗봋의 제목 설정
• description: 챗봇의 설명 설정
• theme: 테마 설정, gr.themes
• retry_btn: 마지막에 물어본 대화 다시하기 설정
• undo_btn: 마지막 대화 삭제
• clear_btn: 대화전체 삭제
• additional_inputs: 추가 블록 정의

해당 매개변수들을 사용하여 챗인터페이스를 생성해본다.

def display(message, history, additional_input_info):
    return message

app = gr.ChatInterface(
    fn=display,
    textbox=gr.Textbox(placeholder="대화를 입력해주세요", scale=7),
    title="헤이마트 챗봇",
    description="마트 이용에 대한 모든 것을 알려 드립니다.",
    theme="soft",
    examples=[["세일 품목"], ["물건 위치"], ["XX 가격 알려줘"]],
    retry_btn="재전송",
    undo_btn="이전 대화 삭제",
    clear_btn="모든 대화 삭제",
    additional_inputs=[
        gr.Textbox(value="관리자 호출", label="긴급 시 사용하세요.")
    ]
)

app.launch()

---

블록 레이아웃

 

그라디오의 블록스를 사용하여 앱을 제작하고자 할 때 블록 안에 레이아웃을 구성할 때 사용할 요소들은 다음과 같다.

 

◆ 로우(Raw)

로우(Raw)는 앱 안에서 컴포넌트를 수평적으로 배치할 때 사용한다.

with gr.Blocks() as 이름:
    with gr.Row():
        배치할 컴포넌트1
        배치할 컴포넌트2

with gr.Blocks() as app:
    with gr.Row():
        btn1=gr.Button("1층 이동")
        btn2=gr.Button("2층 이동")

app.launch()

만약, 두 개의 컴포넌트 높이가 다른 경우에는 gr.Row() 안에 equal_height=True를 넣어 주면 높이가 자동으로 맞춰진다.

with gr.Blocks() as app:
    with gr.Row(equal_height=True):
        text=gr.Textbox()
        btn2=gr.Button("입력")
app.launch()

또한, 레이아웃을 구성할 때 여러 개의 gr.Row()를 사용할 수도 있다.

with gr.Blocks() as app:
    with gr.Row(equal_height=True):
        text1=gr.Textbox()
        text2=gr.Textbox()
    with gr.Row():
        btn1=gr.Button("입력")
        btn2=gr.Button("취소")

app.launch()

◆ 칼럼(column)

칼럼(column)은 앱 안에서 수직으로 컴포넌트를 배치할 때 사용한다.

with gr.Blocks() as app:
    with gr.Column():
        text1=gr.Textbox()
        text2=gr.Textbox()

app.launch()

여러 개의 칼럼을 사용할 때 각 칼럼의 width 비율을 조절할 수 있으며, 이때 사용하는 변숫값은 scale 이다.

with gr.Blocks() as app:
    with gr.Row():
        with gr.Column(scale=2):
            text1=gr.Textbox()
            text2=gr.Textbox()
        with gr.Column(scale=1):
            btn1=gr.Button("1층")
            btn2=gr.Button("2층")

app.launch()

 

◆ 탭(Tab)

탭은 레이아웃을 탭으로 구성할 때 사용하는 요소이다.

with gs.Blocks() as 앱이름:
    with gr.Tab("탭 이름1"):
        컴포넌트1
        컴포넌트2
    with gr.Tab("탭 이름2"):
        컴포넌트1
        컴포넌트2       

with gr.Blocks() as app:
    with gr.Tab("구매"):
        text1=gr.Textbox()
        btn1=gr.Button("구매하기")
    with gr.Tab("환불"):
        text2=gr.Textbox()
        btn2=gr.Button("환불하기")

app.launch()

◆ 그룹(Group)

그룹은 레이아웃을 구성할 때나 컴포넌트들을 여백 없이 결합할 때 사용한다.

with gr.Blocks() as app:
    with gr.Group():
        text1=gr.Textbox()
        btn1=gr.Button("구매하기")
    with gr.Group():
        text2=gr.Textbox()
        btn2=gr.Button("환불하기")

app.launch()

---

컴포넌트(Component)

 

inputs, outputs에 다양한 컴포넌트를 사용할 수 있다.

 

◆ 텍스트(Text)

텍스트는 gr.Text나 gr.Textbox를 사용하며, 텍스트를 입력하거나 출력할 수 있는 창이 생성된다.

def display(text):
    return text

app = gr.Interface(fn=display, inputs=gr.Text(), outputs=gr.Textbox())

app.launch()

 

◆ 데이터(Data)

데이터 컴포넌트는 "str", "number", "bool", "date", "markdown" 등을 사용할 수 있으며, 판다스의 데이터프레임을 기본으로 사용한다. 출력 데이터 타입은 numpy array 타입이나 파이썬의 array로 출력할 수 있다.

def display(data):
    return data

demo=gr.Interface(fn=display, inputs=gr.Dataframe(), outputs="dataframe")
demo.launch()

 

◆ 미디어(Media)

그라디오에서는 image, video, audio, file 등의 파일을 media 컴포넌트를 통해 사용할 수 있다.

 

[이미지]

다음은 이미지를 입력하는 예제이다.

def display(image):
    return image.rotate(90)

demo = gr.Interface(fn=display,
                    inputs=gr.Image(type="pil"), outputs="image")
demo.launch()

▶ 빨간 네모를 보면, 이미지를 업로드할 수도 있고, 웹캠(가운데 버튼)을 사용하여 이미지를 입력할 수도 있다.

이 display() 함수에서는 이미지를 입력하면 출력으로 90도가 돌아가도록 (rotate(90)) 하였다.

type 에서는 'numpy", "pil", "filepath"를 넣을 수 있다.

 

gr.Image() 컴포넌트를 사용할 때 미리 예제를 넣어놓을 수 있는데, gr.Interface()의 example 매개변수에 리스트로 예제 이미지의 경로를 넣어두면 된다.. (폴더명과 파일의 위치는 크게 상관없다.)

import os

def display(image):
    return image.rotate(45)

app = gr.Interface(
    display,
    gr.Image(type="pil", width=400, height=300),
    gr.Image(type="pil", width=400, height=300),
    examples=[
        "images/1.png", #image 폴더에 1.png 파일
        "images/2.png",
        "images/3.png"
    ],
)

app.launch()

 

또한, inputs에 기본값으로 이미지를 입력할 수도 있다. gr.Interface()에 inputs 인수로 들어가는 gr.Image() 컴포넌트에 value="기본 이미지 경로"를 넣으면 앱이 실행될 때 inputs에 value에 해당하는 이미지가 출력된다.

import os

def display(image):
    return image.rotate(45)

app = gr.Interface(
    display,
    gr.Image(type="pil", width=400, height=300, value="images/1.png"),
    gr.Image(type="pil", width=400, height=300)
)

app.launch()

 

[비디오]

비디오를 사용할 때는 gr.video() 컴포넌트를 사용한다.

def display(video):
    return video

app = gr.Interface(display, gr.Video(), "video")
app.launch()

물론, 웹캠을 촬영하여 업로드할 수도 있다.

 

[오디오]

오디오를 사용할 때는 gr.Audio() 컴포넌트를 사용한다.

def display(video):
    return video

app = gr.Interface(display, gr.Audio(), "audio")
app.launch()

역시 마이크를 사용하여 녹음한 뒤 업로드할 수 있다.

 

◆ 체크 박스(Check box)

체크 박스를 사용할 때는 gradio.Checkbox() 컴포넌트를 사용하며, 결괏값은 True, False로 확인 가능하다.

def display(check):
    if check==True:
        return "VIP 입니다."
    elif check==False:
        return "일반 고객입니다."

app=gr.Interface(display, gr.Checkbox(label="VIP 여부"), "text")
app.launch()

▶ VIP 여부를 클릭한 후 [Submit] 버튼을 누르면 "VIP 입니다." 로 출력된다.

 

◆ 셀렉트 박스(Select box)

셀렉트 박스는 여러 개의 체크 박스를 하나로 묶어 사용할 수 있는 컴포넌트이며, 결괏값은 리스트 형태로 전달된다.

def display(cart):
    text = "장바구니: "
    for temp in cart:
        text += temp + " "
    return text.strip()

app = gr.Interface(
    fn=display,
    inputs=gr.CheckboxGroup(["사과", "딸기", "바나나", "수박"], label="장바구니 선택"),
    outputs="text"
)

app.launch()

 

◆ 슬라이더(slider)

슬라이더 컴포넌트는 슬라이더 바를 만들 때 사용하는 컴포넌트이다. 슬라이더 바를 생성할 때 최솟값(minimum)과 최댓값(maximum)을 입력하고 슬라이더 바 이동 시 변경되는 값을 step으로 조절한다.

 

◆ 드롭다운(dropdown)

드롭다운 메뉴를 구현할 때 사용하는 컴포넌트로, gr.Dropdown() 을 사용한다.

◆ 버튼(Button)

버튼 컴포넌트는 Blocks class에서 사용 가능하며, 버튼을 클릭할 때 특정 이벤트를 수행할 수 있다.

버튼을 클릭하면 입력된 데이터를 사용하여 함수를 호출해서 outputs에 출력 가능하다.

gradio.Button() 컴포넌트를 사용하고 인수에 value="Submit"을 입력한다.

gradio.Button.click() 이벤트를 추가하여 버튼 클릭 시 이벤트를 추가한다.

 

◆ 클리어버튼

컴포넌트를 사용하다 값을 잘못 입력하였거나 출력 창을 다시 삭제해야 하는 경우, 클리어버튼(ClearButton) 컴포넌트를 사용하면 된다. gr.ClearButton() 을 사용한다.

def display(text):
    return text

with gr.Blocks() as app:
    text1=gr.Textbox(label="Name")
    text2=gr.Textbox(label="Output")
    btn=gr.Button(value="Submit")
    btn.click(fn=display, inputs=text1, outputs=text2)
    gr.ClearButton([text1, text2])

app.launch()

▶ [Clear] 버튼을 클릭하면 내용(inputs, outputs 모두)이 초기화된다.

---

다음 내용

[Gen AI] 그라디오로 챗봇 제작하기 - 1 (상담봇)

---

[출처]

Hey, 파이썬! 생성형 AI 활용 앱 만들어줘

그라디오 홈페이지