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
40
Build a Static Web App (PWA) with Custom Vision
msandfor
1
230
LiveOps_Best_Practices.pdf
msandfor
0
71
Techorama - Rise of the Tech Influencer
msandfor
0
160
Has your puppy joined the dark side?
msandfor
0
220
¿Tu cachorro se ha unido al lado oscuro?
msandfor
0
91
Well Connected
msandfor
0
72
Show Your Work - Using Data Science to Peek inside the Black Box
msandfor
0
60
Other Decks in Programming
See All in Programming
生成AI時代のコンポーネントライブラリの作り方
touyou
1
300
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
140
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
230
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
940
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
680
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
8.9k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
220
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
102
39k
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
180
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
980
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.9k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Automating Front-end Workflow
addyosmani
1370
200k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
What's in a price? How to price your products and services
michaelherold
246
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Gamification - CAS2011
davidbonilla
81
5.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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?