error message:

Mixed Content: The page at 'https://ml5-website-2.netlify.com/reference/api-KNNClassifier/' was loaded over HTTPS, but requested an insecure resource 'http://ml5js.github.io/ml5-examples/p5js/KNNClassification/KNNClassification_Video/'. This request has been blocked; the content must be served over HTTPS.

A quick solution for this is to use Netlify host the page.

We should remember to run accessibility tests on the site! I use this chrome extension:

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

Tagging @phucduong86 as an informal advisor. Phuc has been working on accessibility for thecodingtrain.com and is a bit overloaded with projects, but maybe can join the project more officially when he has time!

error GraphQL Error Encountered 1 error(s):
- Unknown field 'tutorials' on type 'MarkdownRemarkFrontmatter'.

Temporary solution: use an empty string as a placeholder, example:
In community post markdown:
externalLink: ""

In reference markdown:
tutorials: ""

Hi,

Recently, I am reviewing the new ml5js website, and find the example linked in the tutorial page causes a failure when loading prediction.

Here is the link, at the bottom of the page, there is a link to p5js web editor. And it will cause an error like this

GET https://editor.p5js.org/ml5/sketches/ImageClassification/images/puffin.jpg 404

Is it an error of p5 web editor server?

Website checklist

Community

• Add additional content and projects

Homepage

• ...

Reference Page

• CVAE()
  • documentation is up-to-date
  • examples are up-to-date
• DCGAN()
  • documentation is up-to-date
  • examples are up-to-date
• pitchDetection()
  • documentation is up-to-date
  • examples are up-to-date
• pix2pix()
  • documentation is up-to-date
  • examples are up-to-date
• poseNet()
  • documentation is up-to-date
  • examples are up-to-date
• SketchRNN()
  • documentation is up-to-date
  • examples are up-to-date
• styleTransfer()
  • documentation is up-to-date
  • examples are up-to-date
• UNET()
  • documentation is up-to-date
  • examples are up-to-date
• word2vec()
  • documentation is up-to-date
  • examples are up-to-date
• example()
  • documentation is up-to-date
  • examples are up-to-date
• YOLO()
  • documentation is up-to-date
  • examples are up-to-date
• CharRNN()
  • documentation is up-to-date
  • examples are up-to-date
• featureExtractor()
  • documentation is up-to-date
  • examples are up-to-date
• KNNClassifier()
  • documentation is up-to-date
  • examples are up-to-date
• imageClassifier()
  • documentation is up-to-date
  • examples are up-to-date

Getting Started

• Getting Started
• Image Classification
• Overview
• Promises and Callbacks
• Creating your data
• Preparing your own data
• Types of Data
• Data Collection

About

What's happening: If I click on "Getting started" in the footer, it takes me to a 404 page.
What's expected: Clicking on "Getting started" should take me to the corresponding page

For now, on some pages we can add any videos from here:

https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y

There are also some videos for StyleTransfer and chaRNN in this playlist.

https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Y6kSfxOjq5zk4gkDK8q_n1

I plan to make more videos over the summer, but by no means does the material on these pages need to be limited to coding train videos!!

@yining1023 may also have some materials from her class that could go on the tutorials page!

I think a question is whether there's a written tutorial on the tab or if the page is more of a collection of links outward?

For now I suppose we embed the videos since that is what we have?

Nicole and I had a chat today about bringing more consistency to the images on the Reference page.

Ideally we'd create more visual coherence using a more consistent color palette, stroke weight and colors, image sizes and empty space, etc.

just some ideas here:

The iframes are a decent solution for handling adding our examples, but there are some usability issues for examples that require some kind of interaction.

Currently the fixed height of the iframe box makes it such that any interface buttons for the examples disappear. This is maybe more of an issue with our examples and the layout, but just wanted to flag this for discussion.

e.g - it is hard to add "rock, paper, scissors" to the KNN example without seeing the video

There's a few broken links on the website, mostly stuff linking to examples / training tutorials. I've put in my best guess of what the correct URLs are :

