[WEB+AI] 16일차 Gradio 복습

Gradio 복습

 

강사: 이주화님

 

1. Gradio

  : Gradio는 Python으로 개발된 오픈 소스 패키지이다.

 

2. Graio 설치

!pip install gradio

 

3. Graio 앱 실행

import gradio as gr

def user_greeting(name):
    return "안녕하세요! " + name + " 님, Gradio 앱 실행"

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

app.launch()

 

 

4. Graio 인터페이스 클래스

 4.1. 개요

  -  Interface 클래스를 사용하면 함수와 ML 모델에 대한 GUI를 생성할 수 있음

  - Interface 클래스는 fn, inputs, outputs 등 세 가지 필수 매개변수를 가지고 있음

  - 하나 이상의 매개 변수를 가지며 하나 이상의 값을 반환하다.

 

---

 

참조 글: Gradio - docs

https://www.gradio.app/docs

---

 

 4.2. Multiful Interface

  - A TabbedInterface is created by providing a list of Interfaces or Blocks, each of which gets rendered in a separate tab.

 

import gradio as gr

title = "Multiple Interfaces"

#앱 1
def user_greeting(name):
    return "안녕하세요! " + name + "님, Gradio 애플리케이션에 오신 것을 환영합니다!"

#앱 2
def user_help(do):
    return "오늘은 " + do + "를 할 예정입니다. 멋진 선택이에요!"

#인터페이스 1
app1 =  gr.Interface(fn=user_greeting, inputs="text", outputs="text")
#인터페이스 2
app2 =  gr.Interface(fn=user_help, inputs="text", outputs="text")

# TabbedInterface Parameters
# interface_list: list[Blocks]
# tab_names: list[str]
app = gr.TabbedInterface([app1, app2], ["환영", "할 일"])

app.launch()

 

 

 

5. Gradio 컴포넌트

  - Gradio에는 다양한 기능을 위한 미리 구축된 컴포넌트들이 있음

 

 5.1. Gradio에서 Text 출력

 

import gradio as gr

def text_display(text):
    return text

app = gr.Interface(text_display, gr.Text(), "text")

app.launch()

 

 

 5.2. Gradio에서 데이터 출력

  : "str", "number", "bool", "date", "markdown"과 같은 데이터 유형을 Gradio에서 표시할 수 있음

  - This component displays a table of value spreadsheet-like component.

 

import gradio as gr

def data_display(input_img):
    return input_img

app = gr.Interface(data_display, gr.DataFrame(), "dataframe")

app.launch()

 

 

 

 5.3. Gradio에서 미디어 출력

  : Gradio에서 이미지와 같은 미디어를 표시할 수 있음.

 

  5.3.1. 파란색 색조 필터를 적용한 이미지 시각화

import numpy as np
import gradio as gr

def blue_hue(input_img):
    blue_hue_filter = np.array([
            [0.272, 0.534, 0.131], 
            [0.349, 0.686, 0.168],
            [0.393, 0.769, 0.189]])
    blue_hue_img = input_img.dot(blue_hue_filter.T)
    blue_hue_img /= blue_hue_img.max()
    return blue_hue_img

app = gr.Interface(blue_hue, gr.Image(), "image")

app.launch()

 

 

  - input_img.dot(blue_hue_filter.T)는 입력 이미지에 필터를 적용하는 부분입니다. 

  - .dot() 연산은 필터를 각 픽셀에 적용하여 새로운 색조 이미지를 생성합니다.

  - blue_hue_filter.T는 blue_hue_filter 행렬의 *전치 행렬을 사용하여 색상 변환이 올바르게 이루어지도록 합니다.
  - blue_hue_img.max()로 이미지의 최대값을 구한 후, 모든 값을 그 최대값으로 나누어 0에서 1 사이의 값으로 제한합니다. 이 과정은 이미지를 시각적으로 안정적으로 보여주기 위함입니다.

 

* 전치 행렬

  : 행과 열을 서로 바꾼 행렬을 의미함.

  - 전치 행렬은 벡터의 방향을 바꾸거나 행렬의 특정 연산을 수행할 때 자주 사용됨.

  - 전치 행렬은 데이터 변환이나 이미지 필터링과 같은 연산에서도 유용하게 쓰입니다.

 

 

  5.3.2. Gradio에서 Video 출력

import gradio as gr

