Build a Static Web App (PWA) with Custom Vision

Video: https://youtu.be/ZaV6tGFNL8g?t=3579
or: https://youtu.be/PBKIj6c6TZQ

All the Code
GitHub: https://github.com/codess-aus/ewok-or-puppy

Gists (step-by-step):
https://aka.ms/1a
https://aka.ms/2b
https://aka.ms/3a
https://aka.ms/4a
https://aka.ms/5a
https://aka.ms/6a
https://aka.ms/7a
https://aka.ms/8a
https://aka.ms/9a
https://aka.ms/10a
https://aka.ms/11a
https://aka.ms/12a
https://aka.ms/13
https://aka.ms/14

Transcript

1. Has Your Puppy Joined The Dark Side?
2. These are my puppies
3. Those are not Puppies Bing Image Search
4. 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
5. 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
6. https://learn.microsoft.com/
7. 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?
8. Progressive Web Apps Discoverable Installable Safe Re-engageable Offline Responsive Linkable Progressive
9. Progressive Web App Concept HTTPS Web App Manifest Service Worker
10. Has Your Puppy Joined the Dark Side?
11. Create an Azure Portal Login ID Create Login to Azure Portal: https://www.microsoftazurepass.com/ Get Voucher Code: https://azcheck.in/msr221115n)
12. Create an Azure Portal Login ID Create Login to Azure Portal: https://www.microsoftazurepass.com/ Get Voucher Code: https://azcheck.in/msr221115kn)
13. Create an Azure Portal Login ID Create Login to Azure Portal: https://www.microsoftazurepass.com/ Get Voucher Code: https://azcheck.in/msr221115kn)
14. Create an Azure Portal Login ID Create Login to Azure Portal: https://www.microsoftazurepass.com/ Get Voucher Code: https://azcheck.in/msr221115kn)
15. Create an Azure Portal Login ID Create Login to Azure Portal: https://www.microsoftazurepass.com/ Get Voucher Code: https://azcheck.in/msr221115kn)
16. Train your machine learning model https://www.customvision.ai/
17. Conceptual Overview HTTPS Web App Manifest Service Worker CICD
18. Step 1 – Retitle the App
19. Side-by-side deck – How to Build a PWA with Azure ML Built-in
20. Scaffold the App
21. Has Your Puppy Joined the Dark Side?
22. App.vue
23. This will: Display an image and a button to switch it DetectImage.vue
24. DetectImage.Vue <script> export default { name: "DetectImage", props: { msg: String }, data() { return { image: 0, numImages: 21 }; }, } </script> This will: Create a Placeholder for the data
25. DetectImage.Vue <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> This will: Return the index of an image
26. 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); } } </script> This will: Capture user interaction
27. DetectImage.Vue <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> This will: Add some Bling bling baby
28. 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" },
29. DetectImage.vue
30. Web.config.js
31. DetectImage.Vue This will: Add some more Data elements
32. DetectImage.Vue This will get the Async mounted
33. DetectImage.Vue This will: Async predict
34. DetectImage.Vue This will add: Async predict
35. Web.config
36. GitHub Actions
37. Create a Static Web App and Deploy to Azure with GitHub Actions
38. Static Web Apps
39. https://aka.ms/ewok
40. 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
41. Has Your Puppy Joined The Dark Side?