diff --git a/website/package-lock.json b/website/package-lock.json index 4a074c49..bd9ad572 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -37,6 +37,7 @@ "devDependencies": { "@types/node": "18.11.17", "@types/react": "18.0.26", + "prettier": "2.8.1", "prisma": "^4.7.1" } }, @@ -3536,6 +3537,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz", + "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-format": { "version": "3.8.0", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz", @@ -6790,6 +6806,12 @@ "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" }, + "prettier": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz", + "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==", + "dev": true + }, "pretty-format": { "version": "3.8.0", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz", diff --git a/website/package.json b/website/package.json index f3a1b1da..399a37f9 100644 --- a/website/package.json +++ b/website/package.json @@ -39,6 +39,7 @@ "devDependencies": { "@types/node": "18.11.17", "@types/react": "18.0.26", + "prettier": "2.8.1", "prisma": "^4.7.1" } } diff --git a/website/src/.prettierignore b/website/src/.prettierignore new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/website/src/.prettierignore @@ -0,0 +1 @@ + diff --git a/website/src/.prettierrc.json b/website/src/.prettierrc.json new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/website/src/.prettierrc.json @@ -0,0 +1 @@ +{} diff --git a/website/src/components/AuthLayout.tsx b/website/src/components/AuthLayout.tsx index 249126b8..7b4e2e4d 100644 --- a/website/src/components/AuthLayout.tsx +++ b/website/src/components/AuthLayout.tsx @@ -1,5 +1,4 @@ -import Link from 'next/link' - +import Link from "next/link"; function BackgroundIllustration(props) { return ( @@ -15,7 +14,7 @@ function BackgroundIllustration(props) { - ) + ); } export function AuthLayout({ title, subtitle, children }) { @@ -43,5 +42,5 @@ export function AuthLayout({ title, subtitle, children }) { - ) + ); } diff --git a/website/src/components/Button.tsx b/website/src/components/Button.tsx deleted file mode 100644 index 07bf17d8..00000000 --- a/website/src/components/Button.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { forwardRef } from 'react' -import Link from 'next/link' -import clsx from 'clsx' - -const baseStyles = { - solid: - 'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold outline-2 outline-offset-2 transition-colors', - outline: - 'inline-flex justify-center rounded-lg border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm outline-2 outline-offset-2 transition-colors', -} - -const variantStyles = { - solid: { - cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors', - white: - 'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70', - gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80', - }, - outline: { - gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80', - }, -} - -export const Button = forwardRef(function Button( - { variant = 'solid', color = 'gray', className, href, ...props }, - ref -) { - className = clsx( - baseStyles[variant], - variantStyles[variant][color], - className - ) - - return href ? ( - - ) : ( - - + + + - - - - - + Github + + - ) + ); } diff --git a/website/src/components/CircleBackground.tsx b/website/src/components/CircleBackground.tsx index e2aa9057..50e27dae 100644 --- a/website/src/components/CircleBackground.tsx +++ b/website/src/components/CircleBackground.tsx @@ -1,4 +1,4 @@ -import { useId } from 'react' +import { useId } from "react"; export function CircleBackground({ color, @@ -6,7 +6,7 @@ export function CircleBackground({ height = 558, ...props }) { - let id = useId() + let id = useId(); return ( - ) + ); } diff --git a/website/src/components/Container.tsx b/website/src/components/Container.tsx index a17ea3c1..ab67fb41 100644 --- a/website/src/components/Container.tsx +++ b/website/src/components/Container.tsx @@ -1,10 +1,10 @@ -import clsx from 'clsx' +import clsx from "clsx"; export function Container({ className, ...props }) { return (
- ) + ); } diff --git a/website/src/components/Faq.tsx b/website/src/components/Faq.tsx index 9fdbdaba..1ffb8f7d 100644 --- a/website/src/components/Faq.tsx +++ b/website/src/components/Faq.tsx @@ -1,20 +1,20 @@ -import Link from 'next/link' +import Link from "next/link"; -import { Container } from './Container' +import { Container } from "./Container"; const faqs = [ [ { - question: 'How far along is this project?', + question: "How far along is this project?", answer: - 'We are in the early stages of development, working from established research in applying RLHF to large language models.', + "We are in the early stages of development, working from established research in applying RLHF to large language models.", }, ], [ { - question: 'Who is behind Open Assistant?', + question: "Who is behind Open Assistant?", answer: - 'Open Assistant is a project organized by LAION and individuals around the world interested in bringing this technology to everyone.', + "Open Assistant is a project organized by LAION and individuals around the world interested in bringing this technology to everyone.", }, ], [ @@ -24,7 +24,7 @@ const faqs = [ // 'Please feel free to reach out to us on Discord. We are happy to answer any questions you may have.', // }, ], -] +]; export function Faq() { return ( @@ -73,5 +73,5 @@ export function Faq() { - ) + ); } diff --git a/website/src/components/Fields.tsx b/website/src/components/Fields.tsx index fe55aa62..7b64adf9 100644 --- a/website/src/components/Fields.tsx +++ b/website/src/components/Fields.tsx @@ -1,7 +1,7 @@ -import clsx from 'clsx' +import clsx from "clsx"; const formClasses = - 'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm' + "block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm"; function Label({ id, children }) { return ( @@ -11,23 +11,23 @@ function Label({ id, children }) { > {children} - ) + ); } -export function TextField({ id, label, type = 'text', className, ...props }) { +export function TextField({ id, label, type = "text", className, ...props }) { return (
{label && }
- ) + ); } export function SelectField({ id, label, className, ...props }) { return (
{label && } -
- ) + ); } diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx index 7f91f89b..fa3d8c0d 100644 --- a/website/src/components/Footer.tsx +++ b/website/src/components/Footer.tsx @@ -1,10 +1,8 @@ -import Image from 'next/image' -import Link from 'next/link' - - -import { Container } from './Container' -import { NavLinks } from './NavLinks' +import Image from "next/image"; +import Link from "next/link"; +import { Container } from "./Container"; +import { NavLinks } from "./NavLinks"; export function Footer() { return ( @@ -13,24 +11,25 @@ export function Footer() {
- - logo - - - + + logo +

Open Assistant

Conversational AI for everyone.

- +
-
- ) + ); } diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx index d9209ee9..b4facdf4 100644 --- a/website/src/components/Header.tsx +++ b/website/src/components/Header.tsx @@ -1,10 +1,10 @@ -import Link from 'next/link' -import { Popover } from '@headlessui/react' -import { AnimatePresence, motion } from 'framer-motion' +import Link from "next/link"; +import { Popover } from "@headlessui/react"; +import { AnimatePresence, motion } from "framer-motion"; -import { Container } from './Container' -import Image from 'next/image' -import { NavLinks } from './NavLinks' +import { Container } from "./Container"; +import Image from "next/image"; +import { NavLinks } from "./NavLinks"; function MenuIcon(props) { return ( @@ -16,7 +16,7 @@ function MenuIcon(props) { strokeLinejoin="round" /> - ) + ); } function ChevronUpIcon(props) { @@ -29,7 +29,7 @@ function ChevronUpIcon(props) { strokeLinejoin="round" /> - ) + ); } function MobileNavLink({ children, ...props }) { @@ -42,7 +42,7 @@ function MobileNavLink({ children, ...props }) { > {children} - ) + ); } export function Header() { @@ -51,9 +51,15 @@ export function Header() { - ) + ); } diff --git a/website/src/components/Hero.tsx b/website/src/components/Hero.tsx index 18222522..a3ed5135 100644 --- a/website/src/components/Hero.tsx +++ b/website/src/components/Hero.tsx @@ -1,10 +1,10 @@ -import { useId } from 'react' -import Image from 'next/image' +import { useId } from "react"; +import Image from "next/image"; -import { Container } from './Container' +import { Container } from "./Container"; function BackgroundIllustration(props) { - let id = useId() + let id = useId(); return (
@@ -69,10 +69,9 @@ function BackgroundIllustration(props) {
- ) + ); } - export function Hero() { return (
@@ -90,20 +89,25 @@ export function Hero() {

In the same way that Stable Diffusion helped the world make art - and images in new ways, we want to improve - the world by providing amazing conversational AI. + and images in new ways, we want to improve the world by providing + amazing conversational AI.

- {''}/ + {""}
-
- ) + ); } diff --git a/website/src/components/NavLinks.tsx b/website/src/components/NavLinks.tsx index f27eb167..c6e4959a 100644 --- a/website/src/components/NavLinks.tsx +++ b/website/src/components/NavLinks.tsx @@ -1,40 +1,40 @@ -import { useState } from 'react' -import Link from 'next/link' -import { AnimatePresence, motion } from 'framer-motion' +import { useState } from "react"; +import Link from "next/link"; +import { AnimatePresence, motion } from "framer-motion"; export function NavLinks(): JSX.Element { - let [hoveredIndex, setHoveredIndex] = useState(null) - - return <> - - {[ - ['Join Us', '#join-us'], - ['FAQ', '#faq'], - ].map(([label, href], index) => ( - setHoveredIndex(index)} - onMouseLeave={() => setHoveredIndex(null)} - > - - {hoveredIndex === index && ( - - )} - - {label} - - ))} - + let [hoveredIndex, setHoveredIndex] = useState(null); + return ( + <> + {[ + ["Join Us", "#join-us"], + ["FAQ", "#faq"], + ].map(([label, href], index) => ( + setHoveredIndex(index)} + onMouseLeave={() => setHoveredIndex(null)} + > + + {hoveredIndex === index && ( + + )} + + {label} + + ))} + + ); } diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx index 5e4abb4e..9d8f8b6d 100644 --- a/website/src/pages/_app.tsx +++ b/website/src/pages/_app.tsx @@ -1,10 +1,9 @@ import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs"; import { SessionContextProvider } from "@supabase/auth-helpers-react"; -import {useEffect, useState} from 'react'; - +import { useEffect, useState } from "react"; import "../styles/globals.css"; -import 'focus-visible' +import "focus-visible"; function MyApp({ Component, pageProps }) { const [supabase] = useState(() => createBrowserSupabaseClient()); diff --git a/website/src/pages/_document.tsx b/website/src/pages/_document.tsx index 1ac072d3..e1fd448c 100644 --- a/website/src/pages/_document.tsx +++ b/website/src/pages/_document.tsx @@ -1,17 +1,19 @@ -import { Head, Html, Main, NextScript } from 'next/document' +import { Head, Html, Main, NextScript } from "next/document"; export default function Document() { return ( - - - +
- ) + ); } diff --git a/website/src/pages/grading/grade-output.tsx b/website/src/pages/grading/grade-output.tsx index aa282b85..a88528a0 100644 --- a/website/src/pages/grading/grade-output.tsx +++ b/website/src/pages/grading/grade-output.tsx @@ -1,41 +1,39 @@ - -import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid' - +import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid"; export default function OutputDetail(): JSX.Element { - return <> -
- - {/* Instrunction and Output panels */} -
-
- - {/* Instruction panel */} -
-
-
Instruction
-
- {SAMPLE_PROMPT} + return ( + <> +
+ {/* Instrunction and Output panels */} +
+
+ {/* Instruction panel */} +
+
+
Instruction
+
+ {SAMPLE_PROMPT} +
-
- {/* Output panel */} -
-
-
Output
-
- {SAMPLE_OUTPUT} + {/* Output panel */} +
+
+
Output
+
+ {SAMPLE_OUTPUT} +
-
- {/* Form wrap*/} -
-

Rating

+ {/* Form wrap*/} +
+

+ Rating +

(1 = worst, 7 = best)

- - + {/* Rating buttons */}
+
+ + {/* Annotation checkboxes */} +
+
    + {ANNOTATION_FLAGS.map((option, i) => { + return ( + + ); + })} +
+
+
+