이번 포스팅에서는 Kivy를 이용해 UI를 만들고 그 안에서 GPT와 대화해보자
터미널에 실행하는 명령어일 경우
> 명령어
로 작성함.
Kivy란 무엇인고 하니..
간단히 말해서 Python으로 코드를 하나만 짜도 이 것을 이용해 Android, iOS, Windows, Linux 등에서 사용가능한 크로스 플랫폼 GUI를 만들어주는 "와! 오픈 소스! 무료 라이센스! 아무튼 개 쩐다!" 라고 할 수 있는 프레임워크이다.
무료로 제공되는 프레임워크인 만큼 여유가 되는 분들은 5$정도의 작지 않지만 작은 후원을 통해 Kivy를 도와줄 수 있으니 참고하세요~
https://kivy.org/doc/stable/gettingstarted/installation.html
코드를 작성하기 전에 설치해야 할 순서에 대해 잘 표기해주었으나 영어로 되어 있고, 가독성이 좋은 편은 아니라 이해가 어렵다면 포스팅을 보고 천천히 따라해보자.
Windows를 기준으로 작성했습니다.
그리고 파이썬은 들여쓰기가 정말 중요하므로, 놓치지 말고 똑같이 따라해주세요.
1. 우선 터미널을 관리자모드로 실행하고 Set-ExecutionPolicy RemoteSigned를 입력한 뒤 Y입력 후 엔터누르고 보안정책을 변경해준 뒤 종료
- 윈도우라면 윈도우키를 누르고 PowerShell이라고 검색한 뒤 오른쪽 클릭 -> 관리자모드로 실행
- 맥이라면 구글에.. (본인이 맥 경험이 없음 ,,ㅠㅠ)
2. https://visualstudio.microsoft.com/ko/visual-cpp-build-tools/ 해당 사이트에 들어가서 Build Tools Download를 클릭 해 다운로드를 진행 (이미 깔려있으면 건너뛰세요)
- 실행하고 설정해야한다 어쩌구하면 계속 클릭 후 잠시 대기
3. 설치 및 가상환경 설정 (터미널에 순서대로 따라 치자)
그 전에 터미널에서 pwd를 쳐보면 현재 경로가 어딘지 나온다. 만약 ...\.cursor-tutor 로 되어 있는지 확인하자. (혹은 본인이 지정한 워크스페이스)
> python -m pip install --upgrade pip setuptools virtualenv
> python -m venv {만들고 싶은 폴더명} (나는 kivy_test로 만들었음)
> {만든 폴더명}\Scripts\activate
혹시 linux나 mac이면 source {만든 폴더명}/bin/activate
> python -m pip install "kivy[full]" kivy_examples
나는 그냥 전체 패키지를 받으려고 full로 다운로드를 진행함. 이것도 시간이 좀 걸리니 대기
* mac이거나 linux면 https://kivy.org/doc/stable/gettingstarted/installation.html#from-source 이거 꼭 하세요
> python -m pip install --pre "kivy[base]" kivy_examples
> python {만든 폴더명}\share\kivy-examples\demo\showcase\main.py
을 실행하면 아래같은 화면이 나오는데, Kivy로 구현할 수 있는 GUI examples를 확인할 수 있다. 이것저것 클릭해보자,
> git clone https://github.com/kivy/kivy.git
- 디렉토리에 kivy라는 폴더가 새로 생기는데, kivy/examples/... 를 보면 각종 샘플들이 생성되어 있다. 따라 들어가 실행해보면 테스트 앱이 실행되니 이것저것 확인해보자.
* kivy/examples/widgets/recycleview/messenger.py 파일을 참고해 채팅 UI를 생성할 예정이다.
채팅 UI를 만들기 전 좀 더 Kivy에 익숙해지고 싶다면
https://kivy.org/doc/stable/tutorials/pong.html 해당 링크를 따라 튜토리얼을 진행해보면 된다.
자 이제 카톡같은(?) 채팅 UI를 만들어보자.
우선 터미널에서 새로운 프로젝트 폴더를 만든다.
> mkdir {원하는 폴더명}
-> 나는 chatting으로 생성
그러면 왼쪽 디렉토리에 새로운 폴더가 생긴다. 오른쪽 클릭하고 새로운 파이썬 파일을 만든다.
* 나중에 apk배포등을 위해 파일명은 꼭 main이어야 한다.
그리고 proejcts/python/.env 파일도 복사해온다.
비어있는 main.py에 kivy/examples/widgets/recycleview/messenger.py의 코드를 그대로 복사 붙여넣기 해보자.
그리고 ChatGPT를 사용하기 위해 저번 포스팅에서 했던 것처럼 라이브러리를 추가하자.
from openai import OpenAI
from dotenv import load_dotenv
import os
그리고 client를 생성해준다.
#env 정보 불러오기
load_dotenv()
#env에서 "OPENAI_API_KEY"를 가져와 api_key 변수를 넘겨 클라이언트 생성(gpt)
client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
우선 코드를 설명해보자면,
KV = ''' ''' 부분은 UI를 정의해놓은 마크업이라고 보면 된다.
그 후 MessengerApp이라는 class를 생성하는데, 이게 쉽게말해 프로그램 전체를 통틀어 묶어주는 틀이라고 보면 된다.
그 안에 def build(self): 를 통해 UI를 정의해놓은 마크업을 빌더로 불러오고
add_message()는 messages라는 배열(리스트)에 메세지를 차곡차곡 넣어주는 함수
update_message_size()는 메세지 칸의 크기를 update해주는 함수
focus_textinput()은 텍스트박스에 초점을 맞춰주는 함수
send_message()는 사용자가 텍스트박스에 입력한 메세지를 add해주는 함수
answer()은 대답을 add해주는 함수
scroll_bottom()은 스크롤을 가장 하단으로 내려주는 함수다.
Kivy의 레이아웃에 대해서는 따로 포스팅을 작성할 예정이므로 이에 대한 설명은 하지 않을 예정
그렇다면 우리가 AI와 소통하기 위해서는 answer() 함수를 수정해주어야 할 필요가 있다.
Cmd+L 또는 Ctrl+L 을 눌러 아래처럼 따라해보자.
멘션을 누르고 첫번째로는 지금 내가 수정하고 있는 파일을 선택하고 두번째로는 2탄에서 ChatGPT와 소통했었던 코드를 작성한 파일을 선택해주면 되는데, 파일명 오른쪽에 경로가 나오니 확인하고 선택하자.
질문 예시
@mention @mention 첫번째 mention코드의 answer 함수를 두번째 mention코드처럼 변경하고 싶어
AI가 생성해준 코드를 answer() 함수에 바꿔넣어준다. 그리고 실행해보면?
그런데 안타깝게도 이 상태로 실행하게 되면 한글이 지원되지 않는다. 한글이 되도록 수정해보자.
우선 한글 폰트가 필요한데, 무료 폰트중에 맘에 드는 것으로 저장해보자. 겸사겸사 보내기 버튼도 수정해볼까?
무료폰트 사이트
https://noonnu.cc/
나는 영덕대게체 다운받음 ㅎ ttf로
무료 아이콘 사이트
https://icons8.com/
enter, send 등등으로 검색해서 원하는 아이콘으로 40px로 다운로드 받자. 원하는 사이즈가 있다면 그 사이즈로 다운받아도 되고 아래에 height 및 size 값도 원하는 사이즈랑 똑같이 변경해준다.
69번째 줄을 보면 height: min(max(self.line_height, self.minimum_height), 150) 가 있는데 그냥 height: 40으로 바꿔준다.
그리고 76번째 줄을 보면 source: ' data/logo/kivy-icon-48.png' 가 있는데 이 부분을 다운로드 받은 파일로 바꿔준다.
-> source: 'icons8-enter-40.png'
70번째 줄, 97(or 96)번째 줄 에서 엔터로 한 줄 추가해 아래 코드를 추가하는데 ' '안에는 본인이 다운로드 받은 폰트로 넣으면 된다.
font_name: 'Yeongdeok Snow Crab.ttf'
저장하고 다시 한 번 실행해보면? 짜잔~~ 한글이 나온다.
다음 포스팅에서는 exe, apk로 빌드를 진행해보자.
다음 포스팅 (4탄 예정)
이전 포스팅 (2탄)
2024.01.19 - [파이썬] - 파이썬으로 ChatGPT와 대화하는 모바일 앱 만들어보기 2 [Python, OpenAI, Kivy, Cursor IDE]
