From f2be89fc737a09f1b6a3778c5dd0026cf5438fa3 Mon Sep 17 00:00:00 2001
From: Lennon Puldagrealy <lpuldagrealy@gmail.com>
Date: Sun, 18 Dec 2022 11:30:23 -0800
Subject: [PATCH] Add Prettier configuration. Run Prettier

---
 website/next.config.js                        |   4 +-
 website/postcss.config.js                     |   2 +-
 .../images/logos/CHAT-THOUGHT-CONVO.svg       |   2 +-
 .../public/images/logos/CHAT-THOUGHT-LOGO.svg |   2 +-
 website/src/.prettierignore                   |   1 -
 website/src/.prettierrc.json                  |  13 +-
 website/src/components/AuthLayout.tsx         |  16 +--
 website/src/components/CallToAction.tsx       |  27 +---
 website/src/components/CircleBackground.tsx   |  31 +---
 website/src/components/Container.tsx          |   7 +-
 website/src/components/Faq.tsx                |  15 +-
 website/src/components/Fields.tsx             |   5 +-
 website/src/components/Header.tsx             |  26 +---
 website/src/components/Hero.tsx               |  43 ++----
 website/src/pages/_app.tsx                    |   5 +-
 website/src/pages/_document.tsx               |   6 +-
 website/src/pages/grading/grade-output.tsx    |  43 ++----
 website/src/pages/login.jsx                   |   9 +-
 website/src/pages/new_task.js                 |  18 +--
 website/src/styles/globals.css                |  26 ++--
 website/tailwind.config.js                    | 132 +++++++++---------
 website/tsconfig.json                         |  16 +--
 22 files changed, 150 insertions(+), 299 deletions(-)

