File size: 3,902 Bytes
fdb7c58 20faa99 fdb7c58 d088c21 6c9b36e d088c21 c07926b 7fc47b1 d088c21 7fc47b1 d088c21 7fc47b1 d088c21 7fc47b1 d088c21 7fc47b1 d088c21 7fc47b1 c608763 7fc47b1 fdb7c58 7fc47b1 c608763 7fc47b1 c608763 03b5e31 fdb7c58 89ecb9e 03b5e31 fdb7c58 d088c21 03b5e31 d088c21 03b5e31 c07926b fdb7c58 7fc47b1 |
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 |
import React, { useState, useEffect } from "react";
import { generateCalendarData } from "../utils/calendar";
import {
OpenSourceHeatmapProps,
ProviderInfo,
ModelData,
} from "../types/heatmap";
import Heatmap from "../components/Heatmap";
import { fetchAllProvidersData, fetchAllAuthorsData } from "../utils/authors";
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 OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
calendarData,
providers,
}) => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (calendarData && Object.keys(calendarData).length > 0) {
setIsLoading(false);
}
}, [calendarData]);
return (
<div className="w-full max-w-screen-lg mx-auto p-4">
<h1 className="text-3xl lg:text-5xl mt-16 font-bold text-center mb-2">
Hugging Face Heatmap 🤗
</h1>
<p className="text-center text-sm my-8">
Models, Datasets, and Spaces from the top AI labs. <br />
Request more heatmaps by{" "}
<a
href="https://huggingface.co/spaces/cfahlgren1/model-release-heatmap/discussions/new"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline"
>
opening a discussion
</a>
.
</p>
{isLoading ? (
<p className="text-center">Loading...</p>
) : (
<div className="space-y-16">
{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
)
)
.map((provider) => {
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>
);
})}
</div>
)}
</div>
);
};
export default OpenSourceHeatmap; |