From 10bf0501441d10c95bd7c721ec54991762024da9 Mon Sep 17 00:00:00 2001
From: Jingxiang Mo <65676392+jingxiangmo@users.noreply.github.com>
Date: Sat, 8 Apr 2023 14:51:04 -0400
Subject: [PATCH 1/2] UI hierarchy fixes

---
 package-lock.json  | 6 ++++++
 web/src/header.tsx | 5 ++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..cbb41ab
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "AlignmentSearch",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/web/src/header.tsx b/web/src/header.tsx
index 901bf62..9e052c3 100644
--- a/web/src/header.tsx
+++ b/web/src/header.tsx
@@ -16,9 +16,11 @@ const Header: React.FC<{page: "index" | "semantic"}> = ({page}) => {
         
     return (<>
                 <div className="flex my-4">
-                    <h1 className="flex-1 my-0">AlignmentSearch</h1>
+                    <h1 className="flex-1 my-0">Alignment Search</h1>
                     {sidebar}
                 </div>
+
+                <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.
@@ -37,6 +39,7 @@ const Header: React.FC<{page: "index" | "semantic"}> = ({page}) => {
                     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 implemention, see our <a href="https://www.lesswrong.com/posts/bGn9ZjeuJCg7HkKBj/introducing-alignmentsearch-an-ai-alignment-informed">LessWrong post</a>.
                 </p>
+                </div>
             </>);
 };
 

From adc86145a0157bef191be69222d2cbc7134f40de Mon Sep 17 00:00:00 2001
From: Jingxiang Mo <65676392+jingxiangmo@users.noreply.github.com>
Date: Mon, 17 Apr 2023 18:25:24 -0400
Subject: [PATCH 2/2] Improve homepage UI

---
 web/src/components/about.tsx           | 65 ++++++++++++++++++++++++++
 web/src/components/header.tsx          | 30 ++++++++++++
 web/src/{ => components}/searchbox.tsx | 11 +++--
 web/src/header.tsx                     | 46 ------------------
 web/src/pages/index.tsx                |  4 +-
 web/src/pages/semantic.tsx             |  4 +-
 web/src/styles/globals.css             | 11 ++---
 7 files changed, 111 insertions(+), 60 deletions(-)
 create mode 100644 web/src/components/about.tsx
 create mode 100644 web/src/components/header.tsx
 rename web/src/{ => components}/searchbox.tsx (80%)
 delete mode 100644 web/src/header.tsx

diff --git a/web/src/components/about.tsx b/web/src/components/about.tsx
new file mode 100644
index 0000000..d83df48
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
new file mode 100644
index 0000000..0e53931
--- /dev/null
+++ b/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;
diff --git a/web/src/searchbox.tsx b/web/src/components/searchbox.tsx
similarity index 80%
rename from web/src/searchbox.tsx
rename to web/src/components/searchbox.tsx
index d21dedd..21d7c69 100644
--- a/web/src/searchbox.tsx
+++ b/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>
+        
     </>);
 };
 
diff --git a/web/src/header.tsx b/web/src/header.tsx
deleted file mode 100644
index 9e052c3..0000000
--- a/web/src/header.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import Link from "next/link";
-
-const Header: React.FC<{page: "index" | "semantic"}> = ({page}) => {
-    const sidebar = page === "index" ? (
-        <span className="flex flex-col font-semibold flex-1 justify-start text-right">
-            <p className="my-0">Conversational Agent</p>
-            <Link href="/semantic">Semantic Search</Link>
-        </span>
-    ) : (
-        <span className="flex flex-col font-semibold flex-1 justify-start text-right">
-            <Link href="/">Conversational Agent</Link>
-            <p className="my-0">Semantic Search</p>
-        </span>
-    );
-        
-    return (<>
-                <div className="flex my-4">
-                    <h1 className="flex-1 my-0">Alignment Search</h1>
-                    {sidebar}
-                </div>
-
-                <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 implemention, see our <a href="https://www.lesswrong.com/posts/bGn9ZjeuJCg7HkKBj/introducing-alignmentsearch-an-ai-alignment-informed">LessWrong post</a>.
-                </p>
-                </div>
-            </>);
-};
-
-export default Header;
diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
index 6f6e397..12d2dae 100644
--- a/web/src/pages/index.tsx
+++ b/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;
diff --git a/web/src/pages/semantic.tsx b/web/src/pages/semantic.tsx
index dc49649..beb63af 100644
--- a/web/src/pages/semantic.tsx
+++ b/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 = () => {
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index f304db2..e6fa162 100644
--- a/web/src/styles/globals.css
+++ b/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;
 }