그라디오(Gradio)

그라디오는 사용자가 UI 를 빠르게 제작하여 ML이나 API 등을 사용할 수 있도록 해 주는 파이썬 오픈소스 패키지이다.

https://www.gradio.app/

Gradio

 

1. 설치하기

!pip install gradio

2. 그라디오 실행하기

import gradio as gr

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

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

실행화면:

3. 인터페이스(Interface)

인터페이스(Interface)는 그라디오의 주요 클래스로, 파이썬으로 작성한 함수를 미리 설정된 UI와 함께 제공하는 역할을 한다.

인터페이스를 사용할 때는 다음 3개의 매개변수를 반드시 입력해야 한다.

• fn: 그라디오에서 매핑된 함수명(호출할 함수명)
• inputs: 입력에 사용할 컴포넌트(text, image, mic)
• outputs: 출력에 사용할 컴포넌트(text, image, label)

◆  Single input, output

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

import gradio as gr

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

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

위 코드를 실행하면 Gradiointerface를 생성한다. [Submit] 버튼을 클릭하면 fn 매개변수에 있는 함수가 실행된다. user_greeting 함수의 name 매개변수로 전달되는 값은 inputs에 입력된 text 값이 name으로 전달된다. user_greeting 함수에서 return 되는 값(문자열)이 outputs의 텍스트로 전달되어 텍스트 창에 출력이 된다.

◆  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()

실행화면:

여러개의 컴포넌트를 사용할 때는 컴포넌트를 리스트에 넣어 사용한다. inputs에는 두개의 text 컴포넌트와 이미지의 width, height를 '200'으로 설정한 gr.Image() 컴포넌트를 사용했다. outputs에는 text 컴포넌트와 이미지를 그대로 출력하게 한 gr.Image() 컴포넌트를 리스트로 넣었다.

◆  Tabbed Interface

그라디오에서 여러개의 인터페이스를 사용할 경우, 인터페이스 결합을 하여 각각의 인터페이스를 탭 인터페이스로 구성한다.

import gradio as gr

def display(text):
  return text

def display2(text):
  return text

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

app = gr.TabbedInterface([app1, app2], ["tab1", "tab2"])

app.launch()

실행화면:

◆  블록스(Blocks)

블록스는 그라디오에서 보다 유연하게 레이아웃을 구성하는데 사용된다. 블록스를 사용하면 보다 복잡한 UI 및 데이터 처리 등을 할 수 있다.

import gradio as gr

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(display, inputs=text1, outputs=text2)
  
app.launch()

실행화면:

블록스를 생성할 때는 다음과 같은 명령어를 사용해야 한다.

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

import gradio as gr
from PIL import Image

# 이미지 표시 함수
def show_image(img):
    return img

# 텍스트 변환 함수
def process_text(text):
    return text.upper()

# Gradio Blocks UI
with gr.Blocks() as demo:
    gr.Markdown("## Gradio Blocks 예제: 이미지 & 텍스트 처리")

    with gr.Tabs():
        with gr.Tab("이미지 업로드"):
            img_input = gr.Image(type="pil", label="이미지를 업로드하세요")
            img_output = gr.Image(label="출력 이미지")
            img_button = gr.Button("이미지 표시")
            img_button.click(show_image, inputs=img_input, outputs=img_output)

        with gr.Tab("텍스트 변환"):
            txt_input = gr.Textbox(label="텍스트 입력")
            txt_output = gr.Textbox(label="변환된 텍스트", interactive=False)
            txt_button = gr.Button("대문자로 변환")
            txt_button.click(process_text, inputs=txt_input, outputs=txt_output)

# 실행
demo.launch()

실행 결과:

이 코드의 UI는 두 개의 탭으로 나뉘어 있다.

1. "이미지 업로드" 탭에서는 사용자가 이미지를 업로드하고 버튼을 누르면 이미지가 표시된다.
2. "텍스트 변환" 탭에서는 사용자가 텍스트를 입력하고 버튼을 누르면 입력값이 대문자로 변환된다.

이처럼 Blocks를 사용하면 탭, 버튼 이벤트, 다양한 입력 및 출력 요소를 손쉽게 구성할 수 있다. 🎨✨

◆ 챗 인터페이스

그라디오에서 챗봇을 구현할 때 사용한다. 챗봇을 만들때는 대화를 보여 주는 디스플레이와 대화를 입력하는 창 그리고 대화를 전송하는 창 등 많은 레이아웃 및 컴포넌트를 구성해야 한다. 이러한 것을 한꺼번에 지원해주는 것이 챗인터페이스이다. 챗인터페이스는 기본 기능이 있는 간단한 챗봇을 빠르게 만들 수 있다.

import gradio as gr

def display(message, history):
  return message

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

gr.ChatInterface()는 메세지를 입력 받아 클릭하였을때 호출되는 함수 display와 챗봇상단에 표시할 타이틀을 매개변수로 받는다.

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

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

import gradio as gr

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

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

 

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

 

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