def video_display(input_img):
    return input_img
    
app = gr.Interface(video_display, gr.Video(), "video")

app.launch()

 

 

 

 5.4 Gradio에서 코드 표시하기

import gradio as gr

# 코드 정의하기
# 리스트의 평균
code = '''
def cal_average(numbers):
    sum_number = 0
    for t in numbers:
        sum_number = sum_number + t

    average = sum_number / len(numbers)
    return average
'''

with gr.Blocks() as app:
    gr.Textbox(code)

app.launch()

 

 

 5.5. Gradio에서 차트 표시하기

   5.5.1. gradio.Plot() 컴포넌트를 사용하여 표시함.

 

import gradio as gr
import plotly.express as px
import pandas as pd

def plotly_plot():
    # 데이터 준비
    x = ["국어", "수학", "사회", "과학", "영어"]
    y = [68, 73, 82, 74, 85]
    data = pd.DataFrame()
    data['과목'] = x
    data['점수'] = y
    # 새로운 차트 생성
    p = px.bar(data, x='과목', y='점수')
    return p

# 결과 표시
app = gr.Interface(fn=plotly_plot, inputs=None, outputs=gr.Plot())

app.launch()

 

 

  5.5.2. Metplotlib

import gradio as gr
import matplotlib.pyplot as plt

def plt_plot():
    # 데이터 준비
    x = ["국어", "수학", "사회", "과학", "영어"]
    y = [68, 73, 82, 74, 85]
    # 새로운 차트 생성
    plt.rcParams['figure.figsize'] = 6,4
    fig = plt.figure()
    ax = fig.add_axes([0,0,1,1])
    ax.bar(x, y)
    plt.title("과목별 점수")
    plt.xlabel("과목")
    plt.ylabel("점수")

    return fig

# 결과 표시
outputs = gr.Plot()

app = gr.Interface(fn=plt_plot, inputs=None, outputs=outputs)

app.launch()

 

 

  - 한글 깨짐 수정 필요(ChatGPT 문의)

 

 5.6. Gradio 이벤트 리스너

 

import gradio as gr

def welcome(name):
    return f"Welcome back, {name}!"

with gr.Blocks() as app:
    gr.Markdown(
    """
    무언가를 입력하면 결과를 확인할 수 있다.
    """)
    inp = gr.Textbox(placeholder="이름을 입력하세요")
    out = gr.Textbox()
    inp.change(welcome, inp, out)

app.launch()

 

 

5.7. Gradio 스트리밍 컴포넌트

import gradio as gr
import numpy as np

def flip(im):
    return np.flipud(im) # 화면 똑바로 보이게 할려면, return im

app = gr.Interface(
    flip, 
    gr.Image(sources=["webcam"], streaming=True), 
    "image",
    live=True
)

app.launch()

 

  - 웹캠으로 화면 스트리밍 

 

---

 

6. Gradio 상호작용 컴포넌트

 6.1. Button

import gradio as gr
import os

def combine(a, b):
    return "안녕하세요! " + a + " " + b + " 환영합니다!"

with gr.Blocks() as app:

    txt = gr.Textbox(label="이름", lines=2)
    txt_2 = gr.Textbox(label="성")
    txt_3 = gr.Textbox(value="", label="결과")
    btn = gr.Button(value="제출")
    btn.click(combine, inputs=[txt, txt_2], outputs=[txt_3])

app.launch()

 

 

 

 6.2. Checkbox

import gradio as gr

def sentence_builder(action):
    return f"""{'액션 영화' if action else '코미디 영화'}를 보는 것을 추천드립니다."""

app = gr.Interface(
    sentence_builder,
    [
        gr.Checkbox(label="액션 영화를 좋아하시나요?"),
    ],
    "text")

app.launch()

 

 

 

 6.3. Select box(Radio button)

import gradio as gr

def meal_planner(time_of_day, meal_options):
    return f"{time_of_day}에는 {' 그리고 '.join(meal_options)}을(를) 드세요."

app = gr.Interface(
    meal_planner,
    [
        gr.Radio(["아침", "점심", "저녁"], label="어느 시간대인가요?"),
        gr.CheckboxGroup(["토스트", "샌드위치", "과일", "샐러드", "스테이크", "파스타", "초밥", "치킨", "피자", "떡볶이"], label="음식을 선택하세요."),
    ],
    "text")

