add details gpu

components/spaces/details.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { useEffect, useState } from "react";
+
+import { SpaceProps } from "@/utils/type";
+import { GpuIcon } from "../gpu_icon";
+import { Progress } from "./progress";
+
+export const Details: React.FC<{ space: SpaceProps }> = ({ space }) => {
+  const [metric, setMetric] = useState<any>(null);
+  const [gpuNumber, setGpuNumber] = useState<number>(0);
+
+  useEffect(() => {
+    const esMetric = new EventSource(
+      `https://api.hf.space/v1/${space.id}/live-metrics/sse`
+    );
+    const esGpu = new EventSource(`https://api.hf.space/v1/${space.id}/sse`);
+
+    esGpu.addEventListener("zero-gpu-count", (event) => {
+      setGpuNumber(parseInt(event.data));
+    });
+    esMetric.addEventListener("metric", (event) => {
+      setMetric(JSON.parse(event.data));
+    });
+
+    return () => {
+      esMetric.close();
+      esGpu.close();
+    };
+  }, [space]);
+
+  return (
+    <div className="border border-gray-200 shadow-md bg-white p-4 rounded-lg absolute -bottom-2 translate-y-full left-0 z-[99999]">
+      <p className="text-sm text-gray-600 flex items-center justify-start gap-1 font-medium">
+        This Space is currently using{" "}
+        <span className="border border-emerald-200 bg-emerald-50 font-medium text-emerald-500 flex items-center justify-center gap-1 max-w-max rounded-md px-1 py-0.5 text-xs">
+          {gpuNumber} <GpuIcon />
+        </span>{" "}
+        GPU{gpuNumber > 1 && "s"}.
+      </p>
+      <div className="mt-3 space-y-1">
+        <div className="flex items-center justify-between font-mono text-[.8rem]">
+          <div className="flex flex-col">
+            <p className="font-semibold uppercase">CPU</p>{" "}
+            <p className="text-gray-400">{metric?.cpu_usage_pct}%</p>
+          </div>{" "}
+          <Progress usage={metric?.cpu_usage_pct} max={100} />
+        </div>
+        <div className="flex items-center justify-between font-mono text-[.8rem]">
+          <div className="flex flex-col">
+            <p className="font-semibold uppercase">RAM</p>{" "}
+            <p className="text-gray-400">{metric?.cpu_usage_pct}%</p>
+          </div>{" "}
+          <Progress
+            usage={Math.ceil(metric?.memory_used_bytes / 1_000_000_000)}
+            max={Math.ceil(metric?.memory_total_bytes / 1_000_000_000)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

components/spaces/index.tsx

@@ -1,9 +1,8 @@
 "use client";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 
 import { SpaceProps } from "@/utils/type";
 import { SpaceIcon } from "@/components/space_icon";
-import { fetchAllPages, sortByCreatedAt, sortByLikes } from "@/utils";
 
 import { Space } from "@/components/spaces/space";
 import { Sort } from "@/components/sort";
@@ -11,6 +10,7 @@ import { useUpdateEffect } from "react-use";
 import { useRouter } from "next/navigation";
 
 export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
+  const [selectedGpu, setSelectedGpu] = useState<string | undefined>(undefined);
   const router = useRouter();
   const [sort, setSort] = useState<"likes" | "createdAt">("likes");
 
@@ -18,6 +18,14 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
     router.push("/?sort=" + sort);
   }, [sort]);
 
+  const handleSelectGpu = (gpu: string) => {
+    if (selectedGpu === gpu) {
+      setSelectedGpu(undefined);
+      return;
+    }
+    setSelectedGpu(gpu);
+  };
+
   return (
     <>
       <header className="max-w-5xl mx-auto w-full max-lg:flex-col items-start flex lg:items-end lg:justify-between gap-4">
@@ -37,7 +45,12 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
       </header>
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
         {spaces?.map((space: SpaceProps) => (
-          <Space key={space.id} space={space} />
+          <Space
+            key={space.id}
+            space={space}
+            selected={selectedGpu === space.id}
+            onSelect={handleSelectGpu}
+          />
         ))}
       </div>
     </>

components/spaces/progress.tsx

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+
+export const Progress: React.FC<{ usage: number; max: number }> = ({
+  usage,
+  max,
+}) => {
+  const percentage = useMemo(() => {
+    return (100 * usage) / max;
+  }, [usage, max]);
+
+  return (
+    <div className="flex h-8 w-3 flex-col-reverse overflow-hidden rounded-[.1rem] bg-gray-200">
+      <div
+        className="border-green-600 bg-green-600/40 shadow-[inset_0_2px_0_rgb(5,150,105)] transition-[height] dark:bg-green-800"
+        style={{ height: `${percentage.toFixed(0)}%` }}
+      ></div>
+    </div>
+  );
+};

components/spaces/space.tsx

@@ -1,19 +1,26 @@
+import Link from "next/link";
 import Image from "next/image";
 import { TiHeartFullOutline } from "react-icons/ti";
+import { FiChevronRight } from "react-icons/fi";
+import classNames from "classnames";
 
 import { SpaceProps } from "@/utils/type";
-import Link from "next/link";
 import { GpuIcon } from "../gpu_icon";
+import { Details } from "./details";
 
 interface Props {
   space: SpaceProps;
+  selected?: boolean;
+  onSelect?: (gpu: string) => void;
 }
-export const Space: React.FC<Props> = ({ space }) => {
+export const Space: React.FC<Props> = ({ space, selected, onSelect }) => {
   return (
     <Link
       href={`https://huggingface.co/spaces/${space.id}`}
       target="_blank"
-      className="bg-gray-50 border border-gray-200 px-6 py-4 rounded-xl transition-all duration-300 hover:-translate-y-1.5 hover:border-amber-400 hover:shadow-xl hover:shadow-black/5 group"
+      className="relative hover:z-40 bg-gray-50 border border-gray-200 px-6 py-4 rounded-xl transition-all duration-300 hover:-translate-y-1.5 hover:border-amber-400 hover:shadow-xl hover:shadow-black/5 group"
+      onMouseEnter={() => onSelect?.(space.id)}
+      onMouseLeave={() => onSelect?.(space.id)}
     >
       <header className="flex items-center justify-between gap-5">
         <div>
@@ -68,6 +75,7 @@ export const Space: React.FC<Props> = ({ space }) => {
           </div>
         </div>
       </header>
+      {selected && <Details space={space} />}
     </Link>
   );
 };