[python week 일지] # 5. 프로젝트 제작과 완성

제작 방식

코드 작성과 프로그램 실행은 동방 컴에서 하고 그 컴에 원격접속하기로 하였다. 때문에 구름 IDE를 사용할 필요가 없어졌고, 동방 컴의 로컬 환경에서 작업하였다. clip이라는 가상환경을 만들어 작업했다. 원격조정으로 코드를 짜본 것은 처음이라 싱기방기 했다.

 

나는 작성한 웹 컴포넌트를 기반으로 해서 HTML과 CSS 를 작성했다. 직접 HTML과 CSS를 작성해보니 Flask의 문법과 돌아가는 방식을 알아야 했다. 구글링 하던 중 마침 좋은 블로그를 발견했다.  https://blog.naver.com/dsz08082/221859049633 HTML과 Flask를 이용해 파일을 업로드하는 웹의 코드를 짠 블로그 글이다. 이 글을 토대로 코드를 작성했다. 

 

저번 글에서 Flask가 뭔지 사실 잘 이해를 못 했었는데 이제는 좀 더 구체적으로 이해했다. 다시 Flask가 뭔지 짚어보자.

Flask?

웹 개발에 사용되는 파이썬 프레임워크.

Flask와 자주 비교되는 것으로 그 유명한 장고(Django)가 있는데, 장고는 플라스크보다 더욱 무거운 프로그램을 개발할 때 사용하면 좋은 웹 프레임워크다. 플라스크는 간단한 프로그램 제작에 좋아서 금방 만들고자 하는 것을 만들 수 있다. 그니까 초보자에게는 플라스크를 해보고 익숙해지면 장고를 써보는 순서를 추천한다. 

 

플라스크를 사용하는 법은 간단하다.

1. 우선 플라스크를 사용할 프로젝트의 폴더에 가상환경을 만든다.

가상환경 관리에 아나콘다를 이용할 수도 있고, 그냥 기본적으로 제공되는 venv를 이용할 수 있다. 가상환경이라는 게 말은 거창하지만 사실은 하나의 프로젝트를 관리하는 폴더에 불과하다. 그 프로젝트 내의 생태계를 유지하기 위해 필요한 것들을 그 폴더에 때려 박는다고 생각하면 될 듯! (왜냠 버전 관리가 힘들거덩요) 이는 인터프리터 환경에서 만들 수 있다. 자세한 명령어에 대한 정보는 생략한다~ 그렇게 만들면 프로젝트 폴더 안에 가상환경 이름의 폴더가 하나 더 생성된다.

 

2. 가상환경에 플라스크를 설치한다. 

가상환경의 cmd에서 pip install Flask를 치면 된다. 그리고 가상환경 폴더 내에 app.py라는 파일을 만들어 보자.

from flask import Flask	#1


app = Flask(__name__) #2


@app.route('/') #3
def home():
	return 'Hello, World!'


if __name__ == '__main__': #4
	app.run(debug=True)

이렇게 넣으면 된다.

#1. flask 에서 Flask를 불러온다.

#2. 

#3. @는 라우팅을 해주는 파이썬 데코레이터다. Flask에서는 URL을 방문할 때 준비된 함수가 실행되도록 하기 위해 route()를 사용한다. 

 

이런 식으로 진행하면 된다. 자세한 설명은 아래의 블로그 글을 참조하자.

 

1. http://hleecaster.com/flask-introduction/
2. http://hleecaster.com/python-venv/

3. http://hleecaster.com/flask-introduction/
4. http://hleecaster.com/flask-jinja2/

 

HTML을 작성할 때 특히 유의해야 할 사항이 있다면, flask 내 HTML 문서의 문법은 일반적인 HTML 문서의 문법과 차이가 있다는 것이다. Flaks에서는 jinja2라는 템플릿 엔진을 사용해서 HTML 파일에 변수, 반복문, 조건문은 작성할 수 있다. 가장 대표적으로 변수는 이렇게 적는다. {{ 변수명 }}

 

Flask 설명은 여기까지로 하자.

---

본격적으로 프로그램 코딩

우리 프로젝트의 코드 구조는 이렇다. 이런 것도 처음 작성해봤는데 정리가 잘 되고 좋았다.

 

📂CLIP_Web_Project​

|📂static​

|----📂css​

|        |----📄setting.css​

|        |----📄container.css​

|        |----📄btn.css​

|----📂image​

|📂templates​

|----📄index.html​

|----📄correct.html​

|----📄wrong.html​

|📄 flask_main.py​

|📄 model.py​

 

