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
160
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
55
Amplifying Your Tech Career: Showcasing Your Work and Building Your Brand
msandfor
0
43
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
240
¿Tu cachorro se ha unido al lado oscuro?
msandfor
0
96
Well Connected
msandfor
0
76
Show Your Work - Using Data Science to Peek inside the Black Box
msandfor
0
65
Other Decks in Programming
See All in Programming
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.6k
技術的負債の正体を知って向き合う
irof
0
260
CSC509 Lecture 07
javiergs
PRO
0
240
CSC305 Lecture 10
javiergs
PRO
0
250
Cursorハンズオン実践!
eltociear
2
1.2k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
410
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
840
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
Developer Joy - The New Paradigm
hollycummins
1
370
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Typedesign – Prime Four
hannesfritz
42
2.8k
Practical Orchestrator
shlominoach
190
11k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Speed Design
sergeychernyshev
32
1.2k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
Facilitating Awesome Meetings
lara
57
6.6k
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?