[fooo] Upload page.tsx

page.tsx

@@ -0,0 +1,377 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useSession } from "next-auth/react";
+import { SignInButton } from "@/components/auth-button";
+import { createMetaMaskManager, MetaMaskWalletState } from "@/lib/metamask";
+
+export default function Home() {
+  const { data: session, status } = useSession();
+  const [permissions, setPermissions] = useState<string[]>([]);
+  const [models, setModels] = useState<any[]>([]);
+  const [loadingModels, setLoadingModels] = useState(false);
+  const walletManager = useMemo(
+    () =>
+      createMetaMaskManager({
+        autoReconnect: true,
+        enforceChainId: "0x1",
+      }),
+    [],
+  );
+  const [walletState, setWalletState] = useState<MetaMaskWalletState>(() =>
+    walletManager.getState(),
+  );
+  const [isSwitchingChain, setIsSwitchingChain] = useState(false);
+
+  useEffect(() => walletManager.watch(setWalletState), [walletManager]);
+
+  useEffect(() => {
+    if (session?.user?.id) {
+      // Only fetch if we haven't loaded models yet
+      if (models.length === 0 && !loadingModels) {
+        setLoadingModels(true);
+        fetch("/api/models")
+          .then((r) => r.json())
+          .then((d) => {
+            console.log('Models API response:', d);
+            setModels(d.models || []);
+          })
+          .catch((error) => {
+            console.error('Error fetching models:', error);
+            setModels([]);
+          })
+          .finally(() => setLoadingModels(false));
+      }
+
+      // Fetch permissions only once
+      if (permissions.length === 0) {
+        fetch("/api/permissions")
+          .then((r) => r.json())
+          .then((d) => setPermissions(d.permissions || []))
+          .catch(() => setPermissions([]));
+      }
+    } else if (!session) {
+      // For logged-out users, fetch public models
+      if (models.length === 0 && !loadingModels) {
+        setLoadingModels(true);
+        fetch("/api/models")
+          .then((r) => r.json())
+          .then((d) => setModels(d.models || []))
+          .catch(() => setModels([]))
+          .finally(() => setLoadingModels(false));
+      }
+    }
+  }, [session?.user?.id, models.length, loadingModels, permissions.length]);
+
+  const primaryAccount = walletState.accounts[0];
+  const shortenedAccount = primaryAccount
+    ? `${primaryAccount.slice(0, 6)}...${primaryAccount.slice(-4)}`
+    : undefined;
+  const walletStatusText =
+    walletState.status === "connected" && shortenedAccount
+      ? `Connected: ${shortenedAccount}`
+      : walletState.status === "connecting"
+        ? "Connecting to MetaMask..."
+        : walletState.status === "unavailable"
+          ? "MetaMask extension not detected"
+          : "Wallet disconnected";
+  const walletButtonLabel =
+    walletState.status === "connected"
+      ? "Disconnect MetaMask"
+      : walletState.status === "connecting"
+        ? "Connecting..."
+        : "Connect MetaMask";
+  const walletButtonDisabled =
+    walletState.status === "connecting" || walletState.status === "unavailable";
+  const needsChainSwitch =
+    walletState.status === "connected" &&
+    walletState.chainId?.toLowerCase() !== "0x1";
+
+  const handleWalletClick = () => {
+    if (walletState.status === "connected") {
+      walletManager.disconnect();
+      return;
+    }
+    walletManager.connect();
+  };
+
+  const handleSwitchToMainnet = async () => {
+    setIsSwitchingChain(true);
+    try {
+      await walletManager.switchChain("0x1");
+    } catch (error) {
+      console.error("Unable to switch MetaMask network", error);
+    } finally {
+      setIsSwitchingChain(false);
+    }
+  };
+
+  const WalletControls = () => (
+    <section className="mb-6 border border-black/10 dark:border-white/15 rounded-lg">
+      <div className="px-4 py-3 border-b border-black/10 dark:border-white/15 flex items-center justify-between gap-4">
+        <div>
+          <h3 className="font-medium">MetaMask Wallet</h3>
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            {walletStatusText}
+          </p>
+          {walletState.chainId && (
+            <p className="text-[11px] text-gray-400 dark:text-gray-500">
+              Chain ID: {walletState.chainId}
+            </p>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={handleWalletClick}
+          disabled={walletButtonDisabled}
+          className="px-4 py-2 rounded-md text-sm font-medium border border-blue-500 text-blue-600 hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {walletButtonLabel}
+        </button>
+      </div>
+      <div className="p-4 space-y-3 text-sm text-gray-600 dark:text-gray-300">
+        {walletState.status === "unavailable" && (
+          <p>
+            Install the{" "}
+            <a
+              className="text-blue-600 underline"
+              href="https://metamask.io/download/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              MetaMask extension
+            </a>{" "}
+            to enable wallet actions.
+          </p>
+        )}
+        {walletState.error && (
+          <p className="text-red-600 text-xs">{walletState.error}</p>
+        )}
+        {walletState.status === "connected" && (
+          <div className="flex flex-wrap items-center gap-3">
+            <span className="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-md">
+              {primaryAccount}
+            </span>
+            {needsChainSwitch && (
+              <button
+                type="button"
+                onClick={handleSwitchToMainnet}
+                disabled={isSwitchingChain}
+                className="px-3 py-1 rounded-md text-xs border border-amber-500 text-amber-600 hover:bg-amber-50 disabled:opacity-60"
+              >
+                {isSwitchingChain ? "Switching..." : "Switch to Ethereum Mainnet"}
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+
+  if (status === "loading") {
+    return (
+      <div className="min-h-screen grid place-items-center font-poppins">
+        <p className="text-sm text-gray-500">Loading…</p>
+      </div>
+    );
+  }
+
+  if (!session) {
+    return (
+      <div className="min-h-screen font-poppins">
+        <main className="p-6 max-w-6xl mx-auto">
+          <div className="mb-6 text-center">
+  <h1 className="text-4xl font-semibold mb-2">GarbinAI</h1>
+            <h1 className="text-xl font- mb-2">Discover public models on GarbinAI</h1>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Sign in to create and manage your own.</p>
+            <div className="flex justify-center"><SignInButton /></div>
+          </div>
+          <WalletControls />
+          <section className="border border-black/10 dark:border-white/15 rounded-lg">
+            <div className="px-4 py-3 border-b border-black/10 dark:border-white/15 flex items-center justify-between">
+              <h3 className="font-medium">Public Models</h3>
+              <span className="text-xs text-gray-500">{loadingModels ? "Loading..." : `${models.length} models`}</span>
+            </div>
+            <div className="p-4">
+              {loadingModels ? (
+                <div className="text-center py-8">
+                  <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-white"></div>
+                  <p className="text-sm text-gray-500 mt-2">Loading public models...</p>
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {models.map((model) => (
+                    <div key={model.id} className="group border border-gray-200 dark:border-gray-700 rounded-xl p-5 hover:shadow-xl transition-all duration-300 cursor-pointer bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 hover:border-blue-400 dark:hover:border-blue-500 hover:-translate-y-1" onClick={() => window.location.href = `/models/${encodeURIComponent(model.id)}`}>
+                      <div className="flex items-start justify-between mb-3">
+                        <h4 className="font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-1 flex-1">{model.id}</h4>
+                        {model.pipeline_tag && (
+                          <span className="ml-2 px-2 py-1 text-xs font-medium rounded-md bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 whitespace-nowrap">
+                            {model.pipeline_tag}
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2 leading-relaxed">{model.cardData?.description || 'No description available'}</p>
+                      <div className="flex items-center justify-between text-xs text-gray-500 pt-3 border-t border-gray-100 dark:border-gray-700">
+                        <div className="flex items-center gap-1">
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                          </svg>
+                          <span>{model.downloads?.toLocaleString() || 0}</span>
+                        </div>
+                        <div className="flex items-center gap-1 text-blue-600 dark:text-blue-400 group-hover:gap-2 transition-all">
+                          <span className="font-medium">View</span>
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </section>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen font-poppins">
+      <div className="grid grid-cols-1 md:grid-cols-[240px_1fr] min-h-0">
+        {/* Sidebar */}
+        <aside className="border-r border-black/10 dark:border-white/15 p-4 hidden md:block">
+          <div className="text-xs uppercase tracking-wide text-gray-500 mb-3">AI Platform</div>
+          <nav className="space-y-2">
+            <a href="#" className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+              Models
+            </a>
+            <a href="/upload" className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+              Create Model
+            </a>
+            <a href="/models/import" className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
+              </svg>
+              Import Models
+            </a>
+            <a href="#" className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              Inference
+            </a>
+            <a href="#" className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              Docs
+            </a>
+          </nav>
+
+          <div className="text-xs uppercase tracking-wide text-gray-500 mb-3 mt-8">Account</div>
+          <nav className="space-y-2">
+            <a href="#" className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+              </svg>
+              Profile
+            </a>
+            <a href="#" className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+              Settings
+            </a>
+          </nav>
+        </aside>
+
+        {/* Main Content */}
+        <main className="p-6 overflow-auto">
+          {/* Welcome Section */}
+          <div className="mb-6">
+            <h1 className="text-2xl  mb-2">Welcome back, {session.user?.name}!</h1>
+            <p className="text-gray-600 dark:text-gray-400">Your AI-powered platform is ready!</p>
+          </div>
+          <WalletControls />
+
+          {/* User's Models */}
+          <section className="border border-black/10 dark:border-white/15 rounded-lg">
+            <div className="px-4 py-3 border-b border-black/10 dark:border-white/15 flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                  <svg className="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                  </svg>
+                </div>
+                <h3 className="font-medium">Your Models</h3>
+              </div>
+              <span className="text-xs text-gray-500">
+                {loadingModels ? "Loading..." : `${models.length} models`}
+              </span>
+            </div>
+            <div className="p-4">
+              {loadingModels ? (
+                <div className="text-center py-8">
+                  <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-white"></div>
+                  <p className="text-sm text-gray-500 mt-2">Loading your models...</p>
+                </div>
+              ) : models.length > 0 ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {models.map((model) => (
+                    <div
+                      key={model.id}
+                      className="group border border-gray-200 dark:border-gray-700 rounded-xl p-5 hover:shadow-xl transition-all duration-300 cursor-pointer bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 hover:border-blue-400 dark:hover:border-blue-500 hover:-translate-y-1"
+                      onClick={() => window.location.href = `/models/${encodeURIComponent(model.id)}`}
+                    >
+                      <div className="flex items-start justify-between mb-3">
+                        <h4 className="font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-1 flex-1">{model.id}</h4>
+                        {model.pipeline_tag && (
+                          <span className="ml-2 px-2 py-1 text-xs font-medium rounded-md bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 whitespace-nowrap">
+                            {model.pipeline_tag}
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2 leading-relaxed">
+                        {model.cardData?.description || 'No description available'}
+                      </p>
+                      <div className="flex items-center justify-between text-xs text-gray-500 pt-3 border-t border-gray-100 dark:border-gray-700">
+                        <div className="flex items-center gap-1">
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                          </svg>
+                          <span>{model.downloads?.toLocaleString() || 0}</span>
+                        </div>
+                        <div className="flex items-center gap-1 text-blue-600 dark:text-blue-400 group-hover:gap-2 transition-all">
+                          <span className="font-medium">View</span>
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-8">
+                  <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                  </svg>
+                  <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">No models found</h3>
+                  <p className="mt-1 text-sm text-gray-500">Get started by creating your first model on Hugging Face.</p>
+                </div>
+              )}
+            </div>
+          </section>
+        </main>
+      </div>
+    </div>
+  );
+}