remove requirement for name, get user full name and avatar url

src/components/Heatmap.tsx

@@ -1,17 +1,36 @@
 import React from "react";
 import ActivityCalendar from "react-activity-calendar";
-import { Tooltip } from "@mui/material";
+import { Tooltip, Avatar } from "@mui/material";
 import Link from "next/link";
 
 type HeatmapProps = {
   data: Array<{ date: string; count: number; level: number }>;
   color: string;
   providerName: string;
+  fullName: string;
+  avatarUrl: string;
 };
 
-const Heatmap: React.FC<HeatmapProps> = ({ data, color, providerName }) => {
+const Heatmap: React.FC<HeatmapProps> = ({ data, color, providerName, fullName, avatarUrl }) => {
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex flex-col items-center w-full mx-auto">
+      <div className="flex flex-col sm:flex-row items-center mb-4 w-full justify-center">
+        {avatarUrl && (
+          <Avatar src={avatarUrl} alt={fullName} className="mb-2 sm:mb-0 sm:mr-4" sx={{ width: 48, height: 48 }} />
+        )}
+        <div className="text-center sm:text-left">
+          <h2 className="text-lg font-semibold">
+            <Link
+              href={`https://huggingface.co/${providerName}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-blue-500 hover:underline"
+            >
+              {fullName}
+            </Link>
+          </h2>
+        </div>
+      </div>
       <div className="w-full overflow-x-auto flex justify-center">
         <ActivityCalendar
           data={data}
@@ -30,19 +49,18 @@ const Heatmap: React.FC<HeatmapProps> = ({ data, color, providerName }) => {
           )}
         />
       </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>
+      <p className="text-xs italic text-slate-500 mt-2 text-center">
+      Models, Datasets, and Spaces created on {" "}
+        <Link
+          href="https://huggingface.co"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:underline"
+        >
+          Hugging Face
+        </Link>
+        .
+      </p>
     </div>
   );
 };

src/pages/[author]/index.tsx

@@ -3,6 +3,7 @@ import { GetServerSidePropsContext } from "next";
 import { OpenSourceHeatmapProps } from "../../types/heatmap";
 import { generateCalendarData } from "../../utils/calendar";
 import Heatmap from "../../components/Heatmap";
+import { fetchUserData, fetchAuthorData } from "../../utils/authors";
 
 const DEFAULT_COLOR = "#FF9D00";
 
@@ -30,12 +31,14 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
                 calendarData[keyB].reduce((sum, day) => sum + day.count, 0) -
                 calendarData[keyA].reduce((sum, day) => sum + day.count, 0)
             )
-            .map(([providerName, { color }]) => (
+            .map(([providerName, { color, fullName, avatarUrl }]) => (
               <Heatmap
                 key={providerName}
                 data={calendarData[providerName]}
                 color={color}
                 providerName={providerName}
+                fullName={fullName ?? providerName}
+                avatarUrl={avatarUrl ?? ''}
               />
             ))}
         </div>
@@ -49,31 +52,20 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   const authorColor = color || DEFAULT_COLOR;
 
-  const providers = {
-    [author as string]: {
-      color: authorColor as string,
-      authors: [author as string],
-    },
-  };
-
   try {
-    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 { fullName, avatarUrl } = await fetchUserData([author as string]);
 
-    const flatData = allData.flat();
-    const calendarData = generateCalendarData(flatData, providers);
+    const providers = {
+      [author as string]: {
+        color: authorColor as string,
+        authors: [author as string],
+        fullName,
+        avatarUrl,
+      },
+    };
+
+    const flatData = await fetchAuthorData(author as string);
+    const calendarData = generateCalendarData(flatData, [providers[author as string]]);
 
     return {
       props: {
@@ -88,7 +80,14 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       props: {
         calendarData: {},
         color: authorColor,
-        providers,
+        providers: {
+          [author as string]: {
+            color: authorColor as string,
+            authors: [author as string],
+            fullName: author,
+            avatarUrl: null,
+          },
+        },
       },
     };
   }

src/pages/index.tsx

@@ -6,55 +6,39 @@ import {
   ModelData,
 } from "../types/heatmap";
 import Heatmap from "../components/Heatmap";
+import { fetchAllProvidersData, fetchAllAuthorsData } from "../utils/authors";
 
-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"] },
-};
+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 = Object.values(PROVIDERS_MAP).flatMap(
-      ({ authors }) => authors,
-    );
+    const allAuthors = PROVIDERS.flatMap(({ authors }) => authors);
     const uniqueAuthors = Array.from(new Set(allAuthors));
 
-    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 flatData: ModelData[] = await fetchAllAuthorsData(uniqueAuthors);
+    const updatedProviders = await fetchAllProvidersData(PROVIDERS);
 
-    const flatData: ModelData[] = allData.flat();
-    const calendarData = generateCalendarData(flatData, PROVIDERS_MAP);
+    const calendarData = generateCalendarData(flatData, updatedProviders);
 
     return {
       props: {
         calendarData,
-        providers: PROVIDERS_MAP,
+        providers: updatedProviders,
       },
       revalidate: 3600, // regenerate every hour
     };
@@ -63,7 +47,7 @@ export async function getStaticProps() {
     return {
       props: {
         calendarData: {},
-        providers: PROVIDERS_MAP,
+        providers: PROVIDERS,
       },
       revalidate: 60, // retry after 1 minute if there was an error
     };
@@ -104,21 +88,31 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
         <p className="text-center">Loading...</p>
       ) : (
         <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),
+          {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(([providerName, { color }]) => (
-              <div key={providerName} className="flex flex-col items-center">
-                <Heatmap
-                  data={calendarData[providerName]}
-                  color={color}
-                  providerName={providerName}
-                />
-              </div>
-            ))}
+            .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>

src/types/heatmap.ts

@@ -1,6 +1,8 @@
 export interface ProviderInfo {
   color: string;
   authors: string[];
+  fullName?: string;
+  avatarUrl?: string | null;
 }
 
 export interface ModelData {
@@ -22,5 +24,5 @@ export interface OpenSourceHeatmapProps {
   calendarData: CalendarData;
   author: string;
   color: string;
-  providers: Record<string, ProviderInfo>;
-}
+  providers: ProviderInfo[];
+}

src/utils/authors.ts

@@ -0,0 +1,68 @@
+import { ProviderInfo, ModelData } from "../types/heatmap";
+
+export async function fetchUserData(authors: string[]) {
+  const primaryAuthor = authors[0];
+  try {
+    const response = await fetch(`https://huggingface.co/api/users/${primaryAuthor}/overview`);
+    const data = await response.json();
+    return {
+      fullName: data.fullname || primaryAuthor,
+      avatarUrl: data.avatarUrl || null, 
+    };
+  } catch (error) {
+    console.error(`Error fetching user data for ${primaryAuthor}:`, error);
+    return {
+      fullName: primaryAuthor,
+      avatarUrl: null, 
+    };
+  }
+}
+
+export async function fetchAllProvidersData(providers: ProviderInfo[]): Promise<ProviderInfo[]> {
+  return Promise.all(providers.map(async (providerInfo) => {
+    const { fullName, avatarUrl } = await fetchUserData(providerInfo.authors);
+    return { 
+      ...providerInfo, 
+      fullName, 
+      avatarUrl: avatarUrl || null 
+    };
+  }));
+}
+
+export async function fetchAuthorData(author: string): Promise<ModelData[]> {
+  const entityTypes = ["models", "datasets", "spaces"] as const;
+  try {
+    const allData = await Promise.all(
+      entityTypes.map(async (type) => {
+        const response = await fetch(
+          `https://huggingface.co/api/${type}?author=${author}&sort=createdAt&direction=-1`
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        return data.map((item: any): ModelData => ({
+          createdAt: item.createdAt,
+          id: item.id,
+        }));
+      })
+    );
+
+    return allData.flat();
+  } catch (error) {
+    console.error(`Error fetching data for author ${author}:`, error);
+    return [];
+  }
+}
+
+export async function fetchAllAuthorsData(authors: string[]): Promise<ModelData[]> {
+  try {
+    const allData = await Promise.all(
+      authors.map(async (author) => await fetchAuthorData(author))
+    );
+    return allData.flat();
+  } catch (error) {
+    console.error("Error fetching data for all authors:", error);
+    return [];
+  }
+}

src/utils/calendar.ts

@@ -7,10 +7,10 @@ import {
 
 export const generateCalendarData = (
   modelData: ModelData[],
-  providers: Record<string, ProviderInfo>,
+  providers: ProviderInfo[]
 ): CalendarData => {
   const data: Record<string, Activity[]> = Object.fromEntries(
-    Object.keys(providers).map((provider) => [provider, []]),
+    providers.map((provider) => [provider.authors[0], []]),
   );
 
   const today = new Date();
@@ -23,11 +23,11 @@ export const generateCalendarData = (
 
   modelData.forEach((item) => {
     const dateString = item.createdAt.split("T")[0];
-    Object.entries(providers).forEach(([provider, { authors }]) => {
+    providers.forEach(({ authors }) => {
       if (authors.some((author) => item.id.startsWith(author))) {
-        countMap[provider] = countMap[provider] || {};
-        countMap[provider][dateString] =
-          (countMap[provider][dateString] || 0) + 1;
+        countMap[authors[0]] = countMap[authors[0]] || {};
+        countMap[authors[0]][dateString] =
+          (countMap[authors[0]][dateString] || 0) + 1;
       }
     });
   });
@@ -36,9 +36,9 @@ export const generateCalendarData = (
   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 });
+    providers.forEach(({ authors }) => {
+      const count = countMap[authors[0]]?.[dateString] || 0;
+      data[authors[0]].push({ date: dateString, count, level: 0 });
     });
   }
 
@@ -68,4 +68,4 @@ export const generateCalendarData = (
   });
 
   return data;
-};
+};