Setup the website to be deployed in docker

docker/Dockerfile.website

@@ -0,0 +1,53 @@
+# Install dependencies only when needed
+FROM node:16.19 AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+# RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY ./website/package.json ./website/package-lock.json ./
+RUN \
+  if [ -f package-lock.json ]; then npm ci; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Rebuild the source code only when needed
+FROM node:16.19 AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY ./website/ .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN yarn build
+RUN npx prisma generate
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM node:16.19 AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]

scripts/endtoend-demo/README.md

@@ -0,0 +1,18 @@
+# End to End Demo
+
+This sets up an entire stack needed to run Open Assistant, including the website, backend, and associated dependent services.
+
+To start the service, do the following:
+
+```sh
+docker compose up --build
+cd ../../website
+npx prisma db push
+```
+
+NOTE: we're working on making the prisma step integrated into the docker
+initialization process.
+
+Then, navigate to `http://localhost:3000` and interact with the website. When
+logging in, navigate to `http://localhost:1080` to get the magic email login
+link.

scripts/endtoend-demo/docker-compose.yaml

@@ -0,0 +1,89 @@
+version: "3.7"
+
+services:
+  # This DB is for the FastAPI Backend.
+  db:
+    image: postgres
+    restart: always
+    ports:
+      - 5432:5432
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+    healthcheck:
+      test: ["CMD", "pg_isready", "-U", "postgres"]
+      interval: 2s
+      timeout: 2s
+      retries: 10
+
+  # This DB is for Web Authentication and data caching.
+  webdb:
+    image: postgres
+    restart: always
+    ports:
+      - 5433:5432
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+    healthcheck:
+      test: ["CMD", "pg_isready", "-U", "postgres"]
+      interval: 2s
+      timeout: 2s
+      retries: 10
+
+  # This lets you manually inspect the web and backend databases.
+  adminer:
+    image: adminer
+    restart: always
+    ports:
+      - 8089:8080
+
+  # This fakes an SMTP email server used by website authentication.
+  # User registration emails can be found by going to localhost:1080 and
+  # opening the emails listed.
+  maildev:
+    image: maildev/maildev
+    restart: always
+    environment:
+      - MAILDEV_WEB_PORT=1080
+      - MAILDEV_SMTP_PORT=1025
+    ports:
+      - "1080:1080"
+      - "1025:1025"
+
+  # The oassist backend service.
+  backend:
+    build:
+      dockerfile: docker/Dockerfile.backend
+      context: ../../
+    image: oasst-backend
+    environment:
+      - POSTGRES_HOST=db
+      - ALLOW_ANY_API_KEY=True
+      - MAX_WORKERS=1
+    depends_on:
+      db:
+        condition: service_healthy
+    ports:
+      - "8080:8080"
+
+  # The oassist web service.
+  web:
+    build:
+      dockerfile: docker/Dockerfile.website
+      context: ../../
+    image: oasst-web
+    environment:
+      - DATABASE_URL=postgres://postgres:postgres@webdb/ocgpt_website
+      - FASTAPI_URL=http://backend:8080
+      - FASTAPI_KEY=1234
+      - NEXTAUTH_SECRET=O/M2uIbGj+lDD2oyNa8ax4jEOJqCPJzO53UbWShmq98=
+      - EMAIL_SERVER_HOST=maildev
+      - EMAIL_SERVER_PORT=1025
+      - EMAIL_FROM=info@example.com
+      - NEXTAUTH_URL=http://localhost:3000
+    depends_on:
+      webdb:
+        condition: service_healthy
+    ports:
+      - "3000:3000"

scripts/frontend-development/docker-compose.yaml

@@ -47,8 +47,9 @@ services:
     ports:
       - "8080:8080"
 
-  # This fakes and SMTP email server.  User registration emails can be found by going to
-  #   localhost:1080 and opening the emails listed.
+  # This fakes an SMTP email server used by website authentication.
+  # User registration emails can be found by going to localhost:1080 and
+  # opening the emails listed.
   maildev:
     image: maildev/maildev
     restart: always

