hwang26 / image-classifier Goto Github PK

• Watch Figma portion of video
• Learn basics of Figma
• Design basic layout of app in Figma

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.

• Clean up the application code
• Read MDN sections on accessibility
• Are there easy ways to make the design more responsive? I'm not sure bc its not meant to be used on mobile
  • Maybe the page can break into a single column
  • I actually don't think this adds much value because the classifier runs really slowly outside of desktop environments

References:
https://developer.mozilla.org/en-US/docs/Web/Accessibility
https://designcode.io/figma-handbook-responsive-design

Acceptance Criteria:

Two separate components

• Nonfunctional login button
• Info tooltip

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.

Drawing Pane Acceptance Criteria:

• Add in the p5js drawing pane
• It should have the basic drawing capability atm
• Rewatch the p5js and ml5js video

Sidebar Acceptance Criteria:

• Clear button
• Save button
• Judges Box

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

• This may require react-p5 package.

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

• Watch videos for background

• Attach notes

• user login/auth
• Disclaimer on the model (DoodleNet)
• Pane for mouse controlled drawing
  • We could make this a game where we want to get within 90% range of accuracy for a given category
• Classification information
  • we can be clever with this by using a format string
• Clear button
• Save button
• past 5 saved images
• ability to click on an image to bring it up in the classifier as a background
  • allow user to draw over the image

Acceptance Criteria:

• Title is Sketchamon
• Non-functional Prompt
• Non-functional refresh button using Google Material Design icons

Acceptance Criteria:

• Hide secrets if any
• Update README.md
• CICD on Github
• Host on Github

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.

netlify-identity-widget
node js + next js (primarily supports react serverside rendering)
react
p5js
ml5js
SASS
Storybook

This initial version will not have the functional DB image saving, but it should be functional in all other respects besides the login authentication

• Set up Next JS, SASS, project skeleton, and storybook
• Title, prompt, and nonfunctional refresh
• Non functional login and info tooltip
• Drawing pane and research using p5js library & ml5js
• Sidebar and functional refresh
• Nonfunctional last 5 saved images

#1

• netlify-identity-widget
• node js + next js (primarily supports react serverside rendering)
• react
• p5js
• ml5js
• NOTE: We will decide on DB later
• SASS
• Storybook
• Jest (Maybe a simpler testing framework will work)

We don't have to install everything at the beginning.

But can set up the environment.

• Install NextJS, SASS
• Develop the folder structure of the Project Skeleton
• Install and set up Storybook

Some inadequacies in understanding the component life cycle. This ticket is mainly to review these concepts.

• Review mounting/unmounting
• Refs
• Component lifecycle

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

https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/#:~:text=useState%20is%20a%20Hook%20that,function%20to%20update%20this%20value.