Page: https://ml5js.org/reference/api-KNNClassifier/
Linked text (in bold) : Check out this example that uses KNNClassifier to classify data from PoseNet model.
Broken URL: https://ml5js.org/docs/knnclassifier-posenet
Correct URL: https://github.com/ml5js/ml5-examples/tree/release/p5js/KNNClassification/KNNClassification_PoseNet

Page: https://ml5js.org/reference/api-KNNClassifier/
Linked text (in bold) : Check out this example that uses KNNClassifier to classify data from PoseNet model.
Broken URL: https://ml5js.org/docs/PoseNet
Correct URL: https://ml5js.org/reference/api-PoseNet/

Page:
https://ml5js.org/reference/api-Word2vec/
Linked text (in bold) : or you can train your own vector models following this tutorial
POINT TO https://github.com/ml5js/ml5-data-and-models/tree/master/training
Correct URL: https://github.com/ml5js/training-word2vec

Page: https://ml5js.org/reference/api-charRNN/
Linked text (in bold) : You can train your own models using this tutorial or use this set of pre trained models.
Broken URL: https://ml5js.org/docs/training-lstm
Correct URL: https://github.com/ml5js/training-lstm

Page: https://ml5js.org/reference/api-charRNN/
Linked text (in bold) : Here is a complete example using the p5.js library.
Broken URL: https://github.com/ml5js/ml5-examples/blob/master/p5js/LSTM/LSTM_Text/sketch.js
Correct URL: https://github.com/ml5js/ml5-examples/tree/release/p5js/CharRNN/CharRNN_Text

Page: https://ml5js.org/reference/api-YOLO/
Linked text (in bold) : Here is a complete example.
Broken URL: https://github.com/ml5js/ml5-examples/blob/master/p5js/YOLO/sketch.js
Correct URL: https://github.com/ml5js/ml5-examples/tree/release/p5js/YOLO

Page: https://ml5js.org/reference/api-SketchRNN/
Linked text (in bold) : Here is a complete example.
Broken URL: https://github.com/ml5js/ml5-examples/blob/master/p5js/SketchRNN/sketch.js
Correct URL: https://github.com/ml5js/ml5-examples/tree/release/p5js/SketchRNN/SketchRNN_basic

Page: https://ml5js.org/reference/api-StyleTransfer/
Linked text (in bold) : you can train your own images following this tutorial.
Broken URL: https://ml5js.org/docs/training-styletransfer
Correct URL: https://github.com/ml5js/training-styletransfer

Page: https://ml5js.org/reference/api-PoseNet/
Linked text (in bold) : Here is a complete example.
Broken URL: https://github.com/ml5js/ml5-examples/blob/master/p5js/PoseNet/sketch.js
Correct URL: https://github.com/ml5js/ml5-examples/tree/release/p5js/PoseNet/PoseNet_webcam

An idea came up from our visit to Boston which would be to create a pre-trained model catalog to highlight all of the pre-trained models that ml5 users and developers have created and are willing to share with the ml5 user community.

There are more and more things like this popping up - https://modeldepot.io/ + it would be great if we can as a community help to evaluate issues or biases in the pre-trained models especially for creative practice.

I'm making an issue here, but we might think about this as another micro site.

cc/ @yining1023 @shiffman

just to get it started:

http://mimionuoha.com/a-peoples-guide-to-ai ✅

http://mimionuoha.com/the-library-of-missing-datasets-v-20

https://github.com/yining1023/machine-learning-for-the-web/wiki/References---Inspiration---Links

Documentation is here: https://github.com/ml5js/ml5-website-2#updating-instructions

Here are just some notes about adding content to these sections of the webpage - I can/will move this elsewhere later, but for now, it is easiest to just add info here.

Where we could use some help:

• Reference pages:
  • ensure documentation and example is current for all ml5 functions
  • make sure to add documentation for new models, DCGAN, Sentiment, CVAE, and UNet
  • decide on how to include examples on reference pages - is it too crazy to add the code running in the examples as YAML frontmatter?
• Community pages:
  • add super cool projects
• Getting Started:
  • Need to come up with a narrative and coherent "getting started" resource
  • begin filling in content once we've decided what it means to "get started" - I imagine something like icluding a boilerplate for making an ml5 project, showcasing an example using the p5 web editor, etc etc. explaining concepts and how things relate to p5, using preload etc. thoughts?

