Improve UI

web/src/components/about.tsx

@@ -0,0 +1,65 @@
+
+import React, { useState } from "react";
+
+const Footer: React.FC = () => {
+  const [isContentVisible, setIsContentVisible] = useState(false);
+
+  const toggleContentVisibility = () => {
+    setIsContentVisible(!isContentVisible);
+  };
+
+  return (
+    <footer>
+
+      <button
+        className="text-gray-500 hover:text-gray-700 hover:underline"
+        onClick={toggleContentVisibility}      >
+        {isContentVisible ? "hide about" : "about this conversational agent"} 
+      </button>
+
+      {isContentVisible && (
+        <div className="text-gray-500">
+          <p>
+            This site has been created by McGill students Henri Lemoine, Fraser
+            Lee, and Thomas Lemoine as an attempt to create a "conversational
+            FAQ" that can answer questions about AI alignment. When asked a
+            question, we
+          </p>
+          <ol>
+            <li>Embed the question into a low dimensional semantic space</li>
+            <li>
+              Pull the semantically closest passages out of a massive alignment
+              dataset
+            </li>
+            <li>
+              Instruct an LLM to construct a response while citing these
+              passages
+            </li>
+            <li>
+              Display this response in conversational flow with inline
+              citations
+            </li>
+          </ol>
+          <p>
+            We've created this as an attempt on the{" "}
+            <a href="https://www.lesswrong.com/posts/SLRLuiuDykfTdmesK/speed-running-everyone-through-the-bad-alignement-bingo">
+              $5k bounty for a LW conversational agent
+            </a>
+            .
+          </p>
+          <p>
+            We hope that it can be a useful tool for the community, and we're
+            eager to hear feedback and suggestions. For a technical report on
+            our implementation, see our{" "}
+            <a href="https://www.lesswrong.com/posts/bGn9ZjeuJCg7HkKBj/introducing-alignmentsearch-an-ai-alignment-informed">
+              LessWrong post
+            </a>
+            .
+          </p>
+        </div>
+      )}
+    </footer>
+  );
+};
+
+export default Footer;

web/src/components/header.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Link from "next/link";
+import About from "./about";
+
+const Header: React.FC<{ page: "index" | "semantic" }> = ({ page }) => {
+    const sidebar = page === "index" ? (
+        <span className="flex flex-col flex-1 justify-start text-right mt-4">
+            <p className="my-0">Conversational Agent</p>
+            <Link href="/semantic">Semantic Search</Link>
+        </span>
+    ) : (
+        <span className="flex flex-col flex-1 justify-start text-right">
+            <Link href="/">Conversational Agent</Link>
+            <p className="my-0">Semantic Search</p>
+        </span>
+
+    );
+
+    return (<div className="my-20">
+
+        <div className="flex">
+            <h1 className="flex-1 text-4xl"> Alignment Search </h1>
+            {sidebar}
+        </div>
+        <About />
+
+    </div>);
+};
+
+export default Header;

web/src/searchbox.tsx → web/src/components/searchbox.tsx

@@ -25,10 +25,11 @@ const SearchBox: React.FC<{search: (
         <form className="flex mb-2" onSubmit={async (e) => {
             e.preventDefault();
             search(query, setQuery, setLoading);
-        }}>
+        }}
+        >
 
             <TextareaAutosize
-                className="border border-gray-300 px-1 flex-1 resize-none"
+                className="py-3 border border-gray-400 rounded  shadow px-1 flex-1 resize-none"
                 ref={inputRef}
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
@@ -41,11 +42,13 @@ const SearchBox: React.FC<{search: (
                         if (query.trim() !== "") search(query, setQuery, setLoading);
                     }
                 }}
+                placeholder="What is AI Alignment?"
             />
-            <button className="ml-2" type="submit" disabled={loading}>
-                {loading ? "Loading..." : "Search"}
+            <button className="ml-2 w-40 bg-white hover:bg-gray-100 border rounded shadow border-gray-400" type="submit" disabled={loading}>
+                {loading ? "Loading..." : " 🔎 Search"}
             </button>
         </form>
+
     </>);
 };
 

web/src/pages/index.tsx

@@ -5,8 +5,8 @@ import React from "react";
 import { type NextPage } from "next";
 import { useState } from "react";
 
-import Header from "../header";
-import SearchBox from "../searchbox";
+import Header from "../components/header";
+import SearchBox from "../components/searchbox";
 
 type Citation = {
     title: string;

web/src/pages/semantic.tsx

@@ -3,8 +3,8 @@ const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:3000";
 import { type NextPage } from "next";
 import React from "react";
 import Head from "next/head";
-import Header from "../header";
-import SearchBox from "../searchbox";
+import Header from "../components/header";
+import SearchBox from "../components/searchbox";
 import { useState } from "react";
 
 const Semantic: NextPage = () => {

web/src/styles/globals.css

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+body{
+  @apply min-h-screen; /* full height of viewport */
+  font-family: warnock-pro, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;  
+}
+
 h1 {
   @apply text-4xl font-bold my-4;
 }
@@ -27,12 +32,6 @@ p {
   @apply my-2;
 }
 
-button {
-  @apply bg-white hover:bg-gray-300 px-0.5 py-0 w-fit h-fit;
-  @apply border border-gray-300;
-  @apply text-gray-700;
-}
-
 ol {
   @apply list-decimal;
 }