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
42
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
170
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
170
¿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
46
Other Decks in Programming
See All in Programming
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
400
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
330
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
EventSourcingの理想と現実
wenas
6
2.1k
Honoの来た道とこれから
yusukebe
19
3k
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
Synchronizationを支える技術
s_shimotori
1
150
Vue.js学習の振り返り
hiro_xre
2
130
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.4k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
Featured
See All Featured
How GitHub (no longer) Works
holman
311
140k
Happy Clients
brianwarren
97
6.7k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Designing for Performance
lara
604
68k
Being A Developer After 40
akosma
86
590k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Automating Front-end Workflow
addyosmani
1365
200k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
41
Producing Creativity
orderedlist
PRO
341
39k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
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?