Comments (9)
Development on ml5.js is restarting again this summer with a new partnership between NYU in NY and NYU Shanghai! I'm tagging in @MOQN here who will be leading design and development on the website!
from ml5-website.
I love this! Thank you for these mockups they are terrific! (I'm actually working on a new design for the Coding Train website and this is giving me some ideas 😜)
from ml5-website.
For the sake of maintainability, I could also imagine removing the list of examples from each of the reference pages on learn.ml5js.org and replacing them with a link to our examples.ml5js.org
to centralize things and help reduce the workload while we are figuring out how our sustainability plan 😂
from ml5-website.
Thanks so much @tlsaeger ! I really appreciate the mock ups.
I'm totally in support of your proposals here and think these would make a positive impact on the experience.
Examples listed on each page of the learn.ml5js.org
If I remember correctly, these are all rendered markdown pages using Docsify under the hood, so we might have to do something special to bring JS in that would allow us to create the styles you've mocked up. e.g. https://raw.githubusercontent.com/ml5js/ml5-library/main/docs/reference/bodypix.md
There might be some interesting plugin that could help us -- https://docsify.js.org/#/awesome?id=plugins -- but I'm not sure what is in there 🤔
Re: updating the examples page - https://examples.ml5js.org/
Here we have a lot more flexibility what we do! Whether we build out your mocked example cards here OR integrate @afogel's suggestion of the cool indexed table, we basically can do whatever we want. See:
- https://github.com/ml5js/ml5-library/blob/main/examples/index.html
- https://github.com/ml5js/ml5-library/blob/main/examples/assets/sketch.js#L45
The data that populates that examples.ml5js.org page is pulled from here -- https://github.com/ml5js/ml5-library/blob/main/examples/examples.json -- so any kind of data modeling we think about, we should apply to this. The examples.json file is generated by diving into each of the directories/subdirectories of the examples folder -- https://github.com/ml5js/ml5-library/blob/main/scripts/update-examples-json.js -- which explains why there so far hasn't been human friendly examples names and descriptions. The advantage of this is that it is easy to maintain -- we just run a script to keep things updates --, but the down side is that we'd have to figure out a way to include other metadata that could populate those human friendly elements like images, titles and summary etc.
Hope this helps!
from ml5-website.
Thanks for the feedback @joeyklee.
Examples listed on each page of the learn.ml5js.org
I did not know that all the styling from our docs is just a theme 😄 thought we designed and made it ourself using css. I will take a look on how can apply a "custom" style to those pages. For my first proposal of that page I think we will not need to implement any JS, but I'm gonna check that out.
Re: updating the examples page
I will dig deeper into the structure in the coming days to figure out where we can add our meta data and maybe human friendly names as well.
I guess routing everything to the examples.ml5js.org is a good idea in terms of maintainability, but would be a step down for the users. If you just have a link in the reference and need to search in examples again. There might be a better way to do it. 😉 I will think about that as well.
I will have my master presentation on Wednesday, till than I need to but some work in the presentation. I hope to find time to work on this next weekend.
from ml5-website.
The data that populates that examples.ml5js.org page is pulled from here -- https://github.com/ml5js/ml5-library/blob/main/examples/examples.json -- so any kind of data modeling we think about, we should apply to this. The examples.json file is generated by diving into each of the directories/subdirectories of the examples folder -- https://github.com/ml5js/ml5-library/blob/main/scripts/update-examples-json.js -- which explains why there so far hasn't been human friendly examples names and descriptions. The advantage of this is that it is easy to maintain -- we just run a script to keep things updates --, but the down side is that we'd have to figure out a way to include other metadata that could populate those human friendly elements like images, titles and summary etc.
Keeping in mind that the metadata would be the same for all implementations of an example, it might be easier to organize this if we separate the folders first by model and then by example. Right now we separate by javascript
/p5js
before anything else so we aren't keeping multiple implementations of the same model together.
Each example's folder could contain sub-folders for javascript
and p5js
and also contain a metadata.json
file with the title, description, image, etc. Maybe we can even keep the image file in the same folder.
from ml5-website.
I've been playing around with adding more structured data to the examples. We can assign a media type and a task and then render those in the UI with descriptive icons. There are other sorts of tags/filters we could potentially use such as "Interactive" "Game" "Quick Start" etc. Obviously the description and image is a lorem ipsum.
A few of those might not actually be used. Audio and video can go because all of our videos are webcam and all of our audios are microphone. I haven't categorized all of the NN examples but I suspect that predict is not needed because our prediction tasks can be described by something more specific like classify.
Work in progress:
https://codesandbox.io/s/ml5-examples-w-task-and-media-icons-pzrouc?file=/src/App.tsx
from ml5-website.
Hello If this issue is still open. I would like to contribute .
from ml5-website.
@horizenight first up thanks for bringing this up again. Cool that you'd like to participate. @shiffman i know I was super quiet lately, but if you restart the project I'd love to be involved as much as I can. So please let me know.
from ml5-website.
Related Issues (20)
- New PoseNet ml5.neuralNetwork() tutorial placement? HOT 2
- [Website Design] Tundi's Design Proposal
- Quickstart example for NeuralNetwork not working HOT 2
- Setup issue with node v12 HOT 4
- Plan to translate this site into other languages? HOT 12
- [devOps] Change branch name from master -> main HOT 2
- inputLabels must be an array (sketch: line 46)
- Links to "getting started" and "docs" on homepage are not working - they don't point to the right page HOT 3
- p5js link is broken https://editor.p5js.org/ml5/sketches/ml5_boilerplate HOT 1
- Update the links in the community page
- BLM overlay is too large on mobile HOT 1
- Hamburger menu bottom-aligned on Reference (Docs) pages.
- Update BLMSolidarityModal to remove inline styles
- Background and foreground colors do not have a sufficient contrast ratio
- Delete docs folder HOT 2
- Code of Conduct missing on website
- Outdated dependencies
- RIP Atom - Update to Hello ml5.js - A gentle introduction to ml5 HOT 2
- Archiving website! HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ml5-website.