import { Inter } from 'next/font/google'; import SearchBar from '@/components/searchBar'; import Card from '@/components/card'; 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); } if (searchResults.length > 0) { fetchSpaceInfo(searchResults); } else { setSpaceInfo(null); } }, [searchResults]); async function onSearch(query) { if (query === '') { setSearchResults([]); return; } const results = await predict(query, 90); setSearchResults(results); } useEffect(() => { const focusSearchBar = () => { document.querySelector('.search-bar').focus(); }; focusSearchBar(); }, []); return (
{spaceInfo !== null && (
{spaceInfo.map((space, index) => space && ( ))}
)}
); }