~

components/backgroundEmojiGrid.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+const emojis = ['😄', '🚀', '👀', '👨‍💻', '👩‍💻', '🎉', '🔥', '🎊', '🙌', '👏', '🎁', '🤩', '🥳', '🔗', '🌟', '🌈', '🌞', '🌝', '🌚', '👋', '🍕', '🍔', '🍟', '🍳', '🍲', '🍱', '🍣', '🍤', '🍦', '🍩', '🍪', '🎂', '🍰', '🍫', '🍬', '🍭', '🍿', '🍷', '🍸', '🍹', '🍺', '🍻', '🍽', '🥢', '🧂', '⚽️', '🏀', '🏈', '⚾️', '🎾', '🏐', '🏉', '🎱', '🏓', '🏸', '🏒', '🏑', '🥍', '🏏', '🥅', '⛳️', '🏹', '🎣', '🥊', '🥋', '🎽', '🛹', '🛷', '🥌', '🎿', '⛷', '🏂', '🏋️‍♀️', '🤼‍♀️', '🤸‍♀️', '⛹️‍♀️', '🤺', '🤾‍♀️', '🏌️‍♀️', '🏇', '🧘‍♀️', '🏄‍♀️', '🏊‍♀️', '🤽‍♀️', '🚣‍♀️', '🧗‍♀️', '🚵‍♀️', '🚴‍♀️', '🏆', '💻']
+
+export default function BackgroundEmojiGrid() {
+  const [grid, setGrid] = useState([]);
+
+  useEffect(() => {
+    const newGrid = Array.from({ length: 1000 }, () => emojis[Math.floor(Math.random() * emojis.length)]); // Adjust the length to suit the size of your grid
+    setGrid(newGrid);
+  }, []);
+
+  return (
+    <div className="fixed top-1/2 left-1/2 w-[200vh] h-[200vh] overflow-hidden -z-10 transform -translate-x-1/2 -translate-y-1/2 rotate-45 opacity-10">
+      {grid.map((emoji, i) => (
+        <span key={i} className="inline-block w-24 h-24 md:w-32 md:h-32 text-4xl">{emoji}</span> // Adjust the width and height to suit the size of your grid cells
+      ))}
+    </div>
+  );
+}

components/searchBar.jsx

@@ -4,6 +4,8 @@ const SearchBar = ({ onSearch }) => {
   const [query, setQuery] = useState("");
   const [placeholderIndex, setPlaceholderIndex] = useState(0);
   const [placeholder, setPlaceholder] = useState("");
+  const [showInitialPlaceholder, setShowInitialPlaceholder] = useState(true);
+  const initialPlaceholder = "Discover thousands of spaces";
   const placeholders = [
     "Generate music",
     "Remove background from images",
@@ -26,25 +28,38 @@ const SearchBar = ({ onSearch }) => {
   ];
 
   useEffect(() => {
-    let typingInterval;
-    if (placeholder.length < placeholders[placeholderIndex].length) {
-      typingInterval = setInterval(() => {
-        setPlaceholder(prevPlaceholder => prevPlaceholder + placeholders[placeholderIndex][placeholder.length]);
-      }, 100); // The typing speed
-    }
-    return () => clearInterval(typingInterval);
-  }, [placeholder, placeholderIndex]);
+    const initialTimeout = setTimeout(() => {
+      setShowInitialPlaceholder(false);
+    }, 4000);
+
+    return () => clearTimeout(initialTimeout);
+  }, []);
 
   useEffect(() => {
-    const indexInterval = setInterval(() => {
-      if (placeholder === placeholders[placeholderIndex]) {
-        setPlaceholderIndex(Math.floor(Math.random() * placeholders.length));
-        setPlaceholder(""); // reset the placeholder when the index changes
+    if (!showInitialPlaceholder) {
+      let typingInterval;
+      if (placeholder.length < placeholders[placeholderIndex].length) {
+        const typingSpeed = Math.floor(Math.random() * 101) + 100;
+        typingInterval = setInterval(() => {
+          setPlaceholder(prevPlaceholder => prevPlaceholder + placeholders[placeholderIndex][placeholder.length]);
+        }, typingSpeed);
       }
-    }, 1500);
+      return () => clearInterval(typingInterval);
+    }
+  }, [placeholder, placeholderIndex, showInitialPlaceholder]);
 
-    return () => clearInterval(indexInterval);
-  }, [placeholder, placeholderIndex]);
+  useEffect(() => {
+    if (!showInitialPlaceholder) {
+      const indexInterval = setInterval(() => {
+        if (placeholder === placeholders[placeholderIndex]) {
+          setPlaceholderIndex(Math.floor(Math.random() * placeholders.length));
+          setPlaceholder(""); // reset the placeholder when the index changes
+        }
+      }, 1500);
+
+      return () => clearInterval(indexInterval);
+    }
+  }, [placeholder, placeholderIndex, showInitialPlaceholder]);
 
   const handleKeyDown = (event) => {
     if (event.key === "Enter") {
@@ -53,10 +68,10 @@ const SearchBar = ({ onSearch }) => {
   };
 
   return (
-    <div className="flex items-center justify-center bg-gray-900 rounded-xl shadow-sm md:w-1/2 h-12 my-8">
+    <div className="flex items-center justify-center bg-gray-900 rounded-xl shadow-sm w-full lg:w-1/2 h-12 my-8">
       <input
         type="text"
-        placeholder={placeholder}
+        placeholder={showInitialPlaceholder ? initialPlaceholder : placeholder}
         className="search-bar w-full h-full px-4 py-2 text-gray-200 bg-gray-800 border border-gray-700 rounded-xl shadow-sm appearance-none focus:outline-none focus:ring-2"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
@@ -66,4 +81,4 @@ const SearchBar = ({ onSearch }) => {
   );
 };
 
-export default SearchBar;
+export default SearchBar;

pages/index.js

@@ -1,6 +1,7 @@
 import { Inter } from 'next/font/google';
 import SearchBar from '@/components/searchBar';
 import Card from '@/components/card';
+import BackgroundEmojiGrid from '@/components/backgroundEmojiGrid';
 import { predict } from '@/pages/api/api_hf';
 import { get_space_info } from '@/pages/api/hf_space';
 import { useState, useEffect } from 'react';
@@ -42,7 +43,7 @@ export default function Home() {
       setSearchResults([]);
       return;
     }
-    const results = await predict(query, 90);
+    const results = await predict(query, 10);
     setSearchResults(results);
   }
 
@@ -55,7 +56,8 @@ export default function Home() {
   }, []);
 
   return (
-    <main className={`flex min-h-screen flex-col items-center p-8 md:px-24 my-10 ${inter.className}`}>
+    <main className={`flex min-h-screen flex-col items-center p-8 md:px-24 py-20 bg-gray-950 ${inter.className}`}>
+      {/* <BackgroundEmojiGrid /> */}
       <h1 className="text-4xl md:text-6xl font-bold text-center mb-12">🤗 Hugging Face Spaces</h1>
       <SearchBar onSearch={onSearch} />
       {spaceInfo !== null && (