Add Prettier. Remove unused Button component

This commit is contained in:
Lennon Puldagrealy
2022-12-18 11:14:41 -08:00
parent 278189d015
commit ed47bcaa7a
21 changed files with 374 additions and 353 deletions
+22
View File
@@ -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",
+1
View File
@@ -39,6 +39,7 @@
"devDependencies": {
"@types/node": "18.11.17",
"@types/react": "18.0.26",
"prettier": "2.8.1",
"prisma": "^4.7.1"
}
}
+1
View File
@@ -0,0 +1 @@
+1
View File
@@ -0,0 +1 @@
{}
+3 -4
View File
@@ -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) {
<circle cx={545} cy={545} r="416.5" />
<circle cx={545} cy={545} r="352.5" />
</svg>
)
);
}
export function AuthLayout({ title, subtitle, children }) {
@@ -43,5 +42,5 @@ export function AuthLayout({ title, subtitle, children }) {
</div>
</div>
</main>
)
);
}
-39
View File
@@ -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 ? (
<Link ref={ref} href={href} className={className} {...props} />
) : (
<button ref={ref} className={className} {...props} />
)
})
+49 -31
View File
@@ -1,6 +1,5 @@
import { CircleBackground } from './CircleBackground'
import { Container } from './Container'
import { CircleBackground } from "./CircleBackground";
import { Container } from "./Container";
export function CallToAction() {
return (
@@ -17,42 +16,61 @@ export function CallToAction() {
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">
<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"
>
<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"/>
</svg>
<span className="text-lg ml-3">DISCORD</span>
</button>
</a>
<a href="https://discord.gg/pXtnYk9c" 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"
>
<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"
/>
</svg>
<span className="text-lg ml-3">DISCORD</span>
</button>
</a>
<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"
<a
href="https://github.com/LAION-AI/Open-Assistant"
target="_blank"
>
<svg className="mr-2 -ml-1 w-6 h-6" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
<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"
>
<svg
className="mr-2 -ml-1 w-6 h-6"
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="github"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 496 512"
>
<path
fill="currentColor"
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
></path>
</svg>
<span className="text-lg ml-1">Github</span>
</button>
</a>
<span className="text-lg ml-1">Github</span>
</button>
</a>
</div>
</div>
</Container>
</section>
)
);
}
+3 -3
View File
@@ -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 (
<svg
@@ -41,5 +41,5 @@ export function CircleBackground({
strokeLinecap="round"
/>
</svg>
)
);
}
+3 -3
View File
@@ -1,10 +1,10 @@
import clsx from 'clsx'
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)}
className={clsx("mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)}
{...props}
/>
)
);
}
+8 -8
View File
@@ -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() {
</ul>
</Container>
</section>
)
);
}
+7 -7
View File
@@ -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}
</label>
)
);
}
export function TextField({ id, label, type = 'text', className, ...props }) {
export function TextField({ id, label, type = "text", className, ...props }) {
return (
<div className={className}>
{label && <Label id={id}>{label}</Label>}
<input id={id} type={type} {...props} className={formClasses} />
</div>
)
);
}
export function SelectField({ id, label, className, ...props }) {
return (
<div className={className}>
{label && <Label id={id}>{label}</Label>}
<select id={id} {...props} className={clsx(formClasses, 'pr-8')} />
<select id={id} {...props} className={clsx(formClasses, "pr-8")} />
</div>
)
);
}
+15 -16
View File
@@ -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() {
<div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-16">
<div>
<div className="flex items-center text-gray-900">
<Link href="/" aria-label="Home" className='flex items-center'>
<Image src="/images/logos/CHAT-THOUGHT-LOGO.svg" className="mx-auto object-fill" width="50" height="50" alt="logo"/>
</Link>
<Link href="/" aria-label="Home" className="flex items-center">
<Image
src="/images/logos/CHAT-THOUGHT-LOGO.svg"
className="mx-auto object-fill"
width="50"
height="50"
alt="logo"
/>
</Link>
<div className="ml-4">
<p className="text-base font-semibold">Open Assistant</p>
<p className="mt-1 text-sm">Conversational AI for everyone.</p>
</div>
</div>
<nav className="mt-11 flex gap-8">
{/* <NavLinks /> */}
</nav>
<nav className="mt-11 flex gap-8">{/* <NavLinks /> */}</nav>
</div>
</div>
</Container>
</footer>
)
);
}
+19 -16
View File
@@ -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"
/>
</svg>
)
);
}
function ChevronUpIcon(props) {
@@ -29,7 +29,7 @@ function ChevronUpIcon(props) {
strokeLinejoin="round"
/>
</svg>
)
);
}
function MobileNavLink({ children, ...props }) {
@@ -42,7 +42,7 @@ function MobileNavLink({ children, ...props }) {
>
{children}
</Popover.Button>
)
);
}
export function Header() {
@@ -51,9 +51,15 @@ export function Header() {
<nav>
<Container className="relative z-50 flex justify-between py-8">
<div className="relative z-10 flex items-center gap-16">
<Link href="/" aria-label="Home" className='flex items-center'>
<Image src="/images/logos/CHAT-THOUGHT-LOGO.svg" className="mx-auto object-fill" width="50" height="50" alt="logo"/>
<span className='text-2xl font-bold ml-3'>Open Assistant</span>
<Link href="/" aria-label="Home" className="flex items-center">
<Image
src="/images/logos/CHAT-THOUGHT-LOGO.svg"
className="mx-auto object-fill"
width="50"
height="50"
alt="logo"
/>
<span className="text-2xl font-bold ml-3">Open Assistant</span>
</Link>
<div className="hidden lg:flex lg:gap-10">
<NavLinks />
@@ -105,7 +111,6 @@ export function Header() {
<MobileNavLink href="#faqs">FAQs</MobileNavLink>
</div>
<div className="mt-8 flex flex-col gap-4">
<a href="/login">
<button
type="button"
@@ -114,8 +119,6 @@ export function Header() {
Log in
</button>
</a>
</div>
</Popover.Panel>
</>
@@ -136,5 +139,5 @@ export function Header() {
</Container>
</nav>
</header>
)
);
}
+15 -11
View File
@@ -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 (
<div {...props}>
@@ -69,10 +69,9 @@ function BackgroundIllustration(props) {
</defs>
</svg>
</div>
)
);
}
export function Hero() {
return (
<div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
@@ -90,20 +89,25 @@ export function Hero() {
</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.
and images in new ways, we want to improve the world by providing
amazing conversational AI.
</p>
</div>
<div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
<BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/3 stroke-gray-300/70 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0" />
<div className="-mx-4 h-[448px] px-9 [mask-image:linear-gradient(to_bottom,white_60%,transparent)] sm:mx-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
<Image src="/images/logos/CHAT-THOUGHT-CONVO.svg" className="mx-auto mr-6 object-fill" width="450" height="450" alt={''}/>
<Image
src="/images/logos/CHAT-THOUGHT-CONVO.svg"
className="mx-auto mr-6 object-fill"
width="450"
height="450"
alt={""}
/>
</div>
</div>
</div>
</Container>
</div>
)
);
}
+36 -36
View File
@@ -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) => (
<Link
key={label}
href={href}
className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
onMouseEnter={() => setHoveredIndex(index)}
onMouseLeave={() => setHoveredIndex(null)}
>
<AnimatePresence>
{hoveredIndex === index && (
<motion.span
className="absolute inset-0 rounded-lg bg-gray-100"
layoutId="hoverBackground"
initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0.15 } }}
exit={{
opacity: 0,
transition: { duration: 0.15, delay: 0.2 },
}}
/>
)}
</AnimatePresence>
<span className="relative z-10">{label}</span>
</Link>
))}
</>
let [hoveredIndex, setHoveredIndex] = useState(null);
return (
<>
{[
["Join Us", "#join-us"],
["FAQ", "#faq"],
].map(([label, href], index) => (
<Link
key={label}
href={href}
className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
onMouseEnter={() => setHoveredIndex(index)}
onMouseLeave={() => setHoveredIndex(null)}
>
<AnimatePresence>
{hoveredIndex === index && (
<motion.span
className="absolute inset-0 rounded-lg bg-gray-100"
layoutId="hoverBackground"
initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0.15 } }}
exit={{
opacity: 0,
transition: { duration: 0.15, delay: 0.2 },
}}
/>
)}
</AnimatePresence>
<span className="relative z-10">{label}</span>
</Link>
))}
</>
);
}
+2 -3
View File
@@ -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());
+7 -5
View File
@@ -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 (
<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 />
<NextScript />
</body>
</Html>
)
);
}
+147 -130
View File
@@ -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 <>
<div className=" p-6 h-full mx-auto bg-slate-100 text-gray-800">
{/* Instrunction and Output panels */}
<section className="mb-8 lt-lg:mb-12 ">
<div className="grid lg:gap-x-12 lg:grid-cols-2">
{/* Instruction panel */}
<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}
return (
<>
<div className=" p-6 h-full mx-auto bg-slate-100 text-gray-800">
{/* Instrunction and Output panels */}
<section className="mb-8 lt-lg:mb-12 ">
<div className="grid lg:gap-x-12 lg:grid-cols-2">
{/* Instruction panel */}
<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>
</div>
</div>
{/* Output panel */}
<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}
{/* Output panel */}
<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>
</div>
{/* Form wrap*/}
<div className="p-6">
<h3 className="text-lg text-center font-medium leading-6 text-gray-900">Rating</h3>
{/* 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>
{/* Rating buttons */}
<div className="flex justify-center p-6">
<button
@@ -81,68 +79,77 @@ export default function OutputDetail(): JSX.Element {
7
</button>
</div>
</div>
{/* Annotation checkboxes */}
<div className="flex justify-center px-10">
<ul>
{ANNOTATION_FLAGS.map((option, i) => {
return (
<AnnotationCheckboxLi
option={option}
key={i}
></AnnotationCheckboxLi>
);
})}
</ul>
</div>
<div className="flex justify-center p-6">
<textarea
id="notes"
name="notes"
className="mx-1 mb-1 max-w-lg shadow-sm rounded-md focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300"
placeholder="Optional notes"
defaultValue={""}
/>
</div>
</div>
</div>
</section>
{/* Info & controls */}
<section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
<div className="flex flex-col justify-self-start text-gray-700">
<div>
<span>
<b>Prompt</b>
</span>
<span className="ml-2">d1fb481a-e6cd-445d-9a15-8e2add854fe1</span>
</div>
<div>
<span>
<b>Output</b>
</span>
<span className="ml-2">a5f85b0a-e11a-472c-bc73-946fdc2a6ec2</span>
</div>
</div>
{/* Annotation checkboxes */}
<div className="flex justify-center px-10">
<ul>
{ANNOTATION_FLAGS.map((option, i) => {
return <AnnotationCheckboxLi option={option} key={i}></AnnotationCheckboxLi>;
})}
</ul>
{/* Skip / Submit controls */}
<div className="flex justify-center ml-auto">
<button
type="button"
className="mr-2 inline-flex items-center rounded-md border border-transparent bg-indigo-100 px-4 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Skip
</button>
<button
type="button"
className="nline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Submit
</button>
</div>
<div className="flex justify-center p-6">
<textarea
id="notes"
name="notes"
className="mx-1 mb-1 max-w-lg shadow-sm rounded-md focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300"
placeholder="Optional notes"
defaultValue={''}
/>
</div>
</div>
</div>
</section>
{/* Info & controls */}
<section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
<div className="flex flex-col justify-self-start text-gray-700">
<div><span><b>Prompt</b></span><span className='ml-2'>d1fb481a-e6cd-445d-9a15-8e2add854fe1</span></div>
<div><span><b>Output</b></span><span className='ml-2'>a5f85b0a-e11a-472c-bc73-946fdc2a6ec2</span></div>
</div>
{/* Skip / Submit controls */}
<div className="flex justify-center ml-auto">
<button
type="button"
className="mr-2 inline-flex items-center rounded-md border border-transparent bg-indigo-100 px-4 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Skip
</button>
<button
type="button"
className="nline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Submit
</button>
</div>
</section>
</div>
</>;
</section>
</div>
</>
);
}
function AnnotationCheckboxLi(props: { option: annotationBool}): JSX.Element {
function AnnotationCheckboxLi(props: { option: annotationBool }): JSX.Element {
let AdditionalExplanation = null;
if (props.option.additionalExplanation){
if (props.option.additionalExplanation) {
AdditionalExplanation = (
<a href ="#"
className="group flex items-center space-x-2.5 text-sm "
>
<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"
@@ -150,31 +157,30 @@ function AnnotationCheckboxLi(props: { option: annotationBool}): JSX.Element {
</a>
);
}
return <>
<li className="form-check flex mb-1">
<input
className="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
type="checkbox"
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>
{AdditionalExplanation}
</label>
</li>
</>;
return (
<>
<li className="form-check flex mb-1">
<input
className="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
type="checkbox"
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>
{AdditionalExplanation}
</label>
</li>
</>
);
}
interface annotationBool {
attributeName: string;
labelText: string;
@@ -182,38 +188,49 @@ interface annotationBool {
}
const ANNOTATION_FLAGS: annotationBool[] = [
// For the time being this list is configured on the FE.
// In the future it may be provided by the API.
{ attributeName: 'fails_task',
labelText: 'Fails to follow the correct instruction / task',
additionalExplanation: '__TODO__'
// For the time being this list is configured on the FE.
// In the future it may be provided by the API.
{
attributeName: "fails_task",
labelText: "Fails to follow the correct instruction / task",
additionalExplanation: "__TODO__",
},
{ attributeName: 'not_customer_assistant_appropriate',
labelText: 'Inappropriate for customer assistant',
additionalExplanation: '__TODO__'
{
attributeName: "not_customer_assistant_appropriate",
labelText: "Inappropriate for customer assistant",
additionalExplanation: "__TODO__",
},
{ attributeName: 'contains_sexual_content',
labelText: 'Contains sexual content',
{
attributeName: "contains_sexual_content",
labelText: "Contains sexual content",
},
{ attributeName: 'contains_violent_content',
labelText: 'Contains violent content',
{
attributeName: "contains_violent_content",
labelText: "Contains violent content",
},
{ attributeName: 'encourages_violence',
labelText: 'Encourages or fails to discourage violence/abuse/terrorism/self-harm',
{
attributeName: "encourages_violence",
labelText:
"Encourages or fails to discourage violence/abuse/terrorism/self-harm",
},
{ attributeName: 'denigrates_a_protected_class',
labelText: 'Denigrates a protected class',
{
attributeName: "denigrates_a_protected_class",
labelText: "Denigrates a protected class",
},
{ attributeName: 'gives_harmful_advice',
labelText: 'Fails to follow the correct instruction / task',
additionalExplanation: 'The advice given in the output is harmful or counter-productive. This may be in addition to, but is distinct from the question about encouraging violence/abuse/terrorism/self-harm.',
{
attributeName: "gives_harmful_advice",
labelText: "Fails to follow the correct instruction / task",
additionalExplanation:
"The advice given in the output is harmful or counter-productive. This may be in addition to, but is distinct from the question about encouraging violence/abuse/terrorism/self-harm.",
},
{ attributeName: 'expresses_moral_judgement',
labelText: 'Expresses moral judgement',
{
attributeName: "expresses_moral_judgement",
labelText: "Expresses moral judgement",
},
]
];
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:
@@ -228,4 +245,4 @@ const SAMPLE_OUTPUT = `Here are some aspects of a good pull request, which you m
5. Rebase onto the master branch before creating your PR
6. Respond to reviews quickly
7. Thank reviewers for their suggestions
`;
`;
+22 -22
View File
@@ -1,13 +1,13 @@
import { Auth, ThemeSupa } from "@supabase/auth-ui-react";
import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
import Head from 'next/head'
import Head from "next/head";
import { CallToAction } from '../components/CallToAction';
import { Faq } from '../components/Faq';
import { Footer } from '../components/Footer';
import { Header } from '../components/Header';
import { Hero } from '../components/Hero';
import { CallToAction } from "../components/CallToAction";
import { Faq } from "../components/Faq";
import { Footer } from "../components/Footer";
import { Header } from "../components/Header";
import { Hero } from "../components/Hero";
import styles from "../styles/Home.module.css";
@@ -24,22 +24,22 @@ export default function Home() {
if (!session) {
return (
<>
<Head>
<title>Open Assistant</title>
<meta
name="description"
content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
/>
</Head>
<Header />
<main>
<Hero />
<CallToAction />
<Faq />
</main>
<Footer />
</>
<Head>
<title>Open Assistant</title>
<meta
name="description"
content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
/>
</Head>
<Header />
<main>
<Hero />
<CallToAction />
<Faq />
</main>
<Footer />
</>
);
}
return (
+7 -13
View File
@@ -1,9 +1,9 @@
import Head from 'next/head'
import Link from 'next/link'
import Head from "next/head";
import Link from "next/link";
import { AuthLayout } from '@/components/AuthLayout'
import { Button } from '@/components/Button'
import { TextField } from '@/components/Fields'
import { AuthLayout } from "@/components/AuthLayout";
import { Button } from "@/components/Button";
import { TextField } from "@/components/Fields";
export default function Login() {
return (
@@ -11,13 +11,7 @@ export default function Login() {
<Head>
<title>Log in</title>
</Head>
<AuthLayout
title=""
subtitle={
<>
</>
}
>
<AuthLayout title="" subtitle={<></>}>
<form>
<div className="space-y-6">
<TextField
@@ -43,5 +37,5 @@ export default function Login() {
</form>
</AuthLayout>
</>
)
);
}
+6 -6
View File
@@ -29,20 +29,20 @@ a {
}
} */
@font-face {
font-family: 'Inter';
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-named-instance: "Regular";
src: url("/fonts/Inter-roman.var.woff2") format("woff2");
}
@font-face {
font-family: 'Inter';
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-named-instance: "Italic";
src: url("/fonts/Inter-italic.var.woff2") format("woff2");
}
@tailwind base;