add spaces, datasets created

src/components/Heatmap.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import ActivityCalendar from "react-activity-calendar";
+import { Tooltip } from "@mui/material";
+import Link from "next/link";
+
+type HeatmapProps = {
+  data: Array<{ date: string; count: number; level: number }>;
+  color: string;
+  providerName: string;
+};
+
+const Heatmap: React.FC<HeatmapProps> = ({ data, color, providerName }) => {
+  return (
+    <div className="flex flex-col items-center">
+      <div className="w-full overflow-x-auto flex justify-center">
+        <ActivityCalendar
+          data={data}
+          theme={{
+            dark: ["#161b22", color],
+            light: ["#e0e0e0", color],
+          }}
+          hideTotalCount
+          renderBlock={(block, activity) => (
+            <Tooltip
+              title={`${activity.count} events on ${activity.date}`}
+              arrow
+            >
+              {block}
+            </Tooltip>
+          )}
+        />
+      </div>
+      <div>
+        <p className="text-sm italic light:text-slate-500">
+          Models, Datasets, and Spaces created by{" "}
+          <Link
+            href={`https://huggingface.co/${providerName}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:underline text-blue-500"
+          >
+            {providerName}.
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Heatmap;

src/pages/[author]/index.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from "react";
-import ActivityCalendar from "react-activity-calendar";
-import { Tooltip } from "@mui/material";
 import { GetServerSidePropsContext } from "next";
-import {  OpenSourceHeatmapProps } from "../../types/heatmap";
+import { OpenSourceHeatmapProps } from "../../types/heatmap";
 import { generateCalendarData } from "../../utils/calendar";
+import Heatmap from "../../components/Heatmap";
 
-const DEFAULT_COLOR = "#DB4437";
+const DEFAULT_COLOR = "#FF9D00";
 
 const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
   calendarData,
@@ -21,39 +20,23 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
 
   return (
     <div className="w-full max-w-screen-lg mx-auto p-4">
-
       {isLoading ? (
         <p className="text-center">Loading...</p>
       ) : (
-        <div className="space-y-8">
+        <div>
           {Object.entries(providers)
             .sort(
               ([keyA], [keyB]) =>
                 calendarData[keyB].reduce((sum, day) => sum + day.count, 0) -
-                calendarData[keyA].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>
+              <Heatmap
+                key={providerName}
+                data={calendarData[providerName]}
+                color={color}
+                providerName={providerName}
+              />
             ))}
         </div>
       )}
@@ -74,17 +57,23 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   };
 
   try {
-    const response = await fetch(
-      `https://huggingface.co/api/models?author=${author}&sort=createdAt&direction=-1`
+    const entityTypes = ["models", "datasets", "spaces"];
+    const allData = await Promise.all(
+      entityTypes.map(async (type) => {
+        const response = await fetch(
+          `https://huggingface.co/api/${type}?author=${author}&sort=createdAt&direction=-1`,
+        );
+        const data = await response.json();
+        return data.map((item: any) => ({
+          createdAt: item.createdAt,
+          id: item.id,
+          type: type,
+        }));
+      }),
     );
-    const data = await response.json();
-    
-    const modelData = data.map((item: any) => ({
-      createdAt: item.createdAt,
-      id: item.id,
-    }));
 
-    const calendarData = generateCalendarData(modelData, providers);
+    const flatData = allData.flat();
+    const calendarData = generateCalendarData(flatData, providers);
 
     return {
       props: {
@@ -105,5 +94,4 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   }
 }
 
-
 export default OpenSourceHeatmap;

src/pages/index.tsx

@@ -1,44 +1,55 @@
-import React, { useState, useEffect } from 'react';
-import ActivityCalendar from "react-activity-calendar";
-import { Tooltip } from '@mui/material';
+import React, { useState, useEffect } from "react";
 import { generateCalendarData } from "../utils/calendar";
-import { OpenSourceHeatmapProps, ProviderInfo, ModelData } from "../types/heatmap";
+import {
+  OpenSourceHeatmapProps,
+  ProviderInfo,
+  ModelData,
+} from "../types/heatmap";
+import Heatmap from "../components/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"] },
+  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"] },
+  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"] },
+  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 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 entityTypes = ["models", "datasets", "spaces"];
+    const allData = await Promise.all(
+      uniqueAuthors.flatMap((author) =>
+        entityTypes.map(async (type) => {
+          const response = await fetch(
+            `https://huggingface.co/api/${type}?author=${author}&sort=createdAt&direction=-1`,
+          );
+          const data = await response.json();
+          return data.map((item: any) => ({
+            createdAt: item.createdAt,
+            id: item.id,
+            type: type,
+          }));
+        }),
+      ),
     );
 
-    const flatModelData: ModelData[] = allModelData.flat();
-    const calendarData = generateCalendarData(flatModelData, PROVIDERS_MAP);
+    const flatData: ModelData[] = allData.flat();
+    const calendarData = generateCalendarData(flatData, PROVIDERS_MAP);
 
     return {
       props: {
@@ -59,7 +70,10 @@ export async function getStaticProps() {
   }
 }
 
-const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData, providers }) => {
+const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
+  calendarData,
+  providers,
+}) => {
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -70,10 +84,12 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData, pro
 
   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{' '}
+      <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"
@@ -87,40 +103,26 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData, pro
       {isLoading ? (
         <p className="text-center">Loading...</p>
       ) : (
-        <div className="space-y-8">
+        <div className="space-y-16">
           {Object.entries(providers)
-            .sort(([keyA], [keyB]) => 
-              calendarData[keyB].reduce((sum, day) => sum + day.count, 0) -
-              calendarData[keyA].reduce((sum, day) => sum + day.count, 0)
+            .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>
+                <Heatmap
+                  data={calendarData[providerName]}
+                  color={color}
+                  providerName={providerName}
+                />
               </div>
-            ))
-          }
+            ))}
         </div>
       )}
     </div>
   );
