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
41
Amplifying Your Tech Career: Showcasing Your Work and Building Your Brand
msandfor
0
33
Build a Static Web App (PWA) with Custom Vision
msandfor
0
170
LiveOps_Best_Practices.pdf
msandfor
0
64
Techorama - Rise of the Tech Influencer
msandfor
0
150
Has your puppy joined the dark side?
msandfor
0
160
¿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
41
Other Decks in Programming
See All in Programming
LangChainの現在とv0.3にむけて
os1ma
4
920
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
380
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
A New Era of Testing
mannodermaus
2
510
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
1
510
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
The World Runs on Bad Software
bkeepers
PRO
64
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
Design by the Numbers
sachag
277
19k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Fireside Chat
paigeccino
31
2.9k
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?