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
41
Build a Static Web App (PWA) with Custom Vision
msandfor
1
230
LiveOps_Best_Practices.pdf
msandfor
0
75
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
92
Well Connected
msandfor
0
73
Show Your Work - Using Data Science to Peek inside the Black Box
msandfor
0
62
Other Decks in Programming
See All in Programming
Understanding Ruby Grammar Through Conflicts
yui_knk
1
140
Rancher と Terraform
fufuhu
1
120
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
Constant integer division faster than compiler-generated code
herumi
2
700
A Gopher's Guide to Vibe Coding
danicat
0
180
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
140
Ruby Parser progress report 2025
yui_knk
1
150
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
210
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
950
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
740
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
910
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Building Adaptive Systems
keathley
43
2.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Rails Girls Zürich Keynote
gr2m
95
14k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Balancing Empowerment & Direction
lara
2
590
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Making Projects Easy
brettharned
117
6.3k
Writing Fast Ruby
sferik
628
62k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
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?