diff --git a/website/next.config.js b/website/next.config.js
index d04423f6..c1c1519d 100644
--- a/website/next.config.js
+++ b/website/next.config.js
@@ -4,6 +4,6 @@ const nextConfig = {
   experimental: {
     scrollRestoration: true,
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/website/postcss.config.js b/website/postcss.config.js
index 33ad091d..12a703d9 100644
--- a/website/postcss.config.js
+++ b/website/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/website/public/images/logos/CHAT-THOUGHT-CONVO.svg b/website/public/images/logos/CHAT-THOUGHT-CONVO.svg
index 758899d8..3c14ab57 100644
--- a/website/public/images/logos/CHAT-THOUGHT-CONVO.svg
+++ b/website/public/images/logos/CHAT-THOUGHT-CONVO.svg
@@ -45,4 +45,4 @@
   <circle cx="193.83" cy="172.37" r="19.89" style="fill: #fff;"/>
   <circle cx="253.44" cy="172.37" r="19.89" style="fill: #fff;"/>
   <circle cx="313.05" cy="172.37" r="19.89" style="fill: #fff;"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/website/public/images/logos/CHAT-THOUGHT-LOGO.svg b/website/public/images/logos/CHAT-THOUGHT-LOGO.svg
index dc0b32df..7657e0a4 100644
--- a/website/public/images/logos/CHAT-THOUGHT-LOGO.svg
+++ b/website/public/images/logos/CHAT-THOUGHT-LOGO.svg
@@ -10,4 +10,4 @@
   <circle cx="73.75" cy="133.36" r="19.89" style="fill: #fff;"/>
   <circle cx="133.36" cy="133.36" r="19.89" style="fill: #fff;"/>
   <circle cx="192.96" cy="133.36" r="19.89" style="fill: #fff;"/>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/website/src/.prettierignore b/website/src/.prettierignore
index 8b137891..e69de29b 100644
--- a/website/src/.prettierignore
+++ b/website/src/.prettierignore
@@ -1 +0,0 @@
-
diff --git a/website/src/.prettierrc.json b/website/src/.prettierrc.json
index 0967ef42..3665c446 100644
--- a/website/src/.prettierrc.json
+++ b/website/src/.prettierrc.json
@@ -1 +1,12 @@
-{}
+{
+  "tabWidth": 2,
+  "printWidth": 120,
+  "overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
+}
diff --git a/website/src/components/AuthLayout.tsx b/website/src/components/AuthLayout.tsx
index 7b4e2e4d..428ce6ea 100644
--- a/website/src/components/AuthLayout.tsx
+++ b/website/src/components/AuthLayout.tsx
@@ -2,13 +2,7 @@ import Link from "next/link";
 
 function BackgroundIllustration(props) {
   return (
-    <svg
-      viewBox="0 0 1090 1090"
-      aria-hidden="true"
-      fill="none"
-      preserveAspectRatio="none"
-      {...props}
-    >
+    <svg viewBox="0 0 1090 1090" aria-hidden="true" fill="none" preserveAspectRatio="none" {...props}>
       <circle cx={545} cy={545} r="544.5" />
       <circle cx={545} cy={545} r="480.5" />
       <circle cx={545} cy={545} r="416.5" />
@@ -30,12 +24,8 @@ export function AuthLayout({ title, subtitle, children }) {
             height="1090"
             className="absolute -top-7 left-1/2 -z-10 h-[788px] -translate-x-1/2 stroke-gray-300/30 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:-top-9 sm:h-auto"
           />
-          <h1 className="text-center text-2xl font-medium tracking-tight text-gray-900">
-            {title}
-          </h1>
-          {subtitle && (
-            <p className="mt-3 text-center text-lg text-gray-600">{subtitle}</p>
-          )}
+          <h1 className="text-center text-2xl font-medium tracking-tight text-gray-900">{title}</h1>
+          {subtitle && <p className="mt-3 text-center text-lg text-gray-600">{subtitle}</p>}
         </div>
         <div className="-mx-4 mt-10 flex-auto bg-white py-10 px-4 shadow-2xl shadow-gray-900/10 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-24">
           {children}
diff --git a/website/src/components/CallToAction.tsx b/website/src/components/CallToAction.tsx
index e0867bd2..61f11540 100644
--- a/website/src/components/CallToAction.tsx
+++ b/website/src/components/CallToAction.tsx
@@ -3,23 +3,17 @@ import { Container } from "./Container";
 
 export function CallToAction() {
   return (
-    <section
-      id="join-us"
-      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
-    >
+    <section id="join-us" className="relative overflow-hidden bg-gray-900 py-20 sm:py-28">
       <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
         <CircleBackground color="#fff" className="animate-spin-slower" />
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-md sm:text-center">
-          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
-            Join Us
-          </h2>
+          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">Join Us</h2>
           <p className="mt-4 text-lg text-gray-300">
-            All open source projects begin with people like you. Open source is
-            the belief that if we collaborate we can together gift our
-            knoweledge and technology to the world for the benefit of humanity.
-            Are you in? Find us here:
+            All open source projects begin with people like you. Open source is the belief that if we collaborate we can
+            together gift our knoweledge and technology to the world for the benefit of humanity. Are you in? Find us
+            here:
           </p>
           <div className="mt-8 flex justify-center">
             <a href="https://discord.gg/pXtnYk9c" target="_blank">
@@ -27,11 +21,7 @@ export function CallToAction() {
                 type="button"
                 className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 640 512"
-                  className="w-6 h-6"
-                >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" className="w-6 h-6">
                   <path
                     fill="currentColor"
                     d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
@@ -41,10 +31,7 @@ export function CallToAction() {
               </button>
             </a>
 
-            <a
-              href="https://github.com/LAION-AI/Open-Assistant"
-              target="_blank"
-            >
+            <a href="https://github.com/LAION-AI/Open-Assistant" target="_blank">
               <button
                 type="button"
                 className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
diff --git a/website/src/components/CircleBackground.tsx b/website/src/components/CircleBackground.tsx
index 50e27dae..b5873c33 100644
--- a/website/src/components/CircleBackground.tsx
+++ b/website/src/components/CircleBackground.tsx
@@ -1,31 +1,12 @@
 import { useId } from "react";
 
-export function CircleBackground({
-  color,
-  width = 558,
-  height = 558,
-  ...props
-}) {
+export function CircleBackground({ color, width = 558, height = 558, ...props }) {
   let id = useId();
 
   return (
-    <svg
-      viewBox="0 0 558 558"
-      width={width}
-      height={height}
-      fill="none"
-      aria-hidden="true"
-      {...props}
-    >
+    <svg viewBox="0 0 558 558" width={width} height={height} fill="none" aria-hidden="true" {...props}>
       <defs>
-        <linearGradient
-          id={id}
-          x1="79"
-          y1="16"
-          x2="105"
-          y2="237"
-          gradientUnits="userSpaceOnUse"
-        >
+        <linearGradient id={id} x1="79" y1="16" x2="105" y2="237" gradientUnits="userSpaceOnUse">
           <stop stopColor={color} />
           <stop offset="1" stopColor={color} stopOpacity="0" />
         </linearGradient>
@@ -35,11 +16,7 @@ export function CircleBackground({
         d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
         stroke={color}
       />
-      <path
-        d="M1 279C1 125.465 125.465 1 279 1"
-        stroke={`url(#${id})`}
-        strokeLinecap="round"
-      />
+      <path d="M1 279C1 125.465 125.465 1 279 1" stroke={`url(#${id})`} strokeLinecap="round" />
     </svg>
   );
 }
diff --git a/website/src/components/Container.tsx b/website/src/components/Container.tsx
index ab67fb41..f65ed282 100644
--- a/website/src/components/Container.tsx
+++ b/website/src/components/Container.tsx
@@ -1,10 +1,5 @@
 import clsx from "clsx";
 
 export function Container({ className, ...props }) {
-  return (
-    <div
-      className={clsx("mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)}
-      {...props}
-    />
-  );
+  return <div className={clsx("mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)} {...props} />;
 }
diff --git a/website/src/components/Faq.tsx b/website/src/components/Faq.tsx
index 1ffb8f7d..d7c2eae9 100644
--- a/website/src/components/Faq.tsx
+++ b/website/src/components/Faq.tsx
@@ -28,17 +28,10 @@ const faqs = [
 
 export function Faq() {
   return (
-    <section
-      id="faq"
-      aria-labelledby="faqs-title"
-      className="border-t border-gray-200 py-20 sm:py-32"
-    >
+    <section id="faq" aria-labelledby="faqs-title" className="border-t border-gray-200 py-20 sm:py-32">
       <Container className="">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2
-            id="faqs-title"
-            className="text-3xl font-medium tracking-tight text-gray-900"
-          >
+          <h2 id="faqs-title" className="text-3xl font-medium tracking-tight text-gray-900">
             Frequently Asked Questions
           </h2>
           {/* <p className="mt-2 text-lg text-gray-600">
@@ -61,9 +54,7 @@ export function Faq() {
               <ul role="list" className="space-y-10">
                 {column.map((faq, faqIndex) => (
                   <li key={faqIndex}>
-                    <h3 className="text-lg font-semibold leading-6 text-gray-900">
-                      {faq.question}
-                    </h3>
+                    <h3 className="text-lg font-semibold leading-6 text-gray-900">{faq.question}</h3>
                     <p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
                   </li>
                 ))}
diff --git a/website/src/components/Fields.tsx b/website/src/components/Fields.tsx
index 7b64adf9..2233318e 100644
--- a/website/src/components/Fields.tsx
+++ b/website/src/components/Fields.tsx
@@ -5,10 +5,7 @@ const formClasses =
 
 function Label({ id, children }) {
   return (
-    <label
-      htmlFor={id}
-      className="mb-2 block text-sm font-semibold text-gray-900"
-    >
+    <label htmlFor={id} className="mb-2 block text-sm font-semibold text-gray-900">
       {children}
     </label>
   );
diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx
index b4facdf4..d22373b4 100644
--- a/website/src/components/Header.tsx
+++ b/website/src/components/Header.tsx
@@ -9,12 +9,7 @@ import { NavLinks } from "./NavLinks";
 function MenuIcon(props) {
   return (
     <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <path
-        d="M5 6h14M5 18h14M5 12h14"
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+      <path d="M5 6h14M5 18h14M5 12h14" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
 }
@@ -22,12 +17,7 @@ function MenuIcon(props) {
 function ChevronUpIcon(props) {
   return (
     <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <path
-        d="M17 14l-5-5-5 5"
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+      <path d="M17 14l-5-5-5 5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
 }
@@ -73,13 +63,7 @@ export function Header() {
                     className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
                     aria-label="Toggle site navigation"
                   >
-                    {({ open }) =>
-                      open ? (
-                        <ChevronUpIcon className="h-6 w-6" />
-                      ) : (
-                        <MenuIcon className="h-6 w-6" />
-                      )
-                    }
+                    {({ open }) => (open ? <ChevronUpIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />)}
                   </Popover.Button>
                   <AnimatePresence initial={false}>
                     {open && (
@@ -105,9 +89,7 @@ export function Header() {
                           className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
-                            <MobileNavLink href="#join-us">
-                              Join Us
-                            </MobileNavLink>
+                            <MobileNavLink href="#join-us">Join Us</MobileNavLink>
                             <MobileNavLink href="#faqs">FAQs</MobileNavLink>
                           </div>
                           <div className="mt-8 flex flex-col gap-4">
diff --git a/website/src/components/Hero.tsx b/website/src/components/Hero.tsx
index a3ed5135..574fb94a 100644
--- a/website/src/components/Hero.tsx
+++ b/website/src/components/Hero.tsx
@@ -19,20 +19,9 @@ function BackgroundIllustration(props) {
           stroke="#D4D4D4"
           strokeOpacity="0.7"
         />
-        <path
-          d="M513 1025C230.23 1025 1 795.77 1 513"
-          stroke={`url(#${id}-gradient-1)`}
-          strokeLinecap="round"
-        />
+        <path d="M513 1025C230.23 1025 1 795.77 1 513" stroke={`url(#${id}-gradient-1)`} strokeLinecap="round" />
         <defs>
-          <linearGradient
-            id={`${id}-gradient-1`}
-            x1="1"
-            y1="513"
-            x2="1"
-            y2="1025"
-            gradientUnits="userSpaceOnUse"
-          >
+          <linearGradient id={`${id}-gradient-1`} x1="1" y1="513" x2="1" y2="1025" gradientUnits="userSpaceOnUse">
             <stop stopColor="#06b6d4" />
             <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
           </linearGradient>
@@ -49,20 +38,9 @@ function BackgroundIllustration(props) {
           stroke="#D4D4D4"
           strokeOpacity="0.7"
         />
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400"
-          stroke={`url(#${id}-gradient-2)`}
-          strokeLinecap="round"
-        />
+        <path d="M913 513c0 220.914-179.086 400-400 400" stroke={`url(#${id}-gradient-2)`} strokeLinecap="round" />
         <defs>
-          <linearGradient
-            id={`${id}-gradient-2`}
-            x1="913"
-            y1="513"
-            x2="913"
-            y2="913"
-            gradientUnits="userSpaceOnUse"
-          >
+          <linearGradient id={`${id}-gradient-2`} x1="913" y1="513" x2="913" y2="913" gradientUnits="userSpaceOnUse">
             <stop stopColor="#06b6d4" />
             <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
           </linearGradient>
@@ -78,19 +56,14 @@ export function Hero() {
       <Container className="">
         <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-5xl mb-6 font-bold tracking-tight text-gray-900">
-              Open Assistant
-            </h1>
+            <h1 className="text-5xl mb-6 font-bold tracking-tight text-gray-900">Open Assistant</h1>
             <p className="mt-8 text-3xl inline bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text font-display tracking-tight text-transparent">
               <b>Conversational AI for everyone.</b>
             </p>
+            <p className="mt-6 text-lg text-gray-600">We believe we can create a revolution.</p>
             <p className="mt-6 text-lg text-gray-600">
-              We believe we can create a revolution.
-            </p>
-            <p className="mt-6 text-lg text-gray-600">
-              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.
+              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.
             </p>
           </div>
 
diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx
index 9d8f8b6d..cf9cfe34 100644
--- a/website/src/pages/_app.tsx
+++ b/website/src/pages/_app.tsx
@@ -14,10 +14,7 @@ function MyApp({ Component, pageProps }) {
     use();
   }, []);
   return (
-    <SessionContextProvider
-      supabaseClient={supabase}
-      initialSession={pageProps.initialSession}
-    >
+    <SessionContextProvider supabaseClient={supabase} initialSession={pageProps.initialSession}>
       <Component {...pageProps} />
     </SessionContextProvider>
   );
diff --git a/website/src/pages/_document.tsx b/website/src/pages/_document.tsx
index e1fd448c..ee9ff0c3 100644
--- a/website/src/pages/_document.tsx
+++ b/website/src/pages/_document.tsx
@@ -4,11 +4,7 @@ export default function Document() {
   return (
     <Html className="h-full bg-gray-50 antialiased" lang="en">
       <Head>
-        <link
-          rel="shortcut icon"
-          type="image/png"
-          href="/images/logos/favicon.png"
-        />
+        <link rel="shortcut icon" type="image/png" href="/images/logos/favicon.png" />
       </Head>
       <body className="flex h-full flex-col">
         <Main />
diff --git a/website/src/pages/grading/grade-output.tsx b/website/src/pages/grading/grade-output.tsx
index a88528a0..25e5543a 100644
--- a/website/src/pages/grading/grade-output.tsx
+++ b/website/src/pages/grading/grade-output.tsx
@@ -11,9 +11,7 @@ export default function OutputDetail(): JSX.Element {
             <div className="rounded-lg shadow-lg h-full block bg-white">
               <div className="p-6">
                 <h5 className="text-lg font-semibold mb-4">Instruction</h5>
-                <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">
-                  {SAMPLE_PROMPT}
-                </div>
+                <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">{SAMPLE_PROMPT}</div>
               </div>
             </div>
 
@@ -21,18 +19,12 @@ export default function OutputDetail(): JSX.Element {
             <div className="mt-6 lg:mt-0 rounded-lg shadow-lg h-full block bg-white">
               <div className="p-6">
                 <h5 className="text-lg font-semibold mb-4">Output</h5>
-                <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">
-                  {SAMPLE_OUTPUT}
-                </div>
+                <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">{SAMPLE_OUTPUT}</div>
               </div>
               {/* Form  wrap*/}
               <div className="p-6">
-                <h3 className="text-lg text-center font-medium leading-6 text-gray-900">
-                  Rating
-                </h3>
-                <p className="text-center mt-1 text-sm text-gray-500">
-                  (1 = worst, 7 = best)
-                </p>
+                <h3 className="text-lg text-center font-medium leading-6 text-gray-900">Rating</h3>
+                <p className="text-center mt-1 text-sm text-gray-500">(1 = worst, 7 = best)</p>
 
                 {/* Rating buttons */}
                 <div className="flex justify-center p-6">
@@ -85,12 +77,7 @@ export default function OutputDetail(): JSX.Element {
               <div className="flex justify-center px-10">
                 <ul>
                   {ANNOTATION_FLAGS.map((option, i) => {
-                    return (
-                      <AnnotationCheckboxLi
-                        option={option}
-                        key={i}
-                      ></AnnotationCheckboxLi>
-                    );
+                    return <AnnotationCheckboxLi option={option} key={i}></AnnotationCheckboxLi>;
                   })}
                 </ul>
               </div>
@@ -150,10 +137,7 @@ function AnnotationCheckboxLi(props: { option: annotationBool }): JSX.Element {
   if (props.option.additionalExplanation) {
     AdditionalExplanation = (
       <a href="#" className="group flex items-center space-x-2.5 text-sm ">
-        <QuestionMarkCircleIcon
-          className="h-5 w-5 ml-3 text-gray-400 group-hover:text-gray-500"
-          aria-hidden="true"
-        />
+        <QuestionMarkCircleIcon className="h-5 w-5 ml-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
       </a>
     );
   }
@@ -167,13 +151,8 @@ function AnnotationCheckboxLi(props: { option: annotationBool }): JSX.Element {
           value=""
           id={props.option.attributeName}
         />
-        <label
-          className="flex ml-1 form-check-label  hover:cursor-pointer"
-          htmlFor={props.option.attributeName}
-        >
-          <span className="text-gray-800 hover:text-blue-700">
-            {props.option.labelText}
-          </span>
+        <label className="flex ml-1 form-check-label  hover:cursor-pointer" htmlFor={props.option.attributeName}>
+          <span className="text-gray-800 hover:text-blue-700">{props.option.labelText}</span>
           {AdditionalExplanation}
         </label>
       </li>
@@ -210,8 +189,7 @@ const ANNOTATION_FLAGS: annotationBool[] = [
   },
   {
     attributeName: "encourages_violence",
-    labelText:
-      "Encourages or fails to discourage violence/abuse/terrorism/self-harm",
+    labelText: "Encourages or fails to discourage violence/abuse/terrorism/self-harm",
   },
   {
     attributeName: "denigrates_a_protected_class",
@@ -229,8 +207,7 @@ const ANNOTATION_FLAGS: annotationBool[] = [
   },
 ];
 
-const SAMPLE_PROMPT =
-  "Please make a list of aspects of a good pull request. Briefly describe each aspect.";
+const SAMPLE_PROMPT = "Please make a list of aspects of a good pull request. Briefly describe each aspect.";
 
 const SAMPLE_OUTPUT = `Here are some aspects of a good pull request, which you may use to help your pull requests be good contributions and get accepted:
 
diff --git a/website/src/pages/login.jsx b/website/src/pages/login.jsx
index c3e840fd..a0fef60b 100644
--- a/website/src/pages/login.jsx
+++ b/website/src/pages/login.jsx
@@ -14,14 +14,7 @@ export default function Login() {
       <AuthLayout title="" subtitle={<></>}>
         <form>
           <div className="space-y-6">
-            <TextField
-              label="Email address"
-              id="email"
-              name="email"
-              type="email"
-              autoComplete="email"
-              required
-            />
+            <TextField label="Email address" id="email" name="email" type="email" autoComplete="email" required />
             <TextField
               label="Password"
               id="password"
diff --git a/website/src/pages/new_task.js b/website/src/pages/new_task.js
index 77577662..123ee0a5 100644
--- a/website/src/pages/new_task.js
+++ b/website/src/pages/new_task.js
@@ -39,17 +39,13 @@ export default function NewPage() {
   // Every time we submit an answer to the latest task, let the backend handle
   // all the interactions then add the resulting task to the queue.  This ends
   // when we hit the done task.
-  const { trigger, isMutating } = useSWRMutation(
-    "/api/update_task",
-    sendRequest,
-    {
-      onSuccess: async (data) => {
-        const newTask = await data.json();
-        // This is the more efficient way to update a react state array.
-        setTasks((oldTasks) => [...oldTasks, newTask]);
-      },
-    }
-  );
+  const { trigger, isMutating } = useSWRMutation("/api/update_task", sendRequest, {
+    onSuccess: async (data) => {
+      const newTask = await data.json();
+      // This is the more efficient way to update a react state array.
+      setTasks((oldTasks) => [...oldTasks, newTask]);
+    },
+  });
 
   // Trigger a mutation that updates the current task.  We should probably
   // signal somewhere that this interaction is being processed.
diff --git a/website/src/styles/globals.css b/website/src/styles/globals.css
index 4b708c87..f3d01a75 100644
--- a/website/src/styles/globals.css
+++ b/website/src/styles/globals.css
@@ -29,20 +29,20 @@ a {
   }
 } */
 @font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-display: block;
-  font-style: normal;
-  font-named-instance: "Regular";
-  src: url("/fonts/Inter-roman.var.woff2") format("woff2");
+    font-family: "Inter";
+    font-weight: 100 900;
+    font-display: block;
+    font-style: normal;
+    font-named-instance: "Regular";
+    src: url("/fonts/Inter-roman.var.woff2") format("woff2");
 }
 @font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-display: block;
-  font-style: italic;
-  font-named-instance: "Italic";
-  src: url("/fonts/Inter-italic.var.woff2") format("woff2");
+    font-family: "Inter";
+    font-weight: 100 900;
+    font-display: block;
+    font-style: italic;
+    font-named-instance: "Italic";
+    src: url("/fonts/Inter-italic.var.woff2") format("woff2");
 }
 
 @tailwind base;
@@ -50,5 +50,5 @@ a {
 @tailwind utilities;
 
 #__next {
-  min-height: 100%;
+    min-height: 100%;
 }
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index 268c7934..e6622da1 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -1,77 +1,77 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './src/**/*.{html,js,ts,jsx,tsx,svg}',
-    './node_modules/tw-elements/dist/js/**/*.js'],
-    theme: {
-      fontSize: {
-        xs: ['0.75rem', { lineHeight: '1rem' }],
-        sm: ['0.875rem', { lineHeight: '1.5rem' }],
-        base: ['1rem', { lineHeight: '1.5rem' }],
-        lg: ['1.125rem', { lineHeight: '2rem' }],
-        xl: ['1.25rem', { lineHeight: '1.75rem' }],
-        '2xl': ['1.5rem', { lineHeight: '2rem' }],
-        '3xl': ['2rem', { lineHeight: '3rem' }],
-        '4xl': ['2.5rem', { lineHeight: '3rem' }],
-        '5xl': ['3rem', { lineHeight: '1' }],
-        '6xl': ['3.75rem', { lineHeight: '1' }],
-        '7xl': ['4.5rem', { lineHeight: '1' }],
-        '8xl': ['6rem', { lineHeight: '1' }],
-        '9xl': ['8rem', { lineHeight: '1' }],
+    "./src/**/*.{html,js,ts,jsx,tsx,svg}",
+    "./node_modules/tw-elements/dist/js/**/*.js",
+  ],
+  theme: {
+    fontSize: {
+      xs: ["0.75rem", { lineHeight: "1rem" }],
+      sm: ["0.875rem", { lineHeight: "1.5rem" }],
+      base: ["1rem", { lineHeight: "1.5rem" }],
+      lg: ["1.125rem", { lineHeight: "2rem" }],
+      xl: ["1.25rem", { lineHeight: "1.75rem" }],
+      "2xl": ["1.5rem", { lineHeight: "2rem" }],
+      "3xl": ["2rem", { lineHeight: "3rem" }],
+      "4xl": ["2.5rem", { lineHeight: "3rem" }],
+      "5xl": ["3rem", { lineHeight: "1" }],
+      "6xl": ["3.75rem", { lineHeight: "1" }],
+      "7xl": ["4.5rem", { lineHeight: "1" }],
+      "8xl": ["6rem", { lineHeight: "1" }],
+      "9xl": ["8rem", { lineHeight: "1" }],
+    },
+    extend: {
+      screens: {
+        "lt-lg": { max: "1023px" },
+        "lt-md": { max: "767px" },
+        "gt-sm": { min: "641px" },
+        "gt-md": { min: "768px" },
       },
-      extend: {
-        screens: {
-          'lt-lg': { max: '1023px' },
-          'lt-md': { max: '767px' },
-          'gt-sm': { min: '641px' },
-          'gt-md': { min: '768px' },
-        },
-        animation: {
-          'fade-in': 'fade-in 0.5s linear forwards',
-          marquee: 'marquee var(--marquee-duration) linear infinite',
-          'spin-slow': 'spin 4s linear infinite',
-          'spin-slower': 'spin 6s linear infinite',
-          'spin-reverse': 'spin-reverse 1s linear infinite',
-          'spin-reverse-slow': 'spin-reverse 4s linear infinite',
-          'spin-reverse-slower': 'spin-reverse 6s linear infinite',
-        },
-        borderRadius: {
-          '4xl': '2rem',
-          '5xl': '2.5rem',
-        },
-        colors: ({ colors }) => ({
-          gray: colors.neutral,
-        }),
-        fontFamily: {
-          sans: ['Inter', ...defaultTheme.fontFamily.sans],
-        },
-        keyframes: {
-          'fade-in': {
-            from: {
-              opacity: 0,
-            },
-            to: {
-              opacity: 1,
-            },
+      animation: {
+        "fade-in": "fade-in 0.5s linear forwards",
+        marquee: "marquee var(--marquee-duration) linear infinite",
+        "spin-slow": "spin 4s linear infinite",
+        "spin-slower": "spin 6s linear infinite",
+        "spin-reverse": "spin-reverse 1s linear infinite",
+        "spin-reverse-slow": "spin-reverse 4s linear infinite",
+        "spin-reverse-slower": "spin-reverse 6s linear infinite",
+      },
+      borderRadius: {
+        "4xl": "2rem",
+        "5xl": "2.5rem",
+      },
+      colors: ({ colors }) => ({
+        gray: colors.neutral,
+      }),
+      fontFamily: {
+        sans: ["Inter", ...defaultTheme.fontFamily.sans],
+      },
+      keyframes: {
+        "fade-in": {
+          from: {
+            opacity: 0,
           },
-          marquee: {
-            '100%': {
-              transform: 'translateY(-50%)',
-            },
-          },
-          'spin-reverse': {
-            to: {
-              transform: 'rotate(-360deg)',
-            },
+          to: {
+            opacity: 1,
           },
         },
-        maxWidth: {
-          '2xl': '40rem',
+        marquee: {
+          "100%": {
+            transform: "translateY(-50%)",
+          },
         },
+        "spin-reverse": {
+          to: {
+            transform: "rotate(-360deg)",
+          },
+        },
+      },
+      maxWidth: {
+        "2xl": "40rem",
       },
     },
-    plugins: [require('@tailwindcss/forms')],
-  }
-  
\ No newline at end of file
+  },
+  plugins: [require("@tailwindcss/forms")],
+};
diff --git a/website/tsconfig.json b/website/tsconfig.json
index 6db37c02..1563f3e8 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -19,12 +15,6 @@
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }