분류 전체보기 (30) 썸네일형 리스트형 [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.. [iGPT] Version 1.0.0 구현 내용 1. gpt-3.5-turbo-0301 사용 2. iMessage Theme 적용 To Do 1. API 키 보호 방법 찾기 2. 새로고침 또는 재접속시에도 이전 채팅 내용 유지 3. 한글 입력 시 입력창에서 글자 깨짐 현상 해결 4. Enter 키 입력으로도 메시지 전송 기능 구현 5. Text 모양 말풍선 형태로 구현 6. GPT 대답 기다리는 동안 loading widget 구현 Flutter + Github Page + Github Actions로 ChatGPT 웹 프로젝트 시작 내가 연구해서 만든 자연어 모델을 서빙하기 위해 시작한 Flutter 일단은 기존 ChatGPT API를 활용한 간단한 서비스를 만들어봤다. 우선은 가비아에서 도메인을 구매 내 이름 영어 스펠링인 Min Dongwook에서 욱(Wook)을 UK로도 쓰는거에서 아이디어를 얻어서 mindong.uk로 구매했다. 그 후 기존 ChatGPT에서 아쉬웠던게 Chat과는 좀 거리가 있는 UI여서 그 부분을 수정해서 Chatting 스타일로 UI를 구성했다. 전체적인 컨셉은 iOS의 iMessage 모든 코드는 Flutter를 사용해서 만들었으며 Github Actions을 이용하여 자동으로 빌드 및 배포하도록 작성하였다. 간단한 구조는 Flutter 코드를 수정 후 push하면 Actions에서 위 사진의 work.. [스파르타 코딩클럽] 플러터 강의 2주차 2주차는 레이아웃을 활용하는 방법을 주로 배웠다. Row와 Column을 적절하게 사용해서 이미지와 텍스트를 적절하게 배치하여 시인성과 가독성이 좋은 UI를 만드는 것이 핵심이었다. 위 그림과 같이 Row와 Column안에 또 다른 Row와 Column을 넣어주고 거기에 아이콘과 텍스트를 적절하게 배치하면서 Padding과 Margin 등을 적용하고 ListView, GridView 등을 사용하면 더 편리한 UI를 만들 수 있다. 내가 만든 2주차 과제 Shazam 클론 코딩 https://dartpad.dev/?id=23221bab123f4bc761c0f46270c18f3d DartPad dartpad.dev 가장 어려웠던건 차트의 버튼을 누르게 만들고 하나가 눌리면 다른 하나는 풀리게 만들고 그에 따.. [스파르타 코딩클럽] 플러터 강의 1주차 이 강의를 듣게 된 이유는 AI 모델 혹은 기존 모델의 API를 활용해서 서비스를 만들고 싶어졌고 그래서 웹, 앱 모두 개발 가능한 언어를 배우고 싶어서였다. 공식 도큐먼트 혹은 책을 사서 배울 수도 있었지만 실제 예제를 따라하면서 만들면 더 퀄리티 높은 결과물을 만들 수 있을 것 같아서 인터넷 강의를 선택했고 마침 적절한 플러터 강의가 있어서 수강하게 되었다. Flutter vs React Native 모두 사용해보지는 않았지만 어떤 언어들인지는 대충 알고있었기 때문에 고민이 많았다. 나는 C, Java는 학부에서 배웠지만 JS는 배우지 않았기 때문에 Dart를 사용하는 Flutter가 더 배우기 쉬울 것 같았다. 그리고 디자이너도 없는 상황에서는 완성도 높은 다양한 위젯을 제공해주는 플러터가 끌렸다... 바이오스 업데이트 후 게임 등 버벅임 문제 해결법 (라이저 케이블 유저) 결론: 라이저 케이블을 PCI 3.0 제품을 사용중이면 메인보드 설정에서 PCI 슬롯 버전을 Gen 3로 설정하기 오랜만에 바이오스를 업데이트 후 그래픽카드가 제대로 로드되지 않고 사용률이 낮게 유지되어 버벅임이 발생하는 현상이 생겼다. 그래서 해결하기 위해서 1. 이전 바이오스 버전으로 돌아가기 2. 최신 윈도우 업데이트 제거 3. 그래픽카드 드라이버 버전 낮추기 하지만 모두 해봐도 해결되지 않았는데 갑자기 든 생각이 예전 조립할 때 라이저 케이블을 사용해서 그래픽카드를 장착했던 것이었다. 그당시 메인보드와 그래픽카드 모두 PCI 4.0을 지원했는데 라이저 케이블은 PCI 4.0을 지원하는 제품이 없어서 어쩔 수 없이 PCI 3.0 제품으로 장착했었고 바이오스에서 PCI 1번 슬롯을 Gen 3로 설정해.. 이전 1 2 3 다음
