From fe746f7f8c249c7cb127b2998c78f18863b0209c Mon Sep 17 00:00:00 2001
From: Linda Paiste <lindapaiste@gmail.com>
Date: Sun, 10 Mar 2024 14:52:14 -0500
Subject: [PATCH] Load docs pages into gatsby

---
 gatsby-config.js                              |   11 +-
 gatsby-node.js                                |   53 +
 src/layout/Header.js                          |    4 +-
 .../contributing/develop_contributor_notes.md |  335 ++++
 .../contributing/how_to_contribute.md         |   12 +
 .../learning/community_tutorial_library.md    |    3 +
 .../Reference/learning/ml5_glossary.md        | 1484 +++++++++++++++++
 src/markdown/Reference/reference/bodypix.md   |  104 ++
 src/markdown/Reference/reference/bodypose.md  |  318 ++++
 src/markdown/Reference/reference/facemesh.md  |  219 +++
 src/markdown/Reference/reference/handpose.md  |  219 +++
 .../reference/image-classifier-tm.md          |  301 ++++
 .../Reference/reference/image-classifier.md   |  301 ++++
 .../Reference/reference/neural-network.md     |  883 ++++++++++
 src/markdown/Reference/reference/overview.md  |   14 +
 .../Reference/reference/pose-estimation-tm.md |  301 ++++
 .../reference/sound-classifier-tm.md          |  185 ++
 .../Reference/reference/sound-classifier.md   |  185 ++
 .../Reference/styleguide/contributor-notes.md |    3 +
 .../Reference/styleguide/design-guidelines.md |   34 +
 .../styleguide/development-guidelines.md      |   37 +
 .../Reference/styleguide/maintenance-notes.md |   83 +
 .../styleguide/reference-guidelines.md        |  216 +++
 src/markdown/Reference/welcome/FAQ.md         |   22 +
 src/markdown/Reference/welcome/next_steps.md  |   24 +
 src/pages/reference/[name].js                 |   46 +
 src/pages/reference/index.js                  |   56 +
 .../{markdownRemark.frontmatter__slug}.js     |   30 +
 src/templates/reference-page.js               |   38 +
 29 files changed, 5517 insertions(+), 4 deletions(-)
 create mode 100644 gatsby-node.js
 create mode 100644 src/markdown/Reference/contributing/develop_contributor_notes.md
 create mode 100644 src/markdown/Reference/contributing/how_to_contribute.md
 create mode 100644 src/markdown/Reference/learning/community_tutorial_library.md
 create mode 100644 src/markdown/Reference/learning/ml5_glossary.md
 create mode 100644 src/markdown/Reference/reference/bodypix.md
 create mode 100644 src/markdown/Reference/reference/bodypose.md
 create mode 100644 src/markdown/Reference/reference/facemesh.md
 create mode 100644 src/markdown/Reference/reference/handpose.md
 create mode 100644 src/markdown/Reference/reference/image-classifier-tm.md
 create mode 100644 src/markdown/Reference/reference/image-classifier.md
 create mode 100644 src/markdown/Reference/reference/neural-network.md
 create mode 100644 src/markdown/Reference/reference/overview.md
 create mode 100644 src/markdown/Reference/reference/pose-estimation-tm.md
 create mode 100644 src/markdown/Reference/reference/sound-classifier-tm.md
 create mode 100644 src/markdown/Reference/reference/sound-classifier.md
 create mode 100644 src/markdown/Reference/styleguide/contributor-notes.md
 create mode 100644 src/markdown/Reference/styleguide/design-guidelines.md
 create mode 100644 src/markdown/Reference/styleguide/development-guidelines.md
 create mode 100644 src/markdown/Reference/styleguide/maintenance-notes.md
 create mode 100644 src/markdown/Reference/styleguide/reference-guidelines.md
 create mode 100644 src/markdown/Reference/welcome/FAQ.md
 create mode 100644 src/markdown/Reference/welcome/next_steps.md
 create mode 100644 src/pages/reference/[name].js
 create mode 100644 src/pages/reference/index.js
 create mode 100644 src/pages/reference/{markdownRemark.frontmatter__slug}.js
 create mode 100644 src/templates/reference-page.js

diff --git a/gatsby-config.js b/gatsby-config.js
index 60b0a76..f86018c 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -10,12 +10,19 @@ module.exports = {
     "gatsby-plugin-image",
     "gatsby-plugin-sharp",
     "gatsby-transformer-remark",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "reference",
+        path: `${__dirname}/src/markdown/Reference/`,
+      },
+    },
     {
       resolve: "gatsby-source-filesystem",
       options: {
         name: "markdown",
         path: `${__dirname}/src/markdown/`,
       },
-    },
+    }
   ],
