SW bootcamp PART.개인 Project 3주차(flask 서버 구축, streamlit)

서론

2주차는 플라스크를 이용하여 웹 서비스를 개발해보고 감을 익히는 단계였습니다. 3주차에서는 플라스크와는 다른 방식으로 웹 서비스를 개발해보고 배포까지 해보도록 하겠습니다. 이 과정에서 2주차에 배운 플라스크를 AI에 친화적으로 만드는 것과 고도화 작업을 같이 진행하겠습니다.

 

또한 2주차까지는 백엔드반 진도에 맞게 진행하였지만 3주차부터는 인공지능 수업도 병행하도록 하겠습니다.

 

본론

16일차

- 인공지능반

자연어 처리와 당뇨 예측 프로젝트 중 하나를 선택해서 진행합니다. 챗봇 데이터 형식은 2가지로 싱글턴은 Q: "오늘 날씨 어때?" / A : "추워요!"처럼 한 문장으로 주고 받는 데이터 형식입니다. 원래는 이 부분에 필요한 기술 스택이 쿠버네티스였는데 모든 교육생 분들이 듣기에는 벅찬 부분일 수 있어서 나중에 지원자를 받아서 교육을 진행합니다. 따라서 이번에는 이전에 배운 깃, 도커를 동일하게 사용하여 프로젝트를 진행하면 됩니다.

 

 

- 백엔드반

AI 서비스 배포하기 with streamlit

스트림릿이라는 '라이브러리'를 사용하여 AI 서비스를 배포해보겠습니다. 스트림릿 튜토리얼을 진행하겠습니다.(라이브러리라는 사실이 중요합니다! 실제로 import하여 사용합니다.)

 

=> 스트림 릿 튜토리얼

스트림릿을 왜 알아야할까요? 저번주에 플라스크를 봤었는데 여러 기능을 조합해서 하나의 서비스를 돌리기에는 좋았지만, 어떤 간단한 서비스 하나만 데모 페이지로 만드려고 할 때 굳이 그렇게까지 해야하나 생각할 수 있습니다. 이럴 때 간편하게 쓸 수 있는 아이템이 스트림릿입니다.

 

-> 예시

웹 사이트를 호스팅하기 위해 플라스크로 해당 기능을 만들었습니다. localhost:5000에 해당 서비스가 동작을 했었습니다. 근데 이러면 다른 사용자는 사용할 수 없었고 standalone이라서 로컬에서만 동작할 수 있었습니다. 이 내용을 사용할 수 있게 만들어주는게 ngrok였습니다. 근데 ngrok를 사용하려면 관리자 키를 받고 라이브러리를 설치하는 등 복잡했습니다.

관리자 허용을 받은 후에 ngrok 5000이라고 하면 해당 로컬 호스트에 5000번 포트의 사이트를 우회해서 외부에서 접속할 수 있도록 할 수 있습니다.

 

 

-> 문제점

위처럼 할 수도 있지만 로컬에서 돌아가기 때문에 한계가 있을 수밖에 없습니다. 컴퓨터를 끄면 서버가 돌아갈 수 없다는 것입니다. 

> 그래서 이런 서비스를 배포하기 위해서는 우리가 끄지 않을 온라인 서비스를 켜놓고 그 서비스를 이용하여 호스팅을 해볼 수 있겠고 그런 무료 서버를 제공해주는게 AWS 등이 있지만 점점 유료화되고 있습니다. 그런 와중에도 무료로 배포할 수 있도록 해주는 게 있고 그 중 하나가 스트림릿입니다.

 

-> 스트림릿 설치

이 또한 가상환경에서 진행합니다. 스트림릿을 라이브러리이기 때문에 가상환경으로 하면 설치하고 지우기가 너무 쉽습니다. 가상환경을 stream_lit으로 만들고 실행합니다. 

 

import streamlit as st

st.markdown('''
# Avocado Prices dashboard

테스트용 데시보드를 만들어봅시다.
Data source: [kaggle](https://www.kaggle.com/datasets/timmate/avocado-prices-2020)
''')

그리고 app.py를 만들고 스트림릿을 임포트하고 마크다운을 작성합니다. 스트림릿(st) 문법은 다양하고 마크다운을 사용할 수 있습니다. 이 또한 간단하게 웹을 호스팅해주는 라이브러리이기 때문이라고 생각합니다.

 

이제 실행하면 결과가 뜹니다. 로컬 URL과 network URL로 들어가서 볼 수 있습니다!

 

 

=> 본격적으로 캐글 데이터 활용 서비스 구현

 

1. 표 그리기

import streamlit as st
import pandas as pd

st.markdown('''
# Avocado Prices dashboard

테스트용 데시보드를 만들어봅시다.
Data source: [kaggle](https://www.kaggle.com/datasets/timmate/avocado-prices-2020)
''')


avocado = pd.read_csv("avocado.csv")
table = avocado.groupby("type").mean()
st.dataframe(table)

 

 

아보카도.csv를 다운 받고 csv를 플젝에 넣습니다. 해당 내용을 표로 웹으로 그려볼 수 있습니다. 결과를 보면 정말 간편하게 데이터를 웹에서 다룰 수 있습니다!

 

 

