Toy Project (12) 썸네일형 리스트형 [iGPT] Version 2.0.0 구현 내용 1. GPT 4.0, DALL-E 3 추가 openAI에서 GPT 4를 업데이트하고 DALL-E도 3를 추가해줘서 오랜만에 추가해봤다. DALL-E 2에 비해서 훨씬 좋은 퀄리티를 보여준다. [iGPT] Version 1.3.0 구현 내용 1. Code를 작성해주는 AI 추가 구현 방법 text-davinci-003을 사용하여 구현 코드 작성에 최적화된 code-davinci-002가 있었지만 지금은 사용을 못하고 text-davinci-003으로 통합되었다. gpt-3.5와 text-davinci의 차이는 다음과 같은데 간단히 말해서 gpt-3.5는 가격이 저렴하고 text-davinci는 더 비싼대신 정확하고 길게 나온다. gpt-3.5의 결과는 앞뒤로 설명이 있고 text-davinci는 결과만 리턴해준다. 추구하는 결과에 따라서 모델을 선택하면 된다. 추가로 gpt-3.5의 결과는 markdown의 codeblock으로 나오는데 이를 보기좋게 출력하고 싶어서 flutter_markdown 패키지를 사용해봤다. 조금 더 이.. [iGPT] Version 1.2.0 구현 내용 1. 이미지를 생성해주는 iDall-E 추가 2. 사용자의 입력 문장을 ChatGPT로 영어로 변경하여 Dall-E에게 전송 3. iGPT, iDall-E를 선택 가능한 메인 화면 추가 구현 방법 Dall-E가 한글은 정상적으로 생성하지 못하는 이슈가 있어서 사용자의 message를 gpt-3.5에게 번역을 맡겨서 영어로 번역 후 Dall-E에게 전달한다. Dall-E API의 return 값은 url로 받기 때문에 Image.network를 사용해서 표시해줬다. 번역된 문장도 따로 저장 후 이미지와 같이 보여주어 어떤 문장이 Dall-E에 전달되었는지 알려준다. [iGPT] Version 1.1.1 구현 내용 1. 대화 내용을 드래그해서 복사를 가능하게 구현 구현 방법 채팅 내용을 보여주는 ListTile을 SelectionArea로 감싸서 구현 [iGPT] Version 1.1.0 구현 내용 1. 이전 대화 내용을 기억하고 답변 하도록 구현 2. 한국어로 대답하도록 설정 구현 방법 이전 대화를 반영하는 방법은 간단하다. 이전 대화도 같이 전달해주면 된다. messageList에는 유저의 대화와 ChatGPT의 답변이 순차적으로 들어가있다. 그래서 리스트에 대화 기록이 있으면 대화기록들을 messages 리스트에 user와 assistant로 교차해서 추가해주고 마지막에 유저가 입력한 내용까지 추가해줘서 api통신으로 전달할 data에 추가해준다. [iGPT] Version 1.0.5 구현 내용 1. 답변이 오는 동안 로딩 표시 구현 구현 방법 FutureBuild 사용 api를 호출하는 함수를 FutureBuild의 future에 등록 후 if문을 통해서 API 통신이 완료되면 snapshot.connectionsState의 값이 ConnectionState.done과 일치하여 내용을 표시 else에는 loading indicator를 작성하여 구현하였다. 사용한 패키지는 flutter_spinkit (https://pub.dev/packages/flutter_spinkit)을 사용하였다. iMessage과 유사한 3개의 점이 있는 ThreeBounce을 사용했다. [iGPT] Version 1.0.4 구현 내용 1. 채팅 내역을 지우는 버튼 생성 구현 방법 message를 관리하는 Provider 객체인 messageService에 List를 Clear하는 메소드를 추가 버튼 onPressed에 해당 메소드를 연결하여 구현했다. [iGPT] Version 1.0.3 구현 내용 1. Chat 메시지를 버블 형태로 변환 구현 방법 직접 구현하는 방법과 기존 패키지를 사용하는 방법이 있는데 이번에는 간편하게 후자를 선택 사용한 패키지는 chat_bubbles: https://pub.dev/packages/chat_bubbles chat_bubbles | Flutter Package Flutter chat bubble widgets, similar to Whatsapp and more shapes. Easy to use and implement chat bubbles. pub.dev 원하는 테마인 iMessage 테마도 지원하기 때문에 선택 구현 방법은 간단한데 text와 color에 원하는 글자와 배경색을 지정 가능하고 tail 옵션으로 말풍선 꼬리를 설정 가능 (iMe.. [iGPT] Version 1.0.2 구현 내용 1. 새로운 메시지가 수신되면 자동으로 스크롤이 맨 아래로 이동 구현 방법 Scroll을 관리해주는 ScrollController를 생성, 스크롤을 맨 아래로 이동해주는 _scrollToBottom 함수 생성 Scffold 구현 전에 WidgetsBindig으로 _scrollToBottom 함수 연결 ListView Controller에 _scrollController 추가 참고: https://stackoverflow.com/questions/56685732/flutter-how-to-create-list-view-autoscrolling --------------------------------------------------------------------------------------.. [iGPT] Version 1.0.1 구현 내용 1. 키보드가 아닌 부분 터치시 키보드 내려가게 구현 구현 방법 채팅과 입력 TextField가 있는 부분인 Column을 GestureDetector로 감싸서 구현 GestureDetector : https://api.flutter.dev/flutter/widgets/GestureDetector-class.html GestureDetector class - widgets library - Dart API A widget that detects gestures. Attempts to recognize gestures that correspond to its non-null callbacks. If this widget has a child, it defers to that child for i.. 이전 1 2 다음
