File size: 4,619 Bytes
03b5e31 c608763 03b5e31 20faa99 6c9b36e 03b5e31 0bf5893 03b5e31 0bf5893 6253c9b c5a7bce aaf5c66 03b5e31 c07926b 7fc47b1 20faa99 7fc47b1 20faa99 7fc47b1 20faa99 7fc47b1 c608763 7fc47b1 20faa99 7fc47b1 c608763 7fc47b1 c608763 03b5e31 c9c6ae2 89ecb9e 03b5e31 6c9b36e 20faa99 03b5e31 6c9b36e c608763 03b5e31 c07926b 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 123 124 125 126 |
import React, { useState, useEffect } from 'react';
import ActivityCalendar from "react-activity-calendar";
import { Tooltip } from '@mui/material';
import { generateCalendarData } from "../utils/calendar";
import { OpenSourceHeatmapProps, ProviderInfo, ModelData, CalendarData } from "../types/heatmap";
const PROVIDERS_MAP: Record<string, ProviderInfo> = {
"Mistral AI": { color: "#ff7000", authors: ["mistralai"] },
"Meta": { color: "#1877F2", authors: ["facebook", "meta-llama"] },
"OpenAI": { color: "#10A37F", authors: ["openai"] },
"Anthropic": { color: "#cc785c", authors: ["Anthropic"] },
"Google": { color: "#DB4437", authors: ["google"] },
"Allen Institute for AI": { color: "#5E35B1", authors: ["allenai"] },
"Apple": { color: "#0088cc", authors: ["apple"] },
"Microsoft": { color: "#FEB800", authors: ["microsoft"] },
"NVIDIA": { color: "#76B900", authors: ["nvidia"] },
"DeepSeek": { color: "#0088cc", authors: ["deepseek-ai"] },
"Qwen": { color: "#0088cc", authors: ["Qwen"] },
"Cohere For AI": { color: "#4C6EE6", authors: ["CohereForAI"] },
"IBM": { color: "#4C6EE6", authors: ["ibm-granite"] },
"Stability AI": { color: "#A020F0", authors: ["stabilityai"] },
};
export async function getStaticProps() {
try {
const allAuthors = Object.values(PROVIDERS_MAP).flatMap(({ authors }) => authors);
const uniqueAuthors = Array.from(new Set(allAuthors));
const allModelData = await Promise.all(
uniqueAuthors.map(async (author) => {
const response = await fetch(`https://huggingface.co/api/models?author=${author}&sort=createdAt&direction=-1`);
const data = await response.json();
return data.map((item: any) => ({
createdAt: item.createdAt,
id: item.id,
}));
})
);
const flatModelData: ModelData[] = allModelData.flat();
const calendarData = generateCalendarData(flatModelData, PROVIDERS_MAP);
return {
props: {
calendarData,
providers: PROVIDERS_MAP,
},
revalidate: 3600, // regenerate every hour
};
} catch (error) {
console.error("Error fetching data:", error);
return {
props: {
calendarData: {},
providers: PROVIDERS_MAP,
},
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 mb-8">
The top AI labs and model releases. <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-8">
{Object.entries(providers)
.sort(([keyA], [keyB]) =>
calendarData[keyB].reduce((sum, day) => sum + day.count, 0) -
calendarData[keyA].reduce((sum, day) => sum + day.count, 0)
)
.map(([providerName, { color }]) => (
<div key={providerName} className="flex flex-col items-center">
<h2 className="text-xl font-bold mb-4">{providerName}</h2>
<div className="w-full overflow-x-auto flex justify-center">
<ActivityCalendar
data={calendarData[providerName]}
theme={{
dark: ['#161b22', color],
light: ['#e0e0e0', color],
}}
hideTotalCount
renderBlock={(block, activity) => (
<Tooltip
title={`${activity.count} models created on ${activity.date}`}
arrow
>
{block}
</Tooltip>
)}
/>
</div>
</div>
))
}
</div>
)}
</div>
);
}
export default OpenSourceHeatmap; |