Merge pull request #10 from jimbobbennett/main

Tweaks to the repo

.github/workflows/docs.yml

@@ -3,9 +3,6 @@ on:
   push:
     branches:
       - main
-  pull_request:
-    branches:
-      - main  
   workflow_dispatch:
 
 jobs:

.vscode/settings.json

@@ -1,3 +1,9 @@
 {
     "debug.internalConsoleOptions": "neverOpen",
+    "markdownlint.config": {
+        "MD028": false,
+        "MD025": {
+            "front_matter_title": ""
+        }
+    },
 }

README.md

@@ -1,4 +1,4 @@
-# Scenario: Getting started with Lobe 
+# Scenario: Getting started with Lobe
 
 Ever wish you could be alerted when your package has arrived at your door without relying on less-than-accurate delivery-tracking apps? What about needing someone else count your reps during your workout? 
 
@@ -9,40 +9,40 @@ In this lab, you'll build an [image classification](https://www.lobe.ai/docs/wel
 ## Prerequisites
 
 ### Skills
+
 Your team should be familiar with the following:
 
 - Git and GitHub
-    - [Forking](https://docs.github.com/github/getting-started-with-github/quickstart/fork-a-repo) and [cloning](https://docs.github.com/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository) repositories
-    - [Creating and managing branches](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/making-changes-in-a-branch/managing-branches)
+  - [Forking](https://docs.github.com/github/getting-started-with-github/quickstart/fork-a-repo) and [cloning](https://docs.github.com/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository) repositories
+  - [Creating and managing branches](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/making-changes-in-a-branch/managing-branches)
 - Using a terminal (e.g., Bash, PowerShell, etc.)
 
 ### Hardware
-!!! Danger
-    Lobe is not currently supported on Apple computers with the M1 chip
+
+> ⛔️ Lobe is not currently supported on Apple computers with Apple Silicon chips, such as the M1, M1 Pro and M1 Max
 
 - A computer capable of running arbitrary code and on which you have administrative rights
 - A stable internet connection (for setup and data download only)
 
 ### Software
+
 Each member of your team will also need the following software installed:
 
 - [Lobe](https://www.lobe.ai/)
 - [Git](https://git-scm.com/downloads)
-    - [Install git on macOS](https://git-scm.com/download/mac)
-    - [Install git on Windows](https://git-scm.com/download/win)
-    - [Install git on Linux](https://git-scm.com/download/linux)
+  - [Install git on macOS](https://git-scm.com/download/mac)
+  - [Install git on Windows](https://git-scm.com/download/win)
+  - [Install git on Linux](https://git-scm.com/download/linux)
 - [Visual Studio Code](https://code.visualstudio.com/) or any another text editor or IDE (e.g., WebStorm, Notepad++, Atom, Brackets, etc.)
 - [Node.js](https://nodejs.org/)
-    - [Install Node.js on Windows](https://docs.microsoft.com/windows/dev-environment/javascript/nodejs-on-windows)
-    - [Install Node.js on Linux or MacOS](https://github.com/nvm-sh/nvm#installing-and-updating)
+  - [Install Node.js on Windows](https://docs.microsoft.com/windows/dev-environment/javascript/nodejs-on-windows)
+  - [Install Node.js on Linux or MacOS](https://github.com/nvm-sh/nvm#installing-and-updating)
 - [Yarn](https://yarnpkg.com/getting-started/install#per-project-install)
 
-
 ## Resources
 
 A series of resources will be provided to help your team determine the appropriate steps for completion. The resources provided should provide your team with enough information to achieve each goal. If you get stuck, you can always ask a mentor for additional help.
 
-
 ## Exploring the source code
 
 The key folder for the application, [apps](./apps), contains a [starter web application](./apps/web-bootstrap) in which to drop an exported model from Lobe. The flow of the application is as follows:
@@ -51,8 +51,7 @@ The key folder for the application, [apps](./apps), contains a [starter web appl
 1. User takes a photo using their device's camera or uploads a photo from their device.
 1. After submitting the photo, the model will attempt to classify and tag the photo.
 
-!!! Info 
-    No updates to the application code will be made during this workshop. Your team will be able to successfully complete the workshop without any experience with React. The only files your team will add are generated by the Lobe app exporting function.
+> 💡 No updates to the application code will be made during this workshop. Your team will be able to successfully complete the workshop without any experience with React. The only files your team will add are generated by the Lobe app exporting function.
 
 ## Goals
 
@@ -60,13 +59,13 @@ Your team will obtain the starter, train the model, and use the model in locally
 
 1. [Obtain the source code](./goals/0-obtain-source.md):
    The first step when working with any codebase is to download it. Your team's first goal will be to obtain the code from GitHub.
-2. [Train the model](./goals/1-train.md):
-   Because we need a model to classify photos, your team will first need to train a model. For this workshop, your team will Lobe, which will train the model for you based on photos and tags that your team selects.
-3. [Test the model](./goals/2-test.md):
+1. [Train the model](./goals/1-train.md):
+   Because we need a model to classify photos, your team will first need to train a model. For this workshop, your team will use Lobe, which will train the model for you based on photos and tags that your team selects.
+1. [Test the model](./goals/2-test.md):
    A key aspect of training a model is testing and improving it. Here you will take or upload photos to improve the model by fine-tuning it's training.
-4. [Export the model](./goals/3-export.md):
+1. [Export the model](./goals/3-export.md):
    Our webapp will only work if it has a model to run! You will use Lobe to export your model as a TensorFlow.js script and model files.
-5. [Run the app](./goals/4-run.md):
+1. [Run the app](./goals/4-run.md):
    Run your app! For this goal, you will run your web application on your local computer and try to classify images with it.
 
 ## Where do we go from here?
@@ -77,6 +76,5 @@ This project is designed as a potential seed for future development. If you were
 - Build a [Rock, Paper, Scissors game](https://learn.adafruit.com/lobe-rock-paper-scissors) and play against your model!
 - Build a [Package Detector](https://learn.adafruit.com/build-an-ml-package-detector) and get notifications when a package is left at your door!
 
-
 <!-- References -->
 [Lobe]: https://www.lobe.ai/

goals/1-train.md

@@ -5,12 +5,14 @@
 For this goal, your team will train a model using images either captured with your computer camera or imported into the desktop application. Future goals will focus on testing and running your trained model in a web application.
 
 ## What is machine learning?
+
 Machine learning is software that learns to perform a task from a collection of examples rather than through a person explicitly defining rules and formulas. This learning software is called a `model`. Teaching a model through examples is called `training`.
 
 ### What is image classification?
+
 Image classification is categorizing an image into a single label to represent its content. Apps using image classification could:
 
-1. Identify a plant's species in the wild.
+1. Identify a plant's species in the wild
 1. Send you photos of a new bird that just started showing up at your bird feeder
 1. Count the number of push-ups you’ve done in a workout
 1. Alert you when a shelf is empty
@@ -26,11 +28,11 @@ Here are some helper questions to answer to make choosing your labels easier:
 1. How complex is the object?
 1. How similar are the objects with the same label? How different are the objects that have different labels?
 
-!!! Important "The `None` label"
-    Make sure to use a catch-all label like `None` to show unrelated images.
-    
-    Lobe will always predict one of your labels even if your image does not contain any related content. If you expect your model to see these types of images, create a `None` label and add variations of these images as examples. You can use this `None` label as a placeholder when waiting for relevant predictions.
-
+> 💡 The `None` label
+>
+> Make sure to use a catch-all label like `None` to show unrelated images.
+>
+> Lobe will always predict one of your labels even if your image does not contain any related content. If you expect your model to see these types of images, create a `None` label and add variations of these images as examples. You can use this `None` label as a placeholder when waiting for relevant predictions.
 
 ## Success criteria
 
@@ -47,12 +49,11 @@ Your team might find these resources helpful:
 - [What types of images should I collect?](https://www.lobe.ai/docs/label/label#accordion-what-types-of-images-should-i-collect)
 - [Example image datasets from TensorFlow](https://www.tensorflow.org/datasets/catalog/overview#image_classification)
 
-
 ## Final result
 
 After you finish training your model, you should see a page which looks like the following:
 
-![Screenshot of the starting page, showing a link to login, a picture of a dog with the heading Isn't this a cute Pekinese dog?](./media/lobe_label-complete.png){style="width:100%"}
+![Screenshot of the starting page, showing a link to login, a picture of a dog with the heading Isn't this a cute Pekinese dog?](./media/_lobe_la_bel-complete.png)
 
 ## Tips
 
@@ -63,7 +64,7 @@ After you finish training your model, you should see a page which looks like the
 - The average file size of the images in your dataset
 
 💡 The label progress bars fill up as you add images. The number of photos needed will vary:
-![Screenshot of the Lobe application user interface, which shows progress bars underneath labels with the number of photos for each label](./media/lobe-ui_label-progress-bars.png){style="width:30%"}
+![Screenshot of the Lobe application user interface, which shows progress bars underneath labels with the number of photos for each label](./media/lobe-ui_label-progress-bars.png)
 
 ## Next challenge
 

goals/2-test.md

@@ -2,7 +2,7 @@
 
 Your team should be proud! You've created your model!
 
-But how do you know if it's working correctly? You have to test it! Fortunately, testing in Lobe will also improve your model as you test. 
+But how do you know if it's working correctly? You have to test it! Fortunately, testing in Lobe will also improve your model as you test.
 
 ## Testing the model
 
@@ -18,22 +18,24 @@ Here are some things to keep in mind as you refine your model:
 
 - If you can’t classify the label from looking at an image, it will also be difficult for Lobe. Make the image content as large and relevant to your label as possible.
 
-!!! Danger "Biases in data sets" 
-    Data is collected by humans and humans have biases. 
-
-    Bias in machine learning models can be difficult to identify because a model just replicates and reinforces pre-existing biases in the data set.
- 
-    Representation in your model often should not replicate representation in real life. For accurate classification, you need to have equal representation for each of your labels. 
+> ⛔️ Biases in data sets
+>
+> Data is collected by humans and humans have biases.
+>
+> Bias in machine learning models can be difficult to identify because a model just replicates and reinforces pre-existing biases in the data set.
+>
+> Representation in your model often should not replicate representation in real life. For accurate classification, you need to have equal representation for each of your labels.
 
 ## Application notes
 
 - Testing your model happens in the `Use` tab. Like the previous steps, you can import images or use your device camera.
 - Tune your model by accepting or rejecting the label that the model suggests for the image(s)
 - When you have filled the label bar completely, your model has been fine-tuned to achieve 100% classification accuracy
-    <figure>
-    ![Screenshot of Lobe user interface, showing the prediction accuracy rate for all labels and in aggregate](./media/lobe-ui_improve-label.png){style="width:50%"}    
-    <figcaption>That's not a moth! Reject!</figcaption>
-    </figure>
+
+    ![Screenshot of Lobe user interface, showing the prediction accuracy rate for all labels and in aggregate](./media/lobe-ui_improve-label.png)
+    <small>That's not a moth! Reject!</small>
+
+
 ## Success criteria
 
 Your team will make the necessary updates to the model via testing. Your team will have achieved this goal when the following success criteria are met:
@@ -52,7 +54,7 @@ Your team might find these resources helpful:
 
 After improving your model, you should see something like the following for your labels:
 
-![Screenshot of Lobe user interface, showing the prediction accuracy rate for all labels and in aggregate](./media/lobe-ui_label-prediction-rates.png){style="width:30%"}
+![Screenshot of Lobe user interface, showing the prediction accuracy rate for all labels and in aggregate](./media/lobe-ui_label-prediction-rates.png)
 
 ## Next challenge
 

goals/3-export.md

@@ -7,15 +7,18 @@ To use the model in the [sample web application], you first need to *export* the
 ## Application notes
 
 ### How to export the model
+
 1. In the `Use` tab, select the `Export` button
-2. Select `TensorFlow.js`
-3. Choose the [/exports](../exports) folder in the project as the destination folder
+1. Select `TensorFlow.js`
+1. Choose the [/exports](../exports) folder in the project as the destination folder
 
 ### Exported model folder structure
+
 There are a few key elements in the main export directory. Your model in json format (model.json), its weights as binary shard files (.bin), and signature.json which contains information about your Lobe project.
 
 This is what the folder structure of your exported model should look like:
-```
+
+```output
 exports/
   <Project Name> TensorFlowJS/
     example/
@@ -30,8 +33,7 @@ exports/
 
 ### Move model into web application
 
-Copy the contents from your exported model folder into  `apps/web-bootstrap/public/model` folder in the [sample web application]. 
-
+Copy the contents from your exported model folder into  `apps/web-bootstrap/public/model` folder in the [sample web application].
 
 ## Success criteria
 

goals/4-run.md

@@ -7,15 +7,15 @@ Congratulations on exporting your model! In this step, you will run the web appl
 The web application uses Node.js Yarn. To perform local development, you will need Node.js and Yarn installed.
 
 - [Node.js](https://nodejs.org/)
-    - [Install Node.js on Windows](https://docs.microsoft.com/windows/dev-environment/javascript/nodejs-on-windows)
-    - [Install Node.js on Linux or MacOS](https://github.com/nvm-sh/nvm#installing-and-updating)
+  - [Install Node.js on Windows](https://docs.microsoft.com/windows/dev-environment/javascript/nodejs-on-windows)
+  - [Install Node.js on Linux or MacOS](https://github.com/nvm-sh/nvm#installing-and-updating)
 - [Yarn](https://yarnpkg.com/getting-started/install#per-project-install)
   
-
 Once you have all of the packages installed and the application built:
 
-1. Open a terminal and navigate to the [sample web application] folder 
+1. Open a terminal and navigate to the [sample web application] folder
 1. Run the following command to install the project dependencies
+
     ```bash
     yarn install
     ```
@@ -26,19 +26,20 @@ After you have installed all of the project dependencies, you are all set to run
 
 1. Open a terminal and navigate to the [sample web application] folder
 1. Run the following commands to start the development server:
+
     ```bash
     yarn start
     ```
+
 1. Open the website by navigating to [http://localhost:3000](http://localhost:3000).
-    <figure>
-    ![Screenshot of the application landing page](./media/sample-web-app-ui.jpeg){style="width:100%"}
-        <figcaption>That's a sharpie, not a bird! The model will always attempt to label an image with the best fitting label it knows - even if it doesn't make sense.</figcaption>
-    </figure>
 
-    !!! Caution "Browser permissions"
-        Your browser may ask you accept opening the insecure site "localhost:3000" or ask if the page can access your device cameras. Please refer to your browser documentation on how to do this.
+    ![Screenshot of the application landing page](./media/sample-web-app-ui.jpeg)
+    <small>That's a sharpie, not a bird! The model will always attempt to label an image with the best fitting label it knows - even if it doesn't make sense.</small>
 
-2. It's ready to use! You can either upload an image from your device or use your device camera.
+    > ⚠️ Browser permissions
+    > Your browser may ask you accept opening the insecure site "localhost:3000" or ask if the page can access your device cameras. Please refer to your browser documentation on how to do this.
+
+1. It's ready to use! You can either upload an image from your device or use your device camera.
 
 ## Resources
 
@@ -48,4 +49,3 @@ Your team might find these resources helpful:
 
 <!-- References -->
 [sample web application]: ../apps/web-bootstrap
-

mkdocs.yml

@@ -47,7 +47,7 @@ theme:
     - navigation.top
     - toc.integrate
   font: false
-  logo: assets/images/icon_garage_white.png
+  logo: assets/images/8_BIT.png
   palette:
     - media: "(prefers-color-scheme: light)" 
       scheme: default

theme/assets/stylesheets/extra.css

@@ -63,13 +63,6 @@
   --md-typeset-a-color: var(--md-primary-fg-color--light);
 }
 
-img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  width: 50%;
-}
-
 figcaption {
   max-width: 80% !important;
 }