AI 모델과 Flask 코드의 큰 틀은 선배가 우선 짜셨다. 난 그동안 HTML과 CSS를 작성했다. 최대한 짜놓은 컴포넌트대로 만들었다. 그리고 특이한 jinja2 문법을 살펴보았다. http://hleecaster.com/flask-form/ 이 글 참고~ 호우 신기하다. GET, POST 개념이 특히 신기했다. 앞서 소개한 파일 업로드 웹 블로그의 코드를 참고하여 코드를 작성하였다. 그렇게 다 완성을 한 후 선배가 만든 코드에 내 코드도 합쳤다. 

링크 연결도 직접 해보라고 하셔서 해보았다. 다른 건 잘 사용할 줄 모르겠어서 a 태그 + 상대경로를 이용한 코드를 썼다. 

<a href="../" class="replay_txt">Replay?</a>

요로케! 

코드에 대해 모르는 부분은 열심히 구글링 했다. 다른 코드에 대한 설명은 생략하겠다. 

 

오류 검토

그 밖에 필요한 코드를 모두 작성하고 선배와 함께 오류 검토를 했다. 뜨앗 그런데 업로드한 사진과 다른 사진이 화면에 나타나는 오류를 발견하였다. 왜 그런가 했더니 아마 파일을 받아오는 방식 때문인 것 같았다. 

방식이 업로드도니 파일을 로컬에 있는 별개의 폴더에 저장한 후, 사용할 때 다시 그 폴더에서 꺼내오는 방식이다. 그러다보니 다른 폴더에 있던 파일을 가져오더라도 파일명이 같으면 두 파일을 구분을 못 하는 것이다.

그런데 사진이 들어있는 폴더를 다 지우고 실행해보아도 이 문제가 고쳐지지 않았다. 

이것에 대한 해결책은 선배가 도와주셨는데 그 원인은 파로 브라우저의 cache에 이미지 파일이 저장되어 있기 때문에 로컬 폴더에서 삭제해도 계속 기록이 남아있다는 것이었다. 실제로 브라우저의 cache를 삭제한 후 실행해보니 잘 되었다.

파일 이름이 같은 것에 대해 근본적인 해결을 못 한 것은 아쉽지만 우선 그건 사용자가 주의하는 것으로 하고 프로젝트를 마무리 지었다.

 

프로젝트 완성! 

https://github.com/Jiyajiwon/CLIP_Web_Project

GitHub - Jiyajiwon/CLIP_Web_Project

완성본을 깃허브에 업로드 했다. (난 포크해왔다.) 뿌듯뿌듯하다.

 

https://github.com/sejongsmarcle/2021_Summer_Python_Week/tree/main/2%ED%8C%80

GitHub - sejongsmarcle/2021_Summer_Python_Week: 2021 여름방학 SMARCLE Python Week 결과물 레포지토리

위의 주소에서는 발표 자료와 함께 더욱 자세한 활동 내용을 볼 수 있다.

 

활동 소개 

AI를 활용한 웹 서비스, Give me the same pic!

Flask와 PyTorch를 이용하여 제작한 웹 기반 AI 서비스입니다. OpenAI의 CLIP 모델을 구현하였습니다.
웹은 사용자에게 랜덤의 이미지를 제시하고, 사용자는 웹에 사진을 업로드합니다. CLIP 모델은 사용자가 업로드한 이미지의 class를 예측합니다. Flask에서 사용자가 업로드한 이미지의 예측 class가 웹이 제시한 이미지의 class와 일치하는지를 판단한 후, 그 결과를 웹에 보여줍니다.

활동 소감 

AI를 공부해보고 싶었지만 어떤 것부터 시작해야 할 지 감이 안 왔습니다. 이번에 좋은 기회로 AI를 직접 사용해 보았고 모르는 것은 시행착오를 겪으며 깨달았습니다. 조금은 추상적이게 느껴졌던 AI를 조작해 보면서 구체화할 수 있었습니다. AI가 어떻게 이용되는지 그 흐름을 느끼고 흥미를 가지게 된 프로젝트였습니다. 또 방학 간 배웠던 웹을 통해 서비스를 만들며 웹의 유용함을 체감했습니다.
또한 현재 개발한 서비스는 1인 플레이지만, 백엔드 부분의 공부를 통해 다인 플레이로 만들면 재미있겠다는 생각을 했습니다. 후에 백엔드 쪽도 공부해보고 싶다는 생각이 들었습니다.

 

이렇게 파이썬 위크를 마무리 하였다. 좋은 경험이었다!