[Microsoft AI School 6기] 3/14(56일차) 정리 - Azure Open AI(5): RAG, Gradio
Azure Open AI 활용
Azure Open AI, AI Search - RAG - Gradio로 웹페이지 구성
웹 GUI 구성을 위한 프레임워크
CLI(Command Line Interface)를 통해서도 데이터분석 및 인공지능 모델을 활용할 수 있는 입/출력 처리를 할
수 있으나 사용의 편리성 등으로 GUI를 구성하는 것이 좋음
-> 이를 위해서 웹 기반의 GUI를 구성하는 것이 확장성 등 여러가지 면에서 장점이 있음
Python 기반 Web Framework
Python을 기반으로 하는 대표적인 Web Framework으로는 django와 flask가 있다
django에 비해서 flask는 경량 web framework으로 상대적으로 사용하기 용이하지만, machine learning이나 data science 분야에서는 이에 더 특화된 gradio나 streamlit 등이 존재
Gradio
Gradio는 머신 러닝 모델을 위한 사용자 인터페이스를 간단히 생성할 수 있게 해주는 오픈 소스 파이썬 라이브러리
개발자들은 프론트엔드 지식이 없어도 모델용 웹 기반 애플리케이션을 빠르게 구축하고 공유할 수 있음
- Hugging Face에서 Gradio를 인수하여 Huggingface에서는 간단하게 클릭만으로 Gradio 프로젝트를 배포하고 사용할 수 있음
Gradio 구성을 위한 버튼 관련 정보는 아래 링크에서 찾을 수 있다
https://www.gradio.app/docs/gradio/button
Gradio Docs
Gradio docs for using
www.gradio.app
Python으로 Gradio 기본 화면 구현
기본 출력 확인
share=True로 할 시 public URL을 받을 수 있다.
채팅 화면 기본 구현
전송 버튼 등 버튼과 프롬프트를 생성
scale을 통해 비율을 조절할 수 있다.
입력창구성
chatbot 에서 type = "messages"를 설정하면 message_list와 extend를 활용할 수 있다
tuple 형태로 하면 주석 처리를 안한 부분과 같다
이에 대한 결과를 보면, 전송을 클릭 시 아래와 같이 뜬다
만든 GPT 연결
여기서 outputs를 보면, click_send의 return 값이 histories, citation_list 2개이므로 차례로 chatbot, citation_textbox에 들어가게 된다
완성본
오늘의 간단한 후기
프론트엔드 작업이 생각보다 쉽지 않음을 다시금 깨닫게 되었다. gradio에는 높이를 조정해주는 변수가 없어서 css로 조정을 해야 했는데, 이 과정이 쉽지 않았다. 그래도 완성하니 뿌듯하고 확실히 시각적인 효과가 중요하다는 것을 알게 되었다. 옆의 참조를 마크 다운으로 조정할 수 있었으면 좋겠지만 Azure Search가 참조 content 순서를 임의대로 조절하기 때문에 하나씩 항목을 불러오는 것이 힘들었다.
출처
[1] Gradio, "Button - Gradio Documentation," *Gradio*, https://www.gradio.app/docs/gradio/button (accessed Mar. 14, 2025).
-If any problem for references, or any questions please contact me by comments.
-This content is only for recording my studies and personal profiles
일부 출처는 사진 내에 표기되어 있습니다
본문의 내용은 학습과 개인 profile 이외의 다른 목적이 없습니다
출처 관련 문제 있을 시 말씀 부탁드립니다
상업적인 용도로 사용하는 것을 금합니다
본문의 내용을 Elixirr 강의자료 내용(정종현)을 기반으로 제작되었습니다
깃허브 소스코드의 내용을 담고 있습니다
본문의 내용은 MS AI School 6기의 강의 자료 및 수업 내용을 담고 있습니다