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
130
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
44
Amplifying Your Tech Career: Showcasing Your Work and Building Your Brand
msandfor
0
34
Build a Static Web App (PWA) with Custom Vision
msandfor
0
180
LiveOps_Best_Practices.pdf
msandfor
0
65
Techorama - Rise of the Tech Influencer
msandfor
0
150
Has your puppy joined the dark side?
msandfor
0
180
¿Tu cachorro se ha unido al lado oscuro?
msandfor
0
77
Well Connected
msandfor
0
62
Show Your Work - Using Data Science to Peek inside the Black Box
msandfor
0
47
Other Decks in Programming
See All in Programming
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.3k
cmp.Or に感動した
otakakot
3
210
React への依存を最小にするフロントエンド設計
takonda
6
1.4k
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.5k
Jakarta EE meets AI
ivargrimstad
0
630
イベント駆動で成長して委員会
happymana
1
340
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
Amazon Qを使ってIaCを触ろう!
maruto
0
420
CSC509 Lecture 09
javiergs
PRO
0
140
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
RailsConf 2023
tenderlove
29
900
How to train your dragon (web standard)
notwaldorf
88
5.7k
Facilitating Awesome Meetings
lara
50
6.1k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Designing on Purpose - Digital PM Summit 2013
jponch
115
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?