feat: Uncomment image generation.

src/components/ModelTypeTabs.tsx

@@ -1,44 +1,26 @@
-import { navigate } from "astro:transitions/client";
-import React from "react";
-
-const tabs: { path: string; label: string }[] = [
-    { path: "/", label: "LLM" },
-    { path: "/image-gen/", label: "Image Gen" },
-];
-
-function usePath() {
-    return React.useSyncExternalStore(
-        (onStoreChange) => {
-            window.addEventListener("popstate", onStoreChange);
-            return () => window.removeEventListener("popstate", onStoreChange);
-        },
-        () => window.location.pathname
-    );
-}
-
-function removeTrailingSlash(path: string) {
-    return path.replace(/\/$/, "");
-}
-
-export default function ModelTypeTabs() {
-    const path = usePath();
-
+export default function ModelTypeTabs({ isLlm }: { isLlm: boolean }) {
     return (
         <div className="flex gap-1 bg-[#5a38b8] rounded-md p-1">
-            {tabs.map((tab: { path: string; label: string }) => (
-                <button
-                    key={tab.path}
-                    onClick={() => navigate(`${import.meta.env.PUBLIC_BASE_PATH ?? ""}${tab.path}`)}
-                    className={`px-4 py-1.5 rounded text-sm font-medium transition-colors ${
-                        removeTrailingSlash(path) ===
-                        removeTrailingSlash(`${import.meta.env.PUBLIC_BASE_PATH ?? ""}${tab.path}`)
-                            ? "bg-white dark:bg-gray-800 text-[#6742d6] dark:text-purple-300"
-                            : "text-white/80 hover:text-white hover:bg-[#7a52e6]"
-                    }`}
-                >
-                    {tab.label}
-                </button>
-            ))}
+            <a
+                className={`px-4 py-1.5 rounded text-sm font-medium transition-colors text-white text-center w-full flex items-center justify-center ${
+                    isLlm
+                        ? "bg-white dark:bg-gray-800 text-[#6742d6] dark:text-purple-300"
+                        : "text-white/80 hover:text-white hover:bg-[#7a52e6]"
+                }`}
+                href={import.meta.env.PUBLIC_BASE_PATH ?? "/"}
+            >
+                LLM
+            </a>
+            <a
+                className={`px-4 py-1.5 rounded text-sm font-medium transition-colors text-white text-center ${
+                    !isLlm
+                        ? "bg-white dark:bg-gray-800 text-[#6742d6] dark:text-purple-300"
+                        : "text-white/80 hover:text-white hover:bg-[#7a52e6]"
+                }`}
+                href={`${import.meta.env.PUBLIC_BASE_PATH ?? ""}/image-gen`}
+            >
+                Image Gen
+            </a>
         </div>
     );
 }

src/components/Table.tsx

@@ -10,6 +10,7 @@ import Column from "./Column";
 import forexData from "../forex.json";
 import Link from "./Link";
 import ColumnsHeader from "./ColumnsHeader";
+import ModelTypeTabs from "./ModelTypeTabs";
 
 export const DEFAULT_COLUMN_WIDTH = 200;
 
@@ -63,12 +64,12 @@ function Toolbar({
     return (
         <div className="flex items-end justify-between px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shrink-0 gap-4">
             <div className="flex items-end gap-6">
-                {/* <div>
+                <div>
                     <span className="text-xs text-gray-500 dark:text-gray-400 block mb-1">
                         Output
                     </span>
-                    <ModelTypeTabs />
-                </div> */}
+                    <ModelTypeTabs isLlm={isLlm} />
+                </div>
                 <div>
                     <span className="text-xs text-gray-500 dark:text-gray-400 block mb-1">
                         Currency