430.20 a

Description: This article covers Gradio quick tutorial from official docs.

#400#ML_Engineer_Basic#430#ML_Development_Tools#430.20#Gradio#430.20 a#Gradio_Quick_Tutorial
Gradio 공식 사이트 기초
gr.Interface(함수, inputs, outputs) 형태로 구성정보 설정
gr.launch()를 통해 배포

gr.Textbox, Slider, gr.Image 등의 다양한 컴퍼넌트들들통해 입력 및 출력가능

gr.ChatInterface를 통해 챗봇형 앱 제작 가능
Message와 history라는 인수를 받으며

message: str 입력
history 이차원 리스트 형태로 각 리스트는 [user input, bot response]형태로 이루어짐
ChatInterface는 인수가 반드시 요구되는 것은 아님

Block
좀 더 유연하게 커스터마이즈하기위한 method
with gr.block() as demo: 형태로 사용하며 한 페이지에서 여러 입력을 받기위한 다수의 블록을 설절한다던가, 클릭시 바로 실행되는 것이 아닌 어떤 함수로 필터링 한다던가, 또는 여러 탭을 구분하는 등의 gr.Interface에서 제공되는 고정된 UI/UX가 아닌 커스텀이 가능함

Example inputs
gr.Interface인수로 examls=[]형태의 인수를 통해 예시 테스트 가능

Alert
경고나 정보데공용 gr.Info , gr.Error등 제공

묘사 Component
화면구성은 title, description, article로 gr.Interface에서 수정 가능
추가로 대부분의 컴포넌트는 label 속성을 가지고 있음으로 활용한다면 표기이름 수정가능

Flagging
기본적으로 활성화돼있으며 flagged라는 폴더에 log파일과 입력 및 출력 파일들이 저장됨

Preprocessing postprocessing
Gradio가 이해하기 위한 형태로 데이터가 전처리가 되고, 후처리 과정을 통해 디스플레이에 출력함.
예를들어 gr.Image(shape=(100,100))과 같은경우 사용자는 아무 이미지나 입력하지만 preprocessing을 통해 100,100이미지로 변환

Ket features

Adding example inputs

gr.Interface에사 한번에 여러가지 예시입력을 받을 수 있음. examples=[] 형태로 사용

Passing custom error messages

gr.Info, gr.Warning, gr.Error를 통해 특정 상황에대한 Alert경고 가능

Adding descriptive content

gr.Interface에서 title이나 descrive, article을 통해 UI의 최상산,상단,하단에 설명 첨부 가능
추가적으로 대부분의 컴포넌트에 대해 label=인수를 통해 표기 이름 볔경 가능

Setting up flagging

기본적으로 True인 셋팅으로 flagged라는 폴더에 inputs,outputs이력이 저장됨. 이미지와같은경우도 해닽 파일이 저장됨. flagged_dir경로 수정을 통해 변경 가능

Preprocessing and postprocessing

