Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated Content for ml5.js next gen #9

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Updated Content for ml5.js next gen #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 16 additions & 18 deletions src/pages/404.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,29 +32,29 @@ const NotFoundPage = () => (
export default NotFoundPage;
*/

import * as React from "react"
import { Link } from "gatsby"
import * as React from 'react';
import { Link } from 'gatsby';

const pageStyles = {
color: "#232129",
padding: "96px",
}
color: '#232129',
padding: '96px',
};
const headingStyles = {
marginTop: 0,
marginBottom: 64,
maxWidth: 320,
}
};

const paragraphStyles = {
marginBottom: 48,
}
};
const codeStyles = {
color: "#8A6534",
color: '#8A6534',
padding: 4,
backgroundColor: "#FFF4DB",
fontSize: "1.25rem",
backgroundColor: '#FFF4DB',
fontSize: '1.25rem',
borderRadius: 4,
}
};

const NotFoundPage = () => {
return (
Expand All @@ -63,7 +63,7 @@ const NotFoundPage = () => {
<p style={paragraphStyles}>
Sorry 😔, we couldn’t find what you were looking for.
<br />
{process.env.NODE_ENV === "development" ? (
{process.env.NODE_ENV === 'development' ? (
<>
<br />
Try creating a page in <code style={codeStyles}>src/pages/</code>.
Expand All @@ -74,11 +74,9 @@ const NotFoundPage = () => {
<Link to="/">Go home</Link>.
</p>
</main>
)
}

export default NotFoundPage

export const Head = () => <title>Not found</title>
);
};

export default NotFoundPage;

export const Head = () => <title>Not found</title>;
121 changes: 44 additions & 77 deletions src/pages/about.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from "react";
import Layout from "../layout/Layout";
import Spacer from "../components/Spacer";
import IframeComponent from "../components/IframeComponent";
import * as React from 'react';
import Layout from '../layout/Layout';
import Spacer from '../components/Spacer';
import IframeComponent from '../components/IframeComponent';

const AboutPage = () => {
return (
Expand All @@ -10,98 +10,65 @@ const AboutPage = () => {
<h1>About</h1>
<h2>Friendly machine learning for the web!</h2>
<p>
Welcome to the ml5 project! Developing ml5 is not just about developing machine learning software, it is about making machine learning approachable for a broad audience of artists, creative coders, and students. The library provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js with no other external dependencies.
Welcome to the ml5.js project, a friendly JavaScript library with a goal of making machine
learning tools approachable for a wide audience of artists, students, and creative coders.
Built on top of TensorFlow.js with no other external dependencies, the library provides
access to machine learning algorithms and models in the browser. We hope to inspire creative
experimentation and provoke discussions about data, training, and algorithmic bias and
ethics.
</p>
<p>
The library is supported by code examples, tutorials, and sample datasets with an emphasis on ethical computing. Bias in data, stereotypical harms, and responsible crowdsourcing are part of the documentation around data collection and usage. We're building friendly machine learning for the web - we're glad you're here!
</p>
<p>
ml5.js is heavily inspired by Processing and p5.js.
</p>
<p>
Learn more about the history and origins of the ml5.js project published on <a href="https://ml5js.medium.com/" target="_blank">Medium.com/@ml5js</a>.
The library was first released in 2018 and its community has grown organically throughout
its first five years of development. The origins of the project are detailed in this{' '}
<a href="https://medium.com/ml5js/ml5-friendly-open-source-machine-learning-library-for-the-web-e802b5da3b2">
article originally published as part of ITP's Adjacent journal
</a>
.
</p>
<p>ml5.js is heavily inspired by Processing and p5.js.</p>
<Spacer />

<h2>Community Statement</h2>

<p>
ml5.js is a community interested in exploring and empowering the creative and ethical application of machine learning. This Code of Conduct is intended to foster a community that is open to anyone interested in joining that exploration.
</p>
<p>
We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, size, ability, class, religion, culture, age, skill level, occupation, and background. We acknowledge that not everyone has the time, financial means, or capacity to actively participate, but we recognize and encourage involvement of all kinds. We facilitate and foster access and empowerment. We are all learners.
</p>
<p>
We accept the claim that technology is a reflection of society, its histories, and its politics. We reject the claim that any technology is neutral and acknowledge that every technology has the potential to do as much harm as good. We acknowledge that when technologies cause harm, the harm disproportionately affects Black/Indigenous, People of Color (BIPOC) queer, trans, disabled, femme, low-income, survivors, and all other marginalized bodies and communities. With this understanding, we work to intentionally engage these groups when hosting, participating in, or developing events (e.g. workshops or meetings), materials (e.g. courses, syllabi, resources), and software (e.g. the ml5.js library, examples, and related and supporting code).
</p>
<p>
As part of the ml5.js Code of Conduct, we pledge to design, build, and use ml5.js in a way that centers the aforementioned marginalized bodies and communities first, striving to always confront our biases, privileges, and ignorances for our own good and society at large.
In 2021, ml5.js introduced a{' '}
<a href="https://github.com/ml5js/Code-of-Conduct">new and improved Code of Conduct</a> and{' '}
<a href="https://github.com/ml5js/Code-of-Conduct/blob/main/LICENSE.md">
our very own software license
</a>
. These are part of our ongoing work to make machine learning for the web friendlier. Read
more in our blog post{' '}
<a href="https://medium.com/ml5js/a-new-code-of-conduct-and-license-for-ml5-js-6b0e4c109b76">
A New Code of Conduct and License for ml5.js
</a>
.
</p>
<h6>
In practice:
</h6>
<ul>
<li>
We welcome newcomers and prioritize the education of others. We do not assume knowledge or imply there are things that somebody should know. We strive to approach all tasks with the enthusiasm of a newcomer because we believe that newcomers are just as valuable in this effort as experts.
</li>
<li>
We consistently make the effort to actively recognize and validate multiple types of contributions.
</li>
<li>
We work to offer help and guidance when we are able to do so.
</li>
</ul>
<h6>
In times of conflict:
</h6>
<ul>
<li>
We listen.
</li>
<li>
We clearly communicate while acknowledging others’ feelings.
</li>
<li>
We admit when we're wrong, apologize, and accept responsibility for our actions.
</li>
<li>
We are continuously seeking to improve ourselves and the community.
</li>
<li>
We keep the community respectful and open.
</li>
<li>
We make everyone feel heard.
</li>
<li>
We are mindful and kind in our interactions.
</li>
</ul>
<Spacer />

<h2>Acknowledgments</h2>
<p>
ml5.js is supported by the time and dedication of open source developers from all over the world. We are artists, designers, technologists, researchers, educators, students, scientists, developers, parents, children, and everything in-between.
ml5.js welcomes the contributions of open source developers from all over the world. We are
artists, designers, technologists, researchers, educators, students, scientists, developers,
parents, children, and everything in-between.
</p>
<p>
Funding and support is generously provided by a Google Education grant at NYU's ITP/IMA program. Many thanks to BrowserStack for providing testing support.
Funding and support for ml5.js was originally seeded by Google’s Big Picture Research Group
as a collaboration with TensorFlow.js team.
</p>
<p>[Note about support and collaboration with Processing Foundation.]</p>
<p>[Note about support from NYU ITP and NYU IMA Shanghai.]</p>
<p>[ADDITIONAL CURRENT CREDITS AND INFO HERE]</p>
<p>
Website designed with ❤ by Milan Gary, Nicole Lloyd, and Arnab Chakravarty.
Developed using React/Gatsby.js and Netlify by Wenqi Li, Joey Lee, and Dan Shiffman.
Shout out to the OpenMoji Project for glyphs.
The original 2019 ml5.js website was designed with ❤ by Milan Gary, Nicole Lloyd, and Arnab
Chakravarty and developed with React/Gatsby.js and Netlify by Wenqi Li, Joey Lee, and Dan
Shiffman.
</p>
<Spacer />

<h2>Sponsors</h2>
<p>
(Do we need them?)
</p>
<Spacer />

</Layout>
)
}
);
};

export const Head = () => <title>ml5.js | Friendly Machine Learning for the Web</title>
export const Head = () => <title>ml5.js | Friendly Machine Learning for the Web</title>;

export default AboutPage
export default AboutPage;
67 changes: 33 additions & 34 deletions src/pages/community.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,49 @@
import * as React from "react";
import Layout from "../layout/Layout";
import Button from "../components/Button";
import ProjectBox from "../components/ProjectBox";
import TextBox from "../components/TextBox";
import Spacer from "../components/Spacer";
import IframeComponent from "../components/IframeComponent";
import * as React from 'react';
import Layout from '../layout/Layout';
import Button from '../components/Button';
import ProjectBox from '../components/ProjectBox';
import TextBox from '../components/TextBox';
import Spacer from '../components/Spacer';
import IframeComponent from '../components/IframeComponent';
import { graphql } from 'gatsby';

const CommunityPage = ({ data }) => {
// const data = useStaticQuery(query); // unstable,
// const data = useStaticQuery(query); // unstable,
const events = data.allMarkdownRemark.nodes.filter(
node => node.frontmatter.templateKey === 'community-event'
(node) => node.frontmatter.templateKey === 'community-event'
);
const posts = data.allMarkdownRemark.nodes.filter(
node => node.frontmatter.templateKey === 'community-post'
(node) => node.frontmatter.templateKey === 'community-post'
);

const styles = {
postContainer: {
width: "100%",
width: '100%',
// backgroundColor: "cyan",
display: "flex",
flexWrap: "wrap",
justifyContent: "flex-start",
alignItems: "center",
}
}
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'center',
},
};

return (
<Layout>
<IframeComponent />
<h1>Community</h1>
<p>
The ml5.js community page is dedicated to highlighting artists, technologists, makers, activists, thinkers, tinkerers, researchers, scientists, designers, students, and anyone/everyone who are working in and around machine learning in thoughtful ways. Many of these posts not only showcase what is possible with ml5.js but also what can be done when applying machine learning methodologies and technologies more broadly. Special emphasis is given to projects that highlight ethical and critical engagement with technology and/or are simply delightful.
The ml5.js community page is dedicated to highlighting artists, technologists, makers,
activists, thinkers, tinkerers, researchers, scientists, designers, students, and
anyone/everyone who are working in and around machine learning in thoughtful ways. These
posts not only showcase what is possible with ml5.js but also what can be done when applying
machine learning methodologies and technologies more broadly. Special emphasis is given to
projects that highlight ethical and critical engagement with technology and/or are simply
delightful.
</p>
<Spacer height="2rem" />

<h2>Community Events</h2>
<p>
Coming soon!
</p>
<p>Coming soon!</p>
{/* <div style={styles.postContainer}>
{events.map((event) => (
<div key={event.id}>
Expand All @@ -55,9 +59,7 @@ const CommunityPage = ({ data }) => {
<Spacer />

<h2>Featured Projects</h2>
<p>
Coming soon!
</p>
<p>Coming soon!</p>
{/* <div style={styles.postContainer}>
{posts.map((post) => (
// <div key={post.id}></div>
Expand All @@ -71,7 +73,8 @@ const CommunityPage = ({ data }) => {

<h2>Contribute!</h2>
<p>
If you are interested to share your work, highlight an interesting article/video, or get in touch, we'd love to hear from you!
If you are interested to share your work, highlight an interesting article/video, or get in
touch, we'd love to hear from you!
</p>
<Button
children="Submit"
Expand All @@ -83,22 +86,18 @@ const CommunityPage = ({ data }) => {
margin="1.5rem 0"
/>
</Layout>
)
}
);
};

export const Head = () => <title>ml5.js | Friendly Machine Learning for the Web</title>
export const Head = () => <title>ml5.js | Friendly Machine Learning for the Web</title>;

export default CommunityPage;

// GraphQL
export const query = graphql`
query CommunityQuery {
allMarkdownRemark(
filter: {
frontmatter: {
templateKey: { in: ["community-event", "community-post"] }
}
}
filter: { frontmatter: { templateKey: { in: ["community-event", "community-post"] } } }
) {
nodes {
id
Expand All @@ -116,4 +115,4 @@ export const query = graphql`
}
}
}
`
`;
Loading