Beyond AI By Community
Flutter와 함께하는
ML 세상 탐험하기
Flutter와 ML이 만나다
Session 2 : Development Community
박제창 | aristojeff@gmail.com
github | @JAICHANGPARK
1
Slide 2
Slide 2 text
소개
Beyond AI By Community
박제창
@Dreamwalker
Dreamus Company
Flutter Seoul - Organizer
2
Slide 3
Slide 3 text
Beyond AI By Community
3
Slide 4
Slide 4 text
4
Beyond AI By Community
Slide 5
Slide 5 text
Beyond AI By Community
5
Slide 6
Slide 6 text
Beyond AI By Community
6
Slide 7
Slide 7 text
Beyond AI By Community
7
커뮤니티 소개
Slide 8
Slide 8 text
Beyond AI By Community
• ML 모델을 모바일 앱에서 사용해보고 싶으신분
• 개발된 Flutter 앱에 ML을 적용해보고 싶으신분
• Flutter에 관심이 있으신분
대상
8
Slide 9
Slide 9 text
Beyond AI By Community
Flutter로 ML(Machine Learning) 적용이 가능할까?
Flutter에 ML모델을 어떻게 사용하지?
어떻게 어디서부터 시작해야할지 모르겠어 🥹
목표
9
Slide 10
Slide 10 text
Beyond AI By Community
Flutter x ML(Machine Learning)
가이드 (가 되면 좋겠습니다..)
10
목표
Slide 11
Slide 11 text
Beyond AI By Community
Agenda
1. Flutter 개요
2. Platform Channel
3. 최신 Flutter ML 경향
4. ML Model 적용하기
11
Slide 12
Slide 12 text
1. Flutter 개요
Beyond AI By Community
12
Slide 13
Slide 13 text
Flutter transforms the
app development process.
Build, test, and deploy beautiful mobile,
web, desktop, and embedded apps
from a single codebase
Beyond AI By Community
1. Flutter 개요
13
Slide 14
Slide 14 text
Beyond AI By Community
1. Flutter 개요
14
Flutter is an open source framework by Google
for building beautiful, natively compiled,
multi-platform applications from
a single codebase.
Slide 15
Slide 15 text
Beyond AI By Community
1. Flutter 개요
15
https://dart.dev/overview#platform
Slide 16
Slide 16 text
Beyond AI By Community
1. Flutter 개요
16
Architectural layers
- Framework
- Dart Lang
- Engine
- C/C++
- Embedder
https://docs.
fl
utter.dev/resources/architectural-
overview#architectural-layers
Slide 17
Slide 17 text
Beyond AI By Community
1. Flutter 개요
17
• Declarative UI
Slide 18
Slide 18 text
Beyond AI By Community
1. Flutter 개요
18
• Widget & State
• Everything is a Widget
• Flutter Widget = Immutable
• Widget ≠ Life Cycle
Slide 19
Slide 19 text
Beyond AI By Community
1. Flutter 개요
19
• Open Source
• App Framework - UI Toolkit
• Multi-Platform
• Declarative UI
Slide 20
Slide 20 text
Beyond AI By Community
1. Flutter 개요
20
각 플랫폼의 기능을
Flutter Framework
에서 사용하려면
어떻게 해야할까요?
https://docs.
fl
utter.dev/resources/architectural-
overview#architectural-layers
Slide 21
Slide 21 text
2. Platform Channel
Beyond AI By Community
21
Slide 22
Slide 22 text
Beyond AI By Community
2. Platform Channel
22
Hardware의 고유기능
권한
센서정보(값)
TCP/IP Socket
Etc
https://
fl
utter.dev/multi-platform/mobile
Slide 23
Slide 23 text
Beyond AI By Community
2. Platform Channel
23
https://medium.com/
fl
utter/
fl
utter-platform-channels-ce7f540a104e
https://docs.
fl
utter.dev/development/platform-integration/platform-
channels?tab=type-mappings-c-plus-plus-tab
Slide 24
Slide 24 text
Beyond AI By Community
2. Platform Channel
24
• Kotlin or Java on Android
• Swift or Objective-C on iOS
• C++ on Windows
• Objective-C on macOS
• C on Linux
Slide 25
Slide 25 text
Beyond AI By Community
2. Platform Channel
25
Q. 근데 개발하다보면 코드상에
어딜봐도 Platform Channel이라는건 보기 어렵네요. 왜죠?
A. 실제 개발시에는 Method Channel, Event Channel을 주로 사용
하고, 큰 개념에서 네이티브 플랫폼과 Flutter Framework간 상호통
신의 개념을 Platform Channel 이라고 합니다.
Slide 26
Slide 26 text
Beyond AI By Community
2. Platform Channel
26
🗝 Key Point
데이터를 “어떻게 잘 구조화해서 상호통신하느냐” 가 중요
다시 말해, 호스트 - 클라이언트 개념과 유사
JSON, gRPC를 주로 많이 사용
Slide 27
Slide 27 text
Beyond AI By Community
2. Platform Channel
27
Method Channel
Asynchronous Method 호출을 사용하여 플랫폼과 통
신하는 데 사용되는 채널
Method Channel = Future
Slide 28
Slide 28 text
Beyond AI By Community
2. Platform Channel
28
Event Channel
플랫폼에서 Event Stream(스트림)을 수신하는 데
사용되는 채널
Event Channel = Stream
Slide 29
Slide 29 text
Beyond AI By Community
2. Platform Channel
29
복잡하네요 꼭 알아야 하나요? 🤯
Slide 30
Slide 30 text
Beyond AI By Community
2. Platform Channel
30
ML 모델 구동은 결국
Native Platform에서 실행됩니다.
즉, 알아두면~ 도움이 됩니다.
Slide 31
Slide 31 text
Beyond AI By Community
2. Platform Channel
31
Summary
1. Native의 HW기능 또는 API 사용
2. Method, Event Channel w/ Future, Stream
3. Native-Flutter FW간 데이터 상호통신
Slide 32
Slide 32 text
3. 최신 Flutter ML 경향
Beyond AI By Community
32
Slide 33
Slide 33 text
Beyond AI By Community
3. 최신 Flutter ML 경향
33
잠시 제 ML 개발 경험을 말씀드리면…
Slide 34
Slide 34 text
Beyond AI By Community
3. 최신 Flutter ML 경향
34
ML
FW
Tensorflow
Pytorch
ML API Service
Tensorflow Lite
TinyML
Keras
2.0
Slide 35
Slide 35 text
Beyond AI By Community
3. 최신 Flutter ML 경향
35
Start
Black Box (ML)
ML Framework Model
Mobile
Device
Feedback&개선
Slide 36
Slide 36 text
Beyond AI By Community
3. 최신 Flutter ML 경향
36
잘 만든(만들어진)
모델을 사용자가 실제로 사용할 수 있도록 해야죠?
Slide 37
Slide 37 text
Beyond AI By Community
3. 최신 Flutter ML 경향
37
콘솔창으로만 보던 결과를
실제 앱으로
Slide 38
Slide 38 text
Beyond AI By Community
3. 최신 Flutter ML 경향
38
https://www.tensor
fl
ow.org/lite/android
Slide 39
Slide 39 text
Beyond AI By Community
3. 최신 Flutter ML 경향
39
TensorFlow Lite for Microcontrollers
TensorFlow Lite for Mobile
• a 32-bit platform
• based on the Arm Cortex-M Series
• Android
• iOS
TensorFlow Lite for Embedded (Linux)
• Raspberry Pi
• Jetson Xavier
Slide 40
Slide 40 text
Beyond AI By Community
3. 최신 Flutter ML 경향
40
TensorFlow Lite for Microcontrollers
• 👍 Arduino Nano 33 BLE Sense
• SparkFun Edge
• STM32F746 Discovery kit
• Adafruit EdgeBadge
• 👍 Espressif ESP32-DevKitC
• Wio Terminal: ATSAMD51
• Himax WE-I Plus EVB Endpoint AI Development Board
• Synopsys DesignWare ARC EM Software Development
Platform
• Sony Spresense
Slide 41
Slide 41 text
Android Device
Beyond AI By Community
3. 최신 Flutter ML 경향
41
SampleApp
FlutterView
HAL
Camera
Bluetooth
Kernel
Runtime
Android Host
tflite
model
Camera
Audio
USB
Sensor
ART
MC
MC: Method Channel
ART: Android Runtime
Slide 42
Slide 42 text
Beyond AI By Community
3. 최신 Flutter ML 경향
42
🤔 이 모든걸 다 알아야할까요?
이미 잘 만들어진 패키지를 사용하는 것은요?
Slide 43
Slide 43 text
Beyond AI By Community
3. 최신 Flutter ML 경향
43
https://pub.dev/
Slide 44
Slide 44 text
Beyond AI By Community
3. 최신 Flutter ML 경향
44
Mar 14, 2019
Slide 45
Slide 45 text
Beyond AI By Community
3. 최신 Flutter ML 경향
45
JUN 30, 2020
Slide 46
Slide 46 text
Beyond AI By Community
3. 최신 Flutter ML 경향
46
firebase_ml_vision 0.12.0+3
https://pub.dev/packages/
fi
rebase_ml_vision
OCT 21, 2021
Slide 47
Slide 47 text
Beyond AI By Community
3. 최신 Flutter ML 경향
47
This package is now discontinued since these APIs are no
longer available in the latest Firebase SDKs.
As an alternative you can switch to Google's standalone ML
Kit library via google_ml_kit for on-device vision APIs. For
calling the Cloud Vision API from your app the
recommended approach is using Firebase Authentication
and Functions, which gives you a managed, serverless
gateway to Google Cloud Vision APIs. For an example
Functions project see the vision-annotate-images sample
project.
Slide 48
Slide 48 text
Beyond AI By Community
3. 최신 Flutter ML 경향
48
google_ml_kit 0.13.0
12월 4일 기준.
https://pub.dev/packages/google_ml_kit
Slide 49
Slide 49 text
Beyond AI By Community
3. 최신 Flutter ML 경향
49
🤔 커스텀 모델은 어떻게 해야하나요?
지금은 ML Kit의 미리 빌드된 모델을
사용하는거 같은데요…?
Slide 50
Slide 50 text
Beyond AI By Community
3. 최신 Flutter ML 경향
50
Slide 51
Slide 51 text
Beyond AI By Community
3. 최신 Flutter ML 경향
51
firebase_ml_model_downloader
https://pub.dev/packages/
fi
rebase_ml_model_downloader
Slide 52
Slide 52 text
Beyond AI By Community
3. 최신 Flutter ML 경향
52
https://pub.dev/packages/t
fl
ite_
fl
utter
https://pub.dev/packages/t
fl
ite
Slide 53
Slide 53 text
Beyond AI By Community
3. 최신 Flutter ML 경향
53
🤔 파이토치는 사용 못하나요?
Slide 54
Slide 54 text
Beyond AI By Community
3. 최신 Flutter ML 경향
54
Slide 55
Slide 55 text
Beyond AI By Community
3. 최신 Flutter ML 경향
55
🤔 챗봇같은 시스템은요?
Slide 56
Slide 56 text
Beyond AI By Community
3. 최신 Flutter ML 경향
56
Slide 57
Slide 57 text
Beyond AI By Community
3. 최신 Flutter ML 경향
57
dialogflow_flutter 1.0.0
https://pub.dev/packages/dialog
fl
ow_
fl
utter
Slide 58
Slide 58 text
Beyond AI By Community
3. 최신 Flutter ML 경향
58
1. 아무리 모델을 잘 만들어도 실제 유저가 사용할 수 있도
록 해야한다.
2.모바일: Tensorflow —> Tensorflow Lite사용
3.Flutter 패키지를 활용하여 앱을 구현한다.
4.잘 만들어진 ML Kit도 존재한다.
Summary
Slide 59
Slide 59 text
4. ML Model 적용하기
Beyond AI By Community
59
Slide 60
Slide 60 text
Beyond AI By Community
60
4. ML Model 적용하기
1. 이미 잘 만들어진 모델 사용하기
2.직접 만들어 사용하기
3.API 활용하기
Slide 61
Slide 61 text
Beyond AI By Community
61
4. ML Model 적용하기
1. 이미 잘 만들어진 모델 사용하기
- Google ML Kit
- Tensorflow Hub
Slide 62
Slide 62 text
Beyond AI By Community
62
4. ML Model 적용하기
1. 이미 잘 만들어진 모델 사용하기 - Google ML Kit
Vision APIs
google_ml_kit 기준
Face mesh 제외 모두 사용
가능
Slide 63
Slide 63 text
Beyond AI By Community
63
4. ML Model 적용하기
1. 이미 잘 만들어진 모델 사용하기 - Google ML Kit
Natural Language APIs
google_ml_kit 기준
모두 사용가능
Slide 64
Slide 64 text
Beyond AI By Community
64
4. ML Model 적용하기
1. 이미 잘 만들어진 모델 사용하기 - Google ML Kit
OCR 바코드 인식하기
Slide 65
Slide 65 text
Beyond AI By Community
65
4. ML Model 적용하기
OCR 바코드 인식하기 dependencies
Slide 66
Slide 66 text
Beyond AI By Community
66
4. ML Model 적용하기
OCR 바코드 인식하기 Camera
Slide 67
Slide 67 text
Beyond AI By Community
67
4. ML Model 적용하기
OCR 바코드 인식하기 BarcodeScanner
Slide 68
Slide 68 text
68
4. ML Model 적용하기
OCR 바코드 인식하기 BarcodeScanner
Slide 69
Slide 69 text
69
4. ML Model 적용하기
OCR 바코드 인식하기 BarcodeScanner
Slide 70
Slide 70 text
70
4. ML Model 적용하기
OCR 바코드 인식하기 BarcodeScanner
Slide 71
Slide 71 text
Beyond AI By Community
71
4. ML Model 적용하기 OCR 바코드 인식하기
Slide 72
Slide 72 text
Beyond AI By Community
72
Summary
1. Flutter는 Open Source App Framework
• UI Toolkit, 선언형UI, Multi-Platform
2.Flutter Platform Channel
• Flutter앱에서 모바일 ML을 사용하려면 Platform
Channel을 통해 가능
3.Flutter - ML전용 패키지들이 존재
• 잘 만들어진 ML모델 적용 가능
Slide 73
Slide 73 text
Beyond AI By Community
хࢎפ. ߅ઁହ | aristojeff@gmail.com
github | @JAICHANGPARK
73