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
38
Build a Static Web App (PWA) with Custom Vision
msandfor
0
220
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
210
¿Tu cachorro se ha unido al lado oscuro?
msandfor
0
89
Well Connected
msandfor
0
71
Show Your Work - Using Data Science to Peek inside the Black Box
msandfor
0
59
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
590
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
技術同人誌をMCP Serverにしてみた
74th
1
430
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
XP, Testing and ninja testing
m_seki
3
210
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
ふつうの技術スタックでアート作品を作ってみる
akira888
0
170
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
660
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A Tale of Four Properties
chriscoyier
160
23k
Statistics for Hackers
jakevdp
799
220k
How GitHub (no longer) Works
holman
314
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
RailsConf 2023
tenderlove
30
1.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Site-Speed That Sticks
csswizardry
10
660
The Cult of Friendly URLs
andyhume
79
6.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Music & Morning Musume
bryan
46
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?