website/next.config.js

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: "standalone",
   reactStrictMode: true,
   experimental: {
     scrollRestoration: true,

website/package.json

@@ -17,10 +17,6 @@
     "@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",

website/src/components/CallToAction.tsx

@@ -16,7 +16,7 @@ export function CallToAction() {
             here:
           </p>
           <div className="mt-8 flex justify-center">
-            <a href="https://discord.gg/pXtnYk9c" target="_blank">
+            <a href="https://discord.gg/pXtnYk9c" rel="noreferrer" 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"
@@ -31,7 +31,7 @@ export function CallToAction() {
               </button>
             </a>
 
-            <a href="https://github.com/LAION-AI/Open-Assistant" target="_blank">
+            <a href="https://github.com/LAION-AI/Open-Assistant" rel="noreferrer" 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"

website/src/components/Header.tsx

@@ -1,10 +1,11 @@
-import Link from "next/link";
-import { signOut, useSession } from "next-auth/react";
+import { Button } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import { signOut, useSession } from "next-auth/react";
 
 import { Container } from "./Container";
-import Image from "next/image";
 import { NavLinks } from "./NavLinks";
 
 function MenuIcon(props) {
@@ -40,23 +41,14 @@ function AccountButton() {
   const { data: session } = useSession();
   if (session) {
     return (
-      <button
-        type="button"
-        onClick={() => signOut()}
-        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"
-      >
+      <Button variant="outline" onClick={() => signOut()}>
         Log out
-      </button>
+      </Button>
     );
   }
   return (
     <Link href="/auth/signin" aria-label="Home" className="flex items-center">
-      <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>
+      <Button variant="outline">Log in</Button>
     </Link>
   );
 }

website/src/pages/api/auth/[...nextauth].ts

@@ -1,3 +1,4 @@
+import type { AuthOptions } from "next-auth";
 import NextAuth from "next-auth";
 import DiscordProvider from "next-auth/providers/discord";
 import EmailProvider from "next-auth/providers/email";
@@ -31,7 +32,7 @@ if (process.env.DISCORD_CLIENT_ID) {
   );
 }
 
-export const authOptions = {
+export const authOptions: AuthOptions = {
   // Ensure we can store user data in a database.
   adapter: PrismaAdapter(prisma),
   providers,

website/src/pages/api/new_task/[task_type].ts

@@ -1,5 +1,6 @@
 import { getToken } from "next-auth/jwt";
 
+import prisma from "src/lib/prismadb";
 import { authOptions } from "src/pages/api/auth/[...nextauth]";
 
 /**
@@ -10,7 +11,7 @@ import { authOptions } from "src/pages/api/auth/[...nextauth]";
  * 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 handler = async (req, res) => {
   const { task_type } = req.query;
 
   const token = await getToken({ req });
@@ -69,3 +70,5 @@ export default async (req, res) => {
   // Send the results to the client.
   res.status(200).json(registeredTask);
 };
+
+export default handler;

website/src/pages/api/update_task.ts

@@ -1,5 +1,6 @@
 import { getToken } from "next-auth/jwt";
 
+import prisma from "src/lib/prismadb";
 import { authOptions } from "src/pages/api/auth/[...nextauth]";
 
 /**
@@ -11,7 +12,7 @@ import { authOptions } from "src/pages/api/auth/[...nextauth]";
  * 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 handler = async (req, res) => {
   const token = await getToken({ req });
 
   // Return nothing if the user isn't registered.
@@ -76,3 +77,5 @@ export default async (req, res) => {
   // Send the next task in the sequence to the client.
   res.status(200).json(newRegisteredTask);
 };
+
+export default handler;

website/src/pages/grading/grade-output.tsx

@@ -134,7 +134,7 @@ const GradeOutput = () => {
           <button
             type="button"
             onClick={() => submitResponse(tasks[0])}
-            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"
+            className="inline-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>

website/tsconfig.json

@@ -13,7 +13,11 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]