feat: Add SpaceBrowser component with GPU/CPU filtering and search functionality

components/shuffler/index.tsx

@@ -10,7 +10,44 @@ import { Space } from "@/components/space";
 import { ButtonShuffler } from "./button";
 import { Card } from "@/components/animate/card";
 
-export const Shuffler = ({
+export const SpaceBrowser = ({
+  initialHardwareType = 'gpu',
+  initialSearchQuery = '',
+}: {
+  initialHardwareType?: 'gpu' | 'cpu';
+  initialSearchQuery?: string;
+}) => {
+  const [hardwareType, setHardwareType] = useState<'gpu' | 'cpu'>(initialHardwareType);
+  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
+  const [spaces, setSpaces] = useState<SpaceProps[]>([]);
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    fetchFilteredSpaces(hardwareType, searchQuery).then(setSpaces);
+  }, [hardwareType, searchQuery]);
+
+  return (
+    <motion.div className="grid grid-cols-1 gap-10 relative">
+      <div className="relative w-full h-[290px] lg:h-[350px]">
+        <AnimatePresence initial={false}>
+          {spaces.map((space, i) => (
+            <Card key={i} front={i === index} index={i} setIndex={setIndex}>
+              <Space space={space} />
+            </Card>
+          ))}
+        </AnimatePresence>
+      </div>
+      <div className="w-4 h-[1px] bg-white/50 mx-auto hidden lg:block" />
+      <footer className="flex items-center justify-center fixed lg:relative bottom-0 left-0 w-full">
+        <ButtonShuffler
+          onClick={() => {
+            setIndex((prevIndex) => (prevIndex + 1) % spaces.length);
+          }}
+        />
+      </footer>
+    </motion.div>
+  );
+};
   space: initialSpace,
   nextSpace: initialNextSpace,
 }: {

utils/network.ts

@@ -19,7 +19,28 @@ const COLORS = {
   },
 };
 
-export const fetchSpaceRandomly = async () => {
+export const fetchFilteredSpaces = async (hardwareType: 'gpu' | 'cpu', searchQuery: string = '') => {
+  const url = `https://huggingface.co/spaces-json?runtime.stage=RUNNING&sort=trending`;
+  const response = await fetch(url);
+  const json = await response.json();
+  const spaces = json?.spaces;
+
+  if (!spaces) {
+    return [];
+  }
+
+  const filteredSpaces = spaces.filter((space: any) => {
+    const hasHardware = hardwareType === 'gpu' ? space.runtime.hardware.current.includes('gpu') : space.runtime.hardware.current.includes('cpu');
+    const matchesSearch = space.name.toLowerCase().includes(searchQuery.toLowerCase()) || space.description.toLowerCase().includes(searchQuery.toLowerCase());
+    return hasHardware && matchesSearch && space.runtime.hardware.current !== '0';
+  });
+
+  return filteredSpaces.map((space: any) => ({
+    ...space,
+    colorFrom: COLORS.from[space.colorFrom as keyof typeof COLORS.from] || COLORS.from.purple,
+    colorTo: COLORS.to[space.colorTo as keyof typeof COLORS.from] || COLORS.to.pink,
+  }));
+};
   const randomPage = Math.floor(Math.random() * 100) + 1;
   const url = `https://huggingface.co/spaces-json?p=${randomPage}&runtime.stage=RUNNING&sort=trending`;
   const response = await fetch(url);
@@ -38,4 +59,4 @@ export const fetchSpaceRandomly = async () => {
     colorTo: COLORS.to[spaces[randomIndex].colorTo as keyof typeof COLORS.from] || COLORS.to.pink,
   }
   return space;
-}
+}