Merge pull request #7 from fixie-ai/juberti/samples

Add clickable filter samples

Justfile

@@ -0,0 +1,12 @@
+export WEBSITE_DIR:="website"
+
+default: dev
+
+install:
+    cd ${WEBSITE_DIR} && yarn install
+
+format:
+    cd ${WEBSITE_DIR} && yarn format
+
+dev:
+    cd ${WEBSITE_DIR} && yarn dev

website/src/components/Hero.astro

@@ -11,6 +11,16 @@ import Section from "./Section.astro";
     > between turns, and we think LLMs should be just as quick. This site provides
     reliable measurements for the performance of popular models.
   </p>
+  <p class="mt-4">
+    You can filter using the hamburger menu in a column header, e.g.,
+    <a class="underline hover:text-orange-600" href="?mf=llama-3-70b"
+      >Llama 3 70B providers</a
+    >,
+    <a
+      class="underline hover:text-orange-600"
+      href="?mf=gpt-4-turbo|claude-3-opus|gemini">GPT-4 vs Claude 3 vs Gemini</a
+    >.
+  </p>
   <p class="mt-4">
     <a class="underline hover:text-orange-600" href="#definitions"
       >Definitions</a
@@ -20,9 +30,7 @@ import Section from "./Section.astro";
       >source</a
     > below. Stats updated daily.
   </p>
-
-  <br />
-  <p>
+  <p class="mt-4">
     Have another model you want us to benchmark? File an <a
       class="underline hover:text-orange-600"
       href="https://github.com/fixie-ai/fastest.ai/issues"

website/src/layouts/Base.astro

@@ -46,12 +46,15 @@ const {
     </script>
   </head>
   <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-M36Z0MH3PX"></script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-M36Z0MH3PX"
+  ></script>
   <script>
     window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-    gtag('config', 'G-M36Z0MH3PX');
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+    gtag("config", "G-M36Z0MH3PX");
   </script>
   <body"
     class="flex min-h-screen flex-col bg-stone-100 font-mono text-gray-950 dark:bg-zinc-800 dark:text-slate-50"
@@ -69,4 +72,5 @@ const {
     }
   </style>
 
+
 </html>