show navigation bar

src/pages/heatmap/index.tsx

@@ -3,26 +3,39 @@ import ActivityCalendar from 'react-activity-calendar';
 import { Tooltip } from '@mui/material';
 import { PROVIDERS_MAP } from '../../utils/providers';
 import { CalendarData, fetchAllModelData, generateCalendarData, aggregateCalendarData } from '../../utils/modelData';
+import Link from 'next/link';
 
 interface OpenSourceHeatmapProps {
   calendarData: CalendarData;
 }
 
 export const getStaticProps = async () => {
-  const allModels = await fetchAllModelData();
-  const calendarData = generateCalendarData(allModels);
+  try {
+    const modelData = await fetchAllModelData();
+    const calendarData = generateCalendarData(modelData);
+    const aggregatedData = aggregateCalendarData(calendarData);
 
-  return {
-    props: {
-      calendarData,
-    },
-    revalidate: 3600, // Revalidate every hour
-  };
+    return {
+      props: {
+        calendarData: aggregatedData,
+      },
+      // Revalidate every 12 hours
+      revalidate: 43200,
+    };
+  } catch (error) {
+    console.error('Error in getStaticProps:', error);
+    return {
+      props: {
+        calendarData: {},
+      },
+      // Retry more frequently if there was an error
+      revalidate: 3600,
+    };
+  }
 };
 
 const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData }) => {
   const [isLoading, setIsLoading] = useState(true);
-  const aggregatedData = aggregateCalendarData(calendarData);
 
   useEffect(() => {
     if (calendarData && Object.keys(calendarData).length > 0) {
@@ -32,11 +45,20 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ 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">Chinese AI Open Source Heatmap 🤗</h1>
-      <p className="text-center text-sm mb-8">
-        The top AI labs and model releases from the awesome Chinese AI community.<br />
-        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="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="text-3xl lg:text-4xl font-bold mb-2">Chinese AI Open Source Heatmap 🤗</h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            Visualize the activity of Chinese AI models and datasets
+          </p>
+        </div>
+        <Link 
+          href="/trend"
+          className="px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors"
+        >
+          View Trends
+        </Link>
+      </div>
       {isLoading ? (
         <p className="text-center">Loading...</p>
       ) : (
@@ -47,7 +69,7 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData }) =
             <div className="w-full overflow-x-auto">
               <div className="inline-block mx-auto">
                 <ActivityCalendar
-                  data={aggregatedData}
+                  data={calendarData}
                   theme={{
                     dark: ['#161b22', '#4CAF50'],
                     light: ['#e0e0e0', '#4CAF50'],

src/pages/index.tsx

@@ -1,21 +1,12 @@
-import Link from 'next/link';
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 
 export default function Home() {
-  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">Chinese AI Open Source Heatmap 🤗</h1>
-      <p className="text-center text-sm mb-8">
-        The top AI labs and model releases from the awesome Chinese AI community.<br />
-        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="flex justify-center mt-8">
-        <Link 
-          href="/heatmap"
-          className="text-xl text-blue-600 hover:text-blue-800 hover:underline"
-        >
-          View Heatmap
-        </Link>
-      </div>
-    </div>
-  );
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace('/trend');
+  }, []);
+
+  return null;
 }

src/pages/trend/index.tsx

@@ -19,6 +19,7 @@ import {
   DetailedModelData,
   convertToCSV
 } from '../../utils/modelData';
+import Link from 'next/link';
 
 interface TrendProps {
   monthlyData: MonthlyActivity[];
@@ -156,8 +157,21 @@ const TrendPage: React.FC<TrendProps> = ({ monthlyData = [], totalData = [], det
   }
 
   return (
-    <div className="w-full max-w-screen-xl mx-auto p-4">
-      <h1 className="text-3xl lg:text-5xl mt-16 font-bold text-center mb-2 dark:text-white">Chinese AI Model Release Trends 📈</h1>
+    <div className="w-full max-w-screen-lg mx-auto p-4">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="text-3xl lg:text-4xl font-bold mb-2">Chinese AI Open Source Trends 🤗</h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            Track the growth of Chinese AI models and datasets over time
+          </p>
+        </div>
+        <Link 
+          href="/heatmap"
+          className="px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors"
+        >
+          View Heatmap
+        </Link>
+      </div>
       <p className="text-center text-sm mb-8 dark:text-gray-300">
         Track the growth of Chinese AI models and datasets over time
       </p>
@@ -376,23 +390,19 @@ const TrendPage: React.FC<TrendProps> = ({ monthlyData = [], totalData = [], det
 
 export const getStaticProps = async () => {
   try {
-    const allModels = await fetchAllModelData();
-    
-    if (!allModels || allModels.length === 0) {
-      throw new Error('Failed to fetch model data');
-    }
-
-    const monthlyData = generateMonthlyData(allModels);
+    const modelData = await fetchAllModelData();
+    const monthlyData = generateMonthlyData(modelData);
     const totalData = getTotalMonthlyData(monthlyData);
-    const detailedData = processDetailedModelData(allModels);
+    const filteredModels = processDetailedModelData(modelData);
 
     return {
       props: {
         monthlyData,
         totalData,
-        detailedData,
+        filteredModels,
       },
-      revalidate: 3600, // Revalidate every hour
+      // Revalidate every 12 hours
+      revalidate: 43200,
     };
   } catch (error) {
     console.error('Error in getStaticProps:', error);
@@ -400,10 +410,10 @@ export const getStaticProps = async () => {
       props: {
         monthlyData: [],
         totalData: [],
-        detailedData: [],
-        error: 'Failed to load data. Please try again later.'
+        filteredModels: {},
       },
-      revalidate: 60, // Retry sooner if there was an error
+      // Retry more frequently if there was an error
+      revalidate: 3600,
     };
   }
 };