General Notes

Adding Images:

UPDATED:
All content images should be stored in only one place /docs/assets, and use relative url to load them.

• ~/ml5-website-2/docs/assets

e.g.: ../assets/name-of-image.png:

This is kind of weird that there's 2 places where images are being dumped. Maybe @wenqili can clarify? Thank you!

Community

• filepath: /docs/community
• Notes:
  • markdown file - e.g. 2019-04-20-nikita-and-ayo-subtext-on-black-corpus.md is a new post

if the externalLink property exists in the frontmatter, the post will open a new page to the given url.

For now, please use externalLink: "" as a placeholder in front matter, if you'd like to have a self-hosted blog post on the ml5 site, meaning that it doesn't redirect out, e.g.

Reference

• filepath: /docs/reference/
• Notes:
  • each page in our reference is called api-theNameOfTheThing.md
  • each api-theNameOfTheThing.md has a:
    • title
    • exampleimgsrc
    • tags
    • description

The tags will determine where the function is shown on the home reference page. Currently a page can be tagged with the following tags:

• image
• video
• text
• sound
• helpers

These models/functions are being added soon, so it would be great to make reference pages for the following:

• CVAE: https://github.com/ml5js/ml5-library/tree/development/src/CVAE
• Sentiment: https://github.com/ml5js/ml5-library/tree/development/src/Sentiment
• UNET: https://github.com/ml5js/ml5-library/tree/development/src/UNET
• DCGAN: ml5js/ml5-library#351

Getting Started

• filepath: /docs/getting-started/
• Notes:
  • /docs/getting-started/index.md: this is the landing page of the getting started. This is the markdown for the page that people will see first.
  • /docs/getting-started/#-name-of-markdown-file.md: the number preceding the name of the file indicates the order in which the content will be shown in the sidebar. Edit the content in markdown

About

• filepath: /docs/about.md
• Notes:
  • ### three hashes for a section heading
  • use <br/> to add line breaks between paragraphs

Home Page

• filepath: /docs/index.md
• Notes:
  • here, the yaml frontmatter contains all of the text and content for the home page.
  • each section of the homepage is defined here and separated by a new line in the frontmatter:
    • title, description, image, heading, subheading, featureheading
    • mainpitch:
    • intro:
    • version
    • model
    • team

You can see how these sections in the frontmatter correspond to the sections of the homepage:

I think we could probably archive https://github.com/ml5js/ml5-website and pin this repo as the main one! No hurry on this, let me know @joeyklee what you think the best process is.

Related to: gatsbyjs/gatsby#4123

Occurs after changing the "Team" image on the home page. (currently working on fixing & will report back on fixes)

error GraphQL Error Field "image" must not have a selection since type "String" has no subfields.

  file: /Users/joeyklee/Cosmos/src/github/ml5-src/ml5-website-2/src/templates/home-page.js

  46 |                   ...GatsbyImageSharpFluid
  47 |                 }
  48 |               }
  49 |             }
  50 |             text
  51 |           }
  52 |           heading
  53 |           description
  54 |         }
  55 |         team {
> 56 |           image {
     |                 ^
  57 |             childImageSharp {
  58 |               fluid(maxWidth: 240, quality: 64) {
  59 |                 ...GatsbyImageSharpFluid
  60 |               }
  61 |             }
  62 |           }
  63 |           heading
  64 |           profile
  65 |         }
  66 |       }

I don't recall specifically what we planned for the "advanced" tab? Is this a tab for if there is info about how to train your own model with python? I think we should avoid the word "advanced". Maybe just some pages would have a "training" tab?

