ml5js / ml5-website Goto Github PK
View Code? Open in Web Editor NEWml5 website!
Home Page: https://archive-docs.ml5js.org
License: MIT License
ml5 website!
Home Page: https://archive-docs.ml5js.org
License: MIT License
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?
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
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!
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!
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?
Notes:
We can online search with some external service, or offline index search, which will load the index when user first land the website.
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.
Add Teachable Machine documentation!
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?
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?
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?
In addition to our current tags -- image
, sound
, text
, helpers
-- we can add tags to reference
such as:
Any suggestions that would be helpful for you @handav ? 🙏
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
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?
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: ""
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
.
It would be nice to create a submission page for people to submit their projects to be showcased on the community page :)
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?
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?
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.
When we're ready to launch:
ml5-website-2
repoWe'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?
@wenqili - Thanks for the integration of google analytics.
We should make sure to integrate the:
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?
as per our discussions here: ml5js/ml5-library#314
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.
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
git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git
could be explained as git clone https://github.com/ml5js/ml5-website
?CONTRIBUTING
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
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
We should enforce the naming conventions for naming .md
files e.g.:
-
e.g.
"Fast Style transfer.md" ==> "fast-style-transfer.md"
YYYY-MM-DD-name-of-title-separated-by-dashes.md
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).
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
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
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 | }
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.
UPDATED:
All content images should be stored in only one place /docs/assets
, and use relative url to load them.
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!
/docs/community
2019-04-20-nikita-and-ayo-subtext-on-black-corpus.md
is a new postif 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.
/docs/reference/
api-theNameOfTheThing.md
api-theNameOfTheThing.md
has a:
The tags will determine where the function is shown on the home reference page. Currently a page can be tagged with the following tags:
These models/functions are being added soon, so it would be great to make reference pages for the following:
/docs/getting-started/
/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/docs/about.md
###
three hashes for a section heading<br/>
to add line breaks between paragraphs/docs/index.md
You can see how these sections in the frontmatter correspond to the sections of the homepage:
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?
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
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.
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.
see: https://github.com/ml5js/ml5-website-2/tree/homepage-updates
We can have a ML5 sketch running in the background.. maybe something like sketchRnn?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.