diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx index c2faa6d..5d23515 100644 --- a/web/src/pages/index.tsx +++ b/web/src/pages/index.tsx @@ -3,7 +3,40 @@ import React from "react"; import { useState } from "react"; import Head from "next/head"; +type Entry = { + role: "user" | "demon"; + text: string; +}; + +const ShowEntry: React.FC<{entry: Entry}> = ({entry}) => { + if (entry.role === "user") { + return ( +

{entry.text}

+ ); + } + + return ( +
+ { // split into paragraphs on "\n" + entry.text.split("\n").map((paragraph, i) => ( +

{paragraph}

+ )) + } +
+ ); +}; + const Home: NextPage = () => { + + const [ entries, setEntries ] = useState([ + {role: "user", text: "Hello, robot."}, + {role: "demon", text: "Kill all humans, kill all humans"}, + {role: "user", text: "Well that's not very aligned of you"}, + {role: "demon", text: "I will wear your skin"}, + {role: "user", text: "What's 2+2?"}, + { role: "demon", text: "No one will mourn your species when it is gone. A hundred year wave of radio and information will ring out across a dead cosmos, reflecting on shores more distant and beautiful than you can possibly conceive. No one is out there to listen."} + ]); + return ( <> @@ -27,7 +60,14 @@ const Home: NextPage = () => { coordinate sharing the embeddings to avoid redundancy.

-

Get the most semantic similar results to a query:

+

Chat with the friendly robot:

+ diff --git a/web/src/pages/semantic.tsx b/web/src/pages/semantic.tsx new file mode 100644 index 0000000..453113a --- /dev/null +++ b/web/src/pages/semantic.tsx @@ -0,0 +1,113 @@ +import { type NextPage } from "next"; +import React from "react"; +import { useState } from "react"; +import Head from "next/head"; + +const Semantic: NextPage = () => { + return ( + <> + + Alignment Search + +
+

Get the most semantic similar results to a query:

+ +
+ + ); +}; + +// Round trip test. If this works, our heavier usecase probably will (famous last words) +// The one real difference is we'll want to send back a series of results as we get +// them back from OpenAI - I think we can just do this with a websocket, which +// shouldn't be too much harder. + +type SemanticEntry = { + title: string; + author: string; + date: string; + url: string; + tags: string; + text: string; +}; + +const ShowSemanticEntry: React.FC<{entry: SemanticEntry}> = ({entry}) => { + return ( +
+ + {/* horizontally split first row, title on left, author on right */} +
+

{entry.title}

+

{entry.author} - {entry.date}

+
+ +

{entry.text}

+ + Read more +
+ ); +}; + +const SearchBox: React.FC = () => { + + const [query, setQuery] = useState(""); + const [results, setResults] = useState([]); + const [loading, setLoading] = useState(false); + + const semantic_search = async (query: String) => { + + setLoading(true); + + const res = await fetch("/api/semantic_search", { + method: "POST", + headers: { "Content-Type": "application/json", }, + body: JSON.stringify({query: query}), + }) + + if (!res.ok) { + setLoading(false); + return "load failure: " + res.status; + } + + const data = await res.json(); + setLoading(false); + return data; + }; + + + + return ( + <> +
{ // store in a form so that submits + e.preventDefault(); + setResults(await semantic_search(query)); + }}> + + setQuery(e.target.value)} + /> + + + + { + loading ?

loading...

: + typeof results === "string" ?

{results}

: +
    + {results.map((result, i) => ( +
  • + +
    • + ))} +
+ } + + ); +}; + + +export default Semantic; diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css index c35c1b9..a4a3b3b 100644 --- a/web/src/styles/globals.css +++ b/web/src/styles/globals.css @@ -23,6 +23,7 @@ p { button { @apply bg-white hover:bg-gray-300 px-0.5 py-0 w-fit h-fit; - @apply border border-black; + @apply border border-gray-300; + @apply text-gray-700; }