Just a thought about a workflow that might be good to implement regarding adding documentation the ml5-library and the website. I'd rather create less overhead so maybe this proposal doesn't make sense. Ideally we could have [jsDoc](https://devhints.io/jsdoc_ running at some point, but maybe this is a start?

for example: if we update sketchRnn:
Make changes to ml5-library/src/sketchRnn/index.js ==> update ml5-library/docs/api-sketchRnn.md ==> copy the contents of that file to ==> ml5-website-2/reference/api-sketchRnn.md

I think when we built ml5js.org 1.0 we had the idea that we would put a lot of blank / placeholder pages and the content would get filled in later. The lesson learned is that they did not get filled in 😄.

Would it be possible to detect if a tab is empty and hide it?

This relates to #13 as not all pages will have a "training" page.

For the mobile net feature extractor and for using the knn classifier are there any input image requirements? i.e can provide any aspect ratio and resolution image to the mobile net and the knn classifier? Or is it required that a 1:1 ratio image is served but no requirement for the resolution size. Or is there a limit to the max resolution as well.

In the basic example for bodyPix in the documentation, the callback function in bodypix.segment is called gotResults. However, the function underneath which logs the results is called gotImage. I assume the name of the callback should be the same as the function which logs the results.

One thing we should consider is: do we use the p5 examples on the ml5 website? or should we include just the vanilla javascript examples?

One thing on my todo list is to sync up the vanilla javascript examples with the p5js examples, but for now, as the p5 examples are the most extensive, we might stick with that for now?

Now that you've got a ml5.js project setup, move on to the next section to see ml5.js in action.

The above sentence at the bottom of the Quickstart page feels off. I was expecting to be able to click on it as a link. But then is each page going to link to the "next one"? They aren't really sequenced. Duplicate the left nav and list some options to "move onto?"

All in all, I think maybe I would just remove it for simplicity right now? Or better yet, maybe just a note about the FAQ?

I am reading through the repo and I would like to ask orientation about a few typos, how phrases are worded, etc.

I list below what I found so far in README && CONTRIBUTING (better to condense this kind of request for several files in an unique eventual issue/PR or each file should be discussed in a separate issue/PR?).

README

• with contain more of an explanation (not sure how could be rephrased)
• situatings (situations)
• Preview Link is broken (Not Found)
• images that used in templates (images that are used in templates?)
• git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git could be explained as git clone https://github.com/ml5js/ml5-website?

CONTRIBUTING

• Since this starter using the (not sure how could be rephrased)
• starts the gatsby develop server (development?)
• when you only changing the site (when you are only changing the site?)
• starts the lambda server in develop mode (development?)

The reference website still lists numClasses as the option to set the number of classes/labels for the FeatureExtractor, but since the update to 3.1 in the library this has been change to numLabels.

In addition to our current tags -- image, sound, text, helpers -- we can add tags to reference such as:

• generative
• classification
• ...

Any suggestions that would be helpful for you @handav ? 🙏

Though it fits for many items on the list, I don't think "models" is the right umbrella term for the list of ml5 functions.

The thing is I don't have a better idea! What these are more literally are "ml5 functions" "ml5 features". Features isn't good b/c it means something specific in ML. Would it be terrible to just not have a heading? But instead of organize the sidebar list into categories?

Or anyone have an idea?

Just some notes on things to fix regarding alignment:

homepage - discover section

ml5 functions

• DCGAN()
  • example1
  • example2
• featureExtractor()
  • FeatureExtractor_Image_Classification
  • FeatureExtractor_Image_Regression
• CVAE()
  • example1
  • example2
• KNNClassifier()
  • KNNClassification_VideoSound
  • KNNClassification_Video
  • KNNClassification_PoseNet
  • KNNClassification_VideoSquare
• pitchDetection()
  • PitchDetection_Game
  • PitchDetection
• styleTransfer()
  • StyleTransfer_Video
  • StyleTransfer_Image
• UNET()
  • example1
  • example2
• word2vec()
  • Word2Vec
• CharRNN()
  • CharRNN_Interactive
  • CharRNN_Text
  • CharRNN_Text_Stateful
• example()
  • example1
  • example2
• poseNet()
  • PoseNet example on image with single detection
  • ePoseNet example using p5.js with webcam
• YOLO()
  • YOLO image detection on single image
  • YOLO_webcam
• pix2pix()
  • Pix2Pix_callback
  • Pix2Pix_promise
• SketchRNN()
  • SketchRNN_basic
  • SketchRNN_interactive
• imageClassifier()
  • ImageClassification
  • ImageClassification_Video
  • ImageClassification_VideoScavengerHunt
  • ImageClassification_VideoSoundTranslate
  • ImageClassification_VideoSound
  • ImageClassification_MultipleImages

@wenqili - Thanks for the integration of google analytics.

We should make sure to integrate the:

• Do Not Track features: https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/#respectdnt
• AnonymizeIP: https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/#anonymize

I would be in favor of also anonymizing IP addresses for all ml5.js visitors, unless there are other thoughts on how collecting IP addresses will be helpful for us?

On the QuickStart page, we tell users to "open up that file in your web browser" but if they do so by double-clicking on it, which they are most likely to do, some of the examples won't work correctly (such as the Hello ml5 example on the next page).

Somewhere in the site we should mention that the user should be using something like python -m http.server to serve the page. Is Python the most user-friendly option? What about people with Windows who might not have Python on their path?

We should enforce the naming conventions for naming .md files e.g.:

• no spaces
• all lowercase
• words separated by dash -

e.g.
"Fast Style transfer.md" ==> "fast-style-transfer.md"

community section:

YYYY-MM-DD-name-of-title-separated-by-dashes.md

if the externalLink property exists in the frontmatter, the post will open a new page to the given url. If no externalLink property exists, then the page will go to a new blog post page that renders the markdown under the frontmatter. For example:

Right now there are two different pages show a collection of a few models:
Reference page: https://ml5-website-2.netlify.com/reference/
Tag page: https://ml5-website-2.netlify.com/tags/coming-soon/

The difference is, the reference page is based on categories, tag page includes categories and special collections like coming soon.

I propose we merge them together to reduce the number of pages. Maybe design a system of tags or categories?

as per our discussions here: ml5js/ml5-library#314

We've got so many wonderful contributors - it would be nice to show that there's humans behind the project: https://github.com/ml5js/ml5-library/graphs/contributors

maybe on an about page or the home page?

Need to update syntax highlighting and code area background:

Brown is not in design specs

It would be nice to create a submission page for people to submit their projects to be showcased on the community page :)

