filter by hardware

app/page.tsx

@@ -20,13 +20,5 @@ export default async function Home({
   searchParams: { sort: string };
 }) {
   const spaces = await getSpaces(sort);
-  return (
-    <section className="flex h-screen overflow-auto">
-      <div className="w-full container px-6 py-10 lg:py-20 mx-auto space-y-10 lg:space-y-14">
-        <Suspense fallback={<div>Loading...</div>}>
-          <Spaces spaces={spaces} />
-        </Suspense>
-      </div>
-    </section>
-  );
+  return <Spaces spaces={spaces} />;
 }

components/spaces/index.tsx

@@ -1,18 +1,19 @@
 "use client";
 import { useState } from "react";
+import { useUpdateEffect } from "react-use";
+import { useRouter } from "next/navigation";
 
 import { SpaceProps } from "@/utils/type";
 import { SpaceIcon } from "@/components/space_icon";
 
 import { Space } from "@/components/spaces/space";
 import { Sort } from "@/components/sort";
-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");
+  const [elementsInView, setElementsInView] = useState<string[]>([]);
 
   useUpdateEffect(() => {
     router.push("/?sort=" + sort);
@@ -27,32 +28,34 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
   };
 
   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">
-        <div>
-          <div className="mb-6 font-regular text-xs text-center max-w-max rounded-full border-gray-200 bg-gray-50 border text-gray-700 px-3 py-2 transition-all duration-300">
-            <SpaceIcon className="inline-block w-4 h-4 mr-2 drop-shadow-lg" />
-            Browse {spaces.length} spaces
+    <section className="flex h-screen overflow-auto">
+      <div className="w-full container px-6 py-10 lg:py-20 mx-auto space-y-10 lg:space-y-14">
+        <header className="max-w-5xl mx-auto w-full max-lg:flex-col items-start flex lg:items-end lg:justify-between gap-4">
+          <div>
+            <div className="mb-6 font-regular text-xs text-center max-w-max rounded-full border-gray-200 bg-gray-50 border text-gray-700 px-3 py-2 transition-all duration-300">
+              <SpaceIcon className="inline-block w-4 h-4 mr-2 drop-shadow-lg" />
+              Browse {spaces.length} spaces
+            </div>
+            <h1 className="font-extrabold text-3xl text-black">
+              Zero GPU Spaces
+            </h1>
+            <p className="text-neutral-500 font-regular text-base">
+              Discover spaces with zero GPU usage on 🤗 Hugging Face Spaces.
+            </p>
           </div>
-          <h1 className="font-extrabold text-3xl text-black">
-            Zero GPU Spaces
-          </h1>
-          <p className="text-neutral-500 font-regular text-base">
-            Discover spaces with zero GPU usage on 🤗 Hugging Face Spaces.
-          </p>
+          <Sort value={sort} onChange={setSort} />
+        </header>
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pb-10">
+          {spaces?.map((space: SpaceProps) => (
+            <Space
+              key={space.id}
+              space={space}
+              selected={selectedGpu === space.id}
+              onSelect={handleSelectGpu}
+            />
+          ))}
         </div>
-        <Sort value={sort} onChange={setSort} />
-      </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}
-            selected={selectedGpu === space.id}
-            onSelect={handleSelectGpu}
-          />
-        ))}
       </div>
-    </>
+    </section>
   );
 };

components/spaces/space.tsx

@@ -18,7 +18,8 @@ export const Space: React.FC<Props> = ({ space, selected, onSelect }) => {
     <Link
       href={`https://huggingface.co/spaces/${space.id}`}
       target="_blank"
-      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"
+      className="space 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"
+      data-space-id={space.id}
       onMouseEnter={() => onSelect?.(space.id)}
       onMouseLeave={() => onSelect?.(space.id)}
     >

utils/index.ts

@@ -3,15 +3,16 @@ import { SpaceProps } from "./type";
 export const fetchAllPages = async (sort = "trending") => {
   const filter_key = "zero-a10g";
   
-  const pageNumbers = Array.from({ length: 250 }, (_, i) => i);
+  const pageNumbers = Array.from({ length: 55 }, (_, i) => i);
   const urls = pageNumbers.map(async (pageNumber) => {
-    const url = `https://huggingface.co/spaces-json?p=${pageNumber}&sort=${sort}`;
+    const url = `https://huggingface.co/spaces-json?p=${pageNumber}&sort=${sort}&runtime.hardware.current=${filter_key}`;
     const response = await fetch(url);
     const json = await response.json();
     return json?.spaces ?? [];
   });
+
   const jsonResponses = await Promise.all(urls);
-  const spaces = jsonResponses.flat()?.filter((space) => space?.runtime?.hardware?.current === filter_key && !space?.private);
+  const spaces = jsonResponses.flat();
   return spaces;
 };