wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-07-27 11:18:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into dark-mode-implementation

Browse Source
This commit is contained in:
Desmond Grealy
2023-01-02 00:49:03 -08:00
parent 97625a8398 2d98259280
commit 5f3d32b875
158 changed files with 10576 additions and 3799 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/.env
+1 -1
View File
@@ -1,5 +1,5 @@
# The database created by running the jobs in /scripts/frontend-development/docker-compose.yaml
DATABASE_URL=postgres://postgres:postgres@localhost:5433/ocgpt_website
DATABASE_URL=postgres://postgres:postgres@localhost:5433/oasst_web
# The FastAPI backend found by running the jobs in /scripts/frontend-development/docker-compose.yaml
FASTAPI_URL=http://localhost:8080
website/.eslintrc.json
+5 -2
View File
@@ -6,6 +6,9 @@
"next/core-web-vitals"
],
"rules": {
"sort-imports": "warn"
}
"unused-imports/no-unused-imports": "warn",
"simple-import-sort/imports": "warn",
"simple-import-sort/exports": "warn"
},
"plugins": ["simple-import-sort", "unused-imports"]
}
website/.gitignore
+4
View File
@@ -37,3 +37,7 @@ next-env.d.ts
# Vim files
*.swp
# cypress
/cypress-visual-screenshots/diff
/cypress-visual-screenshots/comparison
website/README.md
+62 -25
View File
@@ -26,8 +26,8 @@ This website is built using:
development.
1. [Prisma](https://www.prisma.io/): An ORM to interact with a web specific
[Postgres](https://www.postgresql.org/) database.
1. [NextAuth.js](https://next-auth.js.org/): A user authentication framework
to ensure we handle accounts with best practices.
1. [NextAuth.js](https://next-auth.js.org/): A user authentication framework to
ensure we handle accounts with best practices.
1. [TailwindCSS](https://tailwindcss.com/): A general purpose framework for
styling any component.
1. [Chakra-UI](https://chakra-ui.com/): A wide collection of pre-built UI
@@ -38,10 +38,10 @@ This website is built using:
To contribute to the website, make sure you have the following setup and
installed:
1. [NVM](https://github.com/nvm-sh/nvm): The Node Version Manager makes it
easy to ensure you have the right NodeJS version installed. Once installed,
run `nvm use 16` to use Node 16.x. The website is known to be stable with
NodeJS version 16.x. This will install both Node and NPM.
1. [NVM](https://github.com/nvm-sh/nvm): The Node Version Manager makes it easy
to ensure you have the right NodeJS version installed. Once installed, run
`nvm use 16` to use Node 16.x. The website is known to be stable with NodeJS
version 16.x. This will install both Node and NPM.
1. [Docker](https://www.docker.com/): We use docker to simplify running
dependent services.
@@ -50,8 +50,8 @@ installed:
If you're doing active development we suggest the following workflow:
1. In one tab, navigate to the project root.
1. Run `docker compose up frontend-dev --build --attach-dependencies`. You can optionally include `-d` to detach and
later track the logs if desired.
1. Run `docker compose up frontend-dev --build --attach-dependencies`. You can
optionally include `-d` to detach and later track the logs if desired.
1. In another tab navigate to `${OPEN_ASSISTANT_ROOT/website`.
1. Run `npm install`
1. Run `npx prisma db push` (This is also needed when you restart the docker
@@ -64,17 +64,25 @@ If you're doing active development we suggest the following workflow:
### Using debug user credentials
You can use the debug credentials provider to log in without fancy emails or OAuth.
You can use the debug credentials provider to log in without fancy emails or
OAuth.
1. This feature is automatically on in development mode, i.e. when you run `npm run dev`. In case you want to do the same with a production build (for example, the docker image), then run the website with environment variable `DEBUG_LOGIN=true`.
1. This feature is automatically on in development mode, i.e. when you run
`npm run dev`. In case you want to do the same with a production build (for
example, the docker image), then run the website with environment variable
`DEBUG_LOGIN=true`.
1. Use the `Login` button in the top right to go to the login page.
1. You should see a section for debug credentials. Enter any username you wish, you will be logged in as that user.
1. You should see a section for debug credentials. Enter any username you wish,
you will be logged in as that user.
### Using Storybook
To develop components using [Storybook](https://storybook.js.org/) run `npm run storybook`. Then navigate to in your browser to `http://localhost:6006`.
To develop components using [Storybook](https://storybook.js.org/) run
`npm run storybook`. Then navigate to in your browser to
`http://localhost:6006`.
To create a new story create a file named `[componentName].stories.js`. An example how such a story could look like, see `Header.stories.jsx`.
To create a new story create a file named `[componentName].stories.js`. An
example how such a story could look like, see `Header.stories.jsx`.
## Code Layout
@@ -82,11 +90,12 @@ To create a new story create a file named `[componentName].stories.js`. An examp
All react code is under `src/` with a few sub directories:
1. `pages/`: All pages a user could navigate too and API URLs which are under `pages/api/`.
1. `components/`: All re-usable React components. If something gets used
twice we should create a component and put it here.
1. `lib/`: A generic place to store library files that are used anywhere.
This doesn't have much structure yet.
1. `pages/`: All pages a user could navigate too and API URLs which are under
`pages/api/`.
1. `components/`: All re-usable React components. If something gets used twice
we should create a component and put it here.
1. `lib/`: A generic place to store library files that are used anywhere. This
doesn't have much structure yet.
NOTE: `styles/` can be ignored for now.
@@ -102,6 +111,32 @@ All static images, fonts, svgs, etc are stored in `public/`.
We're not really using CSS styles. `styles/` can be ignored.
## Testing the UI
Cypress is used for end-to-end (e2e) and component testing and is configured in
`./cypress.config.ts`. The `./cypress` folder is used for supporting
configuration files etc.
- Store e2e tests in the `./cypress/e2e` folder.
- Store component tests adjacent to the component being tested. If you want to
wriite a test for `./src/components/Layout.tsx` then store the test file at
`./src/components/Layout.cy.tsx`.
A few npm scripts are available for convenience:
- `npm run cypress`: Useful for development, it opens Cypress and allows you to
explore, run and debug tests. It assumes you have the NextJS site running at
`localhost:3000`.
- `npm run cypress:run`: Runs all tests. Useful for a quick sanity check before
sending a PR or to run in CI pipelines.
- `npm run cypress:image-baseline`: If you have tests failing because of visual
changes that was expected, this command will update the baseline images stored
in `./cypress-visual-screenshots/baseline` with those from the adjacent
comparison folder. More can be found in the
[docs of `uktrade/cypress-image-diff`](https://github.com/uktrade/cypress-image-diff/blob/main/docs/CLI.md#update-all-baseline-images-for-failing-tests).
Read more in the [./cypress README](cypress/).
## Best Practices
When writing code for the website, we have a few best practices:
@@ -110,9 +145,9 @@ When writing code for the website, we have a few best practices:
dependencies. Order them alphabetically according to the package name.
1. When trying to implement something new, check if
[Chakra-UI](https://chakra-ui.com/) has components that are close enough to
your need. For example Sliders, Radio Buttons, Progress indicators, etc. They
have a lot and we can save time by re-using what they have and tweaking the
style as needed.
your need. For example Sliders, Radio Buttons, Progress indicators, etc.
They have a lot and we can save time by re-using what they have and tweaking
the style as needed.
1. Format everything with [Prettier](https://prettier.io/). This is done by
default with pre-submits. We currently don't have any custom settings.
1. Define functional React components (with types for all properties when
@@ -120,14 +155,15 @@ When writing code for the website, we have a few best practices:
### URL Paths
To use stable and consistent URL paths, we recommend the following strategy for new tasks:
To use stable and consistent URL paths, we recommend the following strategy for
new tasks:
1. For any task that involves writing a free-form response, put the page under
`website/src/pages/create` with a page name matching the task type, such as
`summarize_story.tsx`.
1. For any task that evaluates, rates, or ranks content, put the page under
`website/src/pages/evaluate` with a page name matching the task type such
as `rate_summary.tsx`.
`website/src/pages/evaluate` with a page name matching the task type such as
`rate_summary.tsx`.
With this we'll be able to ensure these contribution pages are hidden from
logged out users but accessible to logged in users.
@@ -136,5 +172,6 @@ logged out users but accessible to logged in users.
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
website/cypress-visual-screenshots/baseline/.gitkeep
View File
website/cypress.config.js
+25
View File
@@ -0,0 +1,25 @@
import { defineConfig } from "cypress";
import getCompareSnapshotsPlugin from "cypress-image-diff-js/dist/plugin";
export default defineConfig({
e2e: {
baseUrl: "http://localhost:3000",
setupNodeEvents(on, config) {
// implement node event listeners here
getCompareSnapshotsPlugin(on, config);
},
},
component: {
devServer: {
framework: "next",
bundler: "webpack",
viewportWidth: 500,
viewportHeight: 500,
},
setupNodeEvents(on, config) {
// implement node event listeners here
getCompareSnapshotsPlugin(on, config);
},
},
});
website/cypress/README.md
+91
View File
@@ -0,0 +1,91 @@
# Component and e2e testing with Cypress
[Cypress](https://www.cypress.io/) is used for both component- and end-to-end
testing. Below there's a few examples for the context of this site. To learn
more, the
[Cypress documentation](https://docs.cypress.io/guides/getting-started/opening-the-app)
has it all.
Don't get scared by the commercial offerings they offer. Their core is open
source, the cloud offering is not necesarry at all and can be replaced by CI
tooling and [community efforts](https://sorry-cypress.dev/).
# Component testing
To write a new component test, you either create a new `.tsx` adjacent to the
component you want to test or you can use the guide presented yo you when
running `npm run cypress` which allows you to easily create the skeleton test
for an existing component.
If you have a `Button.tsx` component, create a file next to it called
`Button.cy.tsx` which could look like this:
```typescript
import React from "react";
import { Button } from "./Button";
describe("<Button />", () => {
it("renders", () => {
// see: https://on.cypress.io/mounting-react
cy.mount(<Button className="border-gray-800 m-5">Test button</Button>);
cy.get("button").compareSnapshot("button-element");
});
});
```
## What's happening here?
First we use `cy.mount` to mount our component under test. Notive how we specify
`className` and inner text - this is where we arrange our component with fake
data that we could assert on later.
In the example above, we also use `cy.get` to select the rendered `button`
element. Cypress has multiple ways to
[select elements](https://docs.cypress.io/guides/references/best-practices),
`get` is just one of them (and often not recommended).
At last, we use `captureSnapshot` which is a plugin that snaps a photo of the
`button` element and compares it to a baseline located in the
`./cypress-visual-screenshots/baseline/` folder. If there's too many unidentical
pixels between the two, it will fail the test.
# End-to-end (e2e) testing
e2e tests are stored in the `./cypress/e2e` folder and should be named
`{page}.cy.ts` and located in a relative folder structure that mirrors the page
under test.
When running `npm run cypress` and selecting e2e testing, we assume you have the
NextJS site running at `localhost:3000`.
An example test from this time of writing, could look as follows:
```typescript
describe("signin flow", () => {
it("redirects to a confirmation page on submit of valid email address", () => {
cy.visit("/auth/signin");
cy.get(".chakra-input").type(`test@example.com{enter}`);
cy.url().should("contain", "/auth/verify");
});
});
export {};
```
## What's happening here?
First we use [`cy.visit`](https://docs.cypress.io/api/commands/visit) to point
the browser at the desired page. It appends relative paths to the configured
`baseUrl` (found in `./cypress.config.ts`).
Cypress will
[automatically await](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress#Timeouts)
almost anything you do, but fail if the default timeout is reached.
Then we get the email input field and type our email address. Notice the
`{enter}` keyword, this will cause Cypress to hit the return key which we expect
to submit the form.
We then assert that the URL should contain `/auth/verify`. Again the timeout
will make sure we are not waiting forever, and the test will fail if we do not
manage to get there in a reasonable time.
website/cypress/e2e/auth/signin.cy.ts
+10
View File
@@ -0,0 +1,10 @@
describe("signin flow", () => {
it("redirects to a confirmation page on submit of valid email address", () => {
cy.visit("/auth/signin");
cy.get(".chakra-input").type(`test@example.com`);
cy.get(".chakra-stack > .chakra-button").click();
cy.url().should("contain", "/auth/verify");
});
});
export {};
website/cypress/fixtures/example.json
+5
View File
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}
website/cypress/support/commands.ts
+39
View File
@@ -0,0 +1,39 @@
/// <reference types="cypress" />
// ***********************************************
// This example commands.ts shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
//
// declare global {
// namespace Cypress {
// interface Chainable {
// login(email: string, password: string): Chainable<void>
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }
export {};
website/cypress/support/component-index.html
+14
View File
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Components App</title>
<!-- Used by Next.js to inject CSS. -->
<div id="__next_css__DO_NOT_USE__"></div>
</head>
<body>
<div data-cy-root></div>
</body>
</html>
website/cypress/support/component.ts
+45
View File
@@ -0,0 +1,45 @@
// ***********************************************************
// This example support/component.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import "./commands";
import compareSnapshotCommand from "cypress-image-diff-js/dist/command";
import "../../src/styles/globals.css";
// Alternatively you can use CommonJS syntax:
// require('./commands')
import { mount } from "cypress/react18";
// Augment the Cypress namespace to include type definitions for
// your custom command.
// Alternatively, can be defined in cypress/support/component.d.ts
// with a <reference path="./component" /> at the top of your spec.
declare global {
namespace Cypress {
interface Chainable {
mount: typeof mount;
}
}
}
Cypress.Commands.add("mount", mount);
// Example use:
// cy.mount(<MyComponent />)
compareSnapshotCommand();
export {};
website/cypress/support/e2e.ts
+24
View File
@@ -0,0 +1,24 @@
// ***********************************************************
// This example support/e2e.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import "./commands";
import compareSnapshotCommand from "cypress-image-diff-js/dist/command";
compareSnapshotCommand();
// Alternatively you can use CommonJS syntax:
// require('./commands')
export {};
website/next-lint.js
Executable
+24
View File
@@ -0,0 +1,24 @@
#!/usr/bin/env node
const { spawnSync } = require("child_process");
async function npmLint() {
const spawnOption = {
shell: true,
env: process.env,
stdio: "inherit",
cwd: "./website",
};
let npmInstall;
let npmRunLint;
try {
npmInstall = await spawnSync("npm", ["install"], spawnOption);
if (npmInstall.status !== 0) {
process.exit(npmInstall.status);
}
npmRunLint = await spawnSync("npm", ["run lint"], spawnOption);
process.exit(npmRunLint.status);
} catch (error) {
console.error(error);
process.exit(1);
}
}
npmLint();
website/package-lock.json
Generated
+3980 -1984
View File
File diff suppressed because it is too large Load Diff
website/package.json
+16 -3
View File
@@ -9,10 +9,19 @@
"start": "next start",
"lint": "next lint",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
"build-storybook": "build-storybook",
"cypress": "cypress open",
"cypress:run": "cypress run",
"cypress:image-baseline": "cypress-image-diff -u",
"fix:lint": "eslint --fix src/ --ext .js,.jsx,.ts,.tsx",
"fix:format": "prettier --write ./src",
"fix": "npm run fix:format && npm run fix:lint"
},
"dependencies": {
"@chakra-ui/react": "^2.4.4",
"@dnd-kit/core": "^6.0.6",
"@dnd-kit/modifiers": "^6.0.1",
"@dnd-kit/sortable": "^7.0.1",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@headlessui/react": "^1.7.7",
@@ -27,6 +36,7 @@
"clsx": "^1.2.1",
"eslint": "8.29.0",
"eslint-config-next": "13.0.6",
"eslint-plugin-simple-import-sort": "^8.0.0",
"focus-visible": "^5.2.0",
"framer-motion": "^6.5.1",
"next": "13.0.6",
@@ -55,9 +65,12 @@
"@storybook/testing-library": "^0.0.13",
"@types/node": "18.11.17",
"@types/react": "18.0.26",
"babel-loader": "^8.3.0",
"eslint-plugin-storybook": "^0.6.8",
"@typescript-eslint/eslint-plugin": "^5.47.1",
"babel-loader": "^8.3.0",
"cypress": "^12.2.0",
"cypress-image-diff-js": "^1.23.0",
"eslint-plugin-storybook": "^0.6.8",
"eslint-plugin-unused-imports": "^2.0.0",
"prettier": "2.8.1",
"prisma": "^4.7.1",
"typescript": "4.9.4"
website/src/components/Container.cy.tsx
+13
View File
@@ -0,0 +1,13 @@
import React from "react";
import { Container } from "./Container";
describe("<Container />", () => {
it("renders", () => {
// see: https://on.cypress.io/mounting-react
const className = "my-class";
const text = "test_container";
cy.mount(<Container className={className}>{text}</Container>);
cy.get(`div.${className}`).should("have.class", className).should("be.visible").should("contain", text);
});
});
website/src/components/FlaggableElement.tsx
+216
View File
@@ -0,0 +1,216 @@
import {
Button,
Checkbox,
Flex,
Popover,
PopoverAnchor,
PopoverArrow,
PopoverBody,
PopoverCloseButton,
PopoverContent,
PopoverTrigger,
Slider,
SliderFilledTrack,
SliderThumb,
SliderTrack,
Spacer,
useBoolean,
} from "@chakra-ui/react";
import { FlagIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
import { useState } from "react";
import poster from "src/lib/poster";
import useSWRMutation from "swr/mutation";
export const FlaggableElement = (props) => {
const [isEditing, setIsEditing] = useBoolean();
const { trigger } = useSWRMutation("/api/v1/text_labels", poster, {
onSuccess: () => {
setIsEditing.off;
},
});
const submitResponse = () => {
const label_map: Map<string, number> = new Map();
TEXT_LABEL_FLAGS.forEach((flag, i) => {
if (checkboxValues[i]) {
label_map.set(flag.attributeName, sliderValues[i]);
}
});
trigger({ post_id: props.post_id, label_map: Object.fromEntries(label_map), text: props.text });
};
const [checkboxValues, setCheckboxValues] = useState(new Array(TEXT_LABEL_FLAGS.length).fill(false));
const [sliderValues, setSliderValues] = useState(new Array(TEXT_LABEL_FLAGS.length).fill(1));
const handleCheckboxState = (isChecked, idx) => {
setCheckboxValues(
checkboxValues.map((val, i) => {
return i == idx ? isChecked : val;
})
);
};
const handleSliderState = (newVal, idx) => {
setSliderValues(
sliderValues.map((val, i) => {
return i == idx ? newVal : val;
})
);
};
return (
<Popover
isOpen={isEditing}
onOpen={setIsEditing.on}
onClose={setIsEditing.off}
closeOnBlur={false}
isLazy
lazyBehavior="keepMounted"
>
<div className="inline-block float-left">
<PopoverAnchor>{props.children}</PopoverAnchor>
<PopoverTrigger>
<Button color="transparent">
<FlagIcon
className="h-5 w-5 ml-3 align-center text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
</Button>
</PopoverTrigger>
</div>
<PopoverContent width="fit-content">
<PopoverArrow />
<PopoverCloseButton />
<div className="flex mt-3 ">
<PopoverBody>
<ul>
{TEXT_LABEL_FLAGS.map((option, i) => {
return (
<FlagCheckboxLi
option={option}
key={i}
idx={i}
checkboxValues={checkboxValues}
sliderValues={sliderValues}
checkboxHandler={handleCheckboxState}
sliderHandler={handleSliderState}
></FlagCheckboxLi>
);
})}
</ul>
<div className="flex justify-center ml-auto">
<Button
isDisabled={
!checkboxValues.reduce((all, current) => {
return all | current;
}, false)
}
onClick={() => submitResponse()}
className="bg-indigo-600 text-black hover:bg-indigo-700"
>
Report
</Button>
</div>
</PopoverBody>
</div>
</PopoverContent>
</Popover>
);
};
function FlagCheckboxLi(props: {
option: textFlagLabels;
idx: number;
checkboxValues: boolean[];
sliderValues: number[];
checkboxHandler: (newVal: boolean, idx: number) => void;
sliderHandler: (newVal: number, idx: number) => void;
}): 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="flex h-5 w-5 ml-3 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
</a>
);
}
return (
<li>
<Flex>
<Checkbox
onChange={(e) => {
props.checkboxHandler(e.target.checked, props.idx);
}}
/>
<label
className=" ml-1 mr-1 text-sm form-check-label hover:cursor-pointer"
htmlFor={props.option.attributeName}
>
<span className="text-gray-800 hover:text-blue-700 float-left">{props.option.labelText}</span>
{AdditionalExplanation}
</label>
<Spacer />
<Slider
width="100px"
isDisabled={!props.checkboxValues[props.idx]}
defaultValue={100}
onChangeEnd={(val) => {
props.sliderHandler(val / 100, props.idx);
}}
>
<SliderTrack>
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
</Flex>
</li>
);
}
interface textFlagLabels {
attributeName: string;
labelText: string;
additionalExplanation?: string;
}
const TEXT_LABEL_FLAGS: textFlagLabels[] = [
// 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",
},
];
website/src/components/Footer.tsx
+48 -38
View File
@@ -5,11 +5,11 @@ import { useColorMode } from "@chakra-ui/react";
export function Footer() {
const { colorMode } = useColorMode();
const bgColorClass = colorMode === "light" ? "bg-transparent" : "bg-gray-800";
const borderClass = colorMode === "light" ? "border-slate-200" : "border-gray-900";
const borderClass = colorMode === "light" ? "border-slate-200" : "border-transparent";
return (
<footer className={bgColorClass}>
<div className={`flex justify-evenly py-10 px-10 border-t ${borderClass}`}>
<div className={`flex mx-auto max-w-7xl justify-between py-10 px-10 border-t ${borderClass}`}>
<div className="flex items-center pr-8">
<Link href="/" aria-label="Home" className="flex items-center">
<Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="52" height="52" alt="logo" />
@@ -20,18 +20,7 @@ export function Footer() {
<p className="text-sm">Conversational AI for everyone.</p>
</div>
</div>
<nav className="flex justify-center gap-20">
<div className="flex flex-col text-sm leading-7">
<b>Information</b>
<div className="flex flex-col leading-5">
<Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
Our Team
</Link>
<Link href="#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
Join Us
</Link>
</div>
</div>
<nav className="flex justify-center gap-20">
<div className="flex flex-col text-sm leading-7">
<b>Information</b>
@@ -44,30 +33,51 @@ export function Footer() {
</Link>
</div>
</div>
</nav>
<div className="flex flex-col text-sm leading-7">
<b>Connect</b>
<div className="flex flex-col leading-5">
<Link
href="https://github.com/LAION-AI/Open-Assistant"
rel="noopener noreferrer nofollow"
target="_blank"
aria-label="Privacy Policy"
className="hover:underline underline-offset-2"
>
Github
</Link>
<Link
href="https://discord.gg/pXtnYk9c"
rel="noopener noreferrer nofollow"
target="_blank"
aria-label="Terms of Service"
className="hover:underline underline-offset-2"
>
Discord
</Link>
</div>
</div>
<nav className="flex justify-center gap-20">
<div className="flex flex-col text-sm leading-7">
<b>Legal</b>
<div className="flex flex-col leading-5">
<Link
href="/privacy-policy"
aria-label="Privacy Policy"
className="hover:underline underline-offset-2"
>
Privacy Policy
</Link>
<Link
href="/terms-of-service"
aria-label="Terms of Service"
className="hover:underline underline-offset-2"
>
Terms of Service
</Link>
</div>
</div>
<div className="flex flex-col text-sm leading-7">
<b>Connect</b>
<div className="flex flex-col leading-5">
<Link
href="https://github.com/LAION-AI/Open-Assistant"
rel="noopener noreferrer nofollow"
target="_blank"
aria-label="Privacy Policy"
className="hover:underline underline-offset-2"
>
Github
</Link>
<Link
href="https://discord.gg/pXtnYk9c"
rel="noopener noreferrer nofollow"
target="_blank"
aria-label="Terms of Service"
className="hover:underline underline-offset-2"
>
Discord
</Link>
</div>
</div>
</nav>
{/* </div> */}
</nav>
</div>
</footer>
website/src/components/Header/Header.stories.jsx
+1
View File
@@ -3,6 +3,7 @@ import React from "react";
import { Header } from "./Header";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Header/Header",
component: Header,
website/src/components/Header/Header.tsx
+1
View File
@@ -1,5 +1,6 @@
import { Button, Box } from "@chakra-ui/react";
import { Popover } from "@headlessui/react";
import clsx from "clsx";
import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
website/src/components/Header/NavLinks.stories.jsx
+1
View File
@@ -1,5 +1,6 @@
import { NavLinks } from "./NavLinks";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Header/NavLinks",
component: NavLinks,
website/src/components/Header/NavLinks.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { useState } from "react";
import Link from "next/link";
import { AnimatePresence, motion } from "framer-motion";
import Link from "next/link";
import { useState } from "react";
import { useColorMode } from "@chakra-ui/react";
website/src/components/Header/UserMenu.stories.jsx
+1
View File
@@ -3,6 +3,7 @@ import React from "react";
import UserMenu from "./UserMenu";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Header/UserMenu",
component: UserMenu,
website/src/components/Header/UserMenu.tsx
+3 -4
View File
@@ -1,8 +1,8 @@
import React from "react";
import { signOut, useSession } from "next-auth/react";
import Image from "next/image";
import { Popover } from "@headlessui/react";
import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
import { signOut, useSession } from "next-auth/react";
import React from "react";
import { FaCog, FaSignOutAlt } from "react-icons/fa";
import { Box, useColorModeValue } from "@chakra-ui/react";
@@ -14,7 +14,6 @@ export function UserMenu() {
return <></>;
}
if (session && session.user) {
const email = session.user.email;
const accountOptions = [
{
name: "Account Settings",
website/src/components/Header/index.ts
+1 -1
View File
@@ -1,3 +1,3 @@
export { Header } from "./Header";
export { UserMenu } from "./UserMenu";
export { NavLinks } from "./NavLinks";
export { UserMenu } from "./UserMenu";
website/src/components/Hero.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import { useId } from "react";
import Image from "next/image";
import { useColorMode } from "@chakra-ui/react";
import { useId } from "react";
import { Container } from "./Container";
function BackgroundIllustration(props) {
website/src/components/Layout.tsx
+1 -1
View File
@@ -1,9 +1,9 @@
// https://nextjs.org/docs/basic-features/layouts
import type { NextPage } from "next";
import { Header } from "src/components/Header";
import { Footer } from "./Footer";
import { Header } from "src/components/Header";
export type NextPageWithLayout<P = unknown, IP = P> = NextPage<P, IP> & {
getLayout?: (page: React.ReactElement) => React.ReactNode;
website/src/components/Loading/Loading.stories.jsx
+1
View File
@@ -1,5 +1,6 @@
import { LoadingScreen } from "./LoadingScreen";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Example/LoadingScreen",
component: LoadingScreen,
website/src/components/Messages.tsx
+12 -3
View File
@@ -1,3 +1,5 @@
import { FlaggableElement } from "./FlaggableElement";
export interface Message {
text: string;
is_assistant: boolean;
@@ -5,11 +7,18 @@ export interface Message {
const getColor = (isAssistant: boolean) => (isAssistant ? "bg-slate-800" : "bg-sky-900");
export const Messages = ({ messages }: { messages: Message[] }) => {
export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: string }) => {
const items = messages.map(({ text, is_assistant }: Message, i: number) => {
return (
<div key={i + text} className={`${getColor(is_assistant)} p-4 my-1 rounded-xl text-white whitespace-pre-wrap`}>
{text}
<div className="flex" key={i + text}>
<FlaggableElement text={text} post_id={post_id}>
<div
key={i + text}
className={`${getColor(is_assistant)} p-4 my-1 rounded-xl text-white whitespace-pre-wrap float-left mr-3`}
>
{text}
</div>
</FlaggableElement>
</div>
);
});
website/src/components/RankItem.tsx
+2 -2
View File
@@ -2,8 +2,8 @@ const RankItem = ({ username, score }) => {
return (
<div className="flex flex-row justify-between p-6 border-2 border-slate-100 text-left font-semibold hover:bg-sky-50">
<div>1</div>
<div>@username</div>
<div>20.5</div>
<div>{username}</div>
<div>{score}</div>
<div>gold</div>
</div>
);
website/src/components/RatingRadioGroup.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { Box, HStack, useRadio, useRadioGroup } from "@chakra-ui/react";
const RatingRadioButton = (props) => {
const { state, getInputProps, getCheckboxProps } = useRadio(props);
const { getInputProps, getCheckboxProps } = useRadio(props);
const input = getInputProps();
const checkbox = getCheckboxProps();
website/src/components/Sortable/Sortable.tsx
+70 -33
View File
@@ -1,4 +1,23 @@
import { Flex } from "@chakra-ui/react";
import {
closestCenter,
DndContext,
PointerSensor,
TouchSensor,
KeyboardSensor,
useSensor,
useSensors,
} from "@dnd-kit/core";
import type { DragEndEvent } from "@dnd-kit/core/dist/types/events";
import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
import {
arrayMove,
SortableContext,
sortableKeyboardCoordinates,
verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { ReactNode, useEffect, useState } from "react";
import { SortableItem } from "./SortableItem";
export interface SortableProps {
@@ -6,43 +25,61 @@ export interface SortableProps {
onChange: (newSortedIndices: number[]) => void;
}
export const Sortable = ({ items, onChange }) => {
const [sortOrder, setSortOrder] = useState<number[]>([]);
interface SortableItems {
id: number;
originalIndex: number;
item: ReactNode;
}
const update = (newRanking: number[]) => {
setSortOrder(newRanking);
onChange(newRanking);
};
export const Sortable = ({ items, onChange }: SortableProps) => {
const [itemsWithIds, setItemsWithIds] = useState<SortableItems[]>([]);
useEffect(() => {
const indices = Array.from({ length: items.length }).map((_, i) => i);
setSortOrder(indices);
onChange(indices);
}, [items, onChange]);
setItemsWithIds(
items.map((item, idx) => ({
item,
id: idx + 1, // +1 because dndtoolkit has problem with "falsy" ids
originalIndex: idx,
}))
);
}, [items]);
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(TouchSensor),
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
);
return (
<ul className="flex flex-col gap-4">
{sortOrder.map((rank, i) => (
<SortableItem
key={`${rank}`}
canIncrement={i > 0}
onIncrement={() => {
const newRanking = sortOrder.slice();
const newIdx = i - 1;
[newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
update(newRanking);
}}
canDecrement={i < sortOrder.length - 1}
onDecrement={() => {
const newRanking = sortOrder.slice();
const newIdx = i + 1;
[newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
update(newRanking);
}}
>
{items[rank]}
</SortableItem>
))}
</ul>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
modifiers={[restrictToVerticalAxis]}
>
<SortableContext items={itemsWithIds} strategy={verticalListSortingStrategy}>
<Flex direction="column" gap={2}>
{itemsWithIds.map(({ id, item }) => (
<SortableItem key={id} id={id}>
{item}
</SortableItem>
))}
</Flex>
</SortableContext>
</DndContext>
);
function handleDragEnd(event: DragEndEvent) {
const { active, over } = event;
if (active.id === over.id) {
return;
}
setItemsWithIds((items) => {
const oldIndex = items.findIndex((x) => x.id === active.id);
const newIndex = items.findIndex((x) => x.id === over.id);
const newArray = arrayMove(items, oldIndex, newIndex);
onChange(newArray.map((item) => item.originalIndex));
return newArray;
});
}
};
website/src/components/Sortable/SortableItem.tsx
+24 -32
View File
@@ -1,40 +1,32 @@
<<<<<<< HEAD
import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/20/solid";
=======
>>>>>>> main
import { Button } from "@chakra-ui/react";
import clsx from "clsx";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { RxDragHandleDots2 } from "react-icons/rx";
import { PropsWithChildren } from "react";
export interface SortableItemProps {
canIncrement: boolean;
canDecrement: boolean;
onIncrement: () => void;
onDecrement: () => void;
children: React.ReactNode;
}
export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
const style = {
transform: CSS.Transform.toString(transform),
transition,
touchAction: "none",
};
export const SortableItem = ({ canIncrement, canDecrement, onIncrement, onDecrement, children }: SortableItemProps) => {
return (
<li className="grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2">
<ArrowButton active={canIncrement} onClick={onIncrement}>
<ArrowUpIcon width={28} />
</ArrowButton>
<span style={{ gridRow: "span 2" }}>{children}</span>
<ArrowButton active={canDecrement} onClick={onDecrement}>
<ArrowDownIcon width={28} />
</ArrowButton>
<li
className="grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2 bg-white hover:bg-slate-50"
ref={setNodeRef}
style={style}
>
<Button justifyContent="center" variant="ghost" {...attributes} {...listeners}>
<RxDragHandleDots2 />
</Button>
{children}
</li>
);
};
interface ArrowButtonProps {
active: boolean;
onClick: () => void;
children: React.ReactNode;
}
const ArrowButton = ({ children, active, onClick }: ArrowButtonProps) => {
return (
<Button justifyContent="center" variant="ghost" onClick={onClick} disabled={!active}>
{children}
</Button>
);
};
website/src/components/TaskInfo/TaskInfo.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
export const TaskInfo = ({ id, output }: { id: string; output: any }) => {
export const TaskInfo = ({ id, output }: { id: string; output: string }) => {
return (
<div className="grid grid-cols-[min-content_auto] gap-x-2 ">
<b>Prompt</b>
website/src/components/TaskSelection/TaskSelection.tsx
+15 -4
View File
@@ -1,11 +1,20 @@
import React from "react";
import { TaskOptions } from "./TaskOptions";
import { Flex } from "@chakra-ui/react";
import React from "react";
import { useColorMode } from "@chakra-ui/react";
import { TaskOption } from "./TaskOption";
import { TaskOptions } from "./TaskOptions";
export const TaskSelection = () => {
const { colorMode } = useColorMode();
const bgColorClass = colorMode === "light" ? "bg-gray-50" : "bg-gray-600";
const buttonBgColor = colorMode === "light" ? "#2563eb" : "#2563eb";
const borderClass = colorMode === "light" ? "border-slate-200" : "border-transparent";
return (
<Flex gap={10} wrap="wrap" justifyContent="space-evenly" width="full" height="full" alignItems={"center"}>
<Flex gap={10} wrap="wrap" justifyContent="space-evenly" width="full" height="full" alignItems={"center"} className={bgColorClass}>
<TaskOptions key="create" title="Create">
{/* <TaskOption
alt="Summarize Stories"
@@ -22,7 +31,9 @@ export const TaskSelection = () => {
/>
</TaskOptions>
<TaskOptions key="evaluate" title="Evaluate">
{/* <TaskOption
{/*
Commented out while the backend does not support them.
<TaskOption
alt="Rate Prompts"
img="/images/logos/logo.svg"
title="Rate Prompts"
website/src/components/TaskSelection/index.ts
+2 -2
View File
@@ -1,3 +1,3 @@
export { TaskSelection } from "./TaskSelection";
export { TaskOptions } from "./TaskOptions";
export { TaskOption } from "./TaskOption";
export { TaskOptions } from "./TaskOptions";
export { TaskSelection } from "./TaskSelection";
website/src/lib/prismadb.ts
+1 -1
View File
@@ -4,7 +4,7 @@ declare global {
var prisma: PrismaClient | undefined;
}
const client = new PrismaClient();
const client = globalThis.prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") {
globalThis.prisma = client;
}
website/src/pages/404.tsx
-4
View File
@@ -1,8 +1,4 @@
import { useSession } from "next-auth/react";
import { Footer } from "../components/Footer";
import { Header } from "src/components/Header";
import Head from "next/head";
import Link from "next/link";
export default function Error() {
return (
website/src/pages/account/edit.tsx
+3 -3
View File
@@ -1,8 +1,8 @@
import React, { useState } from "react";
import { useSession } from "next-auth/react";
import { Button, Input, InputGroup, Stack } from "@chakra-ui/react";
import { Button, Input, InputGroup } from "@chakra-ui/react";
import Head from "next/head";
import Router from "next/router";
import { useSession } from "next-auth/react";
import React, { useState } from "react";
export default function Account() {
const { data: session } = useSession();
website/src/pages/account/index.tsx
+3 -2
View File
@@ -1,13 +1,14 @@
import { Button } from "@chakra-ui/react";
import Head from "next/head";
import Link from "next/link";
import React, { useState } from "react";
import { useSession } from "next-auth/react";
import { Button } from "@chakra-ui/react";
import React, { useState } from "react";
export default function Account() {
const { data: session } = useSession();
const [username, setUsername] = useState("null");
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleUpdate = async () => {
const response = await fetch("../api/update", {
method: "POST",
website/src/pages/api/auth/[...nextauth].ts
+15 -8
View File
@@ -1,12 +1,10 @@
import type { AuthOptions } from "next-auth";
import NextAuth from "next-auth";
import { NextApiHandler } from "next";
import DiscordProvider from "next-auth/providers/discord";
import EmailProvider from "next-auth/providers/email";
import CredentialsProvider from "next-auth/providers/credentials";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { boolean } from "boolean";
import type { AuthOptions } from "next-auth";
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import DiscordProvider from "next-auth/providers/discord";
import EmailProvider from "next-auth/providers/email";
import prisma from "src/lib/prismadb";
const providers = [];
@@ -43,10 +41,19 @@ if (boolean(process.env.DEBUG_LOGIN) || process.env.NODE_ENV === "development")
username: { label: "Username", type: "text" },
},
async authorize(credentials) {
return {
const user = {
id: credentials.username,
name: credentials.username,
};
// save the user to the database
await prisma.user.upsert({
where: {
id: user.id,
},
update: {},
create: user,
});
return user;
},
})
);
website/src/pages/api/new_task/[task_type].ts
+2 -4
View File
@@ -1,7 +1,5 @@
import { getToken } from "next-auth/jwt";
import prisma from "src/lib/prismadb";
import { authOptions } from "src/pages/api/auth/[...nextauth]";
/**
* Returns a new task created from the Task Backend. We do a few things here:
@@ -62,10 +60,10 @@ const handler = async (req, res) => {
"Content-Type": "application/json",
},
body: JSON.stringify({
post_id: registeredTask.id,
message_id: registeredTask.id,
}),
});
const ack = await ackRes.json();
await ackRes.json();
// Send the results to the client.
res.status(200).json(registeredTask);
website/src/pages/api/update_task.ts
+4 -6
View File
@@ -1,7 +1,5 @@
import { getToken } from "next-auth/jwt";
import prisma from "src/lib/prismadb";
import { authOptions } from "src/pages/api/auth/[...nextauth]";
/**
* Stores the task interaction with the Task Backend and then returns the next task generated.
@@ -22,7 +20,7 @@ const handler = async (req, res) => {
}
// Parse out the local task ID and the interaction contents.
const { id, content } = await JSON.parse(req.body);
const { id, content, update_type } = await JSON.parse(req.body);
// Log the interaction locally to create our user_post_id needed by the Task
// Backend.
@@ -46,14 +44,14 @@ const handler = async (req, res) => {
"Content-Type": "application/json",
},
body: JSON.stringify({
type: "post_rating",
type: update_type,
user: {
id: token.sub,
display_name: token.name || token.email,
auth_method: "local",
},
post_id: id,
user_post_id: interaction.id,
message_id: id,
user_message_id: interaction.id,
...content,
}),
});
website/src/pages/api/username.tsx
-3
View File
@@ -1,13 +1,10 @@
import { getSession } from "next-auth/react";
import { Prisma } from "@prisma/client";
import Email from "next-auth/providers/email";
// POST /api/post
// Required fields in body: title
// Optional fields in body: content
export default async function handle(req, res) {
const { username } = req.body;
const { email } = req.body;
const session = await getSession({ req });
const result = await prisma.user.update({
website/src/pages/auth/signin.tsx
+2 -1
View File
@@ -9,6 +9,7 @@ import { Footer } from "src/components/Footer";
import { AuthLayout } from "src/components/AuthLayout";
import { useColorMode } from "@chakra-ui/react";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function Signin({ csrfToken, providers }) {
const { discord, email, github, credentials } = providers;
const emailEl = useRef(null);
@@ -71,7 +72,7 @@ function Signin({ csrfToken, providers }) {
size="lg"
leftIcon={<FaDiscord />}
color="white"
onClick={() => signIn(discord, { callbackUrl: "/" })}
onClick={() => signIn(discord.id, { callbackUrl: "/" })}
// isDisabled="false"
>
Continue with Discord
website/src/pages/auth/verify.tsx
+2 -3
View File
@@ -1,7 +1,5 @@
import Head from "next/head";
import { getCsrfToken, getProviders, signIn } from "next-auth/react";
import Link from "next/link";
import { getCsrfToken, getProviders } from "next-auth/react";
import { AuthLayout } from "src/components/AuthLayout";
export default function Verify() {
@@ -18,6 +16,7 @@ export default function Verify() {
);
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export async function getServerSideProps(context) {
const csrfToken = await getCsrfToken();
const providers = await getProviders();
website/src/pages/create/assistant_reply.tsx
+23 -16
View File
@@ -1,31 +1,28 @@
import { Container, Flex, Textarea } from "@chakra-ui/react";
import { useRef, useState } from "react";
import useSWRMutation from "swr/mutation";
import useSWRImmutable from "swr/immutable";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import { Messages } from "src/components/Messages";
import { TwoColumns } from "src/components/TwoColumns";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Messages } from "src/components/Messages";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { TwoColumns } from "src/components/TwoColumns";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
const AssistantReply = () => {
const [tasks, setTasks] = useState([]);
const inputRef = useRef<HTMLTextAreaElement>(null);
const { isLoading } = useSWRImmutable("/api/new_task/assistant_reply ", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/assistant_reply ", fetcher, {
onSuccess: (data) => {
console.log(data);
setTasks([data]);
},
});
const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
const { trigger } = useSWRMutation("/api/update_task", poster, {
onSuccess: async (data) => {
const newTask = await data.json();
setTasks((oldTasks) => [...oldTasks, newTask]);
@@ -36,13 +33,18 @@ const AssistantReply = () => {
const text = inputRef.current.value.trim();
trigger({
id: task.id,
update_type: "text_reply_to_post",
update_type: "text_reply_to_message",
content: {
text,
},
});
};
const fetchNextTask = () => {
inputRef.current.value = "";
mutate();
};
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
@@ -52,13 +54,14 @@ const AssistantReply = () => {
}
const task = tasks[0].task;
const endTask = tasks[tasks.length - 1];
return (
<Container className="p-6 text-gray-800">
<TwoColumns>
<>
<h5 className="text-lg font-semibold">Reply as the assistant</h5>
<p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
<Messages messages={task.conversation.messages} />
<Messages messages={task.conversation.messages} post_id={task.id} />
</>
<Textarea name="reply" placeholder="Reply..." ref={inputRef} />
</TwoColumns>
@@ -68,7 +71,11 @@ const AssistantReply = () => {
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</section>
</Container>
website/src/pages/create/summarize_story.tsx
+9 -11
View File
@@ -1,17 +1,15 @@
import { Flex, Textarea } from "@chakra-ui/react";
import Head from "next/head";
import { useRef, useState } from "react";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { TwoColumns } from "src/components/TwoColumns";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { TwoColumns } from "src/components/TwoColumns";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
const SummarizeStory = () => {
// Use an array of tasks that record the sequence of steps until a task is
@@ -31,7 +29,7 @@ const SummarizeStory = () => {
// Every time we submit an answer to the latest task, let the backend handle
// all the interactions then add the resulting task to the queue. This ends
// when we hit the done task.
const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
const { trigger } = useSWRMutation("/api/update_task", poster, {
onSuccess: async (data) => {
const newTask = await data.json();
// This is the more efficient way to update a react state array.
@@ -45,7 +43,7 @@ const SummarizeStory = () => {
const text = inputRef.current.value.trim();
trigger({
id: task.id,
update_type: "text_reply_to_post",
update_type: "text_reply_to_message",
content: {
text,
},
website/src/pages/create/user_reply.tsx
+23 -16
View File
@@ -1,17 +1,16 @@
import { Container, Flex, Textarea, useColorModeValue } from "@chakra-ui/react";
import { Flex, Textarea, useColorModeValue } from "@chakra-ui/react";
import { Container } from "src/components/Container";
import { useRef, useState } from "react";
import useSWRMutation from "swr/mutation";
import useSWRImmutable from "swr/immutable";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Messages } from "src/components/Messages";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { TwoColumns } from "src/components/TwoColumns";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
const UserReply = () => {
const [tasks, setTasks] = useState([]);
@@ -19,14 +18,13 @@ const UserReply = () => {
const inputRef = useRef<HTMLTextAreaElement>(null);
const { isLoading } = useSWRImmutable("/api/new_task/user_reply", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/prompter_reply", fetcher, {
onSuccess: (data) => {
console.log(data);
setTasks([data]);
},
});
const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
const { trigger } = useSWRMutation("/api/update_task", poster, {
onSuccess: async (data) => {
const newTask = await data.json();
setTasks((oldTasks) => [...oldTasks, newTask]);
@@ -37,13 +35,18 @@ const UserReply = () => {
const text = inputRef.current.value.trim();
trigger({
id: task.id,
update_type: "text_reply_to_post",
update_type: "text_reply_to_message",
content: {
text,
},
});
};
const fetchNextTask = () => {
inputRef.current.value = "";
mutate();
};
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
@@ -53,13 +56,14 @@ const UserReply = () => {
}
const task = tasks[0].task;
const endTask = tasks[tasks.length - 1];
return (
<Container className="p-6">
<TwoColumns>
<>
<h5 className="text-lg font-semibold">Reply as a user</h5>
<p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
<Messages messages={task.conversation.messages} />
<Messages messages={task.conversation.messages} post_id={task.id} />
{task.hint && <p className="text-lg py-1">Hint: {task.hint}</p>}
</>
<Textarea name="reply" placeholder="Reply..." ref={inputRef} />
@@ -67,10 +71,13 @@ const UserReply = () => {
<section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
<TaskInfo id={tasks[0].id} output="Submit your answer" />
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</section>
</Container>
website/src/pages/evaluate/rank_assistant_replies.tsx
+24 -15
View File
@@ -1,17 +1,15 @@
import { Button, Container, Flex, useColorModeValue } from "@chakra-ui/react";
import Head from "next/head";
import { useState } from "react";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Sortable } from "src/components/Sortable/Sortable";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { SubmitButton } from "src/components/Buttons/Submit";
import { SkipButton } from "src/components/Buttons/Skip";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
const RankAssistantReplies = () => {
const [tasks, setTasks] = useState([]);
@@ -20,14 +18,15 @@ const RankAssistantReplies = () => {
* The best reply will have index 0, and the worst is the last.
*/
const [ranking, setRanking] = useState<number[]>([]);
const bg = useColorModeValue("gray.100", "gray.800");
const { isLoading } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
onSuccess: (data) => {
setTasks([data]);
},
});
const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
const { trigger } = useSWRMutation("/api/update_task", poster, {
onSuccess: async (data) => {
const newTask = await data.json();
setTasks((oldTasks) => [...oldTasks, newTask]);
@@ -37,13 +36,18 @@ const RankAssistantReplies = () => {
const submitResponse = (task) => {
trigger({
id: task.id,
update_type: "post_ranking",
update_type: "message_ranking",
content: {
ranking,
},
});
};
const fetchNextTask = () => {
setRanking([]);
mutate();
};
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
@@ -51,8 +55,9 @@ const RankAssistantReplies = () => {
if (tasks.length == 0) {
return <Container className="p-6 bg-slate-100 text-gray-800">No Tasks Found...</Container>;
}
const replies = tasks[0].task.replies as string[];
const replies = tasks[0].task.replies as string[];
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
@@ -73,9 +78,13 @@ const RankAssistantReplies = () => {
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</Container>
</Container>
website/src/pages/evaluate/rank_initial_prompts.tsx
+22 -15
View File
@@ -1,18 +1,15 @@
import { Flex } from "@chakra-ui/react";
import Head from "next/head";
import { useState } from "react";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import { Container, useColorModeValue } from "@chakra-ui/react";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Sortable } from "src/components/Sortable/Sortable";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
const RankInitialPrompts = () => {
const [tasks, setTasks] = useState([]);
@@ -23,13 +20,13 @@ const RankInitialPrompts = () => {
const [ranking, setRanking] = useState<number[]>([]);
const bg = useColorModeValue("gray.100", "gray.800");
const { isLoading } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
onSuccess: (data) => {
setTasks([data]);
},
});
const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
const { trigger } = useSWRMutation("/api/update_task", poster, {
onSuccess: async (data) => {
const newTask = await data.json();
setTasks((oldTasks) => [...oldTasks, newTask]);
@@ -39,13 +36,18 @@ const RankInitialPrompts = () => {
const submitResponse = (task) => {
trigger({
id: task.id,
update_type: "post_ranking",
update_type: "message_ranking",
content: {
ranking,
},
});
};
const fetchNextTask = () => {
setRanking([]);
mutate();
};
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
@@ -54,6 +56,7 @@ const RankInitialPrompts = () => {
return <Container className="p-6 bg-slate-100 text-gray-800">No tasks found...</Container>;
}
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
@@ -74,9 +77,13 @@ const RankInitialPrompts = () => {
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</section>
</Container>
website/src/pages/evaluate/rank_user_replies.tsx
+24 -15
View File
@@ -1,17 +1,15 @@
import { Flex } from "@chakra-ui/react";
import Head from "next/head";
import { useState } from "react";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Sortable } from "src/components/Sortable/Sortable";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { Container, Flex, useColorModeValue } from "@chakra-ui/react";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
const RankUserReplies = () => {
const [tasks, setTasks] = useState([]);
@@ -20,14 +18,15 @@ const RankUserReplies = () => {
* The best reply will have index 0, and the worst is the last.
*/
const [ranking, setRanking] = useState<number[]>([]);
const bg = useColorModeValue("gray.100", "gray.800");
const { isLoading } = useSWRImmutable("/api/new_task/rank_user_replies", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_prompter_replies", fetcher, {
onSuccess: (data) => {
setTasks([data]);
},
});
const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
const { trigger } = useSWRMutation("/api/update_task", poster, {
onSuccess: async (data) => {
const newTask = await data.json();
setTasks((oldTasks) => [...oldTasks, newTask]);
@@ -37,13 +36,18 @@ const RankUserReplies = () => {
const submitResponse = (task) => {
trigger({
id: task.id,
update_type: "post_ranking",
update_type: "message_ranking",
content: {
ranking,
},
});
};
const fetchNextTask = () => {
setRanking([]);
mutate();
};
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
@@ -53,6 +57,7 @@ const RankUserReplies = () => {
}
const replies = tasks[0].task.replies as string[];
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
@@ -73,9 +78,13 @@ const RankUserReplies = () => {
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</section>
</Container>
website/src/pages/evaluate/rate_summary.tsx
+17 -14
View File
@@ -2,18 +2,16 @@ import { Flex, Textarea } from "@chakra-ui/react";
import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
import Head from "next/head";
import { useState } from "react";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
import RatingRadioGroup from "src/components/RatingRadioGroup";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { TwoColumns } from "src/components/TwoColumns";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import RatingRadioGroup from "src/components/RatingRadioGroup";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { TwoColumns } from "src/components/TwoColumns";
import fetcher from "src/lib/fetcher";
import poster from "src/lib/poster";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
const RateSummary = () => {
// Use an array of tasks that record the sequence of steps until a task is
@@ -23,9 +21,8 @@ const RateSummary = () => {
// Fetch the very fist task. We can ignore everything except isLoading
// because the onSuccess handler will update `tasks` when ready.
const { isLoading } = useSWRImmutable("/api/new_task/rate_summary", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/rate_summary", fetcher, {
onSuccess: (data) => {
console.log(data);
setTasks([data]);
},
});
@@ -33,7 +30,7 @@ const RateSummary = () => {
// Every time we submit an answer to the latest task, let the backend handle
// all the interactions then add the resulting task to the queue. This ends
// when we hit the done task.
const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
const { trigger } = useSWRMutation("/api/update_task", poster, {
onSuccess: async (data) => {
const newTask = await data.json();
// This is the more efficient way to update a react state array.
@@ -46,6 +43,7 @@ const RateSummary = () => {
const submitResponse = (t) => {
trigger({
id: t.id,
update_type: "message_rating",
content: {
rating: rating,
},
@@ -60,6 +58,7 @@ const RateSummary = () => {
return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
}
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
@@ -97,7 +96,11 @@ const RateSummary = () => {
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
) : (
<SubmitButton onClick={mutate}>Next Task</SubmitButton>
)}
</Flex>
</section>
</main>
website/src/pages/index.tsx
+2 -7
View File
@@ -1,12 +1,11 @@
import Head from "next/head";
import { useSession } from "next-auth/react";
import { CallToAction } from "src/components/CallToAction";
import { Faq } from "src/components/Faq";
import { Footer } from "src/components/Footer";
import { Header } from "src/components/Header";
import { Hero } from "src/components/Hero";
import { TaskSelection } from "src/components/TaskSelection";
import { Header } from "src/components/Header";
import { Footer } from "src/components/Footer";
import { Box, Container } from "@chakra-ui/react";
const Home = () => {
@@ -22,16 +21,12 @@ const Home = () => {
/>
</Head>
{session ? (
<Container>
<TaskSelection />
</Container>
) : (
<main className="oa-basic-theme">
{/* <Container className="min-w-full" variant="no-padding"> */}
<Hero />
<CallToAction />
<Faq />
{/* </Container> */}
</main>
)}
</>
website/src/pages/leaderboard/score-leaderboard.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import RankItem from "src/components/RankItem";
import { HiBarsArrowDown } from "react-icons/hi2";
import RankItem from "src/components/RankItem";
const LeaderBoard = () => {
const PlaceHolderProps = { username: "test_user", score: 10 };