Slide 1

Slide 1 text

Has Your Puppy Joined The Dark Side?

Slide 2

Slide 2 text

These are my puppies

Slide 3

Slide 3 text

Those are not Puppies Bing Image Search

Slide 4

Slide 4 text

Course Links https://aka.ms/SheCodes Download Training/ Inference Data https://aka.ms/installnode Install Node JS https://aka.ms/InstallVue Install Vue JS https://www.customvision.ai/ Azure Custom Vision https://code.visualstudio.com/Download Install VSCode https://learn.microsoft.com/ Microsoft Learn

Slide 5

Slide 5 text

Course Links https://aka.ms/1a Code Gists 1-14 2b 3a, 4a, 5a, 6a, 7a, 8a, 9a. 10a, 11a,12a 13, 14 https://github.com/codess- aus/ewok-or-puppy All the Code

Slide 6

Slide 6 text

https://learn.microsoft.com/

Slide 7

Slide 7 text

Choices: Uh, what kind of App do I build? Low Code/No Code Native Web – Static/Dynamic Progressive Web App Mobile Can we just skip to the good part?

Slide 8

Slide 8 text

Progressive Web Apps Discoverable Installable Safe Re-engageable Offline Responsive Linkable Progressive

Slide 9

Slide 9 text

Progressive Web App Concept HTTPS Web App Manifest Service Worker

Slide 10

Slide 10 text

Has Your Puppy Joined the Dark Side?

Slide 11

Slide 11 text

Create an Azure Portal Login ID Create Login to Azure Portal: https://www.microsoftazurepass.com/ Get Voucher Code: https://azcheck.in/msr221115n)

Slide 12

Slide 12 text

Create an Azure Portal Login ID Create Login to Azure Portal: https://www.microsoftazurepass.com/ Get Voucher Code: https://azcheck.in/msr221115kn)

Slide 13

Slide 13 text

Create an Azure Portal Login ID Create Login to Azure Portal: https://www.microsoftazurepass.com/ Get Voucher Code: https://azcheck.in/msr221115kn)

Slide 14

Slide 14 text

Create an Azure Portal Login ID Create Login to Azure Portal: https://www.microsoftazurepass.com/ Get Voucher Code: https://azcheck.in/msr221115kn)

Slide 15

Slide 15 text

Create an Azure Portal Login ID Create Login to Azure Portal: https://www.microsoftazurepass.com/ Get Voucher Code: https://azcheck.in/msr221115kn)

Slide 16

Slide 16 text

Train your machine learning model https://www.customvision.ai/

Slide 17

Slide 17 text

Conceptual Overview HTTPS Web App Manifest Service Worker CICD

Slide 18

Slide 18 text

Step 1 – Retitle the App

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Scaffold the App

Slide 21

Slide 21 text

Has Your Puppy Joined the Dark Side?

Slide 22

Slide 22 text

App.vue

Slide 23

Slide 23 text

This will: Display an image and a button to switch it DetectImage.vue

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

DetectImage.Vue 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; } }, This will: Return the index of an image

Slide 26

Slide 26 text

DetectImage.Vue 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); } } This will: Capture user interaction

Slide 27

Slide 27 text

DetectImage.Vue 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; } This will: Add some Bling bling baby

Slide 28

Slide 28 text

Package.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 29

Slide 29 text

DetectImage.vue

Slide 30

Slide 30 text

Web.config.js

Slide 31

Slide 31 text

DetectImage.Vue This will: Add some more Data elements

Slide 32

Slide 32 text

DetectImage.Vue This will get the Async mounted

Slide 33

Slide 33 text

DetectImage.Vue This will: Async predict

Slide 34

Slide 34 text

DetectImage.Vue This will add: Async predict

Slide 35

Slide 35 text

Web.config

Slide 36

Slide 36 text

GitHub Actions

Slide 37

Slide 37 text

Create a Static Web App and Deploy to Azure with GitHub Actions

Slide 38

Slide 38 text

Static Web Apps

Slide 39

Slide 39 text

https://aka.ms/ewok

Slide 40

Slide 40 text

Resources https://aka.ms/GitHubEwok Code on GitHub https://aka.ms/ewok Try the Ewok or Puppy App in your browser https://aka.ms/PWAChange Side by Side Code Changes https://aka.ms/EwokVideo Step by Step Video https://aka.ms/DemoCVML Machine Learning Custom Vision Demo https://aka.ms/DemoSWA Create Static Web App Demo #Technorama @codess_aus

Slide 41

Slide 41 text

Has Your Puppy Joined The Dark Side?