Add about page

etowahadams · Dec 22, 2024 · e4a3aa4 · e4a3aa4
1 parent 27aad08
commit e4a3aa4
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 76 deletions.
diff --git a/viz/src/App.tsx b/viz/src/App.tsx
@@ -4,6 +4,7 @@ import LandingPage from "./components/LandingPage";
 import SAEVisualizerPage from "./SAEVisualizerPage";
 import ErrorBoundary from "./components/ErrorBoundary";
 import CustomSeqSearchPage from "./components/CustomSeqSearchPage";
+import AboutPage from "./components/AboutPage";
 import { SAEProvider } from "./SAEContext";
 import { DEFAULT_SAE_MODEL } from "./config";
 import { SAE_CONFIGS } from "./SAEConfigs";
@@ -13,6 +14,10 @@ const router = createHashRouter([
     path: "/",
     element: <LandingPage />,
   },
+  {
+    path: "/about",
+    element: <AboutPage />,
+  },
   {
     path: "/sae-viz",
     element: (

diff --git a/viz/src/components/AboutPage.tsx b/viz/src/components/AboutPage.tsx
@@ -0,0 +1,63 @@
+import React, { useEffect } from "react";
+import Navbar from "./Navbar";
+
+const EmbeddedTweet = ({ url }: { url: string }) => {
+  return (
+    <blockquote className="twitter-tweet">
+      <p lang="en" dir="ltr">
+        <a href={url} />
+      </p>
+    </blockquote>
+  );
+};
+
+const AboutPage: React.FC = () => {
+  useEffect(() => {
+    // Load Twitter widgets script
+    const script = document.createElement("script");
+    script.src = "https://platform.twitter.com/widgets.js";
+    script.async = true;
+    document.head.appendChild(script);
+
+    return () => {
+      // Cleanup script when component unmounts
+      document.head.removeChild(script);
+    };
+  }, []);
+
+  return (
+    <div className="min-h-screen flex flex-col bg-white">
+      <Navbar />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-4xl mt-12 text-left">About InterProt</h1>
+        <p className="mt-6 text-left">
+          We're working on writing up some more technical details. Stay tuned! Meanwhile, if you're
+          interested in learning more about the background, methods, and our visualizer features,
+          check out these tweets:
+        </p>
+        <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <EmbeddedTweet url="https://twitter.com/liambai21/status/1852765669080879108" />
+          <EmbeddedTweet url="https://twitter.com/liambai21/status/1857066057774567706" />
+          <EmbeddedTweet url="https://twitter.com/liambai21/status/1854739750692802566" />
+        </div>
+
+        <h1 className="text-4xl mt-10 text-left">Learning from the Community</h1>
+        <p className="mt-6 text-left">
+          Since we shared InterProt on Twitter, it has been motivating and inspiring to see the
+          community effort on interpreting SAE features. If you find a cool feature, please reach
+          out!
+        </p>
+        <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <EmbeddedTweet url="https://twitter.com/ddelalamo/status/1854785030523924882" />
+          <EmbeddedTweet url="https://twitter.com/dargason/status/1853220879569682506" />
+          <EmbeddedTweet url="https://twitter.com/atsocf/status/1857773624893047141?s=46" />
+          <EmbeddedTweet url="https://twitter.com/m1nj12/status/1855022505700081671" />
+          <EmbeddedTweet url="https://twitter.com/james_krieger/status/1855282447128117403" />
+          <EmbeddedTweet url="https://twitter.com/ddelalamo/status/1854925583169286497" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutPage;
diff --git a/viz/src/components/LandingPage.tsx b/viz/src/components/LandingPage.tsx
@@ -1,90 +1,16 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import Navbar from "./Navbar";
 import { useIsMobile } from "../hooks/use-mobile";
-import HomeNavigator from "./HomeNavigator";
-import { useState } from "react";
-import { Menu, X } from "lucide-react";
 import { DEFAULT_SAE_MODEL } from "@/config";
 import { SAE_CONFIGS } from "@/SAEConfigs";
 
 const LandingPage: React.FC = () => {
   const isMobile = useIsMobile();
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   return (
     <div className="min-h-screen flex flex-col bg-white">
-      <header className="flex justify-between items-center">
-        <HomeNavigator />
-        {isMobile ? (
-          <div className="relative">
-            <button
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-              className="text-gray-600 hover:text-gray-900"
-            >
-              <Menu />
-            </button>
-            {isMobileMenuOpen && (
-              <nav className="fixed inset-0 bg-white z-50 flex flex-col items-center justify-center space-y-8">
-                <button
-                  onClick={() => setIsMobileMenuOpen(false)}
-                  className="absolute top-9 right-6 text-gray-600 hover:text-gray-900"
-                >
-                  <X />
-                </button>
-                <Link
-                  to={`/sae-viz/${DEFAULT_SAE_MODEL}/${SAE_CONFIGS[DEFAULT_SAE_MODEL].defaultDim}`}
-                  className="text-2xl text-gray-600 hover:text-gray-900"
-                  onClick={() => setIsMobileMenuOpen(false)}
-                >
-                  Visualizer
-                </Link>
-                <Link
-                  to="https://github.com/etowahadams/plm-interpretability/tree/main"
-                  className="text-2xl text-gray-600 hover:text-gray-900"
-                  onClick={() => setIsMobileMenuOpen(false)}
-                >
-                  GitHub
-                </Link>
-                <Link
-                  to="https://huggingface.co/liambai/InterProt-ESM2-SAEs"
-                  className="text-2xl text-gray-600 hover:text-gray-900"
-                  onClick={() => setIsMobileMenuOpen(false)}
-                >
-                  Models
-                </Link>
-                <a
-                  href="mailto:[email protected]"
-                  className="text-2xl text-gray-600 hover:text-gray-900"
-                >
-                  Contact
-                </a>
-              </nav>
-            )}
-          </div>
-        ) : (
-          <nav className="space-x-4 flex">
-            <Link to="/sae-viz" className="text-gray-600 hover:text-gray-900">
-              Visualizer
-            </Link>
-            <Link
-              to="https://github.com/etowahadams/plm-interpretability/tree/main"
-              className="text-gray-600 hover:text-gray-900"
-            >
-              GitHub
-            </Link>
-            <Link
-              to="https://huggingface.co/liambai/InterProt-ESM2-SAEs"
-              className="text-gray-600 hover:text-gray-900"
-            >
-              Models
-            </Link>
-            <a href="mailto:[email protected]" className="text-gray-600 hover:text-gray-900">
-              Contact
-            </a>
-          </nav>
-        )}
-      </header>
-
+      <Navbar />
       <main
         className={`flex-grow flex flex-col items-center ${
           isMobile ? "text-left mt-16" : "text-center justify-center px-4"

diff --git a/viz/src/components/Navbar.tsx b/viz/src/components/Navbar.tsx
@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { Menu, X } from "lucide-react";
+import { DEFAULT_SAE_MODEL } from "@/config";
+import { SAE_CONFIGS } from "@/SAEConfigs";
+import HomeNavigator from "./HomeNavigator";
+import { useIsMobile } from "../hooks/use-mobile";
+
+const Navbar: React.FC = () => {
+  const isMobile = useIsMobile();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  return (
+    <header className="flex justify-between items-center">
+      <HomeNavigator />
+      {isMobile ? (
+        <div className="relative">
+          <button
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            className="text-gray-600 hover:text-gray-900"
+          >
+            <Menu />
+          </button>
+          {isMobileMenuOpen && (
+            <nav className="fixed inset-0 bg-white z-50 flex flex-col items-center justify-center space-y-8">
+              <button
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="absolute top-9 right-6 text-gray-600 hover:text-gray-900"
+              >
+                <X />
+              </button>
+              <Link
+                to={`/sae-viz/${DEFAULT_SAE_MODEL}/${SAE_CONFIGS[DEFAULT_SAE_MODEL].defaultDim}`}
+                className="text-2xl text-gray-600 hover:text-gray-900"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                Visualizer
+              </Link>
+              <Link
+                to="https://github.com/etowahadams/plm-interpretability/tree/main"
+                className="text-2xl text-gray-600 hover:text-gray-900"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                GitHub
+              </Link>
+              <Link
+                to="https://huggingface.co/liambai/InterProt-ESM2-SAEs"
+                className="text-2xl text-gray-600 hover:text-gray-900"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                Models
+              </Link>
+              <Link
+                to="/about"
+                className="text-2xl text-gray-600 hover:text-gray-900"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                About
+              </Link>
+              <a
+                href="mailto:[email protected]"
+                className="text-2xl text-gray-600 hover:text-gray-900"
+              >
+                Contact
+              </a>
+            </nav>
+          )}
+        </div>
+      ) : (
+        <nav className="space-x-4 flex">
+          <Link to="/sae-viz" className="text-gray-600 hover:text-gray-900">
+            Visualizer
+          </Link>
+          <Link
+            to="https://github.com/etowahadams/plm-interpretability/tree/main"
+            className="text-gray-600 hover:text-gray-900"
+          >
+            GitHub
+          </Link>
+          <Link
+            to="https://huggingface.co/liambai/InterProt-ESM2-SAEs"
+            className="text-gray-600 hover:text-gray-900"
+          >
+            Models
+          </Link>
+          <Link to="/about" className="text-gray-600 hover:text-gray-900">
+            About
+          </Link>
+          <a href="mailto:[email protected]" className="text-gray-600 hover:text-gray-900">
+            Contact
+          </a>
+        </nav>
+      )}
+    </header>
+  );
+};
+
+export default Navbar;