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 [sortedSpaceInfo, setSortedSpaceInfo] = useState(null);
const [searchResults, setSearchResults] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [sortBy, setSortBy] = useState('relevance');
const [onlyRunning, setOnlyRunning] = useState(false);
useEffect(() => {
if (searchResults.length > 0) {
fetchSpaceInfo(searchResults);
} else {
setSpaceInfo(null);
}
async function fetchSpaceInfo(results) {
setIsLoading(true);
const spaceData = await Promise.all(
results.map(async ([id, description]) => {
const space = await get_space_info(id);
return space ? { ...space, description } : null;
})
);
setSpaceInfo(spaceData);
setIsLoading(false);
document.querySelector('.search-bar').scrollIntoView({
behavior: 'smooth',
block: 'start',
});
}
}, [searchResults]);
useEffect(() => {
if (spaceInfo) {
setSortedSpaceInfo(filterResults(sortResults(spaceInfo, sortBy)));
}
}, [spaceInfo, sortBy, onlyRunning]);
useEffect(() => {
document.querySelector('.search-bar')?.focus();
}, []);
async function onSearch(query) {
setIsLoading(true);
setSortBy('relevance');
setSearchResults(query ? await predict(query, 24) : []);
}
function sortResults(results, sortBy) {
return sortBy === 'likes' ? [...results].sort((a, b) => b.likes - a.likes) : results;
}
function filterResults(results) {
return onlyRunning ? results.filter((space) => space.runtime_stage === 'RUNNING') : results;
}
function toggleOnlyRunning() {
setOnlyRunning(!onlyRunning);
}
const renderSortButtons = () => (
<>
{['relevance', 'likes'].map((option) => (
))}
);
const renderCards = () =>
sortedSpaceInfo.map(
(space, index) =>
space && (
)
);
return (
🤗 Hugging Face Spaces
{isLoading ? (
) : (
sortedSpaceInfo && (
<>
Sort by:
{renderSortButtons()}
{renderCards()}
)
)}
);
}