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
54
Amplifying Your Tech Career: Showcasing Your Work and Building Your Brand
msandfor
0
42
Build a Static Web App (PWA) with Custom Vision
msandfor
1
240
LiveOps_Best_Practices.pdf
msandfor
0
76
Techorama - Rise of the Tech Influencer
msandfor
0
160
Has your puppy joined the dark side?
msandfor
0
230
¿Tu cachorro se ha unido al lado oscuro?
msandfor
0
93
Well Connected
msandfor
0
73
Show Your Work - Using Data Science to Peek inside the Black Box
msandfor
0
63
Other Decks in Programming
See All in Programming
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
390
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
700
Testing Trophyは叫ばない
toms74209200
0
880
チームのテスト力を鍛える
goyoki
3
470
為你自己學 Python - 冷知識篇
eddie
1
350
OSS開発者という働き方
andpad
5
1.7k
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
170
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
520
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
🔨 小さなビルドシステムを作る
momeemt
4
680
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How STYLIGHT went responsive
nonsquared
100
5.8k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Writing Fast Ruby
sferik
628
62k
Thoughts on Productivity
jonyablonski
70
4.8k
Bash Introduction
62gerente
615
210k
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?