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

Build a Static Web App (PWA) with Custom Vision

Build a Static Web App (PWA) with Custom Vision

Michelle Sandford

November 16, 2022
Tweet

More Decks by Michelle Sandford

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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?
  4. Create an Azure Portal Login ID Create Login to Azure

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

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

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

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

    Portal: https://www.microsoftazurepass.com/ Get Voucher Code: https://azcheck.in/msr221115kn)
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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" },
  14. 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