Flutter와 함께하는 ML 세상 탐험하기 @MODUCON2022

Flutter와 함께하는 ML 세상 탐험하기 @MODUCON2022

1. https://moducon.kr/
2. https://moducon.kr/sessions/t2s3

#MODUCON #모두콘 #Flutter #ML

Transcript

1. Beyond AI By Community Flutter와 함께하는 ML 세상 탐험하기 Flutter와 ML이 만나다 Session 2 : Development Community 박제창 | aristojeff@gmail.com github | @JAICHANGPARK 1
2. 소개 Beyond AI By Community 박제창 @Dreamwalker Dreamus Company Flutter Seoul - Organizer 2
3. Beyond AI By Community 3
4. 4 Beyond AI By Community
5. Beyond AI By Community 5
6. Beyond AI By Community 6
7. Beyond AI By Community 7 커뮤니티 소개
8. Beyond AI By Community • ML 모델을 모바일 앱에서 사용해보고 싶으신분 • 개발된 Flutter 앱에 ML을 적용해보고 싶으신분 • Flutter에 관심이 있으신분 대상 8
9. Beyond AI By Community Flutter로 ML(Machine Learning) 적용이 가능할까? Flutter에 ML모델을 어떻게 사용하지? 어떻게 어디서부터 시작해야할지 모르겠어 🥹 목표 9
10. Beyond AI By Community Flutter x ML(Machine Learning) 가이드 (가 되면 좋겠습니다..) 10 목표
11. Beyond AI By Community Agenda 1. Flutter 개요 2. Platform Channel 3. 최신 Flutter ML 경향 4. ML Model 적용하기 11
12. 1. Flutter 개요 Beyond AI By Community 12
13. 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
14. 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.
15. Beyond AI By Community 1. Flutter 개요 15 https://dart.dev/overview#platform
16. 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
17. Beyond AI By Community 1. Flutter 개요 17 • Declarative UI
18. Beyond AI By Community 1. Flutter 개요 18 • Widget & State • Everything is a Widget • Flutter Widget = Immutable • Widget ≠ Life Cycle
19. Beyond AI By Community 1. Flutter 개요 19 • Open Source • App Framework - UI Toolkit • Multi-Platform • Declarative UI
20. Beyond AI By Community 1. Flutter 개요 20 각 플랫폼의 기능을 Flutter Framework 에서 사용하려면 어떻게 해야할까요? https://docs. fl utter.dev/resources/architectural- overview#architectural-layers
21. 2. Platform Channel Beyond AI By Community 21
22. Beyond AI By Community 2. Platform Channel 22 Hardware의 고유기능 권한 센서정보(값) TCP/IP Socket Etc https:// fl utter.dev/multi-platform/mobile
23. 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
24. 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
25. Beyond AI By Community 2. Platform Channel 25 Q. 근데 개발하다보면 코드상에 어딜봐도 Platform Channel이라는건 보기 어렵네요. 왜죠? A. 실제 개발시에는 Method Channel, Event Channel을 주로 사용 하고, 큰 개념에서 네이티브 플랫폼과 Flutter Framework간 상호통 신의 개념을 Platform Channel 이라고 합니다.
26. Beyond AI By Community 2. Platform Channel 26 🗝 Key Point 데이터를 “어떻게 잘 구조화해서 상호통신하느냐” 가 중요 다시 말해, 호스트 - 클라이언트 개념과 유사 JSON, gRPC를 주로 많이 사용
27. Beyond AI By Community 2. Platform Channel 27 Method Channel Asynchronous Method 호출을 사용하여 플랫폼과 통 신하는 데 사용되는 채널 Method Channel = Future
28. Beyond AI By Community 2. Platform Channel 28 Event Channel 플랫폼에서 Event Stream(스트림)을 수신하는 데 사용되는 채널 Event Channel = Stream
29. Beyond AI By Community 2. Platform Channel 29 복잡하네요 꼭 알아야 하나요? 🤯
30. Beyond AI By Community 2. Platform Channel 30 ML 모델 구동은 결국 Native Platform에서 실행됩니다. 즉, 알아두면~ 도움이 됩니다.
31. Beyond AI By Community 2. Platform Channel 31 Summary 1. Native의 HW기능 또는 API 사용 2. Method, Event Channel w/ Future, Stream 3. Native-Flutter FW간 데이터 상호통신
32. 3. 최신 Flutter ML 경향 Beyond AI By Community 32
33. Beyond AI By Community 3. 최신 Flutter ML 경향 33 잠시 제 ML 개발 경험을 말씀드리면…
34. Beyond AI By Community 3. 최신 Flutter ML 경향 34 ML FW Tensorflow Pytorch ML API Service Tensorflow Lite TinyML Keras 2.0
35. Beyond AI By Community 3. 최신 Flutter ML 경향 35 Start Black Box (ML) ML Framework Model Mobile Device Feedback&개선
36. Beyond AI By Community 3. 최신 Flutter ML 경향 36 잘 만든(만들어진) 모델을 사용자가 실제로 사용할 수 있도록 해야죠?
37. Beyond AI By Community 3. 최신 Flutter ML 경향 37 콘솔창으로만 보던 결과를 실제 앱으로
38. Beyond AI By Community 3. 최신 Flutter ML 경향 38 https://www.tensor fl ow.org/lite/android
39. 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
40. 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
41. 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
42. Beyond AI By Community 3. 최신 Flutter ML 경향 42 🤔 이 모든걸 다 알아야할까요? 이미 잘 만들어진 패키지를 사용하는 것은요?
43. Beyond AI By Community 3. 최신 Flutter ML 경향 43 https://pub.dev/
44. Beyond AI By Community 3. 최신 Flutter ML 경향 44 Mar 14, 2019
45. Beyond AI By Community 3. 최신 Flutter ML 경향 45 JUN 30, 2020
46. 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
47. 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.
48. Beyond AI By Community 3. 최신 Flutter ML 경향 48 google_ml_kit 0.13.0 12월 4일 기준. https://pub.dev/packages/google_ml_kit
49. Beyond AI By Community 3. 최신 Flutter ML 경향 49 🤔 커스텀 모델은 어떻게 해야하나요? 지금은 ML Kit의 미리 빌드된 모델을 사용하는거 같은데요…?
50. Beyond AI By Community 3. 최신 Flutter ML 경향 50
51. Beyond AI By Community 3. 최신 Flutter ML 경향 51 firebase_ml_model_downloader https://pub.dev/packages/ fi rebase_ml_model_downloader
52. Beyond AI By Community 3. 최신 Flutter ML 경향 52 https://pub.dev/packages/t fl ite_ fl utter https://pub.dev/packages/t fl ite
53. Beyond AI By Community 3. 최신 Flutter ML 경향 53 🤔 파이토치는 사용 못하나요?
54. Beyond AI By Community 3. 최신 Flutter ML 경향 54
55. Beyond AI By Community 3. 최신 Flutter ML 경향 55 🤔 챗봇같은 시스템은요?
56. Beyond AI By Community 3. 최신 Flutter ML 경향 56
57. Beyond AI By Community 3. 최신 Flutter ML 경향 57 dialogflow_flutter 1.0.0 https://pub.dev/packages/dialog fl ow_ fl utter
58. Beyond AI By Community 3. 최신 Flutter ML 경향 58 1. 아무리 모델을 잘 만들어도 실제 유저가 사용할 수 있도 록 해야한다. 2.모바일: Tensorflow —> Tensorflow Lite사용 3.Flutter 패키지를 활용하여 앱을 구현한다. 4.잘 만들어진 ML Kit도 존재한다. Summary
59. 4. ML Model 적용하기 Beyond AI By Community 59
60. Beyond AI By Community 60 4. ML Model 적용하기 1. 이미 잘 만들어진 모델 사용하기 2.직접 만들어 사용하기 3.API 활용하기
61. Beyond AI By Community 61 4. ML Model 적용하기 1. 이미 잘 만들어진 모델 사용하기 - Google ML Kit - Tensorflow Hub
62. Beyond AI By Community 62 4. ML Model 적용하기 1. 이미 잘 만들어진 모델 사용하기 - Google ML Kit Vision APIs google_ml_kit 기준 Face mesh 제외 모두 사용 가능
63. Beyond AI By Community 63 4. ML Model 적용하기 1. 이미 잘 만들어진 모델 사용하기 - Google ML Kit Natural Language APIs google_ml_kit 기준 모두 사용가능
64. Beyond AI By Community 64 4. ML Model 적용하기 1. 이미 잘 만들어진 모델 사용하기 - Google ML Kit OCR 바코드 인식하기
65. Beyond AI By Community 65 4. ML Model 적용하기 OCR 바코드 인식하기 dependencies
66. Beyond AI By Community 66 4. ML Model 적용하기 OCR 바코드 인식하기 Camera
67. Beyond AI By Community 67 4. ML Model 적용하기 OCR 바코드 인식하기 BarcodeScanner
68. 68 4. ML Model 적용하기 OCR 바코드 인식하기 BarcodeScanner
69. 69 4. ML Model 적용하기 OCR 바코드 인식하기 BarcodeScanner
70. 70 4. ML Model 적용하기 OCR 바코드 인식하기 BarcodeScanner
71. Beyond AI By Community 71 4. ML Model 적용하기 OCR 바코드 인식하기
72. 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모델 적용 가능
73. Beyond AI By Community хࢎ೤פ׮. ߅ઁହ | aristojeff@gmail.com github | @JAICHANGPARK 73