Merge branch 'main' of https://huggingface.co/spaces/cfahlgren1/model-release-heatmap into real-master

src/pages/index.tsx

@@ -1,11 +1,17 @@
-"use client";
-
-import { Inter } from "next/font/google";
+import React, { useState, useEffect } from 'react';
 import ActivityCalendar from "react-activity-calendar";
-import { useState, useEffect } from "react";
-import { Tooltip as MuiTooltip } from '@mui/material';
-
-const inter = Inter({ subsets: ["latin"] });
+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 ModelData {
   createdAt: string;
@@ -18,20 +24,10 @@ interface Activity {
   level: number;
 }
 
-export default function Home() {
+export default function OpenSourceHeatmap() {
   const [calendarData, setCalendarData] = useState<Record<string, Activity[]>>({});
   const [isLoading, setIsLoading] = useState(true);
-  
-  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
-  }
+
 
   const generateCalendarData = (modelData: ModelData[]) => {
     const data: Record<string, Activity[]> = Object.fromEntries(
@@ -41,18 +37,27 @@ export default function Home() {
     const today = new Date();
     const startDate = new Date(today);
     startDate.setMonth(today.getMonth() - 11);
-    startDate.setDate(1); // start from the first day of the month
+    startDate.setDate(1);
+
+    // create a map to store counts for each provider and date
+    const countMap: Record<string, Record<string, number>> = {};
 
-    // generate daily data for each provider
+    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;
+        }
+      });
+    });
+
+    // 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, { authors }]) => {
-        const count = modelData.filter(item => 
-          item.createdAt.startsWith(dateString) && 
-          authors.some(author => item.id.startsWith(author))
-        ).length;
-        
+      Object.entries(PROVIDERS_MAP).forEach(([provider]) => {
+        const count = countMap[provider]?.[dateString] || 0;
         data[provider].push({ date: dateString, count, level: 0 });
       });
     }
@@ -111,44 +116,47 @@ export default function Home() {
   }, []);
 
   return (
-    <main className={`flex flex-col items-center justify-center min-h-screen mx-auto p-24 ${inter.className}`}>
-      <h1 className="text-5xl font-bold text-center">Chinese AI Community: Open Source Heatmap</h1>
-      <p className="text-center mt-2 text-sm">A heatmap for open source model releases.</p>
-      <p className="text-center mt-2 text-sm">Huge thanks to Caleb for the excellent original work. <a href="https://huggingface.co/spaces/cfahlgren1/model-release-heatmap" target="_blank">Link</a> to the original repo</p>
-      <div className="mt-16">
-        {isLoading ? (
-          <p>Loading...</p>
-        ) : (
-          <>
-            {Object.entries(PROVIDERS_MAP)
-              .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="mb-8">
-                  <h2 className="text-2xl font-bold mb-2">{providerName}</h2>
-                  <ActivityCalendar 
-                    data={calendarData[providerName]}
-                    theme={{
-                      dark: ['#161b22', color],
-                      light: ['#e0e0e0', color],
-                    }}
-                    hideTotalCount
-                    renderBlock={(block, activity) => (
-                      <MuiTooltip
-                        title={`${activity.count} models created on ${activity.date}`}
-                      >
-                        {block}
-                      </MuiTooltip>
-                    )}
-                  />
+    <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">Chinese AI Community: Open Source Heatmap 🤗</h1>
+      <p className="text-center text-sm mb-8">The top AI labs and model releases.</p>
+      <p className="text-center text-sm mb-8">Huge thanks to Caleb for the excellent original work. <a href="https://huggingface.co/spaces/cfahlgren1/model-release-heatmap" target="_blank">Link</a> to the original repo</p>
+      {isLoading ? (
+        <p className="text-center">Loading...</p>
+      ) : (
+        <div className="space-y-8 mx-10">
+          {Object.entries(PROVIDERS_MAP)
+            .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">
+                <h2 className="text-xl font-bold mb-2">{providerName}</h2>
+                <div className="w-full overflow-x-auto">
+                  <div className="inline-block mx-auto">
+                    <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>
-    </main>
+              </div>
+            ))
+          }
+        </div>
+      )}
+    </div>
   );
 }