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
130
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
44
Amplifying Your Tech Career: Showcasing Your Work and Building Your Brand
msandfor
0
34
Build a Static Web App (PWA) with Custom Vision
msandfor
0
180
LiveOps_Best_Practices.pdf
msandfor
0
65
Techorama - Rise of the Tech Influencer
msandfor
0
150
Has your puppy joined the dark side?
msandfor
0
180
¿Tu cachorro se ha unido al lado oscuro?
msandfor
0
77
Well Connected
msandfor
0
62
Show Your Work - Using Data Science to Peek inside the Black Box
msandfor
0
47
Other Decks in Programming
See All in Programming
Quine, Polyglot, 良いコード
qnighy
4
640
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
170
Amazon Qを使ってIaCを触ろう!
maruto
0
400
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
330
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
100
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
290
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
100
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Designing for humans not robots
tammielis
250
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Being A Developer After 40
akosma
86
590k
KATA
mclloyd
29
14k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Bash Introduction
62gerente
608
210k
How GitHub (no longer) Works
holman
310
140k
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?