Build a PWA with Azure ML built-in

This is just the code editing of the template PWA scaffolded with VUE

Transcript

1. Has Your Puppy Joined The Dark Side?
2. Side-by-side deck – How to Build a PWA with Azure ML Built-in
3. Scaffold the App
4. Has Your Puppy Joined the Dark Side?
5. App.vue
6. Display an image and a button to switch it
7. Create a Placeholder for the data <script> export default { name: "DetectImage", props: { msg: String }, data() { return { image: 0, numImages: 21 }; }, </script>
8. 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>
9. 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>
10. 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>
11. 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" },
12. customvision-tfjs
13. Web.config.js
14. Data elements
15. Async mounted
16. Async predict
17. Async predict
18. Web.config
19. Has Your Puppy Joined The Dark Side?