-}
+};
 
 export default OpenSourceHeatmap;

src/styles/globals.css

@@ -23,4 +23,4 @@ body {
   .text-balance {
     text-wrap: balance;
   }
-}
+}

src/utils/calendar.ts

@@ -1,66 +1,71 @@
-import { ModelData, ProviderInfo, CalendarData, Activity } from "../types/heatmap";
+import {
+  ModelData,
+  ProviderInfo,
+  CalendarData,
+  Activity,
+} from "../types/heatmap";
 
 export const generateCalendarData = (
-    modelData: ModelData[],
-    providers: Record<string, ProviderInfo>,
-  ): CalendarData => {
-    const data: Record<string, Activity[]> = Object.fromEntries(
-      Object.keys(providers).map((provider) => [provider, []]),
-    );
-  
-    const today = new Date();
-    const startDate = new Date(today);
-    startDate.setMonth(today.getMonth() - 11);
-    startDate.setDate(1);
-  
-    // create a map to store counts for each provider and date
-    const countMap: Record<string, Record<string, number>> = {};
-  
-    modelData.forEach((item) => {
-      const dateString = item.createdAt.split("T")[0];
-      Object.entries(providers).forEach(([provider, { authors }]) => {
-        if (authors.some((author) => item.id.startsWith(author))) {
-          countMap[provider] = countMap[provider] || {};
-          countMap[provider][dateString] =
-            (countMap[provider][dateString] || 0) + 1;
-        }
-      });
+  modelData: ModelData[],
+  providers: Record<string, ProviderInfo>,
+): CalendarData => {
+  const data: Record<string, Activity[]> = Object.fromEntries(
+    Object.keys(providers).map((provider) => [provider, []]),
+  );
+
+  const today = new Date();
+  const startDate = new Date(today);
+  startDate.setMonth(today.getMonth() - 11);
+  startDate.setDate(1);
+
+  // create a map to store counts for each provider and date
+  const countMap: Record<string, Record<string, number>> = {};
+
+  modelData.forEach((item) => {
+    const dateString = item.createdAt.split("T")[0];
+    Object.entries(providers).forEach(([provider, { authors }]) => {
+      if (authors.some((author) => item.id.startsWith(author))) {
+        countMap[provider] = countMap[provider] || {};
+        countMap[provider][dateString] =
+          (countMap[provider][dateString] || 0) + 1;
+      }
     });
-  
-    // fill in with 0s for days with no activity
-    for (let d = new Date(startDate); d <= today; d.setDate(d.getDate() + 1)) {
-      const dateString = d.toISOString().split("T")[0];
-  
-      Object.entries(providers).forEach(([provider]) => {
-        const count = countMap[provider]?.[dateString] || 0;
-        data[provider].push({ date: dateString, count, level: 0 });
-      });
-    }
-  
-    // calculate average counts for each provider
-    const avgCounts = Object.fromEntries(
-      Object.entries(data).map(([provider, days]) => [
-        provider,
-        days.reduce((sum, day) => sum + day.count, 0) / days.length || 0,
-      ]),
-    );
-  
-    // assign levels based on count relative to average
-    Object.entries(data).forEach(([provider, days]) => {
-      const avgCount = avgCounts[provider];
-      days.forEach((day) => {
-        day.level =
-          day.count === 0
-            ? 0
-            : day.count <= avgCount * 0.5
-              ? 1
-              : day.count <= avgCount
-                ? 2
-                : day.count <= avgCount * 1.5
-                  ? 3
-                  : 4;
-      });
+  });
+
+  // fill in with 0s for days with no activity
+  for (let d = new Date(startDate); d <= today; d.setDate(d.getDate() + 1)) {
+    const dateString = d.toISOString().split("T")[0];
+
+    Object.entries(providers).forEach(([provider]) => {
+      const count = countMap[provider]?.[dateString] || 0;
+      data[provider].push({ date: dateString, count, level: 0 });
     });
-  
-    return data;
-  };
+  }
+
+  // calculate average counts for each provider
+  const avgCounts = Object.fromEntries(
+    Object.entries(data).map(([provider, days]) => [
+      provider,
+      days.reduce((sum, day) => sum + day.count, 0) / days.length || 0,
+    ]),
+  );
+
+  // assign levels based on count relative to average
+  Object.entries(data).forEach(([provider, days]) => {
+    const avgCount = avgCounts[provider];
+    days.forEach((day) => {
+      day.level =
+        day.count === 0
+          ? 0
+          : day.count <= avgCount * 0.5
+            ? 1
+            : day.count <= avgCount
+              ? 2
+              : day.count <= avgCount * 1.5
+                ? 3
+                : 4;
+    });
+  });
+
+  return data;
+};