The Getting Started page has a nice summary of how to work with ml5 without p5.js. I was thinking that adding a short section about working with p5.js and link to a blank ml5.js sketch "template" and/or the same "image classification" example in the p5.js editor is a quicker, simpler path to getting started!

Notes:

We can online search with some external service, or offline index search, which will load the index when user first land the website.

There are number of really common questions that pop up. We definitely should have an FAQ for the ml5 page, for example: ml5js/ml5-library#377

Currently the javascript is not being called in the examples for the reference pages.

Hi!

Maybe we can start a list of possibilities for doc generators/platforms for building the website w/ some templating help:

I've started using docsify and seems way more friendly than Docusauraus (which is what the website is currently made from).

See: https://docsify.js.org/#/

The current design of the main landing page view is a highlighted project. I would opt for something more specifically communicating to our audience that people have arrived at the ml5 website. At the moment, it feels too much like people are landing on the project page of the featured project since there is no reference to ml5 in the text and the background image is so dominant.

Current design

Interim solution / Proposed change towards something like...

see: https://github.com/ml5js/ml5-website-2/tree/homepage-updates

ideal solution:

We can have a ML5 sketch running in the background.. maybe something like sketchRnn?

It would be nice for the examples tab to include a link to the p5 web editor version of the example (if there is a working one). This could go under "Source" or perhaps better yet as a link right under the iFrame running the example?'

This leads me to wonder if the code snippet is necessary? It's nice to see it there, but would the simplification of just having links to the source under the running example be worth it?

Filing an issue for to linking to an ml5 web editor sketch whenever this gets merged and the example upload script runs. ml5js/ml5-examples#143

See: ml5js/ml5-library#590

Add Teachable Machine documentation!

Todos

When we're ready to launch:

• get logins for domain name service ==> @shiffman has the keys! :)
• add domain name to ml5-website-2 repo
• test!

Related to ml5js/ml5-library#556

I'm working on some new layouts to accommodate the separation between the ml5js.org website and the reference and documentation. The idea is to move the reference documentation closer to the library code base and keep the website just for the landing page, community, and about pages.

More on this soon!