From 4ccd7cebdc84948e2a69fe7442f9cf594eefff8a Mon Sep 17 00:00:00 2001 From: Melissa Samworth Date: Mon, 14 Oct 2024 14:30:15 -0400 Subject: [PATCH 01/12] illustrations --- app/assets/illustrations/book.svg | 14 ++++++++++++++ app/assets/illustrations/briefcase.svg | 10 ++++++++++ .../illustrations/goverment_building.svg | 14 ++++++++++++++ app/assets/illustrations/hand.svg | 11 +++++++++++ app/assets/illustrations/megaphone.svg | 17 +++++++++++++++++ app/assets/illustrations/microscope.svg | 19 +++++++++++++++++++ app/assets/illustrations/people.svg | 15 +++++++++++++++ app/assets/illustrations/piggy_bank.svg | 10 ++++++++++ app/assets/illustrations/puzzle_pieces.svg | 10 ++++++++++ 9 files changed, 120 insertions(+) create mode 100644 app/assets/illustrations/book.svg create mode 100644 app/assets/illustrations/briefcase.svg create mode 100644 app/assets/illustrations/goverment_building.svg create mode 100644 app/assets/illustrations/hand.svg create mode 100644 app/assets/illustrations/megaphone.svg create mode 100644 app/assets/illustrations/microscope.svg create mode 100644 app/assets/illustrations/people.svg create mode 100644 app/assets/illustrations/piggy_bank.svg create mode 100644 app/assets/illustrations/puzzle_pieces.svg diff --git a/app/assets/illustrations/book.svg b/app/assets/illustrations/book.svg new file mode 100644 index 00000000..b0ffe96c --- /dev/null +++ b/app/assets/illustrations/book.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/app/assets/illustrations/briefcase.svg b/app/assets/illustrations/briefcase.svg new file mode 100644 index 00000000..2aae2808 --- /dev/null +++ b/app/assets/illustrations/briefcase.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/assets/illustrations/goverment_building.svg b/app/assets/illustrations/goverment_building.svg new file mode 100644 index 00000000..e0a61831 --- /dev/null +++ b/app/assets/illustrations/goverment_building.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/app/assets/illustrations/hand.svg b/app/assets/illustrations/hand.svg new file mode 100644 index 00000000..7d596127 --- /dev/null +++ b/app/assets/illustrations/hand.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/assets/illustrations/megaphone.svg b/app/assets/illustrations/megaphone.svg new file mode 100644 index 00000000..961651d8 --- /dev/null +++ b/app/assets/illustrations/megaphone.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/app/assets/illustrations/microscope.svg b/app/assets/illustrations/microscope.svg new file mode 100644 index 00000000..b5a9105b --- /dev/null +++ b/app/assets/illustrations/microscope.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/illustrations/people.svg b/app/assets/illustrations/people.svg new file mode 100644 index 00000000..0e40a4f3 --- /dev/null +++ b/app/assets/illustrations/people.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/assets/illustrations/piggy_bank.svg b/app/assets/illustrations/piggy_bank.svg new file mode 100644 index 00000000..80956ee3 --- /dev/null +++ b/app/assets/illustrations/piggy_bank.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/assets/illustrations/puzzle_pieces.svg b/app/assets/illustrations/puzzle_pieces.svg new file mode 100644 index 00000000..2f9e6506 --- /dev/null +++ b/app/assets/illustrations/puzzle_pieces.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From 2fe3f80073ce30b9ea00e69654e470b16ce00145 Mon Sep 17 00:00:00 2001 From: Myles Date: Mon, 14 Oct 2024 16:07:44 -0400 Subject: [PATCH 02/12] Main how can I help outline setup --- app/components/ButtonOrLink/index.tsx | 32 ++++++++++ app/components/Card/card.css | 55 ++++++++++++++++ app/components/Card/index.tsx | 43 +++++++++++++ app/components/CardSmall/cardsmall.css | 21 +++++++ app/components/CardSmall/index.tsx | 38 +++++++++++ app/components/HelpGrid/helpgrid.css | 11 ++++ app/components/HelpGrid/index.tsx | 62 ++++++++++++++++++ app/components/HowCanIHelp/Career.tsx | 73 ++++++++++++++++++++++ app/components/HowCanIHelp/Community.tsx | 10 +++ app/components/HowCanIHelp/Donate.tsx | 10 +++ app/components/HowCanIHelp/Grassroots.tsx | 10 +++ app/components/HowCanIHelp/Knowledge.tsx | 10 +++ app/components/HowCanIHelp/Volunteer.tsx | 10 +++ app/components/HowCanIHelp/career.css | 17 +++++ app/components/HowCanIHelp/community.css | 0 app/components/HowCanIHelp/donate.css | 0 app/components/HowCanIHelp/grassroots.css | 0 app/components/HowCanIHelp/howcanihelp.css | 5 ++ app/components/HowCanIHelp/index.tsx | 15 +++++ app/components/HowCanIHelp/knowledge.css | 0 app/components/HowCanIHelp/volunteer.css | 0 app/routes/howcanihelp.tsx | 25 ++++++++ app/routes/howcanihelppage.$.tsx | 26 ++++++++ 23 files changed, 473 insertions(+) create mode 100644 app/components/ButtonOrLink/index.tsx create mode 100644 app/components/Card/card.css create mode 100644 app/components/Card/index.tsx create mode 100644 app/components/CardSmall/cardsmall.css create mode 100644 app/components/CardSmall/index.tsx create mode 100644 app/components/HelpGrid/helpgrid.css create mode 100644 app/components/HelpGrid/index.tsx create mode 100644 app/components/HowCanIHelp/Career.tsx create mode 100644 app/components/HowCanIHelp/Community.tsx create mode 100644 app/components/HowCanIHelp/Donate.tsx create mode 100644 app/components/HowCanIHelp/Grassroots.tsx create mode 100644 app/components/HowCanIHelp/Knowledge.tsx create mode 100644 app/components/HowCanIHelp/Volunteer.tsx create mode 100644 app/components/HowCanIHelp/career.css create mode 100644 app/components/HowCanIHelp/community.css create mode 100644 app/components/HowCanIHelp/donate.css create mode 100644 app/components/HowCanIHelp/grassroots.css create mode 100644 app/components/HowCanIHelp/howcanihelp.css create mode 100644 app/components/HowCanIHelp/index.tsx create mode 100644 app/components/HowCanIHelp/knowledge.css create mode 100644 app/components/HowCanIHelp/volunteer.css create mode 100644 app/routes/howcanihelp.tsx create mode 100644 app/routes/howcanihelppage.$.tsx diff --git a/app/components/ButtonOrLink/index.tsx b/app/components/ButtonOrLink/index.tsx new file mode 100644 index 00000000..d00bd283 --- /dev/null +++ b/app/components/ButtonOrLink/index.tsx @@ -0,0 +1,32 @@ +import {ReactNode} from 'react' +import {Link} from '@remix-run/react' + +interface ButtonOrLinkProps { + commonContent: ReactNode + route?: string + onClick?: () => void + className?: string + disabled?: boolean +} + +export default function ButtonOrLink({ + commonContent, + route, + onClick, + className = '', + disabled = false, +}: ButtonOrLinkProps) { + if (onClick) { + return ( + + ) + } + + return ( + + {commonContent} + + ) +} diff --git a/app/components/Card/card.css b/app/components/Card/card.css new file mode 100644 index 00000000..a5af5c8d --- /dev/null +++ b/app/components/Card/card.css @@ -0,0 +1,55 @@ +.card { + height: 328px; + padding: var(--spacing-24); + display: flex; + background-color: var(--colors-cool-grey-100); + border-radius: var(--border-radius); + box-shadow: 0px var(--spacing-16) var(--spacing-40) rgba(175, 183, 194, 0.2); +} + +.card-content { + flex-grow: 1; + display: flex; + flex-direction: column; + padding: var(--spacing-32); +} + +.card-icon { + height: 100%; + background-color: var(--colors-teal-50); + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--border-radius); + width: 30%; + flex-shrink: 0; +} + +.card-impact { + color: var(--colors-teal-500); + height: fit-content; + width: fit-content; + padding-left: 10px; + padding-top: 2px; + padding-bottom: 2px; + padding-right: 10px; + background-color: var(--colors-teal-50); + border-radius: var(--border-radius); +} + +@media (max-width: 780px) { + .card { + flex-direction: column; + height: auto; + } + + .card-icon { + width: 100%; + height: 120px; + margin-bottom: var(--spacing-24); + } + + .card-content { + padding: 0; + } +} diff --git a/app/components/Card/index.tsx b/app/components/Card/index.tsx new file mode 100644 index 00000000..c043b5ea --- /dev/null +++ b/app/components/Card/index.tsx @@ -0,0 +1,43 @@ +import ButtonOrLink from '../ButtonOrLink' +import './card.css' + +interface CardProps { + title: string + description: string + impact: string + icon: string + route?: string + onClick?: () => void + className?: string +} + +export default function Card({ + title, + description, + impact, + icon, + route, + onClick, + className, +}: CardProps) { + className = `card bordered ${className}` + + const commonContent = ( + <> +
{icon}
+
+

{title}

+

{description}

+

{impact}

+
+ + ) + return ( + + ) +} diff --git a/app/components/CardSmall/cardsmall.css b/app/components/CardSmall/cardsmall.css new file mode 100644 index 00000000..fcfd926c --- /dev/null +++ b/app/components/CardSmall/cardsmall.css @@ -0,0 +1,21 @@ +.card-small { + height: 328px; + padding: var(--spacing-24); + display: flex; + flex-direction: column; + background-color: var(--colors-cool-grey-100); + border-radius: var(--border-radius); + box-shadow: 0px var(--spacing-16) var(--spacing-40) rgba(175, 183, 194, 0.2); +} + +.card-small-icon { + width: 100%; + height: 128px; + margin-bottom: var(--spacing-24); + background-color: var(--colors-teal-50); + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--border-radius); + flex-shrink: 0; +} diff --git a/app/components/CardSmall/index.tsx b/app/components/CardSmall/index.tsx new file mode 100644 index 00000000..52a305fa --- /dev/null +++ b/app/components/CardSmall/index.tsx @@ -0,0 +1,38 @@ +import ButtonOrLink from '../ButtonOrLink' +import './cardsmall.css' + +interface CardSmallProps { + title: string + description: string + icon: string + route?: string + onClick?: () => void + className?: string +} + +export default function CardSmall({ + title, + description, + icon, + route, + onClick, + className, +}: CardSmallProps) { + className = `card-small bordered ${className}` + + const commonContent = ( + <> +
{icon}
+

{title}

+

{description}

+ + ) + return ( + + ) +} diff --git a/app/components/HelpGrid/helpgrid.css b/app/components/HelpGrid/helpgrid.css new file mode 100644 index 00000000..bedb78bb --- /dev/null +++ b/app/components/HelpGrid/helpgrid.css @@ -0,0 +1,11 @@ +.help-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-32); +} + +@media (max-width: 780px) { + .help-grid { + grid-template-columns: 1fr; + } +} diff --git a/app/components/HelpGrid/index.tsx b/app/components/HelpGrid/index.tsx new file mode 100644 index 00000000..f0e81975 --- /dev/null +++ b/app/components/HelpGrid/index.tsx @@ -0,0 +1,62 @@ +import './helpgrid.css' +import Card from '../Card' + +const helpItems = [ + { + title: 'Start a career in AI Safety', + description: + 'For both technical and non-technical roles in AI alignment, governance, and field-building', + impact: 'Highest direct impact', + icon: 'briefcase', + route: '/howcanihelppage/career', + }, + { + title: 'Spread the word & grassroots activism', + description: 'For anyone—help us spread the word about this issue', + impact: 'Quickest & most accessible', + icon: 'megaphone', + route: '/howcanihelppage/grassroots', + }, + { + title: 'Donate', + description: + 'The AI safety field is constrained by funding—financial help is critical at this moment', + impact: 'Highest indirect impact', + icon: 'piggy-bank', + route: '/howcanihelppage/donate', + }, + { + title: 'Volunteer', + description: + 'Help us build important AI safety infrastructure—all skill sets and levels of time-commitment are wanted', + impact: 'Best for partial commitment', + icon: 'hand-heart', + route: '/howcanihelppage/volunteer', + }, + { + title: 'Build your knowledge', + description: + 'Learning about AI safety equips you to effectively contribute to discussions and influence its development', + impact: 'Enables impact', + icon: 'book', + route: '/howcanihelppage/knowledge', + }, + { + title: 'Join a community', + description: + 'Joining a community is motivating, and will help guide your efforts to contribute and get involved', + impact: 'Enables impact', + icon: 'people', + route: '/howcanihelppage/community', + }, +] + +export default function HelpGrid() { + return ( +
+ {helpItems.map((item, index) => ( + + ))} +
+ ) +} diff --git a/app/components/HowCanIHelp/Career.tsx b/app/components/HowCanIHelp/Career.tsx new file mode 100644 index 00000000..f34c3760 --- /dev/null +++ b/app/components/HowCanIHelp/Career.tsx @@ -0,0 +1,73 @@ +import CardSmall from '../CardSmall' +import './career.css' + +export default function Career() { + return ( +
+

Start a career

+

There are 3 major career paths in AI safety:

+
+ + + +
+ +

AI alignment research

+
+
+

What

+

+ AI alignment research is the field dedicated to ensuring that advanced artificial + intelligence systems act in ways that are beneficial to humans and aligned with human + values and goals. It involves developing methods and principles to guide AI behavior so + that as these systems become more capable and autonomous, they continue to operate + safely and ethically within the intentions set by their human creators. +

+
+
+

Why this is important

+

+ To ensure humanity benefits from advanced AI and mitigates risks—like unintended + behaviors or misalignment with human values—we must first solve the technical challenge + of AI alignment through dedicated research, and then collaborate globally to carefully + deploy solutions. While experts believe alignment is solvable, it remains a complex + problem that demands significant high-quality intellectual talent. +

+
+
+

Where AI alignment researchers work

+

+ AI alignment researchers typically work at non-profit organizations dedicated to AI + safety and alignment; in academia (i.e. universities and academic institutions); + independently; or on industry safety teams*, usually at major AI companies like OpenAI. +

+

+ *Note: Beware of the risk of joining "safety" teams, as this work often leaks to + non-safety parts of the organization which improves the AI technology itself—and so ends + up causing harm. +

+
+
+

You might be a good fit if...

+

+ You might be a good fit as an AI alignment researcher if you have a quantitative + background, you enjoy programming, or you're skilled at breaking down problems + logically, hypothesizing, and testing various solutions with high attention to detail. +

+
+
+
+ ) +} diff --git a/app/components/HowCanIHelp/Community.tsx b/app/components/HowCanIHelp/Community.tsx new file mode 100644 index 00000000..e6d31e5d --- /dev/null +++ b/app/components/HowCanIHelp/Community.tsx @@ -0,0 +1,10 @@ +import './community.css' + +export default function Community() { + return ( +
+

Join the community

+ {/* Add content for the Community page */} +
+ ) +} diff --git a/app/components/HowCanIHelp/Donate.tsx b/app/components/HowCanIHelp/Donate.tsx new file mode 100644 index 00000000..29e88302 --- /dev/null +++ b/app/components/HowCanIHelp/Donate.tsx @@ -0,0 +1,10 @@ +import './donate.css' + +export default function Donate() { + return ( +
+

Donate to AISafety.info

+ {/* Add content for the Donate page */} +
+ ) +} diff --git a/app/components/HowCanIHelp/Grassroots.tsx b/app/components/HowCanIHelp/Grassroots.tsx new file mode 100644 index 00000000..b15c34fb --- /dev/null +++ b/app/components/HowCanIHelp/Grassroots.tsx @@ -0,0 +1,10 @@ +import './grassroots.css' + +export default function Grassroots() { + return ( +
+

Help with grassroots AI Safety

+ {/* Add content for the Grassroots page */} +
+ ) +} diff --git a/app/components/HowCanIHelp/Knowledge.tsx b/app/components/HowCanIHelp/Knowledge.tsx new file mode 100644 index 00000000..fa5cfbce --- /dev/null +++ b/app/components/HowCanIHelp/Knowledge.tsx @@ -0,0 +1,10 @@ +import './knowledge.css' + +export default function Knowledge() { + return ( +
+

Share knowledge about AI Safety

+ {/* Add content for the Knowledge page */} +
+ ) +} diff --git a/app/components/HowCanIHelp/Volunteer.tsx b/app/components/HowCanIHelp/Volunteer.tsx new file mode 100644 index 00000000..3e390b8b --- /dev/null +++ b/app/components/HowCanIHelp/Volunteer.tsx @@ -0,0 +1,10 @@ +import './volunteer.css' + +export default function Volunteer() { + return ( +
+

Volunteer for AISafety.info

+ {/* Add content for the Volunteer page */} +
+ ) +} diff --git a/app/components/HowCanIHelp/career.css b/app/components/HowCanIHelp/career.css new file mode 100644 index 00000000..b1bdf1e2 --- /dev/null +++ b/app/components/HowCanIHelp/career.css @@ -0,0 +1,17 @@ +.paths-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-32); +} + +.section-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-32); +} + +@media (max-width: 780px) { + .paths-grid { + grid-template-columns: 1fr; + } +} diff --git a/app/components/HowCanIHelp/community.css b/app/components/HowCanIHelp/community.css new file mode 100644 index 00000000..e69de29b diff --git a/app/components/HowCanIHelp/donate.css b/app/components/HowCanIHelp/donate.css new file mode 100644 index 00000000..e69de29b diff --git a/app/components/HowCanIHelp/grassroots.css b/app/components/HowCanIHelp/grassroots.css new file mode 100644 index 00000000..e69de29b diff --git a/app/components/HowCanIHelp/howcanihelp.css b/app/components/HowCanIHelp/howcanihelp.css new file mode 100644 index 00000000..bb6c0e63 --- /dev/null +++ b/app/components/HowCanIHelp/howcanihelp.css @@ -0,0 +1,5 @@ +.howcanihelp-header { + display: flex; + align-items: start; + justify-content: start; +} diff --git a/app/components/HowCanIHelp/index.tsx b/app/components/HowCanIHelp/index.tsx new file mode 100644 index 00000000..37ac8404 --- /dev/null +++ b/app/components/HowCanIHelp/index.tsx @@ -0,0 +1,15 @@ +import Career from './Career' +import Grassroots from './Grassroots' +import Donate from './Donate' +import Volunteer from './Volunteer' +import Knowledge from './Knowledge' +import Community from './Community' + +export const howCanIHelpComponents = { + career: Career, + grassroots: Grassroots, + donate: Donate, + volunteer: Volunteer, + knowledge: Knowledge, + community: Community, +} diff --git a/app/components/HowCanIHelp/knowledge.css b/app/components/HowCanIHelp/knowledge.css new file mode 100644 index 00000000..e69de29b diff --git a/app/components/HowCanIHelp/volunteer.css b/app/components/HowCanIHelp/volunteer.css new file mode 100644 index 00000000..e69de29b diff --git a/app/routes/howcanihelp.tsx b/app/routes/howcanihelp.tsx new file mode 100644 index 00000000..43b358a5 --- /dev/null +++ b/app/routes/howcanihelp.tsx @@ -0,0 +1,25 @@ +import {useEffect} from 'react' +import Page from '~/components/Page' +import HelpGrid from '~/components/HelpGrid' +import '~/components/HowCanIHelp/howcanihelp.css' + +export default function HowCanIHelp() { + useEffect(() => { + document.title = 'How Can I Help? - AISafety.info' + }, []) + + return ( + +
+
+

How can I help with AI Safety?

+

+ The AI safety movement is still relatively new, and your actions could have significant + impact. Here's what you can do: +

+
+ +
+ + ) +} diff --git a/app/routes/howcanihelppage.$.tsx b/app/routes/howcanihelppage.$.tsx new file mode 100644 index 00000000..99628ece --- /dev/null +++ b/app/routes/howcanihelppage.$.tsx @@ -0,0 +1,26 @@ +import {useParams} from '@remix-run/react' +import {useEffect} from 'react' +import Page from '~/components/Page' +import {howCanIHelpComponents} from '~/components/HowCanIHelp' + +export default function HowCanIHelp() { + const {'*': subpage} = useParams() + const Component = howCanIHelpComponents[subpage as keyof typeof howCanIHelpComponents] + + useEffect(() => { + document.title = `How Can I Help: ${subpage} - AISafety.info` + }, [subpage]) + + if (!Component) { + return
Page not found
+ } + + return ( + +
+

How can I help with AI Safety?

+ +
+ + ) +} From 0b7a194e0bb4001733f465e5539dd8f38beaf1a8 Mon Sep 17 00:00:00 2001 From: Myles Date: Mon, 14 Oct 2024 19:05:54 -0400 Subject: [PATCH 03/12] Career page and how can I help components done --- app/assets/{illustrations => icons}/book.svg | 0 .../{illustrations => icons}/briefcase.svg | 0 .../goverment_building.svg | 0 app/assets/{illustrations => icons}/hand.svg | 0 .../{illustrations => icons}/megaphone.svg | 0 .../{illustrations => icons}/microscope.svg | 0 .../people_help_section.svg} | 0 .../{illustrations => icons}/piggy_bank.svg | 0 .../puzzle_pieces.svg | 0 app/components/Card/index.tsx | 7 +- app/components/CardSmall/cardsmall.css | 4 +- app/components/CardSmall/index.tsx | 13 +- app/components/DropDown/dropdown.css | 33 ++ app/components/DropDown/index.tsx | 26 + app/components/HelpGrid/index.tsx | 13 +- app/components/HowCanIHelp/Career.tsx | 492 ++++++++++++++++-- app/components/HowCanIHelp/career.css | 13 +- app/components/HowCanIHelp/howcanihelp.css | 5 +- app/components/LinkCard/index.tsx | 33 ++ app/components/LinkCard/linkcard.css | 34 ++ app/components/icons-generated/Book.tsx | 45 ++ app/components/icons-generated/Briefcase.tsx | 32 ++ .../icons-generated/GovermentBuilding.tsx | 45 ++ app/components/icons-generated/Hand.tsx | 42 ++ app/components/icons-generated/Megaphone.tsx | 62 +++ app/components/icons-generated/Microscope.tsx | 74 +++ .../icons-generated/PeopleHelpSection.tsx | 50 ++ app/components/icons-generated/PiggyBank.tsx | 29 ++ .../icons-generated/PuzzlePieces.tsx | 32 ++ app/components/icons-generated/index.ts | 9 + app/routes/howcanihelppage.$.tsx | 6 +- 31 files changed, 1034 insertions(+), 65 deletions(-) rename app/assets/{illustrations => icons}/book.svg (100%) rename app/assets/{illustrations => icons}/briefcase.svg (100%) rename app/assets/{illustrations => icons}/goverment_building.svg (100%) rename app/assets/{illustrations => icons}/hand.svg (100%) rename app/assets/{illustrations => icons}/megaphone.svg (100%) rename app/assets/{illustrations => icons}/microscope.svg (100%) rename app/assets/{illustrations/people.svg => icons/people_help_section.svg} (100%) rename app/assets/{illustrations => icons}/piggy_bank.svg (100%) rename app/assets/{illustrations => icons}/puzzle_pieces.svg (100%) create mode 100644 app/components/DropDown/dropdown.css create mode 100644 app/components/DropDown/index.tsx create mode 100644 app/components/LinkCard/index.tsx create mode 100644 app/components/LinkCard/linkcard.css create mode 100644 app/components/icons-generated/Book.tsx create mode 100644 app/components/icons-generated/Briefcase.tsx create mode 100644 app/components/icons-generated/GovermentBuilding.tsx create mode 100644 app/components/icons-generated/Hand.tsx create mode 100644 app/components/icons-generated/Megaphone.tsx create mode 100644 app/components/icons-generated/Microscope.tsx create mode 100644 app/components/icons-generated/PeopleHelpSection.tsx create mode 100644 app/components/icons-generated/PiggyBank.tsx create mode 100644 app/components/icons-generated/PuzzlePieces.tsx diff --git a/app/assets/illustrations/book.svg b/app/assets/icons/book.svg similarity index 100% rename from app/assets/illustrations/book.svg rename to app/assets/icons/book.svg diff --git a/app/assets/illustrations/briefcase.svg b/app/assets/icons/briefcase.svg similarity index 100% rename from app/assets/illustrations/briefcase.svg rename to app/assets/icons/briefcase.svg diff --git a/app/assets/illustrations/goverment_building.svg b/app/assets/icons/goverment_building.svg similarity index 100% rename from app/assets/illustrations/goverment_building.svg rename to app/assets/icons/goverment_building.svg diff --git a/app/assets/illustrations/hand.svg b/app/assets/icons/hand.svg similarity index 100% rename from app/assets/illustrations/hand.svg rename to app/assets/icons/hand.svg diff --git a/app/assets/illustrations/megaphone.svg b/app/assets/icons/megaphone.svg similarity index 100% rename from app/assets/illustrations/megaphone.svg rename to app/assets/icons/megaphone.svg diff --git a/app/assets/illustrations/microscope.svg b/app/assets/icons/microscope.svg similarity index 100% rename from app/assets/illustrations/microscope.svg rename to app/assets/icons/microscope.svg diff --git a/app/assets/illustrations/people.svg b/app/assets/icons/people_help_section.svg similarity index 100% rename from app/assets/illustrations/people.svg rename to app/assets/icons/people_help_section.svg diff --git a/app/assets/illustrations/piggy_bank.svg b/app/assets/icons/piggy_bank.svg similarity index 100% rename from app/assets/illustrations/piggy_bank.svg rename to app/assets/icons/piggy_bank.svg diff --git a/app/assets/illustrations/puzzle_pieces.svg b/app/assets/icons/puzzle_pieces.svg similarity index 100% rename from app/assets/illustrations/puzzle_pieces.svg rename to app/assets/icons/puzzle_pieces.svg diff --git a/app/components/Card/index.tsx b/app/components/Card/index.tsx index c043b5ea..9b95f596 100644 --- a/app/components/Card/index.tsx +++ b/app/components/Card/index.tsx @@ -1,3 +1,4 @@ +import {SVGProps} from 'react' import ButtonOrLink from '../ButtonOrLink' import './card.css' @@ -5,7 +6,7 @@ interface CardProps { title: string description: string impact: string - icon: string + icon: (props: SVGProps) => JSX.Element route?: string onClick?: () => void className?: string @@ -24,9 +25,9 @@ export default function Card({ const commonContent = ( <> -
{icon}
+
{icon({})}
-

{title}

+

{title}

{description}

{impact}

diff --git a/app/components/CardSmall/cardsmall.css b/app/components/CardSmall/cardsmall.css index fcfd926c..92086d5a 100644 --- a/app/components/CardSmall/cardsmall.css +++ b/app/components/CardSmall/cardsmall.css @@ -1,5 +1,4 @@ .card-small { - height: 328px; padding: var(--spacing-24); display: flex; flex-direction: column; @@ -10,9 +9,8 @@ .card-small-icon { width: 100%; - height: 128px; + height: 130px; margin-bottom: var(--spacing-24); - background-color: var(--colors-teal-50); display: flex; align-items: center; justify-content: center; diff --git a/app/components/CardSmall/index.tsx b/app/components/CardSmall/index.tsx index 52a305fa..7b5063d7 100644 --- a/app/components/CardSmall/index.tsx +++ b/app/components/CardSmall/index.tsx @@ -1,13 +1,15 @@ +import {SVGProps} from 'react' import ButtonOrLink from '../ButtonOrLink' import './cardsmall.css' interface CardSmallProps { title: string description: string - icon: string + icon: (props: SVGProps) => JSX.Element route?: string onClick?: () => void className?: string + iconColor?: string } export default function CardSmall({ @@ -17,14 +19,17 @@ export default function CardSmall({ route, onClick, className, + iconColor = 'var(--colors-teal-50)', }: CardSmallProps) { className = `card-small bordered ${className}` const commonContent = ( <> -
{icon}
-

{title}

-

{description}

+
+ {icon({})} +
+

{title}

+

{description}

) return ( diff --git a/app/components/DropDown/dropdown.css b/app/components/DropDown/dropdown.css new file mode 100644 index 00000000..425d8093 --- /dev/null +++ b/app/components/DropDown/dropdown.css @@ -0,0 +1,33 @@ +.drop-down { + border-top: 1px solid var(--colors-teal-500); + border-bottom: 1px solid var(--colors-teal-500); +} + +.drop-down-header { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: var(--spacing-32); + padding-bottom: var(--spacing-32); + cursor: pointer; +} + +.drop-down-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out; +} + +.drop-down-content.open { + max-height: 2000px; + padding-bottom: var(--spacing-40); +} + +.drop-down-chevron { + transition: transform 0.3s ease-out; + transform: rotate(90deg); +} + +.rotate-90 { + transform: rotate(-90deg); +} diff --git a/app/components/DropDown/index.tsx b/app/components/DropDown/index.tsx new file mode 100644 index 00000000..3b460626 --- /dev/null +++ b/app/components/DropDown/index.tsx @@ -0,0 +1,26 @@ +import {useState} from 'react' +import './dropdown.css' +import {ChevronRight} from '../icons-generated' + +interface DropDownProps { + title: string + content: JSX.Element +} + +export default function DropDown({title, content}: DropDownProps) { + const [isOpen, setIsOpen] = useState(false) + + return ( +
+
setIsOpen(!isOpen)} className="drop-down-header"> +

{title}

+ +
+
{content}
+
+ ) +} diff --git a/app/components/HelpGrid/index.tsx b/app/components/HelpGrid/index.tsx index f0e81975..da7bebd2 100644 --- a/app/components/HelpGrid/index.tsx +++ b/app/components/HelpGrid/index.tsx @@ -1,5 +1,6 @@ import './helpgrid.css' import Card from '../Card' +import {Briefcase, Megaphone, PiggyBank, Hand, Book, People} from '../icons-generated' const helpItems = [ { @@ -7,14 +8,14 @@ const helpItems = [ description: 'For both technical and non-technical roles in AI alignment, governance, and field-building', impact: 'Highest direct impact', - icon: 'briefcase', + icon: Briefcase, route: '/howcanihelppage/career', }, { title: 'Spread the word & grassroots activism', description: 'For anyone—help us spread the word about this issue', impact: 'Quickest & most accessible', - icon: 'megaphone', + icon: Megaphone, route: '/howcanihelppage/grassroots', }, { @@ -22,7 +23,7 @@ const helpItems = [ description: 'The AI safety field is constrained by funding—financial help is critical at this moment', impact: 'Highest indirect impact', - icon: 'piggy-bank', + icon: PiggyBank, route: '/howcanihelppage/donate', }, { @@ -30,7 +31,7 @@ const helpItems = [ description: 'Help us build important AI safety infrastructure—all skill sets and levels of time-commitment are wanted', impact: 'Best for partial commitment', - icon: 'hand-heart', + icon: Hand, route: '/howcanihelppage/volunteer', }, { @@ -38,7 +39,7 @@ const helpItems = [ description: 'Learning about AI safety equips you to effectively contribute to discussions and influence its development', impact: 'Enables impact', - icon: 'book', + icon: Book, route: '/howcanihelppage/knowledge', }, { @@ -46,7 +47,7 @@ const helpItems = [ description: 'Joining a community is motivating, and will help guide your efforts to contribute and get involved', impact: 'Enables impact', - icon: 'people', + icon: People, route: '/howcanihelppage/community', }, ] diff --git a/app/components/HowCanIHelp/Career.tsx b/app/components/HowCanIHelp/Career.tsx index f34c3760..e2460672 100644 --- a/app/components/HowCanIHelp/Career.tsx +++ b/app/components/HowCanIHelp/Career.tsx @@ -1,71 +1,477 @@ +import Card from '../Card' import CardSmall from '../CardSmall' +import DropDown from '../DropDown' +import {Microscope, GovermentBuilding, PuzzlePieces} from '../icons-generated' +import LinkCard from '../LinkCard' import './career.css' export default function Career() { return (

Start a career

-

There are 3 major career paths in AI safety:

+

There are 3 major career paths in AI safety:

- -

AI alignment research

-
-
-

What

-

- AI alignment research is the field dedicated to ensuring that advanced artificial - intelligence systems act in ways that are beneficial to humans and aligned with human - values and goals. It involves developing methods and principles to guide AI behavior so - that as these systems become more capable and autonomous, they continue to operate - safely and ethically within the intentions set by their human creators. -

+
+

AI alignment research

+
+
+

What

+

+ AI alignment research is the field dedicated to ensuring that advanced artificial + intelligence systems act in ways that are beneficial to humans and aligned with human + values and goals. It involves developing methods and principles to guide AI behavior + so that as these systems become more capable and autonomous, they continue to operate + safely and ethically within the intentions set by their human creators. +

+
+
+

Why this is important

+

+ To ensure humanity benefits from advanced AI and mitigates risks—like unintended + behaviors or misalignment with human values—we must first solve the technical + challenge of AI alignment through dedicated research, and then collaborate globally to + carefully deploy solutions. While experts believe alignment is solvable, it remains a + complex problem that demands significant high-quality intellectual talent. +

+
+
+

Where AI alignment researchers work

+

+ AI alignment researchers typically work at non-profit organizations dedicated to AI + safety and alignment; in academia (i.e. universities and academic institutions); + independently; or on industry safety teams*, usually at major AI companies like + OpenAI. +

+

+ *Note: Beware of the risk of joining "safety" teams, as this work often leaks to + non-safety parts of the organization which improves the AI technology itself—and so + ends up causing harm. +

+
+
+

You might be a good fit if...

+

+ You might be a good fit as an AI alignment researcher if you have a quantitative + background, you enjoy programming, or you're skilled at breaking down problems + logically, hypothesizing, and testing various solutions with high attention to detail. +

+
-
-

Why this is important

-

- To ensure humanity benefits from advanced AI and mitigates risks—like unintended - behaviors or misalignment with human values—we must first solve the technical challenge - of AI alignment through dedicated research, and then collaborate globally to carefully - deploy solutions. While experts believe alignment is solvable, it remains a complex - problem that demands significant high-quality intellectual talent. +

+
+
+

Interested in pursuing this career path?

+

+ Take the following steps to (1) learn more & further assess your fit; (2) learn how to + make the transition

-
-

Where AI alignment researchers work

-

- AI alignment researchers typically work at non-profit organizations dedicated to AI - safety and alignment; in academia (i.e. universities and academic institutions); - independently; or on industry safety teams*, usually at major AI companies like OpenAI. -

-

- *Note: Beware of the risk of joining "safety" teams, as this work often leaks to - non-safety parts of the organization which improves the AI technology itself—and so ends - up causing harm. -

+
+
+

+ Read the 80,000 Hours Technical AI Safety Career Review +

+

+

The review takes about one hour and addresses:

+
    +
  • What this career path involves
    • +
  • How to predict your fit
    • +
  • The upsides and downsides of this career path
    • +
  • Compensation
    • +
  • How to enter or transition into this career
    • +
+

+
+
-
-

You might be a good fit if...

-

- You might be a good fit as an AI alignment researcher if you have a quantitative - background, you enjoy programming, or you're skilled at breaking down problems - logically, hypothesizing, and testing various solutions with high attention to detail. -

+
+
+

+ Sign up for 1-on-1 career advice with AI Safety Quest & 80,000 Hours (free) +

+

+ Schedule a 30-minute or 1-hour video call—we recommend booking both! These calls will + address your specific questions about the field, confirm your interest and fit, and + provide tailored recommendations to help you make the transition. +

+

+ Note: 80,000 Hours does not accept all applicants. +

+
+
+ +
+ +
+
+
+
+

+ A process note: Form your own understanding of the AI alignment technical challenge +

+

+ AI safety is a relatively new field with diverse opinions on how best to solve the + technical challenge of AI alignment. Many unexplored avenues and important questions + likely remain unaddressed. Therefore, it's crucial for (aspiring) AI alignment + researchers to think independently and develop their own models on this topic. If you + pursue a career in this field, we recommend deeply educating yourself on the technical + challenge of alignment, engaging with other AI safety experts, and thinking critically + about the topic and current paradigms. +

+
+
+ +
+ +
+
+
+
+ +
+

+ There are many roles that support the work of AI alignment researchers, and having + high-performing people in these roles is crucial. In a research organisation + around half of the staff will be doing other tasks essential for the organisation + to perform at its best and have an impact. Some of these roles include: +

+
+
+
+

+ Operations management at an AI safety research organization +

+

+ This involves overseeing the day-to-day activities that enable the organization + to function efficiently and effectively. Responsibilities may include + administrative support, resource allocation, HR, management of facilities, IT + support, project coordination, etc. +

+
+
+ +
+
+
+
+

+ Research management AI safety research organization +

+

+ This involves overseeing and coordinating research activities to ensure they + align with the mission of promoting safe AI development. Responsibilities + include setting research priorities, managing teams, allocating resources, + fostering collaboration, monitoring progress, and upholding ethical standards. +

+
+
+ +
+
+
+
+

+ Being an executive assistant to an AI safety researcher +

+

+ This involves managing administrative tasks to enhance this person’s + productivity. Responsibilities include scheduling meetings, handling + correspondence, coordinating travel, organizing events, and ensuring they can + focus on impactful AI safety efforts. +

+
+
+ +
+
+
+ } + /> +
+
+

AI governance & policy

+
+
+

What

+

+ AI alignment research is the field dedicated to ensuring that advanced artificial + intelligence systems act in ways that are beneficial to humans and aligned with human + values and goals. It involves developing methods and principles to guide AI behavior + so that as these systems become more capable and autonomous, they continue to operate + safely and ethically within the intentions set by their human creators. +

+
+
+

Why this is important

+

+ To ensure humanity benefits from advanced AI and mitigates risks—like unintended + behaviors or misalignment with human values—we must first solve the technical + challenge of AI alignment through dedicated research, and then collaborate globally to + carefully deploy solutions. While experts believe alignment is solvable, it remains a + complex problem that demands significant high-quality intellectual talent. +

+
+
+

Where AI alignment researchers work

+

+ AI alignment researchers typically work at non-profit organizations dedicated to AI + safety and alignment; in academia (i.e. universities and academic institutions); + independently; or on industry safety teams*, usually at major AI companies like + OpenAI. +

+
+
+

You might be a good fit if...

+

+ You might be a good fit as an AI alignment researcher if you have a quantitative + background, you enjoy programming, or you're skilled at breaking down problems + logically, hypothesizing, and testing various solutions with high attention to detail. +

+
+
+
+
+

AI safety field-building

+
+
+

What

+

+ AI alignment research is the field dedicated to ensuring that advanced artificial + intelligence systems act in ways that are beneficial to humans and aligned with human + values and goals. It involves developing methods and principles to guide AI behavior + so that as these systems become more capable and autonomous, they continue to operate + safely and ethically within the intentions set by their human creators. +

+
+
+

Why this is important

+

+ To ensure humanity benefits from advanced AI and mitigates risks—like unintended + behaviors or misalignment with human values—we must first solve the technical + challenge of AI alignment through dedicated research, and then collaborate globally to + carefully deploy solutions. While experts believe alignment is solvable, it remains a + complex problem that demands significant high-quality intellectual talent. +

+
+
+

You might be a good fit if...

+

+ You might be a good fit as an AI alignment researcher if you have a quantitative + background, you enjoy programming, or you're skilled at breaking down problems + logically, hypothesizing, and testing various solutions with high attention to detail. +

+
+
+
+
+

Most common field-building roles

+
+
+

Communications & advocacy

+

+ Communications involves educating the public or spreading the word about AI + safety—most typically through websites or social media. People with computer skills + and creative skills can typically find a place within communications. More + specifically, roles could include being an independent content producer, software + engineering, project management, or design. +

+
+
+ +
+
+
+
+

Being a grantmaker

+

+ There are many philanthropists interested in donating millions of dollars to AI + safety—but there currently aren’t enough grantmakers able to vet funding proposals. + Because a randomly chosen proposal has little expected impact, grantmakers can have a + large impact by helping philanthropists distinguish promising projects in AI safety + from less promising ones. +

+
+
+ +
+
+
+
+

Founding new projects

+

+ Founding a new project in AI safety involves identifying a gap in a pressing problem + area, formulating a solution, investigating it, and then helping to build an + organisation by investing in strategy, hiring, management, culture, and so on—ideally + building something that can continue without you. +

+
+
+ +
+
+
+
+ +
+

Supporting roles

+
+

+ There are many roles that support the work of AI alignment researchers, and + having high-performing people in these roles is crucial. In a research + organisation around half of the staff will be doing other tasks essential for + the organisation to perform at its best and have an impact. Some of these roles + include: +

+
+
+
+

+ Operations management at an AI safety research organization +

+

+ This involves overseeing the day-to-day activities that enable the + organization to function efficiently and effectively. Responsibilities may + include administrative support, resource allocation, HR, management of + facilities, IT support, project coordination, etc. +

+
+
+ +
+
+
+
+

+ Research management AI safety research organization +

+

+ This involves overseeing and coordinating research activities to ensure they + align with the mission of promoting safe AI development. Responsibilities + include setting research priorities, managing teams, allocating resources, + fostering collaboration, monitoring progress, and upholding ethical standards. +

+
+
+ +
+
+
+
+

+ Being an executive assistant to an AI safety researcher +

+

+ This involves managing administrative tasks to enhance this person’s + productivity. Responsibilities include scheduling meetings, handling + correspondence, coordinating travel, organizing events, and ensuring they can + focus on impactful AI safety efforts. +

+
+
+ +
+
+
+
+

Other technical roles

+
+
+

+ Working in information security to protect AI (or the results of key + experiments) from misuse, theft, or tampering +

+

+ Lorem ipsum dolor sit amet consectetur. Sapien ullamcorper morbi habitasse + justo magna. Suspendisse nunc id lacus sit interdum sit. +

+
+
+ +
+
+
+
+

+ Becoming an expert in AI hardware as a way of steering AI progress in safer + directions +

+

+ Lorem ipsum dolor sit amet consectetur. Sapien ullamcorper morbi habitasse + justo magna. Suspendisse nunc id lacus sit interdum sit. +

+
+
+ +
+
+
+
+ } + /> +
+
+

+ Multiply your impact:
Support your career pursuit +

+
+ + +
+

Or, explore more ways to help directly

+
+ + +
diff --git a/app/components/HowCanIHelp/career.css b/app/components/HowCanIHelp/career.css index b1bdf1e2..75329367 100644 --- a/app/components/HowCanIHelp/career.css +++ b/app/components/HowCanIHelp/career.css @@ -7,7 +7,18 @@ .section-grid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: var(--spacing-32); + gap: 40px 64px; +} + +.section-split { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-40); +} + +.help-footer { + border-top: 1px solid var(--colors-cool-grey-200); + padding-top: var(--spacing-80); } @media (max-width: 780px) { diff --git a/app/components/HowCanIHelp/howcanihelp.css b/app/components/HowCanIHelp/howcanihelp.css index bb6c0e63..bd33e04b 100644 --- a/app/components/HowCanIHelp/howcanihelp.css +++ b/app/components/HowCanIHelp/howcanihelp.css @@ -1,5 +1,4 @@ .howcanihelp-header { - display: flex; - align-items: start; - justify-content: start; + display: grid; + grid-template-columns: repeat(2, 1fr); } diff --git a/app/components/LinkCard/index.tsx b/app/components/LinkCard/index.tsx new file mode 100644 index 00000000..6aab51d8 --- /dev/null +++ b/app/components/LinkCard/index.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import './linkcard.css' +import {ArrowUpRight} from '../icons-generated' +import ButtonOrLink from '../ButtonOrLink' +interface LinkCardProps { + title: string + tag?: string + route?: string + onClick?: () => void + className?: string +} + +const LinkCard: React.FC = ({title, tag, route, onClick, className}) => { + className = `link-card ${className}` + const commonContent = ( + <> + {tag &&
{tag}
} +

{title}

+ + + ) + + return ( + + ) +} + +export default LinkCard diff --git a/app/components/LinkCard/linkcard.css b/app/components/LinkCard/linkcard.css new file mode 100644 index 00000000..e1aac14c --- /dev/null +++ b/app/components/LinkCard/linkcard.css @@ -0,0 +1,34 @@ +.link-card { + min-height: 100px; + height: fit-content; + display: flex; + flex-direction: column; + justify-content: center; + background-color: #ffffff; + border: 1px solid #e0e0e0; + border-radius: var(--spacing-8); + padding: var(--spacing-16); + position: relative; + cursor: pointer; + transition: box-shadow 0.3s ease; +} + +.link-card:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.link-card .tag { + background-color: var(--colors-teal-50); + height: fit-content; + width: fit-content; + padding-left: var(--spacing-8); + padding-right: var(--spacing-8); + border-radius: var(--spacing-4); + margin-bottom: var(--spacing-8); +} + +.link-card .arrow { + position: absolute; + top: var(--spacing-8); + right: var(--spacing-8); +} diff --git a/app/components/icons-generated/Book.tsx b/app/components/icons-generated/Book.tsx new file mode 100644 index 00000000..49ad58da --- /dev/null +++ b/app/components/icons-generated/Book.tsx @@ -0,0 +1,45 @@ +import type {SVGProps} from 'react' +const SvgBook = (props: SVGProps) => ( + + + + + + + + + + + + + + +) +export default SvgBook diff --git a/app/components/icons-generated/Briefcase.tsx b/app/components/icons-generated/Briefcase.tsx new file mode 100644 index 00000000..386ea91b --- /dev/null +++ b/app/components/icons-generated/Briefcase.tsx @@ -0,0 +1,32 @@ +import type {SVGProps} from 'react' +const SvgBriefcase = (props: SVGProps) => ( + + + + + + + + + + +) +export default SvgBriefcase diff --git a/app/components/icons-generated/GovermentBuilding.tsx b/app/components/icons-generated/GovermentBuilding.tsx new file mode 100644 index 00000000..53b89ecb --- /dev/null +++ b/app/components/icons-generated/GovermentBuilding.tsx @@ -0,0 +1,45 @@ +import type {SVGProps} from 'react' +const SvgGovermentBuilding = (props: SVGProps) => ( + + + + + + + + + + + + + + +) +export default SvgGovermentBuilding diff --git a/app/components/icons-generated/Hand.tsx b/app/components/icons-generated/Hand.tsx new file mode 100644 index 00000000..ca30e1ee --- /dev/null +++ b/app/components/icons-generated/Hand.tsx @@ -0,0 +1,42 @@ +import type {SVGProps} from 'react' +const SvgHand = (props: SVGProps) => ( + + + + + + + + + + + +) +export default SvgHand diff --git a/app/components/icons-generated/Megaphone.tsx b/app/components/icons-generated/Megaphone.tsx new file mode 100644 index 00000000..519cc1ba --- /dev/null +++ b/app/components/icons-generated/Megaphone.tsx @@ -0,0 +1,62 @@ +import type {SVGProps} from 'react' +const SvgMegaphone = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + +) +export default SvgMegaphone diff --git a/app/components/icons-generated/Microscope.tsx b/app/components/icons-generated/Microscope.tsx new file mode 100644 index 00000000..0656e6cd --- /dev/null +++ b/app/components/icons-generated/Microscope.tsx @@ -0,0 +1,74 @@ +import type {SVGProps} from 'react' +const SvgMicroscope = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + +) +export default SvgMicroscope diff --git a/app/components/icons-generated/PeopleHelpSection.tsx b/app/components/icons-generated/PeopleHelpSection.tsx new file mode 100644 index 00000000..2d61396a --- /dev/null +++ b/app/components/icons-generated/PeopleHelpSection.tsx @@ -0,0 +1,50 @@ +import type {SVGProps} from 'react' +const SvgPeopleHelpSection = (props: SVGProps) => ( + + + + + + + + + + + + + + + +) +export default SvgPeopleHelpSection diff --git a/app/components/icons-generated/PiggyBank.tsx b/app/components/icons-generated/PiggyBank.tsx new file mode 100644 index 00000000..3a6eb566 --- /dev/null +++ b/app/components/icons-generated/PiggyBank.tsx @@ -0,0 +1,29 @@ +import type {SVGProps} from 'react' +const SvgPiggyBank = (props: SVGProps) => ( + + + + + + + + + + +) +export default SvgPiggyBank diff --git a/app/components/icons-generated/PuzzlePieces.tsx b/app/components/icons-generated/PuzzlePieces.tsx new file mode 100644 index 00000000..d69eaefe --- /dev/null +++ b/app/components/icons-generated/PuzzlePieces.tsx @@ -0,0 +1,32 @@ +import type {SVGProps} from 'react' +const SvgPuzzlePieces = (props: SVGProps) => ( + + + + + + + + + + +) +export default SvgPuzzlePieces diff --git a/app/components/icons-generated/index.ts b/app/components/icons-generated/index.ts index 51d2f9a6..16b173a9 100644 --- a/app/components/icons-generated/index.ts +++ b/app/components/icons-generated/index.ts @@ -5,10 +5,12 @@ export {default as ArrowRight} from './ArrowRight' export {default as ArrowUpRight} from './ArrowUpRight' export {default as Arrow} from './Arrow' export {default as BookCircle} from './BookCircle' +export {default as Book} from './Book' export {default as BotSmall} from './BotSmall' export {default as Bot} from './Bot' export {default as BottomEclipse} from './BottomEclipse' export {default as BoxArrow} from './BoxArrow' +export {default as Briefcase} from './Briefcase' export {default as CarrotLarge} from './CarrotLarge' export {default as Chatbot} from './Chatbot' export {default as ChevronRight} from './ChevronRight' @@ -27,8 +29,10 @@ export {default as Exclamation} from './Exclamation' export {default as Flag} from './Flag' export {default as Followup} from './Followup' export {default as GetInvolvedMobile} from './GetInvolvedMobile' +export {default as GovermentBuilding} from './GovermentBuilding' export {default as Group} from './Group' export {default as GroupTopEcplise} from './GroupTopEcplise' +export {default as Hand} from './Hand' export {default as Hide} from './Hide' export {default as IntroMobile} from './IntroMobile' export {default as Like} from './Like' @@ -38,13 +42,18 @@ export {default as ListLarge} from './ListLarge' export {default as MagnifyingGlass} from './MagnifyingGlass' export {default as MagnifyingLarge} from './MagnifyingLarge' export {default as Magnifying} from './Magnifying' +export {default as Megaphone} from './Megaphone' +export {default as Microscope} from './Microscope' export {default as OpenBook} from './OpenBook' export {default as Paper} from './Paper' export {default as Pencil} from './Pencil' export {default as People} from './People' +export {default as PeopleHelpSection} from './PeopleHelpSection' export {default as PersonInCircle} from './PersonInCircle' export {default as Person} from './Person' +export {default as PiggyBank} from './PiggyBank' export {default as PlaneSend} from './PlaneSend' +export {default as PuzzlePieces} from './PuzzlePieces' export {default as QuestionMark} from './QuestionMark' export {default as Search} from './Search' export {default as Settings} from './Settings' diff --git a/app/routes/howcanihelppage.$.tsx b/app/routes/howcanihelppage.$.tsx index 99628ece..8d742956 100644 --- a/app/routes/howcanihelppage.$.tsx +++ b/app/routes/howcanihelppage.$.tsx @@ -1,4 +1,4 @@ -import {useParams} from '@remix-run/react' +import {Link, useParams} from '@remix-run/react' import {useEffect} from 'react' import Page from '~/components/Page' import {howCanIHelpComponents} from '~/components/HowCanIHelp' @@ -18,7 +18,9 @@ export default function HowCanIHelp() { return (
-

How can I help with AI Safety?

+
+ How can I help with AI Safety? +
From ba5211ca0da4500659cf14e3d0b5b14c3bc70652 Mon Sep 17 00:00:00 2001 From: Myles Date: Mon, 14 Oct 2024 19:53:10 -0400 Subject: [PATCH 04/12] linting --- app/components/HowCanIHelp/Career.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/components/HowCanIHelp/Career.tsx b/app/components/HowCanIHelp/Career.tsx index e2460672..cdfac081 100644 --- a/app/components/HowCanIHelp/Career.tsx +++ b/app/components/HowCanIHelp/Career.tsx @@ -14,7 +14,7 @@ export default function Career() {

- Working in information security to protect AI (or the results of key + Working in information security to protect AI (or the results of key experiments) from misuse, theft, or tampering

@@ -417,7 +417,7 @@ export default function Career() {

- Becoming an expert in AI hardware as a way of steering AI progress in safer + Becoming an expert in AI hardware as a way of steering AI progress in safer directions

@@ -426,7 +426,7 @@ export default function Career() {

- +
@@ -462,7 +462,7 @@ export default function Career() { /> From e1d44f5c9fe8a3cf4f2f3bc388e0d246c42af15e Mon Sep 17 00:00:00 2001 From: Olivier Coutu Date: Tue, 15 Oct 2024 01:08:39 -0400 Subject: [PATCH 05/12] First draft of Knowledge.tsx --- app/components/HowCanIHelp/Knowledge.tsx | 239 ++++++++++++++++++++++- 1 file changed, 237 insertions(+), 2 deletions(-) diff --git a/app/components/HowCanIHelp/Knowledge.tsx b/app/components/HowCanIHelp/Knowledge.tsx index fa5cfbce..51c494d1 100644 --- a/app/components/HowCanIHelp/Knowledge.tsx +++ b/app/components/HowCanIHelp/Knowledge.tsx @@ -1,10 +1,245 @@ +import Card from '../Card' +import CardSmall from '../CardSmall' +import DropDown from '../DropDown' +import {Microscope, GovermentBuilding, PuzzlePieces} from '../icons-generated' +import LinkCard from '../LinkCard' import './knowledge.css' export default function Knowledge() { return (
-

Share knowledge about AI Safety

- {/* Add content for the Knowledge page */} +

Build your knowledge

+

If you're somewhat new to AI safety, we recommend an introductory overview

+ +
+
+
+

Browse our introductory content

+

+ Our website’s “Intro to AI Safety” micro-course includes several short readings that act as a + comprehensive introduction the topic of AI safety. +

+

+ Our Intro to AI Safety video playlist illustrates many of the most important points about AI safety + in a way that is entertaining and easy to understand. +

+
+
+ + +

+ TODO Intro to AI Safety video playlist +

+
+
+ +
+
+
+
+

Listen to an introductory podcast episode (or a few)

+

+ We recommend Dwarkesh Patel’s interview with Paul Christiano, a leading researcher in AI alignment and safety. + The interview provides an introduction to AI risk and discusses many important AI safety concepts. +

+
+
+ + +

+ Browse our full list of podcasts (TODO link) +

+
+
+
+
+ +
+

I love books!

+
+

+ TODO I love books I'm a nerd + Melissa, what do we want to put in the modal, why not just link to this? + https://aisafety.info/questions/8159/What-are-some-good-books-about-AI-safety +

+
+ +
+
+

+ Lorem ipsum +

+

+ Lorem ipsum +

+
+
+
+
+ } + /> + {/* TODO How do I avoid the double dividor line? */} + +
+

I love books!

+
+

+ TODO idk what goes here +

+
+ +
+
+

+ Lorem ipsum +

+

+ Lorem ipsum +

+
+
+
+
+ } + /> +
+ +

If you want to dive deeper

+
+
+
+

Take an online course

+

+ We recommend taking an online course if your interests have narrowed to a specific subset of + AI safety, such as AI alignment research or AI governance. +

+

+ The AI Safety Fundamentals (AISF) Governance Course, for example, is especially suited + for policymakers and similar stakeholders interested in AI governance mechanisms. + It explores policy levers for steering the future of AI development. +

+

+ The AISF Alignment Course is especially suited for people with a technical background + interested in AI alignment research. It explores research agendas for aligning AI systems with human interests. +

+

+ Note: If you take the AISF courses, consider exploring additional views on AI safety to help avoid homogeneity + in the field, such as The Most Important Century blog post series. +

+

+ Note: AISF courses do not accept all applicants, but we still recommend taking + the courses through self-study if your application is unsuccessful. +

+
+
+ + + + +

+ Browse our full list of courses (TODO fix link) +

+
+
+ +
+
+
+

Get into Lesswrong and its subset, the Alignment Forum

+

+ Most people who are really into AI existential safety ultimately end up in this online, + forum-based community which fosters high-quality discussions about AI safety research and governance. +

+
+
+ + + +
+
+
+ +
+
+
+

Sign up for events

+

+ Events, typically conferences and talks, are often held in person and last one to three days. +

+

+ We've highlighted EAGx, an Effective Altruism conference dedicated to networking and learning + about important global issues, with a strong focus on AI safety. Several EAGx's are held + annually in various major cities across the world. +

+
+
+ +

+ Or browse our full list of events (TODO fix link) +

+
+ +
+
+ +
+
+
+

Sign up for fellowships

+

+ AI safety fellowships typically last one to three weeks and are offered both online and in person. + They focus on developing safe and ethical AI practices through research, + mentorship, and collaboration on innovative solutions. +

+
+

+ Browse our Full list of fellowships (TODO fix link) +

+
+
+
+ +

Our articles on building your knowledge

+

TODO

+ +

Boost your learning efforts: Join a community

+

TODO

+ +

Once you’re educated, here are some ways to help directly

+ +
+
+ + +
+
+ + +
+
+

TODO: Fix the grid

) } From 53224c7155737d560a819d486ef08478965e8597 Mon Sep 17 00:00:00 2001 From: Bryce Robertson Date: Tue, 15 Oct 2024 11:35:48 -0300 Subject: [PATCH 06/12] Improved copy --- app/routes/howcanihelp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/routes/howcanihelp.tsx b/app/routes/howcanihelp.tsx index 43b358a5..e904ad1d 100644 --- a/app/routes/howcanihelp.tsx +++ b/app/routes/howcanihelp.tsx @@ -14,8 +14,8 @@ export default function HowCanIHelp() {

How can I help with AI Safety?

- The AI safety movement is still relatively new, and your actions could have significant - impact. Here's what you can do: + The AI movement is still relatively new, and your actions could have significant impact. + Here's what you can do:

From 9cb67d9e0c1ae79d18eb0267196e5d3b6298768d Mon Sep 17 00:00:00 2001 From: Bryce Robertson Date: Tue, 15 Oct 2024 11:41:31 -0300 Subject: [PATCH 07/12] Revert "Improved copy" This reverts commit 53224c7155737d560a819d486ef08478965e8597. --- app/routes/howcanihelp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/routes/howcanihelp.tsx b/app/routes/howcanihelp.tsx index e904ad1d..43b358a5 100644 --- a/app/routes/howcanihelp.tsx +++ b/app/routes/howcanihelp.tsx @@ -14,8 +14,8 @@ export default function HowCanIHelp() {

How can I help with AI Safety?

- The AI movement is still relatively new, and your actions could have significant impact. - Here's what you can do: + The AI safety movement is still relatively new, and your actions could have significant + impact. Here's what you can do:

From ebeb457f1667e34ddf664fa5bdb7b0e1980034e1 Mon Sep 17 00:00:00 2001 From: Myles Date: Tue, 15 Oct 2024 13:14:37 -0400 Subject: [PATCH 08/12] fixes --- app/components/ButtonOrLink/index.tsx | 32 ------------- app/components/Card/index.tsx | 29 +++-------- app/components/CardSmall/cardsmall.css | 1 + app/components/CardSmall/index.tsx | 22 +++------ app/components/DropDown/dropdown.css | 3 ++ app/components/DropDown/index.tsx | 4 +- app/components/HelpGrid/index.tsx | 12 ++--- app/components/HowCanIHelp/Career.tsx | 48 +++++++++++-------- app/components/HowCanIHelp/Community.tsx | 2 +- app/components/HowCanIHelp/Donate.tsx | 2 +- app/components/HowCanIHelp/Grassroots.tsx | 2 +- app/components/HowCanIHelp/Knowledge.tsx | 2 +- app/components/HowCanIHelp/Volunteer.tsx | 2 +- app/components/HowCanIHelp/career.css | 28 ----------- app/components/HowCanIHelp/community.css | 0 app/components/HowCanIHelp/donate.css | 0 app/components/HowCanIHelp/grassroots.css | 0 app/components/HowCanIHelp/howcanihelp.css | 29 +++++++++++ app/components/HowCanIHelp/knowledge.css | 0 app/components/HowCanIHelp/volunteer.css | 0 app/components/LinkCard/index.tsx | 24 ++++------ app/components/LinkCard/linkcard.css | 3 ++ ...nihelppage.$.tsx => howcanihelp.$page.tsx} | 14 +++--- ...howcanihelp.tsx => howcanihelp._index.tsx} | 10 ++-- 24 files changed, 109 insertions(+), 160 deletions(-) delete mode 100644 app/components/ButtonOrLink/index.tsx delete mode 100644 app/components/HowCanIHelp/career.css delete mode 100644 app/components/HowCanIHelp/community.css delete mode 100644 app/components/HowCanIHelp/donate.css delete mode 100644 app/components/HowCanIHelp/grassroots.css delete mode 100644 app/components/HowCanIHelp/knowledge.css delete mode 100644 app/components/HowCanIHelp/volunteer.css rename app/routes/{howcanihelppage.$.tsx => howcanihelp.$page.tsx} (65%) rename app/routes/{howcanihelp.tsx => howcanihelp._index.tsx} (82%) diff --git a/app/components/ButtonOrLink/index.tsx b/app/components/ButtonOrLink/index.tsx deleted file mode 100644 index d00bd283..00000000 --- a/app/components/ButtonOrLink/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import {ReactNode} from 'react' -import {Link} from '@remix-run/react' - -interface ButtonOrLinkProps { - commonContent: ReactNode - route?: string - onClick?: () => void - className?: string - disabled?: boolean -} - -export default function ButtonOrLink({ - commonContent, - route, - onClick, - className = '', - disabled = false, -}: ButtonOrLinkProps) { - if (onClick) { - return ( - - ) - } - - return ( - - {commonContent} - - ) -} diff --git a/app/components/Card/index.tsx b/app/components/Card/index.tsx index 9b95f596..729b5fb7 100644 --- a/app/components/Card/index.tsx +++ b/app/components/Card/index.tsx @@ -1,5 +1,5 @@ import {SVGProps} from 'react' -import ButtonOrLink from '../ButtonOrLink' +import Button from '../Button' import './card.css' interface CardProps { @@ -7,38 +7,21 @@ interface CardProps { description: string impact: string icon: (props: SVGProps) => JSX.Element - route?: string - onClick?: () => void + action: string className?: string } -export default function Card({ - title, - description, - impact, - icon, - route, - onClick, - className, -}: CardProps) { +export default function Card({title, description, impact, icon, action, className}: CardProps) { className = `card bordered ${className}` - const commonContent = ( - <> + return ( + ) } diff --git a/app/components/CardSmall/cardsmall.css b/app/components/CardSmall/cardsmall.css index 92086d5a..a2e02f95 100644 --- a/app/components/CardSmall/cardsmall.css +++ b/app/components/CardSmall/cardsmall.css @@ -1,5 +1,6 @@ .card-small { padding: var(--spacing-24); + align-items: start; display: flex; flex-direction: column; background-color: var(--colors-cool-grey-100); diff --git a/app/components/CardSmall/index.tsx b/app/components/CardSmall/index.tsx index 7b5063d7..7c89dddb 100644 --- a/app/components/CardSmall/index.tsx +++ b/app/components/CardSmall/index.tsx @@ -1,13 +1,12 @@ import {SVGProps} from 'react' -import ButtonOrLink from '../ButtonOrLink' import './cardsmall.css' +import Button from '../Button' interface CardSmallProps { title: string description: string icon: (props: SVGProps) => JSX.Element - route?: string - onClick?: () => void + action: string className?: string iconColor?: string } @@ -16,28 +15,19 @@ export default function CardSmall({ title, description, icon, - route, - onClick, + action, className, iconColor = 'var(--colors-teal-50)', }: CardSmallProps) { className = `card-small bordered ${className}` - const commonContent = ( - <> + return ( + ) } diff --git a/app/components/DropDown/dropdown.css b/app/components/DropDown/dropdown.css index 425d8093..76560d8c 100644 --- a/app/components/DropDown/dropdown.css +++ b/app/components/DropDown/dropdown.css @@ -10,6 +10,9 @@ padding-top: var(--spacing-32); padding-bottom: var(--spacing-32); cursor: pointer; + border: none; + background: none; + width: 100%; } .drop-down-content { diff --git a/app/components/DropDown/index.tsx b/app/components/DropDown/index.tsx index 3b460626..01595987 100644 --- a/app/components/DropDown/index.tsx +++ b/app/components/DropDown/index.tsx @@ -12,14 +12,14 @@ export default function DropDown({title, content}: DropDownProps) { return (
-
setIsOpen(!isOpen)} className="drop-down-header"> +
+
{content}
) diff --git a/app/components/HelpGrid/index.tsx b/app/components/HelpGrid/index.tsx index da7bebd2..b854acd3 100644 --- a/app/components/HelpGrid/index.tsx +++ b/app/components/HelpGrid/index.tsx @@ -9,14 +9,14 @@ const helpItems = [ 'For both technical and non-technical roles in AI alignment, governance, and field-building', impact: 'Highest direct impact', icon: Briefcase, - route: '/howcanihelppage/career', + action: '/howcanihelp/career', }, { title: 'Spread the word & grassroots activism', description: 'For anyone—help us spread the word about this issue', impact: 'Quickest & most accessible', icon: Megaphone, - route: '/howcanihelppage/grassroots', + action: '/howcanihelp/grassroots', }, { title: 'Donate', @@ -24,7 +24,7 @@ const helpItems = [ 'The AI safety field is constrained by funding—financial help is critical at this moment', impact: 'Highest indirect impact', icon: PiggyBank, - route: '/howcanihelppage/donate', + action: '/howcanihelp/donate', }, { title: 'Volunteer', @@ -32,7 +32,7 @@ const helpItems = [ 'Help us build important AI safety infrastructure—all skill sets and levels of time-commitment are wanted', impact: 'Best for partial commitment', icon: Hand, - route: '/howcanihelppage/volunteer', + action: '/howcanihelp/volunteer', }, { title: 'Build your knowledge', @@ -40,7 +40,7 @@ const helpItems = [ 'Learning about AI safety equips you to effectively contribute to discussions and influence its development', impact: 'Enables impact', icon: Book, - route: '/howcanihelppage/knowledge', + action: '/howcanihelp/knowledge', }, { title: 'Join a community', @@ -48,7 +48,7 @@ const helpItems = [ 'Joining a community is motivating, and will help guide your efforts to contribute and get involved', impact: 'Enables impact', icon: People, - route: '/howcanihelppage/community', + action: '/howcanihelp/community', }, ] diff --git a/app/components/HowCanIHelp/Career.tsx b/app/components/HowCanIHelp/Career.tsx index cdfac081..053fbd1b 100644 --- a/app/components/HowCanIHelp/Career.tsx +++ b/app/components/HowCanIHelp/Career.tsx @@ -3,7 +3,7 @@ import CardSmall from '../CardSmall' import DropDown from '../DropDown' import {Microscope, GovermentBuilding, PuzzlePieces} from '../icons-generated' import LinkCard from '../LinkCard' -import './career.css' +import './howcanihelp.css' export default function Career() { return ( @@ -12,18 +12,21 @@ export default function Career() {

There are 3 major career paths in AI safety:

- +
@@ -118,9 +121,9 @@ export default function Career() {

- +
- +
@@ -139,9 +142,9 @@ export default function Career() {

- +
- +
@@ -171,7 +174,7 @@ export default function Career() {

- +
@@ -187,7 +190,7 @@ export default function Career() {

- +
@@ -203,7 +206,7 @@ export default function Career() {

- +
@@ -299,7 +302,7 @@ export default function Career() {

- +
@@ -314,7 +317,7 @@ export default function Career() {

- +
@@ -328,7 +331,7 @@ export default function Career() {

- +
@@ -361,7 +364,7 @@ export default function Career() {

- +
@@ -377,7 +380,7 @@ export default function Career() {

- +
@@ -393,7 +396,7 @@ export default function Career() {

- +
@@ -411,7 +414,10 @@ export default function Career() {

- +
@@ -426,7 +432,7 @@ export default function Career() {

- +
@@ -440,12 +446,14 @@ export default function Career() {
diff --git a/app/components/HowCanIHelp/Community.tsx b/app/components/HowCanIHelp/Community.tsx index e6d31e5d..78ca8823 100644 --- a/app/components/HowCanIHelp/Community.tsx +++ b/app/components/HowCanIHelp/Community.tsx @@ -1,4 +1,4 @@ -import './community.css' +import './howcanihelp.css' export default function Community() { return ( diff --git a/app/components/HowCanIHelp/Donate.tsx b/app/components/HowCanIHelp/Donate.tsx index 29e88302..ea45b87b 100644 --- a/app/components/HowCanIHelp/Donate.tsx +++ b/app/components/HowCanIHelp/Donate.tsx @@ -1,4 +1,4 @@ -import './donate.css' +import './howcanihelp.css' export default function Donate() { return ( diff --git a/app/components/HowCanIHelp/Grassroots.tsx b/app/components/HowCanIHelp/Grassroots.tsx index b15c34fb..3d5c72ca 100644 --- a/app/components/HowCanIHelp/Grassroots.tsx +++ b/app/components/HowCanIHelp/Grassroots.tsx @@ -1,4 +1,4 @@ -import './grassroots.css' +import './howcanihelp.css' export default function Grassroots() { return ( diff --git a/app/components/HowCanIHelp/Knowledge.tsx b/app/components/HowCanIHelp/Knowledge.tsx index fa5cfbce..e72ee347 100644 --- a/app/components/HowCanIHelp/Knowledge.tsx +++ b/app/components/HowCanIHelp/Knowledge.tsx @@ -1,4 +1,4 @@ -import './knowledge.css' +import './howcanihelp.css' export default function Knowledge() { return ( diff --git a/app/components/HowCanIHelp/Volunteer.tsx b/app/components/HowCanIHelp/Volunteer.tsx index 3e390b8b..1b9f3dd6 100644 --- a/app/components/HowCanIHelp/Volunteer.tsx +++ b/app/components/HowCanIHelp/Volunteer.tsx @@ -1,4 +1,4 @@ -import './volunteer.css' +import './howcanihelp.css' export default function Volunteer() { return ( diff --git a/app/components/HowCanIHelp/career.css b/app/components/HowCanIHelp/career.css deleted file mode 100644 index 75329367..00000000 --- a/app/components/HowCanIHelp/career.css +++ /dev/null @@ -1,28 +0,0 @@ -.paths-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--spacing-32); -} - -.section-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 40px 64px; -} - -.section-split { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: var(--spacing-40); -} - -.help-footer { - border-top: 1px solid var(--colors-cool-grey-200); - padding-top: var(--spacing-80); -} - -@media (max-width: 780px) { - .paths-grid { - grid-template-columns: 1fr; - } -} diff --git a/app/components/HowCanIHelp/community.css b/app/components/HowCanIHelp/community.css deleted file mode 100644 index e69de29b..00000000 diff --git a/app/components/HowCanIHelp/donate.css b/app/components/HowCanIHelp/donate.css deleted file mode 100644 index e69de29b..00000000 diff --git a/app/components/HowCanIHelp/grassroots.css b/app/components/HowCanIHelp/grassroots.css deleted file mode 100644 index e69de29b..00000000 diff --git a/app/components/HowCanIHelp/howcanihelp.css b/app/components/HowCanIHelp/howcanihelp.css index bd33e04b..83d0e87f 100644 --- a/app/components/HowCanIHelp/howcanihelp.css +++ b/app/components/HowCanIHelp/howcanihelp.css @@ -2,3 +2,32 @@ display: grid; grid-template-columns: repeat(2, 1fr); } + +.paths-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-32); +} + +.section-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 40px 64px; +} + +.section-split { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-40); +} + +.help-footer { + border-top: 1px solid var(--colors-cool-grey-200); + padding-top: var(--spacing-80); +} + +@media (max-width: 780px) { + .paths-grid { + grid-template-columns: 1fr; + } +} diff --git a/app/components/HowCanIHelp/knowledge.css b/app/components/HowCanIHelp/knowledge.css deleted file mode 100644 index e69de29b..00000000 diff --git a/app/components/HowCanIHelp/volunteer.css b/app/components/HowCanIHelp/volunteer.css deleted file mode 100644 index e69de29b..00000000 diff --git a/app/components/LinkCard/index.tsx b/app/components/LinkCard/index.tsx index 6aab51d8..f60b9b97 100644 --- a/app/components/LinkCard/index.tsx +++ b/app/components/LinkCard/index.tsx @@ -1,32 +1,24 @@ import React from 'react' import './linkcard.css' import {ArrowUpRight} from '../icons-generated' -import ButtonOrLink from '../ButtonOrLink' +import Button from '../Button' + interface LinkCardProps { title: string tag?: string - route?: string - onClick?: () => void + action?: string className?: string } -const LinkCard: React.FC = ({title, tag, route, onClick, className}) => { +const LinkCard: React.FC = ({title, tag, action, className}) => { className = `link-card ${className}` - const commonContent = ( - <> + + return ( + ) } diff --git a/app/components/LinkCard/linkcard.css b/app/components/LinkCard/linkcard.css index e1aac14c..cc0e1e8f 100644 --- a/app/components/LinkCard/linkcard.css +++ b/app/components/LinkCard/linkcard.css @@ -11,6 +11,9 @@ position: relative; cursor: pointer; transition: box-shadow 0.3s ease; + width: 100%; + align-items: start; + box-shadow: 0 0 0 0 transparent; } .link-card:hover { diff --git a/app/routes/howcanihelppage.$.tsx b/app/routes/howcanihelp.$page.tsx similarity index 65% rename from app/routes/howcanihelppage.$.tsx rename to app/routes/howcanihelp.$page.tsx index 8d742956..f7984994 100644 --- a/app/routes/howcanihelppage.$.tsx +++ b/app/routes/howcanihelp.$page.tsx @@ -1,15 +1,15 @@ import {Link, useParams} from '@remix-run/react' -import {useEffect} from 'react' import Page from '~/components/Page' import {howCanIHelpComponents} from '~/components/HowCanIHelp' +import {MetaFunction} from '@remix-run/node' -export default function HowCanIHelp() { - const {'*': subpage} = useParams() - const Component = howCanIHelpComponents[subpage as keyof typeof howCanIHelpComponents] +export const meta: MetaFunction = () => { + return [{title: 'How Can I Help? - AISafety.info'}] +} - useEffect(() => { - document.title = `How Can I Help: ${subpage} - AISafety.info` - }, [subpage]) +export default function HowCanIHelp() { + const {page} = useParams() + const Component = howCanIHelpComponents[page as keyof typeof howCanIHelpComponents] if (!Component) { return
Page not found
diff --git a/app/routes/howcanihelp.tsx b/app/routes/howcanihelp._index.tsx similarity index 82% rename from app/routes/howcanihelp.tsx rename to app/routes/howcanihelp._index.tsx index 43b358a5..6aad0d75 100644 --- a/app/routes/howcanihelp.tsx +++ b/app/routes/howcanihelp._index.tsx @@ -1,13 +1,13 @@ -import {useEffect} from 'react' import Page from '~/components/Page' import HelpGrid from '~/components/HelpGrid' import '~/components/HowCanIHelp/howcanihelp.css' +import {MetaFunction} from '@remix-run/node' -export default function HowCanIHelp() { - useEffect(() => { - document.title = 'How Can I Help? - AISafety.info' - }, []) +export const meta: MetaFunction = () => { + return [{title: 'How Can I Help? - AISafety.info'}] +} +export default function HowCanIHelp() { return (
From cfd2df980412e918a2837023515ab606094663fa Mon Sep 17 00:00:00 2001 From: Olivier Coutu Date: Fri, 18 Oct 2024 08:28:46 -0400 Subject: [PATCH 09/12] Made prettier --- app/components/HowCanIHelp/Knowledge.tsx | 220 +++++++++++++---------- 1 file changed, 123 insertions(+), 97 deletions(-) diff --git a/app/components/HowCanIHelp/Knowledge.tsx b/app/components/HowCanIHelp/Knowledge.tsx index 51c494d1..d4d877c3 100644 --- a/app/components/HowCanIHelp/Knowledge.tsx +++ b/app/components/HowCanIHelp/Knowledge.tsx @@ -9,48 +9,51 @@ export default function Knowledge() { return (

Build your knowledge

-

If you're somewhat new to AI safety, we recommend an introductory overview

+

+ If you're somewhat new to AI safety, we recommend an introductory overview +

-

Browse our introductory content

-

- Our website’s “Intro to AI Safety” micro-course includes several short readings that act as a - comprehensive introduction the topic of AI safety. -

-

- Our Intro to AI Safety video playlist illustrates many of the most important points about AI safety - in a way that is entertaining and easy to understand. -

+

Browse our introductory content

+

+ Our website’s “Intro to AI Safety” micro-course includes several short readings that + act as a comprehensive introduction the topic of AI safety. +

+

+ Our Intro to AI Safety video playlist illustrates many of the most important points + about AI safety in a way that is entertaining and easy to understand. +

-

- TODO Intro to AI Safety video playlist -

+

TODO Intro to AI Safety video playlist

-
-

Listen to an introductory podcast episode (or a few)

-

- We recommend Dwarkesh Patel’s interview with Paul Christiano, a leading researcher in AI alignment and safety. - The interview provides an introduction to AI risk and discusses many important AI safety concepts. -

+

+ Listen to an introductory podcast episode (or a few) +

+

+ We recommend Dwarkesh Patel’s interview with Paul Christiano, a leading researcher in + AI alignment and safety. The interview provides an introduction to AI risk and + discusses many important AI safety concepts. +

- + -

- Browse our full list of podcasts (TODO link) -

+

Browse our full list of podcasts (TODO link)

-
+
I love books!

- TODO I love books I'm a nerd - Melissa, what do we want to put in the modal, why not just link to this? + TODO I love books I'm a nerd Melissa, what do we want to put in the modal, why + not just link to this? https://aisafety.info/questions/8159/What-are-some-good-books-about-AI-safety

- +
-

- Lorem ipsum -

-

- Lorem ipsum -

+

Lorem ipsum

+

Lorem ipsum

@@ -89,19 +88,13 @@ export default function Knowledge() {

I love books!

-

- TODO idk what goes here -

+

TODO idk what goes here

- +
-

- Lorem ipsum -

-

- Lorem ipsum -

+

Lorem ipsum

+

Lorem ipsum

@@ -114,28 +107,30 @@ export default function Knowledge() {
-

Take an online course

-

- We recommend taking an online course if your interests have narrowed to a specific subset of - AI safety, such as AI alignment research or AI governance. -

-

- The AI Safety Fundamentals (AISF) Governance Course, for example, is especially suited - for policymakers and similar stakeholders interested in AI governance mechanisms. - It explores policy levers for steering the future of AI development. -

-

- The AISF Alignment Course is especially suited for people with a technical background - interested in AI alignment research. It explores research agendas for aligning AI systems with human interests. -

-

- Note: If you take the AISF courses, consider exploring additional views on AI safety to help avoid homogeneity - in the field, such as The Most Important Century blog post series. -

-

- Note: AISF courses do not accept all applicants, but we still recommend taking - the courses through self-study if your application is unsuccessful. -

+

Take an online course

+

+ We recommend taking an online course if your interests have narrowed to a specific + subset of AI safety, such as AI alignment research or AI governance. +

+

+ The AI Safety Fundamentals (AISF) Governance Course, for example, is especially suited + for policymakers and similar stakeholders interested in AI governance mechanisms. It + explores policy levers for steering the future of AI development. +

+

+ The AISF Alignment Course is especially suited for people with a technical background + interested in AI alignment research. It explores research agendas for aligning AI + systems with human interests. +

+

+ Note: If you take the AISF courses, consider exploring additional views on AI safety + to help avoid homogeneity in the field, such as The Most Important Century blog post + series. +

+

+ Note: AISF courses do not accept all applicants, but we still recommend taking the + courses through self-study if your application is unsuccessful. +

@@ -143,7 +138,13 @@ export default function Knowledge() {

- Browse our full list of courses (TODO fix link) + Browse our{' '} + + full list of courses (TODO fix link) +

@@ -151,55 +152,70 @@ export default function Knowledge() {
-

Get into Lesswrong and its subset, the Alignment Forum

-

- Most people who are really into AI existential safety ultimately end up in this online, - forum-based community which fosters high-quality discussions about AI safety research and governance. -

+

+ Get into Lesswrong and its subset, the Alignment Forum +

+

+ Most people who are really into AI existential safety ultimately end up in this + online, forum-based community which fosters high-quality discussions about AI safety + research and governance. +

- +
- +
-

Sign up for events

-

- Events, typically conferences and talks, are often held in person and last one to three days. -

-

- We've highlighted EAGx, an Effective Altruism conference dedicated to networking and learning - about important global issues, with a strong focus on AI safety. Several EAGx's are held - annually in various major cities across the world. -

+

Sign up for events

+

+ Events, typically conferences and talks, are often held in person and last one to + three days. +

+

+ We've highlighted EAGx, an Effective Altruism conference dedicated to networking and + learning about important global issues, with a strong focus on AI safety. Several + EAGx's are held annually in various major cities across the world. +

-
-

Sign up for fellowships

-

- AI safety fellowships typically last one to three weeks and are offered both online and in person. - They focus on developing safe and ethical AI practices through research, - mentorship, and collaboration on innovative solutions. -

+

Sign up for fellowships

+

+ AI safety fellowships typically last one to three weeks and are offered both online + and in person. They focus on developing safe and ethical AI practices through + research, mentorship, and collaboration on innovative solutions. +

- Browse our Full list of fellowships (TODO fix link) + Browse our{' '} + + Full list of fellowships (TODO fix link) +

@@ -211,32 +227,42 @@ export default function Knowledge() {

Boost your learning efforts: Join a community

TODO

-

Once you’re educated, here are some ways to help directly

+

+ Once you’re educated, here are some ways to help directly +

- + route="/howcanihelppage/career" + impact={'TODO'} + /> + route="/howcanihelppage/spread-the-word" + impact={'TODO'} + />
+ route="/howcanihelppage/donate" + impact={'TODO'} + /> + route="/howcanihelppage/volunteer" + impact={'TODO'} + />

TODO: Fix the grid

From 5550195d0bee0260035ec40e1c7a34d3e656f82c Mon Sep 17 00:00:00 2001 From: Olivier Coutu Date: Fri, 18 Oct 2024 08:48:45 -0400 Subject: [PATCH 10/12] Update card route --- app/components/HowCanIHelp/Knowledge.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/HowCanIHelp/Knowledge.tsx b/app/components/HowCanIHelp/Knowledge.tsx index d4d877c3..2eee6199 100644 --- a/app/components/HowCanIHelp/Knowledge.tsx +++ b/app/components/HowCanIHelp/Knowledge.tsx @@ -237,14 +237,14 @@ export default function Knowledge() { title="Start a career in AI Safety" description="Help us build important AI safety infrastructure—all skill sets and levels of time—commitment are wanted" icon={PuzzlePieces} - route="/howcanihelppage/career" + action="/howcanihelppage/career" impact={'TODO'} />
@@ -253,14 +253,14 @@ export default function Knowledge() { title="Donate" description="The AI safety field is constrained by funding—financial help is critical at this moment" icon={PuzzlePieces} - route="/howcanihelppage/donate" + action="/howcanihelppage/donate" impact={'TODO'} />
From 0503a37a03b1a2f7703c503308b9f4b4007b19fc Mon Sep 17 00:00:00 2001 From: Olivier Coutu Date: Fri, 18 Oct 2024 09:05:37 -0400 Subject: [PATCH 11/12] Remove unused imports --- app/components/HowCanIHelp/Knowledge.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/components/HowCanIHelp/Knowledge.tsx b/app/components/HowCanIHelp/Knowledge.tsx index 2eee6199..5205e418 100644 --- a/app/components/HowCanIHelp/Knowledge.tsx +++ b/app/components/HowCanIHelp/Knowledge.tsx @@ -1,7 +1,6 @@ import Card from '../Card' -import CardSmall from '../CardSmall' import DropDown from '../DropDown' -import {Microscope, GovermentBuilding, PuzzlePieces} from '../icons-generated' +import {PuzzlePieces} from '../icons-generated' import LinkCard from '../LinkCard' import './knowledge.css' From fd24831314678e039147fa9789bc88540b0c86c8 Mon Sep 17 00:00:00 2001 From: Olivier Coutu Date: Fri, 18 Oct 2024 09:17:02 -0400 Subject: [PATCH 12/12] Update CSS importation --- app/components/HowCanIHelp/Knowledge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/HowCanIHelp/Knowledge.tsx b/app/components/HowCanIHelp/Knowledge.tsx index 5205e418..6065f8a4 100644 --- a/app/components/HowCanIHelp/Knowledge.tsx +++ b/app/components/HowCanIHelp/Knowledge.tsx @@ -2,7 +2,7 @@ import Card from '../Card' import DropDown from '../DropDown' import {PuzzlePieces} from '../icons-generated' import LinkCard from '../LinkCard' -import './knowledge.css' +import './howcanihelp.css' export default function Knowledge() { return (