Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build a PWA with Azure ML built-in

Build a PWA with Azure ML built-in

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

0ceb1f981400772616d731e91d5c723c?s=128

Michelle Sandford

January 15, 2022
Tweet

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?