Slide 1

Slide 1 text

Has Your Puppy Joined The Dark Side?

Slide 2

Slide 2 text

Side-by-side deck – How to Build a PWA with Azure ML Built-in

Slide 3

Slide 3 text

Scaffold the App

Slide 4

Slide 4 text

Has Your Puppy Joined the Dark Side?

Slide 5

Slide 5 text

App.vue

Slide 6

Slide 6 text

Display an image and a button to switch it

Slide 7

Slide 7 text

Create a Placeholder for the data export default { name: "DetectImage", props: { msg: String }, data() { return { image: 0, numImages: 21 }; },

Slide 8

Slide 8 text

Return the index of an image 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; } },

Slide 9

Slide 9 text

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); } }

Slide 10

Slide 10 text

Bling bling baby 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; }

Slide 11

Slide 11 text

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" },

Slide 12

Slide 12 text

customvision-tfjs

Slide 13

Slide 13 text

Web.config.js

Slide 14

Slide 14 text

Data elements

Slide 15

Slide 15 text

Async mounted

Slide 16

Slide 16 text

Async predict

Slide 17

Slide 17 text

Async predict

Slide 18

Slide 18 text

Web.config

Slide 19

Slide 19 text

Has Your Puppy Joined The Dark Side?