[Flutter] TFLite 를 사용한 모바일 환경 딥러닝 모델 실행 방법 정리(HuggingFace MobileViT 이미지 분류기)
·
Programming/FrontEnd
- 이번 포스팅에선 음성인식, 객체 탐지, 이미지 분류, 이미지 검색, OCR 등 모바일 인디바이스 환경에서 처리할 수 있는 매력적인 기능들을 구현하기 위한 첫번째 스탭으로, 모바일에 딥러닝 모델을 올려서 실행하는 방법에 대해 정리하겠습니다. 1. HuggingFace 에서 사전 학습된 모델 가져오기2. 모바일 연동용 모델 변환3. 파인 튜닝의 필요성4. 모바일 연동 샘플 위와 같은 순서로 진행하겠습니다. (허깅 페이스에서 사전 학습된 모델 가져오기)- 모바일 디바이스는 아시다시피 PC 와 달리 굉장히 제한적인 환경입니다.반대로 딥러닝은 모델 종류에 따라 일반적인 PC 에서도 사용하기 어려울 수 있는 무거운 기술이고요.먼저, 개발할 기능을 설계할 때, 해당 기술이 현 시점의 모바일 환경에서 실행 가능할지..
[Flutter] 클라이언트 사이드 Database 사용 방법 정리(Drift ORM, SQLite Export/Import, DAO 분리 구조)
·
Programming/FrontEnd
- 오랜만에 Flutter 를 다루게 되어 이렇게 글을 올립니다.Flutter 에 대해서는 제 블로그에 거의 올리지 않았기에 먼저 기술 소개부터 드리자면,Flutter 는 모바일 앱(iOS, Android), 웹, PC 응용 프로그램(Linux, Windows, MacOS) 을 한번에 개발 가능한 만능 클라이언트 개발 프레임워크입니다. 빌드 결과물의 성능이 네이티브 응용 프로그램에 거의 뒤지지 않을 수준이므로,잘만 사용한다면 1인으로 모바일에서 웹까지, 클라이언트를 전부 맡아서 개발이 가능하다는 것(바이브 코딩도 곁들여서)과, 모듈화 및 프로젝트 구조화만 잘 한다면 서로 다른 플랫폼 배포 및 관리도 최소 비용으로 가능하다는 장점이 있습니다. - 이번 포스팅에서는 Flutter 를 사용하여 ClientSi..
ReactJS 컴포넌트 개발 방법론
·
Programming/FrontEnd
- 이번 포스팅에서는 ReactJS 프론트엔드의 개발 방법론에 대해 작성할 것입니다. 실습에 사용할 기술은, Typescript : JavaScript 에서 Type Safety 를 적용한 언어react-router-dom : 웹 페이지별 접근 주소를 설정하는 라이브러리axios : 클라이언트인 브라우저에서 서버로 네트워크 요청을 보내기 위한 라이브러리 크게 위와 같으며,상태 관리를 위한 라이브러리인 Redux 와 같은 기술은 사용하지 않지만,라이브러리에 의존하지 않고도 충분히 합리적인 상태 관리를 할 수 있는 방식을 준비하였습니다. https://github.com/RaillyLinker/ReactJs_Template위의 Github 프로젝트를 기반으로 설명할 것이므로 참고하세요. (컴포넌트란?)Re..
Flutter Web 포트번호 설정 + 휴대폰 혹은 다른 컴퓨터에서 접근하기
·
Programming/FrontEnd
- Flutter 웹 개발 후 IDE 로 실행을 하면 할때마다 포트번호가 다르게 설정이 됩니다.예를들어 포트번호를 8081 로 하고싶다면, 위와 같이 실행환경 설정에서 Additional run args 안에 --web-port=8081 를 추가하면 됩니다. - 웹 프로그램을 실행하고, 같은 컴퓨터의 웹브라우저가 아니라, 휴대폰의 웹브라우저로 접속해서 동작을 확인하고 싶을 때가 있을 수 있습니다. 그럴때는, 커맨드 창을 열어서, ipconfig -all 과 같이 본인 ip 를 확인합니다.위에서 보이는 바와 같이 제 IP 주소는 192.168.0.11 이네요. 참고로, 198.168 로 시작하는 주소는 외부 IP 가 아니라 공유기와 같은 내부에서 할당되는 IP 이므로 위 IP 로 접속 가능한 것은 같은 ..