|
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'; |
|
|
|
const inter = Inter({ subsets: ['latin'] }); |
|
|
|
export default function Home() { |
|
const [spaceInfo, setSpaceInfo] = useState(null); |
|
const [searchResults, setSearchResults] = useState([]); |
|
|
|
useEffect(() => { |
|
async function fetchSpaceInfo(results) { |
|
const spacePromises = results.map(async (result) => { |
|
const [id, description] = result; |
|
const space = await get_space_info(id); |
|
if (space === null) { |
|
return null; |
|
} |
|
space.description = description; |
|
return space; |
|
}); |
|
const spaceData = await Promise.all(spacePromises); |
|
setSpaceInfo(spaceData); |
|
document.querySelector('.search-bar').scrollIntoView({ |
|
behavior: 'smooth', |
|
block: 'start', |
|
}); |
|
} |
|
|
|
if (searchResults.length > 0) { |
|
fetchSpaceInfo(searchResults); |
|
} else { |
|
setSpaceInfo(null); |
|
} |
|
}, [searchResults]); |
|
|
|
async function onSearch(query) { |
|
if (query === '') { |
|
setSearchResults([]); |
|
return; |
|
} |
|
const results = await predict(query, 12); |
|
setSearchResults(results); |
|
} |
|
|
|
useEffect(() => { |
|
const focusSearchBar = () => { |
|
document.querySelector('.search-bar').focus(); |
|
}; |
|
|
|
focusSearchBar(); |
|
}, []); |
|
|
|
return ( |
|
<main className={`flex min-h-screen flex-col items-center p-8 md:px-24 pt-20 bg-gray-950 ${inter.className} justify-between`}> |
|
{/* <BackgroundEmojiGrid /> */} |
|
<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"> |
|
{spaceInfo.map((space, index) => space && ( |
|
<Card |
|
key={index} |
|
space_id={space.space_id} |
|
author={space.author} |
|
title={space.title} |
|
description={space.description} |
|
emoji={space.emoji} |
|
lastModified={space.lastModified} |
|
colorFrom={space.colorFrom} |
|
colorTo={space.colorTo} |
|
likes={space.likes} |
|
sdk={space.sdk} |
|
runtimeStage={space.runtime_stage} |
|
currentHardware={space.current_hardware} |
|
/> |
|
))} |
|
</div> |
|
)} |
|
<footer className="text-center text-gray-500 text-sm mt-8 bottom-0 w-full p-4"> |
|
Created by Anzor Qunash |
|
<br /> |
|
<a href="https://github.com/qunash" target="_blank" rel="noopener noreferrer">GitHub</a> |
|
<span className="mx-2">β’</span> |
|
<a href="https://twitter.com/hahahahohohe" target="_blank" rel="noopener noreferrer">Twitter</a> |
|
<span className="mx-2">β’</span> |
|
<a href="https://www.buymeacoffee.com/anzorq" target="_blank" rel="noopener noreferrer">Buy me a coffee</a> |
|
</footer> |
|
</main> |
|
); |
|
} |
|
|