Build a PWA with Azure ML built-in

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?