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
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
楽して成果を出すためのセルフリソース管理
clipnote
0
190
Reading Rails 1.0 Source Code
okuramasafumi
0
250
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
530
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.3k
概念モデル→論理モデルで気をつけていること
sunnyone
3
290
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
OSS開発者という働き方
andpad
5
1.7k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
470
Laravel Boost 超入門
fire_arlo
3
220
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
720
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
What's in a price? How to price your products and services
michaelherold
246
12k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Code Review Best Practice
trishagee
71
19k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
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?