Server side generation

src/pages/index.tsx

@@ -1,16 +1,11 @@
+// pages/index.tsx
 import React, { useState, useEffect } from 'react';
-import ActivityCalendar from "react-activity-calendar";
+import ActivityCalendar from 'react-activity-calendar';
 import { Tooltip } from '@mui/material';
 
-const PROVIDERS_MAP: Record<string, { color: string; authors: string[] }> = {
-  "BAAI": { color: "#FF7000", authors: ["BAAI"] },        // Vibrant Orange
-  "DeepSeek": { color: "#1877F2", authors: ["deepseek-ai"] }, // Meta's Blue
-  "Shanghai AI Lab": { color: "#10A37F", authors: ["internlm", "OpenGVLab", "openmmlab", "Vchitect"] }, // Fresh Green
-  "Alibaba": { color: "#FF6F00", authors: ["Qwen", "Alibaba-NLP", "alibaba-pai", "DAMO-NLP-SG", 'ali-vilab', 'modelscope', 'FunAudioLLM'] }, // Bright Orange
-  "ZhipuAI / GLM": { color: "#4285F4", authors: ["THUDM"] },        // Classic Blue
-  "Tencent": { color: "#1DA1F2", authors: ["TencentARC", "Tencent-Hunyuan", "h94"] }, // Twitter Blue
-  "Yi/01": { color: "#FF4500", authors: ["01-ai"] },      // Orange-Red
-  "Multimodal Art Projection (m-a-p)": { color: "#5E35B1", authors: ["m-a-p"] } // Dark Purple, with gradient from Very Light Purple to Dark Purple
+interface ProviderInfo {
+  color: string;
+  authors: string[];
 }
 
 interface ModelData {
@@ -24,96 +19,126 @@ interface Activity {
   level: number;
 }
 
-export default function OpenSourceHeatmap() {
-  const [calendarData, setCalendarData] = useState<Record<string, Activity[]>>({});
-  const [isLoading, setIsLoading] = useState(true);
-
+interface CalendarData {
+  [key: string]: Activity[];
+}
 
-  const generateCalendarData = (modelData: ModelData[]) => {
-    const data: Record<string, Activity[]> = Object.fromEntries(
-      Object.keys(PROVIDERS_MAP).map(provider => [provider, []])
-    );
+const PROVIDERS_MAP: Record<string, ProviderInfo> = {
+  "BAAI": { color: "#FF7000", authors: ["BAAI"] },
+  "DeepSeek": { color: "#1877F2", authors: ["deepseek-ai"] },
+  "Shanghai AI Lab": { color: "#10A37F", authors: ["internlm", "OpenGVLab", "openmmlab", "Vchitect"] },
+  "Alibaba": { color: "#FF6F00", authors: ["Qwen", "Alibaba-NLP", "alibaba-pai", "DAMO-NLP-SG", 'ali-vilab', 'modelscope', 'FunAudioLLM'] },
+  "ZhipuAI / GLM": { color: "#4285F4", authors: ["THUDM"] },
+  "Tencent": { color: "#1DA1F2", authors: ["TencentARC", "Tencent-Hunyuan", "h94"] },
+  "Yi/01": { color: "#FF4500", authors: ["01-ai"] },
+  "Multimodal Art Projection (m-a-p)": { color: "#5E35B1", authors: ["m-a-p"] }
+};
+
+// Generates calendar data from model data
+const generateCalendarData = (modelData: ModelData[]): CalendarData => {
+  const data: CalendarData = Object.fromEntries(
+    Object.keys(PROVIDERS_MAP).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_MAP).forEach(([provider, { authors }]) => {
-        if (authors.some(author => item.id.startsWith(author))) {
-          countMap[provider] = countMap[provider] || {};
-          countMap[provider][dateString] = (countMap[provider][dateString] || 0) + 1;
-        }
-      });
+  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 => {
+    console.log(item);
+    const dateString = item.createdAt.split('T')[0];
+    Object.entries(PROVIDERS_MAP).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_MAP).forEach(([provider]) => {
+      const count = countMap[provider]?.[dateString] || 0;
+      data[provider].push({ date: dateString, count, level: 0 });
+    });
+  }
 
-    // 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_MAP).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
-      ])
-    );
+  // 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;
-      });
+  // 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;
+};
+
+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,
+        }));
+      })
+    );
 
-    return data;
+    const flatModelData = allModelData.flat();
+    const calendarData = generateCalendarData(flatModelData);
+
+    return {
+      props: {
+        calendarData,
+      },
+      revalidate: 60, // Re-generate the page every hour (3600 seconds)
+    };
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return {
+      props: {
+        calendarData: {},
+      },
+      revalidate: 1,
+    };
   }
+}
 
-  const initData = async () => {
-    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 = allModelData.flat();
-      const calendarData = generateCalendarData(flatModelData);
-      setCalendarData(calendarData);
-    } catch (error) {
-      console.error("Error fetching data:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  }
+interface OpenSourceHeatmapProps {
+  calendarData: CalendarData;
+}
+
+const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData }) => {
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    initData();
-  }, []);
+    if (calendarData && Object.keys(calendarData).length > 0) {
+      setIsLoading(false);
+    }
+  }, [calendarData]);
 
   return (
     <div className="w-full max-w-screen-lg mx-auto p-4">
@@ -161,4 +186,6 @@ export default function OpenSourceHeatmap() {
       )}
     </div>
   );
-}
+}
+
+export default OpenSourceHeatmap;