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
160
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
54
Amplifying Your Tech Career: Showcasing Your Work and Building Your Brand
msandfor
0
43
Build a Static Web App (PWA) with Custom Vision
msandfor
1
240
LiveOps_Best_Practices.pdf
msandfor
0
76
Techorama - Rise of the Tech Influencer
msandfor
0
160
Has your puppy joined the dark side?
msandfor
0
240
¿Tu cachorro se ha unido al lado oscuro?
msandfor
0
96
Well Connected
msandfor
0
76
Show Your Work - Using Data Science to Peek inside the Black Box
msandfor
0
65
Other Decks in Programming
See All in Programming
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
860
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
技術的負債の正体を知って向き合う
irof
0
230
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
410
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
940
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
780
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
180
Introduce Hono CLI
yusukebe
6
3k
CSC509 Lecture 07
javiergs
PRO
0
240
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Agile that works and the tools we love
rasmusluckow
331
21k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Navigating Team Friction
lara
190
15k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
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?