app.launch()

 

 

  6.4. Gradio - Date input

import gradio as gr
import datetime
import pytz

# 한국 시간대 설정
def get_korea_time():
    korea_timezone = pytz.timezone("Asia/Seoul")
    korea_time = datetime.datetime.now(korea_timezone)
    return korea_time.strftime("%Y-%m-%d %H:%M:%S")

with gr.Blocks() as app:
    gr.Textbox(get_korea_time)

app.launch()

# default time(현재 시간) 
# with gr.Blocks() as app:
#     gr.Textbox(datetime.datetime.now)

 

---

with 구문을 사용해야 하는가?

• 중첩 구조: 여러 개의 UI 컴포넌트(예: 텍스트 박스, 버튼 등)를 그룹화하거나 레이아웃을 지정할 때 with 구문을 사용하면 가독성이 좋아집니다.
• 자동 추가: with 블록 내부에서 선언된 모든 UI 요소는 자동으로 Blocks 객체에 추가되므로, 별도로 연결 작업을 하지 않아도 됩니다.

---

 

 6.5. Color Picker

# pip install opencv-python
import gradio as gr
import cv2
import numpy as np
import random

# 10진수 색상을 16진수 색상으로 변환
def RGB_to_Hex(rgb):
    color = "#"
    for i in rgb:
        num = int(i)
        color += str(hex(num))[-2:].replace("x", "0").upper()
    return color

# 랜덤하게 밝은 색상 또는 어두운 색상 생성
def gen_random_color(is_light=True):
    return (
        random.randint(0, 127) + int(is_light) * 128,
        random.randint(0, 127) + int(is_light) * 128,
        random.randint(0, 127) + int(is_light) * 128,
    )

def change_color(color_style):
    if color_style == "light":
        is_light = True
    elif color_style == "dark":
        is_light = False
    back_color_ = gen_random_color(is_light)  # 랜덤하게 색상 생성
    back_color = RGB_to_Hex(back_color_)  # 16진수로 변환

    # 색상 이미지 그리기
    w, h = 50, 50
    img = np.zeros((h, w, 3), np.uint8)
    cv2.rectangle(img, (0, 0), (w, h), back_color_, thickness=-1)

    return back_color, back_color, img

inputs = [gr.Radio(["light", "dark"], value="light")]

outputs = [
    gr.ColorPicker(label="색상"),
    gr.Textbox(label="16진수 색상"),
    gr.Image(type="numpy", label="색상 이미지"),
]

title = "랜덤 색상 생성기"
description = (
    "제출 버튼을 클릭하면 새로운 색상이 생성됩니다."
)

app = gr.Interface(
    fn=change_color,
    inputs=inputs,
    outputs=outputs,
    title=title,
    description=description,
)

if __name__ == "__main__":
    app.launch()

 

 

 

 

 6.6. Slider

import gradio as gr

def workout_planner(start_time, morning, exercise_list):
    return f"""{"오전" if morning else "오후"} {start_time}시에 {"과 함께 ".join(exercise_list)}을(를) 해보세요."""

app = gr.Interface(
    workout_planner,
    [   gr.Slider(1, 12, value=10, step = 1),
        gr.Checkbox(label="오전에 운동을 하시나요?"),
        gr.CheckboxGroup(["스트레칭", "유산소 운동", "근력 운동", "요가"]),
    ],
    "text")

if __name__ == "__main__":
    app.launch()

 

 

 6.7. Dropdown

import gradio as gr

def hobby_planner(hour, morning, hobby_list, watch):
    return f"""{"아침" if morning else "오후"} {hour}시에는 물 한 잔을 마시고 {" ".join(hobby_list)}를 하거나 {watch}를 감상하는 것이 좋습니다."""

app = gr.Interface(
    hobby_planner,
    [
        gr.Slider(1, 12, value=9, step=1),
        gr.Checkbox(label="오전에 취미 활동을 하시나요?"),
        gr.CheckboxGroup(["그림 그리기", "음악 듣기", "요리하기", "산책하기"]),
        gr.Dropdown(["TV 드라마", "영화", "다큐멘터리", "강의"]),
    ],
    "text")

if __name__ == "__main__":
    app.launch()

 

 

---

출처: AI Hub 교육과정 - WEB+AI (위 내용이 문제가 된다면 댓글에 남겨주세요. 바로 삭제조치하도록 하겠습니다.)