- {' '}
+ {" "}
{text.split(regex).map((part, i) => {
// When splitting, the even parts are basic text sections, while the odd ones are
// citations
if (i % 2 == 0) {
- return textRenderer(part)
+ return textRenderer(part);
} else {
- return
+ return ;
}
})}
- )
-}
+ );
+};
diff --git a/web/src/components/controls.tsx b/web/src/components/controls.tsx
index 260c6dd..a92ae63 100644
--- a/web/src/components/controls.tsx
+++ b/web/src/components/controls.tsx
@@ -1,6 +1,12 @@
-import type {Mode} from '../types'
+import type { Mode } from "../types";
-export const Controls = ({mode, setMode}: {mode: [Mode, boolean]; setMode: (m: any) => void}) => {
+export const Controls = ({
+ mode,
+ setMode,
+}: {
+ mode: [Mode, boolean];
+ setMode: (m: any) => void;
+}) => {
{
/* three buttons for the three modes, place far right, 1rem between each */
}
@@ -8,10 +14,11 @@ export const Controls = ({mode, setMode}: {mode: [Mode, boolean]; setMode: (m: a
- )
-}
+ );
+};
diff --git a/web/src/components/entry.tsx b/web/src/components/entry.tsx
index c6d6341..2e052b6 100644
--- a/web/src/components/entry.tsx
+++ b/web/src/components/entry.tsx
@@ -4,14 +4,14 @@ import type {
ErrorMessage,
StampyMessage,
UserEntry,
-} from '../types'
-import {AssistantEntry} from './assistant'
-import {GlossarySpan} from './glossary'
-import Image from 'next/image'
-import logo from '../logo.svg'
-import TextareaAutosize from 'react-textarea-autosize'
+} from "../types";
+import { AssistantEntry } from "./assistant";
+import { GlossarySpan } from "./glossary";
+import Image from "next/image";
+import logo from "../logo.svg";
+import TextareaAutosize from "react-textarea-autosize";
-export const User = ({entry}: {entry: UserEntry}) => {
+export const User = ({ entry }: { entry: UserEntry }) => {
return (
- )
-}
+ );
+};
-export default Header
+export default Header;
diff --git a/web/src/components/html.tsx b/web/src/components/html.tsx
index e23c6dc..8312bb7 100644
--- a/web/src/components/html.tsx
+++ b/web/src/components/html.tsx
@@ -5,28 +5,28 @@
// the source file for it to be included in the build
export const Colours = [
- 'bg-red-100 border-red-300 text-red-800',
- 'bg-amber-100 border-amber-300 text-amber-800',
- 'bg-orange-100 border-orange-300 text-orange-800',
- 'bg-lime-100 border-lime-300 text-lime-800',
- 'bg-green-100 border-green-300 text-green-800',
- 'bg-cyan-100 border-cyan-300 text-cyan-800',
- 'bg-blue-100 border-blue-300 text-blue-800',
- 'bg-violet-100 border-violet-300 text-violet-800',
- 'bg-pink-100 border-pink-300 text-pink-800',
-]
+ "bg-red-100 border-red-300 text-red-800",
+ "bg-amber-100 border-amber-300 text-amber-800",
+ "bg-orange-100 border-orange-300 text-orange-800",
+ "bg-lime-100 border-lime-300 text-lime-800",
+ "bg-green-100 border-green-300 text-green-800",
+ "bg-cyan-100 border-cyan-300 text-cyan-800",
+ "bg-blue-100 border-blue-300 text-blue-800",
+ "bg-violet-100 border-violet-300 text-violet-800",
+ "bg-pink-100 border-pink-300 text-pink-800",
+];
export const A: React.FC<{
- href: string
- className?: string
- children: React.ReactNode
-}> = ({href, className, children}) => {
+ href: string;
+ className?: string;
+ children: React.ReactNode;
+}> = ({ href, className, children }) => {
// link element that only populates the href field if the contents are there
- return href && href !== '' ? (
+ return href && href !== "" ? (
{children}
) : (
{children}
- )
-}
+ );
+};
diff --git a/web/src/components/page.tsx b/web/src/components/page.tsx
index 23f899e..f64337b 100644
--- a/web/src/components/page.tsx
+++ b/web/src/components/page.tsx
@@ -1,8 +1,11 @@
-import React, {ReactNode} from 'react'
-import Head from 'next/head'
-import Header from './header'
+import React, { ReactNode } from "react";
+import Head from "next/head";
+import Header from "./header";
-const Page: React.FC<{children: ReactNode; page: 'index' | 'semantic'}> = ({page, children}) => {
+const Page: React.FC<{ children: ReactNode; page: "index" | "semantic" }> = ({
+ page,
+ children,
+}) => {
return (
<>
@@ -13,6 +16,6 @@ const Page: React.FC<{children: ReactNode; page: 'index' | 'semantic'}> = ({page
{children}
- )
-}
-export default Page
+ );
+};
+export default Page;
diff --git a/web/src/components/searchbox.tsx b/web/src/components/searchbox.tsx
index 07b827c..f54470f 100644
--- a/web/src/components/searchbox.tsx
+++ b/web/src/components/searchbox.tsx
@@ -1,100 +1,106 @@
-import React from 'react'
-import {useState, useEffect} from 'react'
-import type {Followup} from '../types'
-import TextareaAutosize from 'react-textarea-autosize'
-import dynamic from 'next/dynamic'
+import React from "react";
+import { useState, useEffect } from "react";
+import type { Followup } from "../types";
+import TextareaAutosize from "react-textarea-autosize";
+import dynamic from "next/dynamic";
// initial questions to fill the search box with.
export const initialQuestions: string[] = [
- 'Are there any regulatory efforts aimed at addressing AI safety and alignment concerns?',
- 'How can I help with AI safety and alignment?',
- 'How could a predictive model - like an LLM - act like an agent?',
+ "Are there any regulatory efforts aimed at addressing AI safety and alignment concerns?",
+ "How can I help with AI safety and alignment?",
+ "How could a predictive model - like an LLM - act like an agent?",
"How could an AI possibly be an x-risk when some populations aren't even connected to the internet?",
"I'm not convinced, why is this important?",
- 'Summarize the differences in opinion between Eliezer Yudkowsky and Paul Christiano.',
+ "Summarize the differences in opinion between Eliezer Yudkowsky and Paul Christiano.",
'What are "RAAPs"?',
'What are "scaling laws" and how are they relevant to safety?',
- 'What are some of the different research approaches?',
- 'What are the differences between Inner and Outer alignment?',
+ "What are some of the different research approaches?",
+ "What are the differences between Inner and Outer alignment?",
'What does the term "x-risk" mean?',
'What is "FOOM"?',
'What is "instrumental convergence"?',
- 'What is a hard takeoff?',
- 'What is a mesa-optimizer?',
- 'What is AI safety and alignment?',
- 'What is an AI arms race?',
- 'What is an Intelligence Explosion?',
+ "What is a hard takeoff?",
+ "What is a mesa-optimizer?",
+ "What is AI safety and alignment?",
+ "What is an AI arms race?",
+ "What is an Intelligence Explosion?",
'What is the "orthogonality thesis"?',
'Why would we expect AI to be "misaligned by default"?',
-]
+];
const SearchBoxInternal: React.FC<{
search: (
query: string,
- query_source: 'search' | 'followups',
+ query_source: "search" | "followups",
enable: (f_set: Followup[] | ((fs: Followup[]) => Followup[])) => void,
controller: AbortController
- ) => void
- onQuery?: (q: string) => any
-}> = ({search, onQuery}) => {
- const initial_query = initialQuestions[Math.floor(Math.random() * initialQuestions.length)] || ''
+ ) => void;
+ onQuery?: (q: string) => any;
+}> = ({ search, onQuery }) => {
+ const initial_query =
+ initialQuestions[Math.floor(Math.random() * initialQuestions.length)] || "";
- const [query, setQuery] = useState(initial_query)
- const [loading, setLoading] = useState(false)
- const [followups, setFollowups] = useState([])
- const [controller, setController] = useState(new AbortController())
+ const [query, setQuery] = useState(initial_query);
+ const [loading, setLoading] = useState(false);
+ const [followups, setFollowups] = useState([]);
+ const [controller, setController] = useState(new AbortController());
- const inputRef = React.useRef(null)
+ const inputRef = React.useRef(null);
// because everything is async, I can't just manually set state at the
// point we do a search. Instead it needs to be passed into the search
// method, for some reason.
const enable =
- (controller: AbortController) => (f_set: Followup[] | ((fs: Followup[]) => Followup[])) => {
- if (!controller.signal.aborted) setQuery('')
+ (controller: AbortController) =>
+ (f_set: Followup[] | ((fs: Followup[]) => Followup[])) => {
+ if (!controller.signal.aborted) setQuery("");
- setLoading(false)
- setFollowups(f_set)
- }
+ setLoading(false);
+ setFollowups(f_set);
+ };
useEffect(() => {
// set focus on the input box
- if (!loading) inputRef.current?.focus()
- }, [loading])
+ if (!loading) inputRef.current?.focus();
+ }, [loading]);
// on first mount focus and set cursor to end of input
useEffect(() => {
- if (!inputRef.current) return
- inputRef.current.focus()
- inputRef.current.selectionStart = inputRef.current.textLength
- inputRef.current.selectionEnd = inputRef.current.textLength
- }, [])
+ if (!inputRef.current) return;
+ inputRef.current.focus();
+ inputRef.current.selectionStart = inputRef.current.textLength;
+ inputRef.current.selectionEnd = inputRef.current.textLength;
+ }, []);
- const runSearch = (query: string, searchtype: 'search' | 'followups') => () => {
- if (loading || query.trim() === '') return
+ const runSearch =
+ (query: string, searchtype: "search" | "followups") => () => {
+ if (loading || query.trim() === "") return;
- setLoading(true)
- const controller = new AbortController()
- setController(controller)
- search(query, 'search', enable(controller), controller)
- }
- const cancelSearch = () => controller.abort()
+ setLoading(true);
+ const controller = new AbortController();
+ setController(controller);
+ search(query, "search", enable(controller), controller);
+ };
+ const cancelSearch = () => controller.abort();
return (
<>
The thesis that any level of intelligence is compatible with any terminal goals. This implies that intelligence alone is not enough to make a system moral.
\n',
+ "
The thesis that any level of intelligence is compatible with any terminal goals. This implies that intelligence alone is not enough to make a system moral.
Instrumental convergence is the idea that different AI agents, each with distinct terminal goals, will end up adopting many of the same instrumental goals.
\n',
+ "
Instrumental convergence is the idea that different AI agents, each with distinct terminal goals, will end up adopting many of the same instrumental goals.
Instrumental convergence is the idea that different AI agents, each with distinct terminal goals, will end up adopting many of the same instrumental goals.
\n',
+ "
Instrumental convergence is the idea that different AI agents, each with distinct terminal goals, will end up adopting many of the same instrumental goals.
risks that threaten the destruction of humanity's long-term potential, including human extinction
\n",
},
-}
+};
const tempHackFetch = (_url: string) => {
return new Promise((resolve, _reject) => {
@@ -129,7 +131,7 @@ const tempHackFetch = (_url: string) => {
resolve({
ok: true,
json: () => Promise.resolve(GLOSSARY_JSON),
- } as unknown as Response)
- }, 1000)
- })
-}
+ } as unknown as Response);
+ }, 1000);
+ });
+};
diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
index c721e2a..41482d1 100644
--- a/web/src/pages/index.tsx
+++ b/web/src/pages/index.tsx
@@ -1,46 +1,46 @@
-import {type NextPage} from 'next'
-import {useState, useEffect} from 'react'
-import Link from 'next/link'
+import { type NextPage } from "next";
+import { useState, useEffect } from "react";
+import Link from "next/link";
-import {queryLLM, getStampyContent, runSearch} from '../hooks/useSearch'
-import type {Mode} from '../types'
-import Page from '../components/page'
-import Chat from '../components/chat'
-import {Controls} from '../components/controls'
+import { queryLLM, getStampyContent, runSearch } from "../hooks/useSearch";
+import type { Mode } from "../types";
+import Page from "../components/page";
+import Chat from "../components/chat";
+import { Controls } from "../components/controls";
-const MAX_FOLLOWUPS = 4
+const MAX_FOLLOWUPS = 4;
const Home: NextPage = () => {
- const [sessionId, setSessionId] = useState('')
- const [mode, setMode] = useState<[Mode, boolean]>(['default', false])
+ const [sessionId, setSessionId] = useState("");
+ const [mode, setMode] = useState<[Mode, boolean]>(["default", false]);
// store mode in localstorage
useEffect(() => {
- if (mode[1]) localStorage.setItem('chat_mode', mode[0])
- }, [mode])
+ if (mode[1]) localStorage.setItem("chat_mode", mode[0]);
+ }, [mode]);
// initial load
useEffect(() => {
- const mode = (localStorage.getItem('chat_mode') as Mode) || 'default'
- setMode([mode, true])
- setSessionId(crypto.randomUUID())
- }, [])
+ const mode = (localStorage.getItem("chat_mode") as Mode) || "default";
+ setMode([mode, true]);
+ setSessionId(crypto.randomUUID());
+ }, []);
return (
- WARNING: This is a very early prototype.{' '}
+ WARNING: This is a very early prototype.{" "}
Feedback
- {' '}
+ {" "}
welcomed.
-
+
- )
-}
+ );
+};
-export default Home
+export default Home;
diff --git a/web/src/pages/playground.tsx b/web/src/pages/playground.tsx
index 29a2d68..1c7dbe2 100644
--- a/web/src/pages/playground.tsx
+++ b/web/src/pages/playground.tsx
@@ -1,108 +1,117 @@
-import type {NextPage} from 'next'
-import {useState, useEffect, ChangeEvent} from 'react'
-import TextareaAutosize from 'react-textarea-autosize'
-import Head from 'next/head'
-import Link from 'next/link'
+import type { NextPage } from "next";
+import { useState, useEffect, ChangeEvent } from "react";
+import TextareaAutosize from "react-textarea-autosize";
+import Head from "next/head";
+import Link from "next/link";
-import {queryLLM, getStampyContent, runSearch} from '../hooks/useSearch'
-import type {Mode, Entry, LLMSettings} from '../types'
-import Header from '../components/header'
-import Chat from '../components/chat'
-import {Controls} from '../components/controls'
+import { queryLLM, getStampyContent, runSearch } from "../hooks/useSearch";
+import type { Mode, Entry, LLMSettings } from "../types";
+import Header from "../components/header";
+import Chat from "../components/chat";
+import { Controls } from "../components/controls";
-const MAX_FOLLOWUPS = 4
+const MAX_FOLLOWUPS = 4;
const DEFAULT_PROMPTS = {
source: {
prefix:
- 'You are a helpful assistant knowledgeable about AI Alignment and Safety. ' +
+ "You are a helpful assistant knowledgeable about AI Alignment and Safety. " +
'Please give a clear and coherent answer to the user\'s questions.(written after "Q:") ' +
- 'using the following sources. Each source is labeled with a letter. Feel free to ' +
- 'use the sources in any order, and try to use multiple sources in your answers.\n\n',
+ "using the following sources. Each source is labeled with a letter. Feel free to " +
+ "use the sources in any order, and try to use multiple sources in your answers.\n\n",
suffix:
- '\n\n' +
+ "\n\n" +
'Before the question ("Q: "), there will be a history of previous questions and answers. ' +
- 'These sources only apply to the last question. Any sources used in previous answers ' +
- 'are invalid.',
+ "These sources only apply to the last question. Any sources used in previous answers " +
+ "are invalid.",
},
question:
- 'In your answer, please cite any claims you make back to each source ' +
- 'using the format: [a], [b], etc. If you use multiple sources to make a claim ' +
+ "In your answer, please cite any claims you make back to each source " +
+ "using the format: [a], [b], etc. If you use multiple sources to make a claim " +
'cite all of them. For example: "AGI is concerning [c, d, e]."\n\n',
modes: {
- default: '',
+ default: "",
concise:
- 'Answer very concisely, getting to the crux of the matter in as ' +
- 'few words as possible. Limit your answer to 1-2 sentences.\n\n',
+ "Answer very concisely, getting to the crux of the matter in as " +
+ "few words as possible. Limit your answer to 1-2 sentences.\n\n",
rookie:
"This user is new to the field of AI Alignment and Safety - don't " +
- 'assume they know any technical terms or jargon. Still give a complete answer ' +
- 'without patronizing the user, but take any extra time needed to ' +
- 'explain new concepts or to illustrate your answer with examples. ' +
- 'Put extra effort into explaining the intuition behind concepts ' +
- 'rather than just giving a formal definition.\n\n',
+ "assume they know any technical terms or jargon. Still give a complete answer " +
+ "without patronizing the user, but take any extra time needed to " +
+ "explain new concepts or to illustrate your answer with examples. " +
+ "Put extra effort into explaining the intuition behind concepts " +
+ "rather than just giving a formal definition.\n\n",
},
-}
+};
const MODELS = {
- 'gpt-3.5-turbo': {numTokens: 4095, topKBlocks: 10},
- 'gpt-3.5-turbo-16k': {numTokens: 16385, topKBlocks: 30},
- 'gpt-4': {numTokens: 8192, topKBlocks: 20},
+ "gpt-3.5-turbo": { numTokens: 4095, topKBlocks: 10 },
+ "gpt-3.5-turbo-16k": { numTokens: 16385, topKBlocks: 30 },
+ "gpt-4": { numTokens: 8192, topKBlocks: 20 },
/* 'gpt-4-32k': {numTokens: 32768, topKBlocks: 30}, */
-}
+};
const DEFAULT_SETTINGS = {
prompts: DEFAULT_PROMPTS,
- mode: 'default' as Mode,
- completions: 'gpt-3.5-turbo',
- encoder: 'cl100k_base',
- topKBlocks: MODELS['gpt-3.5-turbo'].topKBlocks, // the number of blocks to use as citations
- numTokens: MODELS['gpt-3.5-turbo'].numTokens,
+ mode: "default" as Mode,
+ completions: "gpt-3.5-turbo",
+ encoder: "cl100k_base",
+ topKBlocks: MODELS["gpt-3.5-turbo"].topKBlocks, // the number of blocks to use as citations
+ numTokens: MODELS["gpt-3.5-turbo"].numTokens,
tokensBuffer: 50, // the number of tokens to leave as a buffer when calculating remaining tokens
maxHistory: 10, // the max number of previous items to use as history
historyFraction: 0.25, // the (approximate) fraction of num_tokens to use for history text before truncating
contextFraction: 0.5, // the (approximate) fraction of num_tokens to use for context text before truncating
-}
-const ENCODERS = ['cl100k_base']
+};
+const ENCODERS = ["cl100k_base"];
-const updateIn = (obj: {[key: string]: any}, [head, ...rest]: string[], val: any) => {
+const updateIn = (
+ obj: { [key: string]: any },
+ [head, ...rest]: string[],
+ val: any
+) => {
if (!head) {
// No path provided - do nothing
} else if (!rest || rest.length == 0) {
- obj[head] = val
+ obj[head] = val;
} else {
- updateIn(obj[head], rest, val)
+ updateIn(obj[head], rest, val);
}
- return obj
-}
+ return obj;
+};
-type Parseable = string | number | undefined
-type NumberParser = (v: Parseable) => number
+type Parseable = string | number | undefined;
+type NumberParser = (v: Parseable) => number;
type InputFields = {
- field: string
- label: string
- value?: Parseable
- min?: string | number
- max?: string | number
- step?: string | number
- parser?: NumberParser
- updater: (v: any) => any
-}
+ field: string;
+ label: string;
+ value?: Parseable;
+ min?: string | number;
+ max?: string | number;
+ step?: string | number;
+ parser?: NumberParser;
+ updater: (v: any) => any;
+};
const between =
- (min: Parseable, max: Parseable, parser: NumberParser, updater: (v: any) => any) =>
+ (
+ min: Parseable,
+ max: Parseable,
+ parser: NumberParser,
+ updater: (v: any) => any
+ ) =>
(event: ChangeEvent) => {
- let num = parser((event.target as HTMLInputElement).value)
+ let num = parser((event.target as HTMLInputElement).value);
if (isNaN(num)) {
- return
+ return;
} else if (min !== undefined && num < parser(min)) {
- num = parser(min)
+ num = parser(min);
} else if (max !== undefined && num > parser(max)) {
- num = parser(max)
+ num = parser(max);
}
- updater(num)
- }
+ updater(num);
+ };
-const SectionHeader = ({text}: {text: string}) => (
+const SectionHeader = ({ text }: { text: string }) => (