File size: 4,069 Bytes
ab1abdd 20faa99 fdb7c58 ab1abdd fdb7c58 d088c21 ab1abdd 6c9b36e d088c21 c07926b 7fc47b1 d088c21 7fc47b1 d088c21 7fc47b1 d088c21 7fc47b1 d088c21 7fc47b1 d088c21 7fc47b1 c608763 7fc47b1 ab1abdd fdb7c58 7fc47b1 c608763 7fc47b1 c608763 ab1abdd c608763 ab1abdd fdb7c58 ab1abdd 03b5e31 fdb7c58 ab1abdd 03b5e31 c07926b fdb7c58 7fc47b1 ab1abdd |
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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
import React, { useState, useEffect, useMemo } from "react";
import { generateCalendarData } from "../utils/calendar";
import {
OpenSourceHeatmapProps,
ProviderInfo,
ModelData,
CalendarData,
} from "../types/heatmap";
import Heatmap from "../components/Heatmap";
import { fetchAllProvidersData, fetchAllAuthorsData } from "../utils/authors";
import UserSearchDialog from "../components/UserSearchDialog";
const PROVIDERS: ProviderInfo[] = [
{ color: "#ff7000", authors: ["mistralai"] },
{ color: "#1877F2", authors: ["meta-llama", "facebook", ] },
{ color: "#10A37F", authors: ["openai"] },
{ color: "#cc785c", authors: ["Anthropic"] },
{ color: "#DB4437", authors: ["google"] },
{ color: "#5E35B1", authors: ["allenai"] },
{ color: "#0088cc", authors: ["apple"] },
{ color: "#FEB800", authors: ["microsoft"] },
{ color: "#76B900", authors: ["nvidia"] },
{ color: "#0088cc", authors: ["deepseek-ai"] },
{ color: "#0088cc", authors: ["Qwen"] },
{ color: "#4C6EE6", authors: ["CohereForAI"] },
{ color: "#4C6EE6", authors: ["ibm-granite"] },
{ color: "#A020F0", authors: ["stabilityai"] },
];
export async function getStaticProps() {
try {
const allAuthors = PROVIDERS.flatMap(({ authors }) => authors);
const uniqueAuthors = Array.from(new Set(allAuthors));
const flatData: ModelData[] = await fetchAllAuthorsData(uniqueAuthors);
const updatedProviders = await fetchAllProvidersData(PROVIDERS);
const calendarData = generateCalendarData(flatData, updatedProviders);
return {
props: {
calendarData,
providers: updatedProviders,
},
revalidate: 3600, // regenerate every hour
};
} catch (error) {
console.error("Error fetching data:", error);
return {
props: {
calendarData: {},
providers: PROVIDERS,
},
revalidate: 60, // retry after 1 minute if there was an error
};
}
}
const ProviderHeatmap = React.memo(({ provider, calendarData }: { provider: ProviderInfo, calendarData: CalendarData }) => {
const providerName = provider.fullName || provider.authors[0];
return (
<div key={providerName} className="flex flex-col items-center">
<Heatmap
data={calendarData[providerName]}
color={provider.color}
providerName={providerName}
fullName={provider.fullName ?? providerName}
avatarUrl={provider.avatarUrl ?? ''}
/>
</div>
);
});
const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
calendarData,
providers,
}) => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (calendarData && Object.keys(calendarData).length > 0) {
setIsLoading(false);
}
}, [calendarData]);
const sortedProviders = useMemo(() =>
providers.sort((a, b) =>
calendarData[b.fullName || b.authors[0]].reduce(
(sum, day) => sum + day.count,
0
) -
calendarData[a.fullName || a.authors[0]].reduce(
(sum, day) => sum + day.count,
0
)
),
[providers, calendarData]
);
return (
<div className="w-full max-w-screen-lg mx-auto p-4 py-16">
<h1 className="text-3xl lg:text-5xl mt-16 font-bold text-center mb-2">
Hugging Face Heatmap 🤗
</h1>
<div className="text-center text-sm my-8 space-y-4">
<p>
Models, Datasets, and Spaces from the top AI labs.
</p>
<div className="flex justify-center space-x-4">
<UserSearchDialog />
</div>
</div>
<div className="h-px max-w-lg mx-auto bg-gray-200 my-16" />
{isLoading ? (
<p className="text-center">Loading...</p>
) : (
<div className="space-y-16">
{sortedProviders.map((provider) => (
<ProviderHeatmap
key={provider.fullName || provider.authors[0]}
provider={provider}
calendarData={calendarData}
/>
))}
</div>
)}
</div>
);
};
export default React.memo(OpenSourceHeatmap); |