mirror of
https://github.com/wassname/Open-Assistant.git
synced 2026-09-10 11:41:04 +08:00
Add Prettier. Remove unused Button component
This commit is contained in:
Lennon Puldagrealy
Generated
+22
@@ -37,6 +37,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "18.11.17",
|
"@types/node": "18.11.17",
|
||||||
"@types/react": "18.0.26",
|
"@types/react": "18.0.26",
|
||||||
|
"prettier": "2.8.1",
|
||||||
"prisma": "^4.7.1"
|
"prisma": "^4.7.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -3536,6 +3537,21 @@
|
|||||||
"node": ">= 0.8.0"
|
"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": {
|
"node_modules/pretty-format": {
|
||||||
"version": "3.8.0",
|
"version": "3.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
|
||||||
"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
|
"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": {
|
"pretty-format": {
|
||||||
"version": "3.8.0",
|
"version": "3.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
|
||||||
|
|||||||
@@ -39,6 +39,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "18.11.17",
|
"@types/node": "18.11.17",
|
||||||
"@types/react": "18.0.26",
|
"@types/react": "18.0.26",
|
||||||
|
"prettier": "2.8.1",
|
||||||
"prisma": "^4.7.1"
|
"prisma": "^4.7.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
{}
|
||||||
@@ -1,5 +1,4 @@
|
|||||||
import Link from 'next/link'
|
import Link from "next/link";
|
||||||
|
|
||||||
|
|
||||||
function BackgroundIllustration(props) {
|
function BackgroundIllustration(props) {
|
||||||
return (
|
return (
|
||||||
@@ -15,7 +14,7 @@ function BackgroundIllustration(props) {
|
|||||||
<circle cx={545} cy={545} r="416.5" />
|
<circle cx={545} cy={545} r="416.5" />
|
||||||
<circle cx={545} cy={545} r="352.5" />
|
<circle cx={545} cy={545} r="352.5" />
|
||||||
</svg>
|
</svg>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function AuthLayout({ title, subtitle, children }) {
|
export function AuthLayout({ title, subtitle, children }) {
|
||||||
@@ -43,5 +42,5 @@ export function AuthLayout({ title, subtitle, children }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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} />
|
|
||||||
)
|
|
||||||
})
|
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
|
import { CircleBackground } from "./CircleBackground";
|
||||||
import { CircleBackground } from './CircleBackground'
|
import { Container } from "./Container";
|
||||||
import { Container } from './Container'
|
|
||||||
|
|
||||||
export function CallToAction() {
|
export function CallToAction() {
|
||||||
return (
|
return (
|
||||||
@@ -17,42 +16,61 @@ export function CallToAction() {
|
|||||||
Join Us
|
Join Us
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-4 text-lg text-gray-300">
|
<p className="mt-4 text-lg text-gray-300">
|
||||||
All open source projects begin with people like you.
|
All open source projects begin with people like you. Open source is
|
||||||
Open source is the belief that if we collaborate we can together
|
the belief that if we collaborate we can together gift our
|
||||||
gift our knoweledge and technology to the world for the benefit
|
knoweledge and technology to the world for the benefit of humanity.
|
||||||
of humanity. Are you in? Find us here:
|
Are you in? Find us here:
|
||||||
</p>
|
</p>
|
||||||
<div className="mt-8 flex justify-center">
|
<div className="mt-8 flex justify-center">
|
||||||
|
<a href="https://discord.gg/pXtnYk9c" target="_blank">
|
||||||
<a href="https://discord.gg/pXtnYk9c" target="_blank">
|
<button
|
||||||
<button
|
type="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"
|
||||||
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
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" className="w-6 h-6">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<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"/>
|
viewBox="0 0 640 512"
|
||||||
</svg>
|
className="w-6 h-6"
|
||||||
<span className="text-lg ml-3">DISCORD</span>
|
>
|
||||||
</button>
|
<path
|
||||||
</a>
|
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">
|
<a
|
||||||
<button
|
href="https://github.com/LAION-AI/Open-Assistant"
|
||||||
type="button"
|
target="_blank"
|
||||||
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">
|
<button
|
||||||
<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>
|
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>
|
</svg>
|
||||||
|
|
||||||
<span className="text-lg ml-1">Github</span>
|
<span className="text-lg ml-1">Github</span>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useId } from 'react'
|
import { useId } from "react";
|
||||||
|
|
||||||
export function CircleBackground({
|
export function CircleBackground({
|
||||||
color,
|
color,
|
||||||
@@ -6,7 +6,7 @@ export function CircleBackground({
|
|||||||
height = 558,
|
height = 558,
|
||||||
...props
|
...props
|
||||||
}) {
|
}) {
|
||||||
let id = useId()
|
let id = useId();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
@@ -41,5 +41,5 @@ export function CircleBackground({
|
|||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import clsx from 'clsx'
|
import clsx from "clsx";
|
||||||
|
|
||||||
export function Container({ className, ...props }) {
|
export function Container({ className, ...props }) {
|
||||||
return (
|
return (
|
||||||
<div
|
<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}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,20 +1,20 @@
|
|||||||
import Link from 'next/link'
|
import Link from "next/link";
|
||||||
|
|
||||||
import { Container } from './Container'
|
import { Container } from "./Container";
|
||||||
|
|
||||||
const faqs = [
|
const faqs = [
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
question: 'How far along is this project?',
|
question: "How far along is this project?",
|
||||||
answer:
|
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:
|
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.',
|
// 'Please feel free to reach out to us on Discord. We are happy to answer any questions you may have.',
|
||||||
// },
|
// },
|
||||||
],
|
],
|
||||||
]
|
];
|
||||||
|
|
||||||
export function Faq() {
|
export function Faq() {
|
||||||
return (
|
return (
|
||||||
@@ -73,5 +73,5 @@ export function Faq() {
|
|||||||
</ul>
|
</ul>
|
||||||
</Container>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import clsx from 'clsx'
|
import clsx from "clsx";
|
||||||
|
|
||||||
const formClasses =
|
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 }) {
|
function Label({ id, children }) {
|
||||||
return (
|
return (
|
||||||
@@ -11,23 +11,23 @@ function Label({ id, children }) {
|
|||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</label>
|
</label>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TextField({ id, label, type = 'text', className, ...props }) {
|
export function TextField({ id, label, type = "text", className, ...props }) {
|
||||||
return (
|
return (
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
{label && <Label id={id}>{label}</Label>}
|
{label && <Label id={id}>{label}</Label>}
|
||||||
<input id={id} type={type} {...props} className={formClasses} />
|
<input id={id} type={type} {...props} className={formClasses} />
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SelectField({ id, label, className, ...props }) {
|
export function SelectField({ id, label, className, ...props }) {
|
||||||
return (
|
return (
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
{label && <Label id={id}>{label}</Label>}
|
{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>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,8 @@
|
|||||||
import Image from 'next/image'
|
import Image from "next/image";
|
||||||
import Link from 'next/link'
|
import Link from "next/link";
|
||||||
|
|
||||||
|
|
||||||
import { Container } from './Container'
|
|
||||||
import { NavLinks } from './NavLinks'
|
|
||||||
|
|
||||||
|
import { Container } from "./Container";
|
||||||
|
import { NavLinks } from "./NavLinks";
|
||||||
|
|
||||||
export function Footer() {
|
export function Footer() {
|
||||||
return (
|
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 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>
|
||||||
<div className="flex items-center text-gray-900">
|
<div className="flex items-center text-gray-900">
|
||||||
<Link href="/" aria-label="Home" className='flex items-center'>
|
<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"/>
|
<Image
|
||||||
|
src="/images/logos/CHAT-THOUGHT-LOGO.svg"
|
||||||
</Link>
|
className="mx-auto object-fill"
|
||||||
|
width="50"
|
||||||
|
height="50"
|
||||||
|
alt="logo"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
|
||||||
<div className="ml-4">
|
<div className="ml-4">
|
||||||
<p className="text-base font-semibold">Open Assistant</p>
|
<p className="text-base font-semibold">Open Assistant</p>
|
||||||
<p className="mt-1 text-sm">Conversational AI for everyone.</p>
|
<p className="mt-1 text-sm">Conversational AI for everyone.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav className="mt-11 flex gap-8">
|
<nav className="mt-11 flex gap-8">{/* <NavLinks /> */}</nav>
|
||||||
{/* <NavLinks /> */}
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</footer>
|
</footer>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import Link from 'next/link'
|
import Link from "next/link";
|
||||||
import { Popover } from '@headlessui/react'
|
import { Popover } from "@headlessui/react";
|
||||||
import { AnimatePresence, motion } from 'framer-motion'
|
import { AnimatePresence, motion } from "framer-motion";
|
||||||
|
|
||||||
import { Container } from './Container'
|
import { Container } from "./Container";
|
||||||
import Image from 'next/image'
|
import Image from "next/image";
|
||||||
import { NavLinks } from './NavLinks'
|
import { NavLinks } from "./NavLinks";
|
||||||
|
|
||||||
function MenuIcon(props) {
|
function MenuIcon(props) {
|
||||||
return (
|
return (
|
||||||
@@ -16,7 +16,7 @@ function MenuIcon(props) {
|
|||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function ChevronUpIcon(props) {
|
function ChevronUpIcon(props) {
|
||||||
@@ -29,7 +29,7 @@ function ChevronUpIcon(props) {
|
|||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MobileNavLink({ children, ...props }) {
|
function MobileNavLink({ children, ...props }) {
|
||||||
@@ -42,7 +42,7 @@ function MobileNavLink({ children, ...props }) {
|
|||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</Popover.Button>
|
</Popover.Button>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Header() {
|
export function Header() {
|
||||||
@@ -51,9 +51,15 @@ export function Header() {
|
|||||||
<nav>
|
<nav>
|
||||||
<Container className="relative z-50 flex justify-between py-8">
|
<Container className="relative z-50 flex justify-between py-8">
|
||||||
<div className="relative z-10 flex items-center gap-16">
|
<div className="relative z-10 flex items-center gap-16">
|
||||||
<Link href="/" aria-label="Home" className='flex items-center'>
|
<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"/>
|
<Image
|
||||||
<span className='text-2xl font-bold ml-3'>Open Assistant</span>
|
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>
|
</Link>
|
||||||
<div className="hidden lg:flex lg:gap-10">
|
<div className="hidden lg:flex lg:gap-10">
|
||||||
<NavLinks />
|
<NavLinks />
|
||||||
@@ -105,7 +111,6 @@ export function Header() {
|
|||||||
<MobileNavLink href="#faqs">FAQs</MobileNavLink>
|
<MobileNavLink href="#faqs">FAQs</MobileNavLink>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-8 flex flex-col gap-4">
|
<div className="mt-8 flex flex-col gap-4">
|
||||||
|
|
||||||
<a href="/login">
|
<a href="/login">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -114,8 +119,6 @@ export function Header() {
|
|||||||
Log in
|
Log in
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</Popover.Panel>
|
</Popover.Panel>
|
||||||
</>
|
</>
|
||||||
@@ -136,5 +139,5 @@ export function Header() {
|
|||||||
</Container>
|
</Container>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { useId } from 'react'
|
import { useId } from "react";
|
||||||
import Image from 'next/image'
|
import Image from "next/image";
|
||||||
|
|
||||||
import { Container } from './Container'
|
import { Container } from "./Container";
|
||||||
|
|
||||||
function BackgroundIllustration(props) {
|
function BackgroundIllustration(props) {
|
||||||
let id = useId()
|
let id = useId();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div {...props}>
|
<div {...props}>
|
||||||
@@ -69,10 +69,9 @@ function BackgroundIllustration(props) {
|
|||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export function Hero() {
|
export function Hero() {
|
||||||
return (
|
return (
|
||||||
<div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
|
<div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
|
||||||
@@ -90,20 +89,25 @@ export function Hero() {
|
|||||||
</p>
|
</p>
|
||||||
<p className="mt-6 text-lg text-gray-600">
|
<p className="mt-6 text-lg text-gray-600">
|
||||||
In the same way that Stable Diffusion helped the world make art
|
In the same way that Stable Diffusion helped the world make art
|
||||||
and images in new ways, we want to improve
|
and images in new ways, we want to improve the world by providing
|
||||||
the world by providing amazing conversational AI.
|
amazing conversational AI.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
|
<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" />
|
<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">
|
<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>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,40 +1,40 @@
|
|||||||
import { useState } from 'react'
|
import { useState } from "react";
|
||||||
import Link from 'next/link'
|
import Link from "next/link";
|
||||||
import { AnimatePresence, motion } from 'framer-motion'
|
import { AnimatePresence, motion } from "framer-motion";
|
||||||
|
|
||||||
export function NavLinks(): JSX.Element {
|
export function NavLinks(): JSX.Element {
|
||||||
let [hoveredIndex, setHoveredIndex] = useState(null)
|
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>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
|
|
||||||
|
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>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
|
import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
|
||||||
import { SessionContextProvider } from "@supabase/auth-helpers-react";
|
import { SessionContextProvider } from "@supabase/auth-helpers-react";
|
||||||
import {useEffect, useState} from 'react';
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
|
||||||
import "../styles/globals.css";
|
import "../styles/globals.css";
|
||||||
import 'focus-visible'
|
import "focus-visible";
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }) {
|
function MyApp({ Component, pageProps }) {
|
||||||
const [supabase] = useState(() => createBrowserSupabaseClient());
|
const [supabase] = useState(() => createBrowserSupabaseClient());
|
||||||
|
|||||||
@@ -1,17 +1,19 @@
|
|||||||
import { Head, Html, Main, NextScript } from 'next/document'
|
import { Head, Html, Main, NextScript } from "next/document";
|
||||||
|
|
||||||
export default function Document() {
|
export default function Document() {
|
||||||
return (
|
return (
|
||||||
<Html className="h-full bg-gray-50 antialiased" lang="en">
|
<Html className="h-full bg-gray-50 antialiased" lang="en">
|
||||||
<Head>
|
<Head>
|
||||||
|
<link
|
||||||
<link rel="shortcut icon" type="image/png" href="/images/logos/favicon.png" />
|
rel="shortcut icon"
|
||||||
|
type="image/png"
|
||||||
|
href="/images/logos/favicon.png"
|
||||||
|
/>
|
||||||
</Head>
|
</Head>
|
||||||
<body className="flex h-full flex-col">
|
<body className="flex h-full flex-col">
|
||||||
<Main />
|
<Main />
|
||||||
<NextScript />
|
<NextScript />
|
||||||
</body>
|
</body>
|
||||||
</Html>
|
</Html>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,41 +1,39 @@
|
|||||||
|
import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
|
||||||
import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
|
|
||||||
|
|
||||||
|
|
||||||
export default function OutputDetail(): JSX.Element {
|
export default function OutputDetail(): JSX.Element {
|
||||||
return <>
|
return (
|
||||||
<div className=" p-6 h-full mx-auto bg-slate-100 text-gray-800">
|
<>
|
||||||
|
<div className=" p-6 h-full mx-auto bg-slate-100 text-gray-800">
|
||||||
{/* Instrunction and Output panels */}
|
{/* Instrunction and Output panels */}
|
||||||
<section className="mb-8 lt-lg:mb-12 ">
|
<section className="mb-8 lt-lg:mb-12 ">
|
||||||
<div className="grid lg:gap-x-12 lg:grid-cols-2">
|
<div className="grid lg:gap-x-12 lg:grid-cols-2">
|
||||||
|
{/* Instruction panel */}
|
||||||
{/* Instruction panel */}
|
<div className="rounded-lg shadow-lg h-full block bg-white">
|
||||||
<div className="rounded-lg shadow-lg h-full block bg-white">
|
<div className="p-6">
|
||||||
<div className="p-6">
|
<h5 className="text-lg font-semibold mb-4">Instruction</h5>
|
||||||
<h5 className="text-lg font-semibold mb-4">Instruction</h5>
|
<div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">
|
||||||
<div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">
|
{SAMPLE_PROMPT}
|
||||||
{SAMPLE_PROMPT}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Output panel */}
|
{/* Output panel */}
|
||||||
<div className="mt-6 lg:mt-0 rounded-lg shadow-lg h-full block bg-white">
|
<div className="mt-6 lg:mt-0 rounded-lg shadow-lg h-full block bg-white">
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<h5 className="text-lg font-semibold mb-4">Output</h5>
|
<h5 className="text-lg font-semibold mb-4">Output</h5>
|
||||||
<div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">
|
<div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">
|
||||||
{SAMPLE_OUTPUT}
|
{SAMPLE_OUTPUT}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{/* Form wrap*/}
|
||||||
{/* Form wrap*/}
|
<div className="p-6">
|
||||||
<div className="p-6">
|
<h3 className="text-lg text-center font-medium leading-6 text-gray-900">
|
||||||
<h3 className="text-lg text-center font-medium leading-6 text-gray-900">Rating</h3>
|
Rating
|
||||||
|
</h3>
|
||||||
<p className="text-center mt-1 text-sm text-gray-500">
|
<p className="text-center mt-1 text-sm text-gray-500">
|
||||||
(1 = worst, 7 = best)
|
(1 = worst, 7 = best)
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
{/* Rating buttons */}
|
{/* Rating buttons */}
|
||||||
<div className="flex justify-center p-6">
|
<div className="flex justify-center p-6">
|
||||||
<button
|
<button
|
||||||
@@ -81,68 +79,77 @@ export default function OutputDetail(): JSX.Element {
|
|||||||
7
|
7
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Annotation checkboxes */}
|
{/* Skip / Submit controls */}
|
||||||
<div className="flex justify-center px-10">
|
<div className="flex justify-center ml-auto">
|
||||||
<ul>
|
<button
|
||||||
{ANNOTATION_FLAGS.map((option, i) => {
|
type="button"
|
||||||
return <AnnotationCheckboxLi option={option} key={i}></AnnotationCheckboxLi>;
|
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"
|
||||||
})}
|
>
|
||||||
</ul>
|
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>
|
||||||
<div className="flex justify-center p-6">
|
</section>
|
||||||
<textarea
|
</div>
|
||||||
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>
|
|
||||||
</>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function AnnotationCheckboxLi(props: { option: annotationBool}): JSX.Element {
|
function AnnotationCheckboxLi(props: { option: annotationBool }): JSX.Element {
|
||||||
let AdditionalExplanation = null;
|
let AdditionalExplanation = null;
|
||||||
if (props.option.additionalExplanation){
|
if (props.option.additionalExplanation) {
|
||||||
AdditionalExplanation = (
|
AdditionalExplanation = (
|
||||||
<a href ="#"
|
<a href="#" className="group flex items-center space-x-2.5 text-sm ">
|
||||||
className="group flex items-center space-x-2.5 text-sm "
|
|
||||||
>
|
|
||||||
<QuestionMarkCircleIcon
|
<QuestionMarkCircleIcon
|
||||||
className="h-5 w-5 ml-3 text-gray-400 group-hover:text-gray-500"
|
className="h-5 w-5 ml-3 text-gray-400 group-hover:text-gray-500"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
@@ -150,31 +157,30 @@ function AnnotationCheckboxLi(props: { option: annotationBool}): JSX.Element {
|
|||||||
</a>
|
</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 {
|
interface annotationBool {
|
||||||
attributeName: string;
|
attributeName: string;
|
||||||
labelText: string;
|
labelText: string;
|
||||||
@@ -182,38 +188,49 @@ interface annotationBool {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const ANNOTATION_FLAGS: annotationBool[] = [
|
const ANNOTATION_FLAGS: annotationBool[] = [
|
||||||
// For the time being this list is configured on the FE.
|
// For the time being this list is configured on the FE.
|
||||||
// In the future it may be provided by the API.
|
// In the future it may be provided by the API.
|
||||||
{ attributeName: 'fails_task',
|
{
|
||||||
labelText: 'Fails to follow the correct instruction / task',
|
attributeName: "fails_task",
|
||||||
additionalExplanation: '__TODO__'
|
labelText: "Fails to follow the correct instruction / task",
|
||||||
|
additionalExplanation: "__TODO__",
|
||||||
},
|
},
|
||||||
{ attributeName: 'not_customer_assistant_appropriate',
|
{
|
||||||
labelText: 'Inappropriate for customer assistant',
|
attributeName: "not_customer_assistant_appropriate",
|
||||||
additionalExplanation: '__TODO__'
|
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',
|
attributeName: "gives_harmful_advice",
|
||||||
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.',
|
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:
|
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
|
5. Rebase onto the master branch before creating your PR
|
||||||
6. Respond to reviews quickly
|
6. Respond to reviews quickly
|
||||||
7. Thank reviewers for their suggestions
|
7. Thank reviewers for their suggestions
|
||||||
`;
|
`;
|
||||||
|
|||||||
+22
-22
@@ -1,13 +1,13 @@
|
|||||||
import { Auth, ThemeSupa } from "@supabase/auth-ui-react";
|
import { Auth, ThemeSupa } from "@supabase/auth-ui-react";
|
||||||
import { useSession, useSupabaseClient } from "@supabase/auth-helpers-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 { CallToAction } from "../components/CallToAction";
|
||||||
import { Faq } from '../components/Faq';
|
import { Faq } from "../components/Faq";
|
||||||
import { Footer } from '../components/Footer';
|
import { Footer } from "../components/Footer";
|
||||||
import { Header } from '../components/Header';
|
import { Header } from "../components/Header";
|
||||||
import { Hero } from '../components/Hero';
|
import { Hero } from "../components/Hero";
|
||||||
|
|
||||||
import styles from "../styles/Home.module.css";
|
import styles from "../styles/Home.module.css";
|
||||||
|
|
||||||
@@ -24,22 +24,22 @@ export default function Home() {
|
|||||||
if (!session) {
|
if (!session) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>Open Assistant</title>
|
<title>Open Assistant</title>
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
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."
|
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>
|
</Head>
|
||||||
<Header />
|
<Header />
|
||||||
<main>
|
<main>
|
||||||
<Hero />
|
<Hero />
|
||||||
<CallToAction />
|
<CallToAction />
|
||||||
|
|
||||||
<Faq />
|
<Faq />
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import Head from 'next/head'
|
import Head from "next/head";
|
||||||
import Link from 'next/link'
|
import Link from "next/link";
|
||||||
|
|
||||||
import { AuthLayout } from '@/components/AuthLayout'
|
import { AuthLayout } from "@/components/AuthLayout";
|
||||||
import { Button } from '@/components/Button'
|
import { Button } from "@/components/Button";
|
||||||
import { TextField } from '@/components/Fields'
|
import { TextField } from "@/components/Fields";
|
||||||
|
|
||||||
export default function Login() {
|
export default function Login() {
|
||||||
return (
|
return (
|
||||||
@@ -11,13 +11,7 @@ export default function Login() {
|
|||||||
<Head>
|
<Head>
|
||||||
<title>Log in</title>
|
<title>Log in</title>
|
||||||
</Head>
|
</Head>
|
||||||
<AuthLayout
|
<AuthLayout title="" subtitle={<></>}>
|
||||||
title=""
|
|
||||||
subtitle={
|
|
||||||
<>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<form>
|
<form>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<TextField
|
<TextField
|
||||||
@@ -43,5 +37,5 @@ export default function Login() {
|
|||||||
</form>
|
</form>
|
||||||
</AuthLayout>
|
</AuthLayout>
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,20 +29,20 @@ a {
|
|||||||
}
|
}
|
||||||
} */
|
} */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Inter';
|
font-family: "Inter";
|
||||||
font-weight: 100 900;
|
font-weight: 100 900;
|
||||||
font-display: block;
|
font-display: block;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-named-instance: 'Regular';
|
font-named-instance: "Regular";
|
||||||
src: url('/fonts/Inter-roman.var.woff2') format('woff2');
|
src: url("/fonts/Inter-roman.var.woff2") format("woff2");
|
||||||
}
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Inter';
|
font-family: "Inter";
|
||||||
font-weight: 100 900;
|
font-weight: 100 900;
|
||||||
font-display: block;
|
font-display: block;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-named-instance: 'Italic';
|
font-named-instance: "Italic";
|
||||||
src: url('/fonts/Inter-italic.var.woff2') format('woff2');
|
src: url("/fonts/Inter-italic.var.woff2") format("woff2");
|
||||||
}
|
}
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
|
|||||||
Reference in New Issue
Block a user