2. 시각화 해보기

avocado = pd.read_csv("avocado.csv")
table = avocado.groupby("type").mean()
st.dataframe(table)

line_fig = px.line(
    avocado[avocado['geography'] == "Los Angeles"],
    x = "date", y = "average_price",
    color = "type",
    title = "Test dashboard"
)

st.plotly_chart(line_fig)

시각화를 하기 위해 plotly 라이브러리를 설치하였습니다. plotly로 라인 차트를 그릴 수 있습니다. ★ 보면 무언가를 처리를 하고 변수에 저장을 한 후에 st의 메소드의 인자로 보내는 것이 문법 규칙으로 보입니다.

 

3. 플라스크와 비슷하게 웹 구현 해보기

selected_geo = st.selectbox(label="Geography", options = avocado["geography"].unique())
submitted = st.button("submit")

if(submitted):
    line_fig = px.line(
        avocado[avocado['geography'] == "Los Angeles"],
        x = "date", y = "average_price",
        color = "type",
        title = "Test dashboard"
    )

    st.plotly_chart(line_fig)

select 박스를 둬서 csv의 특정 컬럼을 선택하고 제출하면 선택한 컬럼의 그래프가 나오도록 했습니다. > 스트림릿은 파이써닉해서 selected_geo 변수에 대입을 한 후  st의 버튼을 만들고 if문으로 submit이라는 버튼이 눌리면 위에 라인 차트가 나오게 할 수 있습니다. 정말로 1시간 강의 들으면 웹을 구현하고 배포까지 할 수 있는 시대가 왔습니다.

 

※ 좋은 점

1. 플라스크와는 다르게 라우트를 안 해도 웹 기능을 구현 할 수 있도록 난이도를 낮추는 툴입니다. 

2. 외부에서 접속할 수 있게 도와준 것!

우측상단에 메뉴바가 있고 deploy this app이 있습니다. 조건을 만족하면 배포가 가능하며 플라스크보다 훨씬 쉽게 외부에 배포가 가능합니다. > 배포를 위해서는 조건이 있습니다. 레포를 만들고 내 폴더랑 연결하여 레포의 Hook으로 스트림 릿 서버와 외부 사용자의 접근이 가능합니다.

 

 

 

 

 

- 나만의 AI 서비스 구현

이제는 앞에서 배운 플라스크와 스트림릿을 활용하여 AI 친화적인 웹 서비스를 구현해보고 배포해 보도록 하겠습니다. 프로젝트 주제는 아래 2개입니다.

 

- sketch2fashion

동아리 프로젝트를 웹으로 서버 개발까지 해보도록 하겠습니다.

 

-> 세부 목표

1) 개발환경 셋팅
2) 이미지 업로드
3) 업로드한 이미지 채색
4) 채색한 이미지 ms api 입력

=> 프로젝트 시작
① 개발환경 셋팅

아래 느낀점에서 말씀드린 것처럼 가상환경을 venv 폴더를 만들어 따로 관리하고 adv 프로젝트 폴더에는 코드들만 존재하도록 했습니다.

 

flask run으로 웹 어플리케이션을 실행하면 5000번 포트로 연결됩니다. __init__.py가 있는 폴더에서 flask를 실행합니다.

 

이를 외부로 공개하기 위해 ngrok를 사용했습니다. 공식 홈페이지의 순서에 맞춰 ngrok를 설치하고 연결합니다.

 

zip을 푼 ngrok 폴더에 가서 위 명령어로 실행을 하면 되는데 기본 포트가 80번입니다.

 

flask run으로 웹 어플리케이션을 실행하고 flask 포트번호에 맟춰 5000으로 실행하면 연결이 완료됩니다.

 

https 주소를 url에 입력하면 flask 웹 어플리케이션에 접속할 수 있습니다.

 

② 이미지 업로드

수업에서 배운 내용을 토대로 이미지 업로드 페이지와 라우팅 함수를 작성하였습니다.

 

③ 업로드한 이미지 채색

 

카테고리를 선택하여 카테고리에 맞는 모델을 로드하도록 함수를 작성하였습니다. 이미지 채색 버튼을 누르면 학습시킨 채색 모델이 채색 결과를 생성합니다.

 

④ 채색한 이미지 ms api 입력

이미지 검색 버튼을 누르면 ms 검색 결과를 보여줍니다.

 

 

- 느낀점 

가상환경

가상환경을 지금까지 프로젝트 안에 만들었습니다. 그러면 그때마다 깃허브에 가상환경 코드들이 같이 올라갔습니다. 이제 해답을 알았습니다. 가상환경은 venvs 폴더를 따로 만들고 가상 환경들을 따로 만들어 둡니다. 프로젝트 폴더에는 프로젝트 코드와 리소스들만 따로 있도록 합니다. conda가 이러한 형식으로 가상환경 리스트를 보면 따로 가상환경들이 나열되는 것을 알 수 있습니다.

 

 

 

- 알게된 사실

1. 플라스크로 jinja로 js처럼 할 수 있는데 html 변수로 리스트를 보내면 for문으로 요소 접근이 가능합니다. 반드시 {{}}를 붙여야합니다.