~

components/card.jsx

@@ -33,19 +33,19 @@ const Card = ({
 
   let runtimeStageIcon = null;
   if (runtimeStage === 'STOPPED') {
-    runtimeStageIcon = <svg class="mr-0.5" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1.1em" height="1.1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32">
+    runtimeStageIcon = <svg className="mr-0.5" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1.1em" height="1.1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32">
       <rect x="11" y="9" width="2" height="14" fill="currentColor" />
       <rect x="19" y="9" width="2" height="14" fill="currentColor" />
     </svg>;
   } else if (runtimeStage.includes('ERROR')) {
-    runtimeStageIcon = <svg class="mr-0.5" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1.1em" height="1.1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z" fill="currentColor"></path></svg>;
+    runtimeStageIcon = <svg className="mr-0.5" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1.1em" height="1.1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z" fill="currentColor"></path></svg>;
   }
 
   return (
     <div className="flex flex-col">
       <a href={spaceUrl} target="_blank" rel="noopener noreferrer">
         <div className="text-sm truncate px-2 py-1 w-full font-bold text-clip">
-          {emoji}{title}
+          {emoji} {title}
         </div>
       </a>
 
@@ -56,15 +56,19 @@ const Card = ({
         >
           <div className="flex justify-between items-center w-full">
             <div className="right-16 flex flex-wrap content-start gap-1.5 overflow-hidden top-3 left-3 text-xs">
-              <div className={`inline-flex select-none items-center overflow-hidden font-mono  rounded bg-white/10 px-1 py-0 leading-tight text-white opacity-80`}>
+              <div className={`inline-flex select-none items-center overflow-hidden font-mono rounded bg-white/10 px-1 py-0 leading-tight text-white opacity-80`}>
                 {runtimeStageIcon}
                 <strong>{runtimeStage}</strong>
-                <span className="mx-1">on</span>
-                <strong>{currentHardware}</strong>
+                {runtimeStage === "RUNNING" && (
+                  <>
+                    <span className="mx-1">on</span>
+                    <strong>{currentHardware}</strong>
+                  </>
+                )}
               </div>
               <div className="inline-flex select-none items-center overflow-hidden font-mono  rounded bg-white/10 px-1 py-0 leading-tight text-white opacity-80">
                 <span>{lastModified}</span>
-              </div>              
+              </div>
             </div>
             <div className="flex items-center">
               <svg className="mr-1.5 text-white" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" fill="currentColor">

components/searchBar.jsx

@@ -22,6 +22,7 @@ const SearchBar = ({ onSearch }) => {
     "Summarize text",
     "Generate video from text and audio",
     "Help me organize a trip",
+    "Write a children's story",
   ];
 
   useEffect(() => {
@@ -40,7 +41,7 @@ const SearchBar = ({ onSearch }) => {
         setPlaceholderIndex(Math.floor(Math.random() * placeholders.length));
         setPlaceholder(""); // reset the placeholder when the index changes
       }
-    }, 1000);
+    }, 1500);
 
     return () => clearInterval(indexInterval);
   }, [placeholder, placeholderIndex]);
@@ -52,11 +53,11 @@ const SearchBar = ({ onSearch }) => {
   };
 
   return (
-    <div className="flex items-center justify-center bg-gray-900 rounded-md shadow-sm md:w-1/2 h-12">
+    <div className="flex items-center justify-center bg-gray-900 rounded-xl shadow-sm md:w-1/2 h-12 my-8">
       <input
         type="text"
         placeholder={placeholder}
-        className="search-bar w-full h-full px-4 py-2 text-gray-200 bg-gray-800 border border-gray-700 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-2"
+        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)}
         onKeyDown={handleKeyDown}

pages/api/hf_space.js

@@ -33,7 +33,7 @@ const get_space_info = async (space_id) => {
 
         const result = { space_id, author, title, emoji, lastModified, colorFrom, colorTo, likes, sdk, runtime_stage, current_hardware }
 
-        console.debug("API response: ", result)
+        // console.debug("API response: ", result)
 
         return result
 

pages/index.js

@@ -24,6 +24,10 @@ export default function Home() {
       });
       const spaceData = await Promise.all(spacePromises);
       setSpaceInfo(spaceData);
+      document.querySelector('.search-bar').scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
     }
 
     if (searchResults.length > 0) {
@@ -51,7 +55,8 @@ export default function Home() {
   }, []);
 
   return (
-    <main className={`flex min-h-screen flex-col items-center justify-between p-8 md:p-24 ${inter.className}`}>
+    <main className={`flex min-h-screen flex-col items-center p-8 md:px-24 my-10 ${inter.className}`}>
+      <h1 className="text-4xl md:text-6xl font-bold text-center mb-12">🤗 Hugging Face Spaces</h1>
       <SearchBar onSearch={onSearch} />
       {spaceInfo !== null && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 w-full mt-8">