mirror of
https://github.com/wassname/Open-Assistant.git
synced 2026-06-30 16:40:05 +08:00
Grading Page WIP & Homepage
This commit is contained in:
Lennon Puldagrealy
@@ -1,5 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "."
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
};
|
||||
experimental: {
|
||||
scrollRestoration: true,
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig;
|
||||
module.exports = nextConfig
|
||||
|
||||
Generated
+1304
-57
File diff suppressed because it is too large
Load Diff
+13
-1
@@ -10,23 +10,35 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.7",
|
||||
"@heroicons/react": "^2.0.13",
|
||||
"@next-auth/prisma-adapter": "^1.0.5",
|
||||
"@prisma/client": "^4.7.1",
|
||||
"@supabase/auth-helpers-nextjs": "^0.5.2",
|
||||
"@supabase/auth-helpers-react": "^0.3.1",
|
||||
"@supabase/auth-ui-react": "^0.2.6",
|
||||
"@supabase/supabase-js": "^2.1.4",
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"axios": "^1.2.1",
|
||||
"clsx": "^1.2.1",
|
||||
"eslint": "8.29.0",
|
||||
"eslint-config-next": "13.0.6",
|
||||
"focus-visible": "^5.2.0",
|
||||
"framer-motion": "^7.10.2",
|
||||
"next": "13.0.6",
|
||||
"next-auth": "^4.18.6",
|
||||
"nodemailer": "^6.8.0",
|
||||
"postcss-focus-visible": "^7.1.0",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"swr": "^2.0.0"
|
||||
"swr": "^2.0.0",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"use-debounce": "^9.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "18.11.17",
|
||||
"@types/react": "18.0.26",
|
||||
"prisma": "^4.7.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
import { useState } from "react";
|
||||
|
||||
import "../styles/globals.css";
|
||||
|
||||
function MyApp({ Component, pageProps: { session, ...pageProps } }) {
|
||||
return (
|
||||
<SessionProvider session={session}>
|
||||
<Component {...pageProps} />
|
||||
</SessionProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp;
|
||||
@@ -1,41 +0,0 @@
|
||||
import NextAuth from "next-auth";
|
||||
import DiscordProvider from "next-auth/providers/discord";
|
||||
import EmailProvider from "next-auth/providers/email";
|
||||
import { PrismaAdapter } from "@next-auth/prisma-adapter";
|
||||
|
||||
import prisma from "../../../lib/prismadb";
|
||||
|
||||
export const authOptions = {
|
||||
// Ensure we can store user data in a database.
|
||||
adapter: PrismaAdapter(prisma),
|
||||
providers: [
|
||||
// Register a Discord auth method.
|
||||
DiscordProvider({
|
||||
clientId: process.env.DISCORD_CLIENT_ID,
|
||||
clientSecret: process.env.DISCORD_CLIENT_SECRET,
|
||||
}),
|
||||
// Register an email magic link auth method.
|
||||
EmailProvider({
|
||||
server: {
|
||||
host: process.env.EMAIL_SERVER_HOST,
|
||||
port: process.env.EMAIL_SERVER_PORT,
|
||||
auth: {
|
||||
user: process.env.EMAIL_SERVER_USER,
|
||||
pass: process.env.EMAIL_SERVER_PASSWORD,
|
||||
},
|
||||
},
|
||||
from: process.env.EMAIL_FROM,
|
||||
}),
|
||||
],
|
||||
callbacks: {
|
||||
/**
|
||||
* Includes the raw user id in the session object.
|
||||
*/
|
||||
async session({ session, token, user }) {
|
||||
session.user.id = user.id;
|
||||
return session;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default NextAuth(authOptions);
|
||||
@@ -1,71 +0,0 @@
|
||||
import { unstable_getServerSession } from "next-auth/next";
|
||||
import { authOptions } from "pages/api/auth/[...nextauth]";
|
||||
|
||||
/**
|
||||
* Returns a new task created from the Task Backend. We do a few things here:
|
||||
*
|
||||
* 1) Get the task from the backend and register the requesting user.
|
||||
* 2) Store the task in our local database.
|
||||
* 3) Send and Ack to the Task Backend with our local id for the task.
|
||||
* 4) Return everything to the client.
|
||||
*/
|
||||
export default async (req, res) => {
|
||||
const session = await unstable_getServerSession(req, res, authOptions);
|
||||
|
||||
// Return nothing if the user isn't registered.
|
||||
if (!session) {
|
||||
res.status(401).end();
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch the new task.
|
||||
//
|
||||
// This needs to be refactored into an easier to use library.
|
||||
const taskRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/tasks/`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-API-Key": process.env.FASTAPI_KEY,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: "rate_summary",
|
||||
user: {
|
||||
id: session.user.id,
|
||||
display_name: session.user.name,
|
||||
auth_method: "local",
|
||||
},
|
||||
}),
|
||||
});
|
||||
const task = await taskRes.json();
|
||||
|
||||
// Store the task and link it to the user..
|
||||
const registeredTask = await prisma.registeredTask.create({
|
||||
data: {
|
||||
task,
|
||||
user: {
|
||||
connect: {
|
||||
id: session.user.id,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Update the backend with our Task ID
|
||||
const ackRes = await fetch(
|
||||
`${process.env.FASTAPI_URL}/api/v1/tasks/${task.id}/ack`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-API-Key": process.env.FASTAPI_KEY,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
post_id: registeredTask.id,
|
||||
}),
|
||||
}
|
||||
);
|
||||
const ack = await ackRes.json();
|
||||
|
||||
// Send the results to the client.
|
||||
res.status(200).json(registeredTask);
|
||||
};
|
||||
@@ -1,80 +0,0 @@
|
||||
import { unstable_getServerSession } from "next-auth/next";
|
||||
import { authOptions } from "./auth/[...nextauth]";
|
||||
|
||||
/**
|
||||
* Stores the task interaction with the Task Backend and then returns the next task generated.
|
||||
*
|
||||
* This implicity does a few things:
|
||||
* 1) Stores the answer with the Task Backend.
|
||||
* 2) Records the new task in our local database.
|
||||
* 3) (TODO) Acks the new task with our local task ID to the Task Backend.
|
||||
* 4) Returns the newly created task to the client.
|
||||
*/
|
||||
export default async (req, res) => {
|
||||
const session = await unstable_getServerSession(req, res, authOptions);
|
||||
|
||||
// Return nothing if the user isn't registered.
|
||||
if (!session) {
|
||||
res.status(401).end();
|
||||
return;
|
||||
}
|
||||
|
||||
// Parse out the local task ID and the interaction contents.
|
||||
const { id, content } = await JSON.parse(req.body);
|
||||
|
||||
// Log the interaction locally to create our user_post_id needed by the Task
|
||||
// Backend.
|
||||
const interaction = await prisma.taskInteraction.create({
|
||||
data: {
|
||||
content,
|
||||
task: {
|
||||
connect: {
|
||||
id,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Send the interaction to the Task Backend. This automatically fetches the
|
||||
// next task in the sequence (or the done task).
|
||||
const interactionRes = await fetch(
|
||||
`${process.env.FASTAPI_URL}/api/v1/tasks/interaction`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-API-Key": process.env.FASTAPI_KEY,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: "post_rating",
|
||||
user: {
|
||||
id: session.user.id,
|
||||
display_name: session.user.name,
|
||||
auth_method: "local",
|
||||
},
|
||||
post_id: id,
|
||||
user_post_id: interaction.id,
|
||||
...content,
|
||||
}),
|
||||
}
|
||||
);
|
||||
const newTask = await interactionRes.json();
|
||||
|
||||
// Stores the new task with our database.
|
||||
const newRegisteredTask = await prisma.registeredTask.create({
|
||||
data: {
|
||||
task: newTask,
|
||||
user: {
|
||||
connect: {
|
||||
id: session.user.id,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// TODO: Ack the task with the Task Backend using the newly created local
|
||||
// task ID.
|
||||
|
||||
// Send the next task in the sequence to the client.
|
||||
res.status(200).json(newRegisteredTask);
|
||||
};
|
||||
@@ -1,70 +0,0 @@
|
||||
import axios from "axios";
|
||||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import { useSession, signIn, signOut } from "next-auth/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
|
||||
import styles from "styles/Home.module.css";
|
||||
|
||||
const fetcher = (url) => axios.get(url).then((res) => res.data);
|
||||
|
||||
export default function Home() {
|
||||
const { data: session, status } = useSession();
|
||||
const { data: prompts, errors } = useSWR(
|
||||
session ? "/api/prompts" : null,
|
||||
fetcher
|
||||
);
|
||||
if (!session) {
|
||||
return (
|
||||
<div className={styles.App}>
|
||||
<header className={styles.AppHeader}>
|
||||
<h2>Open Assistant</h2>
|
||||
<p>
|
||||
Open Assistant is a project meant to give everyone access to a great
|
||||
chat based large language model.
|
||||
</p>
|
||||
|
||||
<button onClick={signIn}>Register</button>
|
||||
<p>
|
||||
We believe that by doing this we will create a revolution in
|
||||
innovation in language. In the same way that stable-diffusion helped
|
||||
the world make art and images in new ways we hope Open Assistant can
|
||||
help improve the world by improving language itself.
|
||||
</p>
|
||||
|
||||
<h2>How can you help?</h2>
|
||||
<p>
|
||||
All open source projects begins with people like you. Open source is
|
||||
the belief that if we collaborate we can together gift our knowledge
|
||||
and technology to the world for the benefit of humanity.
|
||||
</p>
|
||||
|
||||
<h2>I am in! Now what?</h2>
|
||||
<p>We live and collaborate the work in the LAION discord. Join us!</p>
|
||||
<a
|
||||
className={styles.AppLink}
|
||||
href="https://discord.gg/RQFtmAmk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Join us on Discord
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
console.log(prompts);
|
||||
return (
|
||||
<div className={styles.App}>
|
||||
<header className={styles.AppHeader}>
|
||||
<h2>Open Assistant</h2>
|
||||
|
||||
<p>You are logged in</p>
|
||||
|
||||
<button onClick={signOut}>Signout</button>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2018 The Lexend Project Authors (https://github.com/googlefonts/lexend), with Reserved Font Name “RevReading Lexend”.
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
@@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 715.62 494.67">
|
||||
<defs>
|
||||
<radialGradient id="radial-gradient" cx="375.98" cy="-12.21" fx="375.98" fy="-12.21" r="497.2" gradientTransform="translate(0 496) scale(1 -1)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#fc00ff"/>
|
||||
<stop offset="0" stop-color="#d327fe"/>
|
||||
<stop offset="0" stop-color="#af4afc"/>
|
||||
<stop offset="0" stop-color="#8f69fb"/>
|
||||
<stop offset="0" stop-color="#7384fa"/>
|
||||
<stop offset="0" stop-color="#5d99f9"/>
|
||||
<stop offset="0" stop-color="#4ca9f9"/>
|
||||
<stop offset="0" stop-color="#41b5f8"/>
|
||||
<stop offset="0" stop-color="#3abbf8"/>
|
||||
<stop offset="0" stop-color="#38bdf8"/>
|
||||
<stop offset=".07" stop-color="#31a6f9"/>
|
||||
<stop offset=".24" stop-color="#2274fb"/>
|
||||
<stop offset=".41" stop-color="#164afc"/>
|
||||
<stop offset=".57" stop-color="#0c2afd"/>
|
||||
<stop offset=".73" stop-color="#0613fe"/>
|
||||
<stop offset=".87" stop-color="#0105ff"/>
|
||||
<stop offset="1" stop-color="blue"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="radial-gradient-2" cx="-32.67" cy="158.04" fx="-32.67" fy="158.04" r="497.2" gradientTransform="translate(340.29 396.4) rotate(-39.31) scale(1 -1.17)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#fc00ff"/>
|
||||
<stop offset="0" stop-color="#fa00ff"/>
|
||||
<stop offset="0" stop-color="#f800ff"/>
|
||||
<stop offset="0" stop-color="#38bdf8"/>
|
||||
<stop offset=".11" stop-color="#2f9ef9"/>
|
||||
<stop offset=".34" stop-color="#1e66fb"/>
|
||||
<stop offset=".55" stop-color="#113afd"/>
|
||||
<stop offset=".74" stop-color="#081afe"/>
|
||||
<stop offset=".89" stop-color="#0207ff"/>
|
||||
<stop offset="1" stop-color="blue"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="linear-gradient" x1="159.14" y1="78.07" x2="347.74" y2="266.67" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#4ba2ea"/>
|
||||
<stop offset="1" stop-color="#235ea5"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="m641.06,74.17h-89.45c-8.23,0-14.91,5.54-14.91,12.37s6.68,12.37,14.91,12.37h89.45c24.66,0,44.73,16.65,44.73,37.1v222.6c0,20.45-20.07,37.1-44.73,37.1h-59.63c-8.23,0-14.91,5.54-14.91,12.37v49.47l-95.41-59.36c-2.56-1.61-5.72-2.47-8.94-2.47h-178.9c-9.24,0-18.22-2.42-25.97-7.02-6.62-3.98-15.98-2.72-20.78,2.84-4.8,5.57-3.28,13.28,3.43,17.26,12.82,7.64,27.79,11.67,43.32,11.67h173.92l115.3,71.73c2.62,1.63,5.78,2.47,8.95,2.47,2.27,0,4.56-.45,6.68-1.34,5.04-2.1,8.23-6.38,8.23-11.06v-61.83h44.73c41.12,0,74.54-27.75,74.54-61.83v-222.6c-.02-34.08-33.44-61.84-74.56-61.84Z" style="fill: url(#radial-gradient);"/>
|
||||
<path d="m432.34,346.27c41.12,0,74.54-27.75,74.54-61.83V61.83c0-34.08-33.42-61.83-74.54-61.83H74.54C33.42,0,0,27.75,0,61.83v222.6c0,34.08,33.42,61.83,74.54,61.83h44.73v61.83c0,4.67,3.19,8.95,8.23,11.06,2.12.87,4.41,1.31,6.68,1.31,3.16,0,6.32-.84,8.95-2.47l115.3-71.73h173.91Zm-187.84-22.25l-95.41,59.36v-49.47c0-6.83-6.68-12.37-14.91-12.37h-59.64c-24.66,0-44.73-16.65-44.73-37.1V61.83c0-20.45,20.07-37.1,44.73-37.1h357.8c24.66,0,44.73,16.65,44.73,37.1v222.6c0,20.45-20.07,37.1-44.73,37.1h-178.9c-3.25,0-6.38.87-8.94,2.48Z" style="fill: url(#radial-gradient-2);"/>
|
||||
</g>
|
||||
<circle cx="253.44" cy="172.37" r="133.36" style="fill: url(#linear-gradient);"/>
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 266.72 266.72">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="39.06" y1="39.06" x2="227.66" y2="227.66" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#4ba2ea"/>
|
||||
<stop offset="1" stop-color="#235ea5"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="133.36" cy="133.36" r="133.36" style="fill: url(#linear-gradient);"/>
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 723 B |
@@ -0,0 +1,44 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 715.6 494.67">
|
||||
<defs>
|
||||
<radialGradient id="radial-gradient" cx="375.98" cy="508.21" fx="375.98" fy="508.21" r="497.2" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#fc00ff"/>
|
||||
<stop offset="0" stop-color="#d327fd"/>
|
||||
<stop offset="0" stop-color="#af4afc"/>
|
||||
<stop offset="0" stop-color="#8e69fb"/>
|
||||
<stop offset="0" stop-color="#7383fa"/>
|
||||
<stop offset="0" stop-color="#5d98f9"/>
|
||||
<stop offset="0" stop-color="#4ca9f8"/>
|
||||
<stop offset="0" stop-color="#40b4f8"/>
|
||||
<stop offset="0" stop-color="#39bbf8"/>
|
||||
<stop offset="0" stop-color="#38bdf8"/>
|
||||
<stop offset=".07" stop-color="#31a6f8"/>
|
||||
<stop offset=".24" stop-color="#2273fa"/>
|
||||
<stop offset=".41" stop-color="#164afc"/>
|
||||
<stop offset=".57" stop-color="#0c29fd"/>
|
||||
<stop offset=".73" stop-color="#0512fe"/>
|
||||
<stop offset=".87" stop-color="#0104fe"/>
|
||||
<stop offset="1" stop-color="blue"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="radial-gradient-2" cx="198.15" cy="274.39" fx="198.15" fy="274.39" r="497.2" gradientTransform="translate(-158.02 152.14) rotate(-39.31) scale(1 1.17)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#fc00ff"/>
|
||||
<stop offset="0" stop-color="#f900ff"/>
|
||||
<stop offset="0" stop-color="#f800ff"/>
|
||||
<stop offset="0" stop-color="#38bdf8"/>
|
||||
<stop offset=".11" stop-color="#2e9df9"/>
|
||||
<stop offset=".34" stop-color="#1e66fb"/>
|
||||
<stop offset=".55" stop-color="#1139fc"/>
|
||||
<stop offset=".74" stop-color="#071afe"/>
|
||||
<stop offset=".89" stop-color="#0206fe"/>
|
||||
<stop offset="1" stop-color="blue"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="m641.06,74.17h-89.45c-8.23,0-14.91,5.54-14.91,12.37s6.68,12.37,14.91,12.37h89.45c24.66,0,44.73,16.65,44.73,37.1v222.6c0,20.45-20.07,37.1-44.73,37.1h-59.63c-8.23,0-14.91,5.54-14.91,12.37v49.47l-95.41-59.36c-2.56-1.61-5.72-2.47-8.95-2.47h-178.9c-9.24,0-18.22-2.42-25.97-7.02-6.62-3.98-15.98-2.72-20.78,2.84-4.8,5.56-3.28,13.28,3.43,17.26,12.82,7.64,27.79,11.67,43.32,11.67h173.92l115.3,71.73c2.62,1.63,5.78,2.47,8.95,2.47,2.27,0,4.56-.45,6.68-1.34,5.04-2.1,8.23-6.38,8.23-11.06v-61.83h44.73c41.12,0,74.54-27.75,74.54-61.83v-222.6c0-34.08-33.42-61.83-74.54-61.83Z" style="fill: url(#radial-gradient);"/>
|
||||
<path d="m432.34,346.27c41.12,0,74.54-27.75,74.54-61.83V61.83c0-34.08-33.42-61.83-74.54-61.83H74.54C33.42,0,0,27.75,0,61.83v222.6c0,34.08,33.42,61.83,74.54,61.83h44.73v61.83c0,4.67,3.19,8.95,8.23,11.06,2.12.87,4.41,1.31,6.68,1.31,3.16,0,6.32-.84,8.95-2.47l115.3-71.73h173.92Zm-187.85-22.26l-95.41,59.36v-49.47c0-6.83-6.68-12.37-14.91-12.37h-59.63c-24.66,0-44.73-16.65-44.73-37.1V61.83c0-20.45,20.07-37.1,44.73-37.1h357.8c24.66,0,44.73,16.65,44.73,37.1v222.6c0,20.45-20.07,37.1-44.73,37.1h-178.9c-3.25,0-6.38.87-8.95,2.47Z" style="fill: url(#radial-gradient-2);"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon points="329.01 217.47 339.89 199.09 391.78 199.09 407.8 171.46 375.75 116.33 330.63 116.33 315.04 88.99 297.55 88.99 297.55 70.47 326.07 70.47 341.65 97.96 365.02 97.96 332.83 42.83 270.06 42.83 270.06 116.33 295.49 116.33 306.22 134.71 270.06 134.71 270.06 171.46 303.28 171.46 318.72 143.97 360.03 143.97 370.61 162.34 329.45 162.34 314.01 189.83 270.06 189.83 270.06 254.22 320.04 254.22 309.46 272.59 270.06 272.59 270.06 300.08 332.83 300.08 381.05 217.47 350.32 217.47 339.59 235.84 297.55 235.84 297.55 217.47 329.01 217.47" style="fill: #4285f4; fill-rule: evenodd;"/>
|
||||
<polygon points="192.59 217.47 181.71 199.09 129.82 199.09 113.8 171.46 145.85 116.33 190.98 116.33 206.56 88.99 224.05 88.99 224.05 70.47 195.53 70.47 179.95 97.96 156.58 97.96 188.77 42.83 251.69 42.83 251.69 116.33 226.11 116.33 215.38 134.71 251.69 134.71 251.69 171.46 218.32 171.46 202.88 143.97 161.58 143.97 150.99 162.34 192.15 162.34 207.59 189.83 251.69 189.83 251.69 254.22 201.56 254.22 212.14 272.59 251.69 272.59 251.69 300.08 188.77 300.08 140.55 217.47 171.28 217.47 182.01 235.84 224.05 235.84 224.05 217.47 192.59 217.47" style="fill: #669df6; fill-rule: evenodd;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
@@ -0,0 +1,44 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 715.6 494.67">
|
||||
<defs>
|
||||
<radialGradient id="radial-gradient" cx="375.98" cy="508.21" fx="375.98" fy="508.21" r="497.2" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#fc00ff"/>
|
||||
<stop offset="0" stop-color="#d327fd"/>
|
||||
<stop offset="0" stop-color="#af4afc"/>
|
||||
<stop offset="0" stop-color="#8e69fb"/>
|
||||
<stop offset="0" stop-color="#7383fa"/>
|
||||
<stop offset="0" stop-color="#5d98f9"/>
|
||||
<stop offset="0" stop-color="#4ca9f8"/>
|
||||
<stop offset="0" stop-color="#40b4f8"/>
|
||||
<stop offset="0" stop-color="#39bbf8"/>
|
||||
<stop offset="0" stop-color="#38bdf8"/>
|
||||
<stop offset=".07" stop-color="#31a6f8"/>
|
||||
<stop offset=".24" stop-color="#2273fa"/>
|
||||
<stop offset=".41" stop-color="#164afc"/>
|
||||
<stop offset=".57" stop-color="#0c29fd"/>
|
||||
<stop offset=".73" stop-color="#0512fe"/>
|
||||
<stop offset=".87" stop-color="#0104fe"/>
|
||||
<stop offset="1" stop-color="blue"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="radial-gradient-2" cx="198.15" cy="274.39" fx="198.15" fy="274.39" r="497.2" gradientTransform="translate(-158.02 152.14) rotate(-39.31) scale(1 1.17)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#fc00ff"/>
|
||||
<stop offset="0" stop-color="#f900ff"/>
|
||||
<stop offset="0" stop-color="#f800ff"/>
|
||||
<stop offset="0" stop-color="#38bdf8"/>
|
||||
<stop offset=".11" stop-color="#2e9df9"/>
|
||||
<stop offset=".34" stop-color="#1e66fb"/>
|
||||
<stop offset=".55" stop-color="#1139fc"/>
|
||||
<stop offset=".74" stop-color="#071afe"/>
|
||||
<stop offset=".89" stop-color="#0206fe"/>
|
||||
<stop offset="1" stop-color="blue"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="m641.06,74.17h-89.45c-8.23,0-14.91,5.54-14.91,12.37s6.68,12.37,14.91,12.37h89.45c24.66,0,44.73,16.65,44.73,37.1v222.6c0,20.45-20.07,37.1-44.73,37.1h-59.63c-8.23,0-14.91,5.54-14.91,12.37v49.47l-95.41-59.36c-2.56-1.61-5.72-2.47-8.95-2.47h-178.9c-9.24,0-18.22-2.42-25.97-7.02-6.62-3.98-15.98-2.72-20.78,2.84-4.8,5.56-3.28,13.28,3.43,17.26,12.82,7.64,27.79,11.67,43.32,11.67h173.92l115.3,71.73c2.62,1.63,5.78,2.47,8.95,2.47,2.27,0,4.56-.45,6.68-1.34,5.04-2.1,8.23-6.38,8.23-11.06v-61.83h44.73c41.12,0,74.54-27.75,74.54-61.83v-222.6c0-34.08-33.42-61.83-74.54-61.83Z" style="fill: url(#radial-gradient);"/>
|
||||
<path d="m432.34,346.27c41.12,0,74.54-27.75,74.54-61.83V61.83c0-34.08-33.42-61.83-74.54-61.83H74.54C33.42,0,0,27.75,0,61.83v222.6c0,34.08,33.42,61.83,74.54,61.83h44.73v61.83c0,4.67,3.19,8.95,8.23,11.06,2.12.87,4.41,1.31,6.68,1.31,3.16,0,6.32-.84,8.95-2.47l115.3-71.73h173.92Zm-187.85-22.26l-95.41,59.36v-49.47c0-6.83-6.68-12.37-14.91-12.37h-59.63c-24.66,0-44.73-16.65-44.73-37.1V61.83c0-20.45,20.07-37.1,44.73-37.1h357.8c24.66,0,44.73,16.65,44.73,37.1v222.6c0,20.45-20.07,37.1-44.73,37.1h-178.9c-3.25,0-6.38.87-8.95,2.47Z" style="fill: url(#radial-gradient-2);"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon points="329.01 217.47 339.89 199.09 391.78 199.09 407.8 171.46 375.75 116.33 330.63 116.33 315.04 88.99 297.55 88.99 297.55 70.47 326.07 70.47 341.65 97.96 365.02 97.96 332.83 42.83 270.06 42.83 270.06 116.33 295.49 116.33 306.22 134.71 270.06 134.71 270.06 171.46 303.28 171.46 318.72 143.97 360.03 143.97 370.61 162.34 329.45 162.34 314.01 189.83 270.06 189.83 270.06 254.22 320.04 254.22 309.46 272.59 270.06 272.59 270.06 300.08 332.83 300.08 381.05 217.47 350.32 217.47 339.59 235.84 297.55 235.84 297.55 217.47 329.01 217.47" style="fill: #007f6d; fill-rule: evenodd;"/>
|
||||
<polygon points="192.59 217.47 181.71 199.09 129.82 199.09 113.8 171.46 145.85 116.33 190.98 116.33 206.56 88.99 224.05 88.99 224.05 70.47 195.53 70.47 179.95 97.96 156.58 97.96 188.77 42.83 251.69 42.83 251.69 116.33 226.11 116.33 215.38 134.71 251.69 134.71 251.69 171.46 218.32 171.46 202.88 143.97 161.58 143.97 150.99 162.34 192.15 162.34 207.59 189.83 251.69 189.83 251.69 254.22 201.56 254.22 212.14 272.59 251.69 272.59 251.69 300.08 188.77 300.08 140.55 217.47 171.28 217.47 182.01 235.84 224.05 235.84 224.05 217.47 192.59 217.47" style="fill: #007f6d; fill-rule: evenodd;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 294 257.25">
|
||||
<polygon points="215.21 174.64 226.09 156.26 277.98 156.26 294 128.62 261.95 73.5 216.83 73.5 201.24 46.16 183.75 46.16 183.75 27.64 212.27 27.64 227.85 55.12 251.22 55.12 219.03 0 156.26 0 156.26 73.5 181.69 73.5 192.42 91.88 156.26 91.88 156.26 128.62 189.48 128.62 204.92 101.14 246.23 101.14 256.81 119.51 215.65 119.51 200.21 147 156.26 147 156.26 211.39 206.24 211.39 195.66 229.76 156.26 229.76 156.26 257.25 219.03 257.25 267.25 174.64 236.52 174.64 225.79 193.01 183.75 193.01 183.75 174.64 215.21 174.64" style="fill: #007f6d; fill-rule: evenodd;"/>
|
||||
<polygon points="78.79 174.64 67.91 156.26 16.02 156.26 0 128.62 32.05 73.5 77.17 73.5 92.76 46.16 110.25 46.16 110.25 27.64 81.73 27.64 66.15 55.12 42.78 55.12 74.97 0 137.89 0 137.89 73.5 112.31 73.5 101.58 91.88 137.89 91.88 137.89 128.62 104.52 128.62 89.08 101.14 47.77 101.14 37.19 119.51 78.35 119.51 93.79 147 137.89 147 137.89 211.39 87.76 211.39 98.34 229.76 137.89 229.76 137.89 257.25 74.97 257.25 26.75 174.64 57.48 174.64 68.21 193.01 110.25 193.01 110.25 174.64 78.79 174.64" style="fill: #007f6d; fill-rule: evenodd;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Open-Assistant" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Open Assistant</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +0,0 @@
|
||||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,47 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
|
||||
function BackgroundIllustration(props) {
|
||||
return (
|
||||
<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" />
|
||||
<circle cx={545} cy={545} r="352.5" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function AuthLayout({ title, subtitle, children }) {
|
||||
return (
|
||||
<main className="flex min-h-full overflow-hidden pt-16 sm:py-28">
|
||||
<div className="mx-auto flex w-full max-w-2xl flex-col px-4 sm:px-6">
|
||||
<Link href="/" aria-label="Home">
|
||||
{/* logo */}
|
||||
</Link>
|
||||
<div className="relative mt-12 sm:mt-16">
|
||||
<BackgroundIllustration
|
||||
width="1090"
|
||||
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>
|
||||
)}
|
||||
</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}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
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} />
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,58 @@
|
||||
|
||||
import { CircleBackground } from './CircleBackground'
|
||||
import { Container } from './Container'
|
||||
|
||||
export function CallToAction() {
|
||||
return (
|
||||
<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>
|
||||
<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:
|
||||
</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://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"
|
||||
>
|
||||
<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>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useId } from 'react'
|
||||
|
||||
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}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={id}
|
||||
x1="79"
|
||||
y1="16"
|
||||
x2="105"
|
||||
y2="237"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor={color} />
|
||||
<stop offset="1" stopColor={color} stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
opacity=".2"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
import { Container } from './Container'
|
||||
|
||||
const faqs = [
|
||||
[
|
||||
{
|
||||
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.',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
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.',
|
||||
},
|
||||
],
|
||||
[
|
||||
// {
|
||||
// question: 'Where can I learn more?',
|
||||
// answer:
|
||||
// 'Please feel free to reach out to us on Discord. We are happy to answer any questions you may have.',
|
||||
// },
|
||||
],
|
||||
]
|
||||
|
||||
export function Faq() {
|
||||
return (
|
||||
<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"
|
||||
>
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
{/* <p className="mt-2 text-lg text-gray-600">
|
||||
If you have anything else you want to ask,{' '}
|
||||
<Link
|
||||
href="mailto:info@open-assistant.tech"
|
||||
className="text-gray-900 underline"
|
||||
>
|
||||
reach out to us
|
||||
</Link>
|
||||
.
|
||||
</p> */}
|
||||
</div>
|
||||
<ul
|
||||
role="list"
|
||||
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:max-w-none lg:grid-cols-3"
|
||||
>
|
||||
{faqs.map((column, columnIndex) => (
|
||||
<li key={columnIndex}>
|
||||
<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>
|
||||
<p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
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'
|
||||
|
||||
function Label({ id, children }) {
|
||||
return (
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="mb-2 block text-sm font-semibold text-gray-900"
|
||||
>
|
||||
{children}
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
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')} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
|
||||
|
||||
import { Container } from './Container'
|
||||
import { NavLinks } from './NavLinks'
|
||||
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-gray-200">
|
||||
<Container className="">
|
||||
<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>
|
||||
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Container>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
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'
|
||||
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function MobileNavLink({ children, ...props }) {
|
||||
return (
|
||||
<Popover.Button
|
||||
as={Link}
|
||||
href={props.href}
|
||||
className="block text-base leading-7 tracking-tight text-gray-700"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Popover.Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<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>
|
||||
<div className="hidden lg:flex lg:gap-10">
|
||||
<NavLinks />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<Popover className="lg:hidden">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
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" />
|
||||
)
|
||||
}
|
||||
</Popover.Button>
|
||||
<AnimatePresence initial={false}>
|
||||
{open && (
|
||||
<>
|
||||
<Popover.Overlay
|
||||
static
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-0 bg-gray-300/60 backdrop-blur"
|
||||
/>
|
||||
<Popover.Panel
|
||||
static
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, y: -32 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
y: -32,
|
||||
transition: { duration: 0.2 },
|
||||
}}
|
||||
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="#faqs">FAQs</MobileNavLink>
|
||||
</div>
|
||||
<div className="mt-8 flex flex-col gap-4">
|
||||
|
||||
<a href="/login">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
Log in
|
||||
</button>
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
<a href="/login">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
Log in
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import { useId } from 'react'
|
||||
import Image from 'next/image'
|
||||
|
||||
import { Container } from './Container'
|
||||
|
||||
function BackgroundIllustration(props) {
|
||||
let id = useId()
|
||||
|
||||
return (
|
||||
<div {...props}>
|
||||
<svg
|
||||
viewBox="0 0 1026 1026"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 h-full w-full animate-spin-slow"
|
||||
>
|
||||
<path
|
||||
d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
|
||||
stroke="#D4D4D4"
|
||||
strokeOpacity="0.7"
|
||||
/>
|
||||
<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"
|
||||
>
|
||||
<stop stopColor="#06b6d4" />
|
||||
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 1026 1026"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
|
||||
>
|
||||
<path
|
||||
d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
|
||||
stroke="#D4D4D4"
|
||||
strokeOpacity="0.7"
|
||||
/>
|
||||
<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"
|
||||
>
|
||||
<stop stopColor="#06b6d4" />
|
||||
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
|
||||
<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>
|
||||
<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">
|
||||
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>
|
||||
|
||||
<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={''}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
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>
|
||||
))}
|
||||
</>
|
||||
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/* body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
} */
|
||||
@@ -0,0 +1,17 @@
|
||||
// import React from "react";
|
||||
// import ReactDOM from "react-dom/client";
|
||||
// import "./index.css";
|
||||
// import App from "./App";
|
||||
// import reportWebVitals from "./reportWebVitals";
|
||||
|
||||
// const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
// root.render(
|
||||
// <React.StrictMode>
|
||||
// <App />
|
||||
// </React.StrictMode>
|
||||
// );
|
||||
|
||||
// // If you want to start measuring performance in your app, pass a function
|
||||
// // to log results (for example: reportWebVitals(console.log))
|
||||
// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
// reportWebVitals();
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,27 @@
|
||||
import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
|
||||
import { SessionContextProvider } from "@supabase/auth-helpers-react";
|
||||
import {useEffect, useState} from 'react';
|
||||
|
||||
|
||||
import "../styles/globals.css";
|
||||
import 'focus-visible'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
const [supabase] = useState(() => createBrowserSupabaseClient());
|
||||
useEffect(() => {
|
||||
const use = async () => {
|
||||
// (await import('tw-elements')).default;
|
||||
};
|
||||
use();
|
||||
}, []);
|
||||
return (
|
||||
<SessionContextProvider
|
||||
supabaseClient={supabase}
|
||||
initialSession={pageProps.initialSession}
|
||||
>
|
||||
<Component {...pageProps} />
|
||||
</SessionContextProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp;
|
||||
@@ -0,0 +1,17 @@
|
||||
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" />
|
||||
|
||||
</Head>
|
||||
<body className="flex h-full flex-col">
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,231 @@
|
||||
|
||||
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}
|
||||
</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}
|
||||
</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>
|
||||
|
||||
|
||||
{/* Rating buttons */}
|
||||
<div className="flex justify-center p-6">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
1
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
2
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
3
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
4
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
5
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center mx-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
6
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="nline-flex items-center mx-2 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"
|
||||
>
|
||||
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>
|
||||
|
||||
{/* 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 {
|
||||
let AdditionalExplanation = null;
|
||||
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"
|
||||
/>
|
||||
</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>
|
||||
</>;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
interface annotationBool {
|
||||
attributeName: string;
|
||||
labelText: string;
|
||||
additionalExplanation?: string;
|
||||
}
|
||||
|
||||
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__'
|
||||
},
|
||||
{ attributeName: 'not_customer_assistant_appropriate',
|
||||
labelText: 'Inappropriate for customer assistant',
|
||||
additionalExplanation: '__TODO__'
|
||||
},
|
||||
{ attributeName: 'contains_sexual_content',
|
||||
labelText: 'Contains sexual content',
|
||||
},
|
||||
{ attributeName: 'contains_violent_content',
|
||||
labelText: 'Contains violent content',
|
||||
},
|
||||
{ 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: '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',
|
||||
},
|
||||
]
|
||||
|
||||
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:
|
||||
|
||||
1. Communicate:
|
||||
2. Pull request size:
|
||||
* Summary
|
||||
* Fix one problem
|
||||
* Limit the scope
|
||||
* Use commits
|
||||
3. Use coding conventions:
|
||||
4. Perform testing:
|
||||
5. Rebase onto the master branch before creating your PR
|
||||
6. Respond to reviews quickly
|
||||
7. Thank reviewers for their suggestions
|
||||
`;
|
||||
@@ -0,0 +1,56 @@
|
||||
import { Auth, ThemeSupa } from "@supabase/auth-ui-react";
|
||||
import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
|
||||
|
||||
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 styles from "../styles/Home.module.css";
|
||||
|
||||
export default function Home() {
|
||||
const session = useSession();
|
||||
const supabase = useSupabaseClient();
|
||||
|
||||
const signinWithDiscord = async () => {
|
||||
const { data, error } = await supabase.auth.signInWithOAuth({
|
||||
provider: "discord",
|
||||
});
|
||||
};
|
||||
|
||||
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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={styles.App}>
|
||||
<header className={styles.AppHeader}>
|
||||
{/* <img src={logo} className="App-logo" alt="logo" /> */}
|
||||
|
||||
<h2>Open Chat Gpt</h2>
|
||||
|
||||
<p>You are logged in</p>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
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'
|
||||
|
||||
export default function Login() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Log in</title>
|
||||
</Head>
|
||||
<AuthLayout
|
||||
title=""
|
||||
subtitle={
|
||||
<>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form>
|
||||
<div className="space-y-6">
|
||||
<TextField
|
||||
label="Email address"
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label="Password"
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" color="cyan" className="mt-8 w-full">
|
||||
Sign in to account
|
||||
</Button>
|
||||
</form>
|
||||
</AuthLayout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
const reportWebVitals = (onPerfEntry) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
@@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import "@testing-library/jest-dom";
|
||||
@@ -0,0 +1,54 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
body {
|
||||
color: white;
|
||||
background: black;
|
||||
}
|
||||
} */
|
||||
@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-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');
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
#__next {
|
||||
min-height: 100%;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
body {
|
||||
color: white;
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
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' }],
|
||||
},
|
||||
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,
|
||||
},
|
||||
},
|
||||
marquee: {
|
||||
'100%': {
|
||||
transform: 'translateY(-50%)',
|
||||
},
|
||||
},
|
||||
'spin-reverse': {
|
||||
to: {
|
||||
transform: 'rotate(-360deg)',
|
||||
},
|
||||
},
|
||||
},
|
||||
maxWidth: {
|
||||
'2xl': '40rem',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require('@tailwindcss/forms')],
|
||||
}
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"incremental": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user