Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Build a PWA with Azure ML built-in
Search
Michelle Sandford
January 15, 2022
Programming
0
140
Build a PWA with Azure ML built-in
This is just the code editing of the template PWA scaffolded with VUE
Michelle Sandford
January 15, 2022
Tweet
Share
More Decks by Michelle Sandford
See All by Michelle Sandford
Keynote for Programmable.Tech 2024
msandfor
0
52
Amplifying Your Tech Career: Showcasing Your Work and Building Your Brand
msandfor
0
38
Build a Static Web App (PWA) with Custom Vision
msandfor
0
220
LiveOps_Best_Practices.pdf
msandfor
0
71
Techorama - Rise of the Tech Influencer
msandfor
0
160
Has your puppy joined the dark side?
msandfor
0
210
¿Tu cachorro se ha unido al lado oscuro?
msandfor
0
86
Well Connected
msandfor
0
68
Show Your Work - Using Data Science to Peek inside the Black Box
msandfor
0
56
Other Decks in Programming
See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
310
無関心の谷
kanayannet
0
180
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
300
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
220
Java on Azure で LangGraph!
kohei3110
0
150
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
140
GoのWebAssembly活用パターン紹介
syumai
3
10k
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
830
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
240
從零到一:搭建你的第一個 Observability 平台
blueswen
1
950
単体テストの始め方/作り方
toms74209200
0
500
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Featured
See All Featured
Making Projects Easy
brettharned
116
6.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Typedesign – Prime Four
hannesfritz
42
2.7k
A designer walks into a library…
pauljervisheath
206
24k
Scaling GitHub
holman
459
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Docker and Python
trallard
44
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Designing for humans not robots
tammielis
253
25k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
Transcript
Has Your Puppy Joined The Dark Side?
Side-by-side deck – How to Build a PWA with Azure
ML Built-in
Scaffold the App
Has Your Puppy Joined the Dark Side?
App.vue
Display an image and a button to switch it
Create a Placeholder for the data <script> export default {
name: "DetectImage", props: { msg: String }, data() { return { image: 0, numImages: 21 }; }, </script>
Return the index of an image <script> export default {
name: "DetectImage", props: { msg: String }, data() { return { image: 0, numImages: 21 }; }, computed: { getImgIndex() { return this.image.toString(); }, disable() { if (this.image == this.numImages) { return true; } else return false; } }, </script>
Capture user interaction computed: { getImgIndex() { return this.image.toString(); },
disable() { if (this.image == this.numImages) { return true; } else return false; } }, methods: { next() { this.image++; this.predictions = []; setTimeout(this.predict, 500); } } </script>
Bling bling baby <style scoped> h3 { margin: 40px 0
0; } .image { min-height: 500px; max-height: 500px; max-width: 100%; } .button { width: 200px; height: 50px; border-radius: 5px; background-color: blueviolet; color: white; font-size: 20pt; margin: 10px; } .button:disabled, .button[disabled] { border: 1px solid #999999; background-color: #cccccc; color: #666666; } </style>
json "dependencies": { "core-js": "^3.6.5", "register-service-worker": "^1.7.1", "customvision-tfjs": "^1.0.1", "vue":
"^3.0.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-pwa": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-standard": "^5.1.2", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-import": "^2.20.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.0", "raw-loader": "^4.0.0", "webpack-cli": "^3.3.10" "eslint-plugin-vue": "^7.0.0" },
customvision-tfjs
Web.config.js
Data elements
Async mounted
Async predict
Async predict
Web.config
Has Your Puppy Joined The Dark Side?