Gradio함수가 이해할 수 있겠금 동작하는 잔처리과정과 후처리 과정이 있음.
예를 들어 gr.Image(shape=(100,100ty의 경우 사용자의 입력이미지와 관계없이 크기를 100,100으ㅗ 줄이는 전처리과정 수행.
후처리 과정은 이를 output으로내보냄

Styling demos

gr.themas. 형태로 다른사람이 민들어놓은 테마를 사용할 수 있음.
투가적으로 css등을 변경하거나 자신이 작성한 파일로 사용 가능

Queuing users

큐 기능처럼 담아놓고 처리가 가능. 이를 통해 heavy traffic에 안정적인 기능 유지가 가능. 만얃 interface에 사용하는 함수가 1분 이상일 경우 고려.
일부 심화기능은 해당 게능이 필수

Iterative outputs

Python의 yields
와 마찬가지로 반복되는 형태의 출력값 가능
예를 들어 특정 스텝별로 바뀌는 이미지를 보고 싶을 때 특정 스텝마다에 대한 출력형태로 반복구성

Progress bars

진행도를 바형태로 표기가능. gr.Progress 컴포넌트를 사용하며 구현시 파이썬의 tqdm함수로 구현

Batch functions

큐가 반드시 활성화된 상태에서
한 번에 여러 명령을 모았다가 병렬로 처리하여 실행시간을 줄일 수 있음. 예를들어 5초짜리 함수를 16번 한다면 80초가 걸리지만, (batch=True , max_batch_siza=16)과 같은 값을 통해 한 번실행하는 5초에 전부 처리가능

Running on collaborative notebooks

로컬환셩, 주피터노트북, ,구글 colab등 어느 환경에서든 구동 가능

Sharing demos with the share parameter

demo.launch(share=True)를 통해 72시간까지 제공되는 퍼블릭 링크를 제공. 종속성 문제x 디바이스에서 실행됨으로
단 sensetive한 데이터가 변경되면 위험한 경우 설정하면 위험

Hosting on HF Spaces

Hugging face에서 제공하는 space를 통해 다양한 방법으로 영구적인 호스팅 제공 . 3가지 방법이 있음.

  1. 허깅스페이스에서 생성 후 gradio deploy실행. 업데이트를 원하변 수동으로 터미널을 재실행하거나 ,re-run하는 곳을 git push시 자동화하도록 github action으로 구축가능
  2. 새 스페이스에 gradio 모델과 연관파일 전부가 들어가있는 폴더를 드래그 앤 드랍
  3. Github과 connect설정시 허깅페이스가 repo를 pull하는방식

Embedding hosted spaces

호스팅 이후에는 블로그나 포트폴리오 같은 특정 웹사이트에도 임베딩 할수가있다.
그럼 사용자 입장에서는 다운로드나 인스톨이 전혀 필요없다.
다음 2가지 방식을제공

  1. Web Component
  2. Iframe

Embedding with web components

<script
	type="module"
	src="https://gradio.s3-us-west-2.amazonaws.com/3.50.2/gradio.js"
></script>
  1. Add
<gradio-app src="https://$your_space_host.hf.space"></gradio-app>

src경로는 space의 embedded url 참고

<gradio-app
	src="https://abidlabs-pytorch-image-classifier.hf.space"
></gradio-app>

다음과 같은 형태도 가능

<gradio-app
	space="gradio/Echocardiogram-Segmentation"
	eager="true"
	initial_height="0px"
></gradio-app>

Iframe으로도 호출 가능

<iframe src="https://$your_space_host.hf.space"></iframe>

Using the API page

대부분의 gradio기능은 api기능 지원
사용방법은 다음을 참조
https://huggingface.co/spaces/gradio/hello_world

Adding authentication to the page

Password-protected app
튜플형태로 이름과 비밀번호 한 개 이상의 리스트로 이용자 제한 가능
demo.launch(auth=("admin","password1234"))

OAuth
아직 실험적인 기능으로 허깅스페이스에서만 가능
다음과 같은 형태로 hugginface의 로그인 아이디로 접속 인증

import gradio as gr


def hello(profile: gr.OAuthProfile | None) -> str:
    if profile is None:
        return "I don't know you."
    return f"Hello {profile.name}"


with gr.Blocks() as demo:
    gr.LoginButton()
    gr.LogoutButton()
    gr.Markdown().attach_load_event(hello, None)

개발단계에서는 gr.LoginButton이 mocked돼 있어 가짜 프로필이 자동으로 생성돼어 개발 및 테스트 가능

Accessing Network Requests

추가적인 정보를 UI클릭시이 가져올 수 있다

import gradio as gr

def echo(text, request: gr.Request):
    if request:
        print("Request headers dictionary:", request.headers)
        print("IP address:", request.client.host)
        print("Query parameters:", dict(request.query_params))
    return text

io = gr.Interface(echo, "textbox", "textbox").launch()

다음 함수에서 if로 체크하는 이유는 캐쉬나 다른 함수에의한 호출에도 None형태의 값이 반환 되기 때문에 체크 필요

Mounting within FastAPI

gr.mount_gradio_app 형태로 현재 실행중인 FastAPI와 연동이 가능.
같은 서버에서 실행되게 되며 8000번포트이서 fastapi가 실행이 되고,동일한 도메인의 custom path에서 실행됨
다음예시의 경우 http://localhost:8000/gradio
에서 실행

from fastapi import FastAPI
import gradio as gr

CUSTOM_PATH = "/gradio"

app = FastAPI()


@app.get("/")
def read_main():
    return {"message": "This is your main app"}


io = gr.Interface(lambda x: "Hello, " + x + "!", "textbox", "textbox")
app = gr.mount_gradio_app(app, io, path=CUSTOM_PATH)


# Run this from the terminal as you would normally start a FastAPI app: `uvicorn run:app`
# and navigate to http://localhost:8000/gradio in your browser

Security

기본적으로 gradio가 실행되는 디렉토리의 파일들에 대해서 접근 가능
Gradio가 임시로 만들어진 파일들에 대해 접근가능demo.launch에서 접근 허용을 명시한 파일들

이와 유사한 형태로 다름의 파일들에 대해서는 잡근이 가부된다.
로컬호스트의 다른 경로의 파일들
Dot을 포함한 파일들
demo.launch에서 명시적으로 접근 허용을 거부한 파일들

Reactive Interfaces

live=True