-}
\ No newline at end of file
+}
diff --git a/gatsby-node.js b/gatsby-node.js
new file mode 100644
index 0000000..bc15757
--- /dev/null
+++ b/gatsby-node.js
@@ -0,0 +1,53 @@
+const path = require(`path`);
+const { createFilePath } = require(`gatsby-source-filesystem`);
+/*
+exports.onCreateNode = ({ node, getNode, actions }) => {
+  const { createNodeField } = actions;
+  if (node.internal.type === `MarkdownRemark`) {
+    const slug = createFilePath({ node, getNode, basePath: `reference` });
+    createNodeField({
+      node,
+      name: `slug`,
+      value: slug,
+    });
+  }
+};
+*/
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage } = actions;
+  return new Promise((resolve, reject) => {
+    graphql(`
+      query ReferencePagesQuery {
+        allMarkdownRemark(
+          filter: {fileAbsolutePath: {glob: "**/Reference/**"}}
+          sort: {frontmatter: {title: ASC}}
+        ) {
+          nodes {
+            id
+            frontmatter {
+              title
+              slug
+            }
+            url: gatsbyPath(filePath: "/reference/{markdownRemark.frontmatter__slug}")
+          }
+        }
+      }
+    `).then(result => {
+      console.log(result);
+      result.data.allMarkdownRemark.nodes.forEach((node) => {
+        console.log(node);
+        const slug = node.frontmatter.slug;
+        createPage({
+          path: node.url,
+          component: path.resolve(`./src/templates/reference-page.js`),
+          context: {
+            slug: slug,
+            title: node.frontmatter.title,
+            id: node.id
+          },
+        });
+      });
+      resolve();
+    });
+  });
+};
diff --git a/src/layout/Header.js b/src/layout/Header.js
index 3b0d2a0..9b01b84 100644
--- a/src/layout/Header.js
+++ b/src/layout/Header.js
@@ -60,7 +60,7 @@ const Header = () => {
           />
           <Button
             children="Reference"
-            url="https://ml5js.github.io/ml5-website-v02-docsify/#/reference/overview"
+            url="/reference"
             txtColor="var(--color-text-dark)"
             bgColor="var(--color-transparent)"
             fontSize="0.9rem"
@@ -92,4 +92,4 @@ const Header = () => {
   )
 }
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/markdown/Reference/contributing/develop_contributor_notes.md b/src/markdown/Reference/contributing/develop_contributor_notes.md
new file mode 100644
index 0000000..fb7c7cc
--- /dev/null
+++ b/src/markdown/Reference/contributing/develop_contributor_notes.md
@@ -0,0 +1,335 @@
+# Develop Contributor Notes
+
+*By ml5-library Dev Team* [(source)](https://github.com/ml5js/ml5-library/blob/main/CONTRIBUTING.md)
+
+> Welcome to the ml5 project! Developing ml5 is not just about developing machine learning software, it is about making machine learning approachable for a broad audience of artists, creative coders, and students. The library provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js with no other external dependencies. The library is supported by code examples, tutorials, and sample datasets with an emphasis on ethical computing. Bias in data, stereotypical harms, and responsible crowdsourcing are part of the documentation around data collection and usage. We're building **friendly** machine learning for the web - we're glad you're here!
+
+<center>
+    <img style="display:block; max-height:30rem" alt="friendly machine learning for the web" src="_media/contributing__header.png">
+</center>
+
+## The ml5 ecosystem (last updated: 24, May 2020) {docsify-ignore}
+
+ml5.js is comprised a number of sister repositories which you can find at the [ml5 github organization - github.com/ml5js](https://github.com/ml5js). As a contributor of ml5 you should be aware of the other parallel repositories of the ml5 project.
+
+- **The 2 main repositories you'll likely be working with**:
+  + [ml5-library](https://github.com/ml5js/ml5-library)
+    * this is the main ml5js library. When building the library, all of the files in the `/src` directory get bundled into the `ml5.js` library. Releases to the ml5 library get sent to `npm` and are hosted at https://unpkg.com/ (e.g. `https://unpkg.com/ml5@0.2.1/dist/ml5.min.js`). When adding new features or updates to the ml5 library, you should also add an example in the `examples/` subdirectory of this repo to showcase how your new feature works. Usually examples are submitted in a simple p5.js sketch, but they can also be in vanilla javascript.
+  + [ml5-website](https://github.com/ml5js/ml5-website)
+    * the ml5-website is what you see here: https://ml5js.org/. As we make changes to the ml5 API and examples, the website also needs to be updated. For now, we're working with a manual process to updating changes, but we're working on development processes to help sync all these efforts. For now, make sure to update the ml5-website when making changes to ml5-library and vice-versa.
+- **Data and models**:
+  + [ml5-data-and-models](https://github.com/ml5js/ml5-data-and-models)
+    * This repository stores data sets and pre-trained models you can use in ml5.js.
+  + [pix2pix_models](https://github.com/ml5js/pix2pix_models):
+    * A collection of pix2pix models
++ **Training your own models**:
+  + [training-lstm](https://github.com/ml5js/training-lstm)
+    * Multi-layer Recurrent Neural Networks (LSTM, RNN) for character-level language models in Python using Tensorflow and modified to work with tensorflow.js and ml5js
+  + [training-word2vec](https://github.com/ml5js/training-word2vec)
+    * How to train your own word2vec model for use with ml5.js
+  + [training-styletransfer](https://github.com/ml5js/training-styletransfer)
+    * This repository contains a slightly modified version of Fast Style Transfer in TensorFlow. It trains a neural network on the style of any image you provide it and outputs a model you can use in ml5.js with the ml5.styleTransfer() method.
+  + [training-pix2pix](https://github.com/ml5js/training-pix2pix)
+    *  documentation coming soon
+
+## Contributing Workflow {docsify-ignore}
+
+Preamble: If you're interested in to contribute to the ml5 project, just know you can always open an issue to ask questions or flag things that may seem confusing, unclear or intimidating. Our goal is to make ml5 as open and supportive as possible for those who want to be involved. Ok, now that's out of the way, here's how a general workflow for what contributions might look like to ml5.
+
+### For bug fixes
+1. you read the CONTRIBUTING.md docs ❤️
+2. you take a peek at the [issues](https://github.com/ml5js/ml5-library/issues) and identify one you'd like to address OR you file an issue about a bug you discovered. 🐛
+3. you make a comment on an existing issue or post your issue and indicate that you're curious to do your best to solve it 🔬
+4. you create a new branch on your `forked` copy of the ml5-library and call it something meaningful like `fix-detection-results`
+5. you jam on fixing the bug, commit your changes with meaningful commit messages, and push your changes to your bug fix branch (e.g. `fix-detection-results`)
+6. when ready, make a pull request to the `main` branch of ml5-library. Prepend "[NEEDS RELEASE]" to the title if the bug you found was in the current ml5 release - the version of ml5 which is on npm. 
+7. the ml5 dev team will review your changes and quite likely correspond with you on your changes. When all looks good, a `ready for release` label will be added to your PR and your changes will be merged in and release with the next public update to the library. 🎉
+8. hi-fives 👏 and hugs 🤗
+
+### For new features or feature additions/updates
+1. you read the CONTRIBUTING.md docs ❤️
+2. you take a peek at the [issues](https://github.com/ml5js/ml5-library/issues) and identify one you'd like to address OR you file an issue about the feature you're looking to add or update. 🐛
+3. you make a comment on an existing issue or post your issue and indicate that you're curious to do your best to add this to ml5-library 🔬
+4. you create a new branch on your `forked` copy of the ml5-library and call it something meaningful like `new-generative-model-x`
+5. you jam on your new feature, commit your changes with meaningful commit messages, and push your changes to your new feature branch (e.g. `new-generative-model-x`)
+6. you should also add an example of your new feature to the `examples/` directory so that other people can learn how to use your new feature.
+7. when ready, make a pull request to the `main` branch of ml5-library.
+8. the ml5 dev team will review your changes and quite likely correspond with you on your changes. When all looks good, your changes will be merged in. 🎉
+9. hi-fives 👏 and hugs 🤗
+
+**Now that you have a general impression for what this process might look like, you can get started!**
+
+## Getting Started {docsify-ignore}
+
+If you want to help develop this library, here are the steps to get started:
+
+
+### Setup
+
+We use node.js as our development environment for bundling code, running tests, and more. If you've never used node.js before, here's the steps to get node up and running on your machine. Installation requirements differ according to your computer's operating system. Please refer to the correct setup section for your specific environment
+
+- [windows]()
+- [macOS]()
+
+#### For Windows Users
+* Install node.js Version 10: https://nodejs.org/en/download/
+
+#### For macOS Users
+
+For mac users, we recommend installing nodejs through homebrew which is a package manager. Even further, we recommend installing nodejs using nvm which is a node version manager so that you can install different versions of nodejs and switch between them. You can skip all that and use install nodejs - https://nodejs.org/en/download/ - but we do recommend using homebrew, etc.
+
+This is how you can do this:
+
+**Install [homebrew](https://brew.sh/)**
+
+Open up your terminal and paste + enter:
+```sh
+/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
+```
+
+Next use homebrew to **install nvm and node** using the `brew` command (ref: https://www.wdiaz.org/how-to-install-nvm-with-homebrew/):
+
+```sh
+brew install nvm
+mkdir ~/.nvm
+nvm install node
+nvm install 10.15
+nvm use 10
+
+nvm run node --version
+```
+
+NOTE: you may need to add the reference to nvm and node into your `bash_profile` in which case you can paste the following into the `~/.bash_profile` or `~/.zshenv` file if you are using ZSH, or in `~/.bashrc` for BASH or `~/.zshrc` for ZSH ref: https://www.wdiaz.org/how-to-install-nvm-with-homebrew/):
+
+```sh
+export NVM_DIR="$HOME/.nvm"
+NVM_HOMEBREW="/usr/local/opt/nvm/nvm.sh"
+[ -s "$NVM_HOMEBREW" ] && \. "$NVM_HOMEBREW"
+```
+
+### Developing ml5
+
+1. Fork the repository to your account, and then clone it your computer:
+   ```bash
+   git clone https://github.com/YOURGITHUBHANDLE/ml5-library.git
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   cd ml5-library
+   npm install
+   ```
+
+3. This project is developed using [Webpack](https://webpack.js.org/). Webpack is a module bundler that "bundles" different files into one file. This file is usually called a library.
+
+  Under the `/src` folder there are sub-folders for all `ml5` methods. Before building the library, you can check to see everything is working:
+
+  - Run this command from the root of the project:
+    ```bash
+    npm run start
+    ```
+
+    That should output something similar to this:
+
+    ```bash
+    Project is running at http://localhost:8080/
+    webpack output is served from /
+
+    Hash: 16b80528bf532975b279
+    Version: webpack 2.6.1
+    Time: 4905ms
+      Asset     Size  Chunks                    Chunk Names
+    ml5.js  1.55 MB       0  [emitted]  [big]  main
+    chunk    {0} ml5.js (main) 1.5 MB [entry] [rendered]
+        [9] (webpack)/buildin/global.js 509 bytes {0} [built]
+      [191] ./src/index.js 403 bytes {0} [built]
+      [192] ./~/babel-polyfill/lib/index.js 833 bytes {0} [built]
+      [193] (webpack)-dev-server/client?http://localhost:8080 5.68 kB {0} [built]
+      [196] ./src/ImageNet/index.js 5.63 kB {0} [built]
+      [198] ./src/Lstm/index.js 7.7 kB {0} [built]
+      [200] ./src/NeuralNetwork/index.js 6.8 kB {0} [built]
+      [204] ./~/babel-polyfill/~/regenerator-runtime/runtime.js 24.4 kB {0} [built]
+      [404] ./~/core-js/shim.js 8.18 kB {0} [built]
+      [507] ./~/strip-ansi/index.js 161 bytes {0} [built]
+      [509] ./~/url/url.js 23.3 kB {0} [built]
+      [511] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
+      [512] (webpack)-dev-server/client/socket.js 897 bytes {0} [built]
+      [513] (webpack)/hot/emitter.js 77 bytes {0} [built]
+      [515] multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js 52 bytes {0} [built]
+        + 501 hidden modules
+    webpack: Compiled successfully.
+    ```
+    <center>
+    <img style="display:block;" alt="image of terminal window with webpack message" src="_media/contributing__ml5-webpack-build.png">
+    </center>
+    <center>
+    <img style="display:block;" alt="ml5.js shows compiled library" src="_media/contributing__ml5-localhost.png">
+    </center>
+
+    If you see this message, it means the project is actively being built by Webpack's `webpack-dev-server`. Any changes you make to any file in the `/src` folder will automatically rebuild the `ml5.js` and `ml5.min.js` libraries as long as the server continues to run.
+
+4. Develop!
+
+  Run this command from the root of the project:
+
+  ```bash
+  npm run manual-test
+  ```
+
+  This creates a new folder called `/manual-test` in the project's root folder. The `/manual-test` folder contains an `index.html` file with the following content:
+
+  ```html
+  <!DOCTYPE html>
+  <html>
+  <head>
+    <title>ml5.js manual test</title>
+    <script src="http://localhost:8080/ml5.js"></script>
+  </head>
+  <body>
+    <script>
+      // Your scripts would be written here
+    </script>
+  </body>
+  </html>
+  ```
+
+  This is just a simple `html` file that has a reference to the `ml5` library.
+
+  Next, open the `/src/index.js` file and add this after the last line:
+
+  ```js
+  console.log('Hello Test Development!');
+  ```
+
+  If you now go to `http://localhost:8080/` and open the console, you should see `Hello Test Development!`. As you make changes, you will simply need to reload the `index.html` page to see them.
+
+5. Once you have finished testing, you can build the library. Just close the `webpack-dev-server` and run
+
+  ```bash
+  npm run build
+  ```
+
+  That should output something very similar to the `webpack-dev-server` from step 3 but you'll notice at the end is this line:
+
+  ```bash
+  > webpack --config webpack.prod.babel.js
+  > Done in 15.13s.
+  ```
+
+  If you see this, it means the library was successfully built and minified.
+
+
+6. (OPTIONAL) Commit your changes. We are using [Commitizen](https://github.com/commitizen/cz-cli) to commit changes. Commitizen is a tool that allows you to specify commits in a more precise way. You can run it instead of your regular `git commit -m 'msg'` with:
+
+  ```bash
+  npm run commit
+  ```
+
+  That will show you an interactive prompt to commit:
+  ```bash
+  ? Select the type of change that you're committing: (Use arrow keys)
+  ❯ feat:     A new feature
+    fix:      A bug fix
+    docs:     Documentation only changes
+    style:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+    refactor: A code change that neither fixes a bug nor adds a feature
+    perf:     A code change that improves performance
+    test:     Adding missing tests or correcting existing tests
+  ```
+
+  Just be sure to add files before running commitizen!
+
+7. (OPTIONAL) Push your code and submit a Pull Request!
+
+## Running Unit Tests {docsify-ignore}
+
+
+We’re still rolling out all of our unit tests, but if you want to contribute to their development or just test with the models that have more robust unit tests in place:
+
+ - To run all tests continuously as you update
+   ```npm run test```
+
+ - To run all tests once
+   ```npm run test:single```
+
+ - To run a test on a single model
+   ```npm run test -- --model=YourModelNameHere```
+
+This last one is case sensitive!
+
+
+## Making Releases (For the ml5 core team) {docsify-ignore}
+
+**NOTE: This section needs to be updated to align with the new `main` branch structure.**
+
+Work in progress - we are working on making a few scripts to make it easier to make releases and deployments. For now, to address the long-winded process noted in https://github.com/ml5js/ml5-library/issues/387, we are experimenting with some devOps scripts.
+
+In the instance you're ready to make a new release from `development` to `release`:
+
+Steps:
+
+1. change the version number and checkout a new branch:
+
+```
+newversion=0.3.2 npm run release:prep
+```
+
+you'll be now in: `v0.3.2`
+
+2. update the readme
+
+```
+pversion=0.3.1 npm run update:readme
+```
+
+3. Run install & build
+
+```
+npm run release:build
+```
+
+4. Add and commit and push changes
+
+```
+npm run release:commitAndPush
+```
+
+5. Add tags and push
+
+```
+npm run release:tag
+```
+
+Go to Github and wait for tests to pass, then `squash and merge` the newly created `v0.3.2` branch to `development`;
+
+6. Go back to your terminal:
+
+  ```
+  npm run development:sync
+  ```
+
+7. Now go back to github and make a PR from `development` to `release`, wait for tests to pass, then `squash and merge` `development` into `release`
+
+8. Go back to your terminal:
+
+  ```
+  npm run release:sync
+  ```
+
+
+9. publish to npm
+
+```
+npm run publish:npm
+```
+
+10. Enter your multi-factor auth when prompted where it says `OTP` (one time password): `your OTP code`
+11. Your new npm version should be released! 
+12. Lastly, go to Github and document that new release with `release notes`.
+
+
+## Additional Resources {docsify-ignore}
+
+- [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
+- [How to Write an Open Source JavaScript Library](https://egghead.io/courses/how-to-write-an-open-source-javascript-library)
diff --git a/src/markdown/Reference/contributing/how_to_contribute.md b/src/markdown/Reference/contributing/how_to_contribute.md
new file mode 100644
index 0000000..b7e5ebd
--- /dev/null
+++ b/src/markdown/Reference/contributing/how_to_contribute.md
@@ -0,0 +1,12 @@
+# How To Contribute?
+
+<br/>
+Our community is always looking for enthusiasts to help in all different ways. 
+
+- · **Develop**. [GitHub](https://github.com/ml5js/ml5-library) is the main place where code is collected, issues are documented, and discussions about code are had. Check out the [contributing documentation to get started](/contributing/develop_contributor_notes.md) with developing the library.
+- · **Document**. Everyone loves documentation. Help is needed porting examples, and adding documentation, and creating tutorials.
+- · **Teach**. Teach a workshop, a class, a friend, a collaborator! Tag [@ml5js on Twitter](https://twitter.com/ml5js?lang=en) and we will do our best to share what you're doing.
+- · **Create**. ml5.js is looking for designers, artists, coders, programmers to bring your creative and amazing work to show and inspire other people. Submit your work to info@ml5js.org.
+- · **Donate**. ml5.js is a free and open source and made by artists. While ml5.js is not currently accepting donations, you can help support the development of ml5.js through a donation to other adjacent open source projects and endeavors such as the [Processing Foundation](https://processingfoundation.org/support).
+
+We welcome all forms of socially and technically driven contributions. No contribution is too small. If you need more information, please contact us at [@ml5js on twitter](https://twitter.com/ml5js), <a href="mailto:hello@ml5js.org">hello@ml5js.org</a>, or [Github](https://github.com/ml5js/ml5-library/issues).
\ No newline at end of file
diff --git a/src/markdown/Reference/learning/community_tutorial_library.md b/src/markdown/Reference/learning/community_tutorial_library.md
new file mode 100644
index 0000000..005d9b1
--- /dev/null
+++ b/src/markdown/Reference/learning/community_tutorial_library.md
@@ -0,0 +1,3 @@
+# Community Tutorial Library
+
+This library collects and showcases learning materials contributed by our ml5.js users. If you've ever thought while using ml5.js, "I wish they could elaborate more on this," we invite you to help us and other learners by creating the learning materials!
diff --git a/src/markdown/Reference/learning/ml5_glossary.md b/src/markdown/Reference/learning/ml5_glossary.md
new file mode 100644
index 0000000..c510dfb
--- /dev/null
+++ b/src/markdown/Reference/learning/ml5_glossary.md
@@ -0,0 +1,1484 @@
+# Ml5 Glossary
+
+<br/>
+
+Have you ever felt confused about a term we used here at ml5? No worries, we've got you covered! Check out this glossary. Here, we explain and define programming techniques and machine learning terms specific to ml5 that are mentioned in our libraries, website, and examples. 
+
+This glossary is designed to be editable by any ml5 user. If you have a term you'd like to add or update, please do! We'd love to hear from you. Click the `Edit Document` button on the top right of this page to see the source code and create a pull request. Please don’t mind if you don’t know what we are talking about, you can also contribute through this google form! 👉 [ml5 Glossary Contribution Form](https://docs.google.com/forms/d/e/1FAIpQLScJo6XU1-D1rDkuUIKSs7wx6svpZtw6p9vBPHdQvKPxpq-ERA/viewform?usp=pp_url)
+
+<!-- tabs:start -->
+
+#### **🔼 Fold**
+
+#### **C**
+
+---
+### Callback
+ml5.js is heavily inspired by the syntax, patterns and style of the [p5.js](https://p5js.org/) library. However, there are several differences in how asynchronous operations are handled by ml5.js. ml5.js supports both <b>error-first callbacks</b> and Promises in all methods.
+
+In [p5.js](https://p5js.org/), [callbacks](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) are passed as arguments to functions that often perform some asynchronous operation. For example, [p5.js](https://p5js.org/) defines the [**loadJSON()**](https://p5js.org/reference/#/p5/loadJSON) function as the following:
+
+```js
+loadJSON('http//example.com/data.json', (results) => {
+  // Do something with the results
+});
+```
+
+Notice that the results from the callback in [p5.js](https://p5js.org/) are given as the only argument to the function. There is no error argument in the callback.
+
+ml5.js, on the other hand, uses a pattern referred to as an <b>error-first callback</b>:
+
+> With this pattern, a callback function is passed to the method as an argument. When the operation either completes or an error is raised, the callback function is called with the Error object (if any) passed as the first argument. If no error was raised, the first argument will be passed as null. [Taken from the Node.js documentation](https://nodejs.org/api/errors.html#errors_error_first_callbacks)
+
+For example if you are using the **imageClassifier()** method, you will need to construct it in the following way:
+
+```js
+// Pass a callback function to constructor
+const classifier = ml5.imageClassifier('MobileNet', (err, model) => {
+  console.log('Model Loaded!');
+});
+
+// Make a prediction with the selected image and pass a callback function with two arguments
+classifier.predict(image, (err, results) => {
+  // Check for errors. If no errors, then do something with the results
+});
+```
+
+Error first callbacks is a convention common to many JavaScript libraries that we have chosen to adopt. The language JavaScript itself does not enforce this pattern. Keep in mind that most ml5.js methods and functions are asynchronous (machine learning models can take significant amounts of time to process inputs and generate outputs!). You will need to use the <b>error-first callback</b> pattern if you want to use callbacks.
+
+---
+### Confidence
+Confidence is a measure of how certain a machine learning model is about its prediction. For example, a machine learning model that is 100% confident in its prediction is certain that its prediction is correct. A machine learning model that is 0% confident in its prediction is certain that its prediction is incorrect.
+
+In a classification task, we may get a confidence score for each class. For example, a machine learning model that is trained to classify images of cats and dogs could make a prediction that an image is a cat with a confidence score of 0.8, and a prediction that an image is a dog with a confidence score of 0.2. And we will select the class with the highest confidence score as the prediction of the machine learning model.
+
+| Label | Confidence Score | Selected Class |
+|-------|------------------|----------------|
+| Cat   | 0.8              | ✅             |
+| Dog   | 0.2              |                |
+
+A similar example is given by the [Getting Started](/?id=your-first-sketch) of ml5 website. Here, we use the [Image Classifier](/reference/image-classifier) to classify an image of a bird and print out the label and confidence score of the prediction as follows:
+
+```js
+// A function to run when we get any errors and the results
+function gotResult(error, results) {
+  // Display error in the console
+  if (error) {
+    console.error(error);
+  } else {
+    // The results are in an array ordered by confidence.
+    console.log(results);
+    createDiv(`Label: ${results[0].label}`);
+    createDiv(`Confidence: ${nf(results[0].confidence, 0, 2)}`);
+  }
+}
+```
+
+An output of the above code is as follows:
+
+```js
+[
+  {
+    label: "robin, American robin, Turdus migratorius"
+    confidence: 0.9282158017158508
+  },
+  {
+    label: "worm fence, snake fence, snake-rail fence, Virginia fence"
+    confidence: 0.004057395737618208
+  },
+  {
+    label: "brambling, Fringilla montifringilla"
+    confidence: 0.0026653283275663853
+  }
+]
+```
+
+And we can see that the machine learning model is 92.82% confident that the image is a robin, and that is the selected class.
+
+| Label | Confidence Score | Selected Class |
+|-------|------------------|----------------|
+| robin, American robin, Turdus migratorius | 0.9282158017158508 | ✅ |
+| worm fence, snake fence, snake-rail fence, Virginia fence | 0.004057395737618208 | |
+| brambling, Fringilla montifringilla | 0.0026653283275663853 | |
+
+Let's take a look at another example in ml5.js, where the confidence score is used to represent how confident a machine learning model is about its prediction. The example given by the [BodyPose](/reference/bodypose) shows how to get the confidence score of each keypoint:
+
+```js
+for (let i = 0; i < poses.length; i++) {
+  for (let k = 0; k < poses[i].pose.keypoints.length; k++) {
+    // get each keypoint
+    let point = poses[i].pose.keypoints[k];
+
+    // get the position of each keypoint
+    let x = point.position.x;
+    let y = point.position.y;
+
+    // get the confidence score of each keypoint
+    let score = point.score;
+
+    // get the name of each keypoint
+    let partName = point.part;
+
+    // draw an ellipse at each keypoint
+    fill(0, 255, 0);
+    ellipse(x, y, 5, 5);
+
+    // mark the corresponding part name and confidence score at each keypoint
+    text(partName, x + 15, y + 5);
+    text(score.toFixed(2), x + 15, y + 20);
+  }
+}
+```
+We can use the confidence score to filter out keypoints that are not confident enough. For example, we can set a threshold of 0.5, and only draw keypoints that have a confidence score higher than 0.5:
+
+```js
+for (let i = 0; i < poses.length; i++) {
+  for (let k = 0; k < poses[i].pose.keypoints.length; k++) {
+    // get each keypoint
+    let point = poses[i].pose.keypoints[k];
+
+    // get the position of each keypoint
+    let x = point.position.x;
+    let y = point.position.y;
+
+    // get the confidence score of each keypoint
+    let score = point.score;
+
+    // get the name of each keypoint
+    let partName = point.part;
+
+    // only draw an ellipse at each keypoint if the confidence score is higher than 0.5
+    if (score > 0.5) {
+      // draw an ellipse at the keypoint
+      fill(0, 255, 0);
+      ellipse(x, y, 5, 5);
+
+      // mark the corresponding part name and confidence score at the keypoint
+      text(partName, x + 15, y + 5);
+      text(score.toFixed(2), x + 15, y + 20);
+    }
+  }
+}
+```
+
+---
+### Convolutional Neural Networks
+Convolutional Neural Networks (CNN) are [neural networks](/learning/ml5_glossary?id=neural-network) tuned for the compression of images and video data. They are widely used in computer vision tasks such as image classification, object detection, and image segmentation.
+
+Here is a simple explanation of how CNNs work:
+
+Imagine you want to teach a computer to recognize pictures of cats. A Convolutional Neural Network (CNN) is like a smart robot that learns to see and understand these pictures.
+
+1. Input Layer:
+
+The robot looks at the picture, but instead of seeing the whole thing at once, it looks at small pieces, like tiny squares. Each square is called a "pixel."
+
+| col1| col2| col3| col4|
+|-----|-----|-----|-----|
+| 120 | 50 | 200 | 75 |
+| 30  | 180| 100 | 220|
+| 90  | 45 | 150 | 25 |
+| 10  | 160| 80  | 120|
+
+2. Convolutional Layers:
+
+The robot then slides a magnifying glass (filter) over these squares, focusing on a few at a time. It's like paying attention to specific patterns, like edges or colors, in small regions.
+
+We apply the following filter to the input layer:
+
+| col1| col2| col3|
+|---|---|----|
+| 1 | 0 | -1 |
+| 1 | 0 | -1 |
+| 1 | 0 | -1 |
+
+And this is the result after applied the filter to the input layer:
+
+| col1| col2| col3|
+|---|---|----|
+| 70 | -170 | 75 |
+| 180 | 160 | -20 |
+| -15 | 75 | -160 |
+| -60 | 190 | 50 |
+
+3. Activation Layers:
+
+After looking at each region, the robot decides if it found something important. If it did, it gets excited and says, "Yep, there's a pattern here!" If not, it stays calm.
+
+This is the result after applied the activation function (ReLu) to the result of the convolutional layer:
+
+| col1| col2| col3|
+|---|---|----|
+| 70 | 0 | 75 |
+| 180 | 160 | 0 |
+| 0 | 75 | 0 |
+| 0 | 190 | 50 |
+
+4. Pooling Layers:
+
+To keep things simple, the robot doesn't need to remember every tiny detail. It takes a step back and groups nearby excited regions together, making a smaller version of the picture. This is like summarizing the important parts.
+
+After applying 2 x 2 max pooling to the result of the activation layer, we get the following result:
+
+| col1| col2|
+|---|---|
+| 180 | 75 |
+| 190 | 50 |
+
+5. Fully Connected Layers:
+
+Now, the robot thinks about the bigger picture. It looks at all the summarized information and decides, "Does this look like a cat or not?" It's making a final decision based on everything it has seen.
+
+Assuming two neurons in the fully connected layer:
+
+```js
+Neuron 1: 0.3 * (180 + 75) + 0.5 = 144.5
+Neuron 2: 0.8 * (190 + 50) - 0.2 = 155
+```
+
+6. Output Layer:
+
+Finally, the robot gives its answer. If it's confident that the picture is a cat, it says, "Yes, that's a cat!" If not, it might say, "I'm not sure, but it doesn't really look like a cat to me."
+The robot repeats this process many times, adjusting its magnifying glass and learning from its mistakes. Gradually, it becomes really good at spotting cats in pictures!
+
+Softmax result:
+- Cat Probability: 0.731 / (0.731 + 0.269) ≈ 0.731
+- Not Cat Probability: 0.269 / (0.731 + 0.269) ≈ 0.269
+
+So, in this complete example, the robot processes the input image through each step of the convolutional neural network (CNN) and ultimately predicts that the image contains a cat with a probability of approximately 73.1%.
+
+In short, a CNN is like a robot that breaks down pictures, looks for important patterns, and decides what's in the picture step by step. It's fantastic for tasks like image recognition!
+
+---
+### Classification
+Classification is the process of assigning a label to a piece of data. For example, a machine learning model that is trained to classify images of cats and dogs could assign the label "cat" to an image of a cat, and the label "dog" to an image of a dog. A classifier is the model that is trained to perform classification tasks.
+
+The prediction of classification task is a class.
+
+| Prediction |
+|------------|
+| Cat        |
+| Dog        |
+
+| Prediction |
+|------------|
+| Happy      |
+| Sad        |
+
+In contrast, the prediction of [regression](/learning/ml5_glossary?id=regression-analysis) task is a numerical value.
+
+| Prediction |
+|------------|
+| 0.8        |
+| 0.2        |
+
+
+#### **D**
+
+---
+### Dataset
+A dataset is a collection of data. Datasets are often used to train and test machine learning models. For example, a dataset of images of cats and dogs could be used to train a machine learning model to classify images of cats and dogs, and another dataset of images of cats and dogs could be used to test the performance of the machine learning model. You could compare the ground truth lables of the test dataset with the model predictions to evaluate the performance of the model.
+
+See an example of a training dataset and a test dataset below. 
+
+Training Dataset
+
+| Sample # | [Feature Vector](/learning/ml5_glossary?id=feature) | Label |
+|----------|----------------|-------|
+| sample 1 | (5.8, 0)       | Cat   |
+| sample 2 | (36, 2)        | Dog   |
+| sample 3 | (3.2, 1)       | Cat   |
+
+Test Dataset
+
+| Sample # | [Feature Vector](/learning/ml5_glossary?id=feature) | Prediction Label | Ground Truth Label |
+|----------|----------------|------------------|--------------------|
+| sample 1 | (4.5, 0)       | ?                | Cat                |
+| sample 2 | (30, 2)        | ?                | Dog                |
+
+In ml5.js, you could train custom machine learning models with your own training datasets. For instance, the example given by the [Neural Networks](/reference/neural-network) uses the following training dataset to train the model to predict the color of an object:
+
+```js
+// Step 1: load data or create some data 
+const data = [
+  {r:255, g:0, b:0, color:'red-ish'},
+  {r:254, g:0, b:0, color:'red-ish'},
+  {r:253, g:0, b:0, color:'red-ish'},
+  {r:0, g:255, b:0, color:'green-ish'},
+  {r:0, g:254, b:0, color:'green-ish'},
+  {r:0, g:253, b:0, color:'green-ish'},
+  {r:0, g:0, b:255, color:'blue-ish'},
+  {r:0, g:0, b:254, color:'blue-ish'},
+  {r:0, g:0, b:253, color:'blue-ish'}
+];
+```
+
+And use the following test dataset to test the performance of the model:
+
+```js
+// Step 6: make a classification
+function classify(){
+  const input = {
+    r: 255, 
+    g: 0, 
+    b: 0
+  }
+  nn.classify(input, handleResults);
+}
+```
+Here, the training dataset and test dataset are as follows:
+
+Training Dataset
+
+| Sample # | Feature Vector | Label     |
+|----------|----------------|-----------|
+| sample 1 | (255, 0, 0)    | red-ish   |
+| sample 2 | (254, 0, 0)    | red-ish   |
+| sample 3 | (253, 0, 0)    | red-ish   |
+| sample 4 | (0, 255, 0)    | green-ish |
+| sample 5 | (0, 254, 0)    | green-ish |
+| sample 6 | (0, 253, 0)    | green-ish |
+| sample 7 | (0, 0, 255)    | blue-ish  |
+| sample 8 | (0, 0, 254)    | blue-ish  |
+| sample 9 | (0, 0, 253)    | blue-ish  |
+
+Test Dataset
+
+| Sample # | Feature Vector | Prediction Label | Ground Truth Label |
+|----------|----------------|------------------|--------------------|
+| sample 1 | (255, 0, 0)    | ?                | red-ish            |
+
+
+---
+### Div
+A div is an HTML element that is used to define a section of a webpage. For instance, the following code defines a div and put a paragraph inside the div:
+
+```html
+<div>
+  <p>This is a paragraph.</p>
+</div>
+```
+
+In ml5.js, divs are often used to display the output of a machine learning model. For instance, the example given by the [Getting Started](/?id=your-first-sketch) uses the following code to display the label and confidence score of the prediction:
+
+```js
+// A function to run when we get any errors and the results
+function gotResult(error, results) {
+  // Display error in the console
+  if (error) {
+    console.error(error);
+  } else {
+    // The results are in an array ordered by confidence.
+    console.log(results);
+    createDiv(`Label: ${results[0].label}`);
+    createDiv(`Confidence: ${nf(results[0].confidence, 0, 2)}`);
+  }
+}
+```
+
+---
+### Dependencies
+Dependencies are libraries that are required by a project. The project may import the methods and functions from the dependencies to use them. Before you run your project, you need to install all the dependencies of the project to make sure that the project runs properly. 
+
+In ml5.js, you will install the dependencies of a project by running the following command:
+
+```js
+# install dependencies
+npm install
+```
+
+or
+
+```js
+# install dependencies
+yarn
+```
+
+#### **F**
+---
+### Feature
+A feature is an individual measurable property or characteristic of a phenomenon being observed. For example, a feature of a cat could be its weight, or the color of its fur. Here, we have three samples of data, each with two features (weight and color of the fur) and a label (cat or dog).
+
+| Sample # | Weight | Color of the fur | Label |
+|----------|--------|------------------|-------|
+| sample 1 | 5.8kg  | white            | Cat   |
+| sample 2 | 36kg   | golden           | Dog   |
+| sample 3 | 3.2kg  | black            | Cat   |
+
+In machine learning, features are used to represent the phenomenon being observed in a way that a machine learning algorithm can understand. For example, a cat could be represented by a feature vector of its weight and the color of its fur. Color could be represented as a number, such as 0 for white, 1 for black, and 2 for golden.
+
+| Sample # | Feature Vector | Label |
+|----------|----------------|-------|
+| sample 1 | (5.8, 0)       | Cat   |
+| sample 2 | (36, 2)        | Dog   |
+| sample 3 | (3.2, 1)       | Cat   |
+
+In ml5.js, features are often used to represent the input to a machine learning model. For instance, the example given by the [Neural Networks](/reference/neural-network) uses the following data to train the model to predict the color of an object:
+
+```js
+// Step 1: load data or create some data 
+const data = [
+  {r:255, g:0, b:0, color:'red-ish'},
+  {r:254, g:0, b:0, color:'red-ish'},
+  {r:253, g:0, b:0, color:'red-ish'},
+  {r:0, g:255, b:0, color:'green-ish'},
+  {r:0, g:254, b:0, color:'green-ish'},
+  {r:0, g:253, b:0, color:'green-ish'},
+  {r:0, g:0, b:255, color:'blue-ish'},
+  {r:0, g:0, b:254, color:'blue-ish'},
+  {r:0, g:0, b:253, color:'blue-ish'}
+];
+
+...
+
+// Step 4: add data to the neural network
+data.forEach(item => {
+  const inputs = {
+    r: item.r, 
+    g: item.g, 
+    b: item.b
+  };
+  const output = {
+    color: item.color
+  };
+
+  nn.addData(inputs, output);
+});
+
+...
+```
+
+Here, the example uses the values of red, green, and blue color channels as features.
+
+| Sample # | Feature Vector | Label     |
+|----------|----------------|-----------|
+| sample 1 | (255, 0, 0)    | red-ish   |
+| sample 2 | (254, 0, 0)    | red-ish   |
+| sample 3 | (253, 0, 0)    | red-ish   |
+| sample 4 | (0, 255, 0)    | green-ish |
+| sample 5 | (0, 254, 0)    | green-ish |
+| sample 6 | (0, 253, 0)    | green-ish |
+| sample 7 | (0, 0, 255)    | blue-ish  |
+| sample 8 | (0, 0, 254)    | blue-ish  |
+| sample 9 | (0, 0, 253)    | blue-ish  |
+
+#### **H**
+---
+### Hyperparameters
+Hyperparameters are parameters that are set by coders before training a machine learning model. They are often used to control the training process of a machine learning model, for instance, the batch size, the epochs, the learning rate, and the number of hidden layers, etc. Batch size is the number of samples that are used to update the weights of a machine learning model in one iteration. Epochs is the number of times that a machine learning model is trained on the entire training dataset. Learning rate is the step size at each iteration while moving toward a minimum of a loss function. The number of hidden layers is the number of layers between the input layer and the output layer of a machine learning model.
+
+An example on ml5.js website that uses hyperparameters is the [Neural Networks](/reference/neural-network) example. Here, we set the epochs to 32, and the batch size to 12:
+
+```js
+// Step 4: train the model
+function trainModel(){
+  const trainingOptions = {
+    epochs: 32,
+    batchSize: 12
+  }
+  nn.train(trainingOptions, finishedTraining);
+}
+```
+
+#### **L**
+---
+### Label
+Labels are used to identify the class or category of a phenomenon being observed. For example, a label of a cat image could be "cat". In the traning dataset, we need to provide the label for each sample of data to allow the model to learn the relationship between the features and the label. For example, the following training dataset contains three samples of data, each with two features (weight and color of the fur) and a label (cat or dog).
+
+| Sample # | Weight | Color of the fur | Label |
+|----------|--------|------------------|-------|
+| sample 1 | 5.8kg  | white            | Cat   |
+| sample 2 | 36kg   | golden           | Dog   |
+| sample 3 | 3.2kg  | black            | Cat   |
+
+And in the test dataset, the labels are the target that we want to predict. For example, the following test dataset contains two samples of data, each with two features (weight and color of the fur). And the model will decide what label to assign to the samples, with the features given.
+
+| Sample # | Weight | Color of the fur | Prediction Label |
+|----------|--------|------------------|------------------|
+| sample 1 | 4.5kg  | white            | ?                |
+| sample 2 | 30kg   | golden           | ?                |
+
+An example given by the [Neural Networks](/reference/neural-network) shows how we could assign labels to samples in the training dataset in ml5.js:
+
+```js
+// Step 1: load data or create some data
+const data = [
+  {r:255, g:0, b:0, color:'red-ish'},
+  {r:254, g:0, b:0, color:'red-ish'},
+  {r:253, g:0, b:0, color:'red-ish'},
+  {r:0, g:255, b:0, color:'green-ish'},
+  {r:0, g:254, b:0, color:'green-ish'},
+  {r:0, g:253, b:0, color:'green-ish'},
+  {r:0, g:0, b:255, color:'blue-ish'},
+  {r:0, g:0, b:254, color:'blue-ish'},
+  {r:0, g:0, b:253, color:'blue-ish'}
+];
+```
+
+Here, the label is the color of the object.
+
+| Label     |
+|-----------|
+| red-ish   |
+| green-ish |
+| blue-ish  |
+
+---
+### Local Development Server
+A local development server is a server that is used to launch/deploy a website or web application on a local machine, without connecting to the internet. People that are not connected to the same local network will not be able to access the website or web application. It is often used to test a website or web application before it is deployed to a production server. For example, if you run your application locally, usually it will have a URL like `http://localhost:8000/`, while you run your application on a production server, it will have a URL like `https://your-website.com/`.
+
+You could launch your ml5.js sketch by using the command below. For more information, please refer to the [Getting Started](/?id=try-ml5js-locally-3) guide.
+
+```js
+# run the local web server
+npm run develop
+```
+
+
+#### **M**
+---
+### MobileNet
+By [Ellen Nickles](https://github.com/ellennickles/)
+#### MobileNetV1 - Model Biography
+
+* **Description**
+  * MobileNet is a term that describes a type of machine learning model architecture that has been optimized to run on platforms with limited computational power, such as applications on mobile or embedded devices. MobileNets have several use cases, including image classification, object detection, and image segmentation. This particular MobileNet model was trained to detect people and 17 different key points on the body.
+  * ml5 defaults using a MobileNet created with TensorFlow.js, a JavaScript library from TensorFlow, an open source machine learning platform developed by Google.
+* **Developer and Year**
+  * Google’s TensorFlow.js team. The TensorFlow version was ported to TensorFlow.js by Dan Oved in collaboration with Google Researchers, George Papandreou and [Tyler (Lixuan) Zhu](https://research.google/people/TylerZhu/).
+* **Purpose and Intended Users**
+  * From the website: TensorFlow is an open source machine learning platform that “has a comprehensive, flexible ecosystem of tools, libraries, and community resources that lets researchers push the state-of-the-art in ML and developers easily build and deploy ML-powered applications.” This model is available for use in the ml5 library because Tensorflow licenses it with Apache License 2.0.
+* **Hosted Location**
+  * As of June 2019, ml5 imports MobileNetV1 from TensorFlow, hosted on the NPM database. This means that your ml5 sketch will automatically use the most recent version distributed on NPM. 
+* **ml5 Contributor and Year**
+  * Ported by Cristóbal Valenzuela in 2018
+* **References**
+  * Website [TensorFlow](https://www.tensorflow.org/)
+  * Developers [Dan Oved](https://www.danioved.com/), George Papandreou, and [Tyler (Lixuan) Zhu](https://research.google/people/TylerZhu/)
+  * ml5 Contributor [Cristóbal Valenzuela](https://cvalenzuelab.com/)
+  * GitHub Repository [TensorFlow.js Pose Detection in the Browser: PoseNet Model](https://github.com/tensorflow/tfjs-models/tree/master/posenet)
+  * NPM Readme [Pose Detection in the Browser: PoseNet Model](https://www.npmjs.com/package/@tensorflow-models/posenet)
+  * Article: [Real-time Human Pose Estimation in the Browser with TensorFlow.js](https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-tensorflow-js-7dd0bc881cd5)
+
+#### MobileNetV1 - Data Biography
+* **Description**
+  * According to Dan Oved, the model was trained on images from the COCO dataset.
+* **Source**
+  * From the website: The COCO dataset is managed by a number of collaborators from both academic and commercial organizations for “large-scale object detection, segmentation, and captioning,” and according to the paper, images were collected from Flickr. 
+* **Collector and Year**
+  * The COCO database began in 2014.
+* **Collection Method**
+  * COCO methods for collecting images and annotating pixels into segments are described  in the paper.
+* **Purpose and Intended Users**
+  * The COCO dataset was created to advance computer vision research. 
+* **References**
+  - TensorFlow.js PoseNet Developer [Dan Oved](https://www.danioved.com/)
+  - Paper [Microsoft COCO: Common Objects in Context](https://arxiv.org/abs/1405.0312)
+  - Website [Microsoft COCO: Common Objects in Context](http://cocodataset.org/#home)
+
+#### **N**
+---
+### Neuron
+
+In machine learning, a neuron mimics a biological neuron in brains and other parts of nervous systems. It exists as a distinct unit within a hidden layer of a [neural network](#neural-network). Each neuron is responsible for completing these two tasks:
+
+1. Calculates the weighted sum of input values multiplied by their corresponding weights.
+2. Passes the weighted sum as an input to an activation function.
+
+---
+### Neural Network
+
+<img align="right" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Neural_network_example.svg/220px-Neural_network_example.svg.png">
+
+Neural networks, also known as artificial neural networks (ANNs) or simulated neural networks (SNNs), are neural circuits of neurons. Neural networks are at the center of artificial intelligence and deep learning algorithms.
+
+Artificial neural networks (ANNs) are comprised of node layers, containing an input layer, one or more hidden layers, and an output layer. Each node, or [neuron](#neuron), connects to all of the nodes in the next layer. Each connection has an associated weight and threshold.
+
+Neural networks are widely used for predictive modeling, and AI applications where training via datasets is desired.
+
+In ml5.js, you can train your own neural network with `ml5.neuralNetwork`. For detailed documentation, please refer to [Neural Networks](../reference/neural-network.md).
+
+---
+### Normalization
+
+Normalization is a data preprocessing technique used to adjust the values of features in a dataset to a common scale, for example, converting a range of values to `-1` to `1`, or `0` to `1`.
+
+This is done to facilitate data analysis and modeling, and to reduce the impact of different sacales on the accuracy of machine learning models. Models usually train faster and produce better predictions when the numerical data is normalized.
+
+---
+### NPM
+NPM is a package manager for JavaScript. NPM is used to install and manage JavaScript libraries.
+
+You can find the npm package for ml5.js [here](https://www.npmjs.com/package/ml5).
+
+#### **O**
+---
+### Overfitting
+
+Overfitting is a phenomenon that occurs when a machine learning model is trained to fit the training data too closely. Since it fails to generalize the underlying information, the trained model often performs poorly on everything other than the training data.
+
+An example of overfitting is as follows:
+
+<img align="right" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcrunchingthedata.com%2Fwp-content%2Fuploads%2F2022%2F05%2FOverfitting.jpg&f=1&nofb=1&ipt=b9e8a7560cfac794e244c9e309994adff65eb9c68a53bcebaa5f7109c442c10c&ipo=images">
+
+Overfitting is the opposite of [underfitting](#underfitting).
+
+In ml5.js, overfitting can happen while training for a [neural network](#neural-network). Some common strategies to avoid overfitting include: training with more data, feature selection, regularization.
+
+#### **P**
+---
+### Promises
+ml5.js is heavily inspired by the syntax, patterns and style of the [p5.js](https://p5js.org/) library. However, there are several differences in how asynchronous operations are handled by ml5.js. ml5.js supports both <b>error-first callbacks</b> and Promises in all methods.
+
+ml5.js supports [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). If no callback is provided to any asynchronous function then a Promise is returned.
+
+With Promises, the image classification example can be used in the following way:
+
+```js
+// No callback needs to be passed to use Promises.
+ml5
+  .imageClassifier('MobileNet')
+  .then(classifier => classifier.predict(image))
+  .then((results) => {
+    // Do something with the results
+  });
+```
+
+For some video tutorials about Promises, you can find this [Coding Train playlist](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bKLPQvPRNNE65kBL62mVfx). There is also a [video tutorial about the ES6 arrow notation (**=>**)](https://youtu.be/mrYMzpbFz18).
+
+---
+### Prediction
+A prediction is the output of a machine learning model. For example, a machine learning model that is trained to classify images of cats and dogs could make a prediction that an image is a cat.
+
+---
+### Pretrained Model
+A pretrained model is a machine learning model that has been trained on a dataset. Pretrained models are often used to make predictions on new data. For example, a pretrained model that has been trained on a dataset of images of cats and dogs could be used to make predictions on new images of cats and dogs. In ml5.js, pretrained models are often used to make predictions on new data.
+
+---
+### Preload Function
+The preload function is a function that is called before the setup function. In ml5.js, the preload function is often used to load assets, such as images, before the setup function is called.
+
+#### **R**
+
+### Regression Analysis
+Regression analysis is a predictive modeling technique that analyzes the relation between the dependent variable and the independent variable in a dataset. Regression models are models used to carry out regression analysis.
+
+Two most common types of regression models are:
+- Linear regression model: a linear approach for modeling the relationship between two quantitative variables.
+
+<img align="center" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdatasciencelk.com%2Fwp-content%2Fuploads%2F2020%2F03%2Fregression-line.png&f=1&nofb=1&ipt=fee1072daa0e55b1206c9be1489e25c31be1c472009e761999d6c0672c91cd01&ipo=images" width="40%">
+<figcaption>A typical linear regression model</figcaption>
+
+- Logistic regression model: maps the relationship between discrete (i.e. 0 or 1, true or false) dependent variables to independent variables, often represented by [sigmoid functions](#sigmoid-function).
+
+<img align="center" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1450%2F1*QY3CSyA4BzAU6sEPFwp9ZQ.png&f=1&nofb=1&ipt=b1ede474256f60310c332de4a15d65bf041bb3c028ff015b380b2dc3f5982ae1&ipo=images" width="40%">
+<figcaption>A typical logistic regression model</figcaption>
+
+#### **S**
+---
+### Stride
+
+Stride is a component of [convolutional neural networks](#convolutional-neural-networks). It's a parameter of the neural network's filter that modifies the amount of movement over the image or video.
+
+For example, while performing convolution operation on an image, if we move our filter by one pixel at a time, the stride would be 1.
+
+In ml5.js, `strides` is a parameter in `imageClassification` layers.
+
+---
+### Score
+Score is a measure of how well a machine learning model performs on a given input. For example, a machine learning model that is 100% accurate has a score of 1. A machine learning model that is 0% accurate has a score of 0. In ml5.js, score is often used to evaluate the performance of a machine learning model.
+
+---
+### Score Threshold
+Score threshold is often used to control the minimum score required for a machine learning model to make a prediction. In ml5.js, score threshold is often used to control the minimum score required for a machine learning model to make a prediction.
+
+---
+### Sigmoid Function
+<img align="right" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Logistic-curve.svg/320px-Logistic-curve.svg.png">
+
+A sigmoid function is a mathematical function having a characteristic "S"-shaped curve, or sigmoid curve. 
+
+The logistic curve, on the right, is a common exmaple of sigmoid function.
+
+
+#### **T**
+---
+### Test Set
+Test set is a set of data used to test a machine learning model. Test data is used to evaluate the performance of a machine learning model. For example, a set of images of cats and dogs could be used to test a machine learning model to classify images of cats and dogs. In ml5.js, test data is often used to evaluate the performance of a custom machine learning model.
+
+---
+### Training Set
+Training set is a set of data used to train a machine learning model. Training data is used to train a machine learning model to make predictions. For example, a set of images of cats and dogs could be used to train a machine learning model to classify images of cats and dogs. In ml5.js, training set is often used to train a custom machine learning model.
+
+---
+### Terminal
+A terminal is a command line interface that is used to run commands on a computer. In ml5.js, a terminal is often used to run a [local development server](#local-development-server).
+
+#### **U**
+---
+### Underfitting
+Underfitting is a phenomenon that occurs when a machine learning model is trained to fit the training data too loosely. Underfitting can result in a machine learning model that is not meaningful at all, and performs badly on both training and new data.
+
+Underfitting is the opposite of [overfitting](#overfitting).
+
+#### **V**
+---
+### Validation
+Validation is the initial evaluation of a model's quality. Validation checks the quality of a model's predictions against the [validation set](#validation-set).
+
+Because the validation set differs from the [training set](#training-set), validation helps guard against [overfitting](#overfitting).
+
+Often, it's a good strategy to evaluate the model against the [validation set](#validation-set) as the first round of testing, then move on to evaluate it against the [test set](#test-set).
+
+---
+### Validation Set
+Validation set is the subset of the dataset that performs initial evaluation against a trained model.
+
+Traditionally, we divide the dataset into the three distinct subsets:
+- A [training set](#training-set)
+- A [validation set](#validation-set)
+- A [test set](#test-set)
+
+Ideally, each data point in the dataset should only belong to one of these three preceding subsets.
+
+#### **W**
+---
+### Weights
+Weights are parameters that are used to train a machine learning model.
+
+---
+### Weights Quantization
+Weights quantization is often used to reduce the size of a machine learning model.
+
+<!-- tabs:end -->
+
+<br/>
+
+<!-- tabs:start -->
+
+#### **🔼 Fold**
+
+#### **Web Application Development**
+---
+### Callback
+ml5.js is heavily inspired by the syntax, patterns and style of the [p5.js](https://p5js.org/) library. However, there are several differences in how asynchronous operations are handled by ml5.js. ml5.js supports both <b>error-first callbacks</b> and Promises in all methods.
+
+In [p5.js](https://p5js.org/), [callbacks](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) are passed as arguments to functions that often perform some asynchronous operation. For example, [p5.js](https://p5js.org/) defines the [**loadJSON()**](https://p5js.org/reference/#/p5/loadJSON) function as the following:
+
+```js
+loadJSON('http//example.com/data.json', (results) => {
+  // Do something with the results
+});
+```
+
+Notice that the results from the callback in [p5.js](https://p5js.org/) are given as the only argument to the function. There is no error argument in the callback.
+
+ml5.js, on the other hand, uses a pattern referred to as an <b>error-first callback</b>:
+
+> With this pattern, a callback function is passed to the method as an argument. When the operation either completes or an error is raised, the callback function is called with the Error object (if any) passed as the first argument. If no error was raised, the first argument will be passed as null. [Taken from the Node.js documentation](https://nodejs.org/api/errors.html#errors_error_first_callbacks)
+
+For example if you are using the **imageClassifier()** method, you will need to construct it in the following way:
+
+```js
+// Pass a callback function to constructor
+const classifier = ml5.imageClassifier('MobileNet', (err, model) => {
+  console.log('Model Loaded!');
+});
+
+// Make a prediction with the selected image and pass a callback function with two arguments
+classifier.predict(image, (err, results) => {
+  // Check for errors. If no errors, then do something with the results
+});
+```
+
+Error first callbacks is a convention common to many JavaScript libraries that we have chosen to adopt. The language JavaScript itself does not enforce this pattern. Keep in mind that most ml5.js methods and functions are asynchronous (machine learning models can take significant amounts of time to process inputs and generate outputs!). You will need to use the <b>error-first callback</b> pattern if you want to use callbacks.
+
+---
+### Div
+A div is an HTML element that is used to define a section of a webpage. For instance, the following code defines a div and put a paragraph inside the div:
+
+```html
+<div>
+  <p>This is a paragraph.</p>
+</div>
+```
+
+In ml5.js, divs are often used to display the output of a machine learning model. For instance, the example given by the [Getting Started](/?id=your-first-sketch) uses the following code to display the label and confidence score of the prediction:
+
+```js
+// A function to run when we get any errors and the results
+function gotResult(error, results) {
+  // Display error in the console
+  if (error) {
+    console.error(error);
+  } else {
+    // The results are in an array ordered by confidence.
+    console.log(results);
+    createDiv(`Label: ${results[0].label}`);
+    createDiv(`Confidence: ${nf(results[0].confidence, 0, 2)}`);
+  }
+}
+```
+
+---
+### Dependencies
+Dependencies are libraries that are required by a project. The project may import the methods and functions from the dependencies to use them. Before you run your project, you need to install all the dependencies of the project to make sure that the project runs properly. 
+
+In ml5.js, you will install the dependencies of a project by running the following command:
+
+```js
+# install dependencies
+npm install
+```
+
+or
+
+```js
+# install dependencies
+yarn
+```
+
+---
+### Local Development Server
+A local development server is a server that is used to launch/deploy a website or web application on a local machine, without connecting to the internet. People that are not connected to the same local network will not be able to access the website or web application. It is often used to test a website or web application before it is deployed to a production server. For example, if you run your application locally, usually it will have a URL like `http://localhost:8000/`, while you run your application on a production server, it will have a URL like `https://your-website.com/`.
+
+You could launch your ml5.js sketch by using the command below. For more information, please refer to the [Getting Started](/?id=try-ml5js-locally-3) guide.
+
+```js
+# run the local web server
+npm run develop
+```
+
+---
+### NPM
+NPM is a package manager for JavaScript. NPM is used to install and manage JavaScript libraries.
+
+You can find the npm package for ml5.js [here](https://www.npmjs.com/package/ml5).
+
+---
+### Promises
+ml5.js is heavily inspired by the syntax, patterns and style of the [p5.js](https://p5js.org/) library. However, there are several differences in how asynchronous operations are handled by ml5.js. ml5.js supports both <b>error-first callbacks</b> and Promises in all methods.
+
+ml5.js supports [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). If no callback is provided to any asynchronous function then a Promise is returned.
+
+With Promises, the image classification example can be used in the following way:
+
+```js
+// No callback needs to be passed to use Promises.
+ml5
+  .imageClassifier('MobileNet')
+  .then(classifier => classifier.predict(image))
+  .then((results) => {
+    // Do something with the results
+  });
+```
+
+For some video tutorials about Promises, you can find this [Coding Train playlist](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bKLPQvPRNNE65kBL62mVfx). There is also a [video tutorial about the ES6 arrow notation (**=>**)](https://youtu.be/mrYMzpbFz18).
+
+---
+### Preload Function
+The preload function is a function that is called before the setup function. In ml5.js, the preload function is often used to load assets, such as images, before the setup function is called.
+
+---
+### Terminal
+A terminal is a command line interface that is used to run commands on a computer. In ml5.js, a terminal is often used to run a [local development server](#local-development-server).
+
+#### **Machine Learning Essentials**
+
+---
+### Confidence
+Confidence is a measure of how certain a machine learning model is about its prediction. For example, a machine learning model that is 100% confident in its prediction is certain that its prediction is correct. A machine learning model that is 0% confident in its prediction is certain that its prediction is incorrect.
+
+In a classification task, we may get a confidence score for each class. For example, a machine learning model that is trained to classify images of cats and dogs could make a prediction that an image is a cat with a confidence score of 0.8, and a prediction that an image is a dog with a confidence score of 0.2. And we will select the class with the highest confidence score as the prediction of the machine learning model.
+
+| Label | Confidence Score | Selected Class |
+|-------|------------------|----------------|
+| Cat   | 0.8              | ✅             |
+| Dog   | 0.2              |                |
+
+A similar example is given by the [Getting Started](/?id=your-first-sketch) of ml5 website. Here, we use the [Image Classifier](/reference/image-classifier) to classify an image of a bird and print out the label and confidence score of the prediction as follows:
+
+```js
+// A function to run when we get any errors and the results
+function gotResult(error, results) {
+  // Display error in the console
+  if (error) {
+    console.error(error);
+  } else {
+    // The results are in an array ordered by confidence.
+    console.log(results);
+    createDiv(`Label: ${results[0].label}`);
+    createDiv(`Confidence: ${nf(results[0].confidence, 0, 2)}`);
+  }
+}
+```
+
+An output of the above code is as follows:
+
+```js
+[
+  {
+    label: "robin, American robin, Turdus migratorius"
+    confidence: 0.9282158017158508
+  },
+  {
+    label: "worm fence, snake fence, snake-rail fence, Virginia fence"
+    confidence: 0.004057395737618208
+  },
+  {
+    label: "brambling, Fringilla montifringilla"
+    confidence: 0.0026653283275663853
+  }
+]
+```
+
+And we can see that the machine learning model is 92.82% confident that the image is a robin, and that is the selected class.
+
+| Label | Confidence Score | Selected Class |
+|-------|------------------|----------------|
+| robin, American robin, Turdus migratorius | 0.9282158017158508 | ✅ |
+| worm fence, snake fence, snake-rail fence, Virginia fence | 0.004057395737618208 | |
+| brambling, Fringilla montifringilla | 0.0026653283275663853 | |
+
+Let's take a look at another example in ml5.js, where the confidence score is used to represent how confident a machine learning model is about its prediction. The example given by the [BodyPose](/reference/bodypose) shows how to get the confidence score of each keypoint:
+
+```js
+for (let i = 0; i < poses.length; i++) {
+  for (let k = 0; k < poses[i].pose.keypoints.length; k++) {
+    // get each keypoint
+    let point = poses[i].pose.keypoints[k];
+
+    // get the position of each keypoint
+    let x = point.position.x;
+    let y = point.position.y;
+
+    // get the confidence score of each keypoint
+    let score = point.score;
+
+    // get the name of each keypoint
+    let partName = point.part;
+
+    // draw an ellipse at each keypoint
+    fill(0, 255, 0);
+    ellipse(x, y, 5, 5);
+
+    // mark the corresponding part name and confidence score at each keypoint
+    text(partName, x + 15, y + 5);
+    text(score.toFixed(2), x + 15, y + 20);
+  }
+}
+```
+We can use the confidence score to filter out keypoints that are not confident enough. For example, we can set a threshold of 0.5, and only draw keypoints that have a confidence score higher than 0.5:
+
+```js
+for (let i = 0; i < poses.length; i++) {
+  for (let k = 0; k < poses[i].pose.keypoints.length; k++) {
+    // get each keypoint
+    let point = poses[i].pose.keypoints[k];
+
+    // get the position of each keypoint
+    let x = point.position.x;
+    let y = point.position.y;
+
+    // get the confidence score of each keypoint
+    let score = point.score;
+
+    // get the name of each keypoint
+    let partName = point.part;
+
+    // only draw an ellipse at each keypoint if the confidence score is higher than 0.5
+    if (score > 0.5) {
+      // draw an ellipse at the keypoint
+      fill(0, 255, 0);
+      ellipse(x, y, 5, 5);
+
+      // mark the corresponding part name and confidence score at the keypoint
+      text(partName, x + 15, y + 5);
+      text(score.toFixed(2), x + 15, y + 20);
+    }
+  }
+}
+```
+
+---
+### Classification
+Classification is the process of assigning a label to a piece of data. For example, a machine learning model that is trained to classify images of cats and dogs could assign the label "cat" to an image of a cat, and the label "dog" to an image of a dog. A classifier is the model that is trained to perform classification tasks.
+
+The prediction of classification task is a class.
+
+| Prediction |
+|------------|
+| Cat        |
+| Dog        |
+
+| Prediction |
+|------------|
+| Happy      |
+| Sad        |
+
+In contrast, the prediction of [regression](/learning/ml5_glossary?id=regression-analysis) task is a numerical value.
+
+| Prediction |
+|------------|
+| 0.8        |
+| 0.2        |
+
+---
+### Dataset
+A dataset is a collection of data. Datasets are often used to train and test machine learning models. For example, a dataset of images of cats and dogs could be used to train a machine learning model to classify images of cats and dogs, and another dataset of images of cats and dogs could be used to test the performance of the machine learning model. You could compare the ground truth lables of the test dataset with the model predictions to evaluate the performance of the model.
+
+See an example of a training dataset and a test dataset below. 
+
+Training Dataset
+
+| Sample # | [Feature Vector](/learning/ml5_glossary?id=feature) | Label |
+|----------|----------------|-------|
+| sample 1 | (5.8, 0)       | Cat   |
+| sample 2 | (36, 2)        | Dog   |
+| sample 3 | (3.2, 1)       | Cat   |
+
+Test Dataset
+
+| Sample # | [Feature Vector](/learning/ml5_glossary?id=feature) | Prediction Label | Ground Truth Label |
+|----------|----------------|------------------|--------------------|
+| sample 1 | (4.5, 0)       | ?                | Cat                |
+| sample 2 | (30, 2)        | ?                | Dog                |
+
+In ml5.js, you could train custom machine learning models with your own training datasets. For instance, the example given by the [Neural Networks](/reference/neural-network) uses the following training dataset to train the model to predict the color of an object:
+
+```js
+// Step 1: load data or create some data 
+const data = [
+  {r:255, g:0, b:0, color:'red-ish'},
+  {r:254, g:0, b:0, color:'red-ish'},
+  {r:253, g:0, b:0, color:'red-ish'},
+  {r:0, g:255, b:0, color:'green-ish'},
+  {r:0, g:254, b:0, color:'green-ish'},
+  {r:0, g:253, b:0, color:'green-ish'},
+  {r:0, g:0, b:255, color:'blue-ish'},
+  {r:0, g:0, b:254, color:'blue-ish'},
+  {r:0, g:0, b:253, color:'blue-ish'}
+];
+```
+
+And use the following test dataset to test the performance of the model:
+
+```js
+// Step 6: make a classification
+function classify(){
+  const input = {
+    r: 255, 
+    g: 0, 
+    b: 0
+  }
+  nn.classify(input, handleResults);
+}
+```
+Here, the training dataset and test dataset are as follows:
+
+Training Dataset
+
+| Sample # | Feature Vector | Label     |
+|----------|----------------|-----------|
+| sample 1 | (255, 0, 0)    | red-ish   |
+| sample 2 | (254, 0, 0)    | red-ish   |
+| sample 3 | (253, 0, 0)    | red-ish   |
+| sample 4 | (0, 255, 0)    | green-ish |
+| sample 5 | (0, 254, 0)    | green-ish |
+| sample 6 | (0, 253, 0)    | green-ish |
+| sample 7 | (0, 0, 255)    | blue-ish  |
+| sample 8 | (0, 0, 254)    | blue-ish  |
+| sample 9 | (0, 0, 253)    | blue-ish  |
+
+Test Dataset
+
+| Sample # | Feature Vector | Prediction Label | Ground Truth Label |
+|----------|----------------|------------------|--------------------|
+| sample 1 | (255, 0, 0)    | ?                | red-ish            |
+
+---
+### Feature
+A feature is an individual measurable property or characteristic of a phenomenon being observed. For example, a feature of a cat could be its weight, or the color of its fur. Here, we have three samples of data, each with two features (weight and color of the fur) and a label (cat or dog).
+
+| Sample # | Weight | Color of the fur | Label |
+|----------|--------|------------------|-------|
+| sample 1 | 5.8kg  | white            | Cat   |
+| sample 2 | 36kg   | golden           | Dog   |
+| sample 3 | 3.2kg  | black            | Cat   |
+
+In machine learning, features are used to represent the phenomenon being observed in a way that a machine learning algorithm can understand. For example, a cat could be represented by a feature vector of its weight and the color of its fur. Color could be represented as a number, such as 0 for white, 1 for black, and 2 for golden.
+
+| Sample # | Feature Vector | Label |
+|----------|----------------|-------|
+| sample 1 | (5.8, 0)       | Cat   |
+| sample 2 | (36, 2)        | Dog   |
+| sample 3 | (3.2, 1)       | Cat   |
+
+In ml5.js, features are often used to represent the input to a machine learning model. For instance, the example given by the [Neural Networks](/reference/neural-network) uses the following data to train the model to predict the color of an object:
+
+```js
+// Step 1: load data or create some data 
+const data = [
+  {r:255, g:0, b:0, color:'red-ish'},
+  {r:254, g:0, b:0, color:'red-ish'},
+  {r:253, g:0, b:0, color:'red-ish'},
+  {r:0, g:255, b:0, color:'green-ish'},
+  {r:0, g:254, b:0, color:'green-ish'},
+  {r:0, g:253, b:0, color:'green-ish'},
+  {r:0, g:0, b:255, color:'blue-ish'},
+  {r:0, g:0, b:254, color:'blue-ish'},
+  {r:0, g:0, b:253, color:'blue-ish'}
+];
+
+...
+
+// Step 4: add data to the neural network
+data.forEach(item => {
+  const inputs = {
+    r: item.r, 
+    g: item.g, 
+    b: item.b
+  };
+  const output = {
+    color: item.color
+  };
+
+  nn.addData(inputs, output);
+});
+
+...
+```
+
+Here, the example uses the values of red, green, and blue color channels as features.
+
+| Sample # | Feature Vector | Label     |
+|----------|----------------|-----------|
+| sample 1 | (255, 0, 0)    | red-ish   |
+| sample 2 | (254, 0, 0)    | red-ish   |
+| sample 3 | (253, 0, 0)    | red-ish   |
+| sample 4 | (0, 255, 0)    | green-ish |
+| sample 5 | (0, 254, 0)    | green-ish |
+| sample 6 | (0, 253, 0)    | green-ish |
+| sample 7 | (0, 0, 255)    | blue-ish  |
+| sample 8 | (0, 0, 254)    | blue-ish  |
+| sample 9 | (0, 0, 253)    | blue-ish  |
+
+---
+### Hyperparameters
+Hyperparameters are parameters that are set by coders before training a machine learning model. They are often used to control the training process of a machine learning model, for instance, the batch size, the epochs, the learning rate, and the number of hidden layers, etc. Batch size is the number of samples that are used to update the weights of a machine learning model in one iteration. Epochs is the number of times that a machine learning model is trained on the entire training dataset. Learning rate is the step size at each iteration while moving toward a minimum of a loss function. The number of hidden layers is the number of layers between the input layer and the output layer of a machine learning model.
+
+An example on ml5.js website that uses hyperparameters is the [Neural Networks](/reference/neural-network) example. Here, we set the epochs to 32, and the batch size to 12:
+
+```js
+// Step 4: train the model
+function trainModel(){
+  const trainingOptions = {
+    epochs: 32,
+    batchSize: 12
+  }
+  nn.train(trainingOptions, finishedTraining);
+}
+```
+
+---
+### Label
+Labels are used to identify the class or category of a phenomenon being observed. For example, a label of a cat image could be "cat". In the traning dataset, we need to provide the label for each sample of data to allow the model to learn the relationship between the features and the label. For example, the following training dataset contains three samples of data, each with two features (weight and color of the fur) and a label (cat or dog).
+
+| Sample # | Weight | Color of the fur | Label |
+|----------|--------|------------------|-------|
+| sample 1 | 5.8kg  | white            | Cat   |
+| sample 2 | 36kg   | golden           | Dog   |
+| sample 3 | 3.2kg  | black            | Cat   |
+
+And in the test dataset, the labels are the target that we want to predict. For example, the following test dataset contains two samples of data, each with two features (weight and color of the fur). And the model will decide what label to assign to the samples, with the features given.
+
+| Sample # | Weight | Color of the fur | Prediction Label |
+|----------|--------|------------------|------------------|
+| sample 1 | 4.5kg  | white            | ?                |
+| sample 2 | 30kg   | golden           | ?                |
+
+An example given by the [Neural Networks](/reference/neural-network) shows how we could assign labels to samples in the training dataset in ml5.js:
+
+```js
+// Step 1: load data or create some data
+const data = [
+  {r:255, g:0, b:0, color:'red-ish'},
+  {r:254, g:0, b:0, color:'red-ish'},
+  {r:253, g:0, b:0, color:'red-ish'},
+  {r:0, g:255, b:0, color:'green-ish'},
+  {r:0, g:254, b:0, color:'green-ish'},
+  {r:0, g:253, b:0, color:'green-ish'},
+  {r:0, g:0, b:255, color:'blue-ish'},
+  {r:0, g:0, b:254, color:'blue-ish'},
+  {r:0, g:0, b:253, color:'blue-ish'}
+];
+```
+
+Here, the label is the color of the object.
+
+| Label     |
+|-----------|
+| red-ish   |
+| green-ish |
+| blue-ish  |
+
+---
+### Normalization
+
+Normalization is a data preprocessing technique used to adjust the values of features in a dataset to a common scale, for example, converting a range of values to `-1` to `1`, or `0` to `1`.
+
+This is done to facilitate data analysis and modeling, and to reduce the impact of different sacales on the accuracy of machine learning models. Models usually train faster and produce better predictions when the numerical data is normalized.
+
+---
+### Overfitting
+
+Overfitting is a phenomenon that occurs when a machine learning model is trained to fit the training data too closely. Since it fails to generalize the underlying information, the trained model often performs poorly on everything other than the training data.
+
+An example of overfitting is as follows:
+
+<img align="right" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcrunchingthedata.com%2Fwp-content%2Fuploads%2F2022%2F05%2FOverfitting.jpg&f=1&nofb=1&ipt=b9e8a7560cfac794e244c9e309994adff65eb9c68a53bcebaa5f7109c442c10c&ipo=images">
+
+Overfitting is the opposite of [underfitting](#underfitting).
+
+In ml5.js, overfitting can happen while training for a [neural network](#neural-network). Some common strategies to avoid overfitting include: training with more data, feature selection, regularization.
+
+---
+### Prediction
+A prediction is the output of a machine learning model. For example, a machine learning model that is trained to classify images of cats and dogs could make a prediction that an image is a cat.
+
+---
+### Pretrained Model
+A pretrained model is a machine learning model that has been trained on a dataset. Pretrained models are often used to make predictions on new data. For example, a pretrained model that has been trained on a dataset of images of cats and dogs could be used to make predictions on new images of cats and dogs. In ml5.js, pretrained models are often used to make predictions on new data.
+
+---
+### Regression Analysis
+Regression analysis is a predictive modeling technique that analyzes the relation between the dependent variable and the independent variable in a dataset. Regression models are models used to carry out regression analysis.
+
+Two most common types of regression models are:
+- Linear regression model: a linear approach for modeling the relationship between two quantitative variables.
+
+<img align="center" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdatasciencelk.com%2Fwp-content%2Fuploads%2F2020%2F03%2Fregression-line.png&f=1&nofb=1&ipt=fee1072daa0e55b1206c9be1489e25c31be1c472009e761999d6c0672c91cd01&ipo=images" width="40%">
+<figcaption>A typical linear regression model</figcaption>
+
+- Logistic regression model: maps the relationship between discrete (i.e. 0 or 1, true or false) dependent variables to independent variables, often represented by [sigmoid functions](#sigmoid-function).
+
+<img align="center" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmiro.medium.com%2Fmax%2F1450%2F1*QY3CSyA4BzAU6sEPFwp9ZQ.png&f=1&nofb=1&ipt=b1ede474256f60310c332de4a15d65bf041bb3c028ff015b380b2dc3f5982ae1&ipo=images" width="40%">
+<figcaption>A typical logistic regression model</figcaption>
+
+---
+### Score
+Score is a measure of how well a machine learning model performs on a given input. For example, a machine learning model that is 100% accurate has a score of 1. A machine learning model that is 0% accurate has a score of 0. In ml5.js, score is often used to evaluate the performance of a machine learning model.
+
+---
+### Score Threshold
+Score threshold is often used to control the minimum score required for a machine learning model to make a prediction. In ml5.js, score threshold is often used to control the minimum score required for a machine learning model to make a prediction.
+
+---
+### Test Set
+Test set is a set of data used to test a machine learning model. Test data is used to evaluate the performance of a machine learning model. For example, a set of images of cats and dogs could be used to test a machine learning model to classify images of cats and dogs. In ml5.js, test data is often used to evaluate the performance of a custom machine learning model.
+
+---
+### Training Set
+Training set is a set of data used to train a machine learning model. Training data is used to train a machine learning model to make predictions. For example, a set of images of cats and dogs could be used to train a machine learning model to classify images of cats and dogs. In ml5.js, training set is often used to train a custom machine learning model.
+
+---
+### Underfitting
+Underfitting is a phenomenon that occurs when a machine learning model is trained to fit the training data too loosely. Underfitting can result in a machine learning model that is not meaningful at all, and performs badly on both training and new data.
+
+Underfitting is the opposite of [overfitting](#overfitting).
+
+---
+### Validation
+Validation is the initial evaluation of a model's quality. Validation checks the quality of a model's predictions against the [validation set](#validation-set).
+
+Because the validation set differs from the [training set](#training-set), validation helps guard against [overfitting](#overfitting).
+
+Often, it's a good strategy to evaluate the model against the [validation set](#validation-set) as the first round of testing, then move on to evaluate it against the [test set](#test-set).
+
+---
+### Validation Set
+Validation set is the subset of the dataset that performs initial evaluation against a trained model.
+
+Traditionally, we divide the dataset into the three distinct subsets:
+- A [training set](#training-set)
+- A [validation set](#validation-set)
+- A [test set](#test-set)
+
+Ideally, each data point in the dataset should only belong to one of these three preceding subsets.
+
+#### **Deep Learning**
+---
+### Neural Network
+
+<img align="right" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Neural_network_example.svg/220px-Neural_network_example.svg.png">
+
+Neural networks, also known as artificial neural networks (ANNs) or simulated neural networks (SNNs), are neural circuits of neurons. Neural networks are at the center of artificial intelligence and deep learning algorithms.
+
+Artificial neural networks (ANNs) are comprised of node layers, containing an input layer, one or more hidden layers, and an output layer. Each node, or [neuron](#neuron), connects to all of the nodes in the next layer. Each connection has an associated weight and threshold.
+
+Neural networks are widely used for predictive modeling, and AI applications where training via datasets is desired.
+
+In ml5.js, you can train your own neural network with `ml5.neuralNetwork`. For detailed documentation, please refer to [Neural Networks](../reference/neural-network.md).
+
+---
+### Convolutional Neural Networks
+Convolutional Neural Networks (CNN) are [neural networks](/learning/ml5_glossary?id=neural-network) tuned for the compression of images and video data. They are widely used in computer vision tasks such as image classification, object detection, and image segmentation.
+
+Here is a simple explanation of how CNNs work:
+
+Imagine you want to teach a computer to recognize pictures of cats. A Convolutional Neural Network (CNN) is like a smart robot that learns to see and understand these pictures.
+
+1. Input Layer:
+
+The robot looks at the picture, but instead of seeing the whole thing at once, it looks at small pieces, like tiny squares. Each square is called a "pixel."
+
+| col1| col2| col3| col4|
+|-----|-----|-----|-----|
+| 120 | 50 | 200 | 75 |
+| 30  | 180| 100 | 220|
+| 90  | 45 | 150 | 25 |
+| 10  | 160| 80  | 120|
+
+2. Convolutional Layers:
+
+The robot then slides a magnifying glass (filter) over these squares, focusing on a few at a time. It's like paying attention to specific patterns, like edges or colors, in small regions.
+
+We apply the following filter to the input layer:
+
+| col1| col2| col3|
+|---|---|----|
+| 1 | 0 | -1 |
+| 1 | 0 | -1 |
+| 1 | 0 | -1 |
+
+And this is the result after applied the filter to the input layer:
+
+| col1| col2| col3|
+|---|---|----|
+| 70 | -170 | 75 |
+| 180 | 160 | -20 |
+| -15 | 75 | -160 |
+| -60 | 190 | 50 |
+
+3. Activation Layers:
+
+After looking at each region, the robot decides if it found something important. If it did, it gets excited and says, "Yep, there's a pattern here!" If not, it stays calm.
+
+This is the result after applied the activation function (ReLu) to the result of the convolutional layer:
+
+| col1| col2| col3|
+|---|---|----|
+| 70 | 0 | 75 |
+| 180 | 160 | 0 |
+| 0 | 75 | 0 |
+| 0 | 190 | 50 |
+
+4. Pooling Layers:
+
+To keep things simple, the robot doesn't need to remember every tiny detail. It takes a step back and groups nearby excited regions together, making a smaller version of the picture. This is like summarizing the important parts.
+
+After applying 2 x 2 max pooling to the result of the activation layer, we get the following result:
+
+| col1| col2|
+|---|---|
+| 180 | 75 |
+| 190 | 50 |
+
+5. Fully Connected Layers:
+
+Now, the robot thinks about the bigger picture. It looks at all the summarized information and decides, "Does this look like a cat or not?" It's making a final decision based on everything it has seen.
+
+Assuming two neurons in the fully connected layer:
+
+```js
+Neuron 1: 0.3 * (180 + 75) + 0.5 = 144.5
+Neuron 2: 0.8 * (190 + 50) - 0.2 = 155
+```
+
+6. Output Layer:
+
+Finally, the robot gives its answer. If it's confident that the picture is a cat, it says, "Yes, that's a cat!" If not, it might say, "I'm not sure, but it doesn't really look like a cat to me."
+The robot repeats this process many times, adjusting its magnifying glass and learning from its mistakes. Gradually, it becomes really good at spotting cats in pictures!
+
+Softmax result:
+- Cat Probability: 0.731 / (0.731 + 0.269) ≈ 0.731
+- Not Cat Probability: 0.269 / (0.731 + 0.269) ≈ 0.269
+
+So, in this complete example, the robot processes the input image through each step of the convolutional neural network (CNN) and ultimately predicts that the image contains a cat with a probability of approximately 73.1%.
+
+In short, a CNN is like a robot that breaks down pictures, looks for important patterns, and decides what's in the picture step by step. It's fantastic for tasks like image recognition!
+
+---
+### MobileNet
+By [Ellen Nickles](https://github.com/ellennickles/)
+#### MobileNetV1 - Model Biography
+
+* **Description**
+  * MobileNet is a term that describes a type of machine learning model architecture that has been optimized to run on platforms with limited computational power, such as applications on mobile or embedded devices. MobileNets have several use cases, including image classification, object detection, and image segmentation. This particular MobileNet model was trained to detect people and 17 different key points on the body.
+  * ml5 defaults using a MobileNet created with TensorFlow.js, a JavaScript library from TensorFlow, an open source machine learning platform developed by Google.
+* **Developer and Year**
+  * Google’s TensorFlow.js team. The TensorFlow version was ported to TensorFlow.js by Dan Oved in collaboration with Google Researchers, George Papandreou and [Tyler (Lixuan) Zhu](https://research.google/people/TylerZhu/).
+* **Purpose and Intended Users**
+  * From the website: TensorFlow is an open source machine learning platform that “has a comprehensive, flexible ecosystem of tools, libraries, and community resources that lets researchers push the state-of-the-art in ML and developers easily build and deploy ML-powered applications.” This model is available for use in the ml5 library because Tensorflow licenses it with Apache License 2.0.
+* **Hosted Location**
+  * As of June 2019, ml5 imports MobileNetV1 from TensorFlow, hosted on the NPM database. This means that your ml5 sketch will automatically use the most recent version distributed on NPM. 
+* **ml5 Contributor and Year**
+  * Ported by Cristóbal Valenzuela in 2018
+* **References**
+  * Website [TensorFlow](https://www.tensorflow.org/)
+  * Developers [Dan Oved](https://www.danioved.com/), George Papandreou, and [Tyler (Lixuan) Zhu](https://research.google/people/TylerZhu/)
+  * ml5 Contributor [Cristóbal Valenzuela](https://cvalenzuelab.com/)
+  * GitHub Repository [TensorFlow.js Pose Detection in the Browser: PoseNet Model](https://github.com/tensorflow/tfjs-models/tree/master/posenet)
+  * NPM Readme [Pose Detection in the Browser: PoseNet Model](https://www.npmjs.com/package/@tensorflow-models/posenet)
+  * Article: [Real-time Human Pose Estimation in the Browser with TensorFlow.js](https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-tensorflow-js-7dd0bc881cd5)
+
+#### MobileNetV1 - Data Biography
+* **Description**
+  * According to Dan Oved, the model was trained on images from the COCO dataset.
+* **Source**
+  * From the website: The COCO dataset is managed by a number of collaborators from both academic and commercial organizations for “large-scale object detection, segmentation, and captioning,” and according to the paper, images were collected from Flickr. 
+* **Collector and Year**
+  * The COCO database began in 2014.
+* **Collection Method**
+  * COCO methods for collecting images and annotating pixels into segments are described  in the paper.
+* **Purpose and Intended Users**
+  * The COCO dataset was created to advance computer vision research. 
+* **References**
+  - TensorFlow.js PoseNet Developer [Dan Oved](https://www.danioved.com/)
+  - Paper [Microsoft COCO: Common Objects in Context](https://arxiv.org/abs/1405.0312)
+  - Website [Microsoft COCO: Common Objects in Context](http://cocodataset.org/#home)
+
+---
+### Neuron
+
+In machine learning, a neuron mimics a biological neuron in brains and other parts of nervous systems. It exists as a distinct unit within a hidden layer of a [neural network](#neural-network). Each neuron is responsible for completing these two tasks:
+
+1. Calculates the weighted sum of input values multiplied by their corresponding weights.
+2. Passes the weighted sum as an input to an activation function.
+
+---
+### Stride
+
+Stride is a component of [convolutional neural networks](#convolutional-neural-networks). It's a parameter of the neural network's filter that modifies the amount of movement over the image or video.
+
+For example, while performing convolution operation on an image, if we move our filter by one pixel at a time, the stride would be 1.
+
+In ml5.js, `strides` is a parameter in `imageClassification` layers.
+
+---
+### Sigmoid Function
+<img align="right" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Logistic-curve.svg/320px-Logistic-curve.svg.png">
+
+A sigmoid function is a mathematical function having a characteristic "S"-shaped curve, or sigmoid curve. 
+
+The logistic curve, on the right, is a common exmaple of sigmoid function.
+
+---
+### Weights
+Weights are parameters that are used to train a machine learning model.
+
+---
+### Weights Quantization
+Weights quantization is often used to reduce the size of a machine learning model.
+
+<!-- tabs:end -->
\ No newline at end of file
diff --git a/src/markdown/Reference/reference/bodypix.md b/src/markdown/Reference/reference/bodypix.md
new file mode 100644
index 0000000..a405fc0
--- /dev/null
+++ b/src/markdown/Reference/reference/bodypix.md
@@ -0,0 +1,104 @@
+---
+slug: "/models/bodypix"
+title: "BodyPix"
+---
+
+# BodyPix
+
+
+<center>
+    <img style="display:block; max-height:20rem" alt="BodyPix Header Image of Harriet Tubman" src="_media/reference__header-bodypix.png">
+</center>
+
+
+## Description
+As written by the developers of BodyPix:
+
+"Bodypix is an open-source machine learning model which allows for person and body-part segmentation in the browser with TensorFlow.js. In computer vision, image segmentation refers to the technique of grouping pixels in an image into semantic areas typically to locate objects and boundaries. The BodyPix model is trained to do this for a person and twenty-four body parts (parts such as the left hand, front right lower leg, or back torso). In other words, BodyPix can classify the pixels of an image into two categories: 1) pixels that represent a person and 2) pixels that represent background. It can further classify pixels representing a person into any one of twenty-four body parts."
+
+## Quickstart
+
+```js
+const bodypix = ml5.bodyPix(modelReady);
+
+function modelReady() {
+  // segment the image given
+  bodypix.segment(img, gotResults);
+}
+
+function gotResults(error, result) {
+  if (error) {
+    console.log(error);
+    return;
+  }
+  // log the result
+  console.log(result.backgroundMask);
+}
+```
+
+### Description
+
+As written by the developers of BodyPix:
+
+"Bodypix is an open-source machine learning model which allows for person and body-part segmentation in the browser with TensorFlow.js. In computer vision, image segmentation refers to the technique of grouping pixels in an image into semantic areas typically to locate objects and boundaries. The BodyPix model is trained to do this for a person and twenty-four body parts (parts such as the left hand, front right lower leg, or back torso). In other words, BodyPix can classify the pixels of an image into two categories: 1. pixels that represent a person and 2. pixels that represent background. It can further classify pixels representing a person into any one of twenty-four body parts."
+
+### Methods
+
+#### ml5.bodyPix()
+
+This method is used to initialize the bodyPix object.
+
+```javascript
+const bodyPix = ml5.bodyPix(?video, ?options, ?callback);
+```
+
+**Parameters:**
+
+- **video**: OPTIONAL. An HTMLVideoElement or p5.Video to run the segmentation on.
+
+- **options**: OPTIONAL. An object to change the default configuration of the model. The default and available options are:
+
+  ```javascript
+  {
+    architecture: "ResNet50", // "MobileNetV1" or "ResNet50"
+    multiplier: 1, // 0.5, 0.75 or 1
+    outputStride: 16, // 8, 16, or 32
+    quantBytes: 2, //1, 2 or 4
+  }
+  ```
+
+  More info on options [here](https://github.com/tensorflow/tfjs-models/tree/master/body-segmentation/src/body_pix#create-a-detector).
+
+- **callback(bodyPix, error)**: OPTIONAL. A function to run once the model has been loaded. Alternatively, call `ml5.bodyPix()` within the p5 `preload` function.
+
+**Returns:**  
+The bodyPix object.
+
+#### bodyPix.segment()
+
+This method allows you to run segmentation on an image.
+
+```javascript
+bodyPix.segment(?input, callback);
+```
+
+**Parameters:**
+
+- **input**: HTMLImageElement, HTMLVideoElement, ImageData, or HTMLCanvasElement. NOTE: Videos can be added through `ml5.bodyPix`.
+
+- **callback(output, error)**: A function to handle the output of `bodyPix.segment()`. Likely a function to do something with the segmented image. See below for the output passed into the callback function:
+
+  ```javascript
+  {
+    backgroundMask,
+    bodyParts,
+    partMask,
+    personMask,
+    raw: { backgroundMask, partMask, personMask },
+    segmentation: [{ mask, maskValueToLabel}, ...],
+  }
+  ```
+
+### Examples
+
+TODO (link p5 web editor examples once uploaded)
diff --git a/src/markdown/Reference/reference/bodypose.md b/src/markdown/Reference/reference/bodypose.md
new file mode 100644
index 0000000..fc5e0c8
--- /dev/null
+++ b/src/markdown/Reference/reference/bodypose.md
@@ -0,0 +1,318 @@
+---
+slug: "/models/bodypose"
+title: "BodyPose"
+---
+
+# Bodypose
+
+<center>
+    <img style="display:block; max-width:100%" alt="pose estimation" src="https://1.bp.blogspot.com/-25aGTL-RTnY/YJ29jgiiNHI/AAAAAAAAEMM/9qJC_xqlUKo4To9xyumqKmrqKr-vVFXzgCLcBGAsYHQ/s0/three_pane_aligned%2B%25281%2529.gif">
+</center>
+
+## Description
+
+Bodypose offers a versatile solution for pose estimation by leveraging the strengths of Movenet and Blazepose. It provides real-time, full-body pose estimation and precise tracking of key body parts, including hands, face, and body, in an optimized and lightweight package. 
+
+#### Key Features
+
+* Real-time full-body pose estimation
+* High-precision keypoints tracking
+* Lightweight and optimized for performance
+* Easy integration into web-based projects using ml5.js
+
+
+#### What can we do with the model?
+
+Bodypose is suitable for a wide range of applications, such as interactive gaming, fitness apps, art installations, and accessibility solutions. Its accuracy and real-time performance make it a valuable tool for developers and creators!
+
+Bodypose's MoveNet model predict a set of 17 keypoints:
+
+> Nose, Left Eye, Right Eye, Left Ear, Right Ear, Left Shoulder, Right Shoulder, Left Elbow, Right Elbow, Left Wrist, Right Wrist, Left Hip, Right Hip, Left Knee, Right Knee, Left Ankle, Right Ankle
+
+
+  See the diagram below for the position of each keypoint.
+
+  <center>
+      <img style="display:block; max-width:30%" alt="Keypoint Diagram" src="https://camo.githubusercontent.com/c3641b718d7e613b2ce111a6a4575e88ca35a60cb325efdd9113c453b2a09301/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f6d6f76656e65742f636f636f2d6b6579706f696e74732d3530302e706e67">
+  </center>
+
+Bodypose's Blazepose model predict a set of 33 keypoints:
+
+> Nose, Left Eye Inner, Left Eye, Left Eye Outer, Right Eye Inner, Right Eye, Right Eye Outer, Left Ear, Right Ear, Mouth Left, Mouth Right, Left Shoulder, Right Shoulder, Left Elbow, Right Elbow, Left Wrist, Right Wrist, Left Pinky, Right Pinky, Left Index, Right Index, Left Thumb, Right Thumb, Left Hip, Right Hip, Left Knee, Right Knee, Left Ankle, Right Ankle, Left Heel, Right Heel, Left Foot Index, Right Foot Index, Body Center, Forehead, Left Thumb, Left Hand, Right Thumb, Right Hand
+
+  See the diagram below for the position of each keypoint.
+
+  <center>
+      <img style="display:block; max-width:30%" alt="Keypoint Diagram" src="https://camo.githubusercontent.com/17082997c33fc6d2544c4aea33d9898860cf902ed5a0b865527d1dd91bbc7efa/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f6d65646961706970652f626c617a65706f73652d6b6579706f696e74732d757064617465642e706e67">
+  </center>
+
+Once you have the keypoints estimated by the model, you can utilize them in various ways based on your application:
+
+**Human Pose Estimation**: You can reconstruct the human body pose by connecting the keypoints using skeletal connections. This helps visualize the pose and track the movement of body parts.
+
+**Gesture Recognition**: By analyzing the relative positions and movements of keypoints over time, you can recognize specific gestures or actions performed by a person.
+
+**Fitness Tracking**: PoseNet/MoveNet can be used to track exercises and provide feedback on the correctness of the exercise form. For instance, it can help ensure that a person is maintaining proper alignment during yoga poses or weightlifting.
+
+**Augmented Reality**: Keypoints can be used to anchor virtual objects or effects to specific body parts, allowing for interactive augmented reality experiences.
+
+**Biomechanics Analysis**: In sports and rehabilitation, PoseNet/MoveNet can provide insights into body movements, helping to analyze techniques, prevent injuries, and aid in recovery.
+
+**Accessibility**: Bodypos can be used to track body movements and gestures to control devices and interfaces, enabling people with disabilities to interact with technology in new ways.
+
+#### Output Example
+An example of the output from Body Pose MoveNet model is shown below:
+
+```javascript
+[
+  {
+    keypoints: [
+      { y: 64.88419532775879, x: 381.0333251953125, score: 0.7116302847862244, name: "nose" },
+      // Additional keypoints here...
+    ],
+    box: { yMin: 0.004535397049039602, xMin: 0.06256416440010071, yMax: 0.9879268407821655, xMax: 0.9208574295043945, width: 0.8582932651042938, height: 0.9833914437331259 },
+    score: 0.3704647719860077,
+    id: 4,
+    nose: { x: 381.0333251953125, y: 64.88419532775879, score: 0.7116302847862244 },
+    left_eye: { /* Properties of the left eye */ },
+    right_eye: { /* Properties of the right eye */ },
+    left_ear: { /* Properties of the left ear */ },
+    right_ear: { /* Properties of the right ear */ },
+    left_shoulder: { /* Properties of the left shoulder */ },
+    right_shoulder: { /* Properties of the right shoulder */ },
+    left_elbow: { /* Properties of the left elbow */ },
+    right_elbow: { /* Properties of the right elbow */ },
+    left_wrist: { /* Properties of the left wrist */ },
+    right_wrist: { /* Properties of the right wrist */ },
+    left_hip: { /* Properties of the left hip */ },
+    right_hip: { /* Properties of the right hip */ },
+    left_knee: { /* Properties of the left knee */ },
+    right_knee: { /* Properties of the right knee */ },
+    left_ankle: { /* Properties of the left ankle */ },
+    right_ankle: { /* Properties of the right ankle */ }
+  },
+  // Additional objects here...
+];
+```
+
+An example of the output from Body Pose Blazepose model is shown below:
+
+```javascript
+[
+  {
+    keypoints: [
+      { x: 384.1078567504883, y: 209.4658613204956, z: -0.35329264402389526, score: 0.9999341368675232, name: "nose" },
+      // Additional keypoints here...
+    ],
+    keypoints3D: [
+      { x: -0.08051524311304092, y: -0.6131212711334229, z: -0.3431171476840973, score: 0.9999341368675232, name: "nose" },
+      // Additional 3D keypoints here...
+    ],
+    nose: { x: 384.1078567504883, y: 209.4658613204956, z: -0.35329264402389526, score: 0.9999341368675232 },
+    left_eye_inner: { /* Properties of the left eye inner */ },
+    left_eye: { /* Properties of the left eye */ },
+    left_eye_outer: { /* Properties of the left eye outer */ },
+    right_eye_inner: { /* Properties of the right eye inner */ },
+    right_eye: { /* Properties of the right eye */ },
+    right_eye_outer: { /* Properties of the right eye outer */ },
+    left_ear: { /* Properties of the left ear */ },
+    right_ear: { /* Properties of the right ear */ },
+    mouth_left: { /* Properties of the mouth left */ },
+    mouth_right: { /* Properties of the mouth right */ },
+    left_shoulder: { /* Properties of the left shoulder */ },
+    right_shoulder: { /* Properties of the right shoulder */ },
+    left_elbow: { /* Properties of the left elbow */ },
+    right_elbow: { /* Properties of the right elbow */ },
+    left_wrist: { /* Properties of the left wrist */ },
+    right_wrist: { /* Properties of the right wrist */ },
+    left_pinky: { /* Properties of the left pinky */ },
+    right_pinky: { /* Properties of the right pinky */ },
+    left_index: { /* Properties of the left index finger */ },
+    right_index: { /* Properties of the right index finger */ },
+    left_thumb: { /* Properties of the left thumb */ },
+    right_thumb: { /* Properties of the right thumb */ },
+    left_hip: { /* Properties of the left hip */ },
+    right_hip: { /* Properties of the right hip */ },
+    left_knee: { /* Properties of the left knee */ },
+    right_knee: { /* Properties of the right knee */ },
+    left_ankle: { /* Properties of the left ankle */ },
+    right_ankle: { /* Properties of the right ankle */ },
+    left_heel: { /* Properties of the left heel */ },
+    right_heel: { /* Properties of the right heel */ },
+    left_foot_index: { /* Properties of the left foot index */ },
+    right_foot_index: { /* Properties of the right foot index */ }
+  },
+  // Additional objects here...
+];
+```
+
+## Getting Started
+Integrating Bodypose into your ml5.js projects is straightforward. Our documentation and user-friendly API will help you make the most of this combined model!
+
+### Demo
+
+[p5 Web Editor](iframes/pose-estimation ':include :type=iframe width=100% height=550px')
+
+[Webcam Demo](https://github.com/ml5js/ml5-next-gen/raw/main/examples/HandPose-keypoints/sketch.js)
+
+[Webcam Demo](https://github.com/ml5js/ml5-next-gen/raw/main/examples/HandPose-keypoints/sketch.js ':include :type=ml5-webcam-demo')
+
+[Webcam Demo](iframes/pose-estimation ':include :type=iframe width=100% height=550px')
+
+### Quickstart
+Before you start, let's create an empty project in the [p5 web editor](https://editor.p5js.org/).
+
+First of all, copy and paste the following code into your **index.html** file. If you are not familiar with the p5 web editor interface, you can find a guide on how to find your **index.html** file [here](/?id=try-ml5js-online-1).
+
+```html
+<script src="https://unpkg.com/ml5@alpha/dist/ml5.js"></script>
+```
+
+Then, add the code below to your **sketch.js** file:
+
+```js
+let video;
+let bodyPose;
+let poses = [];
+
+function preload() {
+  // Load the bodyPose model, default is MoveNet model
+  bodyPose = ml5.bodypose();
+}
+
+function setup() {
+  createCanvas(640, 480);
+
+  // Create the video and hide it
+  video = createCapture(VIDEO);
+  video.size(width, height);
+  video.hide();
+
+  // Start detecting poses in the webcam video
+  bodyPose.detectStart(video, gotPoses);
+}
+
+function draw() {
+  // Draw the webcam video
+  image(video, 0, 0, width, height);
+
+  // Draw all the tracked landmark points
+  for (let i = 0; i < poses.length; i++) {
+    let pose = poses[i];
+    for (let j = 0; j < pose.keypoints.length; j++) {
+      let keypoint = pose.keypoints[j];
+      // Only draw a circle if the keypoint's confidence is bigger than 0.1
+      if (keypoint.score > 0.1) {
+        fill(0, 255, 0);
+        noStroke();
+        circle(keypoint.x, keypoint.y, 10);
+      }
+    }
+  }
+}
+
+// Callback function for when bodyPose outputs data
+function gotPoses(results) {
+  // Save the output to the poses variable
+  poses = results;
+}
+```
+Alternatively, you can open [this example code](https://github.com/ml5js/ml5-next-gen/tree/main/examples/BodyPose-keypoints) and try it yourself on p5.js web editor!
+
+### Additional Examples
+* [BodyPose-blazepose-keypoints](https://github.com/ml5js/ml5-next-gen/tree/main/examples/BodyPose-blazepose-keypoints)
+
+<!-- ### Tutorials
+
+**PoseNet on The Coding Train**
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/OIo-DIOkNVg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
+
+## Methods
+
+#### ml5.bodypose()
+
+This method is used to initialize the bodypose object.
+
+```javascript
+const bodypose = ml5.bodypose(?options, ?callback);
+```
+
+**Parameters:**
+
+- **options**: OPTIONAL. An object to change the default configuration of the model. The default and available options are:
+
+  ```javascript
+  {
+    modelType: "MULTIPOSE_LIGHTNING" // "MULTIPOSE_LIGHTNING", "SINGLEPOSE_LIGHTNING", or "SINGLEPOSE_THUNDE"
+    enableSmoothing: true,
+
+    minPoseScore: 0.25,
+    multiPoseMaxDimension: 256,
+    enableTracking: true,
+    trackerType: "boundingBox", // "keypoint" or "boundingBox"
+    trackerConfig: {},
+    modelUrl: undefined,
+  }
+  ```
+
+  More info on options [here](https://github.com/tensorflow/tfjs-models/tree/master/pose-detection/src/movenet#create-a-detector).
+
+- **callback(bodypose, error)**: OPTIONAL. A function to run once the model has been loaded. Alternatively, call `ml5.bodyPix()` within the p5 `preload` function.
+
+**Returns:**  
+The bodypose object.
+
+#### bodypose.detectStart()
+
+This method repeatedly outputs pose estimations on an image media through a callback function.
+
+```javascript
+bodypose.detectStart(media, callback);
+```
+
+**Parameters:**
+
+- **media**: An HMTL or p5.js image, video, or canvas element to run the estimation on.
+- **callback(output, error)**: A callback function to handle the output of the estimation. See below for an example output passed into the callback function:
+
+  ```javascript
+  [
+    {
+      box: { width, height, xMax, xMin, yMax, yMin },
+      id: 1,
+      keypoints: [{ x, y, score, name }, ...],
+      left_ankle: { x, y, confidence },
+      left_ear: { x, y, confidence },
+      left_elbow: { x, y, confidence },
+      ...
+      score: 0.28,
+    },
+    ...
+  ];
+  ```
+
+#### bodypose.detectStop()
+
+This method can be called after a call to `bodypose.detectStart` to stop the repeating pose estimation.
+
+```javascript
+bodypose.detectStop();
+```
+
+#### bodypose.detect()
+
+This method asynchronously outputs a single pose estimation on an image media when called.
+
+```javascript
+bodypose.detect(media, ?callback);
+```
+
+**Parameters:**
+
+- **media**: An HTML or p5.js image, video, or canvas element to run the estimation on.
+- **callback(output, error)**: OPTIONAL. A callback function to handle the output of the estimation, see output example above.
+
+**Returns:**  
+A promise that resolves to the estimation output.
+
+(footer needed)
diff --git a/src/markdown/Reference/reference/facemesh.md b/src/markdown/Reference/reference/facemesh.md
new file mode 100644
index 0000000..1de7827
--- /dev/null
+++ b/src/markdown/Reference/reference/facemesh.md
@@ -0,0 +1,219 @@
+---
+slug: "/models/facemesh"
+title: "Facemesh"
+---
+
+# Facemesh
+
+
+<center>
+    <img style="display:block; max-height:20rem" alt="A screenshot of a video feed where a person sits at their chair inside of a bedroom while green dots are drawn over different locations on their face." src="_media/reference__header-facemesh.jpg">
+</center>
+
+
+## Description
+
+Facemesh is a machine-learning model that allows for facial landmark detection in the browser. It can detect multiple faces at once and provides 468 3D facial landmarks that describe the geometry of each face. Facemesh works best when the faces in view take up a large percentage of the image or video frame and it may struggle with small/distant faces.
+
+The ml5.js Facemesh model is ported from the [Mediapipe Facemesh implementation](https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection).
+
+#### Key Features
+- **Facial Landmark Detection**: Facemesh can detect the 3D coordinates of 468 keypoints on the face.
+- **Face Bounding Box**: Facemesh can provide the bounding box of each detected face.
+- **Face Parts Contour**: Facemesh can provide the 3D coordinates of the contour of each face part (lips, eyes, eyebrows, and face oval).
+- **Multiple Faces**: Facemesh can detect multiple faces at the same time. You can specify the maximum number of faces to detect.
+
+#### Output Example
+An example of the output from Facemesh is shown below:
+
+```javascript
+[
+  {
+    keypoints: [
+      { x: 331.7021942138672, y: 332.43553161621094, z: -18.904154300689697, name: "lips" },
+      // Additional keypoints here...
+    ],
+    box: { xMin: 255.43195724487305, yMin: 186.6709327697754, xMax: 433.4109115600586, yMax: 387.9571723937988, width: 177.97895431518555, height: 201.28623962402344 },
+    lips: [
+      { x: 331.7021942138672, y: 332.43553161621094, z: -18.904154300689697 },
+      // Additional lip keypoints here...
+    ],
+    rightEye: [
+      // Keypoints for right eye
+    ],
+    faceOval: [
+      // Keypoints for face oval
+    ],
+    rightEyebrow: [
+      // Keypoints for right eyebrow
+    ],
+    leftEye: [
+      // Keypoints for left eye
+    ],
+    leftEyebrow: [
+      // Keypoints for left eyebrow
+    ]
+  },
+  // Additional objects here...
+]
+```
+
+## Getting Started
+Ready to give it a try? Just follow our simple instructions, and you'll be on your way to creating your very own Facemesh project in no time!
+
+### Demo
+[p5 Web Editor](iframes/facemesh-keypoints ':include :type=iframe width=100% height=550px')
+
+### Quickstart
+Before you start, let's create an empty project in the [p5 web editor](https://editor.p5js.org/).
+
+First of all, copy and paste the following code into your **index.html** file. If you are not familiar with the p5 web editor interface, you can find a guide on how to find your **index.html** file [here](/?id=try-ml5js-online-1).
+
+```html
+<script src="https://unpkg.com/ml5@alpha/dist/ml5.js"></script>
+```
+
+Then, add the code below to your **sketch.js** file:
+
+```js
+let faceMesh;
+let video;
+let faces = [];
+// set options to detect only one face
+let options = { maxFaces: 1, refineLandmarks: false, flipHorizontal: false };
+
+function preload() {
+  // Load the faceMesh model
+  faceMesh = ml5.facemesh(options);
+}
+
+function setup() {
+  createCanvas(640, 480);
+  // Create the webcam video and hide it
+  video = createCapture(VIDEO);
+  video.size(width, height);
+  video.hide();
+  // Start detecting faces from the webcam video
+  faceMesh.detectStart(video, gotFaces);
+}
+
+function draw() {
+  // Draw the webcam video
+  image(video, 0, 0, width, height);
+
+  // Draw all the tracked face points
+  for (let i = 0; i < faces.length; i++) {
+    let face = faces[i];
+    for (let j = 0; j < face.keypoints.length; j++) {
+      let keypoint = face.keypoints[j];
+      fill(0, 255, 0);
+      noStroke();
+      circle(keypoint.x, keypoint.y, 5);
+    }
+  }
+}
+
+// Callback function for when faceMesh outputs data
+function gotFaces(results) {
+  // Save the output to the faces variable
+  faces = results;
+}
+```
+
+Alternatively, you can open [this example code](https://github.com/ml5js/ml5-next-gen/tree/main/examples/FaceMesh-keypoints) and try it yourself on p5.js web editor!
+
+### Additional Examples
+* [FaceMesh-parts](https://github.com/ml5js/ml5-next-gen/tree/main/examples/FaceMesh-parts)
+* [FaceMesh-single-image](https://github.com/ml5js/ml5-next-gen/tree/main/examples/FaceMesh-single-image)
+
+TODO (link p5 web editor examples once uploaded)
+
+<!-- ### Tutorials
+
+**PoseNet on The Coding Train**
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/OIo-DIOkNVg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+TODO (link new youtube video once uploaded) -->
+
+## Methods
+
+#### ml5.facemesh()
+
+This method is used to initialize the facemesh object.
+
+```javascript
+const facemesh = ml5.facemesh(?options, ?callback);
+```
+
+**Parameters:**
+
+- **options**: OPTIONAL. An object to change the default configuration of the model. The default and available options are:
+
+  ```javascript
+  {
+      maxFaces: 1,
+      refineLandmarks: false,
+      flipHirzontal: false
+  }
+  ```
+
+  More info on options [here](https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection/src/mediapipe#create-a-detector).
+
+- **callback(facemesh, error)**: OPTIONAL. A function to run once the model has been loaded. Alternatively, call `ml5.facemesh()` within the p5 `preload` function.
+
+**Returns:**  
+The facemesh object.
+
+#### facemesh.detectStart()
+
+This method repeatedly outputs face estimations on an image media through a callback function.
+
+```javascript
+facemesh.detectStart(media, callback);
+```
+
+**Parameters:**
+
+- **media**: An HMTL or p5.js image, video, or canvas element to run the estimation on.
+- **callback(output, error)**: A callback function to handle the output of the estimation. See below for an example output passed into the callback function:
+
+  ```javascript
+  [
+    {
+      box: { width, height, xMax, xMin, yMax, yMin },
+      keypoints: [{x, y, z, name}, ... ],
+      faceOval: [{x, y, z}, ...],
+      leftEye: [{x, y, z}, ...],
+      ...
+    },
+    ...
+  ]
+  ```
+
+  [Here](https://github.com/tensorflow/tfjs-models/blob/master/face-landmarks-detection/mesh_map.jpg) is a diagram for the position of each keypoint (download and zoom in to see the index).
+
+#### facemesh.detectStop()
+
+This method can be called after a call to `facemesh.detectStart` to stop the repeating face estimation.
+
+```javascript
+facemesh.detectStop();
+```
+
+#### facemesh.detect()
+
+This method asynchronously outputs a single face estimation on an image media when called.
+
+```javascript
+facemesh.detect(media, ?callback);
+```
+
+**Parameters:**
+
+- **media**: An HMTL or p5.js image, video, or canvas element to run the estimation on.
+- **callback(output, error)**: OPTIONAL. A callback function to handle the output of the estimation, see output example above.
+
+**Returns:**  
+A promise that resolves to the estimation output.
+
+<br>
diff --git a/src/markdown/Reference/reference/handpose.md b/src/markdown/Reference/reference/handpose.md
new file mode 100644
index 0000000..0cfb132
--- /dev/null
+++ b/src/markdown/Reference/reference/handpose.md
@@ -0,0 +1,219 @@
+---
+slug: "/models/handpose"
+title: "HandPose"
+---
+
+# Handpose
+
+
+<center>
+    <img style="display:block; max-height:20rem" alt="A GIF of a person waving their hand in front of a camera. Green dots are drawn over different locations on their palm and fingers–demonstrating the capabilities of the Handpose model." src="_media/reference__header-handpose.gif">
+</center>
+
+
+## Description
+
+Handpose is a machine-learning model that allows for palm detection and hand-skeleton finger tracking in the browser. It can detect multiple hands at a time and for each hand, provides 21 3D hand keypoints that describe important locations on the palm and fingers.
+
+The ml5.js Handpose model is ported from the [Mediapipe Handpose implementation](https://github.com/google/mediapipe/blob/master/docs/solutions/hands.md).
+
+#### Key Features
+- **Palm Detection**: Handpose can detect the palm of a hand and provide the 2D and 3D coordinates of 21 keypoints on the hand.
+- **Finger Tracking**: Handpose can track the 3D coordinates of the tips and joints of the fingers.
+- **Handedness**: Handpose can determine the handedness (left or right) of the detected hand.
+- **Multiple Hands**: Handpose can detect multiple hands at the same time.
+
+#### Output Example
+An example of the output from Handpose is shown below:
+
+```javascript
+[
+  {
+    score: 0.86,
+    handedness: "Left",
+    keypoints: [
+      { x: 623.57, y: 374.79, score: 0.85, name: "wrist" },
+      // Additional keypoints here...
+    ],
+    keypoints3D: [
+      { x: 0.0024, y: 0.070, z: 0.035, score: 0.85, name: "wrist" },
+      // Additional 3D keypoints here...
+    ],
+    index_finger_dip: { x: /* value */, y: /* value */, x3D: /* value */, y3D: /* value */, z3D: /* value */ },
+    index_finger_mcp: { x: /* value */, y: /* value */, x3D: /* value */, y3D: /* value */, z3D: /* value */ },
+    // Additional finger properties here...
+  },
+  // Additional objects here...
+]
+
+```
+
+## Getting Started
+Ready to give it a try? Our demo is here to give you a sneak peek into what Handpose can do! Don't hesitate to follow along with our instructions to kickstart your very own Handpose project!
+
+### Demo
+[p5 Web Editor](iframes/handpose-keypoints ':include :type=iframe width=100% height=550px')
+
+### Quickstart
+Before you start, let's create an empty project in the [p5 web editor](https://editor.p5js.org/).
+
+First of all, copy and paste the following code into your **index.html** file. If you are not familiar with the p5 web editor interface, you can find a guide on how to find your **index.html** file [here](/?id=try-ml5js-online-1).
+
+```html
+<script src="https://unpkg.com/ml5@alpha/dist/ml5.js"></script>
+```
+
+Then, add the code below to your **sketch.js** file:
+
+```js
+let handpose;
+let video;
+let hands = [];
+
+function preload() {
+  // Load the handpose model
+  handpose = ml5.handpose();
+}
+
+function setup() {
+  createCanvas(640, 480);
+
+  // Create a video element and hide it
+  video = createCapture(VIDEO);
+  video.size(width, height);
+  video.hide();
+
+  // Start detecting hands from the webcam video
+  // Call function "gotHands" upon receiving output from the model
+  handpose.detectStart(video, gotHands);
+}
+
+function draw() {
+  // Draw the webcam video
+  image(video, 0, 0, width, height);
+
+  // Draw all the tracked hand points
+  for (let i = 0; i < hands.length; i++) {
+    let hand = hands[i];
+    for (let j = 0; j < hand.keypoints.length; j++) {
+      let keypoint = hand.keypoints[j];
+      fill(0, 255, 0);
+      noStroke();
+      circle(keypoint.x, keypoint.y, 10);
+    }
+  }
+}
+
+// Callback function for when handpose outputs data
+function gotHands(results) {
+  // Save the output to the hands variable
+  hands = results;
+}
+```
+
+Alternatively, you can open [this example code](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-keypoints) and try it yourself on p5.js web editor!
+
+### Additional Examples
+* [Handpose-parts](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-parts)
+* [Handpose-single-image](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-single-image)
+* [Handpose-start-stop](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-start-stop)
+
+TODO (link p5 web editor examples once uploaded)
+
+<!-- ### Tutorials
+
+**PoseNet on The Coding Train**
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/OIo-DIOkNVg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+TODO (link new youtube video once uploaded) -->
+
+## Methods
+
+#### ml5.handpose()
+
+This method is used to initialize the handpose object.
+
+```javascript
+const handpose = ml5.handpose(?options, ?callback);
+```
+
+**Parameters:**
+
+- **options**: OPTIONAL. An object to change the default configuration of the model. The default and available options are:
+
+  ```javascript
+  {
+    maxHands: 2,
+    runtime: "mediapipe",
+    modelType: "full",
+    solutionPath: "https://cdn.jsdelivr.net/npm/@mediapipe/hands",
+    detectorModelUrl: undefined, //default to use the tf.hub model
+    landmarkModelUrl: undefined, //default to use the tf.hub model
+  }
+  ```
+
+  More info on options [here](https://github.com/tensorflow/tfjs-models/tree/master/hand-pose-detection/src/mediapipe#create-a-detector) for "mediapipe" runtime.
+  More info on options [here](https://github.com/tensorflow/tfjs-models/tree/master/hand-pose-detection/src/tfjs#create-a-detector) for "tfjs" runtime.
+
+- **callback(handpose, error)**: OPTIONAL. A function to run once the model has been loaded. Alternatively, call `ml5.handpose()` within the p5 `preload` function.
+
+**Returns:**  
+The handpose object.
+
+#### handpose.detectStart()
+
+This method repeatedly outputs hand estimations on an image media through a callback function.
+
+```javascript
+handpose.detectStart(media, callback);
+```
+
+**Parameters:**
+
+- **media**: An HMTL or p5.js image, video, or canvas element to run the estimation on.
+- **callback(output, error)**: A callback function to handle the output of the estimation. See below for an example output passed into the callback function:
+
+  ```javascript
+  [
+    {
+      score,
+      handedness,
+      keypoints: [{ x, y, score, name }, ...],
+      keypoints3D: [{ x, y, z, score, name }, ...],
+      index_finger_dip: { x, y, x3D, y3D, z3D },
+      index_finger_mcp: { x, y, x3D, y3D, z3D },
+      ...
+    }
+    ...
+  ]
+  ```
+
+  See the diagram below for the position of each keypoint.
+
+  ![Keypoint Diagram](https://camo.githubusercontent.com/b0f077393b25552492ef5dd7cd9fd13f386e8bb480fa4ed94ce42ede812066a1/68747470733a2f2f6d65646961706970652e6465762f696d616765732f6d6f62696c652f68616e645f6c616e646d61726b732e706e67)
+
+#### handpose.detectStop()
+
+This method can be called after a call to `handpose.detectStart` to stop the repeating hand estimation.
+
+```javascript
+handpose.detectStop();
+```
+
+#### handpose.detect()
+
+This method asynchronously outputs a single hand estimation on an image media when called.
+
+```javascript
+handpose.detect(media, ?callback);
+```
+
+**Parameters:**
+
+- **media**: An HMTL or p5.js image, video, or canvas element to run the estimation on.
+- **callback(output, error)**: OPTIONAL. A callback function to handle the output of the estimation, see output example above.
+
+**Returns:**  
+A promise that resolves to the estimation output.
+
+<br>
diff --git a/src/markdown/Reference/reference/image-classifier-tm.md b/src/markdown/Reference/reference/image-classifier-tm.md
new file mode 100644
index 0000000..3c869d8
--- /dev/null
+++ b/src/markdown/Reference/reference/image-classifier-tm.md
@@ -0,0 +1,301 @@
+---
+slug: "models/image-classifier-tm"
+title: "ImageClassifier with Teachable Machine"
+---
+
+# ImageClassifier
+
+
+<center>
+    <img style="display:block; max-height:20rem" alt="image classification of bird" src="_media/reference__header-imageClassifier.png">
+</center>
+
+
+## Description
+You can use neural networks to recognize the content of images. `ml5.imageClassifier()` is a method to create an object that classifies an image using a pre-trained model.
+
+It should be noted that the pre-trained model provided by the example below was trained on a database of approximately 15 million images (ImageNet). The ml5 library accesses this model from the cloud. What the algorithm labels an image is entirely dependent on that training data -- what is included, excluded, and how those images are labeled (or mislabeled).
+
+**Train your own image classification model with Teachable Machine**: If you'd like to train your own custom image classification model, try [Google's Teachable Machine](https://teachablemachine.withgoogle.com/io19).
+
+## Quickstart
+
+```js
+// Initialize the Image Classifier method with MobileNet
+const classifier = ml5.imageClassifier('MobileNet', modelLoaded);
+
+// When the model is loaded
+function modelLoaded() {
+  console.log('Model Loaded!');
+}
+
+// Make a prediction with a selected image
+classifier.classify(document.getElementById('image'), (err, results) => {
+  console.log(results);
+});
+```
+
+
+## Usage
+
+### Initialize
+
+```js
+const classifier = ml5.imageClassifier(model, ?video, ?options, ?callback);
+```
+
+#### Parameters
+* **model**: REQUIRED. A String value of a valid model OR a url to a model.json that contains a pre-trained model. Case insensitive. Models available are: 'MobileNet', 'Darknet' and 'Darknet-tiny','DoodleNet', or any image classification model trained in Teachable Machine. Below are some examples of creating a new image classifier:
+  * `mobilenet`:
+    ```js
+    const classifier = ml5.imageClassifier('MobileNet', modelReady);
+    ```
+  * `Darknet`:
+    ```js
+    const classifier = ml5.imageClassifier('Darknet', modelReady);
+    ```
+  * `DoodleNet`:
+    ```js
+    const classifier = ml5.imageClassifier('DoodleNet', modelReady);
+    ```
+  * Custom Model from Teachable Machine:
+    ```js
+    const classifier = ml5.imageClassifier('path/to/custom/model.json', modelReady);
+    ```
+* **video**: OPTIONAL. An HTMLVideoElement
+* **callback**: OPTIONAL. A function to run once the model has been loaded. If no callback is provided, it will return a promise that will be resolved once the model has loaded.
+* **options**: OPTIONAL. An object to change the defaults (shown below). The available options are:
+  ```js
+  {
+    version: 1,
+    alpha: 1.0,
+    topk: 3,
+  };
+  ```
+
+### Properties
+
+
+***
+#### .video
+> *Object*. HTMLVideoElement if given in the constructor. Otherwise it is null.
+***
+
+***
+#### .model
+> *Object*. The image classifier model specified in the constructor.
+***
+
+***
+#### .modelName
+> *String*. The name of the image classifier model specified in the constructor
+***
+
+***
+#### .modelUrl
+> *String*. The absolute or relative URL path to the input model.
+***
+
+
+### Methods
+
+***
+#### .classify()
+> Given an image or video, returns an array of objects containing class names and probabilities
+
+If you DID NOT specify an image or video in the constructor...
+```js
+classifier.classify(input, ?numberOfClasses, ?callback);
+```
+
+If you DID specify an image or video in the constructor...
+```js
+classifier.classify(?numberOfClasses , ?callback);
+```
+
+📥 **Inputs**
+
+* **input**: HTMLImageElement | ImageData | HTMLCanvasElement | HTMLVideoElement. NOTE: Videos can also be added in the constructor and then do not need to be specified again as an input.
+* **numberOfClasses**: Number. The number of classes you want to return.
+* **callback**: Function. A function to handle the results of `.segment()`. Likely a function to do something with the segmented image.
+
+📤 **Outputs**
+
+* **Object**: Returns an array of objects. Each object contains `{label, confidence}`.
+
+***
+
+
+## Examples
+
+**p5.js**
+* [ImageClassification](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification)
+* [ImageClassification_DoodleNet_Canvas](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_DoodleNet_Canvas)
+* [ImageClassification_DoodleNet_Video](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_DoodleNet_Video)
+* [ImageClassification_MultipleImages](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_MultipleImages)
+* [ImageClassification_Teachable-Machine](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_Teachable-Machine)
+* [ImageClassification_Video](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_Video)
+* [ImageClassification_VideoScavengerHunt](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_VideoScavengerHunt)
+* [ImageClassification_VideoSound](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_VideoSound)
+* [ImageClassification_VideoSoundTranslate](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_VideoSoundTranslate)
+* [ImageClassification_Video_Load](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_Video_Load)
+
+**p5.js Web Editor**
+
+* [ImageClassification](https://editor.p5js.org/ml5/sketches/ImageClassification)
+* [ImageClassification_DoodleNet_Canvas](https://editor.p5js.org/ml5/sketches/ImageClassification_DoodleNet_Canvas)
+* [ImageClassification_DoodleNet_Video](https://editor.p5js.org/ml5/sketches/ImageClassification_DoodleNet_Video)
+* [ImageClassification_MultipleImages](https://editor.p5js.org/ml5/sketches/ImageClassification_MultipleImages)
+* [ImageClassification_Teachable-Machine](https://editor.p5js.org/ml5/sketches/ImageClassification_Teachable-Machine)
+* [ImageClassification_Video](https://editor.p5js.org/ml5/sketches/ImageClassification_Video)
+* [ImageClassification_VideoScavengerHunt](https://editor.p5js.org/ml5/sketches/ImageClassification_VideoScavengerHunt)
+* [ImageClassification_VideoSound](https://editor.p5js.org/ml5/sketches/ImageClassification_VideoSound)
+* [ImageClassification_VideoSoundTranslate](https://editor.p5js.org/ml5/sketches/ImageClassification_VideoSoundTranslate)
+
+**plain javascript**
+* [ImageClassification](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification)
+* [ImageClassification_DoodleNet_Canvas](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_DoodleNet_Canvas)
+* [ImageClassification_DoodleNet_Video](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_DoodleNet_Video)
+* [ImageClassification_MultipleImages](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_MultipleImages)
+* [ImageClassification_Video](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_Video)
+* [ImageClassification_VideoScavengerHunt](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_VideoScavengerHunt)
+* [ImageClassification_VideoSound](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_VideoSound)
+* [ImageClassification_VideoSoundTranslate](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_VideoSoundTranslate)
+* [ImageClassification_Video_Load](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_Video_Load)
+
+## Demo
+
+No demos yet - contribute one today!
+
+## Tutorials
+
+### Webcam Image Classification via CodingTrain
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/D9BoBSkLvFo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+### Image Classification with MobileNet via CodingTrain
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/yNkAuWz5lnY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Model and Data Provenance
+> A project started by [Ellen Nickles](https://github.com/ellennickles/)
+
+### Models Overview
+
+A nice description of the models overview
+
+#### MobileNet - Model Biography
+
+- **Description**
+  - MobileNet is a term that describes a type of machine learning model architecture that has been optimized to run on platforms with limited computational power, such as applications on mobile or embedded devices. MobileNets have several use cases including image classification, object detection, and image segmentation. This particular MobileNet model was trained for Image Classification.
+  - ml5 uses a MobileNet created with TensorFlow.js, a JavaScript library from TensorFlow. Several TensorFlow.js MobileNet versions are available for image classification, and as of June 2019, ml5 defaults to importing MobileNetV2.
+- **Developer and Year**
+  - Google’s Tensorflow.js team
+- **Purpose and Intended Users**
+  - From the website: TensorFlow is an open source machine learning platform that “has a comprehensive, flexible ecosystem of tools, libraries, and community resources that lets researchers push the state-of-the-art in ML and developers easily build and deploy ML-powered applications.” This model is available for use in the ml5 library because Tensorflow licenses it with Apache License 2.0.
+- **Hosted Location**
+  - ml5 imports MobileNetV2 from TensorFlow, hosted on the NPM database, however a different version may be specified in your ml5 script. For whichever you specify, your ml5 sketch will automatically use the most recent version distributed on NPM.
+- **ml5 Contributor and Year**
+  - Ported by Cristóbal Valenzuela & Dan Shiffman in 2018 
+- **References**
+  - ml5 Contributor [Cristóbal Valenzuela](https://cvalenzuelab.com/)
+  - Website [TensorFlow](https://www.tensorflow.org/)
+  - GitHub Repository [TensorFlow.js MobileNet](https://github.com/tensorflow/tfjs-models/tree/master/mobilenet)
+  - NPM Readme [@tensorflow-models/mobilenet](https://www.npmjs.com/package/@tensorflow-models/mobilenet)
+  - Paper [MobileNetV2: MobileNetV2: Inverted Residuals and Linear Bottlenecks](https://arxiv.org/abs/1801.04381)
+
+#### MobileNet - Data Biography
+
+- **Description**
+  - The TensorFlow MobileNetV2 model on which the TensorFlow.js version is based was trained on 50K photographs. In addition, 150K photographs are also provided by the source for validation and testing.
+- **Source**
+  - The images are from the ImageNet database from ImageNet’s Large Scale Visual Recognition Challenge 2012 (ILSVRC2012).
+- **Collector and Year**
+  - Development of the ImageNet dataset began in 2009 and is currently maintained by researchers at U.S. universities.
+- **Collection Method**
+  - From the website:  photographs for the validation and test data were collected from “flickr and other search engines, hand labeled with the presence or absence of 1000 object categories.”
+- **Purpose and Intended Users**
+  - From the website: ImageNet datasets are publicly available and frequently used in computer vision research. The research team “envision[s] ImageNet as a useful resource to researchers in the academic world, as well as educators around the world.” According to an update posted in September 2019, it contains over 14 million images and 22,000 visual categories using a vocabulary from the English dataset, WordNet.
+- **References**
+  - Website [ImageNet](http://www.image-net.org/)
+  - Website [ImageNet’s Large Scale Visual Recognition Challenge 2012 (ILSVRC2012)](http://www.image-net.org/challenges/LSVRC/2012/)
+
+#### DarkNet and DarkNet-tiny - Model Biography
+
+- **Description**
+  - DarkNet (or DarkNet Reference) and Darknet-tiny (or Tiny Darknet are small and fast pre-trained models. Tiny Darknet is the smaller model of the two, but Darknet Reference is faster. The developer provides an open source framework, also called Darknet, for running models.
+- **Developer and Year**
+  - Joseph Redmon
+- **Purpose and Intended Users**
+  - Redmon provides several open source licenses, including MIT License.
+- **Hosted Location**
+  - ml5 hosts both models
+- **ml5 Contributor and Year**
+  - Ported by Mohamed Amine in 2018
+- **References**
+  - Developer [Joseph Redmon](https://pjreddie.com/)
+  - ml5 Contributor [Mohamed Amine](https://github.com/TheHidden1)
+  - Website Darknet/[Darknet Reference](https://pjreddie.com/darknet/imagenet/#reference)
+  - Website Darknet-tiny/ [Tiny DarkNet](https://pjreddie.com/darknet/tiny-darknet/)
+
+#### DarkNet and DarkNet-tiny - Data Biography
+
+- **Description**
+  - Darknet Reference is listed as a pre-trained model for ImageNet classification, so it is likely that the data are photographs from the ImageNet database.
+- **Source**
+  - You can learn more about the ImageNet in the MobileNet section above.
+- **Collector and Year**
+  - TBD
+- **Collection Method**
+  - TBD
+- **Purpose and Intended Users**
+  - TBD
+- **References**
+  - TBD
+
+#### DoodleNet - Model Biography
+
+- **Description**
+  - This pre-trained model classifies and labels hand-drawn sketches from 345 categories. 
+- **Developer and Year**
+  - Yining Shi developed the model in TensorFlow and ported it to TensorFlow.js so that it could be ported to the ml5 library.
+- **Purpose and Intended Users**
+  - Developed for the ml5 community
+- **Hosted Location**
+  - ml5 hosts this model
+- **ml5 Contributor and Year**
+  - Yining Shi in 2019
+- **References**
+  - Developer and ml5 Contributor [Yining Shi](https://1023.io/)
+  - GitHub Repository [DoodleNet](https://github.com/yining1023/doodleNet)
+
+#### DoodleNet - Data Biography
+
+- **Description**
+  - The training dataset consists of 345 categories of doodles with 50K images per category. 
+- **Source**
+  - Google’s Quick, Draw! Dataset
+- **Collector and Year**
+  - Google released the Quick, Draw! game in 2016. Shi collected images for her model in 2019.
+- **Collection Method**
+  - The doodles are crowdsourced from visitors’ contributions as they play Google’s Quick, Draw! Game, and they are publicly available to download.
+- **Purpose and Intended Users**
+  - From the website: Google’s Quick, Draw! Game was developed as “an example of how you can use machine learning in fun ways” by the Google Creative Lab, Data Arts Team, and their collaborators as part of Google’s AI Experiments showcase. 
+- **References**
+  - Website [Google’s Quick, Draw!](https://quickdraw.withgoogle.com/#)
+  - Website [Google’s Quick, Draw! Dataset](https://quickdraw.withgoogle.com/data)
+
+
+
+
+## Acknowledgements
+
+**Contributors**:
+  * [Cristobal Valenzuela](https://cvalenzuelab.com/)
+  * [Yining Shi](https://1023.io)
+
+**Credits**:
+  * Paper Reference | Website URL | Github Repo | Book reference | etc
+
+## Source Code
+
+* [/src/ImageClassifier](https://github.com/ml5js/ml5-library/tree/main/src/ImageClassifier)
diff --git a/src/markdown/Reference/reference/image-classifier.md b/src/markdown/Reference/reference/image-classifier.md
new file mode 100644
index 0000000..50be1e2
--- /dev/null
+++ b/src/markdown/Reference/reference/image-classifier.md
@@ -0,0 +1,301 @@
+---
+slug: "image-classifier"
+title: "ImageClassifier"
+---
+
+# ImageClassifier
+
+
+<center>
+    <img style="display:block; max-height:20rem" alt="image classification of bird" src="_media/reference__header-imageClassifier.png">
+</center>
+
+
+## Description
+You can use neural networks to recognize the content of images. `ml5.imageClassifier()` is a method to create an object that classifies an image using a pre-trained model.
+
+It should be noted that the pre-trained model provided by the example below was trained on a database of approximately 15 million images (ImageNet). The ml5 library accesses this model from the cloud. What the algorithm labels an image is entirely dependent on that training data -- what is included, excluded, and how those images are labeled (or mislabeled).
+
+**Train your own image classification model with Teachable Machine**: If you'd like to train your own custom image classification model, try [Google's Teachable Machine](https://teachablemachine.withgoogle.com/io19).
+
+## Quickstart
+
+```js
+// Initialize the Image Classifier method with MobileNet
+const classifier = ml5.imageClassifier('MobileNet', modelLoaded);
+
+// When the model is loaded
+function modelLoaded() {
+  console.log('Model Loaded!');
+}
+
+// Make a prediction with a selected image
+classifier.classify(document.getElementById('image'), (err, results) => {
+  console.log(results);
+});
+```
+
+
+## Usage
+
+### Initialize
+
+```js
+const classifier = ml5.imageClassifier(model, ?video, ?options, ?callback);
+```
+
+#### Parameters
+* **model**: REQUIRED. A String value of a valid model OR a url to a model.json that contains a pre-trained model. Case insensitive. Models available are: 'MobileNet', 'Darknet' and 'Darknet-tiny','DoodleNet', or any image classification model trained in Teachable Machine. Below are some examples of creating a new image classifier:
+  * `mobilenet`:
+    ```js
+    const classifier = ml5.imageClassifier('MobileNet', modelReady);
+    ```
+  * `Darknet`:
+    ```js
+    const classifier = ml5.imageClassifier('Darknet', modelReady);
+    ```
+  * `DoodleNet`:
+    ```js
+    const classifier = ml5.imageClassifier('DoodleNet', modelReady);
+    ```
+  * Custom Model from Teachable Machine:
+    ```js
+    const classifier = ml5.imageClassifier('path/to/custom/model.json', modelReady);
+    ```
+* **video**: OPTIONAL. An HTMLVideoElement
+* **callback**: OPTIONAL. A function to run once the model has been loaded. If no callback is provided, it will return a promise that will be resolved once the model has loaded.
+* **options**: OPTIONAL. An object to change the defaults (shown below). The available options are:
+  ```js
+  {
+    version: 1,
+    alpha: 1.0,
+    topk: 3,
+  };
+  ```
+
+### Properties
+
+
+***
+#### .video
+> *Object*. HTMLVideoElement if given in the constructor. Otherwise it is null.
+***
+
+***
+#### .model
+> *Object*. The image classifier model specified in the constructor.
+***
+
+***
+#### .modelName
+> *String*. The name of the image classifier model specified in the constructor
+***
+
+***
+#### .modelUrl
+> *String*. The absolute or relative URL path to the input model.
+***
+
+
+### Methods
+
+***
+#### .classify()
+> Given an image or video, returns an array of objects containing class names and probabilities
+
+If you DID NOT specify an image or video in the constructor...
+```js
+classifier.classify(input, ?numberOfClasses, ?callback);
+```
+
+If you DID specify an image or video in the constructor...
+```js
+classifier.classify(?numberOfClasses , ?callback);
+```
+
+📥 **Inputs**
+
+* **input**: HTMLImageElement | ImageData | HTMLCanvasElement | HTMLVideoElement. NOTE: Videos can also be added in the constructor and then do not need to be specified again as an input.
+* **numberOfClasses**: Number. The number of classes you want to return.
+* **callback**: Function. A function to handle the results of `.segment()`. Likely a function to do something with the segmented image.
+
+📤 **Outputs**
+
+* **Object**: Returns an array of objects. Each object contains `{label, confidence}`.
+
+***
+
+
+## Examples
+
+**p5.js**
+* [ImageClassification](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification)
+* [ImageClassification_DoodleNet_Canvas](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_DoodleNet_Canvas)
+* [ImageClassification_DoodleNet_Video](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_DoodleNet_Video)
+* [ImageClassification_MultipleImages](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_MultipleImages)
+* [ImageClassification_Teachable-Machine](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_Teachable-Machine)
+* [ImageClassification_Video](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_Video)
+* [ImageClassification_VideoScavengerHunt](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_VideoScavengerHunt)
+* [ImageClassification_VideoSound](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_VideoSound)
+* [ImageClassification_VideoSoundTranslate](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_VideoSoundTranslate)
+* [ImageClassification_Video_Load](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_Video_Load)
+
+**p5.js Web Editor**
+
+* [ImageClassification](https://editor.p5js.org/ml5/sketches/ImageClassification)
+* [ImageClassification_DoodleNet_Canvas](https://editor.p5js.org/ml5/sketches/ImageClassification_DoodleNet_Canvas)
+* [ImageClassification_DoodleNet_Video](https://editor.p5js.org/ml5/sketches/ImageClassification_DoodleNet_Video)
+* [ImageClassification_MultipleImages](https://editor.p5js.org/ml5/sketches/ImageClassification_MultipleImages)
+* [ImageClassification_Teachable-Machine](https://editor.p5js.org/ml5/sketches/ImageClassification_Teachable-Machine)
+* [ImageClassification_Video](https://editor.p5js.org/ml5/sketches/ImageClassification_Video)
+* [ImageClassification_VideoScavengerHunt](https://editor.p5js.org/ml5/sketches/ImageClassification_VideoScavengerHunt)
+* [ImageClassification_VideoSound](https://editor.p5js.org/ml5/sketches/ImageClassification_VideoSound)
+* [ImageClassification_VideoSoundTranslate](https://editor.p5js.org/ml5/sketches/ImageClassification_VideoSoundTranslate)
+
+**plain javascript**
+* [ImageClassification](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification)
+* [ImageClassification_DoodleNet_Canvas](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_DoodleNet_Canvas)
+* [ImageClassification_DoodleNet_Video](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_DoodleNet_Video)
+* [ImageClassification_MultipleImages](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_MultipleImages)
+* [ImageClassification_Video](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_Video)
+* [ImageClassification_VideoScavengerHunt](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_VideoScavengerHunt)
+* [ImageClassification_VideoSound](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_VideoSound)
+* [ImageClassification_VideoSoundTranslate](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_VideoSoundTranslate)
+* [ImageClassification_Video_Load](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_Video_Load)
+
+## Demo
+
+No demos yet - contribute one today!
+
+## Tutorials
+
+### Webcam Image Classification via CodingTrain
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/D9BoBSkLvFo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+### Image Classification with MobileNet via CodingTrain
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/yNkAuWz5lnY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Model and Data Provenance
+> A project started by [Ellen Nickles](https://github.com/ellennickles/)
+
+### Models Overview
+
+A nice description of the models overview
+
+#### MobileNet - Model Biography
+
+- **Description**
+  - MobileNet is a term that describes a type of machine learning model architecture that has been optimized to run on platforms with limited computational power, such as applications on mobile or embedded devices. MobileNets have several use cases including image classification, object detection, and image segmentation. This particular MobileNet model was trained for Image Classification.
+  - ml5 uses a MobileNet created with TensorFlow.js, a JavaScript library from TensorFlow. Several TensorFlow.js MobileNet versions are available for image classification, and as of June 2019, ml5 defaults to importing MobileNetV2.
+- **Developer and Year**
+  - Google’s Tensorflow.js team
+- **Purpose and Intended Users**
+  - From the website: TensorFlow is an open source machine learning platform that “has a comprehensive, flexible ecosystem of tools, libraries, and community resources that lets researchers push the state-of-the-art in ML and developers easily build and deploy ML-powered applications.” This model is available for use in the ml5 library because Tensorflow licenses it with Apache License 2.0.
+- **Hosted Location**
+  - ml5 imports MobileNetV2 from TensorFlow, hosted on the NPM database, however a different version may be specified in your ml5 script. For whichever you specify, your ml5 sketch will automatically use the most recent version distributed on NPM.
+- **ml5 Contributor and Year**
+  - Ported by Cristóbal Valenzuela & Dan Shiffman in 2018 
+- **References**
+  - ml5 Contributor [Cristóbal Valenzuela](https://cvalenzuelab.com/)
+  - Website [TensorFlow](https://www.tensorflow.org/)
+  - GitHub Repository [TensorFlow.js MobileNet](https://github.com/tensorflow/tfjs-models/tree/master/mobilenet)
+  - NPM Readme [@tensorflow-models/mobilenet](https://www.npmjs.com/package/@tensorflow-models/mobilenet)
+  - Paper [MobileNetV2: MobileNetV2: Inverted Residuals and Linear Bottlenecks](https://arxiv.org/abs/1801.04381)
+
+#### MobileNet - Data Biography
+
+- **Description**
+  - The TensorFlow MobileNetV2 model on which the TensorFlow.js version is based was trained on 50K photographs. In addition, 150K photographs are also provided by the source for validation and testing.
+- **Source**
+  - The images are from the ImageNet database from ImageNet’s Large Scale Visual Recognition Challenge 2012 (ILSVRC2012).
+- **Collector and Year**
+  - Development of the ImageNet dataset began in 2009 and is currently maintained by researchers at U.S. universities.
+- **Collection Method**
+  - From the website:  photographs for the validation and test data were collected from “flickr and other search engines, hand labeled with the presence or absence of 1000 object categories.”
+- **Purpose and Intended Users**
+  - From the website: ImageNet datasets are publicly available and frequently used in computer vision research. The research team “envision[s] ImageNet as a useful resource to researchers in the academic world, as well as educators around the world.” According to an update posted in September 2019, it contains over 14 million images and 22,000 visual categories using a vocabulary from the English dataset, WordNet.
+- **References**
+  - Website [ImageNet](http://www.image-net.org/)
+  - Website [ImageNet’s Large Scale Visual Recognition Challenge 2012 (ILSVRC2012)](http://www.image-net.org/challenges/LSVRC/2012/)
+
+#### DarkNet and DarkNet-tiny - Model Biography
+
+- **Description**
+  - DarkNet (or DarkNet Reference) and Darknet-tiny (or Tiny Darknet are small and fast pre-trained models. Tiny Darknet is the smaller model of the two, but Darknet Reference is faster. The developer provides an open source framework, also called Darknet, for running models.
+- **Developer and Year**
+  - Joseph Redmon
+- **Purpose and Intended Users**
+  - Redmon provides several open source licenses, including MIT License.
+- **Hosted Location**
+  - ml5 hosts both models
+- **ml5 Contributor and Year**
+  - Ported by Mohamed Amine in 2018
+- **References**
+  - Developer [Joseph Redmon](https://pjreddie.com/)
+  - ml5 Contributor [Mohamed Amine](https://github.com/TheHidden1)
+  - Website Darknet/[Darknet Reference](https://pjreddie.com/darknet/imagenet/#reference)
+  - Website Darknet-tiny/ [Tiny DarkNet](https://pjreddie.com/darknet/tiny-darknet/)
+
+#### DarkNet and DarkNet-tiny - Data Biography
+
+- **Description**
+  - Darknet Reference is listed as a pre-trained model for ImageNet classification, so it is likely that the data are photographs from the ImageNet database.
+- **Source**
+  - You can learn more about the ImageNet in the MobileNet section above.
+- **Collector and Year**
+  - TBD
+- **Collection Method**
+  - TBD
+- **Purpose and Intended Users**
+  - TBD
+- **References**
+  - TBD
+
+#### DoodleNet - Model Biography
+
+- **Description**
+  - This pre-trained model classifies and labels hand-drawn sketches from 345 categories. 
+- **Developer and Year**
+  - Yining Shi developed the model in TensorFlow and ported it to TensorFlow.js so that it could be ported to the ml5 library.
+- **Purpose and Intended Users**
+  - Developed for the ml5 community
+- **Hosted Location**
+  - ml5 hosts this model
+- **ml5 Contributor and Year**
+  - Yining Shi in 2019
+- **References**
+  - Developer and ml5 Contributor [Yining Shi](https://1023.io/)
+  - GitHub Repository [DoodleNet](https://github.com/yining1023/doodleNet)
+
+#### DoodleNet - Data Biography
+
+- **Description**
+  - The training dataset consists of 345 categories of doodles with 50K images per category. 
+- **Source**
+  - Google’s Quick, Draw! Dataset
+- **Collector and Year**
+  - Google released the Quick, Draw! game in 2016. Shi collected images for her model in 2019.
+- **Collection Method**
+  - The doodles are crowdsourced from visitors’ contributions as they play Google’s Quick, Draw! Game, and they are publicly available to download.
+- **Purpose and Intended Users**
+  - From the website: Google’s Quick, Draw! Game was developed as “an example of how you can use machine learning in fun ways” by the Google Creative Lab, Data Arts Team, and their collaborators as part of Google’s AI Experiments showcase. 
+- **References**
+  - Website [Google’s Quick, Draw!](https://quickdraw.withgoogle.com/#)
+  - Website [Google’s Quick, Draw! Dataset](https://quickdraw.withgoogle.com/data)
+
+
+
+
+## Acknowledgements
+
+**Contributors**:
+  * [Cristobal Valenzuela](https://cvalenzuelab.com/)
+  * [Yining Shi](https://1023.io)
+
+**Credits**:
+  * Paper Reference | Website URL | Github Repo | Book reference | etc
+
+## Source Code
+
+* [/src/ImageClassifier](https://github.com/ml5js/ml5-library/tree/main/src/ImageClassifier)
diff --git a/src/markdown/Reference/reference/neural-network.md b/src/markdown/Reference/reference/neural-network.md
new file mode 100644
index 0000000..3c807f1
--- /dev/null
+++ b/src/markdown/Reference/reference/neural-network.md
@@ -0,0 +1,883 @@
+---
+slug: "models/neural-network"
+title: "NeuralNetwork"
+---
+
+# NeuralNetwork
+
+
+<center>
+    <img style="display:block; max-height:20rem" alt="Illustration of brain" src="_media/reference__header-neural-network.png">
+</center>
+
+
+## Description
+
+Create your own neural network and train it in the browser with the `ml5.neuralNetwork`. Collect data to train your neural network or use existing data to train your neural network in real-time. Once it is trained, your neural network can do `classification` or `regression` tasks.
+
+
+## Quickstart
+
+In general the steps for using the `ml5.neuralNetwork` look something like:
+* Step 1: load data or create some data
+* Step 2: set your neural network options & initialize your neural network
+* Step 4: add data to the neural network
+* Step 5: normalize your data
+* Step 6: train your neural network
+* Step 7: use the trained model to make a classification
+* Step 8: do something with the results
+
+The below examples are quick 
+
+### Creating data in real-time
+```js
+// Step 1: load data or create some data 
+const data = [
+  {r:255, g:0, b:0, color:'red-ish'},
+  {r:254, g:0, b:0, color:'red-ish'},
+  {r:253, g:0, b:0, color:'red-ish'},
+  {r:0, g:255, b:0, color:'green-ish'},
+  {r:0, g:254, b:0, color:'green-ish'},
+  {r:0, g:253, b:0, color:'green-ish'},
+  {r:0, g:0, b:255, color:'blue-ish'},
+  {r:0, g:0, b:254, color:'blue-ish'},
+  {r:0, g:0, b:253, color:'blue-ish'}
+];
+
+// Step 2: set your neural network options
+const options = {
+  task: 'classification',
+  debug: true
+}
+
+// Step 3: initialize your neural network
+const nn = ml5.neuralNetwork(options);
+
+// Step 4: add data to the neural network
+data.forEach(item => {
+  const inputs = {
+    r: item.r, 
+    g: item.g, 
+    b: item.b
+  };
+  const output = {
+    color: item.color
+  };
+
+  nn.addData(inputs, output);
+});
+
+// Step 5: normalize your data;
+nn.normalizeData();
+
+// Step 6: train your neural network
+const trainingOptions = {
+  epochs: 32,
+  batchSize: 12
+}
+nn.train(trainingOptions, finishedTraining);
+
+// Step 7: use the trained model
+function finishedTraining(){
+  classify();
+}
+
+// Step 8: make a classification
+function classify(){
+  const input = {
+    r: 255, 
+    g: 0, 
+    b: 0
+  }
+  nn.classify(input, handleResults);
+}
+
+// Step 9: define a function to handle the results of your classification
+function handleResults(error, result) {
+    if(error){
+      console.error(error);
+      return;
+    }
+    console.log(result); // {label: 'red', confidence: 0.8};
+}
+
+```
+
+### Loading Existing Data
+
+External data: `"data/colorData.json"`
+```json
+{
+  "entries": [
+    {"r":255, "g":0, "b":0, "color":"red-ish"},
+    {"r":254, "g":0, "b":0, "color":"red-ish"},
+    {"r":253, "g":0, "b":0, "color":"red-ish"},
+    {"r":0, "g":255, "b":0, "color":"green-ish"},
+    {"r":0, "g":254, "b":0, "color":"green-ish"},
+    {"r":0, "g":253, "b":0, "color":"green-ish"},
+    {"r":0, "g":0, "b":255, "color":"blue-ish"},
+    {"r":0, "g":0, "b":254, "color":"blue-ish"},
+    {"r":0, "g":0, "b":253, "color":"blue-ish"}
+  ]
+}
+```
+In your JavaScript: `"script.js"`
+```js
+// Step 1: set your neural network options
+const options = {
+  dataUrl: "data/colorData.json",
+  task: 'classification',
+  inputs:['r', 'g', 'b'],
+  outputs:['color'],
+  debug: true
+}
+
+// Step 2: initialize your neural network
+const nn = ml5.neuralNetwork(options, dataLoaded);
+
+// Step 3: normalize data and train the model
+function dataLoaded(){
+  nn.normalizeData();
+  trainModel();
+}
+
+// Step 4: train the model
+function trainModel(){
+  const trainingOptions = {
+    epochs: 32,
+    batchSize: 12
+  }
+  nn.train(trainingOptions, finishedTraining);
+}
+
+// Step 5: use the trained model
+function finishedTraining(){
+  classify();
+}
+
+// Step 6: make a classification
+function classify(){
+  const input = {
+    r: 255, 
+    g: 0, 
+    b: 0
+  }
+  nn.classify(input, handleResults);
+}
+
+// Step 7: define a function to handle the results of your classification
+function handleResults(error, result) {
+    if(error){
+      console.error(error);
+      return;
+    }
+    console.log(result); // {label: 'red', confidence: 0.8};
+}
+
+```
+
+
+## Usage
+
+#### Quick Reference
+
+* For your reference, a few typical uses are showcased below:
+  * Example 1:
+    ```js
+    const options = {
+      inputs: 1,
+      outputs: 1,
+      task: 'regression'
+    }
+    const nn = ml5.neuralNetwork(options)
+    ```
+  * Example 2: loading data as a csv
+    ```js
+    const options = {
+      dataUrl: 'weather.csv',
+      inputs: ['avg_temperature', 'humidity'],
+      outputs: ['rained'],
+      task: 'classification'
+    }
+    const nn = ml5.neuralNetwork(options, modelLoaded)
+    ```
+  * Example 3: loading data as a json
+    ```js
+    /**
+    The weather json looks something like:
+    {"data": [
+      {"xs": {"avg_temperature":20, "humidity": 0.2}, "ys": {"rained": "no"}},
+      {"xs": {"avg_temperature":30, "humidity": 0.9}, "ys": {"rained": "yes"}}
+    ] }
+    * */
+    const options = {
+      dataUrl: 'weather.json',
+      inputs: ['avg_temperature', 'humidity'],
+      outputs: ['rained'],
+      task: 'classification'
+    }
+    const nn = ml5.neuralNetwork(options, modelLoaded)
+    ```
+  * Example 4: specifying labels for a blank neural network
+    ```js
+    const options = {
+      inputs: ['x', 'y'],
+      outputs: ['label'],
+      task: 'classification',
+    };
+    const nn = ml5.neuralNetwork(options);
+    ```
+  * Example 5: creating a convolutional neural network for image classification by setting `task: imageClassification`.
+    ```js
+    const IMAGE_WIDTH = 64;
+    const IMAGE_HEIGHT = 64;
+    const IMAGE_CHANNELS = 4;
+    const options = {
+      task: 'imageClassification',
+      inputs:[IMAGE_WIDTH, IMAGE_HEIGHT, IMAGE_CHANNELS],
+      outputs: ['label']
+    }
+    const nn = ml5.neuralNetwork(options);
+    ```
+
+
+### Initialization & Parameters
+
+There are a number of ways to initialize the `ml5.neuralNetwork`. Below we cover the possibilities:
+
+1. Minimal Configuration Method
+2. Defining inputs and output labels as numbers or as arrays of labels
+3. Loading External Data
+4. Loading a pre-trained Model
+5. A convolutional neural network for image classification tasks
+6. Defining custom layers
+
+#### Minimal Configuration Method
+
+**Minimal Configuration Method**: If you plan to create data in real-time, you can just set the type of task you want to accomplish `('regression' | 'classification')` and then create the neuralNetwork. You will have to add data later on, but ml5 will figure the inputs and outputs based on the data your add. 
+  ```js
+  const options = {
+    task: 'regression' // or 'classification'
+  }
+  const nn = ml5.neuralNetwork(options)
+  ```
+
+#### Defining inputs and output labels as numbers or as arrays of labels
+
+**Defining inputs and output labels as numbers or as arrays of labels**: If you plan to create data in real-time, you can just set the type of task you want to accomplish `('regression' | 'classification')` and then create the neuralNetwork. To be more specific about your inputs and outputs, you can also define the *names of the labels for your inputs and outputs* as arrays OR *the number of inputs and outputs*. You will have to add data later on. Note that if you add data as JSON, your JSON Keys should match those defined in the `options`. If you add data as arrays, make sure the order you add your data match those given in the `options`.
+
+* **As arrays of labels**
+  ```js
+  const options = {
+    task: 'classification' // or 'regression'
+    inputs:['r', 'g','b'],
+    outputs: ['color']
+  }
+  const nn = ml5.neuralNetwork(options)
+  ```
+* **As numbers**
+  ```js
+  const options = {
+    task: 'classification' // or 'regression'
+    inputs: 3, // r, g, b
+    outputs: 2 // red-ish, blue-ish
+  }
+  const nn = ml5.neuralNetwork(options)
+    ```
+
+#### Loading External Data
+**Loading External Data**: You can initialize `ml5.neuralNetwork` specifying an external url to some data structured as a CSV or a JSON file. If you pass in data as part of the options, you will need to provide a **callback function** that will be called when your data has finished loading. Furthermore, you will **need to specify which properties** in the data that ml5.neuralNetwork will use for inputs and outputs.
+
+```js
+const options = {
+    dataUrl: 'data/colorData.csv'
+    task: 'classification' // or 'regression'
+    inputs: ['r', 'g','b'], // r, g, b
+    outputs: ['color'] // red-ish, blue-ish
+}
+
+const nn = ml5.neuralNetwork(options, dataLoaded)
+
+function dataLoaded(){
+  // continue on your neural network journey
+  nn.normalizeData();
+  // ...
+}
+```
+
+#### Loading a pre-trained Model
+
+**Loading a pre-trained Model**: If you've trained a model using the `ml5.neuralNetwork` and saved it out using the `ml5.neuralNetwork.save()` then you can load in the **model**, the **weights**, and the **metadata**.
+
+```js
+const options = {
+    task: 'classification' // or 'regression'
+  }
+  const nn = ml5.neuralNetwork(options);
+  
+  const modelDetails = {
+    model: 'model/model.json',
+    metadata: 'model/model_meta.json',
+    weights: 'model/model.weights.bin'
+  }
+  nn.load(modelDetails, modelLoaded)
+
+  function modelLoaded(){
+    // continue on your neural network journey
+    // use nn.classify() for classifications or nn.predict() for regressions
+  }
+```
+
+### A convolutional neural network for image classification tasks
+
+**A convolutional neural network for image classification tasks**: You can use convolutional neural networks in the `ml5.neuralNetwork` by setting the `task:"imageClassification"`.
+
+```js
+const IMAGE_WIDTH = 64;
+const IMAGE_HEIGHT = 64;
+const IMAGE_CHANNELS = 4;
+const options = {
+  task: 'imageClassification',
+  inputs:[IMAGE_WIDTH, IMAGE_HEIGHT, IMAGE_CHANNELS],
+  outputs: ['label']
+}
+const nn = ml5.neuralNetwork(options);
+```
+
+
+### Defining Custom Layers
+
+**Defaults**: By default the `ml5.neuralNetwork` has simple default architectures for the `classification`, `regression` and `imageClassificaiton` tasks. 
+
+* default `classification` layers:
+  ```js
+  layers:[
+    {
+      type: 'dense',
+      units: this.options.hiddenUnits,
+      activation: 'relu',
+    },
+    {
+      type: 'dense',
+      activation: 'softmax',
+    },
+  ];
+  ```
+* default `regression` layers:
+  ```js
+  layers: [
+    {
+      type: 'dense',
+      units: this.options.hiddenUnits,
+      activation: 'relu',
+    },
+    {
+      type: 'dense',
+      activation: 'sigmoid',
+    },
+  ];
+  ```
+* default `imageClassification` layers:
+  ```js
+  layers = [
+    {
+      type: 'conv2d',
+      filters: 8,
+      kernelSize: 5,
+      strides: 1,
+      activation: 'relu',
+      kernelInitializer: 'varianceScaling',
+    },
+    {
+      type: 'maxPooling2d',
+      poolSize: [2, 2],
+      strides: [2, 2],
+    },
+    {
+      type: 'conv2d',
+      filters: 16,
+      kernelSize: 5,
+      strides: 1,
+      activation: 'relu',
+      kernelInitializer: 'varianceScaling',
+    },
+    {
+      type: 'maxPooling2d',
+      poolSize: [2, 2],
+      strides: [2, 2],
+    },
+    {
+      type: 'flatten',
+    },
+    {
+      type: 'dense',
+      kernelInitializer: 'varianceScaling',
+      activation: 'softmax',
+    },
+  ];
+  ```
+
+**Defining Custom Layers**: You can define custom neural network architecture by defining your layers in the `options` that are passed to the `ml5.neuralNetwork` on initialization.
+
+* A neural network with 3 layers
+  ```js
+  const options = {
+    debug: true,
+    task: 'classification',
+    layers: [
+      {
+        type: 'dense',
+        units: 16,
+        activation: 'relu'
+      },
+      {
+        type: 'dense',
+        units: 16,
+        activation: 'sigmoid'
+      },
+      {
+        type: 'dense',
+        activation: 'sigmoid'
+      }
+    ]
+  };
+  const nn = ml5.neuralNetwork(options);
+  ```
+
+#### Arguments for `ml5.neuralNetwork(options)` 
+
+The options that can be specified are:
+
+```js
+const DEFAULTS = {
+  inputs: [], // can also be a number
+  outputs: [], // can also be a number
+  dataUrl: null,
+  modelUrl: null,
+  layers: [], // custom layers 
+  task: null, // 'classification', 'regression', 'imageClassificaiton'
+  debug: false, // determines whether or not to show the training visualization
+  learningRate: 0.2,
+  hiddenUnits: 16,
+};
+```
+
+<!-- 
+* **inputsOrOptions**: REQUIRED. An `options` object or a number specifying the number of inputs.
+* **outputsOrCallback**: OPTIONAL. A callback to be called after your data is loaded as specified in the `options.dataUrl` or a `number` specifying the number of `outputs`.
+
+-->
+
+***
+### Properties
+
+| property | description | datatype |
+| :---     | ---         | --- |
+|`.callback` |   the callback to be called after data is loaded on initialization  | `function` |
+|`.options` |    the options for how the neuralNetwork should be configured on initialization   | `object` |
+|`.neuralNetwork` |    the `neuralNetwork` class where all of the tensorflow.js model operations are organized  | `class` |
+|`.neuralNetworkData` | the `neuralNetworkData` class where all of the data handling operations are organized  | `class` |
+|`.neuralNetworkVis` |    the `neuralNetworkVis` class where all of the tf-vis operations are organized  | `class` |
+|`.data` |   The property that stores all of the training data after `.train()` is called  | `class` |
+|`.ready` |  set to true if the model is loaded and ready, false if it is not.  | `boolean` |
+
+***
+
+### Methods
+
+#### Overview
+
+| method | description | 
+| :---   | ---         |
+| `.addData()` | adds data to the `neuralNetworkData.data.raw` array |
+| `.normalizeData()` | normalizes the data stored in `neuralNetworkData.data.raw` and stores the normalized values in the `neuralNetwork.data.training` array |
+| `.train()` | uses the data in the `neuralNetwork.data.training` array to train your model |
+| `.predict()` | for regression tasks, allows you to make a prediction based on an input array or JSON object.    |
+| `.predictMultiple()` | for regression tasks, allows you to make a prediction based on an input array of arrays or array of JSON objects.    |
+| `.classify()` | for classification tasks, allows you to make a classification based on an input array or JSON object.     |
+| `.classifyMultiple()` | for classification tasks, allows you to make classifications based on an input array of arrays or array of JSON objects.     |
+| `.saveData()` | allows you to save your data out from the `neuralNetworkData.data.raw` array  |
+| `.loadData()` | allows you to load data previously saved from the `.saveData()` function |
+| `.save()` | allows you to save the trained model     |
+| `.load()` | allows you to load a trained model     |
+
+
+***
+#### .addData()
+> If you are not uploading data using the `dataUrl` property of the options given to the constructor, then you can add data to a "blank" neural network class using the `.addData()` function.
+
+```js
+neuralNetwork.addData(xs, ys);
+```
+
+📥 **Inputs**
+
+* **xs**: Required. Array | Object.
+  * If an array is given, then the inputs must be ordered as specified in the constructor. If no labels are given in the constructor, then the order that your data are added here will set the order of how you will pass data to `.predict()` or `.classify()`.
+  * If an object is given, then feed in key/value pairs.
+  * if `task:imageClassification`: you can supply a HTMLImageElement or HTMLCanvasElement or a flat 1-D array of the pixel values such that the dimensions match with the defined image size in the `options.inputs: [IMAGE_WIDTH, IMAGE_HEIGHT, IMAGE_CHANNELS]` 
+* **ys**: Required. Array | Object.
+  * If an array is given, then the inputs must be ordered as specified in the constructor.
+  * If an object is given, then feed in key/value pairs.
+
+📤 **Outputs**
+
+* n/a: adds data to `neuralNetwork.data.data.raw`
+
+***
+
+***
+#### .normalizeData()
+> normalizes the data on a scale from 0 to 1. The data being normalized are part of the `NeuralNetworkData` class which can be accessed in: `neuralNetwork.data.data.raw`
+
+```js
+neuralNetwork.normalizeData();
+```
+
+📥 **Inputs**
+
+* n/a
+
+📤 **Outputs**
+
+* n/a: normalizes the data in `neuralNetwork.data.data.raw` and adds `inputs` and `output` tensors to `neuralNetwork.data.data.tensor` as well as the `inputMin`, `inputMax`, `outputMin`, and `outputMax` as tensors. The `inputMin`, `inputMax`, `outputMin`, and `outputMax` are also added to `neuralNetwork.data.data` as Numbers.
+
+***
+
+
+***
+#### .train()
+> trains the model with the data loaded during the instantiation of the `NeuralNetwork` or the data added using `neuralNetwork.addData()`
+
+```js
+neuralNetwork.train(?optionsOrCallback, ?optionsOrWhileTraining, ?callback);
+```
+
+📥 **Inputs**
+* **optionsOrCallback**: Optional.
+  * If an object of options is given, then `optionsOrCallback` will be an object where you can specify the `batchSize` and `epochs`:
+    ```js
+    {
+      batchSize: 24,
+      epochs: 32,
+    };
+    ```
+  * If a callback function is given here then this will be a callback that will be called when the training is finished.
+    ```js
+    function doneTraining() {
+      console.log('done!');
+    }
+    ```
+  * If a callback function is given here and a second callback function is given, `optionsOrCallback` will be a callback function that is called after each `epoch` of training, and the `optionsOrWhileTraining` callback function will be a callback function that is called when the training has completed:
+    ```js
+    function whileTraining(epoch, loss) {
+      console.log(`epoch: ${epoch}, loss:${loss}`);
+    }
+    function doneTraining() {
+      console.log('done!');
+    }
+    neuralNetwork.train(whileTraining, doneTraining);
+    ```
+* **optionsOrWhileTraining**: Optional.
+  * If an object of options is given as the first parameter, then `optionsOrWhileTraining` will be a callback  function that is fired after the training as finished.
+  * If a callback function is given as the first parameter to handle the `whileTraining`, then `optionsOrWhileTraining` will be a callback function that is fired after the training as finished.
+* **callback**: Optional. Function.
+  * If an object of options is given as the first parameter and a callback function is given as a second parameter, then this `callback` parameter will be a callback function that is fired after the training as finished.
+  ```js
+  const trainingOptions = {
+    batchSize: 32,
+    epochs: 12,
+  };
+  function whileTraining(epoch, loss) {
+    console.log(`epoch: ${epoch}, loss:${loss}`);
+  }
+  function doneTraining() {
+    console.log('done!');
+  }
+  neuralNetwork.train(trainingOptions, whileTraining, doneTraining);
+
+  ```
+
+📤 **Outputs**
+
+* n/a: Here, `neuralNetwork.model` is created and the model is trained.
+
+***
+
+
+
+***
+#### .predict()
+> Given an input, will return an array of predictions.
+
+```js
+neuralNetwork.predict(inputs, callback);
+```
+
+📥 **Inputs**
+
+* **inputs**: Required. Array | Object.
+  * If an array is given, then the input values should match the order that the data are specified in the `inputs` of the constructor options.
+  * If an object is given, then the input values should be given as a key/value pair. The keys must match the keys given in the inputs of the constructor options and/or the keys added when the data were added in `.addData()`.
+* **callback**: Required. Function. A function to handle the results of `.predict()`.
+
+📤 **Outputs**
+
+* **Array**: Returns an array of objects. Each object contains `{value, label}`.
+
+***
+
+***
+#### .predictMultiple()
+> Given an input, will return an array of arrays of predictions.
+
+```js
+neuralNetwork.predictMultiple(inputs, callback);
+```
+
+📥 **Inputs**
+
+* **inputs**: Required. Array of arrays | Array of objects.
+  * If an array of arrays is given, then the input values of each child array should match the order that the data are specified in the `inputs` of the constructor options.
+  * If an array of objects is given, then the input values of each child object should be given as a key/value pair. The keys must match the keys given in the inputs of the constructor options and/or the keys added when the data were added in `.addData()`.
+* **callback**: Required. Function. A function to handle the results of `.predictMultiple()`.
+
+📤 **Outputs**
+
+* **Array**: Returns an array of arrays. Each child array contains objects. Each object contains `{value, label}`.
+
+***
+
+***
+#### .classify()
+> Given an input, will return an array of classifications.
+
+```js
+neuralNetwork.classify(inputs, callback);
+```
+
+📥 **Inputs**
+
+* **inputs**: Required. Array | Object.
+  * If an array is given, then the input values should match the order that the data are specified in the `inputs` of the constructor options.
+  * If an object is given, then the input values should be given as a key/value pair. The keys must match the keys given in the inputs of the constructor options and/or the keys added when the data were added in `.addData()`.
+* **callback**: Required. Function. A function to handle the results of `.classify()`.
+
+📤 **Outputs**
+
+* **Array**: Returns an array of objects. Each object contains `{label, confidence}`.
+
+***
+
+***
+#### .classifyMultiple()
+> Given an input, will return an array of arrays of classifications.
+
+```js
+neuralNetwork.classifyMultiple(inputs, callback);
+```
+
+📥 **Inputs**
+
+* **inputs**: Required. Array of arrays | Array of objects.
+  * If an array of arrays is given, then the input values of each child array should match the order that the data are specified in the `inputs` of the constructor options.
+  * If an array of objects is given, then the input values of each child object should be given as a key/value pair. The keys must match the keys given in the inputs of the constructor options and/or the keys added when the data were added in `.addData()`.
+* **callback**: Required. Function. A function to handle the results of `.classifyMultiple()`.
+
+📤 **Outputs**
+
+* **Array**: Returns an array of arrays. Each child array contains objects. Each object contains `{label, confidence}`.
+
+***
+
+
+***
+#### .saveData()
+> Saves the data that has been added
+
+```js
+neuralNetwork.saveData(?outputName, ?callback);
+```
+
+📥 **Inputs**
+* **outputName**: Optional. String. An output name you'd like your data to be called. If no input is given, then the name will be `data_YYYY-MM-DD_mm-hh`.
+* **callback**: Optional. function. A callback that is called after the data has been saved.
+
+
+📤 **Outputs**
+
+* n/a: downloads the data to a `.json` file in your `downloads` folder.
+
+***
+
+***
+#### .loadData()
+> loads the data to `neuralNetwork.data.data.raw`
+
+```js
+neuralnetwork.loadData(filesOrPath, ?callback);
+```
+
+📥 **Inputs**
+* **filesOrPath**: REQUIRED. String | InputFiles. A string path to a `.json` data object or InputFiles from html input `type="file"`. Must be structured for example as: `{"data": [ { xs:{input0:1, input1:2}, ys:{output0:"a"},  ...]}`
+* **callback**: Optional. function. A callback that is called after the data has been loaded.
+
+📤 **Outputs**
+
+* n/a: set `neuralNetwork.data.data.raw` to the array specified in the `"data"` property of the incoming `.json` file.
+
+***
+
+
+***
+#### .save()
+> Saves the trained model
+
+```js
+neuralNetwork.save(?outputName, ?callback);
+```
+
+📥 **Inputs**
+* **outputName**: Optional. String. An output name you'd like your model to be called. If no input is given, then the name will be `model`.
+* **callback**: Optional. function. A callback that is called after the model has been saved.
+
+📤 **Outputs**
+
+* n/a: downloads the model to a `.json` file and a `model.weights.bin` binary file in your `downloads` folder.
+
+***
+
+***
+#### .load()
+> Loads a pre-trained model
+
+```js
+neuralNetwork.load(filesOrPath, ?callback);
+```
+
+📥 **Inputs**
+* **filesOrPath**: REQUIRED. String | InputFiles.
+  * If a string path to the `model.json` data object is given, then the `model.json`, `model_meta.json` file and its accompanying `model.weights.bin` file will be loaded. Note that the names must match.
+  * If InputFiles from html input `type="file"`. Then make sure to select ALL THREE of the `model.json`, `model_meta.json` and the `model.weights.bin` file together to upload otherwise the load will throw an error.
+  * Method 1: using a json object. In this case, the paths to the specific files are set directly.
+    ```js
+    const modelInfo = {
+      model: 'path/to/model.json',
+      metadata: 'path/to/model_meta.json',
+      weights: 'path/to/model.weights.bin',
+    };
+    neuralNetwork.load(modelInfo, modelLoadedCallback);
+    ```
+  * Method 2: specifying only the path to th model.json. In this case, the `model_meta.json` and the `model.weights.bin` are assumed to be in the same directory, named exactly like `model_meta.json` and `model.weights.bin`.
+    ```js
+    neuralNetwork.load('path/to/model.json', modelLoadedCallback);
+    ```
+  * Method 3: using the `<input type="file" multiple>`
+* **callback**: Optional. function. A callback that is called after the model has been loaded.
+
+📤 **Outputs**
+
+* n/a: loads the model to `neuralNetwork.model`
+
+
+***
+
+
+
+## Examples
+
+
+**p5.js**
+- [NeuralNetwork_Simple_Classification](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_Simple_Classification)
+- [NeuralNetwork_Simple_Regression](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_Simple_Regression)
+- [NeuralNetwork_XOR](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_XOR)
+- [NeuralNetwork_basics](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_basics)
+- [NeuralNetwork_co2net](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_co2net)
+- [NeuralNetwork_color_classifier](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_color_classifier)
+- [NeuralNetwork_load_model](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_load_model)
+- [NeuralNetwork_load_saved_data](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_load_saved_data)
+- [NeuralNetwork_lowres_pixels](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_lowres_pixels)
+- [NeuralNetwork_multiple_layers](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_multiple_layers)
+- [NeuralNetwork_musical_face](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_musical_face)
+- [NeuralNetwork_musical_mouse](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_musical_mouse)
+- [NeuralNetwork_pose_classifier](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_pose_classifier)
+- [NeuralNetwork_titanic](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_titanic)
+- [NeuralNetwork_xy_classifier](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/NeuralNetwork/NeuralNetwork_xy_classifier)
+
+**p5 web editor**
+- [NeuralNetwork_Simple_Classification](https://editor.p5js.org/ml5/sketches/NeuralNetwork_Simple_Classification)
+- [NeuralNetwork_Simple_Regression](https://editor.p5js.org/ml5/sketches/NeuralNetwork_Simple_Regression)
+- [NeuralNetwork_XOR](https://editor.p5js.org/ml5/sketches/NeuralNetwork_XOR)
+- [NeuralNetwork_basics](https://editor.p5js.org/ml5/sketches/NeuralNetwork_basics)
+- [NeuralNetwork_co2net](https://editor.p5js.org/ml5/sketches/NeuralNetwork_co2net)
+- [NeuralNetwork_color_classifier](https://editor.p5js.org/ml5/sketches/NeuralNetwork_color_classifier)
+- [NeuralNetwork_load_model](https://editor.p5js.org/ml5/sketches/NeuralNetwork_load_model)
+- [NeuralNetwork_load_saved_data](https://editor.p5js.org/ml5/sketches/NeuralNetwork_load_saved_data)
+- [NeuralNetwork_lowres_pixels](https://editor.p5js.org/ml5/sketches/NeuralNetwork_lowres_pixels)
+- [NeuralNetwork_multiple_layers](https://editor.p5js.org/ml5/sketches/NeuralNetwork_multiple_layers)
+- [NeuralNetwork_musical_face](https://editor.p5js.org/ml5/sketches/NeuralNetwork_musical_face)
+- [NeuralNetwork_musical_mouse](https://editor.p5js.org/ml5/sketches/NeuralNetwork_musical_mouse)
+- [NeuralNetwork_pose_classifier](https://editor.p5js.org/ml5/sketches/NeuralNetwork_pose_classifier)
+- [NeuralNetwork_titanic](https://editor.p5js.org/ml5/sketches/NeuralNetwork_titanic)
+- [NeuralNetwork_xy_classifier](https://editor.p5js.org/ml5/sketches/NeuralNetwork_xy_classifier)
+
+**plain javascript**
+
+* coming soon
+
+## Demo
+
+No demos yet - contribute one today!
+
+## Tutorials
+
+### ml5.js: Train Your Own Neural Network (Coding Train)
+<iframe width="560" height="315" src="https://www.youtube.com/embed/8HEgeAbYphA"  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+### ml5.js: Save Neural Network Training Data (Coding Train)
+<iframe width="560" height="315" src="https://www.youtube.com/embed/q6cwxORPDo8"  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+### ml5.js: Save Neural Network Trained Model (Coding Train)
+<iframe width="560" height="315" src="https://www.youtube.com/embed/wUrg9Hjkhg0"  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+### ml5.js: Neural Network Regression (Coding Train)
+<iframe width="560" height="315" src="https://www.youtube.com/embed/fFzvwdkzr_c"  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Acknowledgements
+
+**Contributors**:
+  * [Dan Shiffman](https://github.com/shiffman)
+  * [Joey Lee](https://github.com/joeyklee/)
+  * [Yining Shi](https://github.com/yining1023/)
+  * [Lydia Jessup](https://github.com/lydiajessup)
+
+**Credits**:
+  * Paper Reference | Website URL | Github Repo | Book reference | etc
+
+## Source Code
+
+* [/src/NeuralNetwork](https://github.com/ml5js/ml5-library/tree/main/src/NeuralNetwork)
+
+
+
+
+
+
+
+
+
+
+## ml5.neuralNetwork
+
+See [old reference](https://learn.ml5js.org/#/reference/neural-network) and Nature of Code [Chapter 10: Neural Networks](https://nature-of-code-2nd-edition.netlify.app/neural-networks/) and [Chapter 11: Neuroevolution](https://nature-of-code-2nd-edition.netlify.app/neuroevolution/)
+
+---
+
+## ml5.sentiment
+
+See [old reference](https://learn.ml5js.org/#/reference/sentiment).
+
+---
+
+More models and features coming soon!
diff --git a/src/markdown/Reference/reference/overview.md b/src/markdown/Reference/reference/overview.md
new file mode 100644
index 0000000..7ec3978
--- /dev/null
+++ b/src/markdown/Reference/reference/overview.md
@@ -0,0 +1,14 @@
+# Reference
+
+Welcome to the ml5.js reference page! Here you can browse the various categories of functionality that ml5.js provides. We have categorized the functionality of ml5.js based on whether you want to customize the model and train with your own data.
+
+We currently have 3 categories:
+
+* **ml5 Model**:
+  *  The *ml5 Model* provides ready-to-use models that you directly feed inputs (image, video, audio, text, etc.) and get outputs (labels and confidence scores).
+* **ml5 + Teachable Machine**:
+  * The *ml5 + Teachable Machine* allows you to create models with your own input (images, sound, and poses) using [Teachable Machine](https://teachablemachine.withgoogle.com/) in a fast, easy and accessible way, and import the trained models to ml5.
+* **Train your own model!**
+  * The *Train your own model!* allows you to build and train your own machine learning models with your own data right using ml5 library.
+
+See the sidebar for more information.
\ No newline at end of file
diff --git a/src/markdown/Reference/reference/pose-estimation-tm.md b/src/markdown/Reference/reference/pose-estimation-tm.md
new file mode 100644
index 0000000..f8dac63
--- /dev/null
+++ b/src/markdown/Reference/reference/pose-estimation-tm.md
@@ -0,0 +1,301 @@
+---
+slug: "/models/pose-estimation-tm"
+title: "Pose Estimation with Teachable Machine"
+---
+
+# ImageClassifier
+
+
+<center>
+    <img style="display:block; max-height:20rem" alt="image classification of bird" src="_media/reference__header-imageClassifier.png">
+</center>
+
+
+## Description
+You can use neural networks to recognize the content of images. `ml5.imageClassifier()` is a method to create an object that classifies an image using a pre-trained model.
+
+It should be noted that the pre-trained model provided by the example below was trained on a database of approximately 15 million images (ImageNet). The ml5 library accesses this model from the cloud. What the algorithm labels an image is entirely dependent on that training data -- what is included, excluded, and how those images are labeled (or mislabeled).
+
+**Train your own image classification model with Teachable Machine**: If you'd like to train your own custom image classification model, try [Google's Teachable Machine](https://teachablemachine.withgoogle.com/io19).
+
+## Quickstart
+
+```js
+// Initialize the Image Classifier method with MobileNet
+const classifier = ml5.imageClassifier('MobileNet', modelLoaded);
+
+// When the model is loaded
+function modelLoaded() {
+  console.log('Model Loaded!');
+}
+
+// Make a prediction with a selected image
+classifier.classify(document.getElementById('image'), (err, results) => {
+  console.log(results);
+});
+```
+
+
+## Usage
+
+### Initialize
+
+```js
+const classifier = ml5.imageClassifier(model, ?video, ?options, ?callback);
+```
+
+#### Parameters
+* **model**: REQUIRED. A String value of a valid model OR a url to a model.json that contains a pre-trained model. Case insensitive. Models available are: 'MobileNet', 'Darknet' and 'Darknet-tiny','DoodleNet', or any image classification model trained in Teachable Machine. Below are some examples of creating a new image classifier:
+  * `mobilenet`:
+    ```js
+    const classifier = ml5.imageClassifier('MobileNet', modelReady);
+    ```
+  * `Darknet`:
+    ```js
+    const classifier = ml5.imageClassifier('Darknet', modelReady);
+    ```
+  * `DoodleNet`:
+    ```js
+    const classifier = ml5.imageClassifier('DoodleNet', modelReady);
+    ```
+  * Custom Model from Teachable Machine:
+    ```js
+    const classifier = ml5.imageClassifier('path/to/custom/model.json', modelReady);
+    ```
+* **video**: OPTIONAL. An HTMLVideoElement
+* **callback**: OPTIONAL. A function to run once the model has been loaded. If no callback is provided, it will return a promise that will be resolved once the model has loaded.
+* **options**: OPTIONAL. An object to change the defaults (shown below). The available options are:
+  ```js
+  {
+    version: 1,
+    alpha: 1.0,
+    topk: 3,
+  };
+  ```
+
+### Properties
+
+
+***
+#### .video
+> *Object*. HTMLVideoElement if given in the constructor. Otherwise it is null.
+***
+
+***
+#### .model
+> *Object*. The image classifier model specified in the constructor.
+***
+
+***
+#### .modelName
+> *String*. The name of the image classifier model specified in the constructor
+***
+
+***
+#### .modelUrl
+> *String*. The absolute or relative URL path to the input model.
+***
+
+
+### Methods
+
+***
+#### .classify()
+> Given an image or video, returns an array of objects containing class names and probabilities
+
+If you DID NOT specify an image or video in the constructor...
+```js
+classifier.classify(input, ?numberOfClasses, ?callback);
+```
+
+If you DID specify an image or video in the constructor...
+```js
+classifier.classify(?numberOfClasses , ?callback);
+```
+
+📥 **Inputs**
+
+* **input**: HTMLImageElement | ImageData | HTMLCanvasElement | HTMLVideoElement. NOTE: Videos can also be added in the constructor and then do not need to be specified again as an input.
+* **numberOfClasses**: Number. The number of classes you want to return.
+* **callback**: Function. A function to handle the results of `.segment()`. Likely a function to do something with the segmented image.
+
+📤 **Outputs**
+
+* **Object**: Returns an array of objects. Each object contains `{label, confidence}`.
+
+***
+
+
+## Examples
+
+**p5.js**
+* [ImageClassification](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification)
+* [ImageClassification_DoodleNet_Canvas](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_DoodleNet_Canvas)
+* [ImageClassification_DoodleNet_Video](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_DoodleNet_Video)
+* [ImageClassification_MultipleImages](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_MultipleImages)
+* [ImageClassification_Teachable-Machine](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_Teachable-Machine)
+* [ImageClassification_Video](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_Video)
+* [ImageClassification_VideoScavengerHunt](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_VideoScavengerHunt)
+* [ImageClassification_VideoSound](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_VideoSound)
+* [ImageClassification_VideoSoundTranslate](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_VideoSoundTranslate)
+* [ImageClassification_Video_Load](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/ImageClassification/ImageClassification_Video_Load)
+
+**p5.js Web Editor**
+
+* [ImageClassification](https://editor.p5js.org/ml5/sketches/ImageClassification)
+* [ImageClassification_DoodleNet_Canvas](https://editor.p5js.org/ml5/sketches/ImageClassification_DoodleNet_Canvas)
+* [ImageClassification_DoodleNet_Video](https://editor.p5js.org/ml5/sketches/ImageClassification_DoodleNet_Video)
+* [ImageClassification_MultipleImages](https://editor.p5js.org/ml5/sketches/ImageClassification_MultipleImages)
+* [ImageClassification_Teachable-Machine](https://editor.p5js.org/ml5/sketches/ImageClassification_Teachable-Machine)
+* [ImageClassification_Video](https://editor.p5js.org/ml5/sketches/ImageClassification_Video)
+* [ImageClassification_VideoScavengerHunt](https://editor.p5js.org/ml5/sketches/ImageClassification_VideoScavengerHunt)
+* [ImageClassification_VideoSound](https://editor.p5js.org/ml5/sketches/ImageClassification_VideoSound)
+* [ImageClassification_VideoSoundTranslate](https://editor.p5js.org/ml5/sketches/ImageClassification_VideoSoundTranslate)
+
+**plain javascript**
+* [ImageClassification](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification)
+* [ImageClassification_DoodleNet_Canvas](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_DoodleNet_Canvas)
+* [ImageClassification_DoodleNet_Video](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_DoodleNet_Video)
+* [ImageClassification_MultipleImages](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_MultipleImages)
+* [ImageClassification_Video](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_Video)
+* [ImageClassification_VideoScavengerHunt](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_VideoScavengerHunt)
+* [ImageClassification_VideoSound](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_VideoSound)
+* [ImageClassification_VideoSoundTranslate](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_VideoSoundTranslate)
+* [ImageClassification_Video_Load](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification_Video_Load)
+
+## Demo
+
+No demos yet - contribute one today!
+
+## Tutorials
+
+### Webcam Image Classification via CodingTrain
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/D9BoBSkLvFo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+### Image Classification with MobileNet via CodingTrain
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/yNkAuWz5lnY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Model and Data Provenance
+> A project started by [Ellen Nickles](https://github.com/ellennickles/)
+
+### Models Overview
+
+A nice description of the models overview
+
+#### MobileNet - Model Biography
+
+- **Description**
+  - MobileNet is a term that describes a type of machine learning model architecture that has been optimized to run on platforms with limited computational power, such as applications on mobile or embedded devices. MobileNets have several use cases including image classification, object detection, and image segmentation. This particular MobileNet model was trained for Image Classification.
+  - ml5 uses a MobileNet created with TensorFlow.js, a JavaScript library from TensorFlow. Several TensorFlow.js MobileNet versions are available for image classification, and as of June 2019, ml5 defaults to importing MobileNetV2.
+- **Developer and Year**
+  - Google’s Tensorflow.js team
+- **Purpose and Intended Users**
+  - From the website: TensorFlow is an open source machine learning platform that “has a comprehensive, flexible ecosystem of tools, libraries, and community resources that lets researchers push the state-of-the-art in ML and developers easily build and deploy ML-powered applications.” This model is available for use in the ml5 library because Tensorflow licenses it with Apache License 2.0.
+- **Hosted Location**
+  - ml5 imports MobileNetV2 from TensorFlow, hosted on the NPM database, however a different version may be specified in your ml5 script. For whichever you specify, your ml5 sketch will automatically use the most recent version distributed on NPM.
+- **ml5 Contributor and Year**
+  - Ported by Cristóbal Valenzuela & Dan Shiffman in 2018 
+- **References**
+  - ml5 Contributor [Cristóbal Valenzuela](https://cvalenzuelab.com/)
+  - Website [TensorFlow](https://www.tensorflow.org/)
+  - GitHub Repository [TensorFlow.js MobileNet](https://github.com/tensorflow/tfjs-models/tree/master/mobilenet)
+  - NPM Readme [@tensorflow-models/mobilenet](https://www.npmjs.com/package/@tensorflow-models/mobilenet)
+  - Paper [MobileNetV2: MobileNetV2: Inverted Residuals and Linear Bottlenecks](https://arxiv.org/abs/1801.04381)
+
+#### MobileNet - Data Biography
+
+- **Description**
+  - The TensorFlow MobileNetV2 model on which the TensorFlow.js version is based was trained on 50K photographs. In addition, 150K photographs are also provided by the source for validation and testing.
+- **Source**
+  - The images are from the ImageNet database from ImageNet’s Large Scale Visual Recognition Challenge 2012 (ILSVRC2012).
+- **Collector and Year**
+  - Development of the ImageNet dataset began in 2009 and is currently maintained by researchers at U.S. universities.
+- **Collection Method**
+  - From the website:  photographs for the validation and test data were collected from “flickr and other search engines, hand labeled with the presence or absence of 1000 object categories.”
+- **Purpose and Intended Users**
+  - From the website: ImageNet datasets are publicly available and frequently used in computer vision research. The research team “envision[s] ImageNet as a useful resource to researchers in the academic world, as well as educators around the world.” According to an update posted in September 2019, it contains over 14 million images and 22,000 visual categories using a vocabulary from the English dataset, WordNet.
+- **References**
+  - Website [ImageNet](http://www.image-net.org/)
+  - Website [ImageNet’s Large Scale Visual Recognition Challenge 2012 (ILSVRC2012)](http://www.image-net.org/challenges/LSVRC/2012/)
+
+#### DarkNet and DarkNet-tiny - Model Biography
+
+- **Description**
+  - DarkNet (or DarkNet Reference) and Darknet-tiny (or Tiny Darknet are small and fast pre-trained models. Tiny Darknet is the smaller model of the two, but Darknet Reference is faster. The developer provides an open source framework, also called Darknet, for running models.
+- **Developer and Year**
+  - Joseph Redmon
+- **Purpose and Intended Users**
+  - Redmon provides several open source licenses, including MIT License.
+- **Hosted Location**
+  - ml5 hosts both models
+- **ml5 Contributor and Year**
+  - Ported by Mohamed Amine in 2018
+- **References**
+  - Developer [Joseph Redmon](https://pjreddie.com/)
+  - ml5 Contributor [Mohamed Amine](https://github.com/TheHidden1)
+  - Website Darknet/[Darknet Reference](https://pjreddie.com/darknet/imagenet/#reference)
+  - Website Darknet-tiny/ [Tiny DarkNet](https://pjreddie.com/darknet/tiny-darknet/)
+
+#### DarkNet and DarkNet-tiny - Data Biography
+
+- **Description**
+  - Darknet Reference is listed as a pre-trained model for ImageNet classification, so it is likely that the data are photographs from the ImageNet database.
+- **Source**
+  - You can learn more about the ImageNet in the MobileNet section above.
+- **Collector and Year**
+  - TBD
+- **Collection Method**
+  - TBD
+- **Purpose and Intended Users**
+  - TBD
+- **References**
+  - TBD
+
+#### DoodleNet - Model Biography
+
+- **Description**
+  - This pre-trained model classifies and labels hand-drawn sketches from 345 categories. 
+- **Developer and Year**
+  - Yining Shi developed the model in TensorFlow and ported it to TensorFlow.js so that it could be ported to the ml5 library.
+- **Purpose and Intended Users**
+  - Developed for the ml5 community
+- **Hosted Location**
+  - ml5 hosts this model
+- **ml5 Contributor and Year**
+  - Yining Shi in 2019
+- **References**
+  - Developer and ml5 Contributor [Yining Shi](https://1023.io/)
+  - GitHub Repository [DoodleNet](https://github.com/yining1023/doodleNet)
+
+#### DoodleNet - Data Biography
+
+- **Description**
+  - The training dataset consists of 345 categories of doodles with 50K images per category. 
+- **Source**
+  - Google’s Quick, Draw! Dataset
+- **Collector and Year**
+  - Google released the Quick, Draw! game in 2016. Shi collected images for her model in 2019.
+- **Collection Method**
+  - The doodles are crowdsourced from visitors’ contributions as they play Google’s Quick, Draw! Game, and they are publicly available to download.
+- **Purpose and Intended Users**
+  - From the website: Google’s Quick, Draw! Game was developed as “an example of how you can use machine learning in fun ways” by the Google Creative Lab, Data Arts Team, and their collaborators as part of Google’s AI Experiments showcase. 
+- **References**
+  - Website [Google’s Quick, Draw!](https://quickdraw.withgoogle.com/#)
+  - Website [Google’s Quick, Draw! Dataset](https://quickdraw.withgoogle.com/data)
+
+
+
+
+## Acknowledgements
+
+**Contributors**:
+  * [Cristobal Valenzuela](https://cvalenzuelab.com/)
+  * [Yining Shi](https://1023.io)
+
+**Credits**:
+  * Paper Reference | Website URL | Github Repo | Book reference | etc
+
+## Source Code
+
+* [/src/ImageClassifier](https://github.com/ml5js/ml5-library/tree/main/src/ImageClassifier)
diff --git a/src/markdown/Reference/reference/sound-classifier-tm.md b/src/markdown/Reference/reference/sound-classifier-tm.md
new file mode 100644
index 0000000..917053e
--- /dev/null
+++ b/src/markdown/Reference/reference/sound-classifier-tm.md
@@ -0,0 +1,185 @@
+---
+slug: "/models/sound-classifier-tm"
+title: "SoundClassifier with Teachable Machine"
+---
+
+# SoundClassifier
+
+
+<center>
+    <img style="display:block; max-height:20rem" alt="placeholder" src="_media/reference__header-sound-classifier.png">
+</center>
+
+
+## Description
+
+The ml5.soundClassifier() allows you to classify audio. With the right pre-trained models, you can detect whether a certain noise was made (e.g. a clapping sound or a whistle) or a certain word was said (e.g. Up, Down, Yes, No). At this moment, with the ml5.soundClassifier(), you can use your own custom pre-trained speech commands or use the the "SpeechCommands18w" which can recognize "the ten digits from "zero" to "nine", "up", "down", "left", "right", "go", "stop", "yes", "no", as well as the additional categories of "unknown word" and "background noise"."
+
+**Train your own sound classifier model with Teachable Machine**: If you'd like to train your own custom sound classification model, try [Google's Teachable Machine](https://teachablemachine.withgoogle.com).
+
+## Quickstart
+
+```js
+// Options for the SpeechCommands18w model, the default probabilityThreshold is 0
+const options = { probabilityThreshold: 0.7 };
+const classifier = ml5.soundClassifier('SpeechCommands18w', options, modelReady);
+
+function modelReady() {
+  // classify sound
+  classifier.classify(gotResult);
+}
+
+function gotResult(error, result) {
+  if (error) {
+    console.log(error);
+    return;
+  }
+  // log the result
+  console.log(result);
+}
+```
+
+
+## Usage
+
+### Initialize
+
+```js
+const soundclassifier = ml5.soundClassifier(?model, ?options, ?callback)
+```
+
+By default the soundClassifier will start the default microphone.
+
+#### Parameters
+* **model**: Optional. Model name or URL path to a `model.json`. Here are some options:
+  * `SpeechCommands18w`: loads the 18w speech commands
+    ```js
+    const classifier = ml5.soundClassifier('SpeechCommands18w', modelReady);
+    ```
+  * Custom model made in Google's Teachable Machine:
+    ```js
+    const classifier = ml5.soundClassifier('path/to/model.json', modelReady);
+    ```
+* **callback**: Optional. A function to run once the model has been loaded.
+* **options**: Optional. An object describing a model accuracy and performance. The available parameters are:
+
+  ```js
+  {
+    probabilityThreshold: 0.7, // probabilityThreshold is 0
+  };
+  ```
+
+### Properties
+
+
+***
+#### .model
+> *Object*. The model.
+***
+
+
+### Methods
+
+
+***
+#### .classify()
+> Given a number, will make magicSparkles
+
+```js
+soundclassifier.classify(callback);
+```
+
+📥 **Inputs**
+* **callback**: A function to handle the results of the classification
+
+📤 **Outputs**
+* **Array**: Returns an array with "label" and "confidence".
+
+***
+
+
+## Examples
+
+**p5.js**
+* [SoundClassification_speechcommand](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/SoundClassification/SoundClassification_speechcommand)
+* [SoundClassification_speechcommand_load](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/SoundClassification/SoundClassification_speechcommand_load)
+
+**p5 web editor**
+* [SoundClassification_speechcommand](https://editor.p5js.org/ml5/sketches/SoundClassification_speechcommand)
+* [SoundClassification_speechcommand_load](https://editor.p5js.org/ml5/sketches/SoundClassification_speechcommand_load)
+
+**plain javascript**
+* [SoundClassification_speechcommand](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/SoundClassification/SoundClassification_speechcommand)
+* [SoundClassification_speechcommand_load](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/SoundClassification/SoundClassification_speechcommand_load)
+
+
+
+## Demo
+
+No demos yet - contribute one today!
+
+## Tutorials
+
+### ml5.js: Sound Classification via CodingTrain
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/cO4UP2dX944" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Model and Data Provenance
+> A project started by [Ellen Nickles](https://github.com/ellennickles/)
+
+### Models Overview
+
+This method allows you to use a provided pre-trained model or import a model that you trained using Google’s Teachable Machine. The provided pre-trained model is called the Speech Command Recognizer.
+
+#### Speech Command Recognizer - Model Biography
+
+- **Description**
+  - Speech Command Recognizer defaults to using SpeechCommands18w and supports recognition of twenty vocabulary words.
+- **Developer and Year**
+  - This model was developed by Google’s Tensorflow.js team in 2018. TensorFlow.js, a JavaScript library from TensorFlow, an open source machine learning platform developed by Google.
+- **Purpose and Intended Users**
+  - From the website: TensorFlow is an open source machine learning platform that “has a comprehensive, flexible ecosystem of tools, libraries, and community resources that lets researchers push the state-of-the-art in ML and developers easily build and deploy ML-powered applications.” This model is available for use in the ml5 library because Tensorflow licenses it with Apache License 2.0.
+- **Hosted Location**
+  - As of June 2019, ml5 imports Speech Command Recognizer from TensorFlow’s models on the NPM database. This means that your ml5 sketch will automatically use the most recent version distributed on NPM.
+- **ml5 Contributor and Year**
+  - Ported by Yining Shi in 2019
+- **References**
+  - Website [TensorFlow](https://www.tensorflow.org/)
+  - ml5 Contributor [Yining Shi](https://1023.io/)
+  - NPM Readme [@tensorflow-models/speech-commands](https://www.npmjs.com/package/@tensorflow-models/speech-commands)
+  - GitHub Repository [Tensorflow.js Speech Commands](https://github.com/tensorflow/tfjs-models/tree/master/speech-commands)
+
+#### Speech Command Recognizer - Data Biography
+
+- **Description**
+  - The model was trained on the TensorFlow Speech Commands Dataset, and the data consists of recordings of people saying 30 different words in English, for a total of over 105,000 WAVE audio files. 
+- **Source**
+  - Open Speech Recording dataset
+- **Collector and Year**
+  - The recordings were collected by Google’s AIY Team (Do-it-yourself artificial intelligence) under a CC BY license (Commons BY 4.0 license) and as of this writing is an active project.
+- **Collection Method**
+  - The recordings are crowdsourced from contributors to the Open Speech Recording project. The paper also describes why English was selected as the language of collection, why specific words were chosen, how the collection process is managed, and how the audio files are processed and evaluated. You can read more about the dataset collection process or contribute yourself at the Open Speech Recording website.
+- **Purpose and Intended Users**
+  - Since very few exist, one goal is to create an open source dataset of speech data so more people can have access to train their own speech recognition models. The paper published about this dataset states that the “primary goal is to provide a way to build and test small models that detect when a single word is spoken, from a set of ten or fewer target words, with as few false positives as possible from background noise or unrelated speech.” 
+- **References**
+  - Website [TensorFlow Speech Commands Dataset](https://www.tensorflow.org/tutorials/sequences/audio_recognition)
+  - Paper [Speech Commands: A Dataset for Limited-Vocabulary Speech Recognition](https://arxiv.org/abs/1804.03209)
+  - Website [Google's AIY Team](https://aiyprojects.withgoogle.com/)
+  - Website [Open Speech Recording](https://aiyprojects.withgoogle.com/open_speech_recording)
+
+
+
+
+## Acknowledgements
+
+**Contributors**:
+  * Yining Shi
+
+**Credits**:
+  * Paper Reference | Website URL | Github Repo | Book reference | etc
+
+
+
+
+## Source Code
+
+* [/src/SoundClassifier/](https://github.com/ml5js/ml5-library/tree/main/src/SoundClassifier)
diff --git a/src/markdown/Reference/reference/sound-classifier.md b/src/markdown/Reference/reference/sound-classifier.md
new file mode 100644
index 0000000..41b4b20
--- /dev/null
+++ b/src/markdown/Reference/reference/sound-classifier.md
@@ -0,0 +1,185 @@
+---
+slug: "/models/sound-classifier"
+title: "SoundClassifier"
+---
+
+# SoundClassifier
+
+
+<center>
+    <img style="display:block; max-height:20rem" alt="placeholder" src="_media/reference__header-sound-classifier.png">
+</center>
+
+
+## Description
+
+The ml5.soundClassifier() allows you to classify audio. With the right pre-trained models, you can detect whether a certain noise was made (e.g. a clapping sound or a whistle) or a certain word was said (e.g. Up, Down, Yes, No). At this moment, with the ml5.soundClassifier(), you can use your own custom pre-trained speech commands or use the the "SpeechCommands18w" which can recognize "the ten digits from "zero" to "nine", "up", "down", "left", "right", "go", "stop", "yes", "no", as well as the additional categories of "unknown word" and "background noise"."
+
+**Train your own sound classifier model with Teachable Machine**: If you'd like to train your own custom sound classification model, try [Google's Teachable Machine](https://teachablemachine.withgoogle.com).
+
+## Quickstart
+
+```js
+// Options for the SpeechCommands18w model, the default probabilityThreshold is 0
+const options = { probabilityThreshold: 0.7 };
+const classifier = ml5.soundClassifier('SpeechCommands18w', options, modelReady);
+
+function modelReady() {
+  // classify sound
+  classifier.classify(gotResult);
+}
+
+function gotResult(error, result) {
+  if (error) {
+    console.log(error);
+    return;
+  }
+  // log the result
+  console.log(result);
+}
+```
+
+
+## Usage
+
+### Initialize
+
+```js
+const soundclassifier = ml5.soundClassifier(?model, ?options, ?callback)
+```
+
+By default the soundClassifier will start the default microphone.
+
+#### Parameters
+* **model**: Optional. Model name or URL path to a `model.json`. Here are some options:
+  * `SpeechCommands18w`: loads the 18w speech commands
+    ```js
+    const classifier = ml5.soundClassifier('SpeechCommands18w', modelReady);
+    ```
+  * Custom model made in Google's Teachable Machine:
+    ```js
+    const classifier = ml5.soundClassifier('path/to/model.json', modelReady);
+    ```
+* **callback**: Optional. A function to run once the model has been loaded.
+* **options**: Optional. An object describing a model accuracy and performance. The available parameters are:
+
+  ```js
+  {
+    probabilityThreshold: 0.7, // probabilityThreshold is 0
+  };
+  ```
+
+### Properties
+
+
+***
+#### .model
+> *Object*. The model.
+***
+
+
+### Methods
+
+
+***
+#### .classify()
+> Given a number, will make magicSparkles
+
+```js
+soundclassifier.classify(callback);
+```
+
+📥 **Inputs**
+* **callback**: A function to handle the results of the classification
+
+📤 **Outputs**
+* **Array**: Returns an array with "label" and "confidence".
+
+***
+
+
+## Examples
+
+**p5.js**
+* [SoundClassification_speechcommand](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/SoundClassification/SoundClassification_speechcommand)
+* [SoundClassification_speechcommand_load](https://github.com/ml5js/ml5-library/tree/main/examples/p5js/SoundClassification/SoundClassification_speechcommand_load)
+
+**p5 web editor**
+* [SoundClassification_speechcommand](https://editor.p5js.org/ml5/sketches/SoundClassification_speechcommand)
+* [SoundClassification_speechcommand_load](https://editor.p5js.org/ml5/sketches/SoundClassification_speechcommand_load)
+
+**plain javascript**
+* [SoundClassification_speechcommand](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/SoundClassification/SoundClassification_speechcommand)
+* [SoundClassification_speechcommand_load](https://github.com/ml5js/ml5-library/tree/main/examples/javascript/SoundClassification/SoundClassification_speechcommand_load)
+
+
+
+## Demo
+
+No demos yet - contribute one today!
+
+## Tutorials
+
+### ml5.js: Sound Classification via CodingTrain
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/cO4UP2dX944" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Model and Data Provenance
+> A project started by [Ellen Nickles](https://github.com/ellennickles/)
+
+### Models Overview
+
+This method allows you to use a provided pre-trained model or import a model that you trained using Google’s Teachable Machine. The provided pre-trained model is called the Speech Command Recognizer.
+
+#### Speech Command Recognizer - Model Biography
+
+- **Description**
+  - Speech Command Recognizer defaults to using SpeechCommands18w and supports recognition of twenty vocabulary words.
+- **Developer and Year**
+  - This model was developed by Google’s Tensorflow.js team in 2018. TensorFlow.js, a JavaScript library from TensorFlow, an open source machine learning platform developed by Google.
+- **Purpose and Intended Users**
+  - From the website: TensorFlow is an open source machine learning platform that “has a comprehensive, flexible ecosystem of tools, libraries, and community resources that lets researchers push the state-of-the-art in ML and developers easily build and deploy ML-powered applications.” This model is available for use in the ml5 library because Tensorflow licenses it with Apache License 2.0.
+- **Hosted Location**
+  - As of June 2019, ml5 imports Speech Command Recognizer from TensorFlow’s models on the NPM database. This means that your ml5 sketch will automatically use the most recent version distributed on NPM.
+- **ml5 Contributor and Year**
+  - Ported by Yining Shi in 2019
+- **References**
+  - Website [TensorFlow](https://www.tensorflow.org/)
+  - ml5 Contributor [Yining Shi](https://1023.io/)
+  - NPM Readme [@tensorflow-models/speech-commands](https://www.npmjs.com/package/@tensorflow-models/speech-commands)
+  - GitHub Repository [Tensorflow.js Speech Commands](https://github.com/tensorflow/tfjs-models/tree/master/speech-commands)
+
+#### Speech Command Recognizer - Data Biography
+
+- **Description**
+  - The model was trained on the TensorFlow Speech Commands Dataset, and the data consists of recordings of people saying 30 different words in English, for a total of over 105,000 WAVE audio files. 
+- **Source**
+  - Open Speech Recording dataset
+- **Collector and Year**
+  - The recordings were collected by Google’s AIY Team (Do-it-yourself artificial intelligence) under a CC BY license (Commons BY 4.0 license) and as of this writing is an active project.
+- **Collection Method**
+  - The recordings are crowdsourced from contributors to the Open Speech Recording project. The paper also describes why English was selected as the language of collection, why specific words were chosen, how the collection process is managed, and how the audio files are processed and evaluated. You can read more about the dataset collection process or contribute yourself at the Open Speech Recording website.
+- **Purpose and Intended Users**
+  - Since very few exist, one goal is to create an open source dataset of speech data so more people can have access to train their own speech recognition models. The paper published about this dataset states that the “primary goal is to provide a way to build and test small models that detect when a single word is spoken, from a set of ten or fewer target words, with as few false positives as possible from background noise or unrelated speech.” 
+- **References**
+  - Website [TensorFlow Speech Commands Dataset](https://www.tensorflow.org/tutorials/sequences/audio_recognition)
+  - Paper [Speech Commands: A Dataset for Limited-Vocabulary Speech Recognition](https://arxiv.org/abs/1804.03209)
+  - Website [Google's AIY Team](https://aiyprojects.withgoogle.com/)
+  - Website [Open Speech Recording](https://aiyprojects.withgoogle.com/open_speech_recording)
+
+
+
+
+## Acknowledgements
+
+**Contributors**:
+  * Yining Shi
+
+**Credits**:
+  * Paper Reference | Website URL | Github Repo | Book reference | etc
+
+
+
+
+## Source Code
+
+* [/src/SoundClassifier/](https://github.com/ml5js/ml5-library/tree/main/src/SoundClassifier)
diff --git a/src/markdown/Reference/styleguide/contributor-notes.md b/src/markdown/Reference/styleguide/contributor-notes.md
new file mode 100644
index 0000000..0a2b70f
--- /dev/null
+++ b/src/markdown/Reference/styleguide/contributor-notes.md
@@ -0,0 +1,3 @@
+# Contributor Notes (External)
+
+coming soon - notes for contributors
\ No newline at end of file
diff --git a/src/markdown/Reference/styleguide/design-guidelines.md b/src/markdown/Reference/styleguide/design-guidelines.md
new file mode 100644
index 0000000..12e444d
--- /dev/null
+++ b/src/markdown/Reference/styleguide/design-guidelines.md
@@ -0,0 +1,34 @@
+# Design Guidelines
+
+coming soon
+
+## Colors 
+
+
+## Typography
+
+
+## Logos
+
+
+## Iconography
+
+
+
+## Illustration
+
+
+
+<!-- 
+
+## Buttons/Links
+
+
+## Input
+
+
+## Navigation
+
+
+## Progress
+ -->
diff --git a/src/markdown/Reference/styleguide/development-guidelines.md b/src/markdown/Reference/styleguide/development-guidelines.md
new file mode 100644
index 0000000..f191419
--- /dev/null
+++ b/src/markdown/Reference/styleguide/development-guidelines.md
@@ -0,0 +1,37 @@
+# Development Guidelines
+
+## Principles for ml5.js source code
+
+Here are some principles that we try to uphold while developing `ml5-library`:
+
+|       Guideline                |              description            | 
+| ------------- | ------------ |               
+| **Clarity over Complexity**  | We strive to make using and maintaining ml5 as approachable as possible. This means that we prefer to define sensible `defaults` (more on that later), simple short function names, and hiding data wrangling steps from the user. |
+| **Readibility over Fanciness** | We're all for supporting the latest and greatest, but the reality is that the maintainers of ml5 come from a wide background of skills and levels. To promote contributions from all levels, we favor more readable code than the most efficient or streamlined. |
+| **Property and function names** | A guideline drawn from Processing is that function and property names should not be more than 2 words mashed together in camelCase. We try our best to adhere to this, except in cases where were are aligning as closely as possible to the API or pretrained model we've wrapped up. This is totally TBD | 
+| **modelNames** | Our general rule of thumb is to use camelCase for models -- e.g. `ml5.bodyPix()` or `ml5.poseNet()`. In some cases, the rules aren't entirely clear, but this is what we strive for. |
+| **Indentation & Code Formatting** | The easiest thing to do here is use a code formatter. You can see our settings in the [.vscode]() file. |
+
+
+
+## Principles for ml5.js examples 
+
+In addition to the principles above, we try our best to write our examples:
+
+|       Guideline                |              description            | 
+| ------------- | ------------ |               
+| **Beginner friendly first**  | We try to make sure the examples are as beginner friendly as possible. For example, this means using `for loops` rather than *fancy (but lovely) javascript array methods* when possible, or sometimes doing things in multiple steps.  |
+| **With as little HTML markup as possible** | We try to focus as much of the example in javascript as possible. That being said, it is not always possible to avoid HTML markup or advantageous to do so. When possible, add elements with javascript. |
+
+
+## Valuing contributions
+
+We use the all-contributor's bot to add contributors to the various ml5-repositories. 
+
+When a community member whether it is someone who flags an issue in a helpful way, makes a PR, hosts an event or workshop, etc in a way that is considered to the ml5 team as a "contribution", we add them by posting a comment in the respective PR or github issue: 
+
+```
+@all-contributors please add @<username> for <emojikeyA> <emojikeyB> <emojikeyC>
+```
+
+All of the key words for the all-contributors bot can be found here: https://allcontributors.org/docs/en/emoji-key
\ No newline at end of file
diff --git a/src/markdown/Reference/styleguide/maintenance-notes.md b/src/markdown/Reference/styleguide/maintenance-notes.md
new file mode 100644
index 0000000..5d41c3c
--- /dev/null
+++ b/src/markdown/Reference/styleguide/maintenance-notes.md
@@ -0,0 +1,83 @@
+# Maintenance Guidelines & DevOps (Internal)
+
+# Making a ml5 release (latest - Jan 21, 2021)
+
+## Before merging in a PR from a contributor:
+
+1. make sure to tag it with one of the following in the PR:
+   - SEMVER/patch
+     - e.g. `SEMVER/patch`: `0.8.11` would become -> `0.8.12`
+   - SEMVER/minor
+     - e.g. `SEMVER/minor`: `0.8.11` would become -> `0.9.0`
+   - SEMVER/major
+     - e.g. `SEMVER/major`: `0.8.11` would become -> `1.0.0`
+
+NOTE: if you are unsure quite likely it will be a `SEMVER/patch` for "...when you make backwards compatible bug fixes.". You can learn more about [Semantic Versioning](https://semver.org/).
+
+## Once we merge the PR to `main`:
+
+1. simply go to the `releases` sidebar >
+<img width="1332" alt="Screen Shot 2022-01-21 at 12 58 26 PM" src="https://user-images.githubusercontent.com/3622055/150599297-44e00536-9399-4cc0-be5b-d0b09761d651.png">
+2. go to the latest draft and click the edit button
+<img width="1332" alt="Screen Shot 2022-01-21 at 12 58 31 PM" src="https://user-images.githubusercontent.com/3622055/150599360-cba6d7ec-44eb-49da-977a-a7de5f071795.png">
+3. click: publish the release -- this will trigger a github workflow that will:
+   * get the latest tag version
+   * update the package.json
+   * update the readme with the latest version (pulled from the package.json)
+   * run npm install
+   * add, commit, and push those changes to `main`
+   * build the library
+   * and publish to npm
+
+
+***
+# Making a ml5 release (deprecation notice - Jan, 21, 2021 - this is how we made releases prior to the github actions workflow under .github/workflows/publish.yml)
+
+## setup:
+1. **Admin access** to the ml5 `npm` [account](https://www.npmjs.com/package/ml5) and [two-factor authentication setup](https://docs.npmjs.com/about-two-factor-authentication) for `npm`
+2. **Admin access** to the ml5 `github` [account](https://github.com/ml5js/ml5-library)
+
+## Overview:
+
+1. Create a new branch from `main` with a name that matches the new release version: `v<#>.<#>.<#>` 
+   ```sh
+   $ (development): git checkout -b v0.4.2
+   ```
+2. Update the `version` in **package.json** and run the npm scripts to update the `README.md` and the `docs` with the latest version number. Add and commit your changes and push that branch up to `remote`.
+  ```sh
+   # Step 0: change the version in package.json from 0.4.1 to 0.4.2
+   # Step 1: run the script to update your readme
+   $ (v0.4.2): npm run update:readme
+   # Step 2: run the script to update the docs
+   $ (v0.4.2): oldversion=0.4.1 npm run update:docs
+   # Step 3: add, commit, and push your changes up
+   $ (v0.4.2): git add .
+   $ (v0.4.2): git commit -m "bumps version and updates ml5 version number"
+   $ (v0.4.2): git push origin v0.4.2
+  ```
+3. Make a **Pull Request** to merge `v<#>.<#>.<#>` to `main`. Wait for tests to pass. **Squash and merge**.
+  ```sh
+  # Once you've squashed and merged `v0.4.2` to `development`...
+  # Step 1: switch to your development branch and pull in those changes
+  $ (v0.4.2): git checkout main
+  $ (development): git fetch
+  $ (development): git pull
+  ```
+5. **Install the dependencies**: With these changes now in `main`, we need to ensure you've got all the latest dependencies and **Build the library** to prepare for the release.
+  ```sh
+  $ (release): npm install
+  $ (release): npm run build
+  ```
+6. Publish to **npm**:
+  ```sh
+  $ (release): npm publish
+  # you will be asked for the OTP (one time password)
+  # Enter the 6 digit MFA numbers using your authenticator app
+  ```
+7. Add all of your changes to `gh-pages` to publish the latest docs
+   ```sh
+  $ (release): git checkout gh-pages
+  $ (gh-pages): git merge release
+  $ (gh-pages): git push origin gh-pages
+  ```
+8. Make a new Github Release and Tag the release. Add release notes describing the changes for the new version.
diff --git a/src/markdown/Reference/styleguide/reference-guidelines.md b/src/markdown/Reference/styleguide/reference-guidelines.md
new file mode 100644
index 0000000..96594bc
--- /dev/null
+++ b/src/markdown/Reference/styleguide/reference-guidelines.md
@@ -0,0 +1,216 @@
+# NameOfFeature
+
+
+<center>
+    <img style="display:block; max-height:20rem" alt="image classification of bird" src="https://via.placeholder.com/150">
+</center>
+
+
+## Description
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Quickstart
+
+```js
+// Initialize the magicFeature
+const magic = ml5.magicFeature('sparkles', modelLoaded);
+
+// When the model is loaded
+function modelLoaded() {
+  console.log('Model Loaded!');
+}
+
+// Make some sparkles
+magic.makeSparkles(100, (err, results) => {
+  console.log(results);
+});
+```
+
+
+## Usage
+
+### Initialize
+
+```js
+const magic = ml5.magicFeature(requiredInput, ?optionalInput1, ?optionalInput2);
+```
+
+#### Parameters
+* **requiredInput**: REQUIRED. Notice there is no question mark in front of the input.
+* **optionalInput1**: OPTIONAL. Notice the `?` indicates an optional parameter.
+* **optionalInput2**: OPTIONAL. A description of some kind of object with some properties. Notice the `?` indicates an optional parameter.
+
+  ```js
+  {
+    sparkleCount: 100,
+    delightFactor: 1.0,
+    party: true,
+  };
+  ```
+
+### Properties
+
+
+<!-- /////////////////////
+PROPERTY DEFINITION START
+* Notice that each property definition is wrapped in three stars `***`
+* This creates lines to contain everything
+///////////////////////// -->
+***
+#### .property1
+> *String*. A description of the property associated with the new model instance.
+***
+<!-- /////////////////////
+PROPERTY DEFINITION END
+///////////////////////// -->
+
+***
+#### .property2
+> *Object*. A description of the property associated with the new model instance.
+***
+
+***
+#### .property3
+> *Object*. A description of the property associated with the new model instance.
+***
+
+
+### Methods
+
+<!-- /////////////////////
+FUNCTION DEFINITION START
+* Notice that each function definition is wrapped in three stars `***`
+* This creates lines to contain everything
+///////////////////////// -->
+***
+#### .makeSparkles()
+> Given a number, will make magicSparkles
+
+```js
+classifier.makeSparkles(?numberOfSparkles, ?callback);
+```
+
+📥 **Inputs**
+
+* **numberOfSparkles**: Optional. Number. The number of sparkles you want to return.
+* **callback**: Optional. Function. A function to handle the results of `.makeSparkles()`. Likely a function to do something with the results of makeSparkles.
+
+📤 **Outputs**
+
+* **Object**: Returns an array of objects. Each object contains `{something, anotherThing}`.
+
+***
+<!-- /////////////////////
+FUNCTION DEFINITION END
+///////////////////////// -->
+
+
+<!-- /////////////////////
+FUNCTION DEFINITION START
+///////////////////////// -->
+***
+#### .makeDisappear()
+> Given an image, will make objects in the image disappear
+
+```js
+classifier.makeDisappear(input, ?numberOfObjects, ?callback);
+```
+
+📥 **Inputs**
+* **input**: REQUIRED. HTMLImageElement | HTMLVideoElement | ImageData | HTMLCanvasElement. The image or video you want to run the function on.
+* **numberOfObjects**: Optional. Number. The number of objects you want to disappear.
+* **callback**: Optional. Function. A function to handle the results of `.makeDisappear()`. Likely a function to do something with the results of the image where objects have disappeared.
+
+📤 **Outputs**
+
+* **Image**: Returns an image.
+
+***
+<!-- /////////////////////
+FUNCTION DEFINITION END
+///////////////////////// -->
+
+
+## Examples
+
+**p5.js**
+* [Example 1]()
+* [Example 2]()
+
+**p5 web editor**
+* [Example 1]()
+* [Example 2]()
+
+**plain javascript**
+* [Example 1]()
+* [Example 2]()
+
+## Demo
+
+No demos yet - contribute one today!
+
+## Tutorials
+
+### MagicFeature Tutorial 1 via CodingTrain
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/D9BoBSkLvFo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+### MagicFeature Tutorial 2 via CodingTrain
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/yNkAuWz5lnY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Model and Data Provenance
+> A project started by [Ellen Nickles](https://github.com/ellennickles/)
+
+### Models Overview
+
+A nice description of the models overview
+
+#### ____MODELNAME____ - Model Biography
+
+- **Description**
+  - What does this model do? If unknown, then write TBD
+- **Developer and Year**
+  - Who developed it and when? If unknown, then write TBD
+- **Purpose and Intended Users**
+  - Why was it developed and for whom? If unknown, then write TBD
+- **Hosted Location**
+  - Where does ml5.js retrieve the model files from? If unknown, then write TBD
+- **ml5 Contributor and Year**
+  - Who ported it to ml5 and when? If unknown, then write TBD
+- **References**
+  - What sources did I consult for this information? If unknown, then write TBD
+
+#### ____MODELNAME____ - Data Biography
+
+- **Description**
+  - What is the data? If unknown, write TBD
+- **Source**
+  - Where did it come from? If unknown, write TBD
+- **Collector and Year**
+  - Who collected it and when? If unknown, write TBD
+- **Collection Method**
+  - How was the data collected? If unknown, write TBD
+- **Purpose and Intended Users**
+  - Why was the dataset developed and for whom? If unknown, write TBD
+- **References**
+  - What sources did I consult for this information? If unknown, write TBD
+
+
+
+## Acknowledgements
+
+**Contributors**:
+  * Name 1
+  * Name 2
+
+**Credits**:
+  * Paper Reference | Website URL | Github Repo | Book reference | etc
+
+## Source Code
+
+* [/src/MagicFeature]()
diff --git a/src/markdown/Reference/welcome/FAQ.md b/src/markdown/Reference/welcome/FAQ.md
new file mode 100644
index 0000000..fe16ed6
--- /dev/null
+++ b/src/markdown/Reference/welcome/FAQ.md
@@ -0,0 +1,22 @@
+# FAQ
+
+## Can I always use ml5.js in the [p5 web editor](https://editor.p5js.org)?
+
+Mostly.
+
+A number of the ml5 sketches don't currently work in the p5 web editor due to some of the ways that the editor handles data files and some of the network communication regarding making requests to external data (e.g. the big model files that allow ml5.js to run things like image detection, etc). 
+
+There are lots of developments in the p5 web editor as well as in ml5 to make sure these environments all play nicely together. If something doesn't work in the web editor, the best thing to do is to try and run things locally if possible. See [running you sketch with a local web server tutorial](/?id=try-ml5js-locally-3).
+
+Thanks!
+
+## Can I use ml5.js with node.js?
+
+No. Not at the moment.
+
+ml5.js uses TensorFlow.js which uses the browser's GPU to run all the calculations. As a result, all of the ml5.js functionality is based around using the browser GPU. We hope to have ml5.js run in node-js sometime in the near future (especially now that [node support for TensorFlow is a thing](https://www.tensorflow.org/js/guide/nodejs) but the current ml5 setup does not support node.js. We hope to support this in the future.
+
+
+[For more discussion about node and ml5.js, visit this issue thread.](https://github.com/ml5js/ml5-library/issues/377)
+
+<br>
\ No newline at end of file
diff --git a/src/markdown/Reference/welcome/next_steps.md b/src/markdown/Reference/welcome/next_steps.md
new file mode 100644
index 0000000..928ceb0
--- /dev/null
+++ b/src/markdown/Reference/welcome/next_steps.md
@@ -0,0 +1,24 @@
+# Next Steps
+If you reach this page, we assume you have successfully installed ml5.js and built your first ml5 projects following our [Getting Started](https://ml5js.github.io/ml5-website-v02-docsify/#/) page! Here are some next steps to help you continue your ml5 journey.
+
+## Learn ML
+Interested in using ml5.js to build more ML-based projects? Check out these learning resources!
+
+> #### Beginner's Guide to Machine Learning with ml5.js 👉[ Learn](https://youtu.be/26uABexmOX4?si=nqPoD6bQrVTU-YFw) *By Daniel Shiffman*
+> This playlist provides an introduction to developing creative coding projects with machine learning. The theory and application of machine learning algorithms is demonstrated in JavaScript using the p5.js and ml5.js libraries.
+> <iframe width="560" height="315" src="https://www.youtube.com/embed/26uABexmOX4?si=HXJRrgTkPhjN5hrr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+> #### The Nature of Code - Chapter 10. Neural Networks & Chapter 11. Neuroevolution 👉[ Learn](https://natureofcode.com/book/chapter-10-neural-networks/) *By Daniel Shiffman*
+> In chapter 10, "we’ll begin with a conceptual overview of the properties and features of neural networks and build the simplest possible example of one (a network that consists of a single neuron). Afterwards, we’ll examine strategies for creating a “Brain” object that can be inserted into our Vehicle class and used to determine steering. Finally, we’ll also look at techniques for visualizing and animating a network of neurons."
+> In chapter 11, "the path forward passes through the field of neuroevolution, a style of machine learning that combines the genetic algorithms from Chapter 9 with the neural networks from Chapter 10. A neuroevolutionary system uses Darwinian principles to evolve the weights (and in some cases, the structure itself) of a neural network over generations of trial-and-error learning. In this chapter, I’ll demonstrate how to use neuroevolution with a familiar example from the world of gaming. I’ll then finish off with some variations on Craig Reynolds’s steering behaviors from Chapter 5, where the behaviors are learned through neuroevolution."
+> <center>
+    <img style="display:block; max-height:25rem" alt="pose detection" src="_media/getting_started__noc.jpeg">
+</center>
+
+> #### ML5 Glossay 👉[ Learn](https://ml5js.github.io/ml5-website-v02-docsify/#/learning/ml5_glossary)
+> Have you ever felt confused about a term we used here at ml5? No worries, we've got you covered! Check out this glossary. Here, we explain and define programming techniques and machine learning terminologies specific to ml5 that are mentioned in our libraries, website, and examples.
+
+## Join Community
+We are on [Discord](https://discord.com/invite/3CVauZMSt7). If you have any questions about ml5.js, would like to contribute to ml5.js, or simply want to share your project with a group of creative and talented people like you, don't hesitate to join us!
+
+<br>
\ No newline at end of file
diff --git a/src/pages/reference/[name].js b/src/pages/reference/[name].js
new file mode 100644
index 0000000..f8edf87
--- /dev/null
+++ b/src/pages/reference/[name].js
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { graphql, Link } from "gatsby"
+
+function ProductCatchAll({ params }) {
+  console.log('component', params);
+  return (
+    <div className="wrapper">
+      <header>
+        <Link to="/">Go back to "Home"</Link>
+      </header>
+      <main>
+        <h1>Couldn't find product</h1>
+        <p>We couldn't locate the product "{params.name}"</p>
+      </main>
+    </div>
+  )
+}
+
+export default ProductCatchAll
+
+export const Head = ({ name }) => {
+  // TODO: map slug to name
+  return <title>{name} | ml5.js Reference</title>
+}
+
+export const pageQuery = graphql`
+query {
+  allMarkdownRemark(
+    filter: {fileAbsolutePath: {glob: "**/Reference/**"}}
+    sort: {frontmatter: {title: ASC}}
+  ) {
+    edges {
+      node {
+        id
+        fileAbsolutePath
+        headings(depth: h1) {
+          value
+        }
+        frontmatter {
+          title
+        }
+      }
+    }
+  }
+}
+`
diff --git a/src/pages/reference/index.js b/src/pages/reference/index.js
new file mode 100644
index 0000000..aac3545
--- /dev/null
+++ b/src/pages/reference/index.js
@@ -0,0 +1,56 @@
+import { graphql, Link } from 'gatsby';
+import * as React from "react"
+import Layout from "../../layout/Layout"
+
+const IndexPage = ({ data, ...rest }) => {
+
+  console.log(data, rest);
+
+  // TODO: add frontmatter to all
+  const pages = (data.pages.nodes ?? []).filter(node => node.frontmatter.slug);
+
+  return (
+    // if you plan to update header or footer, check the "Layout.js" file in "layout" folder.
+    <Layout>
+      <section aria-label="Model list">
+        <ul>
+          {pages.map((node) => {
+            return (
+              <li key={node.id}>
+                <Link to={node.url}>
+                  {node.frontmatter.title || node.headings[0]?.value}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </section>
+    </Layout>
+  )
+}
+
+export const Head = () => <title>ml5.js | Reference Documentation</title>
+
+export default IndexPage;
+
+// GraphQL
+export const query = graphql`
+query ReferencePagesQuery {
+  pages: allMarkdownRemark(
+    filter: {fileAbsolutePath: {glob: "**/Reference/**"}}
+    sort: {frontmatter: {title: ASC}}
+  ) {
+    nodes {
+      id
+      frontmatter {
+        title
+        slug
+      }
+      headings(depth: h1) {
+        value
+      }
+      url: gatsbyPath(filePath: "/reference/{markdownRemark.frontmatter__slug}")
+    }
+  }
+}
+`
diff --git a/src/pages/reference/{markdownRemark.frontmatter__slug}.js b/src/pages/reference/{markdownRemark.frontmatter__slug}.js
new file mode 100644
index 0000000..145ef2f
--- /dev/null
+++ b/src/pages/reference/{markdownRemark.frontmatter__slug}.js
@@ -0,0 +1,30 @@
+import * as React from "react"
+import { graphql } from "gatsby"
+
+export default function DocsTemplate({ data }) {
+  const { markdownRemark } = data // data.markdownRemark holds your post data
+  const { frontmatter, html } = markdownRemark
+  return (
+    <div>
+      <div>
+        <h1>{frontmatter.title}</h1>
+        <h2>{frontmatter.date}</h2>
+        <div
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export const pageQuery = graphql`
+  query($id: String!) {
+    markdownRemark(id: { eq: $id }) {
+      html
+      frontmatter {
+        date(formatString: "MMMM DD, YYYY")
+        title
+      }
+    }
+  }
+`
diff --git a/src/templates/reference-page.js b/src/templates/reference-page.js
new file mode 100644
index 0000000..7035cc0
--- /dev/null
+++ b/src/templates/reference-page.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { graphql } from 'gatsby';
+import Layout from '../layout/Layout';
+
+const Template = ({ data, ...rest }) => {
+  console.log('template', data, rest);
+  const post = data.markdownRemark;
+  return (
+    <Layout>
+      <div
+        style={{ display: 'flex' }}
+      >
+        <div
+          style={{ width: 250, overflowX: 'hidden', paddingRight: 30 }}
+          dangerouslySetInnerHTML={{ __html: post.tableOfContents }}
+        />
+        <div
+          style={{ flex: 1 }}
+          dangerouslySetInnerHTML={{ __html: post.html }}
+        />
+      </div>
+    </Layout>
+  );
+};
+
+export const query = graphql`
+  query($slug: String!) {
+    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
+      html
+      tableOfContents
+      frontmatter {
+        title
+      }
+    }
+  }
+`;
+
+export default Template;