hwang26 / image-classifier Goto Github PK
View Code? Open in Web Editor NEWFrontend Interface for ml5.js DoodleNet classifier
Frontend Interface for ml5.js DoodleNet classifier
This initial version will not have the functional DB image saving, but it should be functional in all other respects besides the login authentication
References:
https://developer.mozilla.org/en-US/docs/Web/Accessibility
https://designcode.io/figma-handbook-responsive-design
Acceptance Criteria:
netlify-identity-widget
node js + next js (primarily supports react serverside rendering)
react
p5js
ml5js
SASS
Storybook
Some inadequacies in understanding the component life cycle. This ticket is mainly to review these concepts.
https://www.twilio.com/blog/react-choose-functional-components
https://reactjs.org/docs/state-and-lifecycle.html
https://medium.com/front-end-weekly/async-await-with-react-lifecycle-methods-802e7760d802
Frontend interface for ml5.js DoodleNet Classifier
https://www.youtube.com/watch?v=jmznx0Q1fP0&ab_channel=TheCodingTrain
https://www.youtube.com/watch?v=3MqJzMvHE3E&ab_channel=TheCodingTrain
https://www.youtube.com/watch?v=ABN_DWnM5GQ&ab_channel=TheCodingTrain
I don't think Jest testing will be valuable to this project.
The functionality is relatively straight forward and there's not much backend processing.
I'll probably close this out for now.
This was a really satisfying project.
I was able to learn modern frontend practices from a relatively short video tutorial and then self learn React and other skills.
The project itself was small in scope but was still substantial enough to learn how to work with new technologies.
Visually, it was fun to design and present to friends. The feedback was really good, which was nice.
Overall, I think small projects like this are a good way to self learn new skills.
This was extremely helpful for mocking the app.
Figma provides some starter CSS code as well.
When we're actually developing, we'll probably have to use CSS flexbox to arrange the pieces.
ACs:
ACs:
Acceptance Criteria:
Two separate components
Drawing Pane Acceptance Criteria:
Sidebar Acceptance Criteria:
Reference
https://github.com/CodingTrain/website/blob/main/learning/ml5/9.1-doodlenet/mouse/sketch.js
https://www.youtube.com/watch?v=ABN_DWnM5GQ&ab_channel=TheCodingTrain
Acceptance Criteria:
Currently classification occurs continuously upon canvas render.
This causes the state of the judges to continuously refresh aka refreshing the component constantly.
Additionally, the Sidebar component is not really the sidebar, its the main content.
Tech Details:
We don't have to install everything at the beginning.
But can set up the environment.
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.