File size: 3,413 Bytes
f817b5c d16e0f2 f817b5c 430cd22 f817b5c 5c1d548 f817b5c 0d707b5 d16e0f2 0d186fa f817b5c 0d707b5 1e04235 0d707b5 f817b5c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
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 text-white">🤗 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://huggingface.co/datasets/anzorq/hf-spaces-descriptions-embeddings" target="_blank" rel="noopener noreferrer">Dataset</a>
<span className="mx-2">•</span>
<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>
);
}
|