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
150
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
40
Build a Static Web App (PWA) with Custom Vision
msandfor
1
230
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
220
¿Tu cachorro se ha unido al lado oscuro?
msandfor
0
91
Well Connected
msandfor
0
72
Show Your Work - Using Data Science to Peek inside the Black Box
msandfor
0
59
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
900
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
AIともっと楽するE2Eテスト
myohei
8
3k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
Model Pollution
hschwentner
1
160
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
7
2.4k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
20250708_JAWS_opscdk
takuyay0ne
2
130
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Adopting Sorbet at Scale
ufuk
77
9.5k
Statistics for Hackers
jakevdp
799
220k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Scaling GitHub
holman
460
140k
How to Ace a Technical Interview
jacobian
278
23k
For a Future-Friendly Web
brad_frost
179
9.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
How GitHub (no longer) Works
holman
314
140k
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?